More Web Resources
My break from game development ended up lasting a little bit longer than I expected, but I had a good vacation in the world of web design and development. Unfortunately the stuff I worked on is totally top secret, and will be for a little while still, but when it comes time to finally reveal it I'll be sure to post about it here.
There were a few more things that I learned or picked up that came in handy during this last project and I thought I would just share a few of them again.
Tumblr Custom Theme Documentation
This lastest web project involved using tumblr as the content management system. I haven't done any work with tumblr before, but it turned out to be pretty straight forward and overall really easy to work with. Unlike Wordpress I never have to even venture into php territory. Tumblr seems to use some kind of built in templating system that takes care of everything behind the scenes. The official documentation on how to build a tumblr theme actually ended up being the best resource for getting started on it. A lot of the other tutorials I found on theme building were already outdated, so I just stuck to using control-f on the documentation whenever I needed to know something.
Tumblr Boilerplate
This is a quick and simple tumblr theme that implements all of the essential tags. This was a great place to get started and see how the various tags work along side some HTML and CSS. There was one guide that recommended starting with this, and I used it as a guide when I was starting on a custom theme.
Open Graph Protocol
If you want posts to be shared around properly on Facebook then having open graph meta tags in your HTML is essential. You're able to define things like the preview image, description, and title of your articles, which can be very important for when your awesome web page finally goes viral with all the kids. Facebook and other social media things can parse some things from your site automatically, but sometimes the layout of your site will cause it to parse the wrong things so these tags are a way to overcome that.
Social Media Templates
Related to the Open Graph tags, here are templates that cover the rest of the core social media tags. The meta tags for Twitter and even Google+ are available here to copy and paste into your web zone. Once again just useful for controlling what info shows up when people share your site across various social media sites.
Tumblr Static File Upload
When working with a custom tumblr theme you have two main options when it comes to hosting resources. You can either host them all remotely on a separate web server, or you can just upload all of the files to tumblr and have them worry about it. I found that my work flow was best when using a remote server for awhile, and then when things were more concrete I migrated over to the tumblr server. Using the tumblr static file upload you can host all of your files directly on tumblr, but it comes more of a pain to modify and reupload files (like css, font files, images, etc.) Ultimately I think using tumblr's servers for the final product is the best bet.
Firefox Cross Domain Font Fix
This one is pretty technical, but is super important when it comes to using the @font-face properties in CSS with a custom tumblr theme. Firefox cannot load fonts across domains without explicit permission from the host domain. Since the tumblr servers do not have this permission properly implemented, any custom fonts you try to load with the @font-face property will just not load on Firefox. Apparently this is the correct behavior, but kind of annoying since Chrome doesn't seem to care at all where fonts come from. The fix is simple enough though. By encoding fonts as base64 data directly into the style sheet Firefox is able to load the font no problem.
I think that's all for now! Hopefully today I can dig back into game development work, but I had a lot of fun brushing up on the latest web development action.
There were a few more things that I learned or picked up that came in handy during this last project and I thought I would just share a few of them again.
Tumblr Custom Theme Documentation
This lastest web project involved using tumblr as the content management system. I haven't done any work with tumblr before, but it turned out to be pretty straight forward and overall really easy to work with. Unlike Wordpress I never have to even venture into php territory. Tumblr seems to use some kind of built in templating system that takes care of everything behind the scenes. The official documentation on how to build a tumblr theme actually ended up being the best resource for getting started on it. A lot of the other tutorials I found on theme building were already outdated, so I just stuck to using control-f on the documentation whenever I needed to know something.
Tumblr Boilerplate
This is a quick and simple tumblr theme that implements all of the essential tags. This was a great place to get started and see how the various tags work along side some HTML and CSS. There was one guide that recommended starting with this, and I used it as a guide when I was starting on a custom theme.
Open Graph Protocol
If you want posts to be shared around properly on Facebook then having open graph meta tags in your HTML is essential. You're able to define things like the preview image, description, and title of your articles, which can be very important for when your awesome web page finally goes viral with all the kids. Facebook and other social media things can parse some things from your site automatically, but sometimes the layout of your site will cause it to parse the wrong things so these tags are a way to overcome that.
Social Media Templates
Related to the Open Graph tags, here are templates that cover the rest of the core social media tags. The meta tags for Twitter and even Google+ are available here to copy and paste into your web zone. Once again just useful for controlling what info shows up when people share your site across various social media sites.
Tumblr Static File Upload
When working with a custom tumblr theme you have two main options when it comes to hosting resources. You can either host them all remotely on a separate web server, or you can just upload all of the files to tumblr and have them worry about it. I found that my work flow was best when using a remote server for awhile, and then when things were more concrete I migrated over to the tumblr server. Using the tumblr static file upload you can host all of your files directly on tumblr, but it comes more of a pain to modify and reupload files (like css, font files, images, etc.) Ultimately I think using tumblr's servers for the final product is the best bet.
Firefox Cross Domain Font Fix
This one is pretty technical, but is super important when it comes to using the @font-face properties in CSS with a custom tumblr theme. Firefox cannot load fonts across domains without explicit permission from the host domain. Since the tumblr servers do not have this permission properly implemented, any custom fonts you try to load with the @font-face property will just not load on Firefox. Apparently this is the correct behavior, but kind of annoying since Chrome doesn't seem to care at all where fonts come from. The fix is simple enough though. By encoding fonts as base64 data directly into the style sheet Firefox is able to load the font no problem.
I think that's all for now! Hopefully today I can dig back into game development work, but I had a lot of fun brushing up on the latest web development action.
Post your comment!