Milly is a Leeds-based UI/UX Designer. Alongside a broad range of design and web-based programming skills, she also has a passion for gaming, gadgets and all things tech-related.
Aside from knowing the essential HTML/CSS/JS/jQuery combo, there are many other tools which can make developing for front-end a hundred times easier. Here are a few of my favourite tools for maximising workflow and efficiency:
Whether you write your own, or use a ready-built framework (Bootstrap, Foundation, Skeleton), developing a responsive website should already be something you integrate into your workflow, and if it’s not, that needs to change ASAP. A recent study by StatCounter found that mobile internet usage has recently overtaken desktop for the first time ever. This means that we need to code our websites in order to cater for an ever-expanding list of devices. Choosing which framework you use depends on your projects' requirements. Sometimes, fully-fledged frameworks are overkill for simple three page brochure sites. In these instances, using a minimalist system such as Skeleton.css could be the most efficient answer to your problem, or you could write your own. The more complete systems on the other hand have a whole range of features. They allow you to create completely different user experiences to suit the device, for example; you’re likely to want a much simpler layout on a mobile where there is limited space, saving the full experience for desktop users. These frameworks also tend to have excellent cross-browser support, extensive documentation and friendly communities/forums to help you along the way if you get stuck.
Mobile compatibility is one of the more frustrating things a client can change their mind about last minute because your whole layout will be built upon it. Eliminate this frustration and get into the habit of developing responsive layouts from the get-go. Your future-self will thank you when your client inevitably asks you to “add it in” the night before go-live.
Git was created in 2005 by Linus Torvalds, and whilst it’s been around for more than a decade, I’m often surprised to hear that some developers still don’t use it. Having some sort of source/versioning control really is essential, and is the first thing I set up when I start a new project. Git allows you to track, tag and comment on all changes to your code, and is especially useful when multiple people are working on a project at once due to its remote branching and merging capabilities. Having all of your changes tracked in this manner means you can easily see what has been done, when and by whom, and also means there are multiple versions to revert to if you end up breaking all of your code somehow. Branching allows you to work on separate “versions” at once, whilst leaving the “master” trunk alone and intact, allowing for easy feature adding, bug fixing and patch releases. Vanilla Git is typically used from the command line, however if you’re a visual person there are several GUI clients, such as Sourcetree, or GitKraken. Although it’s generally not recommended for large files, you can even use Git to track Sketch, PSD or AI files.
Icon sprite sheets are generally old news. These days it’s all about icon fonts or more recently, SVG icons (I’ll do another post on those soon). Icon fonts are a great and super easy way to add icons to your project. Simply download the font, include it in your project, then add them wherever they’re needed using a simple span or icon tag. Icon fonts use the CSS pseudo-elements and therefore allow you to change the size, colour, add shadows, strokes etc efficiently using code. Long gone are the days of editing image files ad-nauseam just because you want to see what the icon looks like in different colours. Icon fonts also go hand-in-hand with responsive design. Because they’re vector images, they scale seamlessly with the rest of your site; no need to create alternative versions for retina displays.
FontAwesome 4 (eagerly awaiting v5!) is a great one to start with; it’s free, it requires little setup and the library itself includes icons for most situations. If you’re looking for a more tailored solution, IcoMoon allows you to customise your own font icon collection. Last but not least, Fontastic allows you to actually create your own icon font from any selection of SVG files. The possibilities really are endless.
I cannot stress how much I love this and how it has completely changed the way I work. Emmet is a text-editor plugin that instantly expands simple abbreviations into more complex code. Let’s be honest, manually typing out tags, brackets, quotes etc is a pain in the backside and it takes up precious time. Although many editors have auto-tag completion, Emmet blows everything else out of the water. Emmet uses CSS-like abbreviations, such as class, child and sibling selectors, so it is immediately intuitive for anyone who already knows CSS. Intrigued? Let me demonstrate:
You start by typing out your abbreviation:
And then when you’re ready, you activate the Emmet compiler (e.g in Visual Studio the shortcut is Ctrl+1) and voilà! The HTML is instantly outputted as:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
It also includes other helpful shortcuts such as skipping to the next blank tag, selecting a whole tag, the list goes on. Emmet also includes some shorthand for writing CSS.
margin: 10% 30em 5ex
Emmet is the kind of thing that at first, it might seem like you spend the same amount of time thinking out the correct abbreviation than you would just typing the HTML out in the first place. But once it becomes second nature, you’ll really notice an increase in your productivity. There’s also something about seeing a huge block of code magically appear, it just feels awesome.
If you’re still using plain old CSS, you definitely need some sass in your life. SASS is a CSS extension language which makes writing CSS a thousand times more efficient by allowing the use of mechanisms often found in object-oriented programming languages such as variables, nested rules, loops and imports. The beauty of SASS is that you can set up multiple files which all use the same global variables, making tasks such as changing the colour theme of your entire website as simple as changing three lines of code. Goodbye, Shift, Ctrl+F! The SASS interpreter (which runs via command line) then compiles your code into normal CSS. The setup is completely customisable so you can choose your input/output file locations and set it up to “watch” them – this means any changes are automatically detected and then recompiled on save. No need to manually compile every time.
Its power becomes most apparent when you first use a framework such as Bootstrap in SASS format. Being able to change all the variables in a single files means that you can get rid of that predictable “Bootstrap look” and have a decent theme set up for your new website within minutes.
So there we have it, just a small selection of handy tools. When using all of these tools in conjunction, I hope you can see the benefit they have in maximising your speed and efficiency. As projects get bigger, more intense and more complex, sometimes leaving the computer to do the dirty work really helps free up time for more important aspects of the project, especially when there are deadlines looming. Technology is meant to be here to make our lives easier, after all.