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.

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.

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.

As I transfer all of my framework making knowledge over to the land of FNA I've been trying to clean up a few things that turned out pretty dang messy in the original Otter.

In the Scene class of Otter it keeps track of Entities, and Entities have an Order and Layer. Multiple entities can be in the same layer, and can be in the same order as well. Order is the order in which they update every tick, and layer is the order in which they render. So what I usually do is have a sorted dictionary of lists. The dictionary sorts on an integer value that matches the value of the order or the layer, and the value is the list of entities that belong to that order or layer.

Old Otter has kind of a big mess of copied and pasted code for this system, so for new Otter I tried to make a cleaner version of it.

Another thing I'm looking to implement is a generic version of a "buffered" list of items somehow. A lot of times in Otter I don't want to add or remove items in a list in the middle of the update, so I end up buffering adds and removes until I get to the end of the frame and then all of them execute. I end up doing this in both Scenes for Entities, and in Entities for Components, so I'm rewriting a lot of the same code in both spots, but I'm still questioning if its worth it to try a generic solution for this or if it's fine the way it is.

Anyway I'm still on "break" for another couple of days. At this point I'm looking forward to my vacation being over!

Been working a little bit on getting tile maps set up in the FNA version of Otter along with a quick platforming movement test.

I'm still wrestling with some issues in FNA that I'm sure are totally my fault, but so far things have been working pretty nicely. Understanding the whole sprite batch drawing thing is still a little bit tricky for me, and I'm hoping that I can wrangle my familiar engine api into something that doesnt perform like garbage. Trying to manage when I should be calling End() and Begin() is a little bit more challenging than I hoped, and I don't want to just be calling them both for every single draw if I can help it.

I've hit a weird snag with my initialization process and render targets, and I think it's related to some kinda weird race condition that I can't pin down... but probably more on this in a future post.