This seems like a great option to spice up your site’s backgrounds. Only 1KB when minified/gzipped.
This is a very cool idea and the use case is described perfectly by the authors:
Does your designer cry every time you load their beautifully designed screen, and it is full of empty boxes because all the images have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little thumbnail images into your data to show as placeholders?
You give BlurHash an image and it gives you back a short string (20-30 chars) that represents the placeholder image. Store the string and send it along with the other data for the object and your client can decode the string into a placeholder image while the real image is loading over the network.
A tribute to the late architect Michael Sorkin, who died of coronavirus recently. Some practical and poetic considerations of designing for humans.
A fun way to discover interesting color combos. Whatch out for that undiagnosed light indigo.
Export as a video or animated gif. Try it here.
After being involved with design and open source projects for many years, I’ve noticed a few common reasons why designing for open source projects can be very difficult. Open source projects (especially FOSS) face a lot of issues that more conventional projects don’t because they lack a clear business model, the structure, and the incentives that for-profit proprietary projects have.
This is a hard problem due to many of the factors outlined in the post, but one worth solving.
A complete iOS redesign of two pages in 10 minutes. Covers typography, iOS guidelines, “dark mode” theming, consistency, and more.
The cool thing about CSS icons like these is they’re easily customizable with… CSS! You can search, tweak, and download the icons right here.
Use it by inlining the SVG directly into your HTML
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg>
Comes in 24x24 outline and 20x20 solid styles.
The Fyne toolkit provides the easiest way to develop beautiful, lightweight and user friendly native applications for desktop, mobile and beyond. In this post, I describe our design process and why we take a considered approach, moving slower than you might think.
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.