A while back I was updating a web app that was targeted to desktop users. I wanted to make it more mobile friendly. One of the ways I did this was by changing the layout on different size screens. The app had a toolbar header that I wanted to collapse into a single icon on mobile devices.

On a lot of mobile apps this single icon takes the form of a hamburger menu. Whether you love this icon or hate it, it’s somewhat ubiquitous so I decided to use it. I wanted a simple version of the icon that when clicked would open an overlay to display the tools the header does on a desktop.

I was able to craft a very simple menu icon using a very small html skeleton and a tiny bit of CSS. Basically it’s an <a> tag with three spans inside. I used an <a> tag but you could just as easily use a <div> or any number of other elements. The spans are given height and width dimensions and a solid bottom border via CSS.

See the Pen Stacked Navigation Menu by Ryan Davison (@ryandavison) on CodePen.

That’s about it. If you want to play around with different approaches to your own icon you can edit this code on codepen.

For a while now I’ve been wanting to start writing JavaScript/HTML5 based games for the web.  I’ve always been drawn to simple games like the old Asteroids and Galaga where you have a ship and a bunch of bad stuff trying to destroy you. They’re easy to learn, play and waste your time with and yes, they give you that easy, addictive sense that you are actually accomplishing something worthwhile when you break your high score by one point.

One of the coolest modern versions of these old arcade classics is actually kind of useful. Ztype  is a simple shooter game along the lines of Galaga but you are shooting words and you have to type them in correctly or your ship doesn’t shoot. It’s an addictive game with great graphics and sounds.

But I needed something simpler to get me started and familiar with the game engine I had chosen to start with – Phaser. I found an amazing tutorial on how to re-build Asteroids over on zekechan.net. It is surprisingly straightforward, provides full code to check yours against, is easy to follow but goes in depth enough to take you through developing an entire game.

However, by the time I was finished building the game, I was a little bored with the idea of a ship trying to destroy asteroids so I switched it up a bit to include a political theme appropriate for the current presidential race. You can check it out at http://ryanrandom.com/ted .

EDIT 2020: I’ve long moved on from ryanrandom.com so the game above is no longer active.

A couple of months ago I started searching for “the best” code editor for web development. I wanted to see what was out there and how it compared to what I have used and was currently using.

Since most of my co-workers live in the .NET world I have access to Visual Studio, which I actually like as an IDE. I’ve used it to do a good deal of development over the last couple of years. But I wanted to explore more of what was out there for code editors that might be more lightweight, fun and available wherever I might want to use it (work, home, on the road…).

For web and desktop work at home I’ve used Notepad, Notepad ++ and Aptana and have never been really happy.

Notepad ++ actually works really well but I hate the interface (it’s boring and ugly rolled into one). Besides, it would be nice to use something platform independent for portability. On the plus side (sorry), in Notepad ++ you can configure styles and keyboard mappings and there;s a lot you can do with the preferences to make things work the way you want them to.

That’s actually the story with the majority of editors and IDEs out there today. Most of them have customizable settings and functionality either built-in or available through plug-ins or extensions. Some of them are geared toward specific languages or uses but most of them seem to handle the most common languages.

No Magic Bullet

I’ve come to the conclusion that there is no “best” editor. There are only ones with fewer annoyances than others. Out of the editors I have been trying lately there are a few I have only used for a few seconds (like Atom) and some I’ve done some heavy lifting with (like Sublime Text). My favorite so far has been Brackets, the open source project from Adobe.

Brackets

I really like the look and feel of Brackets. It has a nice flat design. It doesn’t overwhelm you with controls and menus. But that led me to pause and question – where are all the controls and menus? It turns out, a lot of your customizations are done directly through json files or through extensions. That’s great because I love working in json.

Changing the keymap is not as straight-forward as most code editors and IDEs but it is intuitive and simple. You just have to override the default mappings in the keymap.json file. I set up my block and single line mappings because the defaults almost always annoy me.

I’ve been using Brackets both at work and at home. In my home setup I use the live preview feature all the time. It’s only available through Chrome which is not a problem for me. I usually like to debug my HTML, JavaScript and CSS in Firefox (Firebug) but the Chrome developer tools work just fine for most things. Live preview is great because the Chrome page refreshes automatically every time you save your HTML file. I have a different setup at work which doesn’t allow for the live preview to work but I might be changing that soon.

Brackets really shines with its extensions manager. This is where you can install/uninstall user created extensions or Brackets themes. You can also search Github for extension, download the zip file and drag the zip right into the extension manager. It only took a few minutes to search for and install a few extensions to make development easier. These included Grunt, indent guides, code folding and code beautification(formatting).

I have notices some of the extensions can slow Brackets way down so that’s something to watch as you’re loading new ones up. Now I’m just looking for a reason to create an extension of my own or some reason to hack Brackets itself.

Organizing my css styles does not come easily. I like to just throw styles on the page when I need them and then forget about them. If I need to edit the style I can always use a Find or Search function for the id, class or tag name I need.

If you are the only one working on your project you might be able to get away with just using the search function in your IDE. You probably know (generally) where things are because you put them there. But organization is still important.

The real power of organization comes when other people use and modify your css. If anyone other than yourself is going to even look at your stylesheet you have to make if accessible.

There might be a hundred ways to put your stylesheet together in a logical, readable way. Here is one way that works for me:

1. It goes without saying to get your style definitions out of your html document. Putting your styles in a <style> tag really only works for an extremely small project that will never grow. If you want to scale your project, having your html and css in one page gets ugly. As far as inline styles, I only use them occasionally when I am dynamically generating certain elements. I never use inline styles in static html.

2. Use /**/ comments to explain and segment your external stylesheet. At the beginning of the .css file it is convenient to have a comment block that describes how the style rules are organized and the stylesheet’s relationship to other stylesheets, if there are any.

Some developers like to put common block level element (body, header, footer, p, h1 …) styles on a sheet separate from all other css. Others have separate sheets for each type of page on their site. This should be documented at the top of each css file to make style navigation easier.

A lot of my work is done for single page GIS apps so I usually have a single external css page. In these cases I note that this is the only css stylesheet for the app.

3. Everyone has their own favorite way of laying out their styleswithing the stylesheet. Some organize their ids and classes alphabetically while others might order them parallel to their element’s order in the html. I find that it makes most sense to group styles according to sections of the page. Sometimes I put css blocks in order of how the html sections are created but this isn’t always the case. Within each of these sections I try to further order elements from top to bottom as they appear in the html.

There are a lot of ways to organize css and what I outlined above is only one of them. The most important thing is just to have some form of organization and then be consistent in applying it.

I see a lot of CSS code written inefficiently and sloppily, even on official and professional sites. It’s not that the code is wrong, it just could be much better. There is really no reason to have to write four lines of code to set a div tag’s margins or style a tag’s background. You can simply use CSS shorthand to get it all into one compact line.

The reason many people don’t use shorthand is because they’ve never taken the time to learn it. Instead, they lean on verbose style rules that spell everything out.   Below you will find a few common examples of CSS shorthand code that might help you when writing your CSS code. This is in no way a definitive guide. It is simply some of the more common properties you will encounter. You can also download a brief CSS shorthand cheat-sheet.

Margin and Padding:

There are four ways to define the four margins and padding of a CSS box.

1. margin: [top] [right] [bottom] [left];

   Using four values defines each side individually. For example, margin: 1px 2px 3px 4px; would give an element such as a <div> box a top margin of 1px, a right margin of 2px, a bottom margin of 3px and a left margin of 4px.

2. padding: [top] [right/left] [bottom];

   This notation relies on the same concept as above but now we only need three values to define our padding. padding: 3% 2% 3%; would give our html element a top and bottom padding of 3% and a right and left padding of 2%.

3. margin: [top/bottom] [right/left];

   Here we only need two values to define our margins. margin 0 auto; gives a zero margin to the top and bottom and centers the <div> within its containing element.

4. padding: [top/bottom/left/right];

   A single value defines all sides of an element equally. padding: 1em; applies a 1em  pad to the entire html element.

Background:

The background property can be defined by this notation –

background: [color] [url(image url)] [repeat] [attachment] [position];

The color property can be defined using hexadecimal(hex) notation, rgb or color names. The image property is written with the prefix “url” followed by parentheses containing the url to the image you want to use for your background. Repeat is used to tile the background image. If you use attachment you can control whether the background image scrolls with the page or not. Position tells the background image what position to start at on the page. The following is an example of a background:

background: #ffffff url(‘greatpic.gif’) repeat-x fixed center;

Font:

The font property can be demonstrated by-

font: [size] [weight] [style] [family];

Font size can be defined with a number and a unit such as px, % or em or with size value words like small, medium, large, etc. Weight is simply the thickness of the font characters. Style refers to the values  italic, oblique, normal or inherit. The family refers to the font family like Serif, Georgia or Helvetica. Here is an example:

font: 1em normal italic Helvetica;

Border:

Border properties are relatively simple-

border: [width] [style] [color];

The border of an html element is easy to style. You just need to designate the width, color and style. Width can be written using pixels or the pre-determined width designations thin, medium and thick. Style refers to values like solid, dotted and dashed. Color is written the same as in the background property and can be a hex number, rgb numbers or a written color.

border: 2px solid blue;

There are a lot more shorthand properties for CSS. Even some of the ones I posted above have further properties that could be included. For a more complete look at CSS shorthand methods check out this page from Mozilla.