✻ Earlier this week Chris looked at Airtable, a service that lets you create spreadsheets and enables us to use that stored data just like a database through easy APIs. Chris goes on to show us how to make an emoji chart that updates itself from the data that’s being stored in Airtable.

✻ Next up, Morgan Feeney made a deep dive into his experience of using Grunt and Nunjucks on a project. Nunjucks is Mozilla’s templating language. It's in the same vein as Twig for PHP, Jinja for Python, or Liquid for Ruby, except it's JavaScript! Morgan tells us how it's great for working with design patterns, and literally turns Bootstrap into reusable components in Nunjucks.

✻ This week we also explored Git’s Patch Mode, which can break up the changes we’ve made in one file into separate commits. This is particularly helpful if we’re working on larger teams and we need to make different kinds of changes within a single block of code.
 

✻ And finally, to wrap things up, we explore the world of form validation with plain ol’ markup and CSS. There’s lots of cases that developers sometimes forget, such as making inputs required and using labels correctly, and so we’ve taken a look at some of those key problems. It's surprising how far you can get with validation, including good UX, without and scripting at all. 

What we’ve been reading, listening and watching

We hear so much about the perils of jQuery, and yet rarely do we consider the library’s success in reshaping the JavaScript landscape across browsers; classList, querySelector and addEventListener all exist in thanks to this popular library, as Jeremy Keith describes:
jQuery turned ten years old this year, and jQuery version 3.0 was just released. Congratulations, jQuery! You have served the web well.
In other news this week, Google Fonts was redesigned with an all new interface made up of Angular components. It’s easy to see how much has changed just by looking at the updated branding:

Perhaps our favourite feature though is the theme picker, where you can see the contrast between white text and a multi-colored background without having to 'Inspect Element' and mess around with any inline CSS tomfoolery.
 
A note from the archives

Continuing on from what Chris mentioned this week about inputs, it’s very much worth venturing back in time to check out an older post he wrote about applying a element to various input types. You normally think of datalist as it applies to text inputs, but it works for others too, like range and date!
This design pattern could be useful if you already have a rough guess of what kind of information needs to be included by the user, while also giving them the choice to add their own data.
 
What have you learnt this week?

Robin Rendle: Over the weekend I read a wonderful interview with Jef Raskin, one of the original designers of the Mac, where he talked about his thoughts on the subject of icons and interface design. He argued that:
An icon is a symbol equally incomprehensible in all human languages. Whatever language you know, you have to learn the meaning of an icon anew.
This reminded me of his excellent book on interface design that I read many years ago called The Humane Interface, and so if you’ve never heard of Jef Raskin or his work then I heartily recommend it. It’s become an essential resource for me whenever I think about accessibility in design. 

 The Humane Interface, by Jef Raskin 


Chris Coyier: I went to go link up the Typography Handbook I came across earlier in the week. It reminded me of some others, so I added them to the post. Then I found some more and put them in the tweet. Which found some more so I updated the post


Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list