As the year comes to an end, I've rounded up my favourite coding resources from 2016. These ebooks, tutorials and site don't just keep me on my toes as "the freelance writer who gets tech" - they showcase some pretty cool code too.
Let's ease you in gently to my favourite coding resources with the 100 most hearted CodePens of 2015. CodePen is filled with common coding challenges and this diverse top 100 from last year are an addictive, but brilliant, way to learn to code.
How does the internet work?
t's a fundamental question that most web experts may have trouble answering. So, take a look at this article, which is crammed with great resources to understand the underlying technology behind the internet: Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work.
It includes 24 libraries to help you design responsive UI elements, build flexible widgets and validate your forms. And it's growing all of the time as you can add your own resources via GitHub.
The @supports rule in CSS, also known as feature queries, is a powerful tool that lets you check if a particular CSS property or value is supported by a browser or not. Jen Simmons shares her tips about feature queries in a comprehensive article over on the Mozilla Hacks blog.
Michael Scharnagl decided to tackle the task of building a comment form differently and shared his Guide To Progressively Enhancing A Comment Form this year. The basic version is an HTML form that will work in every browser.
Matthew Ström explained how to take the pain out of large data tables with a range of tips and tricks to get things right using typography and alignment, for example.
And, if Sublime is your text editor of choice, then the Sublime Tutor is a great interactive keyboard shortcut tutorial for Sublime Text 3. It gets you learning by doing, with exercises and shortcuts to familiarise you with the editor's features. The tutorial is divided into six modules and 39 chapters that cover 70 features and shortcuts.
The HTTP/2 protocol was also released this year and, if you want to find out more about it, check out this guide: Getting Ready For HTTP/2: A Guide For Web Designers And Developers.
There were plenty of resources available this year to develop clean, smart and fast websites with WordPress. Here are a handful of my favorites from Smashing magazine:
This year, designers sprinkled more animations and transitions across both their mobile apps and websites. Material Design contributed in this space and their piece Can You Code This Concept?, which gives an interesting insight into five UI concepts and their CodePen implementation. Check out Volume 2 as well.
You don't have to learn news tools or languages to bring motion to your design though, as this CSS Animations Pocket Guide from Val Head explains. The 65-page book gives you a solid foundation to start experimenting and creating animations with good ol’ CSS. Val also shared her insights into how fast UI animations should be.
If you're more interested in integrating animations into your work from a UX perspective, check out this article: How To Integrate Motion Design In The UX Workflow.
If you prefer to work in Photoshop, this tutorial on Creating Advanced Animations In Photoshop shows how this concept has progressed in the last few years. From a revamped Timeline panel, the introduction of video layers and keyframe animation, Photoshop definitely upped its games this year. And these Free Photoshop Tools For Web Designers are a great resource too.
Typefaces and Typography
If you want to understand the basics of typography, check out this guide: Tools And Resources For A More Meaningful Web Typography
I'd also recommend the Type Terms typography cheatsheet if you struggle to differentiate your “counter” from your “terminal”. It will help you understand the basics of typography jargon and uses small, animated graphics to accompany each term's description, which is kind of neat.
A great eBook on this topic was also released by Tim Brown this year. It was originally published in 2013 but, after Five Simple Steps closed their doors, the “Pocket Guide To Combining Typefaces” lived on as a free download.
The physical booklet is a staple across many college curricula and is regularly cited in conference talks by leading designers. Covering the basics of type and typography, the eBook gives you strategies for selecting typefaces and explains why some combinations do work, while others do not.
The Colour and the Shape
Nathan Curtis, founder of UX firm EightShapes, shared his tips to set up two of the key components that belong in every design system: colour and buttons.
It's an interesting read and Nathan also wrote up 16 practical takeaways to help you produce harmonious and engaging palettes that integrate accessibility considerations into the design process early on. His tips on creating a system of buttons also reminds us that the small details count when you're trying to create a user-friendly design.
And, if you're just starting out with colours, this guide introduces you to the basic concepts: A Simple Web Developer’s Guide To Colour.
The eCommerce Business
If you're designing an eCommerce site, this guide tells you how to convert browsers to buyers: How To Improve Conversions By Localising An App. Or, if you're launching a new product, this article How To Launch Anything gives some no-nonsense advice.
Best of the Rest
If that hasn't quenched your thirst for knowledge, here are a few other top coding resources from this year. You'll notice a certain bias towards Smashing Magazine - it's definitely my site of choice to keep up to date with the latest coding resources - happy learning!
All images courtesy of Smashing Magazine.
Hello. I'm the freelance writer who gets tech. So, I blog on three core topics:
Science and Technology
And I explain science with Lego in Sunday Science.
Need help with your blog?