We’ve logged enough awesome lists by now that you know exactly what to expect from this repo. So instead of describing what’s inside, I will say that Emma and I will be talking Fullstack D3 with Amelia Wattenberger on January 30th. Join us for the live show or subscribe to JS Party to listen when the episode ships.
If Chris Fox had it his way:
- the keyword would be removed from all languages that use it
- only the language runtime and operating system would be allowed to raise exceptions
Click through to find out why he has this beef and what he thinks we should do about it.
This is a super-cool tool for getting your ideas on “paper” quickly. It’s pretty rough around the edges, but that’s forgivable for now since it’s pretty new. Try it for yourself right here.
From typography/colors to icons/animations and everything in between. This awesome list by Shawn Wang is worth a scan/bookmark.
A constantly updated collection of beautiful SVG images that you can use completely free and without attribution
This is not your typical set of icons. Katarina has created illustrations for everything under the sun and you can switch up the colors to fit your brand identity. Here’s a sampling of illustrations with Changelog Green highlights. 👇
I can’t count how many times I’ve been asked, “Can I put my logo on the login page?” or “why are the dates formatted like that?” but users of my software over the years.
KBall connects with Katie Sylor-Miller to talk about migrating OhShitGit to the JAMStack, migrating legacy codebases to modern front-end technologies, and design systems.
Blocks UI is in alpha, but definitely impressive already. You drag/drop components, tweak their properties/style, and it spits out “production-ready” React code. Try the demo right here.
Design systems are taking the tech industry by storm, but what exactly are they? Do you even need one? This week we’re talking all things design systems. We’ll chat about component libraries and style guides, companies who are building design systems, and more!
From Erik Kennedy who shared some tactical design advice for developers — this awesome visual guide covers the primary differences between designing for iOS and Android, including navigation, UI controls, typography, app icons, and more.
If you’re designing both an iOS and an Android (Material Design) version of an app, this guide is your new best friend 😎. We’re going to cover the most relevant differences between iOS and Android for UX/UI designers. If you’ve created an app on one platform, this is most of what you need to know to “translate” it for the other platform.
Welcome to 2019, the year that the technology went dark mode.
This article covers dark mode benefits, browser support detection, creating themes with CSS variables, dealing with images and video, and more.
Built with Vue. Play with the live demo right here.
Following up on designing delightful dark themes, I wanted to share this post from Kyle Stetz on the frontend engineering strategy for building Slack’s dark mode on desktop.
As is usually the case with large codebases, finding an implementation that works is only half the battle; gracefully changing infrastructural code and educating engineers on how to use new tools accounts for much of what we do when working on new capabilities of the product. Working in a large engineering organization — especially within a rapidly growing company — means that every change needs to consider the momentum and roadmaps of many other teams. The overarching question for this project was: how can we build sustainable and maintainable support for themes?
Everyone loves a good dark theme. But what’s the recipe for getting a dark theme right?
When creating a dark theme, it can be tempting to invert our light theme. However, distant surfaces would become light and near surfaces would become dark. This would break physicality and feel unnatural.
Instead, take only the main surface color of your light theme. Invert this color to produce the main surface color of your dark theme. Lighten this color for nearer surfaces, and darken this color for distant surfaces.
This is pretty cool. You start with a provided template then get launched into an interactive editor where you can pick and choose the particulars of the brand you’re creating. Once you’re done, export to PNG and PDF.
I love data-driven analyses like this one Harvard Business Review did on logos. The top-level takeaway:
our research demonstrates (albeit with certain qualifications and under certain conditions), descriptive logos more favorably impact consumers’ brand perceptions than nondescriptive ones, and are more likely to improve brand performance.
Read the whole thing to understand exactly what they mean by “descriptive logos” and why they’re more effective. If you’re into this stuff, they’ve done similar surveys on simplicity vs complexity and symmetry vs asymmetry.
The term ‘responsive web design’ has been a mainstay in the world of digital development for many years. Go to any early-stage client meeting and you’ll almost always get asked to ‘make sure it works on mobile’.
The standard response to this has generally been, ‘don’t worry, we’ll build it responsive’, but is this response out of date?
Erik Kennedy is back to give developers (and other folks who aren’t steeped in UX) some actionable advice on how to make interfaces more usable.
This is my advice on improving the UX of your designs WITHOUT hours of user research sessions, paper prototyping playtime, or any other trendy UX buzzwords.
When I started as a professional UX designer, I was shocked how many times my clients would hand me the initial wireframes (or the living, breathing, in-browser MVP) and there’d be completely obvious UX mistakes all over them. I’m not talking about things you need hours of research and A/B testing to discover. I’m talking, like, dead simple mistakes.
Erik Kennedy presents three heuristics on the UX of where to place certain controls. Once you see them, you’ll realize they’re in basically every UI you’ve ever used.
xLayers is a web app which aims to bridge the gap between designers and developers. Its mission is to allow both the design and development worlds to collaborate and iterate fast.
Upload your Sketch file and you will get the code generated for your favorite framework of choice (React, Vue, Angular, LitHtml, Stencil and even Xamarin Forms…and more to come).
I’ve always felt a little put off by the clip-path property, thinking it was rather obscure and probably not worth learning. Boy was I wrong. In this article Travis Almand takes us through how incredibly powerful this property is, and how by animating it you can create a range of beautiful transition effects with a few simple lines of CSS.
This is a thoughtful look at the relationship between content and design, and some steps that designers can take to better work with copywriters.
We all know designers and copywriters should not work in silos. We know design and copy should inform each other, rather than one being retrofitted to the other. This is especially true for UX writing, which must work in tandem with design to do its job well. Effective collaboration between design and content, however, is easier said than done.
The author goes on to lay out some ideas to improve collaboration, mostly from the standpoint of the designer, but honestly I think a lot of these same ideas are important for developers. And you can extend it further by saying “don’t use placeholder copy for user generated content”.
I spent last weekend making a GUI for rsync (and this past week tidying it up a bit) and I learned a lot about rsync, GUIs, design, power, control, and decisions around verbosity and freedom of choice versus simplicity and guidance/support, packaging, maintenance and support.
She had me at
This is the coolest webpage I’ve seen in awhile. The way the quine is accomplished is so brilliantly simple, it almost feels like cheating. It’s brilliant, by the way, because of the esoteric knowledge required to pull it off. It’s simple, because it’s literally a single CSS rule.