15 April 15 Sharpen your frontend developer know-how with three useful resources.

Every day I check out some awesome demos, websites and articles on the web. They inspire me to work harder, hone my skills as a frontend developer and produce work that people enjoy using.

Inspiring information wasn’t always easy to find. I used to wonder how to keep up in an industry that moves at such a rapid pace. There’s so much happening, it’s hard not to feel overwhelmed or left behind.

But it’s a good problem to have. It means I’m working in an exciting industry. People are building cool stuff daily and sharing it through different avenues. I just needed to know where to look.

In this article, I cover off three ways to help you find some awesome resources to learn more about web development.

Whether you’re starting out in frontend development, you’re a designer who wants to know more about this space, or you just have a keen interest in web development, I hope you find the resources below interesting and useful.

1) Podcasts.

Podcasts are a great way to take in information. Just chuck one on and listen as you work.

There are two good podcasts I would recommend, both of which feature Chris Coyier as one of the hosts. These are Shoptalk Show and Codepen Radio.

If you don’t know Chris, there’s a good chance you may have come across his site CSS Tricks at some point. It’s been around since 2007 and, since that time, his articles have pretty much touched on every topic relating to web development.

If you have ever searched for something to do with coding, Chris’ site is likely to have come up first in the results. As well, as running CSS Tricks, Chris is also the designer at Codepen.

Shoptalk Show.

Shoptalk Show is a live podcast hosted by Chris Coyier and Dave Rupert, a lead developer at Paravel. Dave describes the Shoptalk Show as “a sound-effects podcast that also covers web development”.

The podcast uses a question-and-answer format. The main focus is frontend development, but it also covers web design and user experience.

Upcoming guests are posted on the Shoptalk Show website and on Twitter. Listeners submit questions in text and audio format prior to the show.

Dave and Chris chat with a featured guest on what they have been working on and what they do day-to-day. They discuss news and controversial articles in the industry before launching into answering listeners’ questions.

You can check out the podcast live and contribute to the discussion via an online chat room. The pair also do another type of episode called ‘Rapid Fire’, which aims to answer as many listener questions as possible. You’ll find answers to commonly asked questions here.

The handy thing is, you don’t need to listen to the whole podcast to get a lot of value from it. When you go to the Shoptalk Show website you’ll see each episode has its own page where you can view the transcript, show notes and questions with skip links.

Shoptalk has been running since early 2012, and over more than 150 episodes it has featured (and continues to feature) some awesome guests.

Listener questions are categorised by the topic the guest specialises in. Episodes I’d recommend listening to are:

• Sara Soueidan: Shoptalk delves into the topic of SVG images. Sara first made a name for herself by writing in-depth articles on SVG properties when there were no good articles available. In this episode, they chat about current browser support issues, her process of creating SVG images, and tips on how to improve your SVG workflow.
• Hacker: A special episode where Chris Coyier interviews a hacker who used fake documents to gain access to Chris’s server. During the episode they go into what happened, why the hacker specifically chose to attack Chris’ servers and how he did it.
• Rachel Smith: Rachel specialises in animation/motion design at Active Theory. Active Theory produce some pretty experimental work, using tech such as WebGl & Three.js, and in this episode they discuss Witness Gotham, a project Rachel worked. The website is an impressive example of what’s possible on the web today.

Codepen Radio

Codepen Radio is a valuable resource that’s an offshoot of Codepen. Three people maintain Codepen: Chris Coyier, Alex Vazquez and Tim Sabat. The trio used to work together at Survey Monkey before leaving to create Codepen.

Codepen is a playground for frontend developers. It’s a code editor in the browser. It’s an easy way to create demos (pens) within the browser, which you can then share and embed on websites.

It’s useful if you’re trying out a new idea, showing off a new skill, or as a demo when asking for help on a forum. Codepen is easy to use and has built-in preprocessors and JavaScript libraries.

The site has grown into a strong community with more and more users joining daily. Pens are sorted into Picks & Popular on the home page and are a great source for inspiration.

Searching for pens offers a good way to delve into a specific area for inspiration and see what people are creating. If you want to see something in particular you can search pens via tags.

Codepen Radio is where Chris, Alex and Tim sit down and talk about what it’s like to run a business. They discuss the business issues they face and all the things that can go right or wrong. With 36 episodes targeting topics such as security, money and servers, there’s loads of great stuff to learn. It’s also cool to gain insight on what it’s like to run a startup.

One of my favourite episodes is episode 28 where they discuss users. Chris, Alex and Tim started building Codepen with a strong vision of how it was going to turn out. They had a clear idea of what to build next and what was important.

These ideas were not tested though, so Alex spent time researching and collecting data. He looked into who was coming to Codepen, why they were coming and how they were using the site.

One insight was that people were using the site at conferences and for teaching purposes. The team had not anticipated people using it like this, but they spent time developing features to make it better for these users.

What I like about Codepen Radio is that Chris, Alex and Tim also talk about opposing views. They discuss when not to throw all your resources into building something for a user group and why it’s important to understand that. They help qualify whether a user is a good type of user to have, and whether it’s a user group you want to build upon.

2) Resource sites.

There are some great resource sites out there. Scotch and Codrops are two nice examples. Both put up content that will help you grow your skills and inspire you.

Scotch.

Scotch publishes detailed tutorials with demos and source code. When new versions of software are released they update the tutorials, which means you won’t get caught out following an out-of-date tutorial. Current categories are AngularJS, Node.js, MEAN, Laravel, CSS3, Bootstrap, Sublime and Vagrant.

Recently, Scotch did ‘JavaScript January’ and posted a new item on Javascript each day. They covered topics such as ‘The Ins and Outs of Token Based Authentication’, ‘An Introduction to MongoDB’ and ‘Building Interactive Scrolling Websites with ScrollMagic.js’.

Their tutorials take you from having zero knowledge on a subject to building something useful relatively quickly.

For instance, their five-part tutorial on ‘Easy node authentication’ describes how to add authentication to your node application.

The end result is a site where users can be authenticated using their email address, Facebook, Twitter and Google account. The tutorial also takes you through associating the social accounts together under the one account.

Codrops.

Codrops is a great place to find out what’s possible with cutting-edge technology. Articles come with the warning label: ‘Please note that this effect is experimental and is only supported by modern browsers’. It’s awesome.

There are five categories to the site: Tutorials, Playground, Blueprints, Collective and CSS reference.

Tutorials are in-depth how-to guides. Playground shows off Codrops’ experimental demos. These are definitely designed to inspire you. Blueprints are stripped-back demos you can integrate into your projects.

Collective is a weekly newsletter that I can’t start my week without reading. It features an inspirational site, free icons and fonts, good articles and tutorials.

CSS reference is a new section to the site. It’s a comprehensive reference guide for CSS. Each CSS property has its own page that explains what it does, how to use it, related properties and trivia notes about the property.

A recent demo that stood out and grabbed my attention is ‘Creative gooey effects’ by Lucas Bebber. In the article, Lucas takes you through SVG filters, looking at the different filters available and how they can be used to create some pretty cool effects. This includes one called ‘Goo’ and he shows you how you might use it in a real-life application.

3) Twitter.

I’m going to bet you know what Twitter is and have used it before. Even if you don’t want to tweet yourself, you can still use Twitter to find some good stuff about web development.

I use Twitter to find and follow developers and designers whose work I admire.

A good way to find those types of people is to pay attention when you view sites on the web. For instance, if you’re using a plugin on a website that you really like, look up who created it and see if they are on Twitter.

Conferences and meetups are also a great way to find people to follow. Look up what speakers are attending and, if the topic they are speaking about interests you, follow them. They will generally tweet out things on the topics they are presenting about.

Some people I recommend following are:

Paul Irish @paul_irish

Paul Irish a front-end engineer working at Google Chrome in the Developer Tooling team. He has a strong focus on how to improve your developer workflow and make you more productive. He works on popular tools like Modernizr, Yeoman, CSS3 Please and HTML5 Boilerplate.

Marcy Sutton @marcysutton

Marcy Sutton is a web developer working at Substantial. She is currently working on making Google’s Angular JS & Material design accessible. She is a big campaigner to improve the web for people with disabilities and tweets out a lot of good resources.

Mark Dalgleish @markdalgleish

Mark Dalgleish is a UI Engineer who is super-passionate about JavaScript. He runs the Melbourne JS Meetup and is the DecompressAU organiser. His tweets consist of projects he’s working on, events, presentation slides and cool things he’s seen.

People will tweet about things they are working on, what they are reading or what they are learning. Whether it’s a tweet about a meetup speaking event, the presentation slides from a conference, a demo they’ve made, or as simple as ‘check out this cool thing I found’, there’s plenty of content out there to discover.

The web is a fun industry to be a part of and it’s exciting to work in a role that contributes to developing the industry.

There is an endless supply of knowledge and inspiration to be found. It’s about finding the approach that works for you and keeping up to date with what’s happening.