How the minmax() Function Works

I feel like I am only scratching the surface when I make use of CSS grid functionality in my current projects. I haven’t used this yet, but Ire Aderinokun does a good job of explaining the minmax() functionality. She even provides some animated gifs for people like me who skip to the pretty pictures…

minmax(200px, 50%) 1fr 1fr;
minmax(200px, 50%) 1fr 1fr. Credit: Ire Aderinokun

Strava blog

Awesome images of the Tour de France last month. The article gives some insight on the distances and elevation the riders cover. It has got to be one of the hardest sports in my opinion, three weeks of grueling races and some nasty road rash.

Tour de France
Credit: Ashley Gruber & Jered Gruber

javaScript ES6 tutorials

I thoroughly recommend doing these ES6 tutorials by Wes Bos. If you were put off writing javaScript a few years back due to its long winded, confusing syntax have a go at these. ES6 is taking some getting used to but I can see why it is winning people over and how jQuery might be on its last legs.

Illustration

James Gilleard’s illustration work is brilliant. His stuff keeps keeps appearing in my Twitter feed leaving me mesmerized for a few minutes.

japan by night
Japan by Night. Credit: James Gilleard

Why your site needs a pattern library

One of the best forms of accessibility is consistency. Having a consistent product reduces guesswork and users will get to where they want to be faster. I would like to write about my experiences of using pattern libraries in the future but I think Paul Boag just about covers it with a great article he wrote a few weeks back.

Pattern variations

I have just started to use more modular chunks of CSS and HTML in my current projects. I use BEM syntax for CSS, this not only helps writing markup between teams but also helps you remember what a style might be called without referring to the inspector. I tend to write my modular chunks and then save them as Gists for future reference. Here’s an article by Brad Frost that goes into detail about using BEM and putting together a style guide to document your components.

At the heart of a good design system is a set of solid, flexible components that can be arranged to create cohesive, delightful user interfaces. There’s an oft-repeated misconception that pattern-driven design and development forces teams to use a finite, rigid set of components that stifles creativity and doesn’t serve the real needs of applications. That’s only true if you design the system that way. An effective design system provides components that are robust, resilient, flexible, and adaptable.

Convincing Dropbox to do a re-design

An inspiring article on how Dropbox got a new re-design rolling after going through user feedback and pulling out common themes. It goes into detail on how tough it was getting key people from within the business to back it and eventually releasing it to the public.

Dropbox new vs. old
New vs. old. Credit: edchao

Before we ever got the green light from leadership, product designers across the org were already designing for the new Dropbox. Product managers were making plans for it. Engineers were asking about it. And an especially exciting moment came when Arash, one of our founders, started to passionately evangelize it in the form of another Paper doc. That was the moment I realized the redesign could become a reality.