Swift: Resolving Asset Catalog Compiler Warning

Fun thing happened the other day as I created a project to test out some code in XCode, I had initially set it to iPhone only by mistake then went back to set the app to Universal, only to encounter two warnings that had me puzzled as to how to resolve it. This isn’t a coding issue so much as an XCode thing as these were the warnings:


Having heard from Simon Allardice that warnings are not to be ignored, but addressed, I went to look in the Asset Catalog. Specifically the app icon that was throwing the warnings and was unhelpfully presented with this:


Where’s the 76×76 icon and why is it throwing me an warning about it? Turns out, XCode hides certain sizes of app icons that aren’t initially set upon project setup. To get those additional icon sizes, you need to display them by going through the utilities tab. Here’s how to do this:

1. Go to your Images.xcassets catalog.
2a. To the right, click on the Attributes Inspector icon. It looks like this for those ultra new to XCode:

2b. It’s tiny so you can easily miss it if you don’t recognize it. Look for it in the upper right corner of your screen. If you still can’t find it, you may need to activate the utility panel by clicking on this icon:


3. Once on the Attributes Inspector of the Asset Catalog, you’ll see a bunch of devices and iOS versions listed. Check the one that says, iOS 7.0 and Later Sizes. Like this:


4. Look to the right and tada! There’s the 76×76 icon that you’ll need to fill in with a 1x and 2x version. Once you have that, it should eliminate those warnings.


All right, so I felt like a huge n00b when I discovered what was wrong. Especially after what amounts to hours of digging around XCode and wondering what on earth I was doing wrong. A quick Google Search after I’d already solved my own problem revealed the exact same solution was answered on StackOverflow.

But you know what? This was such a rookie mistake and I felt so accomplished (even if it wasn’t coding related) that I had to post about it because I don’t doubt that someone else, somewhere is going to have this issue too. OK, laugh at me and let’s get back to work. 🙂

Simple Intro to HTML5 Web Storage

Way back in the day when Internet Explorer was the King of the Internet (unofficial title), it came out with a novel idea to allow webpages to store 64kb worth of data. With many things that IE came out with, later technologies came along and did it better. These days, we have HTML5 Storage also called Local Storage, HTML5 Web Storage and DOM Storage. What on earth is it and why is it useful in a web design perspective?

Why is it So Great?

Databases often store data components in what are called key/value pairs. What this means is you have a key which is used to identify values within a database. If I were to knock this down a few more rungs of complexity, a key can be considered a keyword which is used to identify some kind of data or value. That might be oversimplifying it a bit, but it’s as accurate as I can get without being too abstract.

Now, the value of a database on a website is huge, you can store all manner of things in a database which will then allow you to do even more things with a website such as allow user accounts, store user information, store company information, run a store and so on. Web Storage wasn’t really meant to replace the full on databases that tend to drive complex websites, but it does make some neat things possible.

For one thing, Web Storage keeps this data in your browser because it allows your web browser to hold onto it, even if you close your browser or move away from the page. This is an improvement over how things used to be done, which is when browsers would store this type of information in cookies. A lot of things can happen to cookies between the time a website stores information into a cookie and a user reopens their browser. Many people now set their browsers to clear all cookies when its closed. Others disallow cookies altogether. Another benefit is the information is never sent to the server and the storage capacity of 64kb has been increased to allow for larger chunks of data. Web Storage is earmarked per domain. That means that each domain is allowed to store a certain amount of HTML5 Storage data.

A bonus to Web Storage is that it’s supported by practically all major, modern browsers. Check out the caniuse.com page for more: Can I Use Web Storage?

What’s It For?

I guess it wouldn’t be helpful to just say, “a ton of stuff”. But what Web Storage allows you to do is detect and keep a small amount of information per user without worrying about storing that data on your server. It’s kept with the user for your domain and you don’t have to worry about client to server interactions as much.For example, you can use this as a way to allow users to set preferences on your website without requiring they sign up and have an account on your site. That way, you can offer some features that they can set such as a preferred language, currency or style. That preference will then be stored in their web browser using web storage and recalled the next time your user visits the site. All this without requiring they have an account to send, store or pull data from the server.

Ultimately, it’s about storing things without relying on cookies. Cookies have been known to be exploited before by Cross-Browser scripts, they can be cleared and removed very easily by the user, some users don’t accept them at all, they can’t keep very complex data, and their size is limited.

What’s In It?

Web Storage has two major methods, localStorage and sessionStorage. The difference between them is that localStorage does not expire and will share the data across all open windows and tabs and sessionStorage does expire after a session ends and only maintains data within the tab it was opened in.

In other words, when you close the window, exit out of the browser, etc. localStorage will keep the data and sessionStorage will release it.

Testing Web Storage

Simple, straightforward and to the point. You can test for Web Storage using this snippet of code:

if (localStorage) {
  // localStorage is supported.
} else {
  // localStorage is NOT supported.

Then there’s following code, which is derived from W3C and Microsoft documentation, and it works as a test case to determine if Web Storage is a) supported by your browser, and b) working properly. It’s also a great way to get a grasp of how web storage’s localStorage works. Go ahead and set up your HTML like so:

 You have viewed this page
 <span id="count">many</span>

We’re using a span with an ID of “count” because we’re going to check for Web Storage using Javascript. Now, because we’re using Javascript, don’t forget to include the link for the JS file in your HTML, or at least make sure you embed the scripts. I’m using an external file because it’s just good practice:

<script src="storage.js"></script>

Within your storage.js file or in your scripts area in HTML, enter the following:

if (!localStorage.visitCount)
    localStorage.visitCount = 0;
  localStorage.visitCount = parseInt(localStorage.visitCount) + 1;
  document.getElementById('count').textContent = localStorage.visitCount;

What we’re doing above is creating and instantiating visitCount with localStorage and set its initial value to 0. As users keep viewing the page, we iterate visitCount by 1 for each visit. Then we get the count ID element and output the localStorage.visitCount value onto the page.

Storing and Retrieving Data

Let’s do something a little more useful with web storage. I’m going to store a key/value pair and then recall it. Here’s my HTML:

<p>I heard <span id="person">Joe Smith</span> bedazzles their jeans on the weekends.</p>

We’re going to be reaching into that person ID and swapping it out with another value that we’ve set in sessionStorage. Here’s my JS:

sessionStorage.setItem('name', 'Jane Roberts');
var item = sessionStorage.getItem('name');
document.getElementById('person').textContent = item;

If things work out, you should be seeing your HTML page gossiping about Jane Roberts instead of Joe Smith. This becomes more useful when you pair localStorage or sessionStorage with user inputs. For example, you can ask the user to fill out their name then store it using Web Storage so every time they visit your website, they will be greeted personally.

Now, there’s a lot of security things that I’m actually a little worried about when it comes to Web Storage. Few people seem to be mentioning it at the moment, but like all web components that are interactive and store data, we should be aware that if something exists with even the slightest possibility of being used for malicious intent, someone will use it for that purpose. Smashing Magazine actually pointed me toward Evercookie, a really interesting piece that highlights some of the security concerns surrounding the storage of data.


Web Storage (Second Edition) W3C
Dive Into HTML5, Web Storage
Web Storage on Dev.Opera
MDN Web Storage Documentation
Smashing Magazine Local Storage

Bedazzling is cool.

Swift: Cocos2D and SpriteBuilder Developer Guide

Starting off a while ago, I attempted to get familiarized with the Cocos2D game framework. Things ground to a halt when I realized that 1) I wasn’t familiar enough with Obj-C to comprehend the same things within Cocos2D, 2) Things were transitioning to Swift at the time and so was I, and 3) There didn’t seem to be any guide that I could find to lay out the basics for the framework.

Fast forward almost a year later and a wayward Google search to figure out an unrelated problem sent me to a post by Steffen Itterheim. Following the link, led me to a handy developer’s guide that I realized was exactly what I had been looking for. Steffen did state in his post that it wasn’t well-known and he had posted it back in January 2015–and you know what? It’s still not completely well-known because I had to stumble upon it.

So here it is:

Developer Guide for Cocos2D and SpriteBuilder

I don’t know what’s up with the hard to find(edness) of this thing, but it’s an incredibly useful document for beginners like me looking to get into Cocos2D and using SpriteBuilder. Therefore, it needs to be shared and spread around as Steffen said.

As for my initial problem? I was actually looking for an explanation for why my graphics had to be scaled down by 10% within SpriteBuilder. Still no answers for that, but hey, at least I got the developer’s guide!


Developer Guide for Cocos2D and SpriteBuilder on MakeSchool
Learn Cocos2D


Re-Discovering Sublime Text & Shortcuts

Recently started using Sublime Text for a more extended period of time. I spent more time getting it up and running than Brackets, but I think I’m fairly happy with how it’s going. The main reason I switched back? I was teaching using Sublime Text and it was getting ridiculous not knowing the keyboard shortcuts and quick commands that come along with the program.

So I set forth, customizing my ST3 until I was happy with the functionality I had. I’m still working on getting as familiar with it as I am with Brackets and I still fall back on Brackets for a couple of features that I either can’t find in Sublime or assume aren’t in there without adding additional packages. This post is a summary of the packages I’ve installed and use as well as a list of shortcuts. Mostly as a reminder to me in case I ever have to rebuild everything from scratch or stop using Sublime for an extended period of time.

Packages I Use in Sublime Text

  1. Package Control
  2. AngularJS
  3. BracketHighlighter
  4. ColorCoder
  5. ColorPicker
  6. CSS Color Converter
  7. CSS Format
  8. CSS3
  9. FileSystem Autocomplete
  10. Foundation 5 Snippets
  11. Git
  12. HTML5
  13. HTML Beautify
  14. Javascript Beautify
  15. JSLint
  16. jQuery Tools
  17. PHP CS
  18. Placeholders
  19. SASS Tools
  20. SASS Beautify
  21. SCSS
  22. Sublimerge
  23. Swift Tools
  24. WordPress Tools

All packages can be installed using Package Control.


Color Picker: CMD + Shift + C (requires ColorPicker package)
Sublimerge Quick Panel: CTRL + ALT + D (requires Sublimerge package)

Commenting: CMD + /
Find: CMD + F
Replace: Shift + CMD + F
Move Tabs/Panes: CMD + 1/2/3/4
PackageControl: Shift + CMD + P
Select Line: CMD + L

Setting Automatic Line Wrapping

Go to Preferences > Settings – More > Syntax Specific – User

Enter the following onto the document:

"word_wrap": true

HTML Entity Encoding

I find myself using this a lot when setting eBooks for clients. To convert to entities:

Select all your code/content, then hold down Shift + CMD + P. Type in “en“, and select HTML: Encode Special Characters and hit the Enter key. Yay, your special characters have been converted to entities.


Modified Dimmed using Monokai TMTheme Editor.

Chances of anyone besides me finding this useful are kind of slim. But I figured I’d post it out there in case anyone was wondering how to call up the Color Picker or something.

Search/Replace Using Regex

Just make sure this little icon is selected to enable Regex searches: regexsearch


Package Control for Sublime Text
Sublime Text 3 (Beta as of this writing)

Wrapping Text With CSS Shapes (Shape-Outside)

CSS Shapes is a relatively new technology being developed by the team at Adobe Platform that not a whole lot of websites use yet, but will undoubtedly become very popular when more browsers support it with consistency. It involves Wrapping text with CSS Shapes. This allow you to flow text and other forms of content along the edges of things like curves, circles, ellipses. This allows designers to break away from the constraint of the rectangle. Flowing content along a curve or shape has been possible in print layouts for a very long time, but up until now was a pain to get working when it came to interactive design.

Browser Support

At the moment, CSS Shapes are limited to browsers at or later than Chrome 37, Safari 7.1, Android Browser 40, iOS Safari Browser 8 and Opera Mobile 24. Adobe has created a Shapes demo on Codepen, so if you were wondering if your browser supports Shapes, you can test it out quickly by going here: codepen.io/adobe/full/Brtdz

If your browser has CSS Shapes support, you should see something like this:

from: codepen.io/adobe/full/Brtdz

from: codepen.io/adobe/full/Brtdz

See how the text flows along the edge of the pottery piece? Pretty neat. I’m looking forward to being able to use Shapes once support becomes more widespread. For now, we’ll go over how to implement CSS Shapes so once all the browsers catch up, you can jump right in. By the way, you can check out up-to-date browser support information for CSS Shapes at: caniuse.com

Demo Files

You are going to need some demo files for this. You can always create your own, but I’ve gone ahead and made some to save you some time. You can grab those demo files by clicking here: Download Demo Files

A completed set of demo files will be provided at the end of this tutorial.

The CSS Shapes Property & Functions

The CSS Shapes property is shape-outside. Where the property will expect functions, typically in the form of shapes such as circles, ellipses or polygons. A typical CSS Shapes property declaration looks like this:

.my-circle {
 shape-outside: circle(50%);
 background-color: #3ea7c2;
 width: 400px;
 height: 400px;
 float: left;

In the above code, you have a class element selector identified as .my-circle. You’re also going to be floating your shape to the left of the container or screen and your element has a width and height of 400px. Ordinarily, without shapes, what you would get is a box that is 400px in height and width, floating to the left and has a blue color. Those things you should already be familiar with. The CSS Shapes property comes into play with the shape-outside declaration. Let’s break it down:

shape-outside calls the CSS property that will define the shape you wish to use in order to flow content outside of the shape.

The shape-outside property will expect the following functions:


circle() expects the parameters of radius, circle-x, and circle-y. Radius determines how big your circle is, in the code snippet above, we identified the Radius as 50%. In this context, it defines 50% of the width of 400px and the height of 400px. Circle-X and Circle-Y determine the center point of the circle. You can move the center point around to allow for some overlapping effects.

ellipse() expects the parameters of radius-x, radius-y, circle-x, circle-y. Because ellipses are not perfectly round, you need two radii to be defined. One for its x-axis and the other for its y-axis. The other two parameters of circle-x and circle-y are the same as they were for the circle() function, in that they define the center point for the ellipse.

inset() expects a top, right, bottom and left value with a border-radius. Inset is a little confusing at the moment because its functions are already covered by traditional uses of floats, padding and margin. It allows you create rectangle shapes that you will use to wrap content around. I won’t be covering inset much in this tutorial because (at the time of this writing) you are still better off using more traditional and familiar methods to deal with all the features that inset() allows.

polygon() expects parameters of x1, y1, x2, y2, x3, y3, … Because polygons deal with more unusual shapes than circles, ellipses and rectangles, they can accept as many x,y coordinates as you need to define the shape. So you could have a super complicated shape in the form of a tree and still be able to define the essential shape to wrap your text. Typically when defining a polygon, you need a minimum of three points or vertices to define a triangle. There is no maximum, but keeping polygons simple when all you need to do is wrap text will save you from headaches in the long run.

Using CSS Shapes Demo – Circle()

I’ve set up some files we can use for this demo and you can grab them by clicking here. Nothing very complicated, just some images, html files and css files inside of different folders. One folder for each of the four demos we’ll be doing in this tutorial. If you’d rather not use my demo files, here’s the HTML to start off for the circle demo (you will need to do the file setup yourself:

<img class="my-circle" src="circle.png">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

We’re going to create a circle shape first to flow some text around it. Open up the circle-shape folder and open the HTML and CSS files in your favorite editor. This is probably the easiest shape to do because it takes in the fewest parameters. So, taking a look at our HTML, we have this defined for our circle demo in HTML.

Note that the image has a class of my-circle which we will be using to define the shape later on. The above HTML shouldn’t be new to most of you, I’m just throwing an image on the screen with a paragraph of dummy text. Let’s take a look at the CSS. You should have this:

.my-circle {
float: left;

I have defined a class of my-circle and set it to float to the left. Now, let’s add in our shape declarations. I’m going to start by defining the height and width I want my shape to be. Because my image is 400px by 400px, that’s what I’ll also set my height and width to. If you had a circle image of 235px width by 235px height, you would then probably want to define 235px for width and 235px for height for instance. So now you should have this:

.my-circle {
float: left;
width: 400px;
height: 400px;

We don’t have much of a shape yet, so let’s define our shape-outside property so that text will start wrapping:

.my-circle {
shape-outside: circle(50%);
width: 400px;
height: 400px;
float: left;

In the above shape-outside declaration, I defined the property shape-outside because I want to wrap the text outside of the shape instead of inside. I’ve defined the shape as a circle so I use the circle() function and set its radius to 50%, which means it starts in the center and will use that point to draw a circle that will have a total width of 400px by 400px. Why use 50% instead of 100%? Because at 100%, you will start in the center of a circle and it will draw out on all sides by 400px and you will end up with a 800px by 800px circle. Instead, we use 50% so the center point will only draw out by 200px and you will then end up with 400px by 400px worth of circle. Remember, the radius starts in the center of the circle. I know how elementary that is, but it’s super easy to forget stuff when we’re focused on learning something new.

So, if everything went off without a hitch, you should see something similar to this:

I won't win any beauty contests, but it works!

I won’t win any beauty contests, but it works!

If you don’t see what I have above, check your syntax and make sure you’re using a browser that supports CSS Shapes. Not all browsers do yet as of this writing so if the shapes aren’t working, think about looking at your demo file in another browser such as Chrome or a recent version of Safari.

Great! We got CSS Shapes working for a circle! Let’s move onto the Ellipse now.

Using CSS Shapes Demo – Ellipse()

Working with the Ellipse() function over the Circle() function isn’t much different, you’re still essentially dealing with a pretty simple shape, only this time, it might take an additional parameter. Open up the ellipse-shape folder you downloaded earlier. Here’s what I have for my HTML for the ellipse demo:

<img class="my-ellipse" src="ellipse.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

The only major point of interest up there is the changing of the image file name, the class to my-ellipse and the additional paragraph of dummy text. Otherwise, it should all be the same. Let’s go into our CSS where I have this:

.my-ellipse {
width: 335px;
height: 494px;
float: left;

So I’ve gone ahead and defined the width and height of my ellipse. Note that it’s two rather awkward numbers, but that’s OK. You don’t need perfectly round numbers for shapes to work and many times you won’t be dealing with perfect numbers, though doing so would make things a little easier. Now, even though we have an ellipse instead of a circle, this would still yield acceptable results:

.my-ellipse {
shape-outside: ellipse(50%);
width: 335px;
height: 494px;
float: left;

You define shape-outside so the text wraps on the outside of the ellipse and then we declare 50% and let the browser figure out the math by allowing it to divide the width and height by half and draw the ellipse based upon the values we set for those two properties. You will get the text to wrap around the ellipse just fine. But let’s say you want to do things the manual way and clearly define the Circle-X and Circle-Y parameters of the ellipse() function. What we would do is manually divide the width and height ourselves and plug them in like this:

.my-ellipse {
shape-outside: ellipse(167.5px 247px);
width: 335px;
height: 494px;
float: left;

This will allow you to define an ellipse around the image without using a straight percentage should you ever have the need to. If everything went well, you’ll get this:


Yep, that’s text wrapping around an ellipse all right.

Using CSS Shapes Demo – Polygon()

Polygons are exciting because you’re not just limited to using circles or ellipses, now you can theoretically wrap things around any crazy shape you want. Let’s open up the polygon-shape folder. CSS Shapes open up opportunities for designers to do things that up until now, they’ve only been able to accomplish within the realm of print design–or with a massive amount of time and frustration in code. Anyway, my HTML for the polygon() demo:

<img class="my-polygon" src="polygon.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Straightforward enough by now. Here’s my CSS:

.my-polygon {
width: 382px;
height: 300px;
float: left;

OK, let’s apply a CSS Shape to this polygon. Now the image itself isn’t a simple shape like a circle, ellipse or rectangle. It’s got an irregular shape that we want to wrap text around. This means we’re going to have to figure out the points in our coordinate system that we’ll need to declare in order to make the browser understand the shape its working with here.

Polygon() should be used when you don’t have a simple shape to work with and depending upon how detailed you want to get, you may be defining a lot of points. Thankfully, our shape is relatively simple, if we were to boil it down, we could probably define three vertices and be done with it. So before we can write our CSS Shape property, we should determine where our points are. Let’s say you were using the example image provided in the demo files:



We can see that the shape is irregular above so using polygon() is the right way to go. So when we go about determining the points of the above image, we’d look in the three major vertices. There is one at the very top, one in the middle and one at the bottom and they are all on the right side. Like this:


The red dots are the points that you want to determine.

Keep in mind that you can’t get away with defining just three vertices otherwise you have a perfect triangle. What we need to do is define the entire shape. So we need the two points on the left side as well:

That's a total of five points you need to determine.

That’s a total of five points you need to determine.

Now, finding out the points is actually pretty easy. Remembering what order they go in is the harder part. There a multitude of ways to find out the coordinate points of your image. For simplicity’s sake, you can just open up the image in an image editor like Photoshop and locate the points in there using the Info panel. There may be other ways to locate points that are easier and more efficient, but let’s just keep things simple for now.

So when all is said and done, I have the following point values for my sample image, point of origin is in the upper left corner:


The coordinates are listed X,Y. If were to extrapolate this into pixel coordinates for our demo, it would look like this: 0px 0px, 380px 0px, 303px 167px, 335px 300px, 0px 300px

Now that we have the coordinates for our image, we’ll extrapolate them into a parameter. Polygon parameters list X and Y pairs without a comma in between the two partners of the pair. But when you want to list a new pair, you will need to separate the pairs with a comma. It’s easier to show this than explain it in writing so your polygon() parameters should look like this:

0px 0px, 380px 0px, 303px 167px, 335px 300px, 0px 300px

See how each pair is listed next to each other with just a space to separate them? Then between each pair, there is a comma to denote a new pair is being declared. The above parameters are pulled directly from the image. We start putting in the points starting in the upper left corner and move around the shape in a clockwise fashion. So we start in the upper left, go to the upper right, then the point in the middle on the right, then the point in the lower right, then finally the point in the lower left. In our CSS Shapes code, the final declaration for polygon() should look like this:

.my-polygon {
shape-outside: polygon(0px 0px, 380px 0px, 303px 167px, 335px 300px, 0px 300px);
width: 382px;
height: 300px;
float: left;

If all goes well, you should have something that looks like this:


It’s beautiful! Sorta…

Wrapping It Up

So that was fun and pretty cool. The major thing to keep in mind is that CSS Shapes are still in development and aren’t supported by all major browsers yet. So while this will become something totally awesome and useful in the future, you should avoid using it in production code. There’s no harm in fiddling around with it though and still using it in your projects provided you have a fallback so users who don’t have browser support for shapes don’t end up staring at a mad ugly website.

If you’re looking for the completed demo files, you can find them by click here: Download Completed Demo Files


Now, if you just want to draw a custom shape and don’t necessarily have an image in mind, check out some of these neat tools for creating CSS Shapes:

Coveloping CSS Shapes Generator
CSS3 Shapes – CSS Portal

And some more CSS Shapes resources:

A List Apart, CSS Shapes 101
CSS Shapes Polyfill

Whales Are Weird Free Line Art or Icon Set

This is a free line art or icon set featuring whales. I had some time on my hands and decided to fill an exceptionally niche need where someone might need a bunch of whale icons or line art. You can find the download link at the bottom of this post, the set includes sixteen different whales or porpoises.

Free Whales Line Art Set

Whales Are Weird

A set of line art icons and illustrations done for fun. I have an affinity for whales (they’re not just weird, they’re also amazing animals) so I created sixteen icons to represent some of the major members of the whale species and a few members of the porpoise species too.

Whales, icons only free line art


Free Whales

Mostly done for fun, I don’t have a project associated with these illustrations, but if you have a need for some whales, check out the download link below for EPS versions of these icons.

If you do end up using some of these whales, it would be super nice if you send me a tweet @ironiondes, leave me a comment on this post or shoot me an email and let me know how they’re doing. 🙂


CC License

Creative Commons License
Whales Are Weird Line Art Set by Iron Ion Design is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Super Cool CodePens

Looking at the cool stuff other people have made on CodePen can eat up a lot of free time, especially when it comes to seeing how far web languages have gone over the years. Back when I was a kid, playing around with Javascript, it was already amazing if you could replace the default cursor on your website with a custom one. Bonus points if there was a trail of sparkles following the cursor around the screen. Hey, I’m a girl. Let me have my sparkly unicorn mouse cursor.

Anyway, some of the totally awesome CodePens I’ve been looking at recently.


Physics Experiment with a Ball


This one features a little red ball that you can move around using the WASD keys on your keyboard. The ball responds to physics that was written in JS. Curiously addictive and fun to play around with.

A Galactic Ring


Something about this is incredibly soothing to watch and extremely fun to mess with.


Card Input


This one has the potential to make for a really cool app case study. Heck, it’s cool on its own anyway.


Pure Parallax Stars


Looks super simple (but isn’t), and looks super nice.


Rainbow Spider


There is something immensely charming about this clumsy spider.


CSS Shake


Anyone with an addiction to coffee can probably relate to CSS Shake. My favorite is the crazy one.


Firewatch Parallax


Gorgeous visuals with a bit of CSS parallaxing.

Installing SASS on OSX Using Terminal

SASS is one of two CSS preprocessor languages (that I know of, if there are more, let me know) aimed at extending the power and functionality of CSS with the goal of improving development time and reducing repetition in code. As a preprocessor language, SASS requires that we have it installed before we can convert it back into CSS. Without getting into the nitty-gritty of why SASS is awesome, I’m going to walk you through the installation methods for SASS as of the writing of this article. Here’s what I’m going to be installing SASS on:

OSX 10.10.3 Yosemite

That’s about all you need to know for this one. The installation procedure for Windows machines are different and because I no longer run Windows, you may get more mileage following the steps outlined here: Impressive Webs Installing SASS on Windows.

OK, so let’s get started installing SASS on OSX. SASS was built on Ruby, which means you will need Ruby installed before you can even think about installing SASS. Most OSX machines already have Ruby installed, but most Windows machines do not, which is where a large portion of the differences between the two installation processes are. Let’s move onto installing SASS for OSX:

Step One: Locate and open your terminal app. The terminal icon looks like the following…

Step Two: Once you have Terminal open, you’ll want to type the following into the command line:

gem install sass

If everything went off without a hitch, great! Go to Step Three. If you’re like me and got an error, then welcome to the Unlucky Installers Club. We meet once a month and have drinks while complaining about how our lives have to be that much more difficult. Thankfully, this has a fairly simple fix. If your error looks like this:


Then all you really need to do is type this into the command line (don’t close Terminal, don’t restart your machine, just type this below where you got your error):

sudo gem install sass

Chances are pretty good that you have password protected your computer and it needs to ask permission from you every time it needs to install something or open a program that’s never been opened before. When Terminal asks for a Password, enter the same password you use to unlock your computer when you start it up or wake it from sleeping. After you enter your password, hit enter and it will install.

Step Three: You should be seeing this awesomeness which indicates that SASS was fetched and successfully installed:


Depending upon updates to SASS, your version numbers may be different from what you see above, this shouldn’t have any effect on how you install, run or use SASS in the future. Double-checking your installation to make sure it actually worked is always a good idea. Still inside of Terminal, type in the following:

sass -v

This will fetch the version of SASS and should return something like this:

Sass 3.4.14 (Selective Steve)

If you see that, or something similar to it, congratulations, you’ve successfully installed SASS on OSX. Now, before you rush off screaming into the sunset, you might want to check out the SASS Help File to get a better idea of the commands you’ll be using to convert your SASS into CSS. Type this into Terminal:

sass --help

This should give you a comprehensive list of the commands that you can use with SASS to perform various functions. The screen should look like this:


OK, your installation should be all done and good to go. Before we finish up, type this and hit enter in Terminal to disconnect your session:


Now close out Terminal. Wasn’t that easy?

Alternatives to Terminal Installation

So, I understand if just thinking about the Terminal gives you nightmares. So there are some alternatives that allow you to use and convert SASS without having to resort to the Terminal. Here’s a couple of recommendations that I’ve personally used…

Super simple to use and free! Mixture is a recent discovery for me and I tested it out. Great for preprocessing SASS into plain old CSS. And if you ever need it for Boilerplates, Templating or more then it’s a great option.

CodeKit is a paid app, but it has a lot of neat built-in features and makes converting SASS a snap. CodeKit costs $32USD (as of this writing) and is a one-time cost.

Both of the alternatives above will get you up and running with SASS without having to touch the Terminal. And you won’t have to use the Terminal to convert your SASS to CSS either. It is still recommended that if you’re going to be dealing with any amount of code, that you come to be familiar with Terminal because so many things can (or can only) be done through the command line.


SASS-Lang Documentation

Swift: Arc4Random Type Casting

I’ve been struggling like usual with a relatively simple problem the last two days this time, it’s getting arc4random_uniform to give me a randomized value from an array. Sure, it’s an easy problem for someone more experienced, so prepare to laugh.

It occurred to me to type cast arc4random the instant I saw the error. I don’t know why it took me so long to actually figure out how to do it, but a helpful StackOverflow solution pointed me in the right direction:

let myFruits = ["bananas", "apples", "oranges", "grapes", "cherries"]
 let randomFruit = myFruits[Int(arc4random_uniform(UInt32(myFruits.count)))]

The thing with type casting arc4random (bear with me here), is because it takes a UInt32. Which is an unsigned 32-bit integer, this is a number that cannot dip into the negatives–unlike a regular integer which can dip into the negatives. I was trying to get it to spit out a regular integer and Swift was having none of that. Beyond what I got up there, I needed to output three values instead of just one, so I iterated through the randomization using a for loop to get my randomFruit values:

for var i = 0; i < 3; i++ {
let myFruits = ["bananas", "apples", "oranges", "grapes", "cherries"]
let randomFruit = myFruits[Int(arc4random_uniform(UInt32(myFruits.count)))]

Up there is a standard for loop using a variable of i to interate 3 times. Each time the loop runs, it randomly chooses one of the values within the myFruits array and prints it out.

You should be able to get three randomized selections from the myFruits array at that point. Now, the values do get repeated, I haven’t worked out yet how to get it to select a unique fruit every time, but it’s a start. I don’t know if that code is great or ugly, all I know is that it works. If you have any suggestions for improvement, by all means let me know!


Randomly Select a Value Using Arc4Random_Uniform on StackOverflow

Why WordPress Themes Won’t Save You Money

While I prefer to do all my work in a 100% customized scenario, a lot of clients do request theme modifications. Many of these themes, they’ve purchased from ThemeForest or some other WordPress theme marketplace. And all that is fine and dandy, if you were just looking for something to build off of. The problem is, working with these themes versus building from scratch isn’t actually any faster or cheaper than finding a good ground up designer and developer to build something from scratch.

I know the allure of themes, many of them come with a lot of great features and WYSIWYG and built-in SEO or whatever. Heck, I’ve been tempted to create my own themes, but haven’t yet had the time to really dive into that kind of project. There’s nothing wrong with using a theme for your website, but you have to keep in mind that you can’t customize it beyond a certain point. Many themes will do really amazing things and offer some level of flexibility, but their basic structures will remain pretty similar because you can’t get away from whatever was originally laid out by the theme developer. And they try, I’m not dumping on theme devs. They do a lot of amazing, gorgeous work. I’m just saying not every business should cram their online marketing into a theme and then worry about customizing it later. At least, not if they want their marketing to be unique and easy to update.

Making the Case for a Ground Up Approach

Here’s the thing with customizing a theme or building from scratch, and I’m going to put it into a list because I am into lists.

1) Your developer will have to figure out how things were organized and coded by the theme developer.

The vast majority of the time, you’re not going to be able to get the original theme developer to come and work on your website. So very often, clients will hire out to another developer to come in and do modifications for them. The general line of thought goes that if you have a theme, most of the framework is already set up, so the developer you’re bringing in just needs to make a few adjustments here and there and add a new feature on top of the existing site and they’ll be done. Right?

The problem is, with every single project, where there’s an existing theme that the client wants to retain, I spend a good amount of time looking at the files, going through the code and getting into the mindset of the previous developer. I’ve done this countless times–hundreds of times–and I still spend time doing this ramp up for every project. The thing is, there are so many themes and developers out there and everyone thinks and codes just a bit differently. Code is an artform in a sense, because no one ever writes code the exact same way as someone else.

Code isn’t just code a lot of the time because while there’s a lot of standardized code, there’s also an unlimited amount of ways that things can be accomplished using code. And with HTML/CSS getting bigger and better all the time, there’s more code and more ways to do things than ever. All of that takes discovery time, which tends to add to development time, which means more money is spent and while the framework might be there, your hired on developer still needs that ramp up time to get used to the existing code.

2) Theme developers don’t support themes forever.

Some developers will stand by their product for the long haul, but many theme developers eventually drop support for the theme because they want to move onto something else–possibly another theme, a custom build for a client, an entirely different industry even. You can’t bet that a theme you purchased will stick around for the long haul because what’s going to happen when the developer stops supporting the theme? It might not continue to work as WordPress versions go up, certain conventions go out of date and your theme can’t be updated otherwise the entire site will break.

Can this scenario happen with a custom website? Sure. But at least with a custom website, you always have the option of calling the developer back and having them update your site to ensure it’ll work for WP versions in the future. I’ve been called in to fix or update themes that have been abandoned before, many of them ceased to work because of deprecated features that WordPress changed or removed.

Many times when a website stops working, or starts throwing blank screens at you, it’s a result of a faulty theme. This could cost a lot of money to get a developer in to figure out what’s going wrong, and related to point #1, it’s going to take that developer some time to absorb the existing code and do something about it.

3) Bloated all-in-one themes will cost you in the long run.

There’s a philosophy that I prescribe to when it comes to developing sites. And that is that I should never allow my client to be shackled by the theme or template that they’re using. What this means is that I will often (if I have the choice) develop from the ground up or choose a theme with as few built-in features as possible.

But, wait–why wouldn’t you just get the theme with the million shortcodes, and hundreds of built-in features that promises to save orphans from burning buildings? Because what happens when that theme stops being supported? Or WordPress updates and half of those built-in features conflicts with the new version of WP? What do you need millions of shortcodes for? Or what happens when you need to add a plugin to your site and that plugin conflicts with something in the theme? It happens all the time, and it’s usually as a result of theme bloat.

Themes are supposed to be about the aesthetics of the website, how it looks, basically. If you needed functionality, that’s what plugins are for. Yes, there is such a thing as plugin bloat too, but at least with the plugins, it’s a simple on or off. Malfunctions in features can be more easily diagnosed, and if one plugin does haywire, you can turn it off, fix it, or replace it. The same can’t be said for an entire theme where one built-in function ceases to work and you’re trapped still using the theme because the other built-in features you’ve been relying on are still fine.

This isn’t to mention that bloated themes often have superfluous features that end up slowing down the website and taking up massive resources. I’ve see themes that were 300MB – 400MB in size. Most of that went into features that most people won’t need. For example, why do you have 10 different pre-made color choices? Who needs all 600(?) Google Fonts natively hosted within the theme? It’s much better for optimization to only take what you need.

4) It’s not just about changing some colors and pictures. It never is.

There are a lot of great themes out there, beautifully written and flexible enough to take a lot of customization. But let’s face it, businesses are unique. Every single one of them has a special circumstance or situation and the only way to ensure that your business stands out in the website field is make sure it’s unique. You can only get so far with a pre-made theme. Sure, you can change the colors, swap out the images, add a couple of lines of code to style things just a smidgen different, but themes have had to be designed and developed a certain way to allow for that customization.

They’ve had built-in restrictions put on them because without those restrictions, things begin to go haywire. Columns don’t line up, images don’t crop properly, colors are mismatched and who knows what else. If things were just a simple color, text and image swap, you wouldn’t be calling in a developer for additional help. And even though you called in a developer and they did everything you needed them to do, a lot of websites built off of themes will forever give off the, “pre-made theme” vibe. That’s really where the whole thing comes full circle, isn’t it?

If you’re already calling in a developer to modify your theme so it looks how you need it to look, why not just build from scratch?

Again, building from scratch isn’t the right choice for every business. Some businesses thrive with premade themes that have had a couple of things about them changed. Others truly do need fully customized solutions. Just be aware that a theme will only cost under $100 if you never plan to change anything about it but the colors, text and images.

A Few Words About Logo Salads

Here I thought I was the first person to use Logo Salad. Evidently, others have been thinking the same thing:

Logo Salad on Urban Dictionary

Stop using logo salads on your websites. It’s cliche, and pretty meaningless. I mean, unless you designed those logos, in which case, you’d probably get better results from displaying them in a better way that tossing them into a section where the user doesn’t know where to look because there’s logos everywhere.

That and I hear logo salad isn’t nutritious.

Anatomy of a CSS Rule

One of the basic skills in CSS is knowing the anatomy of a CSS Rule. A CSS Rule is a chunk of code (written in CSS) that styles certain components in HTML, typically its element, class or ID. There are other ways to style HTML components, but they’re a little beyond the scope of this tutorial. The following is a walkthrough of the basic anatomy of a CSS Rule.


The above CSS Rule is a very basic block with an HTML Element selector and a declaration block. The Selector highlighted in red is typically the HTML component that you want to target with your CSS to style. In this case, we’re targeting “p”, which is usually considered to be the <p> or paragraph tags in an HTML document. Other types of HTML Elements include <h1> to <h6>, <span>, <ul>, <li>, etc.

The declaration portion of the above diagram represents the Declaration block. Declarations are typically the properties and value pairs that are used to describe specific aspects of the selector that we want to change. In the above example, we’re setting the size of the font to 1.4em (16pt or 22px), and the color to #888888, which is a medium grey color written in HEX.

So those are the two basic components of a CSS Rule, but there’s more to it. Check this out…


This is the usual CSS Rule Anatomy diagram you’re going to see. Here we’ve got the Selector and the Declaration as we saw above. Except now we have two other components within the Declaration block. Property in orange represents the type of setting we want to change using our CSS. Types of properties depend upon the type of Selector we’ve targeted as some are compatible with certain properties while others are not. The Selector we’ve used in this instance is a class selector called “.roses”. The dot infront of “roses” is what gives it away as a class, possibly applied to a DIV element like this:

<div class="roses"><p>A Dozen Roses</p></div>

Since we know in our HTML that .roses is a class of a div, we know that we’re dealing with a Block element, and therefore, can use typical Block properties on it such as setting its background color. Some properties work whether you’re dealing with a Block or Inline element.

In blue we have the Value which represents what the property should be set to. For example, background color is being set to #f8f8f8 which is a very light grey. And the font-family property is set to Helvetica, Arial, Sans-Serif fonts. Properties in CSS usually need an accompanying value. Otherwise, the properties won’t know what settings they should apply and will therefore do nothing.

You may have noticed that there are two Curly Braces (I call them fancy brackets personally, but in the interest of not confusing anyone…), they wrap around the Declaration block. This is typically done so CSS understands where to start the declarations for a particular Selector and when it should stop. You will also notice Semicolons after each declaration is completed. This is again done so CSS knows when to stop applying values to a specific property. Finally, you’ll notice the Colon after the property, this is so CSS knows you’re done writing the property and are going to move onto writing in the values for that property.

OK, let’s take a look at one last example…


The above example is the same as the previous one except the Selector is now an <a> instead of a class. Our Selector also as a second component to it highlighted in purple. This is a Pseudo-Class. Pseudo-Classes are used to detect the state of a selector. For example, :hover is used to detect when a user hovers their cursor over the selector. There are other types of Pseudo-Classes that are used to wait for user responses too such as :focus which waits for a user to select something. Some Pseudo-Classes aren’t specifically waiting for user input and are instead used to target specific elements within HTML such as :first-child, which locates the first member of a selector type.

So there you have it, a run-through of a CSS Rule’s anatomy, plus some bonus tidbits.


MDN Pseudo-Classes Documentation

Flappy Bird-Like Games & Swift Countdown

Seems to me like everyone and their cousin has a Flappy Bird knockoff on the app store. Call me slow on the uptick, but I only recently discovered that App Flipping existed. I don’t like the industry or the approach. But I can’t deny that if someone makes a buck flipping apps–then they’ve–made a buck (I guess)? The thing is, I don’t know if it’s because Flappy Bird is easy to make, there’s a ton of tutorials that teach people how to make it, or if there’s just a lot of abandoned source code for it out there. But it’s like a 1/10 chance (not scientific) that when you look a dev’s portfolio, they have some kind of Flappy Bird thing.

Of course, there’s also a ton of tutorials out there that pretty much show you from start to finish how to make a game just like it. I found this one to be one of the better ones (Obj-C): Learn to Build Flappy Bird by MakeSchool.

Countdown Timers for Swift/Spritekit

That’s not what I worked on today though. I was actually working through building a countdown timer as one of the small components of one of the games we’ve been working on. The point of it was to start the countdown and delay the code when the user reaches a certain screen. Initially, I tried to make the countdown by just using NSTimer and was having all kinds of errors pop up and once those errors were addressed, I still couldn’t get the timer working. I then used GCD (Grand Central Dispatch), which evidently ignores some components in a game’s pause state.

Probably the best way to learn is by making mistakes, and building really bad code. Then going onto StackOverflow and discovering a much better way to accomplish what you were trying to do and then realizing you were wrong for the last week. After the self-defeat washes away, you plug in the code and proceed to understand every single character in it as well as the theory behind it so that the next time you want to make a 58 line countdown timer (I know, I know), you’ll realize that you weren’t thinking about it hard enough.

Here’s the code that helped me get to where I needed with the countdown: Pausing a Scene with SKAction for Swift/Spritekit

In other news related to the app, I just finished the last of its over one hundred graphical assets and I’m looking forward to putting those together and seeing them actually working in the app itself. We are going to be tackling the data handling next so I’m sure you’ll be hearing about that soon.


Some of the stuff I looked at this past week…
SKAction Documentation (Apple)
SKAction.waitForDuration Troubleshooting on StackOverflow
Fetching Data from the Web With Swift (Trivia App)
The Mobileys
Marketing an App Infographic

Swift: A Designer Tries Learning Swift

I’ve been wrestling with Swift for a few months. Before that, it was Objective-C. Of course, I’m talking about Apple’s development languages for their mobile platforms. Truth is, I don’t know how far I really am because some things make sense and some other things that should make sense, don’t. What I’m going to start doing is talking about my learning process with Swift. I had started out with Obj-C and then had to stop because it seemed as if Apple was trying to move away from it. That moment when I realized close to a year’s worth of banging my head on the wall with a language they were going to move away from was probably pretty funny–unless you were me.

Sure, I know the foundations are the same no matter what language you pick, but trust me on this, aside from some very old C++ knowledge, HTML, CSS, Javascript and PHP, I’m pretty much a greenhorn. I know it doesn’t sound like it, but I am. There is a difference between frontend development and programming for applications, especially while learning swift.

A couple of weeks ago, I had the pleasure of reading Chris Bowler’s blog: One Man’s Journey to Learn Swift. Chris put a hold on his project because of an awesome career opportunity, so I reached out to him expressing my interest in picking up where he left off. I liked his honesty and approach, the fact that he documented the frustrations that I can so readily identify with.

Here’s Where I’m At Learning Swift

I’m a UI/UX designer and front end developer. You can see a summary of skills on my about page. What isn’t listed on there that is somewhat relevant is a brief period of time that I spent with C++ almost a decade ago. I also used to work with Actionscript 2 and then Actionscript 3–that was also a few years ago. The rest of the time, I’m an HTML/CSS/JS/PHP kind of gal. I am by no means a programmer so when you read these entries in my blog and you feel like screaming because I’m missing a basic component–it’s not on purpose. 🙂

What I am Trying to Do

Like Chris, I have an idea for an app. Well, actually, it’s several ideas that my husband and I want to get off the ground. We’re more interested in making games than utility applications though, which adds an additional layer of complexity to the whole mess. My one saving grace is my better half. He has programming experience in C/C++, he also picks up on this stuff a lot faster than me (probably because of the programming experience).

I don’t expect to be dropping apps on the app store in a year, or even two years. But this isn’t about pushing out a bunch of apps, it’s about improving my skillset because I would like to offer application programming as a service one day, or even just using learning Swift as a launchpad into more in-depth application programming. And at the very least, I want some of these ideas out of my head.

My Resources

All right, since I’m already a few months into this process, I’m going to share what I already went through. When I was first starting with Obj-C, I was buying books (yes, I’m old school). That was a frustrating experience because the time I had to dedicate to Obj-C was less than an hour a day and it seemed like every time I was close to finishing a book, something about the language was changing and the next thing I knew, the book was outdated. So it truly felt like I was making strides forward, then having to stop and take a few steps back, I did make it through one book completely though. I know there’s a lot of chatter amongst devs that Obj-C is difficult to learn and intimidating–it is, but it isn’t insurmountable. Anyway, I can recommend this book:

Objective-C Programming: The Big Nerd Ranch Guide (2nd Edition) by Aaron Hillegass & Mikey Ward

It’s short enough that you should be able to surge through it. OK, so that was Obj-C. Let’s talk about Swift. One of the things I promised myself when I started down the Swift path was that I wasn’t going to buy any books. The first place I started was on Lynda.com where A fellow named Simon Allardice publishes his excellent series teaching the basics of Swift along with some theory. I liked Simon’s approach because while he rehashed the foundations, he also took the time to explain why things were done the way that they were. I recommend his courses:

Swift Essential Training by Simon Allardice
Comparing Swift and Objective-C by Simon Allardice

That second course was actually very useful, especially if you already know Objective-C. After Simon’s courses, I went off and started poking around with Swift on my own. Managed to make a very inefficient (but it worked) text-based, choose your own adventure game. In an attempt to figure out some of the errors I was encountering while making the text-based game, I came across MacHeads101’s YouTube Channel where he recorded himself trying to learn Swift for the first time. Now MacHeads101 already has programming experiencing, and a lot of it. But it was interesting and surprisingly helpful to see how he troubleshot errors. I watched the following videos:

“Learning Swift Attempt #1 – Creating a Calculator” by MacHeads101
“Learning Swift Attempt #2 – A To-Do List App” by MacHeads101
“Learning Swift Attempt #3 – Draggable Views” by MacHeads101
“Learning Swift Attempt #4 – Operator Overloading and Objective-C Bridging” by MacHeads101

He was using the beta version of Swift, and I was using Swift 1.2 so some of the things he did threw errors for me and some of the errors he had weren’t showing up for me. Still, it was a great learning experience because it forced me to figure out how to fix the errors I had. I don’t know if it was just me, or if anyone else felt helpless whenever they discover they had an error in their code. It was especially frustrating because any errors I had in HTML/CSS/JS/PHP, I was usually able to tell immediately what was causing it–not so much with Swift. By the end, there wasn’t any reusable code, but I definitely felt better about troubleshooting my own Swift code.

Finally, I was starting to do more with Spritekit. That was pretty much when I found Chris’ blog. At the moment, I am going through these component tutorials from iOScreator:

iOScreator Tutorials

Chances are pretty good that an app will be released in the coming months, though the majority of the programming will be thanks to my husband while I work with the design and user interface. But I still intend to get good at this stuff because it is incredibly useful to know. I’ve always been fascinated with code and it was nigh time I learned an actual programming language. So I’m going to document by progress from here and going forward.

You’re going to read about all the embarrassing rookie mistakes I make, see some of my sloppy code, watch me get frustrated as I try to find help with Swift and end up with a bunch of Google search results about Taylor Swift, and maybe even laugh at me. And that’s OK. I’m still looking forward to it.

My Favorite Free Code Editors

There are so many code editors out there that when I was getting back into full-time web design, I couldn’t figure out which one to start with. So I decided to go for the most basic one and I’ve worked my way through a few to end up with the one I’m using now. This is a list of my favorite code editors that I’ve actually tried and used and my experiences with them.

All of these are free or shareware. Because with all the awesome free and open source editors, why pay for one? In no particular order, my favorite code editors…

Download | Plugins
Windows Only
When I was first starting things up again, I was primarily using a windows machine. Notepad++ was consistently recommended as a free code editor. In my experience, it worked and worked well. I used it as my primary editor for around six months before moving onto an IDE. Even after the IDE came into the picture, I still used Notepad++ as an editor for quick changes to simple files. There was a lot I like about this editor, it was lightweight, did everything I needed it to, it checks syntax and highlights code, was fast and had plenty of features and plugins.

Download | Plugins
OSX & Windows
Recommended by a student, I decided to give Brackets a try after feeling a little frustrated with how long it took to load up an IDE and recently having a falling out with my previous quick code editor. I now find myself using Brackets for a vast majority of my web design coding and only falling back to the IDE for more complicated projects. Brackets is fast and deceptively simple but it has a long list of awesome extensions and delightful built-in features. My favorite feature–which you might laugh at, but I find it so convenient–is the ability to see a preview of a color when I hover over the value.

OSX Only
TextWrangler was a good free option when I needed to do something quickly without a lot of other stuff to slow the program down or get in the way. It has a pretty good set of built-in extensions, but you will have to put in a little bit of time to find them. I stopped using TextWrangler because I wanted something with a few more features.

Sublime Text
OSX & Windows
Simple, extendable and feature-rich code editor. I used Sublime Text for a short period of time. It is shareware with an unlimited demo that will nag you occasionally to get the paid version. It has a great set of plugins that really make it shine. Ultimately, I fell out with Sublime Text when I discovered Brackets. The nagging isn’t too bad (it amounts to a pop-up dialog that asks you to purchase the full version), but I really didn’t want to deal with it anymore when there was another free editor that did most of what I wanted. Sublime Text, at the time, had more features than Brackets. But then, those features were also being covered by the IDE I’m using.

Code editors and their features change all the time. So, while the stuff I wrote above about which ones I went to and which ones I left behind may be current as of this post, who knows what things will look like in the future.

At the moment, I am loving Brackets for my quick coding and crack open NetBeans when I need more control. If you have other Code Editors you want to share that you love using, feel free to leave a comment.