Archive by Author

Your Sketch library is not a design system redux

I really like this post by Brad Frost about what is and isn’t a design system, particularly when he de-emphasizes the importance of tools when it comes to that sort of work :

…components living inside static design tools like Sketch isn’t itself a design system. Pardon my clickbait. Perhaps a better title would have been “Your Sketch library is not a(n entire) design system.”

No doubt tools like Sketch are super valuable, and having a set of reusable components …


Your Sketch library is not a design system redux is a post from CSS-Tricks

Observable

Observable launched a couple of weeks ago. As far as I understand, it’s sort of like a mix between CodePen and Medium where you create “notebooks” for exploring data, making nifty visualizations.

Check out this collection of visualizations using map integrations as an example. The entries are not only nice demos of the libraries or technology being used (i.e. D3, Google Maps, Leaflet, etc.), but also make for some interesting infographics in themselves.

In a note about this interesting new …


Observable is a post from CSS-Tricks

Web-Powered Augmented Reality: a Hands-On Tutorial

Uri Shaked has written about his journey in AR on the web from the very early days of Google’s Project Tango to the recent A-Frame experiments from Mozilla. Front-end devs might be interested in A-Frame because of how you work with it – it’s a declarative language like HTML! I particularly like this section where Uri describes how it felt to first play around with AR:

The ability to place virtual objects in the real space, and have them stick …


Web-Powered Augmented Reality: a Hands-On Tutorial is a post from CSS-Tricks

Recreating the GitHub Contribution Graph with CSS Grid Layout

Ire Aderinokun sets out to build the GitHub contribution graph — that’s the table with lots of green squares indicating how much you’ve contributed to a project – with CSS Grid:

As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of my CSS ended up being less than 30 lines, with only 15 declarations!

I’m so excited …


Recreating the GitHub Contribution Graph with CSS Grid Layout is a post from CSS-Tricks

Recreating the GitHub Contribution Graph with CSS Grid Layout

Ire Aderinokun sets out to build the GitHub contribution graph — that’s the table with lots of green squares indicating how much you’ve contributed to a project – with CSS Grid:

As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of my CSS ended up being less than 30 lines, with only 15 declarations!

I’m so excited …


Recreating the GitHub Contribution Graph with CSS Grid Layout is a post from CSS-Tricks

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this:

…most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and …


Sketching in the Browser is a post from CSS-Tricks

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this:

…most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and …


Sketching in the Browser is a post from CSS-Tricks

Tools for Thinking and Tools for Systems

I’ve been obsessed with design tools the past two years, with apps like as Sketch, Figma and Photoshop perhaps being the most prolific of the bunch. We use these tools to make high fidelity mockups and ensure high quality user experiences. These tools (and others) are awesome and are generally upping our game as designers and developers, but I believe that the way they’ve changed the way we produce work and define UX will soon produce yet another new wave …


Tools for Thinking and Tools for Systems is a post from CSS-Tricks