My web work flow is constantly changing as the crazy world of web design is always on the move. Everything changes every day and what a website needs to do and look like is always moving with the technology that lets people view websites.

Coding

For writing actual web code stuff (javascript, html, css, php, etc) I've switched to Atom Editor. I have a bunch of packages that help smooth things out:

Atom Beautify
File Icons
Minimap
Project Manager

I was on a big Sublime Text kick but for some reason Atom Editor just works a little bit better for me. I was able to figure out project views in Atom Editor, and the Project List plugin lets me easily save projects and go back to them later. Atom Editor seems to have slightly worse performance than Sublime though, but that probably has a lot to do with installing way too many plugins.

Server

By far the easiest way to get something up and running quickly is running a local web server. I develop on Windows so I find a lot of success with Wamp. Wamp runs an apache web server locally so everything like php and mysql is running right from the start. I can screw around as much as I want locally before worrying about uploading it to any web server.

One thing to keep in mind though is that often my remote server is going to differ from my local server. My username and passwords might be different on my remote server than on my local server where I usually just use root for everything. To get around this easily I do a quick check of the server's IP address when running certain chunks of php code. Basically if my php method that checks the server IP address comes back with "127.0.0.1" which is localhost then I can run some things a little differently. Change usernames and passwords, and other stuff like change error reporting levels and whatever else is useful. This is a handy thing to know if you're developing locally and then moving to remote!

Php & mySql

I still stick with the tried and true combo of php and mysql. Some things have changed over the years with updated versions of php. Some of the mysql syntax has changed into this "mysqli" business that is supposed to be more secure, but basically I am still running on the same blog platform I wrote about 7 years ago now. It is a totally custom made set up that isn't too complicated, but making it completely custom and closed source means I'm not subject to mass vulnerabilities from stuff like WordPress.

Smarty

Using Smarty for my template system has paid off in a huge way with this redesign. A long, long time ago I used to just mash all of my html and php together into a horrible Frankenstein's monster mess of a website, but I was turned onto Smarty a while back and I've never looked back since.

If you're using php using a template system like Smarty is an absolute must in my opinion. Basically you can tuck all of your php away into some core php files, and then have your website use smarty template files that can easily insert data from your php sources. Basically the php's job at that point is to create Smarty template objects and then feed those objects the data they need. Smarty is not really mean to be a logic or programming type solution, but it does have some basic things that are more than enough to get by.

Essentially this made it so for this redesign I didn't have to touch any of my php. I did have to adjust a few lines in my php code because of how the layout changed. For example in my php core codebase I get all of the data from my Twitter feed. Originally my twitter feed was in my header template that appeared on all of my pages, but now it only appears on the sidebar of my blog. All this meant was that I had to feed the twitter data to my blog template instead of the header template. Beyond that all the changes were just done on my Smarty template.

Smarty creates a safe layer that I can screw around on knowing that I'm not going to destroy anything on the php side accidentally. When I finished the mock up of this redesign all I had to do was reference my old design to see what smarty tags I had to include for things like the sidebar entries, blog posts, and the data for the stuff on the games, draws, webs, and miscs pages. So with the same underbelly I have a completely new looking website. Neat!

Other Cool Stuff

For the front end side I made use of a lot of handy things from the web. jQuery for some fancy animation and ajax stuff. Lity for light boxing images. Google Fonts for the handwritten looking fonts, and animate.css for reference on creating the animations for hovering over certain things.

One of the things I love about web development is how open the entire world of it is. There are so many solutions for common problems that thousands or maybe millions of developers have hit, so it never feels like I'm working alone. The game dev scene has been approaching that steadily, but there is a level of openness and togetherness that the web community has right now that seems totally unmatched.

Web dev is also a good break for my brain which can be utterly destroyed by the near infinite complexity of video game programming.

May was a pretty good month! I managed to complete my new website layout (almost.) I'm still missing some art work that I want to do for the empty right side, but overall I'm happy have a new design rolling that replaces the one I made in 2011. It doesn't really feel like it was that long ago, but I guess time flies when you get older. Whoops.

I'm still spending a fair chunk of my time working on a project with a few really cool people. Hopefully very soon I'll be able to share what it is and maybe even talk about it a little bit on my blog or in other places.

That being said I haven't really had a lot of time for personal projects. I'm still trying to spend as much time as I can drawing, and some of the free moments I have I spend working on my Pathfinder Character Sheet manager. I just recently added the ability to translate it to any language, and someone has already translated it to German. More on that later!

Sorry that it has been eerily quiet around here. Working on a secret thing is kind of new to me and I'm totally not used to not being able to openly share what I'm working on. I haven't streamed in over 6 months because I'm just not sure what I would stream. I am starting to feel a little bit of that itch though to get back to coding something games related. Maybe Otter FNA can be revived soon... but I got stuck in a lot of different problems trying to put it together. Starting to realize that I'm probably not smart enough to be making my own engine/api and I should probably start putting time into learning something else. But I love C# way too much, and there are no other solutions out there for 2d games and C#. Technically yes Unity does 2d and uses C# but Unity just feels like over kill and is painfully slow for me to develop in. Augh!

Anyway that's all I'll say for now. I feel like I could expand on a couple of these thoughts later as full posts, but some of these things I've already talked about at length many, many times.

Oh I'm still pretty anxious and stuff but at least I'm having fun on this small team project which I can't wait to show off at some point. Yeah!

Here's another hot web tip! Did you know about border-image?! It's what I've been searching for in my web design projects since I was 14 years old.

So lets talk about the world of designing image intense websites before I discovered the magic of border-image. In order to have a div element have some sort of image border I had to take an image and slice it up a bunch of different ways depending on how dynamic the div was going to be. If it was a div that would only ever stretch vertically then I could get away with 3 images: one for the top, another for the bottom, and the last for the repeating vertical portion. If the div was going to be stretched both vertically and horizontally then the number of images increases to a whopping 9! Each corner, each side, and the center. Sometimes this is known as a nine slice in certain user interface contexts.

Way back in the day when it was only possible to have one background element inside of a div I had to do things like have multiple layers of divs in order to display each background image. Three slices of an image meant three divs to display it properly. Nine slices meant nine divs! As you can imagine this makes the html look bloated and messy.

I knew when making this blog design I wanted to go with some kind of hand drawn sort of look, so I wanted to have a look for fonts that would match. Way back in the day getting a font to render that wasn't on the end user's computer was a gigantic pain if not nearly impossible.

Up until pretty recently the main solution I went to for custom fonts were some pretty complex solutions involving making a canvas and rendering the font to it like an image but somehow also using some weird magic to make the text selectable as if it were normal text... but those days are gone! Now modern browsers with css can load almost any font imaginable.

For this site design I was luckily able to find a couple of things that I liked on Google Fonts, which has grown in size enormously since I last checked in on it. There's now an entire section for hand written looking stuff, and since Google hosts all of the data for using a font it's an incredibly simple addition to your html and css files to get it up and running.

Beyond that if what you're looking for isn't available on Google then you can turn to the services of Font Squirrel. Font Squirrel does not offer hosting of the font data files like Google does, but it does have a huge selection of fonts already ready to rock. On top of that Font Squirrel allows you to upload fonts to convert into web friendly versions. The only gotcha with this however is that you need to be sure your font is licensed in a way that allows you to do this. The big advantage with the fonts already available on Font Squirrel and Google is that they've already been cleared in this way.

Getting custom fonts up and running in web browsers is easier than ever, but this is a great power that requires great responsibility... or whatever, who cares, go all out. Just think of how many options we have beyond Comic Sans now!

One of the things I always make sure to include on any of my site designs is a cool way to view larger versions of images, and that usually involves using some sort of "lightbox." Nobody wants to click on an image and have it totally replace the page that they were browsing, or have it open in a new tab, right? Or maybe that's just me.

A lightbox is a cool way to have a full image display on a page without navigating to a new page, and without popping open a new window or a new tab in the process. Many many years ago light boxes were giant monstrosities of javascript and css that seemed to barely ever work when I tried to use them on my sites, but these days thanks to advancements in both js and css they've become a lot more simple to implement.

For my new blog design I went with a super simple lightweight bare bones light box called Lity. Lity boils down to a single css file, and a single javascript file, and was incredibly easy to toss into my design. There aren't any themes, or images, or crazy styles to worry about like so many of the other lightbox solutions I've tried in the past. Once the files are properly included in the html, all you have to do is add a data-lity attribute to a link element (the "a" tag) and Lity takes care of the rest.

I guess that's all there is to this post! Lity is a simple and fast solution to lightboxes, and seems to work well on mobile too which is pretty dang important these days. If you have any other suggestions on lightbox stuff let me know

While I'm on a web development kick I thought it would be neato to point out some of the cool stuff I used for my new layout. I'm still working on game stuff that I am not allowed to share just yet so I gotta figure out other stuff to talk about on here!

Turns out in the modern era of browsers and css you can get animations with almost just pure css. When I redesigned the Super Meat Boy website I added some animations to a bunch of elements with just pure css. For more info on css animations check this out.

I wanted to get some animations going for hovering over image links on my new design, and some quick searching lead to animate.css. This handy stylesheet is full of animations that are super useful, but not exactly what I was totally looking for so I had to modify some things to come up with my own.