Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack developers. These tools span numerous categories, including JavaScript libraries and utilities, web frameworks, CSS generators, database tools, React components, CLI tools, and even ChatGPT and AI-based tools, the latter of which I’ve started covering regularly over the past year.

The 60 tools in this article were some of the most clicked web developer tools in my newsletter in 2023. As you’ll see, most of these are quite practical for front-end and full-stack development, so you’ll likely find lots that you’ll want to bookmark or use in an upcoming project. The list is roughly in reverse order in terms of popularity, so be sure to scroll down to see what the most popular tools of the year were!

Kuma UI

Kuma UI, which describes itself as “the future of CSS-in-JS”, is a headless, utility-first, zero-runtime component library that includes its own CSS-in-JS solution.

What makes Kuma UI different is its hybrid approach that allows for dynamic changes to your styles at runtime while still keeping the performance benefits of zero-runtime CSS-in-JS.

Boxslider

Although the use of carousel components has been discouraged in recent years, they still get asked for by my clients, and developers are always on the lookout for them. Boxslider is one such component.

This carousel, or content slider, includes seven slide transition effects that you can try out on the demo page, including a 3D cube effect, tile flip, and a simple fade.

Effect

Effect is described as “a powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.”

The idea behind the effect is to help developers build robust and scalable applications by means of something called structured concurrency, a programming paradigm that allows multiple complex operations to run simultaneously.

HatTip

If you use Express.js for building Node.js apps, you’ll want to check out HatTip. It offers a solution similar to Express.js, but with a more universal approach.

HatTip is a set of JavaScript packages for building HTTP server apps and allows you to write server code that can be deployed anywhere – AWS, Cloudflare Workers, Vercel, and more.

LiveViewJS

LiveViewJS is a simple yet powerful framework for building “LiveViews” in Node.js and Deno. LiveViews were popularized in Elixir’s Phoenix framework and involved moving state management and event handling to the server and doing HTML updates via WebSockets.

This technique allows you to build single-page app experiences with features like fast first paint, real-time and multi-player functionality, no need for a client-side routing solution, and lots more.

Scrollbar.app

Scrollbar.app is a one-stop reference and code generation tool for customizing browser scrollbars. You can live test and adjust the scrollbars directly on the page, then copy the CSS.

The scrollbar code involves using vendor-specific pseudo-elements but also incorporates the future-friendly scrollbar-color.

OpenGPT

OpenGPT is one of many ChatGPT-based tools that have been making the rounds over the past year or so. This one is an open-source AI platform that allows anyone to use and create ChatGPT-based applications.

The main platform for the service itself allows you to search a categorized directory of more than 11,000 ChatGPT apps.

Free Icons

Icon sets always seem to make these end-of-year lists. Free Icons is a generically named set of 22,000+ icons that includes both brand icons and general-use ones.

All are in SVG format, and you can filter by keyword on the home page or grab the whole lot via the GitHub repository.

Materialize

Materialize is an open-source framework of UI components based on Google’s Material Design guidelines.

The project, which includes 20+ categories of components, is a fork of an older project that’s no longer maintained.

qr-code

qr-code is an SVG-based web component that generates an animatable and customizable QR code. There’s an interactive demo page where you can try out the different animation effects.

The resulting QR code is SVG-based, the component has no dependencies, and it is easy to customize.

GradientGenerator

GradientGenerator is an interactive CSS gradient builder that allows you to build advanced layered gradients. You can customize your layered gradient using a whole slew of different settings and features.

The app also allows you to save gradients to your library and even import community-built gradients.

iDraw.js

iDraw.js is a simple JavaScript framework for creating apps that allow Canvas-based drawing.

There are some nice examples in a live playground where you can see the simplicity and ease of use of the API.

VanJS

VanJS is a UI library similar to React but doesn’t use JSX, virtual DOM, transpiling, and so on. The idea is to avoid the overhead of configuration that’s normally associated with using a library like React.

The library claims to be the smallest UI library in the world at under 1kb. It has first-class support for TypeScript and naturally boasts strong performance compared to React, Vue, and so on.

Mamba UI

Mamba UI is the first of multiple Tailwind-based tools that made this year’s list. This is a UI library of 150+ components and templates based on the popular utility-first CSS framework.

The library includes pre-styled components in 40+ categories, and you can quickly grab the code for any component in HTML, Vue, or JSX format.

Termino.js

Termino.js is a dependency-free JavaScript component that lets you add embedded terminal-based animations, games, and apps to web pages.

It’s customizable and makes it easy to build terminal animations like keyboard typing effects. The demo page includes a few simple examples, including an embedded terminal app where the user can get info on any GitHub profile.

SVG Chart Generator

SVG Chart Generator is a beautifully designed chart generator that lets you generate SVG-based charts in line or bar format.

The generator allows you to interactively customize the chart with width/height settings, number of points, smoothness, and more. You can also import your own data points.

PeepsLab

PeepsLab is a simple online tool to customize your own unique illustrated user avatars. You can build your own avatars by cycling through the different options for skin color, hair color, facial hair, accessories, styles for head, face, etc.

Or you can simply hit the “Randomize” button to generate a random avatar before downloading it in PNG format.

Ribbon Shapes

Ribbon Shapes is an online gallery of pure CSS ribbons in just about any ribbon format you can imagine.

The gallery includes more than 100 ribbons, each created with a single HTML element and easy to customize using CSS variables.

big-AGI

big-AGI is a personal GPT-powered app that’s described as “the GPT application for professionals that need function, form, simplicity, and speed.”

It has a responsive, mobile-friendly interface and includes features like AI personas, text-to-image, voice, response streaming, code highlighting and execution, PDF import, and lots more.

Easy Email

Easy Email is a drag-and-drop email editor based on MJML, the popular HTML email authoring framework.

This solution allows you to transform structured JSON data into HTML that’s compatible with major email clients. Includes features for easily customizing blocks, components, and configuring themes.

CSS Components

CSS Components throws its hat into the CSS-in-JS space with this fresh solution, described as “not another styling system.”

This solution is a response to challenges inherent in using CSS-in-JS tools with React Server Components, and the library is inspired by another such tool, Stitches, and promises an improved developer experience.

Toaster

Toaster is an experimental pure CSS 3D editor that allows you to build models using pure HTML with CSS transforms.

The author acknowledges that the tool isn’t too practical and can currently only export/import in JSON format (no CSS export). With improved performance, this could be a useful tool.

Fontpair

Fontpair isn’t a new resource, but it makes this year’s list. It’s a font directory specifically for finding fonts that match well together in your designs.

All the fonts are sourced from Google Fonts, and the pairings are manually curated by the authors.

Breadit

Breadit is a modern, full-stack Reddit clone built with Next.js App Router, TypeScript, and Tailwind.

This is a nice app to learn and experiment with, featuring infinite scroll, NextAuth, image uploads, a feature-rich post editor, nested commenting, and lots more.

Keep React

Keep React is a Tailwind and React-based component library that includes 40+ components and interactive elements.

The components are pre-designed, but all the components are easy to customize using Tailwind classes and are suitable for just about any project.

TW Elements

TW Elements is a massive library of more than 500 Bootstrap components recreated using Tailwind CSS. This is a great option for those already familiar with Bootstrap and looking for a modern alternative.

The library boasts better overall design and functionality compared to the original components in the Bootstrap framework, and you can easily search for components by keyword from the home page.

Autocomplete

Autocomplete is an open-source, production-ready JavaScript library for building customizable autocomplete experiences for form inputs and search fields.

You can easily build an autocomplete experience by defining a container, data to populate it, and any virtual DOM solution (JS, React, Vue, Preact, and so on).

CSS Loaders

CSS Loaders is a huge collection of more than 600 CSS loading animations organized under more than 30 categories.

This gallery includes just about any style of loader you can think of, and you can easily copy/paste the HTML/CSS for any loader with just a click.

Flectofy

Flectofy is an interactive tool that provides an interface that allows you to build unique SVG shapes.

The styles of shapes here are pretty niche, so they wouldn’t be useful in too many contexts, but the way the interface works and the look of the shapes are certainly different.

Picyard

Picyard is an app that generates screenshots with attractive backgrounds for use in mockups, social media posts, and so on.

The image/background tool is free, but the app also includes premium features for generating attractive code snippets, charts, mindmaps, timelines, and lots more.

UI Content

UI Content is described as “the best place to find professional placeholder text.” Includes placeholder text under seven different categories and also includes dummy SVG logos.

The idea here is to avoid typical “lorem ipsum” and use actual content instead to ensure your designs look closer to what the final product will be.

Vessel.js

Vessel.js was one of the more unique projects I discovered over the past year. It’s a JavaScript library based on Three.js, the WebGL library, for conceptual ship design, in other words, building boats.

You can check out a number of examples in a gallery, and there’s also a tutorial that gets you up to speed on best practices for using the library — assuming this happens to be your niche!

Modern Font Stacks

Modern Font Stacks is a resource to help you identify the best-performing font stacks. That is, the stacks are based on pre-installed default OS fonts.

You can choose from specific typographic categories like Traditional, Old Style, Neo-Grotesque, Monospace Code, Handwritten, and more. Again, these are generally fonts that are already available on Windows, Mac, Linux, iOS, and Android, giving you the best possible support without extra resource requests.

FancySymbol

FancySymbol is a huge repository of ready-to-copy/paste special characters, text symbols, foreign language symbols, and more.

Includes more than 50 categories of symbols and also allows you to create unique and fancy copy/paste-able text like upside-down text or text written in “invisible ink,” among others.

Observable Plot

Observable Plot is a JavaScript library for creating exploratory data visualizations (i.e., “plots”) using SVG-based charts.

The interface for the plots can include specific features like scales, projections, legends, curves, markers, and more. You’ll have to check out the documentation for the lowdown on these different features, which are illustrated using lots of interactive examples.

Washington Post Design System

The Washington Post Design System is a UI kit specifically built for properties associated with the Washington Post, a popular American daily newspaper and news outlet.

Although it is designed for WaPo’s engineers, it’s MIT-licensed and built-in React using Stitches and Radix UI. So, the customizable components and other assets may be of use if you’re using a similar tech stack.

FormSpamPrevention

FormSpamPrevention isn’t a popular project, but it got quite a bit of traction when I shared it this past year. It offers a simple vanilla JavaScript and HTML solution for preventing form spam.

The script is based on using custom HTML tags for form content that gets converted to valid HTML tags.

Chatbox

Chatbox is a native app for Windows, Mac, and Linux that gives you access to an AI copilot on your desktop.

This particular tool isn’t strictly focused on web development, but it taps into various LLM models and can be used as an overall productivity app for all sorts of daily tech-related tasks.

CSS Generators

CSS Generators is not a single tool but a small collection of CSS generators, a popular kind of tool among front-end developers.

I like this set of generators because it has a few kinds you don’t see elsewhere: Two glow generators (for text and elements) and an underline generator.

Leporello.js

Leporello.js is an interactive functional programming IDE for JavaScript. This means your code is executed instantly as you type, potentially improving debugging processes.

Most of us are likely set on using a particular IDE, but if you’re into experimenting with new ones, this might be a good one to check out.

Calligrapher.ai

Calligrapher.ai is an online tool for AI-generated handwriting samples that you can download as SVG.

There is no need to “write” anything; just type some text and customize stroke width and legibility, and the AI will do the rest. You can choose from 9 different print and cursive styles before generating the sample.

Clone UI

Clone UI is an AI-based tool that lets you generate UI components with a simple text prompt.

The app includes five free daily credits and includes a showcase of existing UI components generated by users.

Float UI

Float UI is a set of 100+ responsive and accessible UI components with RTL support. Also includes five templates.

The components and templates are built with Tailwind and are easy to customize. You can use them with React, Vue, and Svelte, or you can simply use HTML with Tailwind classes.

Calendar.js

Calendar.js is one of numerous date picker and calendar libraries available. This solution is lightweight and has no dependencies.

It’s fully configurable and includes drag-and-drop for events, exporting features, import from iCal and JSON, and lots more.

PCUI

PCUI is yet another React-based component library that makes a list. This one provides a set of pre-styled components.

There’s a storybook that demonstrates all the basic components, and you can also view a few UI examples that show a few advanced examples in action (a to-do list and an example that keeps a “history” of the UI’s state).

Accessible Color Palette Generator

Accessible Color Palette Generator is a great way to ensure any of your designs start with an accessible set of color choices.

You can generate a random accessible palette or enter any color, and the tool will generate an accessible palette for you based on the color you selected.

Picography

Picography is an alternative to the popular Unsplash and similarly offers high-resolution, royalty-free stock photos.

The photos are categorized and searchable and available for free use in commercial projects.

Mailo

Mailo is a component-based, interactive HTML email layout designer that helps you easily build cross-client and responsive HTML emails.

Mailo includes pre-built components and team features, and the components are designed to work with just about any email client.

Pines

Pines is an aptly named UI component library that’s built with Tailwind and Alpine, the popular JavaScript framework that’s similar to a modern version of jQuery.

Pines includes dozens of components, including animations, sliders, tooltips, accordions, modals, and more.

Park UI

Park UI is a set of beautifully designed components built on top of Ark UI, which itself is a set of accessible and customizable components.

Park UI can help you build your own design system, and the home page includes a neat interactive widget that demonstrates how easy it is to style the components. You can use Park UI with React, Vue, Solid, Panda CSS, and Tailwind.

Iconhunt

Iconhunt is an icon search engine that lets you have access to 170,000+ free, open-source icons.

The icons can be downloaded in various formats, including Notion, Figma, SVG, or PNG, and you can customize the color of any icon you choose before downloading.

Sailboat UI

Sailboat UI is a Tailwind-based UI component library that includes 150+ open-source components.

The components are very Bootstrap-esque, and you can search for and see live previews of the components in the docs.

Shaper

Shaper is a generative design tool for UI Interfaces that allows you to visually fiddle with a number of different interface features to customize your own UI.

It includes settings for custom typography, spacing, vertical rhythm, and so on, after which you can copy and paste the design tokens as CSS variables.

Maily

Maily is an open-source editor that makes it easy to create beautiful HTML emails using a set of pre-built components.

It currently includes components in categories covering buttons, variables, text formatting, images, logos, alignment, dividers, spacers, footers, lists, and quotes, with more on the way.

Realtime Colors

Realtime Colors offers an interactive website that lets you test color palettes and typography on real live UI elements in real-time.

You can use the tool to generate palettes and deep links to a specific palette for sharing with others or demoing interfaces in dark or light modes.

Strawberry

Strawberry is described as a “tiny” front-end framework that offers reactivity and composability with zero dependencies, no build step, and less than 3KB gzipped.

The idea here is not to offer a React or Vue alternative but something you’d use for simpler apps and other low-maintenance projects.

Swap.js

Swap.js is a JavaScript micro-library that uses HTML attributes to facilitate Ajax-style navigation in web pages in less than 100 lines of code.

This is in the same vein as libraries like HTMX and Hotwire, allowing you to replace content on the page by sending requests from the server as HTML fragments.

restorePhotos.io

restorePhotos.io is an open-source tool that uses AI to attempt to restore or correct old, blurry, or damaged photos.

You can deploy your own version locally or use their online tool to restore up to 5 photos per day for free.

Better Select

Better Select is a web component that provides a minimal custom select element, something web developers have been grappling with accomplishing for decades!

This solution offers a fallback option and includes a small set of options via attributes that customize the functionality and look.

Space.js

Interestingly, Space.js ended up being the most-clicked tool in my newsletter the past year.

It’s one of two sibling libraries that are based on Three.js. The main one is for creating “future” UIs and panel components, and the other (called Alien.js) is for 3D utilities, materials, shaders, and physics.

What Was Your Favourite Tool of 2023?

That wraps up this year’s roundup of the hottest front-end tools. I’m sure you’ll find at least a few of these to be of use in a new project in the coming months.

As always, I’m always looking for the latest in tools for front-end developers, so feel free to post your favourites from the past year in the comments, and you can subscribe to Web Tools Weekly if you want to keep up with new stuff regularly!

(yk, il)

“Sustainable” design is a paradigm that emphasizes the impact that design practices and workflows have on the environment with the goal of reducing carbon emissions. The design decisions we make are reflected in our planet’s climate, from the energy consumption of the tools we use to how the products we build interact with the environment and plenty of other things in between. In this collection, we compiled resources to help you understand the principles of sustainable design and how to integrate them into the way we work and the things we make.

Design For Sustainability

The EU Science Hub’s Sustainable Product Policy estimates that over 80% of all product-related environmental impacts are determined during the design phase. But how can design teams ensure that sustainability is at the core of every design choice they make? To help their designers develop design habits about sustainability, IBM published “IBM Design for sustainability.”

At the heart of the framework is the idea that the user, community, and social value should outweigh any negative environmental and social impact in the present and the future. To achieve this vision, experiences need to be inclusive, easy to learn and use, and efficient for both users and overall power consumption.

The sustainability checklist is part of the framework and it gives practical tips for optimizing designs to meet these goals. It’s no rocket science, but the checklist does offer useful considerations that will help improve performance, speed, and responsiveness.

Sustainability Methods and Design Principles

The Sustainability Guide from SVID is an overarching framework for sustainable design and development practices that contains sections wholly dedicated to methods and design principles that are centered around sustainable practices.

The design section illustrates the system-wide lifecycle of the design process, describing it as a circular system where everything in a product design is interconnected and linked by environmental criteria that is embedded at all stages.

The methods section is an archive of tools, resources, case studies, and expert advice that can be used to educate a team, as well as kickstart a team into sustainable environmental practices.

Sustainable Design Strategies

The crux of sustainable design strategies, according to Leyla Acaroglu, is ensuring that the tools we use in a design workflow and how we use them today do not have a negative impact on the planet in the future.

What Leyla does in this extensive Medium post is curate an ecodesign strategy set that covers core considerations for product design that build sustainability into the process, from manufacturing and recyclability to efficiency and modularity. By including these considerations into the design lifecycle, it is possible to develop products and services that reflect sustainable practices, such as a product’s ability to dematerialize, how easily it can be recycled, how long it lasts, whether it can be dissembled by customers, and to what extent it can be repurposed for other uses.

Sustainable Web Design Practices

Is the admin experience as easy and intuitive as the front-end experience? Is the message useful for your target audience? Could a Progressive Web App be an efficient solution? A lot of questions need to be asked when you want to deliver digital products and services that respect the principles of the Sustainable Web Manifesto. The site Sustainable Web Design helps you find the right sustainability strategy for your project.

The strategies are divided into different categories: design, client and project ethos, content and marketing, development, hosting, and business operations. In each category, you’ll find questions worth considering and an explanation of why it matters. Links to further reading resources let you dive deeper into each aspect. A helpful guide that supports you on every step of the design process.

Sustainable Web Hosting Companies

According to some estimates, the impact of the Internet and our gadgets on global greenhouse emissions is similar to that of the airline industry. To speed up the transition towards a green, fossil-free Internet, there’s a question we all can ask ourselves: Are our websites hosted green?

The Green Web Foundation built a checker to help you quickly find out if your hosting provider is using green energy or compensating for its services. All you need to do is enter the URL. If you want to make the switch to a green hosting provider, the foundation also published a directory of 478 green hosting companies in 35 countries. A small step that makes a difference.

Sustainability Score Calculator

So, just how large is the carbon footprint of your website? The Internet uses electricity, of course, but it also relies on data centers that distribute information, and the energy to power each and every device that receives that information. Even a small website has a carbon footprint.

The Sustainability Score Calculator is one way to find out. Employing a methodology that takes energy-consuming attributes into account, this free calculator estimates the amount of carbon dioxide produced by a particular website. It looks at the weight of images on a page, whether web fonts are integrated, and any front-end frameworks in use, among other considerations, to inform its calculations.

The exact amount of carbon dioxide produced by a website can probably be evaluated in a number of ways, and this specific calculator makes its own assumptions. Regardless of the exact inputs used in the results, the fact that the Sustainability Score Calculator can come up with a rough estimate for a website’s carbon dioxide output on a per page view basis is a reasonable starting point for determining just how big of a footprint a site has on the environment.

Sustainable UX Design Toolkit

The Sustainable UX Design Toolkit is a resource produced by the Sustainable UX Network, a non-profit organization that has established a community of designers around sustainable environmental design practices.

The organization developed the toolkit as a Miro board that is freely available to clone into your own Miro account. Not a Miro user? You can still reference the embedded board and zoom into it to view the four-step process that walks you through concept to presentation, providing useful considerations, best practices, and even templates you can use right away.

Sustainability Nudges in UX

In the last few years, customers have become more and more aware of how important environmental friendliness and social responsibility are when making a purchase. But even with increased awareness, businesses still play a key role in informing, enabling, and encouraging sustainable behavior. In his post “7 behavioural UX approaches encouraging sustainable purchases,” Damien Lutz takes a closer look at how e-commerce businesses encourage sustainable purchases and what we can learn from them.

From Zalando’s sustainability filters and Amazon’s Climate Pledge Friendly Hub to Qantas’ Green Tier membership and sustainable shopping assistants, Damien analyzes different strategies of nudging customers towards more sustainable decisions. Based on his observations from these real-life examples, he summarizes practical behavioral UX tips that help everyone create experiences that promote sustainability. Interesting insights are guaranteed.

Green the Web Podcast

Since 2019, UX/UI designer Sandy Dähnert shares her passion for a sustainable web on her site Green the Web. Last year, she started the Green the Web Podcast on all things sustainable design best practices, ecological and social user research, information architecture, user interface design, and more.

Whether it’s sustainability-infused user journey maps, UX/UI factors for a lightweight website, or approaches for greener checkout, in the podcast Sandy shares her deep love of sustainable UX and UI design to encourage everyone to step into green design and play an active role in shaping this new design philosophy. You can listen to the podcast on Spotify or Apple Podcasts.

Sustainable UX Playbook

The Sustainable UX Playbook is a yet-to-be-released work in progress by the same folks who maintain the Sustainable UX Manifesto. The playbook is set to provide guidelines, best practices, and examples to help you and your team adopt an environmentally-centered design approach.

The exact date of when the Sustainable UX Playbook will be available is to be determined, but it will be published to SustainableUXPlaybook.com (which currently redirects to the Sustainable UX Manifesto) when it is ready.

Sustainability Figma Kit

The Sustainability Figma Kit that Elisa Fabbian, Rachele Pedol, and Margherita Troilo created helps digital designers move from human-centered design to a more sustainable life-centered design approach. It consists of a learning guide, 23 action cards, and a flowchart.

The learning guide introduces you to the broader context and importance of designing products and services with a reduced environmental impact. The action cards explore problems you might encounter in different phases of the design process and how to solve them. Last but not least, the flowchart helps you find out which sustainability actions can be applied to the specific type of project you are working on by providing useful tips for designing in a more conscious way.

Sustainability Innovation Framework

Sustainability Innovation Framework is an effort from Sebastian Gier that is all about the planning phase of an effort to scope work for projects aimed at reducing carbon emissions.

The process is mapped to traditional design thinking, helping you start work by aligning objectives and documenting assertions before tying them into user needs. What makes this framework particularly useful is that it helps prioritize the ideas generated by the process by their environmental impact.

The entire framework is available as a collaborative FigJam board that can be cloned to your own Figma account.

EcoCards Game Workshop Toolkit

One of the most difficult hurdles to adopting a sustainable design process is figuring out how to discuss the topic as a team. Getting everyone on the same page about what it means to design sustainably and how to establish a process for it are paramount for any team.

That’s what makes the EcoCards Game Workshop Toolkit such a valuable resource. The toolkit is a collection of three card-based games designed to facilitate team discussion on sustainable design practices. Each game is framed as a “workshop” meant to take place at different stages in the design process, detailing the game rules with a series of steps using a plain deck of playing cards to move the discussion forward.

The EcoCards are created as a FigJam board that can be cloned to your Figma account. They are available in English and French translations.

Team Sustainability Retrospective

OK, so perhaps your team has adopted a sustainable design process that aims to reduce carbon emissions. How do you know it’s working? That’s the purpose of the Team Sustainability Retrospective, a Miro template produced by Paddy Dhanda.

Rather than high-fiving your team for implementing a sustainable system, this set of templates will help you assess whether or not your efforts are paying off in a streamlined five-step process. This way, your team can re-group after the implementation of the design process and properly measure its impact with data that form actionable insights for improving the process even further.

World Wide Waste Book

World Wide Waste is a book by Gerry McGovern, aiming to debunk the perception that being “digital” is akin to being “green.” It provides a healthy dose of statistics about the impact of digital products and services and details the crisis of energy consumption in the world.

For example, McGovern attempts to clear up the misunderstanding that cloud technologies are somehow ethereal elements that are carbon-free, but rather physical data centers that result in large quantifiable emissions. If nothing else, this book will equip you with the information you might need to help convince your team to adopt more sustainable practices with statistics and case studies to make the case.

Sustainable Web Design Book

If the World Wide Waste book is all about defining and diagnosing unsustainable design practices, then this offering from A Book Apart is aimed at curing those symptoms. Written by lead author of the “Sustainable Web Manifesto” Tom Greenwood, Sustainable Web Design is a collection of practical web design advice for everything from how to measure a website’s environmental impact and identifying low-carbon design practices to creating energy-efficient development processes and creating a hosting environment that helps reduce climate costs.

Like all A Book Apart publications, Sustainable Web Design is available in print and digital editions — just remember that the digital copy is not a carbon-free option, as many of the resources in this roundup have noted. Then again, the printed copy also has climate considerations due to the costs of transporting the book to your front door. Just buying the book is an excellent example of the conundrums of sustainable design.

Climate Tech Guide For Designers

If you’re looking for help establishing yourself in a career in sustainable design, Enrique Allen and the Designer Fund team offer the Climate Tech Guide for Designers.

This guide is less about teams adopting sustainable design standards than it is a resource for helping you make a decision about where you work and who you work for. How passionate is the company about climate? What problems is the company trying to solve, and are the solutions based on climate technology and considerations? These are the types of questions that will allow you to find the right fit for your career.

What makes this Climate Tech Guide for Designers especially useful is that it goes beyond company considerations by offering advice for how to position yourself for a career in climate technology, capping things off with an extensive list of companies that demonstrate sustainable practices.

Ethical Design Handbook

The Ethical Design Handbook is a book we offer right here at Smashing Magazine. Written by authors Trine Falbe, Martin Michael Frederiksen, and Kim Andersen, these guidelines serve as a roadmap to learn about adopting and integrating ethical design practices into a business model.

Wait, why are we talking about “ethical design” when we’ve been sharing resources on “sustainable design”? Ethical and sustainable design work hand-in-hand, as ethical design relies on sustainable digital business practices in addition to a slew of larger concepts that determine an organization’s ethical practices, from transparency in how data is collected to how inclusiveness is built into a design. In other words, ethical and sustainable design are united by a cause to prevent harm to people. A sustainable design process supports a healthy environment that, in turn, supports an ethical responsibility to care about the impact we have on the planet.

All in all, the Ethical Design Handbook is about leveraging ethical business practices as a market differentiator that can be used as a competitive advantage. Sustainable design principles are part of that matrix, demonstrating that sustainable practices can be aligned to — and even enhance — business objectives.

Ethical Design Resources

Another useful resource to help designers and developers live up to the responsibility of causing no harm and ensure that the experiences they build are inclusive, honest, and safe are the Ethical Design Resources which Lexi Namer maintains in collaboration with the Ethical Design Network and Kate Every.

On Ethical Design Resources, you’ll find articles, books, courses, frameworks, tools, talks, videos, podcasts, and more covering different aspects of ethical design. They help you assess the impact of your design decisions, uncover harmful practices, and support you in making design choices that respect your users.

And if you need more resources, take a look at Ethical Design Guide and Humane By Design.

Wrapping Up

There you have it, a deep collection of toolkits, frameworks, and resources you can use to learn about sustainable design practices and how to adopt them into your own design process. Notice how the collection reveals that sustainable design is a multifaceted topic that considers everything from how we work to the specific tools we use to work. It even covers product design as a whole and the decisions that impact the sustainability of a product, not to mention how business objectives influence environmental objectives.

There may not be a single silver bullet or resource that immediately aligns you and your work with sustainable design practices. That said, the resources provided in this roundup can help you make big and small gains alike, whether it’s reflected in something as seemingly small as the hosting provider you decide to use for your website or something more involved such as integrating environmental considerations at every stage of the design process.

(vf, il)

Not every project has the budget to spend a lot of money on fonts. But that doesn’t mean that typography needs to play a secondary role when the budget is tight. The variety and quality of free and open-source fonts out there is impressive and enables everyone to use beautiful, well-crafted typefaces.

In this post, we compiled some free fonts that we came across and that you probably haven’t spotted before. Some of them shine with their flexibility, some put a special focus on readability, and others are a great choice if you want to make a bold statement. As different as the fonts are, they all have one thing in common: You can use them for free in both personal and commercial projects. A huge thank-you to the wonderful type designers and contributors for making their fonts available to all of us! 👏🏼👏🏽👏🏾

Recursive

Built to maximize versatility, control, and performance, Recursive is a five-axis variable font that can go from Sans to Mono. Taking full advantage of variable font technology, it gives you full flexibility.

Recursive allows you to choose from a wide range of predefined styles or dial in exactly what you want for each of its axes: Monospace, Casual, Weight, Slant, and Cursive. Inspiration came from single-stroke casual signpainting to give the font a flexible and warmly energetic look, making it a great fit for data-rich-apps, technical documentation, code editors, and much more. Designed by Stephen Nixon, with contributions from Lisa Huang, Katja Schimmel, Rafał Buchner, and Cris R Hernández.

Yrsa & Rasa

The type families Yrsa and Rasa have a different approach than other type projects. They build upon the existing typefaces Merriweather and Skolar Gujarati to produce two entirely new type families that span different writing systems.

Yrsa supports over 92 languages in Latin script and has a special focus on properly shaping the accents in Central and East European languages. Rasa supports a wide array of basic and compound syllables used in Gujarati. Both type families include five weights and are intended for continuous reading on the web. Perfect for longer articles in online news, magazines, or blogs. Designed by Anna Giedryś and David Březina.

Space Grotesk

Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry’s fixed-width Space Mono family. It retains the idiosyncratic details of the monospace while optimizing for improved readability of non-display sizes.

Space Grotesk includes four weights and open-type features like old-style and tabular figures, superscript and subscript numerals, fractions, and stylistic alternates. Latin Vietnamese, Pinyin, and all Western, Central, and South-Eastern European languages are supported. Designed by Květoslav Bartoš for Florian Karsten Typefaces.

Figtree

Figtree combines friendly curved shapes, a simple monolinear construction, a high x-height, and slight taper into a charming geometric typeface that ensures maximum readability.

Figtree comes in seven weights, ranging from Light to Black, and includes typographic finesses such as fractions, monospace numbers, and scientific inferiors. Minimal but not stiff, casual but not silly, the typeface beautifully manages to maintain a crisp, clean feeling. Designed by Erik Kennedy.

Reforma

Reforma is a versatile font family designed for long-form reading. Commissioned to celebrate the centenary of the university reform of the Universidad Nacional de Córdoba, Argentina, the typeface had to convey four premises: plurality, intellectual heritage, versatility, and free availability.

After three years of work, 20 font styles were born that work harmoniously in different contexts. They are grouped into three subfamilies — from a classic serif to a modern sans-serif and an intermediate hybrid style with flare serifs — and are available in three weights plus an ultra-black companion set for headings. Reforma beautifully manages to strike the balance between tradition and novelty while staying super-versatile. Designed by Alejandro Lo Celso, Jorge Ivan Moreno Majul, Francisco Galvez Pizarro, Francis Ramel, and Oscar Yañez.

Hanken Grotesk

If you’re looking for a versatile sans-serif typeface inspired by the classic grotesques, Hanken Grotesk might be right down your alley. It shines with a friendly, distinguishable look and is equally suitable for small text and headings.

Nine weights are available, ranging from Thin to ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, and Black. Each weight comes with matching italics. A modern classic designed by Alfredo Marco Pradil.

Grenze

Grenze combines the best of two worlds. As a hybrid between Roman and Blackletter styles, it transports a sense of boldness and texture while at the same time offering the readability of classical typefaces.

The family includes nine weights (Thin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, and Black) with matching italics. To respond to different needs, Grenze comes with some useful advanced features such as ligatures, ornaments, extended language support, and various figure sets. Designed by Renata Polastri and the Omnibus team.

Fira Sans

Originally designed as a system font for Mozilla’s FirefoxOS, the humanist sans-serif Fira Sans grew into a versatile open-source typeface that stays readable across screen qualities and sizes.

Fira Sans is available in 18 styles, including nine weights and accompanying italics. The package also includes a mono-spaced variant. Designed by Carrois Apostrophe in cooperation with Erik Spiekermann.

Atkinson Hyperlegible

Certain letters and numbers can be hard to distinguish from one another for low-vision readers. Atkinson Hyperlegible is here to change that. Named after Braille Institute founder J. Robert Atkinson, the typeface focuses on letterform distinction to increase character recognition and improve readability.

Recognizable footprints, differentiated letterforms, unambiguous characters, and exaggerated forms are some of the techniques that optimize readability and give the typeface its distinctive look. Atkinson Hyperlegible includes four fonts, with two weights (Regular, Bold, Italics, Italics Bold). Thanks to accent characters, 27 languages are supported. Designed by Braille Institute of America.

Anek

The multi-script typeface Anek tells a very special story. It covers nine Indian languages plus Latin and was created through a collaboration of twelve type designers working across eight cities in India. The design of each script is deeply rooted in its typographic culture, while the different scripts live together in visual harmony.

All Anek fonts share visual similarities like circles and circular shapes, robust letter structures, and delicate joineries. With 40 styles per set, Anek is one of the few Indian variable display fonts with such a large set of weight and width styles. Designed by Sarang Kulkarni, Girish Dalvi, Noopur Datye, Hanif Kureshi, Maithili Shingre, Yashodeep Gholap, Divya Kowshik, Aadarsh Rajan, and Shuchita Grover.

Source Sans

Designed by Paul D. Hunt, Source Sans is Adobe’s first open-source typeface family. The sans-serif draws inspiration from classic grotesques and is characterized by a visual simplicity that works equally well in long-form texts just like as short labels in user interfaces.

Source Sans comes in six weights (ExtraLight, Light, Regular, SemiBold, Bold, Black) plus matching italics. The fonts offer wide language support for Western and East European languages, Vietnamese, Pinyin romanization of Chinese, and Navajo. A modern classic.

Beattingvile

If you’re looking for a font to give your project a personal, hand-made touch, Beattingvile by Garisman Studio is worth checking out.

The multilingual script font features stylistic alternates, swashes, and ligatures and is perfect for all projects where you want to make a statement that is a bit bolder. Perfect for headings, branding, label design, logo type, quotes, and much more — both on screen and in print.

Disket Mono

Monospace fonts often have a technical feel to them, waking connotations of coding editors or typewriters. Disket Mono is a bit different. The font strikes a perfect balance between the inspiration it draws from geometry, grids, and architecture and using soft corners for a more tactile, personal feel.

Disket Mono comes in two weights (Regular and Bold) and supports twenty languages. A beautiful display font, designed by Mariano Diez.

Srbija Sans

Srbija Sans is a neo-grotesque sans-serif typeface with a geometric look. It gets by without any decorative details, but when you look more closely, you’ll notice how small design decisions improve readability and give the clear shapes a warm and natural touch.

The typeface includes 315 glyphs, supporting Latin and Cyrillic, and featuring accents and ligatures, mathematical symbols, and currencies. Srbija Sans was designed by Vedran Eraković and Studio Metaklinika for the National Tourism Organisation of Serbia.

The League Of Moveable Type

The League of Moveable Type opened its doors back in 2009 when designers were just gaining the ability to put custom fonts on the web. The project’s mission has stayed the same since day one: to raise the design standards of the web.

Micah Rich, maintainer of the foundry, cares deeply about good typography and empowering everyone with great design skills. That’s why the catalogue only features carefully-picked open-source fonts — 17 at the moment. You can use them for free however and wherever you want.

Google Fonts

It’s certainly not an insider’s tip but always a great place to look for free fonts: Google Fonts. The library features more than 1,400 open-source font families for more than 135 languages, plus icons for common actions and items.

By the way, if you want to dive deeper into the principles of typography or delve into all of the artistic and technical aspects of modern typesetting and font technology, the Google Fonts Knowledge library is a treasure chest of typography wisdom.

Wrapping Up

Do you have a favorite free font that isn’t listed in the post? Let us know in the comments below. We’d love to hear about it!

(vf, il)

Design inspiration! Where do you find interesting websites? Here’s a list of showcases that we frequently visit for inspiration.

No matter if you’re looking for effective, unpretentious designs, websites that have that extra bit of fun built-in, examples of good e-commerce UX, interaction scenarios, or if you want to leave your own comfort zone and dive deeper into designs that go beyond the Latin writing system, you’ll surely find something in this post to tickle your ideas. Happy browsing!

Table Of Contents

You can jump directly to the topic you’re interested in to find relevant showcases or browse the complete list. Enjoy!

• alternative design
• dark mode design
• e-commerce UX
• fine web design
• international design
• landing pages
• minimal design
• mobile design
• one-page design
• page flows
• personal sites
• SaaS interfaces
• site of the day
• sustainable design
• typography
• UI patterns
• user journeys
• UX inspiration
• website roundups
• weekly showcase
• whimsical design

Japanese Design

The web spans the entire globe, however, when we talk about web design, the examples usually revolve around the 26 characters of the Latin alphabet. Other writing systems are often not part of the discussion — with the effect that a lot of brilliant websites stay unnoticed for a lot of us. Time to change that. If you’re up for a journey through Japanese web design, Responsive Web Design JP is for you. The examples in the collection shine with a unique lightness and concentration on the essential, and, even if you don’t master Japanese, you can browse the showcase by technique.

Design Made In Germany

Design Made In Germany compiles the best design work from German agencies and designers. Apart from covering website design, there are also collections featuring stellar pieces of brand design, print design, packaging, logos, posters, movies, typefaces, and illustrations.

Dark Mode Design

Dark Mode Design showcases beautifully designed websites that are either exclusively in dark mode or have the ability to switch. Wonderful examples that dark mode is not an add-on to a “regular” light design but a style with lots of creative possibilities.

Minimal Design

Dominic Whittle and Tom Fitzgerald, curators of Httpster, love good typography and effective, unpretentious design. More than ten years ago, they started emailing links of nice sites to each other but quickly realized that they needed a better system for sharing and tagging the things they get inspired by. That’s when Httpster was born.

Low-Carbon Websites

With big JavaScript libraries, large unoptimized images, and auto-playing videos, many incredible websites are heavier than they could be, creating a large, hidden carbon footprint. And then there are websites that prove that good design can also be achieved while keeping the carbon impact on the planet low. Lowwwcarbon features examples of sustainably built, low-impact websites. And if that’s not enough inspiration yet, Lowww is also dedicated to sustainable web design.

One Page Love

One Page Love showcases websites that get by with just one single page. The beauty of “one-pagers” lies in promoting one thing, straight to the point, without any clutter. Rob Hope founded One Page Love back in 2008 and continues to add one-page websites and resources daily. If you need some landing page inspiration or are looking for templates, this place has got you covered.

Fine Web And Interaction Design

Almost 8,000 sites that run the spectrum from fun and novel to clean and simple are waiting to be discovered on Siteinspire. Curated by Howells—Studio, you can browse them by style, type, or subject, or just see the very best.

Alternative Design

If you’re looking for extraordinary designs that experiment with interactivity and content in new and interesting ways, Hoverstat.es never ceases to inspire. The site describes itself as “the home of alternative design, code and content on the world wide web” and features everything from a portfolio with layered 3D preview to delightful little details like a slick looping scroller or menus that think outside the box.

Whimsical Design

“The web needs to take itself less seriously” is the message of The Whimsical Web. The site showcases websites that have that extra bit of fun that we often miss on the web these days. So if you’re up for some little surprises and weird details, Whimsical Design will leave you with a smile on your face and some new ideas.

Personal Sites

Your personal site needs an update? Personalsit.es has some new ideas in store for you. Built to share and revel in each others’ personal sites, the collection is jam-packed with inspiration — from simple and minimalistic to bold.

Site Of The Day

Every day, Awwwards awards the title “Site of the Day” to an outstanding website, rating its design, usability, creativity, and content and highlighting some of the details that make it outstanding, among them typography and color palette.

Website Roundups

In her Inspirational Website Roundups, Manoela Ilic presents websites with exceptional designs and interactions. Each edition is a surprise bag of the most beautifully designed and thoughtfully crafted websites.

UX In The Wild

Waveguide documents UX examples on different platforms and in different contexts, shining a light on remarkable interaction scenarios. From load-more pagination to QR code login, JJ. Ramirez, curator of Waveguide, explores every example in detail.

UI Patterns

From launch screens to error messages, from settings to radio buttons — no matter what kind of UI pattern you’re looking for, UI Garage features more than 6,700 patterns for web, mobile, and tablet, categorized and handpicked. Another great stop for some UI inspiration is Design Vault. The ever-growing collection features designs and patterns from products like Netflix, Pinterest, Medium, GitHub, and many more.

E-Commerce UX

The Baymard Institute maintains a database of 12,000+ full-page design examples, documenting e-commerce designs from 2012 to today. The examples are organized across 57 page types ranging from homepage and category to accounts and self-service and include desktop, mobile web, and mobile apps. Each example highlights what the page design does well from a UX perspective and what could be improved.

E-Commerce Inspiration

Ecomm.design unites design and tech inspiration in one place. The site showcases more than 3,800 e-commerce websites, along with their tech stack. You can browse the examples by e-commerce platform, category, technologies, and traffic.

Landing Pages

Landbook showcases different types of websites, browsable by color, typography, style, and industry. Among the examples are landing pages, portfolios, blogs, product pages, and more. For more landing page inspiration, also be sure to browse by Landings. The site collects hundreds of landing pages created by leading companies. You can browse them by color, light, and dark mode.

Mobile Inspiration

Mobbin is a library of more than 100,000 fully searchable mobile and web screenshots. The screenshots are organized by app categories, screen patterns, and user flows. Login is required; the free plan includes the latest app designs of the week.

Page Flows

Page Flows was created to help you design better user flows by learning from proven products. The library features more than 3,300 recordings and emails of tried and tested products to give you inspiration for anything from onboarding to upgrading and inviting friends. A membership is required to access all user flows.

User Journeys

UI Sources has got your back when it comes to designing common flows. The site features recordings of end-to-end user journeys to help you gain insights and identify trends. A subscription is required to access some of the features.

SaaS Interfaces

Do you need some inspiration for SaaS interfaces? SaaS App Design Inspiration collects UI and UX design examples from some of the best SaaS products. A subscription is required to access the complete gallery. Lookin’ for more? Saas Landing Page Examples features UI examples created by SaaS companies. Plenty of inspiration for anything from landing pages and pricing to “About Us” pages, features, testimonials, and more.

Weekly Showcase

Do you want to get design inspiration delivered directly to your inbox? The UIJar newsletter brings you design updates, articles, and design resources every week. The accompanying online showcase features handpicked websites, branding, and curated collections, among them brutalist websites, websites with big typography, or websites with lots of whitespace.

Fonts In Use

There are so many fantastic typefaces out there that decisions can be hard. Fonts In Use is here to help. The independent archive indexes typography by typeface, format, industry, and period. Perfect for discovering new fonts and font pairings.

Wrapping Up

Do you have a favorite showcase that you keep visiting for web design inspiration? Or maybe you’ve been curating one yourself? Let us know in the comments below! We’d love to help spread the word.

What UX podcasts are you listening to? Below you’ll find a few wonderful UX podcasts we came across, as well as podcasts that the UX community shared with us.

Whether you’re particularly interested in user research, are looking for advice to navigate a career in UX, or want to better understand how the human brain works, the podcasts in this collection cover every possible aspect of UX. Not all of them are still running, but the archives are incredible, with interviews full of insights and gems.

A huge thank-you to the hosts — and, of course, the people behind the scenes — for producing these podcasts and helping us all make sense of the multifaceted, exciting world that UX is.

So, prepare yourself a nice cup of coffee and get cozy — oh, and don’t forget to charge your headphones before your next commute. Happy listening!

Table Of Contents

You can jump directly to the topic you’re interested in to find podcasts relevant to you or browse through the complete list.

• accessibility
• best practices
• business
• career and leadership
• content strategy
• creative culture
• design
• design systems
• diversity
• future of UX
• hacking
• human behavior
• human-centered design
• information systems
• product design
• UI
• usability
• UX systems
• user research
• workflow

UX Tips And Best Practices

UX Cake

UX Cake helps you become more effective in your UX work and career. In each episode, host Leigh Allen-Arredondo invites leaders in the field of UX to share their practical advice to get the best outcomes for your work, your users, and your career in UX.

• 🎙 Hosted by Leigh Allen-Arredondo
• 🗓 New episodes weekly

The NN/g UX Podcast

In the Nielsen Norman Group UX Podcast, Senior User Experience Specialist Therese Fessenden interviews industry experts, covering common questions, hot takes on pressing UX topics, and tips for building truly great user experiences.

• 🎙 Hosted by Therese Fessenden
• 🗓 New episodes monthly

User Defenders

Helping you to better fight for your users and business is the mission of the User Defenders podcast. In every episode, influential UX superheros share their stories, reveal their design superpowers, and offer their advice.

• 🎙 Hosted by Jason Ogle
• 🗓 Currently paused

24 Minutes Of UX

Every 24 Minutes of UX episode features a curious “Seeker” who is seeking advice in a specific topic within the domain of UX and an experienced “Giver” who shares the knowledge they gathered around the topic over the years.

• 🎙 Hosted by Jesse Anton and Peter Horvath
• 🗓 Retired

Boagworld Show

The Boagworld Show was the first web design podcast and ran from 2005 to 2021, interviewing the leading minds in the field and sharing best practices in digital. The archive is a treasure chest for any UX professional.

• 🎙 Hosted by Paul Boag
• 🗓 Retired

User Research

Awkward Silences

Awkward Silences interviews the people who interview people. The podcast dives deep into all things UX research, qualitative data, and the craft of understanding people to build better products and businesses.

• 🎙 Hosted by Erin May and JH Forster
• 🗓 Ca. two to three new episodes per month

UX Research Geeks

UX Research Geeks is all about User Experience Design, research, and everything that goes along with it. Among the guests are senior researchers, designers, speakers, CEOs, startup founders, and many more.

• 🎙 Hosted by Tina Ličková
• 🗓 Ongoing

Human Behavior

Hidden Brain

In Hidden Brain, Shankar Vedantam uses science and storytelling to reveal the unconscious patterns that drive human behavior, shape our choices, and direct our relationships.

• 🎙 Hosted by Shankar Vedantam
• 🗓 New episodes weekly

The Cognitive Bias

Clear language, the value of discomfort, and the psychology of money are just a few of the topics that The Cognitive Bias covers. It explores the world of things we do that don’t make any rational sense, one bias at a time.

• 🎙 Hosted by David Dylan Thomas
• 🗓 Retired

Human-Centered Design

This Is HCD — Human-Centered Design Podcast

The mission of the Human Centered Design Podcast is to educate and empower people and organizations about the power of true human-centered design. It brings together thought leaders from various disciplines such as service design, user experience, interaction design, and product management to better understand what it means to work within a human-centric method.

• 🎙 Hosted by This is HCD
• 🗓 Several episodes per month

Usability

UXpod

UXpod offers a free-ranging set of discussions around UX design, website design, and usability in general. The podcast retired last year, but there is an incredible archive with more than 120 episodes and even transcripts.

• 🎙 Hosted by Gerry Gaffney
• 🗓 Retired

Accessibility

A11y Rules

There is a lot of information about making the web accessible, but not so much information about the people working to make the web accessible. A11y Podcast is here to change that by inviting people involved with web accessibility.

• 🎙 Hosted by Nicolas Steenhout
• 🗓 New episodes weekly

UI

UI Breakfast Podcast

In the UI Breakfast Podcast, Jane Portman invites industry experts to share actionable knowledge. The topics cover UI/UX design, products, marketing, and more.

• 🎙 Hosted by Jane Portman
• 🗓 New episodes weekly

UX Systems

The Object-Oriented UX Podcast

The Object-Oriented UX Podcast is a deep-dive into the weeds of UX systems, information architecture, human psychology, data wrangling, structured content, UX process, and, above all, simplifying the complex.

• 🎙 Hosted by Sophia V. Prater
• 🗓 Currently paused

Content Strategy

The Content Strategy Podcast

The Content Strategy Podcast is a show for people who care about all things content. Kristina Halvorson interviews expert leaders and exciting new voices in the field of content strategy, diving deep into topics that inform how we shape digital content and how it, in turn, shapes us.

• 🎙 Hosted by Kristina Halvorson
• 🗓 Ongoing

Writers In Tech

Brought to you by the UX Writing Hub, Writers in Tech is a podcast where content strategists, UX writers, and content designers share their well-kept industry secrets.

• 🎙 Hosted by Yuval Keshtcher
• 🗓 Ca. two new episodes per month

Content Rookie

You want to dive deeper into the practice and art of all things content? Then tune into Content Rookie, where Nicole Michaelis and her guests explore UX writing, content marketing, content design, and copywriting.

• 🎙 Hosted by Nicole Michaelis
• 🗓 New episodes monthly

Design Systems

Design System Office Hours

In Design System Office Hours, design system practitioners Davy Fung and PJ Onori talk about design-led product ownership, scaling and adoption, community and engagement, design system team models, and much more.

• 🎙 Hosted by Davy Fung and PJ Onori
• 🗓 Ca. two to three new episodes per month

Design Systems Podcast

The Design Systems Podcast interviews industry leaders and product makers to share best practices and explore the areas where design and development come together.

• 🎙 Hosted by Chris Strahl
• 🗓 New episodes ca. once to twice a month

Information Systems

The Informed Life

Information is key to deciding and acting. The Informed Life podcast explores how people organize information to get things done and how to better design, build, and use information systems.

• 🎙 Hosted by Jorge Arango
• 🗓 New episodes biweekly

Product Design

How I Built This

For How I Built This, Guy Raz interviews the world’s best-known entrepreneurs to learn how they built their iconic brands. They reveal their moments of doubt and failure and share insights on their eventual success.

• 🎙 Hosted by Guy Raz
• 🗓 New episodes on Mondays and Thursdays

The Product Design Podcast

The Product Design Podcast invites the best and brightest in product design to dig into how they got where they are today, what mistakes they made along the way, and what advice they have for you as you navigate the world of product design.

• 🎙 Hosted by Seth Coelen
• 🗓 Ca. two to three new episodes per month

Better Product

Better Product shares the stories of industry-leading companies whose products have a soul, mission, and vision. Through conversations with CEOs, entrepreneurs, and innovators, hosts Christian Beck and Meghan Pfeifer explore what it takes to build better products.

• 🎙 Hosted by Christian Beck and Meghan Pfeifer
• 🗓 Currently paused

New Layer

New Layer is a podcast on everything related to product design, discussing design careers, tools, education, critique, and much more. The podcast has retired, but with two years of weekly episodes, the archive is still a treasure chest.

• 🎙 Hosted by Tanner Christensen and Jasmine Friedl
• 🗓 Retired

Workflow

Design Better Podcast

Currently in its seventh season, the Design Better Podcast by InVision explores what it takes to make work more collaborative, creative, inclusive, and impactful throughout your organization.

• 🎙 Hosted by Aarron Walter and Elijah Woolery
• 🗓 Ongoing

Business

The Futur Podcast

The Futur Podcast explores the overlap between design, marketing, and business. In each episode, Chris Do invites a new guest from the worlds of design, technology, marketing, business, philosophy, and personal development to understand what drives them and what we all can learn from it.

• 🎙 Hosted by Chris Do
• 🗓 New episodes weekly

Career And Leadership

Honest UX Talks

Anfisa Bogomolova and Ioana Teleanu together have 20 years of experience in the UX field. In Honest UX Talks, they share their lessons learned about UX design careers, challenges, portfolios, mental health, and, of course, all things UX.

• 🎙 Hosted by Anfisa Bogomolova and Ioana Teleanu
• 🗓 New episodes weekly

The UX Hustle Podcast

The UX Hustle Podcast is a show with a focus on crafting and navigating a UX career and refining your UX process to become better at what you do. It also explores how to apply UX to your life to get more done, with low stress.

• 🎙 Hosted by Amanda Worthington
• 🗓 Ongoing

Finding Our Way

In Finding Our Way, hosts Peter Merholz and Jesse James Garrett navigate the challenges and opportunities of design and design leadership.

• 🎙 Hosted by Peter Merholz and Jesse James Garrett
• 🗓 Ongoing

Google Design Podcasts

Google Design Podcasts is a collection of podcasts that gives you design inspiration and insights. Method explores the career journeys of designers at Google, while Design Notes goes in-depth with designers working in diverse creative disciplines.

• 🎙 Hosted by Travis Neilson (Method) and Liam Spradlin (Design Notes)
• 🗓 Method: Retired; Design Notes: New episodes ca. monthly

Diversity

Revision Path

Revision Path showcases Black designers, artists, developers, and digital creatives from all over the world. Through weekly in-depth interviews, you’ll learn about their work, their goals, and what inspires them as creative individuals.

• 🎙 Hosted by Maurice Cherry
• 🗓 New episodes weekly

Technically Speaking

Technically Speaking is a podcast by Harrison Wheeler about BIPOC designers, entrepreneurs, and technologists sharing their unique stories of triumph and resilience at the intersection of product design.

• 🎙 Hosted by Harrison Wheeler
• 🗓 Ongoing

The Future Of UX

Rosenfeld Review Podcast

What shifts does UX face? And how can individuals and teams respond in ways that drive success? That’s what Lou Rosenfeld wants to find out by inviting changemakers in the UX world and beyond to the Rosenfeld Review Podcast.

• 🎙 Hosted by Lou Rosenfeld
• 🗓 Ca. one to two new episodes per month

The Sustainable UX Podcast

The Sustainable UX Podcast is for everyone who wants to make an impact for a sustainable future. In each episode, the hosts Bavo Lodewyckx and Thorsten Jonas invite you to meet people from around the world who try to save the world through and within UX, design, and tech.

• 🎙 Hosted by Bavo Lodewyckx and Thorsten Jonas
• 🗓 New episodes monthly

Future Of UX

In every episode of the Future of UX podcast, Patricia Reiners talks to leading UX/UI designers and digital pioneers about the future and how we are going to design a great user experience with new technologies.

• 🎙 Hosted by Patricia Reiners
• 🗓 Retired

Creative Culture

Design Matters

Design Matters started out in 2005 as a little radio show and soon became the first podcast about design and an inquiry into the broader world of creative culture. Among the guests are designers, writers artists, curators, musicians, and other luminaries of contemporary thought.

• 🎙 Hosted by Debbie Millman
• 🗓 New episodes weekly

Design

99% Invisible

99% Invisible has grown from a four-minute spot on broadcast radio to an enormously popular narrative podcast with listeners all over the world. It dives deep into the things we don’t think about — the unnoticed architecture and design that shape our world.

• 🎙 Hosted by Roman Mars
• 🗓 New episodes weekly

Creative Capes

Creative Capes features interviews with industry legends like Stefan Sagmeister, John Maeda, Marina Willer, the CDO of Zoom as well as Cisco, and many more, sharing insights on leadership, branding, UX, and innovation. Inspiration is guaranteed.

• 🎙 Hosted by Future London Academy
• 🗓 Ongoing

Hacking

Darknet Diaries

How about a peek inside the dark side of the web? Darknet Diaries is a podcast about hackers, breaches, shadow government activity, hacktivism, cybercrime, and all the things that dwell on the hidden parts of the network.

• 🎙 Hosted by Jack Rhysider
• 🗓 New episodes weekly

Last But Not Least…

Did you know that there’s a Smashing Podcast, too? In each episode, host Drew McLellan talks to design and development experts about their work on the web, as well as catching you up with the latest news and articles at Smashing Magazine. And, well, it’s suitable for cats, too. ;-)

If you have a favorite UX podcast that is not mentioned in this post — or maybe you’re running one yourself — please let us know in the comments below. We’d love to hear about it!

Maybe you’ve already seen some tech advent calendars pop up in your timelines and feeds? Or perhaps you’re already following along your all-time favorite advent calendar every day? It’s a lovely annual tradition, and this year, the web community has once again brought forth some fantastic advent calendars that count down the time to Christmas with a daily dose of web design and development goodies.

Catering for bite-sized pieces of knowledge every day — be it through stellar articles, inspiring experiments, or challenging puzzles — the advent calendars are the perfect occasion to learn something new, even in a hectic December schedule. And since there are so many wonderful initiatives out there, we decided to bring them all to one place. Whether you’re a front-end developer, UX designer, or content strategist, we’re sure that you’ll find at least something to inspire you for the upcoming year. So prepare yourself a nice cup of coffee and get cozy — there’s always something new to learn and discover!

Feel free to jump right to the advent calendar topic you’re interested in, or skip the table of contents to browse the complete list.

• accessibility
• C#
• CSS
• design
• design systems
• freebies
• HTML
• JavaScript
• JVM
• performance
• Perl
• PHP
• programming
• Progressive Web Apps
• Raku
• React
• security
• storytelling
• systems administration
• typography
• Umbraco
• UX
• web components
• web development
• Vue
• WebGL
• WordPress

HTML

HTMHell Advent Calendar

Last year, Manuel Matuzović published the first HTMHell Advent Calendar with 24 links to articles about HTML he found on other sites. Since many people enjoyed these posts, he decided to raise the ante and publish 24 articles on HTMHell written specifically for the advent calendar. 24 authors from all over the world share their knowledge about accessibility, performance, usability, and security.

• @htm_hell on Twitter
• Manuel Matuzović on Twitter

SELFHTML Adventskalender (German)

Often it’s not cutting-edge technologies that aspiring web developers are interested in but the little things they come across in their day-to-day work that don’t work as expected. That’s exactly what the SELFHTML Adventskalender 2022 is all about this year. In the newest edition of their advent calendar, the SELFHTML team answers the 24 most common questions from their FAQ. Lots of light-bulb moments are guaranteed.

• @SELFHTML on Twitter

CSS

Advent Of CSS

If you sign up to the Advent of CSS, you’ll get an email every day that outlines a CSS challenge. Each of the given challenges includes all the assets you need to get started — including a Figma design file, a style guide, a brief, and ways to push yourself. You can get the challenges for free (or pay for the solutions).

• Amy Dutton on Twitter

JavaScript

Advent Of JavaScript

For folks who are more into JavaScript, there’s the Advent of JavaScript where you can sign up for a daily email outlining a JavaScript challenge. Each of them comes with the HTML and CSS you need so that you can focus on the JavaScript. You’ll also receive a brief on how to get started and ways to push yourself.

• James Q. Quick on Twitter

adventJS

Fancy more JavaScript challenges? Well, Miguel Ángel Durán has got your back with adventJS, an advent calendar that started back in 2015 in Spanish and that is now available in English. 24 days, 24 challenges. Are you ready?

• Miguel Ángel Durán on Twitter

React

React Holiday

In his React Holiday calendar, Michael Chan explores modern React in 25 days. It’s already the sixth year for React Holiday, and this edition will be all about Next.js 13. In 25 emails, you’ll dive deeper into file system routing, data-fetching, nested layouts, and suspense.

• Michael Chan on Twitter

Vue

Advent Of Vue

No matter if you’re just getting started with Vue or if you’re a seasoned developer, Advent of Vue brings you 24 holiday-themed Vue coding puzzles that revolve around building small-scale Vue components and applications. If you sign up for the challenge, you’ll receive an email every day, with a problem description, additional screenshots and/or recordings of a target application, as well as a starter project on Stackblitz, which serves as a baseline for your solution.

• Advent of Vue on Twitter

Web Development

12 Days Of Web

12 Days of Web is a year-end celebration of fundamental web technologies. Every day from December 13 to 24, Stephanie Eckles will share a new article on HTML, CSS, or JavaScript. To shorten the wait until the first article will be revealed, you can check out the archive from last year.

• Stephanie Eckles on Twitter

24 Pull Requests

24 Pull Requests is a yearly initiative to encourage contributors around the world to send 24 pull requests between December 1st and December 24th. The project is available in twenty languages and encourages all kinds of contributions to open-source projects. There’s a new contribution form on the site that allows you to record the contributions you’ve made each day that wouldn’t usually make sense as a pull request.

• @24PullRequests on Twitter

Festive Tech Calendar 2022

With over 2K subscribers on YouTube, the Festive Tech Calendar is back. From December 1 to 31, you’ll discover videos from different communities and people around the globe. And, well, this is an advent calendar where peeking is allowed: There are several tracks every day, so be sure to check the schedule in advance and mark your calendars to not miss out on anything.

• “Festive Tech Calendar” on YouTube
• @CloudFamily on Twitter

Bekk Christmas

This year’s Bekk Christmas advent calendar shares new original articles, podcasts, tutorials, listicles, and videos every day up until Christmas Eve. The calendar is written and produced by the Bekk team – developers, designers, project managers, agile coaches, management consultants, specialists, and generalists — and is a treasure chest of knowledge (just like their archive, by the way). If you prefer, you can subscribe to the newsletter to get the new content delivered right to your inbox on a daily or weekly basis.

• Bekk on Twitter
• Kristofer Giltvedt Selbekk on Twitter

24 Ways (2019)

First initiated by Drew McLellan, 24 ways started out as a simple website that published a new tip or trick each day leading readers through December up until Christmas. It launched in 2005 and still has all of the calendars available online. Unfortunately, the last one was published in 2019 and will be taking a well-earned break after that year’s “final countdown”.

• @24ways on Twitter

24 Jours De Web (French)

24 Jours De Web is a lovely French calendar which first appeared back in 2012 and has been continuing the tradition of online advent calendars ever since. 24 authors come together each year and publish an article on UX, accessibility, privacy, and other topics related to the good ol’ web.

• @24joursdeweb on Twitter

Accessibility

A11y Advent Calendar (2020)

Heydon Pickering once said, “Accessibility is not about doing more work but about doing the right work.” In 2020, Kitty Giraudel decided to publish an accessibility tip a day in their very own #A11yAdvent. Some of the tips are probably common knowledge for many, yet each of the posts cover so many of the important aspects of accessibility that will still hold true for years to come.

• Kitty Giraudel on Twitter

24 Accessibility (2019)

An advent calendar we surely miss is 24 Accessibility. The site hasn’t had a new article since 2019, but still offers a good resource of articles on all subjects related to digital accessibility. Whether you’re new to accessibility or a veteran, a developer, designer, user experience professional, quality assurance analyst, or project manager, you’ll find an article of interest during the run of the series.

• @24accessibility on Twitter

Performance

Web Performance Calendar

An advent calendar that has been publishing since 2009 is back again: good ol’ PerfPlanet, with all things speed and web performance. Anyone is welcome to contribute to the calendar, so do feel free to reach out with a topic or tool you’re passionate about or a technique you’d like to tell the web performance community about.

• @perfplanet on Twitter
• Stoyan Stefanov on Twitter

Security

Advent of Cyber

Security can be a daunting field and particularly difficult for beginners. Advent of Cyber helps you kick-start your security journey with a fun Christmas story and a new beginner-friendly task that breaks down common security topics into byte-sized walkthroughs and challenges every day. And, well, there are some nice prices to win, too.

• TryHackMe on Twitter

Code Security Advent Calendar

If you’re up for a challenge that involves spotting security vulnerabilities, then the Code Security Advent Calendar is just the right one for you. Every day, there will be a code puzzle to sharpen your security skills and have a fun December season. Follow along on Twitter or Mastodon to be notified about each new challenge, share it with your friends, and discuss solutions and feedback in the comments, or browse by their website for a new code challenge every day.

• @SonarSource on Twitter
• @SonarResearch@infosec.exchange on Mastodon

Web Components

Web Components Bookmarks

Web Components Bookmarks is a collection of Web Components guides and resources curated by Serhii Kulykov. Serhii plans to add lots of content every day in the upcoming weeks as an advent series and, finally, to open-source the collection at the end of December.

• Serhii Kulykov on Mastodon

Progressive Web Apps

PWAdvent (2020)

PWAdvent is a nice advent calendar for everyone who’s excited about the web platform and Progressive Web Apps, of course. Take a look at all the great stuff the web has to offer in the 2020 calendar, in which a new progressive browser feature was introduced every day by Nico Martin himself and others.

• Nico Martin on Twitter

UX

Lean UXmas

Lean UXmas has been publishing each advent since 2014 and is a collection of the most popular articles from this year’s Agile and Lean UX latest news. If you find yourself impatiently waiting for the next article to be posted, you can always check out the previous advent calendars by smashing the year in the base URL, or simply search for them below the website’s header.

• @LeanUXmas on Twitter
• Adrian Howard on Mastodon

Storytelling

The Storyteller Advent Calendar

With her Storyteller Advent Calendar, Chiara Aliotta transforms you into a storyteller who is able to craft beautiful and remarkable experiences and brands through storytelling. You can follow along on Instagram for 24 magic tips and useful resources on storytelling and design — from brand storytelling and brand strategy to storytelling in UX.

• @untilsundayagency on Instagram
• Chiara Aliotta on Twitter

Typography

The Independent Type Foundry Advent Calendar

The independent type design community has grown tremendously over the last couple of years. To shine a spotlight on the stellar work that independent foundries do, Matthias Ott dedicates an advent calendar to them this December: The Independent Type Foundry Advent Calendar. Every day up to the 24th, the calendar features a different type foundry and highlights some of their most notable typefaces. Inspiration is guaranteed!

• Matthias Ott on Twitter
• Matthias Ott on Mastodon

Design Systems

Design System Email Course

Level up your knowledge of design systems, one email at a time. That’s the idea behind Dan Mall’s Design System Email Course. Every day, Dan will send you some simple premises and a few examples to get you thinking about design systems in a different and clear way — no more than two minutes of reading each day. The course is not a classical advent calendar, but since it is made up of 24 lessons, it’s a perfect match for the advent season.

• Dan Mall on Twitter

Design

It’s A Shape Christmas

It’s A Shape Christmas is a digital calendar that counts down to Christmas and reveals a bespoke illustration each day themed around four different shapes (Square, Triangle, Circle and Hexagon) and, well, Christmas. The project was started in 2011 by the UK design agency Made by Shape. This year, they look back over the years and showcase their favorite illustrations.

• @shapechristmas on Twitter

Designcember (2021)

Last year, as a celebration of web design, the good folks at web.dev dropped a UI development treat for you every day with their brilliant Designcember advent calendar. Built with CSS container queries and CQ Polyfill, it’s full of little details to explore! An oldie but goodie.

• @ChromiumDev on Twitter

Christmas Experiments (2018)

Christmas Experiments started back in 2012, with the goal to deliver great experiments and highlight top web creative as well as newcomers. It was a pretty cool WebGL advent calendar that featured a daily new experiment that was quite obviously made with love by digital artists. Unfortunately, it did not continue after the 2018 edition.

• @christmasxp on Twitter

Freebies And Discounts

24 Days Of Design Gifts

Christmas morning comes early this year. Framer and Fons Mans teamed up with a few friends to count down to Christmas with 24 Days of Design Gifts. Each deal is only available for 24 hours, so if you want to be sure to not miss out on anything, you can set a jingle bell to get a reminder via email every time a new deal goes live.

• Framer
• Fons Mans on Twitter

Programming

Advent of Code

If you prefer a puzzle over an article, take a look at Advent of Code. Created by Eric Wastl, this is an advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. You don’t need a computer science background to participate — just a little programming knowledge and some problem solving skills will get you pretty far. Go ahead and give it a go!

• Eric Wastl on Twitter

24 Days In December

Every year, 24 Days in December invites members of the PHP community to share their personal journey and stories with PHP. Did you learn something recently you’d like to share in a guide or a tutorial? Do you have an opinion about the current state of PHP core development? Have you been working on something cool you’d like to share with the community? If you have a thought or idea you’d like to share, this is your chance.

• @24DaysInDec on Twitter

C# Advent Calendar

It’s time for the sixth annual C# advent calendar that will feature two pieces of content every day. Anyone can contribute by sharing their blog posts, videos, articles, or podcast episodes dedicated to C# development. All spots are currently claimed. However, you can still sign up as a substitute.

• Matthew D. Groves on Twitter

JVM Programming Advent Calendar

The Java Advent 2022 is here! To make the advent season even sweeter for JVM enthusiasts, there will be a new article about a JVM-related topic every day. The project started in 2012 with the idea of providing technical content during the advent time, so keep looking for nice things under the Java Christmas tree!

• @JavaAdvent on Twitter

Raku Advent Calendar

Back in October of 2019, “Perl 6” was renamed to “Raku”. It’s the 7th year since (what was then called) Perl 6 was released, and the 14th year in a row for this Raku Advent calendar. Stay tuned for lots of articles on metaprogramming, applications, useful Raku modules, programming techniques, guides on how to work with Raku inside containers, and even how to migrate from good ol’ Perl.

Perl Advent

The Perl Advent started back in 2000 and is perhaps the longest running web advent calendar that many know of. It is back this year with insightful articles written by authors from all types of Perl programming levels. Make sure to also check out the archive — it’s worth it.

• Mark Fowler’s website

Kodekalender (Norwegian)

The Norwegian Kodekalender by the folks at Knowit is just the kind of advent calendar for those of you who love programming. Behind each door, you’ll find a task you have to answer in the form of a simple text string or a number. The doors vary in degree of difficulty. If you solve the task before the next door opens, you’ll get a chance to be drawn as the lucky winner.

• @knowitnorge on Twitter

CMS

WPMarmite Advent Calendar

WPMarmite’s Advent Calendar features a new WordPress resource every day leading up to Christmas to help you create better WordPress websites. Behind each door, there’s a plugin, theme, blog, or even discount waiting to be discovered.

• WPMarmite on Twitter

24 Days In Umbraco

It’s the 11th year for 24 Days In Umbraco. If you’re interested in Umbraco (otherwise known as the ‘Friendly CMS’) but not sure where to start, you can always check out the articles by tag(s) and find the answers to your questions. There’s also a new piece of AI art to discover every day.

• @24daysinumbraco on Twitter

Systems Administration

SysAdvent (2021)

Unfortunately, there’s no new edition of the SysAdvent this year, but the blog archive is full of goodies for anyone dealing with system administration. Created with the goals of sharing, openness, and mentoring, you’re in for some great articles about systems administration topics written by fellow sysadmins.

• @SysAdvent on Twitter

Last But Not Least…

We’d like to say thank you to each and every one involved in these projects! The communities in our web industry wouldn’t be able to learn so much and thrive if it wasn’t for your hard work and dedication. 🙏

If you know of a calendar that isn’t mentioned here (or maybe you created one yourself?), please do post it in the comments section below — we’d love to help spread the word!

(il, cr, vf)

Design systems ensure alignment, reusability, and consistency across a project or brand. And while we have gotten very good at breaking down UIs into reusable components, a lot of design systems aren’t as useful and practical as they could be, or they aren’t even used at all. So how can you make sure that the work you and your team put into a design system really pays off? How can you create a design system that everyone loves to use?

In this post, we’ll take a closer look at interesting design systems that have mastered the challenge and at resources that help you do the same. We’ll explore how to deal with naming conventions, how motion and accessibility fit into a design system, and dive deep into case studies, Figma kits, and more. We hope that some of these pointers will help you create a design system that works well for you and your team.

Table of Contents

Below you’ll find quick jumps to real-world design systems and specific design system topics. Scroll down for a general overview. Or skip the table of contents.

• Audi Design System
• Brand Estonia Design System
• Carbon Design System
• Culture Amp Design System
• Deutsche Bahn Design System
• If Design System
• Nord Design System
• Olympic Brand Design System
• Shopify Design System
• Workbench Design System
• accessibility
• brand expression
• case studies
• custom design attributes
• data visualization
• enterprise design systems
• Figma kits
• live examples
• measuring design systems
• motion
• multi-lingual design
• naming conventions
• ROI calculator
• UX writing
• visual examples
• workbook

Inspiring Real-World Design Systems

Nord: Accessibility And Naming Conventions

Bringing together everything that’s required to manage a healthcare business digitally, Nordhealth creates software that aims to redefine healthcare. As such, their design system Nord is heavily focused on accessibility.

Nord offers plenty of customization options, themes, and a fully-fledged CSS framework, plus dedicated guides to naming conventions and localization, for example. Unfortunately, the Nord Figma Toolkit isn’t open-sourced yet.

Workbench: Comprehensive Live Examples

Gusto serves more than 200,000 businesses worldwide, automating payroll, employee benefits, and HR. To enable their team to develop cohesive and accessible experiences for Gusto’s platform, the Workbench design system encompasses Gusto’s design philosophy, design tokens, creative assets, React components, and utilities — and documentation to tie it all together.

What really stands out in the Workbench system are the comprehensive live examples that explain exactly how components should be used in different contexts. Do’s and don’ts, visual explanations, and implementation details ensure that both designers and developers working with Workbench can use the design system effectively. For even more convenience, there’s also a Gusto Workbench VS Code Extension with common snippets for UI components.

Olympic Brand: Branding And Multi-Lingual Design

The Olympic Games are probably one of the most widely recognized brands in the world. Since the birth of the modern Games more than 125 years ago, hundreds of people have grown and enhanced the Olympic brand. To increase consistency, efficiency and impact across all that they do, the IOC hired a Canadian agency to create a comprehensive design system that conveys the timeless values of the Olympic Games and propels the brand into the future.

The Olympic design system is focused on branding and identity design, but also provides examples of illustrations and graphic elements. It shows how to manage multi-lingual challenges and how to use typography, with plenty of good and not-so-good examples and guidance notes along the way.

Brand Estonia: Custom Design Attributes

Pure and contrasting nature, digital society, and smart, independent-minded people are the core values behind the brand Estonia. The Brand Estonia design system maps the country’s strengths and shows how to express them through writing, designs, presentations, and videos.

Stories, core messages, facts, and plenty of examples and templates provide a solid foundation for creating texts and designs across the brand — be it on the web, in social media, or print. A special highlight of Estonia’s design system lies on authentic photos and custom design attributes such as wordmarks and boulders to underline the message.

Audi: Visual Examples Of Do’s And Don’ts

Audi UIs range from websites to applications for a particular service. The Audi design system provides a joint set of components, modules, and animations to create a well-balanced, system-wide user experience — from the app to the vehicle.

Along with brand appearance guidelines and UI components, a handy feature of the design system is its comprehensive set of visual examples of how a component should (and shouldn’t) be used in Audi’s interfaces. There is also a Audi UI Kit for Figma and a Sketch UI library that ensure that designers use the most up-to-date components and icons in their products.

Deutsche Bahn: Content Guidelines And UX Writing

Deutsche Bahn, the national railway company of Germany, is one of the most recognized brands in Germany. With the help of their DB Digital Product Platform, the company enables developers, designers, and copywriters to build flexible digital experiences with an emphasis on mobility.

The design system features content guidelines, accessibility considerations, code examples, components, and contextual examples of how to use them. It also provides guidelines around UX writing and helpful visual guides to accessibility and logo. Everything is open source on GitHub and NPM.

Shopify, If, And More: Data Visualization

Data is pretty much useless if we can’t make sense of it. Luckily, data visualization helps us tell the full story. But how to include data visualization in a design system? Here are some examples.

Shopify’s design system Polaris maps out guidelines for how to approach data visualization and defines five core traits for successful data visualizations. Do’s and don’ts for different data visualizations deliver practical examples. Culture Amp features helpful further reading resources for each type of data visualization they define in their design system. The If Design System shines a light on color in data visualizations, and the Carbon Design System comes with demos and ready-to-use code snippets for React, Angular, Vue, and Vanilla.

Design Systems For Figma

Atlassian, Uber, Shopify, Slack — these are just a few of the design systems you’ll find on Design Systems For Figma. Curated by Josh Cusick, the site is a growing repository of freely available Figma kits of design systems — grouped, organized, and searchable.

Not featured in the collection, but worth looking into as well, is the GOV.UK design system Figma kit. It focuses specifically on complex user journeys and web forms. Lots of valuable insights and inspiration are guaranteed.

Design System Resources

Design System Naming Conventions

Let’s face it, naming things can be hard. Particularly in a design system, where you need to find names for your components, styles, and states that can be easily understood by everyone who works with it. But how to best tackle the task? Ardena Gonzalez Flahavin explores not only why we should care about naming in our design systems but also what we should keep in mind when doing so.

Shayna Hodkin also summarized best practices for solid naming conventions for the different categories in a design system — from colors and text styles to layer styles and components.

Another great read on the topic comes from Jules Mahe. To help you find the right balance between clarity, searchability, and consistency, Jules summarized tips for naming your design files, understanding what you need to name in a design system, and structuring it. Three useful resources for futureproofing your design system.

Accessibility In Design Systems

When building a design system, it’s a good idea to include guidelines and documentation for accessibility right from the beginning. By doing so, you reduce the need for repeat accessibility work and give your team more time to focus on new things instead of spending it on recreating and testing accessible color palettes or visible focus states again and again. In her article on accessible design systems, Henny Swan explores what an accessible design system needs to include and how to maintain it.

To shift the understanding of accessibility from one of basic compliance to a truly inclusive, human-centered experience, the team at AdHoc released their Accessibility Beyond Compliance Playbook. It explores several ways to improve accessibility — from the immediate task of building accessible products to creating teams of people that underscore an Accessibility Beyond Compliance mindset.

Another handy resource to help you incorporate accessibility efforts comes from IBM. Their open-source Carbon Design System is based on WCAG AA, Section 508, and European standards to ensure a better user experience for everyone. It gives valuable insights into how users with vision, hearing, cognitive, and physical impairments experience an interface and what designers should think about to ensure their design patterns are operable and understandable.

For more practical tips, be sure to check out the IBM Accessibility Requirements checklist on which Carbon is based. It features detailed tips to make different components and design patterns comply with accessibility standards. A way forward to empowering your diverse user base.

Brand Expression In Design Systems

When it comes to visual elements like icons and illustrations, many companies have difficulties finding the right balance between being on-brand, useful, and scalable. The team behind Design Systems For Figma also faced this challenge and came up with a recipe for creating and scaling a system of visuals. Elena Searcy summarized how this system works.

In her blog post, Elena starts with the smallest visual element, an icon, explaining what her team aims for when choosing and creating icons to make them align with the brand and provide real value for the user. Elena also shares insights into how they handle illustrations, including a scalable way of creating them and considerations regarding anatomy, style, and color. A great example of how a set of established rules can help make visuals more meaningful.

Motion In Design Systems

Motion in design is powerful. It can help to reduce cognitive load, guide users through pages and actions, provide user feedback, improve the discoverability of features, and improve perceived response time. To make full use of motion, the design team at Salesforce created an end-to-end motion language for their products: the Salesforce Kinetics System.

As Pavithra Ramamurthy, Senior Product Designer at Salesforce, explains, the intention behind the Salesforce Kinetics System is to enable the evolution and scaling of kinetic patterns across products, with design system components that are pre-baked with motion right out-of-the-box.

But how do you scale these motion patterns from design system to product? How would teams actually use the artifacts in their daily workflows? Pavithra wrote a case study that takes a closer look to demonstrate the possibilities. Interesting insights guaranteed.

Enterprise Design System 101

Introducing an enterprise design system is a lot of work. But it is work that will pay off. Especially with large teams, multiple platforms, and numerous user interfaces to manage, having a single source of truth helps maintain a consistent user experience. So what do you need to consider when building your own? Adam Fard takes a closer look.

As Adam explains, an enterprise design system is a system of best practices, reusable design elements, processes, usage guidelines, and patterns that help reinforce the brand, improve the UX design process, and optimize the user experience. He compares it to a box of Lego: the building blocks are the collection of code and design components, the building instructions that you’ll usually find inside the box correspond to a collection of guidelines, processes, and best practices that ensure that co-designing and cross-collaboration are seamless. If your enterprise traverses numerous sites or apps, Adam’s writeup is a great opportunity to get familiar with the concept of enterprise design systems.

Measuring A Design System

When you’ve built a design system or are just about to start working on one, metrics might not be the thing you’re concerned about at first sight. However, measuring your design system is more important than you might think. In his article “How to measure your design system?”, Jules Mahe dives deeper into why it’s worth the effort.

Jules explains how to define the KPIs for your design system and how to get quantitative data measurements to learn more about a design system’s efficiency. Qualitative data conducted with the help of surveys and interviews make the narrative more compelling. Of course, Jules also takes a closer look at how to use the data. As he concludes, measuring a design system is challenging and requires time, but it will be a goldmine and one of the essential levers for your design system’s growth and sustainability.

Design System ROI Calculator

Your boss is hesitant that the work you’ll put into a design system will eventually pay off? The Design System ROI Calculator might be just what you need to convince them that the time and money invested in a design system is a good investment.

The ROI calculator helps you understand and project cost savings when implementing a design system. It calculates total employee savings from implementing a design system, as well as time saving and efficiency gain by component or UI element. To estimate total savings, you can select between different scenarios based on team size and product calculation.

Design System Case Studies

Having robust components and patterns that can be reused in different situations is the essential idea behind every design system and often seems like the magical wand everyone has waited for to solve challenges and improve collaboration. Henry Escoto, UX & Design at FOX Corporation, offers a perspective on design systems that is a bit different. He claims that it’s actually the practice which can truly make a difference.

In his case study “Our Design System Journeys”, Henry shares in-depth insights into FOX Tech Design’s design systems Delta and Arches to find answers to the following questions: How will a design system truly help your product design? What does it take to build and execute a design system within an organization? How to inject the practice into existing workflows? And last but not least, what is the pay off of such an investment?

Another interesting case study comes from Jan Klever. Jan is a designer at Quero Educação and also fills the role of the organization’s Design System Ops. He shares from his team’s experience how having a dedicated Design System Ops role can help when it comes to maintenance and following up on the product.

Design System In 90 Days

When you’re starting to work on a design system, you do it with the intent to build something that lasts, a system that teams love to use and that saves them precious time in their daily work. However, many attempts to build a design system end up in great libraries that don’t get used as much as you had hoped. But how do you create a design system that becomes an established part of your organization’s workflow? SuperFriendly published a practical workbook in which they take you and your team from zero to a design system that lasts — in 90 days.

Written for cross-disciplinary teams of design, engineering, and product, the workbook consists of a 130-page PDF and FigJam prompts and Figma templates you’ll use to complete activities. No theory, only clear instructions on what to do and how to do it over a 90-day timeframe. At $349, the workbook isn’t cheap, but considering that it can save you about 6–9 months of figuring out what work to do, the investment is definitely worth considering.

Wrapping Up

Have you come across a design system you found helpful? Or a resource or case study that eased your work and that you’d like to share with others? We’d love to hear about it in the comments below.

(vf, il)

Given just how complex the web has become, it’s easy to overlook some fine little details just before the big release. And sometimes it’s difficult to pick out just the right technique or strategy to address a particular problem. That’s where design checklists can help — and there a few new ones that you might find helpful, too.

Checklist Design

Checklist Design is an ever-growing collection of best design practices, all gathered in one single place. You’ll find pretty much everything from checklists for standalone pages to elements and flows, as well as topics and branding. A neat little resource created by George Hatzis.

Design System Checklist

Design System Checklist is an open-source checklist to planning, building and growing a design system. It includes the foundation of things to keep in mind for design language, design tokens, core components, tooling and project management. Beautifully created and maintaned by fine folks from reshaped. Also, you might want to check Design Systems Handbook as well and you can download the Design System Checklist in Figma.

Accessibility Not-Checklist

Accessibility Not-Checklist is a thorough guide through accessibility, with points grouped by topics and success criteria, with filters for WCAG 2.0 and WCAG 2.1 and best practice recommendations. You can sort the checklist by topic and by role. A fantastic tool by fine folks at intopia.

A11y Project Checklist

A11y Project Checklist is a yet another very thorough checklist for accessibility that goes into all the fine detail from forms and controls to video, audio and animation. It also links to specific parts of WCAG in every individual section with further examples and guidelines. Neat!

Design System Checklist Trello Template

You and your team are working on a design system? The Design System Checklist template for Trello is a great example of how to structure your work and keep everyone involved on the same page. Even if you’re not a Trello user, the template provides some valuable ideas for creating your own checklist of things to take care of when working on a mammoth project like this.

Gov.UK Design System Components (Figma)

The lovely team behind Gov.UK has released a full collection of styles and components designed for UK Government services. During the design process, the team has tested and validated the design of the components, and we can use them to explore the states or conditions that we perhaps haven’t considered in our design just yet.

You can also check the GOV.UK Prototype Kit if you want to install all components locally, and GOV.UK Design System to explore how to use the styles and components in prototyping.

Complex Tables UX Tree

In his article on Architecting a complex table, Slava Shestopalov explores how to design and architect advanced tables — with a very comprehensive table tree checklist of all those fine details that are often forgotten or overlooked.

UX Project Tools Checklist

UX Recipe is a helpful little tool to discover and choose some of the UX project tools and techniques for your project. It also allows you to estimate the amount of time require for the work done. All tools are broken down into groups, and if you click on the hashtags, you’ll find plenty of useful resources for each category. Created and maintained by Alecsandru Grigoriu.

UX Research Methods Flowchart

How do you choose what UX research methods works best for you? There are at least 20 popular methods, and a handy UX Research Methods Flowchart by Norman-Nielsen Group helps you find the right one.

It provides an overview of common strategies, grouped into behavioral, attitudinal, qualitative and quantitative methods. Once you know what insights you are after, you can pick your strategy using the chart.

Form Design UX Checklist

With web form design, it can be quite difficult to figure out just the right component to use when asking a particular question. The team behind Lyft has created a flow chart to make it easier for designers (and not designers alike) to make decisions for their forms.

In an article about form selection patterns, Runi Goswami describes the struggles the team went through when designing a segmented control, and how they ended up with a form selection control flow chart as a result.

Decision Trees For Design System Components

Design systems often come in various flavors. Surely there will be basic components, color, typography and spacing, but often also more sophisticated components, usage guidelines, accessibility considerations and live previews. Additionally, Workday Canvas Design System includes flow charts for deciding what components to use, with examples of the outcome that designers and non-designers can follow to make their decisions.

Interaction Design Checklist

The IxD Checklist that Aaron Legaspi and Amit Jakhu created helps us form a better understanding of interaction. Whenever you’re building some kind of interaction — be it a control, navigation, or an entire interface — you can use the checklist to evaluate your design against affordance, simplicity, structure, consistency, accessibility, tolerance, and feedback to ensure it is easy to use for everyone.

Bonus: Text-To-Timeline Tool

Markwhen: Text-to-Timeline is an incredible little tool to generate timelines, e.g. for project planning or life timeline! You write markdown-ish text and it gets converted into a nice looking cascading timeline. Also available as a VS Code Extension.

And That’s A Wrap!

If you are looking for more gems like this one, we’ve published a few UX guides with checklists over the last few years, so feel free to continue exploring there. Happy checklisting, everyone!

(il)

SVGs have become more and more popular in the past few years. For good reasons. They are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think. We came across some magical SVG techniques recently that we’d love to share with you. From SVG grids and fractional SVG stars to SVG masks, fancy grainy SVG gradients, and handy SVG tools. We hope you’ll find something useful in here.

By the way, a while ago, we also looked at SVG Generators — for everything from shapes and backgrounds to SVG path visualizers, cropping tools, and SVG → JSX generators. If you’re tinkering with SVG, these might come in handy, too.

Generative SVG Grids

Generative art is a wonderful opportunity for everyone who would love to create art but feels more at home in code. Let’s say you want to create geometric patterns, for example. Generative art will take away the difficult decisions from you: What shapes do I use? Where do I put them? And what colors should I use? If you want to give it a try, Alex Trost wrote a tutorial on creating generative art with SVG grids that is bound to tickle your creativity — and teach you more about SVG.

The generative art that Alex creates is a grid of blocks with a random number of rows and columns. Each block has a randomly chosen design and colors from a shared color palette. Alex takes you step by step through the process of coding this piece: from setting up the grid and creating isolated functions to draw SVGs to working with color palettes, adding animations, and more. A fun little project — not only if you’re new to generative art and creative coding.

Generative Landscape Rolls

An awe-inspiring project that bridges the gap between a century-old tradition and state-of-the-art coding is {Shan, Shui}. Created by Lingdong Huan and inspired by traditional Chinese landscape rolls, it creates procedurally generated, infinitely-scrolling Chinese landscapes in SVG format. The mountains and trees in the landscape are modeled from scratch using noise and mathematical functions. Fascinating!

Now, if you’re asking yourself how something as complex might work, you’re not alone. Victor Shepelev wanted to get behind the secret of {Shan, Shui}* and made it his advent project to understand how it works. And, indeed, it took him 24 days to fully dig into the code. He summarized his findings in a series of articles.

SVG Paths With Masks

SVGs have a lot of benefits compared to raster images. They are small in size, scalable, animatable, they can be edited with code, and a lot more. You can’t get the textured feel that raster graphics can provide, though. However, we can combine the strengths of vector and raster to create some charming effects. Like Tom Miller did in his Silkscreen Squiggles demo.

Silkscreen Squiggles is an animation where squiggles fill a rectangular canvas. What makes the squiggles special is that they appear to have a paintbrush texture. The secret: a mask with an alpha layer that gives the simple squiggly paths their texture. Alex Trost dissects how it works. Inspiring!

Grainy Gradients

Noise is a simple technique to add texture to an image and make otherwise solid colors or smooth gradients more realistic. But despite designer’s affinity for texture, noise is rarely used in web design. Jimmy Chion explores how we can add texture to a gradient with only a small amount of CSS and SVG.

The trick is to use an SVG filter to create the noise, then apply that noise as a background. Layer it underneath your gradient, boost the brightness and contrast, and that’s already it. Potential use cases could be light and shadows or holographic foil effects, for example. The core of this technique is supported by all modern browsers. A clever visual effect to add depth and texture to a design.

Adding Texture And Depth

“Analog” materials like paint and paper naturally add depth to an artwork, but when working digitally, we often sacrifice the organic depth they provide for precision and speed. Let’s bring some texture back into our work! George Francis shares three ways to do so.

The techniques that George explores are quite simple but effective. Tiny random shapes added to a canvas at random points, solid shape fills with lines, and non-overlapping circles distributed evenly but randomly with an algorithm. Inspiring ideas to tinker with.

Cut-Out Effects With CSS And SVG

In a recent front-end project that Ahmad Shadeed was working on, one of the components included a cut-out effect where an area is cut out of a shape. And because there are multiple ways to create such an effect in CSS or SVG, he decided to explore the pros and cons that each of the solutions brings along.

In his blog post “Thinking About The Cut-Out Effect”, Ahmad takes a look at three different use cases for a cutout effect: an avatar with a cut-out status badge that indicates that a user is currently online, a “seen avatar” that consists of overlapping circle avatars that are indicators that a message has been seen in a group chat, as well as a website header with a cut-out area behind a circular logo. Ahmad presents different solutions for each use case — SVG-only, CSS-only, and a mix of both — and explains the pros and cons of each one of them. A comprehensive overview.

Fractional SVG Stars

Are you building a rating component and you want it to support fractional values like 4.2 or 3.7 stars but without using images? Good news, you can achieve fractional ratings with only CSS and inline SVG. Samuel Kraft explains how it works.

The component basically consists of two parts: a list of star icons based on the max rating and an “overlay” div that will be responsible for changing the colors of the stars underneath. This is the magic that makes the fractional part work. The technique is supported in all modern browsers; for older browsers, you can fall back to opacity instead. Clever!

Generative Mountain Ridge Dividers

When Alistair Shepherd built his personal website, he wanted to have section dividers that match the mountain theme of the site. But not any mountain dividers, but dividers with unique ridges for every divider.

Instead of creating a variety of different dividers manually, Alistair decided to use a combination of SVG and terrain generation, a technique that is usually used in game development, to generate the dividers automatically. In a blog post, he explains how it works.

If you’re up for some more horizontal divider inspiration, also be sure to check out Sara Soueidan’s blog post “Not Your Typical Horizontal Rules” in which she shows how she turned a boring horizontal line into a cute “birds on a wire” divider with the help of some CSS and SVG.

Flexible Repeating SVG Masks

Sometimes it’s a small idea, a little detail in a project that you tinker with and that you can’t let go off until you come up with a tailor-made solution to make it happen. Nothing that seems like a big deal at first glance, but that requires you to think outside the box. In Tyler Gaw’s case, this little detail was a flexible header with a little squiggle at the bottom instead of a straight line. The twist: to make the component future-proof, Tyler wanted to use a seamless, horizontal repeating pattern that he could color with CSS.

To get the job done, Tyler settled on flexible repeating SVG masks. SVG provides the shape, CSS handles the color, and mask-image does the heavy lifting by hiding anything in the underlying div that doesn’t intersect with the shape. A clever approach that can be used as the base for some fun experiments.

Swipey Image Grids

When you think of “SVG animation”, what comes to your mind? Illustrative animation? Well, SVG can be useful for much more than pretty graphics. As Cassie Evans points out, a whole new world of UI styling opens up once you stop looking at SVG purely as a format for illustrations and icons. One of her favorite use cases for SVG: responsive animated image grids.

Cassie doesn’t build her image grid on CSS Grid but uses SVG’s internal coordinate system (which is responsive by design) to design the grid layout. She then adds images to the grid and positions them with preserveAspectRatio. clipPath “swipes” the images in. The final animation relies on GreenSock to ensure that the transforms work consistently across browsers. If you want to dig deeper into the code, be sure to check out Cassie’s blog post in which she explains each step in detail.

Animated SVG Debit Card Illustrations

What if you could animate a debit card design? Probably not on an actual physical card, but rather for a landing page where you’d like to drive interest towards the card’s design or features? Well that’s an unusual challenge to tackle, and Tom Miller decided to take it on.

In a series of SVG debit card animations, Tom uses GreenSock to animate SVG paths and shapes smoothly, so every card literally comes to life on its own, transforming, rotating, and scaling beautifully, alongside just a few lines of JavaScript. A wonderful inspiration for your next landing page design!

Raster Image To SVG Converter

You need to quickly convert a raster image into an SVG? Then SVGcode is for you. The progressive web app converts image formats like JPG, PNG, GIF, WebP, and AVIF to vector graphics in SVG format.

To convert an image, drop your raster image into the SVGcode app, and the app will trace the image, color by color, until a vectorized version of the input appears. You can choose between color SVG and monochrome SVG and there also are a number of customization settings to improve the output further, by suppressing speckles and adjusting the color, for example. If you install the PWA, you can even use it as a default file handler on your machine. A real timesaver.

Download SVGs From Any Site

A handy little tool to enhance your SVG workflow is SVG Gobbler. The browser extension finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.

When you click the browser extension, it shows you all SVGs detected on the site. You can quickly download the ones you like or copy them to your clipboard. When you view the code, you can toggle optimization options from SVGO — to beautify the markup or clean up attributes or numeric values, for example. And if you need a PNG version of an SVG, you can export it in any size you want. A fantastic addition to any developer’s toolkit.

Scaling SVGs Made Simple

Scaling svg elements can be a daunting task, since they act very differently than normal images. Amelia Wattenberger came up with an ingenious comparison to help us make sense of SVGs and their special features: “The svg element is a telescope into another world.”

Based on the idea of the telescope, Amelia explains how to use the viewBox property to zoom in or out with your “telescope”, and, thus, change the size of your <svg>. A small tip that works wonders.

Wrapping Up

We hope that these techniques will tickle your curiosity and inspire you to try some SVG magic yourself. If you came across an interesting SVG technique that left you in awe, please don’t hesitate to share it in the comments below. We’d love to hear about it. Happy creating!

More On SVG

• SVG Generators
• A Practical Guide To SVG And Design Tools
• SVG Circle Decomposition To Paths
• Accessible SVGs: Perfect Patterns For Screen Reader Users
• Also, subscribe to our newsletter to not miss the next ones.

Further Reading

• Mastering SVG Arcs
• Sustainable Design Toolkits And Frameworks
• UX Checklists For Interface Designers
• Putting Gears In Motion: Animating Cars With HTML And SVG

(mrn)

Sometimes it’s the little productivity hacks that turn out to be the most precious. A shortcut or tool that saves only a few seconds of your time but that makes you wonder how you could have gotten along without it.

In this post, we compiled productivity tips and tools to help you in your day-to-day work. You’ll find shortcuts to speed up routine tasks, tools and cheatsheets to enhance your development workflow, as well as ideas and little helpers to stay organized and improve communication with your team. Only things we found useful and that we hope will make your workflow more efficient, too.

By the way, if you’re up for some more timesavers, we also published posts with useful front-end boilerplates and starter kits, VS Code extensions, and Figma plugins. Enjoy!

Table of Contents

Below you’ll find an alphabetical list of things covered in this post. But you can just scroll down to explore them one by one, too, of course.

• app productivity
• browser tabs
• code completion
• code reviews
• command bar interface
• command line
• debugging
• email
• design feedback
• development setup
• form fillers
• front-end cheatsheets
• front-end tools
• git commands
• gitignore
• HTML tags
• JavaScript operators
• licenses
• log messages
• meetings
• page speed monitoring
• product copy
• regex
• scheduling
• screen recorder
• screenshots
• source code
• terminal autocomplete
• unicode characters

Shortcuts

A Command Bar Interface To Speed Things Up

Opening a new GitHub issue, searching Slack messages, showing your calendar schedule and jumping on a Zoom call — the Slapdash command bar makes daily tasks like these a lot quicker. It works similarly to Spotlight on Mac, except it also supports your cloud apps.

To open Slapdash, just type Command + J on Mac or Ctrl + J on Windows and Linux, and start typing. The partial name of the Notion document you want to open, for example, or type in “create” to open a new GitHub issue directly from inside the command bar. You can also build custom commands that you and your team might need to speed up common worflows — for customer lookup, entering something into a database, or searching company records, for example.

Next-Level Browser Tabs

When you browse the web, do you prefer to open links in a new tab? If so, you might already have heard of the keyboard shortcut Cmd/Ctrl + Click to open a new tab. However, you still need to navigate to the tab. That’s where the good old Shift key comes in: Just hit Cmd/Ctrl + Shift + Click, and the browser automatically puts focus on the new tab! Thanks to Stefan Judis for sharing!

Too many open tabs? OneTab helps reduce tab clutter. The browser extension (available for Chrome and Firefox) converts all your open tabs into a list. When you need to access them again, you can either restore them individually or all at once. In case you want to share your tabs with others or keep them for future reference, OneTab also comes with a feature that lets you upload the list into a web page. Less clutter, less CPU load.

MacOS Screen Capture Tips

If you’re on a Mac and are frequently taking screenshots, Corey Ginnivan has 14 useful tips for you that take your screen capturing workflow to the next level. After all, the macOS screen capture feature is much more powerful than you might have thought.

Corey posted 14 tweets, each with a shortcut, tip, or trick. He starts off with the classic of capturing the entire screen and moves on to some more advanced features. Did you know, for example, that Cmd + Ctrl + Shift + 4 captures a selection to your clipboard so that you can paste the image right where you need it, to a design tool, for example? Or that you can remove that annoying floating thumbnail that appears on your screen every time you’ve taken a screenshot? To do so, hit Cmd + Shift + 5 and deselect “Show Floating Thumbnail” in “Options”. Gold!

App Productivity Hacks

How often do you find yourself lost between menus and features of your text editing applications? For VS Code and DevTools, we’ve learned to love Cmd/Ctrl + Shift + P, a keyboard shortcut that prompts a command palette with a smart autocomplete and search. If you are editing text in Google Docs or Dropbox Paper, and find yourself lost within all the features and settings, there is a shortcut to save you plenty of hassle as well.

For Google Docs or Sheets, Option/Alt + / brings up search where you can start typing features, fonts or any other fine controls. And in Dropbox Paper, the shortcut / opens a search area to look for your documents. In general, take a look at all the keyboard shortcuts for your favorite tool — chances are high that a handy keyboard shortcut is waiting for you there as well.

For more handy shortcuts like these be sure to also check out productivity.so. Curated by Lukas Klinser and Dennis Müller, the library collects productivity hacks that help you uncover the hidden 1% in your favorite tools. Each tip comes with a short explanation, sometimes even with a video of how it works and which apps on which platforms support it. Productivity superpowers for every day.

Development Workflow

Setting Up A Development Workflow On Mac

Setting up a development environment on a new computer can be confusing, not only if you’re new to programming. Together with contributors from the web community, Sourabh Bajaj published a comprehensive guide that helps you get the job done with ease.

The guide is a reference for everyone who wants to set up an environment or install new languages or libraries on a Mac. From Homebrew to Node, Python, C++, Ruby, and a lot more, it takes you step by step through everything you need to know to get things up and running. Contributions to the guide are welcome.

AI-Powered Code Completion For Mac

Have you ever wished you could code without having to worry about memorizing function calls and other basic syntax? Well, good news, Kite makes it possible. The tool uses the latest developments in machine learning to offload repetitive parts of programming and support you with fast, context-aware completions of your code.

Available for free for Mac, Kite works with 16 code editors and 16 languages to help you code faster and stay in the flow. In fact, it’s possible to cut keystrokes by as much as 47%. Kite also includes documentation lookup for Python that lets you view Python docs with just one click or mouse-hover.

View Source Code On Mobile

The keyboard shortcut to view the source code of a page is every developer’s best friend, right? Well, at least on desktop devices. Viewing the source on mobile usually involves quite some fiddling around. If you’ve been looking for a simple solution for when you’re on the go, Adam Newbold’s site View Source is for you.

To view a page’s source code, paste the URL into the search bar of View Source, and it’ll fetch and display the source code for you — with syntax highlighting and numbered lines. You can even define if you want to wrap lines or tidy the markup for a better overview. One for the bookmarks.

Debugging Tools And Strategies

How do you debug code? Often it’s quite difficult to isolate a problem although it’s staring right at you. Adrian Bece has written a detailed guide to debugging CSS/JS, and Sarah Drasner has featured some debugging tips and tricks that you might find useful.

For mobile, we can use Eruda, a console for mobile browsers that logs and exposes error messages and allows you to navigate the DOM tree and shows performance metrics. For React, we can measure and profile React performance, and when using DevTools, we can use a detailed dive-into profiling with DevTools. This should cover quite a few debugging issues for sure.

Page Speed Monitoring Made Easy

Are you looking for a web performance tool that provides you with all the necessary metrics in a developer-friendly way? Well, then Treo is worth taking a closer look at. Powered by Lighhouse, Treo lets you monitor your page speed with carefully crafted data visualizations that make it easy to make sense of the results.

Treo audits your pages in a stable, isolated environment, and while traditional web performance metrics are often technical and don’t reflect your customer’s journey, Treo puts special focus on user experience metrics. To represent your customers, you can also configure CPU power and network and choose between nine locations worldwide to avoid network latency and geo barriers. If you’re curious to see what this looks like in practice, be sure to check out the live demos.

Single-Purpose Online Tools

Often it’s the little tools and helpers that become indispensable in our workflows, whether it’s color contrast checkers, file converters, text comparers, image optimizers, or hash generators. If you are looking to enhance your web dev toolkit, Tiny Helpers is bound to have the tool you need. The site collects free single-purpose online tools that help you with anything from accessibility to APIs, performance, regular expressions, and security. Ffffuel, SVG generators and CSS generators are other collections of helpful tools.

If you’re a Windows user, DevToys is a swiss army knife of 21+ tools to master your daily tasks. The app works offline and includes a Json to Yaml and Yaml to Json converter, a hash generator, JWT decoder, Regex tester, URL encoder, and much more. And to give your workflow an extra productivity boost, DevToys automatically detects the best tool that fits your clipboard content.

Testing Forms With Dummy Data

Testing forms can be a time-consuming process, but, luckily, it’s a task that can easily be automated. The browser extension Fake Filler, for example, was built to do just that.

Available for Chrome and Firefox, Fake Filler helps you test your forms quickly and efficiently by filling all form inputs with dummy data and randomly selecting radio buttons, dropdown menus, and checkboxes. The tool supports the maxlength property and ignores CAPTCHA, hidden, disabled, and readonly fields. A great little addition to any developer’s digital toolkit.

Maintaining Product Copy

How do you and your team handle and maintain product copy? Do you have a strategy to keep everything in one place so that everyone involved always has the newest copy at hand? Or is your product copy scattered across documents, mockups, and tickets? In this case, Ditto could be worth taking a closer look at.

Ditto provides a single place to manage product copy in all of its stages. You can create a reusable text component library, manage text in mockups, track all copy changes, and review and discuss edits. Two-way Figma sync makes sure that the right copy is always in your mockups, while Ditto’s API, CLI, and SDKs allow developers to fetch up-to-date copy and integrate it into their build processes. No more back-and-forth, no more copy-and-paste.

Encoding Code Reviews

Code reviews can bring along communication issues if a team doesn’t have established standards. To solve this, Netlify’s UX team developed a shared terminology that adds nuance to the feedback and helps everyone involved to better understand where the feedback fits into the larger picture.

The Feedback Ladder, as Netlify’s approach is called, is based on the idea of living in a house that is still being built: There are different kinds of inconveniences (mountain, boulder, pebble, sand, and dust) and each one has a different level of impact on your day-to-day life in the house. Dust, for example, does not impede life in the house, while a boulder blocking the door needs to be taken care of to not block the work from moving forward. The metaphors are easy to remember and can be used to concisely encode the severity of feedback. Clever!

Organization & Communication

Reviewing Websites Live

We all know the drill: You are working on a project and want to gather feedback from teammates, clients, stakeholders. What follows is a back-and-forth of countless emails, Slack messages, calls, and maybe even Google spreadsheets to gather opinions from everyone involved. To make collecting feedback more efficient, Pastel offers a visual approach to reviewing and commenting on a website live.

All you need to do is share the unique Pastel link with your clients and teammates, and within seconds, they can click to leave comments with their thoughts and suggestions — without having to create an account. Pastel collects the comments for you, along with information on browser and screen size details. And if you’re making changes to the site in the meantime, no worries, they will be automatically updated in every Pastel link, too.

Open-Source Screen Recorder

If you’ve been looking for a free and easy-to-use tool to record your screen, it might be hard to find something more powerful than Alyssa X’s open-source screen recorder Screenity.

No matter if you want to give contextual feedback on a project, provide detailed explanations, or showcase your product to potential customers, Screenity offers a number of practical features to capture, annotate, and edit your recordings — without any time limit. You can draw on the screen and add text and arrows, for example, highlight clicks and focus on the mouse, push to talk, and much more. Screenity is available for Chrome.

Fuss-Free Scheduling

Despite the most straightforward tools, sometimes it takes a meeting to clarify things with team members or clients. And, well, we all know how difficult it can be to find a date and time that works for everyone involved. If you want to skip the hassle of back-and-forth emails, Calendly has got your back.

To schedule a meeting, let Calendly know your availability preferences and send guests your Calendly link. They can pick the time they prefer and the event is added to your calendar — without any calendar conflicts. Reminders go out automatically, and in case the meeting needs to be rescheduled, Calendly takes care of that, too.

Doodle uses a similar approach to help you quickly discover who’s available when, no matter the calendar system they are using or the timezone they are in. A great little detail if you need to wrangle a group of busy people: In Doodle, participants can select “if need to be” dates, i.e. dates they can make work if necessary.

Making Time For What Really Matters

Some workdays are quite fragmented: First the daily standup with your teammates, then a call here, a meeting there, and the work that would require actual focus time is jammed somewhere in between the scheduled appointments. Clockwise is here to change that. The smart calendar assistant is available as a Chrome extension and frees up blocks of uninterrupted time to help you focus on what matters.

To make the most out of your workday, Clockwise learns your meeting behavior and identifies how your schedule could be improved — based on your preferences, of course. It automatically moves meetings to optimize your calendar, resolves meeting conflicts, and even syncs with your personal calendar to ensure that you don’t miss important personal commitments. To maximize your team’s productivity, Clockwise can even coordinate meetings across schedules and move them to the least disruptive time.

Document-Based Meetings

In many companies, meetings don’t enjoy a good reputation. Very often they are running late, the discussed agenda round-mails haven’t been read in time, and, well, there really are just too many of them. So how do we organize meetings in a way that they are productive while making sure that everyone is aligned?

While a common outcome of a meeting is a document with a summary, at Amazon, meetings don’t happen without a document prepared ahead of time. In “The Document Culture at Amazon”, Justin Garrison highlights the process from start to finish. The meeting starts with a silent reading of a well-prepared meeting document, with everyone taking notes and adding questions silently.

Reading the document is a part of the scheduled meeting time: nobody is expected to find their own time to read ahead of time, and the document is fresh in everyone’s mind. The document could be a one-pager or six-pager or PRFAQs for products that don’t exist yet. To eliminate distractions, all notes at Amazon are added on paper on printouts, and then discussed, but it could be digital with notifications and applications turned off. An interesting way to challenge the way we usually run those lengthy meetings, and make sure everyone is on the same page.

Making Email Better

Overflowing inboxes, spam with backlink requests, people emailing you on a Friday afternoon and following up on Monday morning — there are a lot of things that make dealing with email unpleasant. However, since there is no getting around email, there’s only one solution: Let’s improve the situation together. With that in mind, Chris Coyier started “Email is Good”, a site about email productivity.

“Email is Good” takes a look at things that make emails annoying, tips and ideas on how we can do better, as well as little anecdotes that everyone can relate to. A great opportunity to reflect on how each one of us deals with email and the reactions that our email habits might provoke on the recipient’s side.

Git

Finding Git Commands Made Easy

Do you know the git command to commit all staged changes? Or the one to compare two commits and output the result to a file? And what about the command that lets you clone an existing repo along with submodules into the current directory? No worries if you don’t know the answers right off the bat, Git Command Explorer is here to step in.

Designed to help you find the git commands you need without spending a lot of time digging through the web, Git Command Explorer uses a simple dropdown system that makes your search for the right command more efficient. Just select what you want to do from the dropdowns, and the tool provides you with the code snippet which you can copy and paste right away.

If you prefer a good ol’ cheatsheet, Git log features common ways to use the Git log to track what changed or search for commits. Git Branch cheatsheet shows how to list branches, create new ones, rename and switch branches, as well as delete them.

Need something slightly more advanced? Atlassian’s Git cheatsheet goes into more detail around Git basics, undoing changes, rewriting Git history, Git branches and remote repositories, and GitHub Cheat Sheet shows how to inspect and compare, track path changes, share and update, ignore patterns, and add temporary commits.

A Terminal UI For Git Commands

Git is super powerful, but often it seems that a lot of rather simple tasks can be unnecessarily hard to do. Interactive rebasing that requires you to edit a TODO file in your editor, for example. Or using a command line program to stage a part of a file. Frustrated by things like these, Jesse Duffield built lazygit.

lazygit is a simple terminal UI for Git commands that makes completing tasks a lot faster and more straightforward — no matter if it’s staging lines, amending old commits, stashing selected files, fixing merge conflicts, or checking out of a branch without stashing changes.

Creating .gitignore Files With Ease

A .gitignore file in your repository’s root directory tells Git which files and directories to ignore when you make a commit. If you’re looking for an easy way to create such a file, gitignore.io has got you covered.

The site features both a graphical and a command line method of creating a .gitignore for your operating system, programming language, or IDE. Let’s say you’re on a Mac and want to ignore Node files in your Node.js application, for example. Just enter “Node” and “macOS” inside the search bar, and the site will create a template file that ignores macOS and Node files. Alternatively, you can copy the shell command to create an alias for your terminal and create the file right there.

Automating Log Messages

When it comes to log messages, the turbo-console-log extension has got your back. It automates the operation of writing meaningful log messages and inserts them automatically.

All you need to do is select the variable which you want to debug, press Ctrl + Alt + L, and the log message will be inserted in the next line. Keyboard shortcuts let you comment, uncomment, or delete all log messages from the current document.

From GitHub To VS Code, In One Second

Once you’ve discovered a code snippet on GitHub, what if you want to start working with it in your project immediately? Instead of cloning the repo and finding that file that you need, you can use Github1s. Just add 1s after github in the URL, press Enter, and the repo, or a single file, will open straight in VS Code.

You can also use a bookmarklet to quickly switch between github.com and github1s.com, access private repositories, and there are plenty of browser extensions that are listed on the project page as well. If you need an alternative, Gitpod is a slightly more advanced option, which also allows you to start an online development environment, run parallel workspaces, and work on the codebase collaboratively.

Terminal

Autocomplete For The Terminal

How often do you have to find just the right directory with ls in your Terminal? How often do you forget just the right flag for a git operation? Or perhaps you get lost in the scripts/ folder a bit more often than you’d like to?

Fig brings VS Code-style autocomplete to your existing Terminal, along with hints and suggestions for your commands. The best part is that everyone can add support to their own favorite CLI tool, and you can specify just the completion spec you need for your work.

There is also oh my zsh (Linux, Windows, Mac), with plenty of helpers, plugins, and themes to improve your CLI experience. Also, take a look at some useful plugins and improved setup, ranging from better syntax highlighting to listing contents of directories in tree-like format.

Get Stuff Done With The Command Line

For some, the command line is a coder’s best friend, to others it might feel more like a daunting enemy. Fact is, there are a lot of awesome things you can do with terminal. Marcel Bischoff curates a list that is jam-packed with useful command line apps.

The list covers everything from automation and backup to encryption, productivity, version control, and much more that is bound to make a developer’s life easier. Even games are featured to sweeten up a long coding session. Your favorite command line app isn’t part of the list yet? You are highly encouraged to contribute to it, of course.

Command Line Love

It’s not uncommon for technical documentation to be dry and intimidating, especially for people who are just getting started with a new tool. That can get quite frustrating especially when the manual is difficult to read or the explanations are verbose and lack examples. But there are manuals that do better.

Dash Dash takes the Unix (Linux, BSD, macOS) open-source manual pages and sets the content in a beautiful type and layout. It provides not only explanations of all commands, but also search, examples and TL;DR sections. Also, “The Art of Command Line” takes you on a journey to Command Line from basics to system debugging. And if you are up for advanced command line techniques, cmdchallenge prompts you to solve tasks with a single line of bash.

Coding Cheatsheets

Front-End Vocab And Cheatsheets

You might have been there before. Just when you are working on a tight deadline, you need to look up something quickly. Perhaps you’ve forgotten the right property for vertical alignment in Flexbox or perhaps you are missing just the right command for your Terminal.

SheCodes Coding Tools provides a searchable reference list for everything JavaScript, with variables, strings, structures and all kinds of attributes. Codecademy features a comprehensive overview of front-end cheatsheets, grouped, structured, and packed with ready-to-use examples.

For CSS, you will never go wrong with CSS Tricks Almanac.

JavaScript Operator Lookup

Let’s be honest, it can be hard to wrap one’s head around JavaScript operators, especially if you’re still new to the language and need to make sense of all those ampersands, dashes, equal signs, and other glyphs that cross your way in JavaScript code. Josh W. Comeau built a little tool that helps you make sense of them all — for good.

The Operator Lookup lets you enter a JavaScript operator or pick one of the 50 given operators to learn more about it. For every operator, Josh gives a brief explanation of what it does and shows how it is used in a code example. A friendly tool that makes operators feel a lot less daunting.

Learn Regex The Easy Way

Regular expressions are super powerful. Essentially a group of characters or symbols, they help us define patterns — to replace text within a string, validate forms, extract a substring from a string based on a pattern match, and much more.

If you haven’t gotten around to wrapping your head around Regex yet or are looking for a cheatsheet to help you define different kinds of patterns, Zeeshan Ahmad’s guide “Learn Regex The Easy Way” is for you. It covers everything from the very basics of how a regular expression works to more advanced tasks.

Finding The Right HTML Tag

Let’s say you want to collect data from the user, you have a list of options to choose from, more than seven even, and the user can select several of these options. Which HTML tag do you use? Benjamin Holfve’s tool What the tag?! helps you find the HTML tag that suits your goals, not only in this situation but whenever you’re unsure about what’s the best one to use.

To narrow down your search, the tool confronts you with several statements about what you want to achieve with the HTML tag you’re looking for. With each answer, the picture becomes clearer, so that you get a clear recommendation after just a few steps.

Find Unicode Characters By Drawing Them

You’ve forgotten the name of a specific Unicode character but you don’t have time to scroll through endless lists to find the glyph you’re looking for? Shapecatcher provides a clever solution to the problem: You draw the character with your mouse, and the tool finds the most similar unicode characters for you.

To retrieve the glyphs that come closest to your sketch, more than 10,000 of the most important characters are compared against your sketch and analyzed for similarities. Please note that Japanese, Korean, and Chinese characters are not supported yet.

Licenses Summarized At A Glance

Too long, didn’t read. That’s the reaction many of us have when it comes to licenses or terms of service. However, sometimes there’s no getting around them. TLDRLegal might help you in those cases.

The site summarizes popular open source and software licenses at a glance, giving short and concise information on what can be done, what cannot, and what’s necessary to keep in mind. The summaries are peer-reviewed, the most visible licenses even checked by a lawyer.

Wrapping Up

We hope you discovered some nuggets in this post that’ll come in handy in your day-to-day work. Maybe you have a favorite productivity hack or tool that we haven’t listed but that is too good not to be shared? Please don’t hesitate to let us know in the comments below. We’d love to hear about it!

Further Reading

• The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks
• How OWASP Helps You Secure Your Full-Stack Web Applications
• Sustainable Design Toolkits And Frameworks
• UX Checklists For Interface Designers

(vf, il, mrn)

Inspiration can come from unexpected places — the conversations we had, the dots we’ve connected in our minds and the little things we’ve spotted somewhere. And while we sometimes need a good idea for a specific problem, at other times there’s nothing more precious than taking a step back from the task we’re working on to let our minds wander freely.

In this post, we collected resources that help you do just that. You’ll find eye candy to indulge in, ideas to get you out of your comfort zone and challenge yourself, as well as tools and resources to help you out when you’re stuck on a project. Only things we found inspiring and useful and that may fuel your creativity, too. Enjoy!

A World Of Miniature Wonders

Have you ever thought that the broccoli that you’re preparing for dinner looks like a forest of trees? Or that the leaves floating on the surface of your local park’s duck pond resemble little boats? When you see things from a different perspective, an entirely new world starts to open up. A world of wonders.

Tatsuya Tanaka has a very special eye for the little wonders that lie right in front of us. Since 2011, he creates miniature diorama-style scenes from simple everyday things and tiny 3D-printed and hand-painted figures. In Tatsuya’s miniature universe, you’ll discover barbecue scenes where paper clips turn into picnic chairs and tables and metal staples into the barbecue grill, you’ll find an open package of potato chips forming a skatepark, an eyeshadow palette and a lipstick turning into a tiny office, or a burger into a merry-go-round. Imagination is the only limit. Tatsuya publishes a new miniature diorama every day on his Miniature Calendar. Now if that’s not the perfect way to start a new day thinking outside the box, what else is?

Flowers Of Fire

Spinning saxons, flying pigeons, polka batteries, Aztec Fountains, Bengal Lights — the variety of fireworks is as rich as the names that describe them. However, if you ever tried to take photos of a firework show, you know that it can be quite hard to capture this richness. That’s exactly what makes a nineteenth-century series of catalog advertisements for Japanese fireworks so fascinating: without any expectations of photorealism, the illustrations in the catalogs evoke a unique sense of wonder.

Digitized by the Yokohama City Library, the catalogs date back to the 1880s and show not only fireworks as we know them today but also so-called “daylight fireworks”. Daylight fireworks had their origins in Japan and didn’t use pyrotechnic effects but a projectile that contained a balloon in the shape of an animal, person, or other forms that opened up and inflated as it returned to the ground. Eye candy!

Cityscapes Based On Antique Books

Antiquarian books are known for having lengthy titles and rather unassuming title pages, despite the wealth of knowledge they treasure inside their covers. To illustrate the unique knowledge readers would find in them, Nicholas Rougeux started a very special project: Title Cities.

Title Cities reimagines the title pages of antique scientific books as colorful cityscapes, based solely on the words on the title page. Whether it’s Charles Darwin’s On the Origin of Species or Isaac Newton’s Opticks, for each book Nicholas drew boxes around the words on the title page and color-coded them by their first letter. Maintaining their original sizes relative to one another, he then arranged the boxes into abstract cityscapes. A beautiful example that inspiration can be found everywhere.

Mineralogy Illustrations Sorted By Color

Have you ever had an idea popping into your head that you couldn’t let go of? When Nicholas Rougeux came across the massive collection of mineral illustrations that British naturalist and illustrator James Sowerby created at the beginning of the 19th century, he wondered what they would look like arranged by color in a big collage. And, well, he spent the next four months doing exactly that: arranging all of Sowerby’s illustrations from the 718-plates-strong series British Mineralogy and Exotic Mineralogy.

The result is the stunning project British & Exotic Mineralogy. A fascinating artwork that creates a bridge between the meticulous work of two people living two centuries apart and the techniques they used — from the paintbox to modern web technologies. If you want to learn more about Nicholas’ approach and the challenges he faced along the way, there’s an accompanying blog post in which he shares a look behind the scenes.

A Curated Gallery Of Patterns

When bold colors meet subtle palettes, organic curves appear next to sharp-edged geometric forms, and minimalist designs face playful artworks, inspiration isn’t far. If you’re up for a surprise bag of eye candy, Pattern Collect is for you. The site curates beautifully illustrated patterns created by designers from across the globe.

You can browse the showcase by tag and if you like an artwork, a link takes you to the original on Dribbble or Behance where you can learn more about the illustrator and their work. Who knows, maybe this will even turn out to be the opportunity to find creative talent to work with on an upcoming project?

The Visual Glory Of Blank Tapes

Do you remember blank VHS tapes? Antony Terence dedicated an article to them in which he highlights why they remain a masterclass in visual design still today, with their “complicated relationship between typography and color” which “makes them all the more intriguing”, as he writes.

If you’re up for some more inspiration from the past, well, how about empty music tapes? The Japanese blog Tapefan is entirely dedicated to the beauty of the old Sonys, TDKs, Fujis, Maxells, and their fellows, that used to treasure people’s favorite music before modern technologies took their place. An inspiring trip back in time.

New Tab, New Artwork

Why not spice up one of the most mundane actions that we perform countless times each day and make it a bit, well, more exciting, inspiring even? We’re talking about opening new browser tabs. If you’re tired of seeing the same plain background every time you open a new tab, the Google Arts & Cultures extension for Chrome might be for you.

Each time you open a new tab (or at least once a day), the extension presents you with beautiful new artwork. The artworks range from Van Gogh and Monet all the way to contemporary works from street artists around the world. If one of the masterpieces sparks your curiosity, you can click the image description to discover more. A great way to breathe a little culture into your day.

Aerial Screensavers For Mac

Are you tired of the same old screensaver greeting you when you return to your desk after a coffee break? Aerial is here to change that. The open-source project lets you play videos from Apple’s tvOS screensaver on your Mac.

Among the screensavers, you’ll find high-quality aerial videos shot over various cities and locations like New York, San Francisco, and China, Earth videos from the ISS, underwater videos, as well as a selection of videos created especially for Aerial. All of them are shot in 4k, giving you the feeling that you really are experiencing the location as a bird hovering over the scene. Screensaver overlays show you descriptions of the main geographical features displayed in the videos and, if you want, they also give you information on time and weather and what’s currently playing on Apple Music or Spotify.

Generative Circle Art

Do you remember spirographs? The little plastic wheels and rings that let you draw all kinds of flower-y shapes? Nadieh Bremer’s generative art collection Rotae is the grown-up sibling of the good ol’ Spirograph fascination. “Rotae” means “wheels” in Latin and is an ode to the vast array of shapes that can appear from the seemingly simple process of letting circles rotate on circles.

The Rotae gallery consists of 529 outputs, all of them animated to reveal the intricacies of the underlying path. How does it work? Each of the Rotaes uses a hash as its seed, a pseudo-random-number-generator chooses the number of wheels and what m-fold symmetry to create. The wheels are then randomly given radii and frequencies that will create the aimed-for symmetry. In her summary of the project, Nadieh shares more insights into the tech behind the visual masterpieces as well as into how she animated them.

Generative Art Tips And Inspiration

An awe-inspiring project that bridges the gap between a century-old tradition and state-of-the-art coding is {Shan, Shui}. Created by Lingdong Huan and inspired by traditional Chinese landscape rolls, it creates procedurally generated, infinitely-scrolling Chinese landscapes in SVG format. The mountains and trees in the landscape are modeled from scratch using noise and mathematical functions. Fascinating!

Now, if you’re asking yourself how something as complex might work, you’re not alone. Victor Shepelev wanted to get behind the secret of {Shan, Shui}* and made it his advent project to understand how it works. And, indeed, it took him 24 days to fully dig into the code. He summarized his findings in a series of articles.

If you’re ready to get your hands dirty on a little generative art project, George Francis’ articles with tips and tricks for creating generative art are for you. For some more inspiration, also be sure to browse by Andrey Andronov’s site. It carries out some fantastic experiments with famous and new styles of art — from Mondrian and Bauhaus to Suprematism and geometric art.

Art With CSS

Have you ever tried to create a piece of CSS art from scratch? If not, Yosra Emad wrote an easy-to-follow tutorial that might inspire you to get started. In it, Yosra takes you step by step through the process of creating a friendly ghost only with CSS. She shows everything from splitting an initial sketch into layers and planning the markup to coding every single detail of the artwork. It’s not only a fun little coding challenge but also helps you take your CSS positioning skills to the next level.

If you’re looking for some inspiration for CSS art, Chuan Yuan’s Codepen account is a treasure chest full of stunning CSS background patterns as well as static and animated CSS artworks. Make sure you don’t miss the Codepen where Chuan recreated the famous graphics by Japanese designer Ikko Tanaka only with CSS.

Inspiring Houdini Paint Worklets

Houdini is a set of low-level browser APIs that give you direct access to the CSS Object Model and enable you to write code that the browser can parse as CSS. If you’re already a bit more familiar with the concept, you might have heard of Paint Worklets. They offer a way to draw images that dynamically respond to changes in the CSS.

To dive deeper into how worklets work, Houdini.how features some nice Paint Worklets to experiment with: sparkly backgrounds, confetti, powdered gradients, underlines, tooltips, and more. A tutorial helps you get everything up and running and a polyfill irons out missing support in Firefox and Safari.

A Twitter Bot That Creates Color Palettes

Color inspiration lies everywhere. Sometimes even in an image somebody included in a tweet. For those occasions, Color Parrot is your new best friend. Just mention the Twitter bot in a reply, and it will respond to you with a color palette for the image.

When asking Color Parrot for help, you can specify the number of colors you’d like to get from the bot. Just include the number in your tweet. “@color_parrot what are those colors? I need 6 of them.”, for example. The story behind the bot is an interesting one, too, by the way: David Aerne, its creator, is maintaining an open-source list of color names that is used by many apps and websites. To measure, what names are better than others, he collects the likes and reactions to each color. So by using the bot, you are actively contributing to the open-source project. Win-win.

Hand-Curated Mesh Gradients

Beautiful gradients? Yes, please! If you don’t have the time to create them yourself or are looking for some fresh inspiration, Gene Maryushenko’s hand-curated collection of mesh gradients is sure to have you covered.

Unhappy with what he found online, Gene created 100 gradients that will make your site stand out, without being loud. The gradients can be downloaded for free as JPEGs. CSS and SVG will be added later. Enjoy!

A Generator For Friendly Microcopy

Finding the right words can be a challenge. Speak Human might be the perfect place if you need some copywriting inspiration. For example, for confirmation messages, respectful interruptions, and gentle reminders.

To get inspired, just select a purpose from a dropdown, and the generator presents you with a piece of clever, human-centric microcopy — a friendly way to ask users for their email, for example, or a small piece of e-commerce copy that stands out from the crowd. Quick and easy.

Fonts In Use

Do you need to decide on a typeface for a project but are missing some inspiration? Or maybe you have a sweet spot for all things typography? Either way, Fonts In Use, might be just what you’ve been looking for.

Fonts In Use is an archive of typography indexed by typeface, format, industry, and period. From vintage invoices and newspaper adverts from the beginning of the 20th century to candy packaging and movie title sequences from today, the site is a treasure chest of typographic samples of all origins. A great way to discover new fonts.

Generative Doodle Patterns

What can you create out of basic geometric shapes? According to Sy Hong and Ye Joo Park, entire worlds! The designers got together to create Tabbied, a little tool that generates colorful geometric doodles from already pre-made presets. Just select one of the presets, customize the colors, and choose settings such as frequency of a pattern and the actual grid, and — ta-daa! — you can download the PNG with your doodle right away.

If you’re looking for something a bit more advanced, Repper and MagicPattern have got your back, too. And since there can’t be enough variety when it comes to patterns, you might also want to take a look at Patternify, a CSS pattern generator that allows you to define a pattern in a 10×10 grid, preview the outcome, and download PNG or CSS. For some more inspiration, Hero Patterns provides you with a collection of repeatable SVG background patterns and MagicPattern features pure CSS background patterns like zig-zag or diagonal ones.

Inspirational Websites Around The World

How often do you stumble upon Cyrillic websites? What about Japanese sites? Or sites from specific but obscure industries? When we want to explore unusual design patterns, it might be a good idea to look in unusual places. For example, Cyrillic.Design showcases Cyrillic websites that often don’t make their appearance in popular galleries. All entries can be filtered with tags and new websites are added regularly.

SiteInspire organizes websites by industry and category, allowing one to search for health-industry-related websites or architecture-related projects. Design Made in Germany showcases work done by German designers and Responsive-JP shines the spotlight on brilliant work by Japanese designers. Finally, you can find plenty of landing pages on Land-Book and One Page Love, while Personalsit.es collects small and lovely personal websites. Now, this should keep you busy for a while!

Mobile UI Inspiration

How did other designers solve a particular UI problem? Stéphanie Walter collected some handy resources that are bound to give you a little inspiration boost when designing for mobile.

In Stéphanie’s list, you’ll find more than 15 resources for mobile UI inspiration, neatly arranged into different categories: resources that are sorted by UI patterns, type of view, components, specific flows, as well as app category and mobile icon inspiration. And even though the content is already two years old, it’s still a treasure chest for everyone working on a mobile interface.

Podcasts To Subscribe To

What podcasts are you listening to? What inspires you, and what helps you discover things you’ve never known? These are the questions that we’ve asked on Twitter, with plenty of great suggestions coming from the community. Work-Life is a lovely podcast with advice on how to improve your work, while Darknet Diaries is a fascinating listen on hackers, breaches, cybercrime, and all the things that dwell on the hidden parts of the Internet.

You can always find a better outlook on things in A Bit Of Optimism and learn to improve your design workflow with the Design Better Podcast. There is plenty more about all sides of design in Design Matters and 99% Invisible. All great podcasts to keep in your library for a walk in the park, running, or just a bit of evening cooking. Ah, and, of course, there is our very own Smashing Podcast, too. Just sayin’!

Untangle Your Bookmark Mess

Do you have a dedicated system for storing all those useful tools and articles that might come in handy someday, the books you plan to read, the recipes you want to give a try, and all those other little bits of inspiration you come across when browsing the web? If your bookmarks are overflowing with precious goodies but you’ve lost track of them, a little tool is just waiting to help you untangle that bookmark mess: Raindrop.io.

Raindrop.io lets you sort your bookmarks into collections and assign tags to them that make it easier to quickly find what you’re looking for, and, if you want, you can even share these collections with team members and friends. The tool works seamlessly across devices and is also available in a premium version that comes with additional features such as a duplicate and broken link finder, full-text search for the websites you saved, a Cloud backup, and more.

Wrapping Up

Have you come across a site recently that left you feeling inspired? Or maybe a handy little tool that helped you overcome a creative trough? We’d love to hear about it in the comments below!

Further Reading

• The Design Leader Dilemma
• Sustainable Design Toolkits And Frameworks
• UX Checklists For Interface Designers
• Solo Development: Learning To Let Go Of Perfection
  

(vf, il, mrn)

What does it take to create meaningful user experiences? While there’s no one secret recipe for success, there are some fundamentals that you can consider to master the challenge. In this post, we compiled useful tools, tips, and resources that are bound to help you build better user experiences. You’ll find psychology heuristics just like tips for building a winning UX strategy, dive deep into user research and UX writing, and explore real-world examples — good and bad — from which you can learn to create experiences that truly matter. But be warned, there’s quite a lot to digest in this post, so you might want to consider to bookmark it and split it up over several coffee breaks. Happy reading!

Laws Of UX

Fitt’s Law, Miller’s Law, the Serial Position Effect. Do you know what’s behind these names? If not, Laws Of UX will shed more light on their meaning.

Created by Jon Yablonski, this lovely website explains 21 psychological principles that designers can consider to create more human-centered products and experiences. A great initiative to make complex psychology heuristics more accessible.

Tools To Build Better Digital Experiences

The right tools at the right time, help streamline the design process. To give you a better overview of which tools could enhance your UX design projects, Jordan Bowman and Taylor Palmer curate the site UX Tools.

Their design tools database features tools for everything from UI design and prototyping, to user flow and handoff, design systems and versioning. Each tool is rated by usage and user rating and comes with detailed information on platform support, cost, and features. On the site, you’ll also find practical UX challenges to train yourself in crucial UX skills. A great resource to build better digital experiences.

The Ultimate Guide To UX Research

User experience research is a crucial component of the human-centered design process. But how do you tackle the task and integrate a UX research process into your team’s workflow? To get you up and running, the folks at Maze put together the “Ultimate Guide to UX Research”.

The comprehensive guide dives into the fundamentals of UX research and its various methods. It starts off taking a closer look at what UX research is all about and why it’s the backbone of building good products, dissects different research methods and tools, and shares tips for creating a research plan and establishing a UX research process. A great read for UX designers and product managers alike.

How To Build A Winning UX Strategy

As designers, we often get in heated debates on design processes, our workflows, and our tooling. Of course, we want to improve the overall user experience and user satisfaction, and we want to establish a lasting, positive relationship with our customers by keeping them happy and productive with our services. Yet how exactly do we get there? In his talk on UX strategy (transcript), Jared Spool has been looking into ways for us to create a better product and UX strategy. That involves regularly pruning features rather than adding them, continuously exploring common expectations and frequent frustrations, adding value by innovating where customers are most frustrated and establishing exposure hours with customers for the entire team.

In his other talk on growth stages in UX (transcript), Jared explains how everybody involved in the product is a designer as well, so increasing design literacy among the entire team is necessary to make the product fully focused on overall design and UX. He speaks about the UX tipping point which organizations need to reach when design becomes an organization’s competitive advantage. Both talks are a great starting point when you want to understand how to take your organization from status quo to a better place, and where to start.

The Maturity Of UX Writing

For the past few years, organizations and designers have turned their focus to the importance of writing. They’ve realized that content can indeed help to design clear and meaningful experiences. But what is UX Writing and why is it that important?

According to the UX Writing Worldwide Report, UX Writing focuses on users and helps create experiences that are relevant to their needs. The survey conducted among 110 writing professionals in May 2020 gives interesting insights into the role of the UX Writer in companies around the world.

The Food And User Experience Combination

What do food and UX have in common? Quite a lot actually! If you’re open for a different kind of approach to UX, we came across a project that already has a few years on its back but offers a perspective on user experience design that you probably haven’t taken on before.

For a talk he gave in 2010, Peter J. Bogaards collected thoughts, ideas, and resources, simply everything that creates a link between the disciplines food/gastronomy and user experience design on his blog Food UX. What might seem a bit strange at first will start to make sense the deeper you start to dive into Peter’s way of thinking. As it turns out, in the end both gastronomy and UX are really about the same thing: engaging the senses to allow experiences to emerge, setting the stage for something good to happen, and serving something delightful.

The Deck Of Brilliance

Do you sometimes find yourself facing a blank page with little or no inspiration whatsoever? Competing with creatives from every corner of the globe certainly doesn’t make it easy to generate brand-new ideas, especially when you feel like they’ve all already been taken.

The Deck of Brilliance gives you 52 free tools that are bound to help you work up ideas in short periods of time. All you need to do is pick a tool one after the other, and be prepared to note down your ideas when they start rolling in. The more ideas you generate, the better the chances of nailing the big one!

Accessibility For Teams

Accessibility goes far beyond the code, so when it comes to delivering accessible websites, each person in a team has their specific responsibilities. If you feel that your team hasn’t found the right strategy to tackle accessibility yet, Peter van Grieken’s guide “Accessibility for teams” has got your back.

The guide consists of six parts, with each one of them aimed at the different specialists in your team: product managers, content designers, UX designers, visual designers, and front-end developers, plus a guide on accessibility testing. The latter two haven’t been released yet. A great resource that helps incorporate accessibility into your team’s workflow from the ground up.

Slack Communities For Designers

Supporting each other, sharing inspiration, asking for feedback, encouraging discussion — all of this is a crucial part of any creative process. If you’re a designer and are eager to connect with likeminded people, there are a lot of design communities on Slack to participate in. To help you discover the right one for your needs, Ryan Yao set up Designer Slack Communities.

No matter if you’re into UX, animation, or web typography, or are looking for ways to create positive social change, explore how to shape a design culture, or just want to talk shop about design systems, Ryan’s overview has got you covered. If you know of a community that is worth joining but not listed yet, you are welcome to add it. Happy connecting!

The Past, Present, And Future Of Interfaces

Why do we interface? After several months of strict Covid quarantine gave product designer Ehsan Noursalehi a new perspective on our relationship with technology, he decided to convert his obervations and questions into an online micro book.

Why Do We Interface takes a historical look at interfaces to build an understanding of how they allow us to utilize information in such powerful ways that they can fundamentally change what it means to be human. A thought-provoking journey from the failed Apple Newton of 1993 to the voice-first interfaces of today and the challenges the future might bring, as well as a precious reminder about the true purpose of a designer’s job.

Fonts Knowledge

Without a doubt, it’s possible to do great design work with a poor quality typeface, but, on the other hand, well-considered typographic choices improve the user experience: they enhance the meaning of text, aid users in wayfinding, and improve readability. To ease your first steps into the world of typography (or help you take your skills to the next level) the Google Fonts team teamed up with typographic experts from around the world to create a library of typographic guides: Fonts Knowledge.

Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose. The topics include OpenType, web fonts, type essentials, and variable fonts and are divided into three sections: “Introducing type”, “Choosing type”, and “Using type”. A glossary helps you make sense of typographic terms.

Designing Better Landing Pages

Persuading someone to take an action isn’t always about convincing them with arguments. Sometimes it’s enough to describe clearly what pain points a product addresses, make the pricing transparent, and explain what audience the product is addressing (perhaps backed up with some social proof).

In a Twitter thread on Landing Page Hot Tips, Rob Hope, a passionate UX designer from Cape Town, South Africa, lists 100 useful tips to keep in mind when designing a landing page (or any other interface really). Each tip has a visual and a little cheatsheet — along with a few quick pointers of things to do and things to avoid. All tips are also collected in a lovely eBook.

The UX Of Banking

Every bank claims to offer the best overall banking experience, and why wouldn’t they, right? Well, in order to find out what the challenger banks did differently, UX specialist Peter Ramsey decided it was time to put a few of them to the test.

First, he opened 12 real bank accounts in the UK, and logged everything. What followed next were six detailed chapters of his user journey: opening an account, making his first payment, freezing his card, making international payments, open banking, and last but not least, customer support. A fantastic reference guide to help you craft better experiences indeed.

Common Pitfalls In Mobile E-Commerce UX

Large ads in primary areas of the mobile homepage, no autocomplete suggestions for only slightly misspelled search queries, no load indicators when new content is loading — these are just a few of the common UX pitfalls that the Baymard Institute came across when analyzing the current state of mobile e-commerce. For users, things like these are annoying; for the e-commerce industry, they are missed opportunities.

In fact, as the Baymard Institute found out, the mobile e-commerce performance for the average top-grossing US and European e-commerce sites is only mediocre. To help us all do better, they distilled their findings down into 18 common design pitfalls and strategic oversights that offer room for improvements, in particular when it comes to the UX within the mobile homepage, on-site search, forms, as well as site-wide features and elements. A must-read.

Streamlining The Checkout Experience

Fifty-six. That’s the number of actions a customer needs to complete to buy an American Airlines ticket. Let’s face it, checkout forms are often too long and a hassle to fill out. In the worst case, customers might even abandon the process. To help us do better, UX Planet published a four-part article series on streamlining the checkout experience back in 2017 which is still gold for everyone working on a checkout flow today.

The first part in the series examines examples where the checkout experience has gone wrong and why. The second part pins down the most important things that will help improve any checkout form experience in 16 easy-to-follow tips. Part three is dedicated to form validation and how to minimize the number of errors a customer might make, while also taking a closer look at differences between B2C and B2B markets that lead to differences in design. Last but not least, part four is all about bank card details, teaching you how to detect and validate a card number and how to deal with the other payment form fields. A long but worthwhile read.

UX Takeaways From Streaming Services

Users are sensitive to any friction while using an app and as the number of apps that offer similar features is growing, the more important the experience is as a differentiator. Joseph Mueller analyzed the little experience decisions that make all the difference in the top streaming apps on iOS.

Diving deeper into Netflix’s “kitchen sink”, Hulu’s concept of “back 10 forward 30”, YouTube’s double tap targets, and “rotate for more” approaches, Joseph summarized five key takeaways to improve UX that can be applied to any kind of project: Remove the reasons a user will have to exit the app; pay attention to the nuance of a user’s motivation as it could lead to a new solution; educate the user with the interface; change exit points to opportunities; let your users get the results they want without having to be too precise. Joseph’s analysis shows great examples of how all of this can be achieved.

Getting Push Notifications Right

Many users genuinely dislike push notifications because many websites abuse them for the mere purpose of increasing engagement. But instead of forgoing them completely, Stéphanie Walter suggests a different approach — after all, if done right, there are use cases where notifications can improve the user experience.

In her guide to push notifications Stéphanie shares valuable advice on how to stop ruining push notifications and get the trust of users back. The two pillars that a good notification is built upon: Give your users a chance to understand what they gain from notifications and ask for permission in context, not on page load. This could be an e-commerce site that asks customers if they want to receive notifications about parcel status and delivery after completing a purchase or an airline notifying users when their flight is delayed, for example. A must-read.

The “Back” Button UX

The quality of an experience shows in situations when something goes unexpectedly. What happens when the customer accidentally reloads the page in the middle of a checkout, e.g. when scrolling up and down on a mobile phone? Does the payment form get cleared out as a user notices a name’s typo on a review page? What happens when a customer hits the “Back” button in a multi-step-process within your single-page-application?

In fact, the unexpected “Back” button behavior often has severe usability issues, and some of them are highlighted in Baymard Institute’s article “Design Patterns That Violate ‘Back’ Button Expectations”. It’s worth testing the “Back” button for overlays, lightboxes, anchor links and content jumps, infinite scroll and “load more” behavior, filtering and sorting, accordions, checkout and inline editing.

We can use the HTML5 History API, or specifically history.pushState() to invoke a URL change without a page reload. The article goes into detail highlighting common issues and solutions to get things just right. Worth reading and bookmarking, and coming back to every now and again.

Should The Buttons Be Disabled?

It has become quite common for lengthy web forms to keep the “Continue” button disabled until the customer has provided all data correctly. This behavior acts as an indicator that something is wrong with the form, and it can’t be completed without reviewing the input. But be careful: It works if the inline validation for every input field is working well, and it doesn’t work at all when it’s glitchy or buggy.

In “Disabled Buttons Suck”, Hampus Sethfors highlights the downsides of disabled buttons. With them in place, we do communicate that something is wrong, but we don’t really explain what is wrong or how to fix it. So if the customer has overlooked an error message — be it in a lengthy form on desktop, or even in a short form on mobile, they’ll be lost. In many ways, keeping buttons active and communicating errors is more efficient. And if it’s not possible, at least provide a way out with a button “I can’t complete the form, please help”, so customer support can get back to customers in case they get into trouble. If you need a more detailed refresher on web forms, “Form design: from zero to hero” will keep you busy.

Designing Better Complex Enterprise Tables

Designing large complex tables is tricky. There is quite a bit of information that we need to show, and showing that information in a structured form requires quite a bit of space. For desktop, we could allow customers to customize the table, move columns around and change the views. In fact, in her article, “The Ultimate Guide to Designing Data Tables,” Molly Helmuth highlights some of the best practices for designing complex data tables, and Andrew Coyle has some table design patterns that you can use as well.

When it comes specifically to enterprise tables that usually require inline editing and filtering, Fanny Vassilatos and Ceara Crawshaw have written a detailed guide to enterprise tables, with useful considerations about viewing options, scroll behavior, sticky headers and footers, pagination, sorting, filtering and search.

But what do we do for mobile? Transforming a table into a slightly narrower table on mobile usually doesn’t work particularly well. Usually, we’d need to redesign the experience from scratch. As Joe Winter shows in his piece on designing a complex table for mobile, we could allow customers to navigate the data set by column first or by row first — combining a dropdown with cards and filters to support this type of navigation. All excellent patterns that we can use to start off our project on the right foot!

Localization In UX

Localization goes far beyond translation. It’s also about small nuances in mindset and culture. As Tania Conte points out, an effective product, as for UX design, is not likely to be faithful to its original version when it becomes available to a different country. Instead, the experience needs to be aligned to different cultures, tastes, and styles.

To prevent you from common pitfalls when introducing your product to new markets, Tania collected the main UX design actions applied to localization of products and services. In a nutshell: Consider that cultural value can change the way visual content is processed. Be respectful of cultural and religious pecularity. Introduce some variants that leverage the characteristics of a country. Get focused on habits and local traditions around the globe. And, last but not least, research legal aspects that might be involved. A great reminder to overcome assumptions.

Enhancing User Experience With CSS Animations

Animations have become a popular way to improve the user experience in the last years. But how do we make sure that our CSS animations and transitions will be meaningful to users and not just some nice decoration? Stéphanie Walter gave a talk about enhancing UX with CSS animations at the virtual Shift Remote conference in August last year. In case you missed it, she summarized everything you need to know in an accompanying blog post.

Starting with a reminder of CSS syntax to build transitions and animations, Stéphanie explores why certain animations work better than others. She shares tips for finding the correct timing and duration to make UI animations feel right and explains why and how animations do contribute to improving the user experience. And since great power brings along great responsibility, she also takes a closer look at how you can make sure your animations don’t trigger motion sickness. A great reference guide.

The Role Of Sounds

Just like logos, sounds play an important part in creating your visual brand identity. While there are two categories of UI sounds that designers mostly focus on (i.e. notification and interaction sounds), all of them need to draw users’ attention to a certain event and make the experience as pleasant as possible.

So how do sound designers find the best appropriate sound for a certain app notification or a particular event taking place at a particular moment in time? As sound designer and musician Roman Zimarev explains: “Only the sounds that provide useful information or improve the user’s experience should stay.” Make sure to study what kind of sounds there are, what their functions are, and where we actually need to use them. That way, there’s no doubt that users’ experiences will be more pleasant and memorable.

Wrapping Up

Have you come across a UX resource, article, or tool recently that comes in handy in your day-to-day work or that maybe even changed the way you approach UX challenges? Let us know in the comments below! We’d love to hear about it.

(vf, il)

Once again, the web community has been busy with creating some fantastic advent calendars this year. As you’ll see, each and every one of these calendars are sure to cater for a daily dose of web design and development goodness with stellar articles, inspiring experiments, and even puzzles to solve.

It doesn’t really matter if you’re a front-end dev, UX designer or content strategist, we’re certain you’ll find at least something to inspire you for the upcoming year. Use this month of December as a time to slow down, and your time to reflect and plan ahead — you won’t regret it.

Advent of JavaScript

If you sign up to the Advent of JavaScript, you’ll be getting an email every day that outlined a JavaScript challenge. Each of the given challenges include all of the HTML and CSS you need to get started, allowing you to focus on the JavaScript. You’ll also receive a brief on how to get started, ways to push yourself, and steps to help you get started. You can get the challenges for free (or pay for the solutions).

• James Q. Quick on Twitter

Advent Of CSS

For folks who’re more into CSS, there’s the Advent of CSS where you can sign up for a daily email outlining a CSS challenge that includes all the assets you need to get started — including a Figma design file. (If you don’t have a Figma account, don’t worry, it’s free.) Before accepting this challenge, you really should know basic HTML and CSS.

• Amy Dutton on Twitter

JVM Programming Advent Calendar

The Java Advent 2021 is here! To make the advent season even sweeter for JVM enthusiasts, there will be a new article about JVM-related topic everyday. The project started in 2012 with the idea of providing technical content during the Christmas Advent period, so keep looking for nice things under the Java Christmas tree! 🎄

• RSS Feed
• @JavaAdvent on Twitter

Advent Of Code

If you prefer a puzzle over an article, take a look at Advent of Code. Created by Eric Wastl, this is an advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. You don’t need a computer science background to participate — just a little programming knowledge and some problem solving skills will get you pretty far. Go ahead and give it a go!

• #AdventOfCode on Twitter
• @ericwastl on Twitter

Perl 6/Raku Advent Calendar

Back in October of 2019, “Perl 6” was renamed to “Raku”. It’s the 6th year since (what was then called) Perl 6 was released, and the 13th year in a row for this Raku Advent calendar. Stay tuned for lots of articles on metaprogramming, applications, useful Raku modules, programming techniques, guides on how to work with Raku inside containers, and even how to migrate from good ol’ Perl.

• RSS Feed

24 Pull Requests

24 Pull Requests is a yearly initiative to encourage contributors around the world to send 24 pull requests between December 1st and December 24th. The project is available in twenty languages, and encourages all kinds of contributions to open-source projects — including non-pull-request contributions. There’s a new contribution form on the site that allows you to record the contributions you’ve made each day that wouldn’t usually make sense as a pull request. Join in!

• “24 Pull Requests” on GitHub
• @24PullRequests on Twitter

HTMHell Advent Calendar

If you’re already familiar with the HTMHell website, then you can guess how interesting its advent calendar is going to get! Take a peek behind each door of the HTMHell calendar where you’ll find an article, talk or tool that focuses on HTML. To be fair, HTMHell isn’t just about bad practices — Manuel also shares good practices and useful HTML tips and tricks. 🔥

• @htm_hell on Twitter
• “HTML Tips & Tricks” RSS Feed

PerfPlanet Calendar

An advent calendar that has been publishing since 2009 is back again. Good ol’ PerfPlanet is back for another season with all things speed and web performance. Anyone is welcome to contribute to the calendar, so do feel free to reach out with a topic or tool you’re passionate about, or a technique you’d like to teach and tell the web performance community about.

• Stoyan Stefanov on Twitter
• Perfplanet calendar’s oldies but goodies

C# Advent Calendar

It’s time for the fifth annual C# advent calendar that will feature two pieces of content every day. Anyone can contribute by sharing their blog posts, videos, articles or podcast episodes dedicated to C# development. In case all of the spots are already claimed, you can always sign up to be a substitute author. Rock on! 🎸

• #csadvent on Twitter
• @mgroves on Twitter

Inclusive Design 24

The good folks at Inclusive Design 24 are sharing their favorite talks from previous years of the good ol’ #id24 online-only conferences while counting down the days until the New Year. All videos have even been manually re-captioned, just so they’re all at their best.

• @id24conf on Twitter

Lean UXMas

Lean UXMas has been publishing each advent since 2014 and is a collection of the most popular articles from this year’s Agile and Lean UX latest news. If you find yourself impatiently waiting for the next article to be posted, you can always check out the previous advent calendars smashing the year in the base URL, or simply search for them below the website’s header.

• RSS Feed
• @LeanUXmas on Twitter

Code Security Advent Calendar

If you’re up for a challenge that involves spotting security vulnerabilities, then the Code Security Advent Calendar is just the right one for you. Every day, there will be a code security puzzle and/or riddle announced on Twitter to which you’re welcome to join and share with your friends to discuss solutions together. The most active players with the best solutions will be contacted to receive a cool swag pack. 🎁

• @SonarSource on Twitter

Advent Of Cyber

Security can be a daunting field. With Advent of Cyber, you can get started with Cyber Security by learning the basics and completing a new, beginner friendly security exercise every day. For each task you get correct, you get a raffle ticket and on the 26th December, meaning the more questions you answer, the more chance you have of winning. Every day you complete a challenge, you get entered into another prize draw for the chance to win a mini-prize. So, what are you waiting for?

• TryHackMe on Twitter
• John Hammond on Twitter

24 Days In December

“PHP is not just a language. PHP is a group of people, a community of developers who build things for the web. The PHPamily spans the globe, and while we might not always agree or get along, we have one thing in common, we’re passionate about what we do.” Jonathan Bossenger hits the nail right on the head as he welcomes everyone to participate in the 6th edition of 24 Days in December. We’re all look forward to hearing your personal journey and stories with PHP! 🌈

• RSS Feed
• @24DaysInDec on Twitter

Designcember

As a celebration of web design, the good folks at web.dev are dropping a UI development treat for you every day with their brilliant Designcember advent calendar. Built with CSS container queries and the new CQ Polyfill, it’s full of little details to explore! Try interacting with the windows, resizing your browser, or clicking on the button at the top right to toggle between dark and light mode. Why not play along and create your own CQ demo?

• #Designcember on Twitter
• @ChromiumDev on Twitter

Umbraco Christmas Calendar

It’s the 10th year of 24 Days In Umbraco and it’s time to learn more about Umbraco (otherwise known as the ‘Friendly CMS’). If you’re interested in it but not sure where to start, you can always check out the articles by tag(s) and find the answers to your questions. The calendar was first started back in 2012 so there’s plenty of content to sift through.

• @24daysinumbraco on Twitter

Festive Tech Calendar 2021

With over 2K subscribers on YouTube, the Festive Tech Calendar is back at it again this year with videos from different communities and people around the globe. As you’ll see, you’ll quickly be able to find an entire collection of videos from all of the previous years, and topics as well as the diversity of speakers both don’t fall short indeed. By the communities, for the communities indeed.

• “Festive Tech Calendar” on YoutTube
• #FestiveTechCalendar2021 on Twitter
• @CloudFamily on Twitter

SysAdvent

SysAdvent is back this year! With the goals of sharing, openness and mentoring, you’re in for some great articles about systems administration topics written by fellow sysadmins. Tune in each day for an article that explores the wide range of topics in system administration.

• RSS Feed
• @SysAdvent on Twitter

IT Security Advent Calendar

“Don't store sensitive data in the cloud; keep it entirely disconnected from the web.” Yup, that’s the credo delivered in the first advent door of the good ol’ IT Security Advent Calendar this year. Counting down to Christmas, this calendar is dedicated to sharing a new tip for protecting your devices, networks, and data each day.

• @Infowebica on Twitter

Bekk Christmas

This year’s Bekk Christmas features opinion pieces, tutorials, podcasts, deep dives and lots of other formats. Pick the ones that seem interesting to you, and consume them whenever you like. It’s worth digging through the archives (see e.g. 2020) — there’s a golden gem hidden in each one of them!

• Bekk on Twitter
• Kristofer Giltvedt Selbekk on Twitter

It’s nice to find some calendars in languages other than English, too! Here are a few we stumbled upon:

24 Jours De Web (French)

24 Jours De Web is a lovely French calendar which first appeared back in 2012, and has been continuing the lovely tradition of online advent calendars ever since. 24 authors come together each year and publish an article on UX, accessibility, privacy, and other topics related to the good ol’ web.

• RSS Feed
• @24joursdeweb on Twitter

SELFHTML Adventskalender (German)

This year’s SELFHTML Adventskalender is dedicated to accessibility — a topic that concerns everyone. Why? Because accessibility is good for all of us. Accessible websites are simply better websites. At the end of the day, everyone in the world hits a large key faster and more reliably than a small key. To all the German-speaking developers out there, you’ll understand why it’s important to include accessibility as much as possible. Also, make sure to bookmark the SELFHTML wiki so you can have the latest documentations and tutorials at hand.

• RSS Feed
• @SELFHTML on Twitter

adventJS (Spanish)

Fancy more JavaScript challenges every day? Well, Miguel Ángel Durán has your back with adventJS — an advent calendar that started back in 2015. The programming challenges are all in Spanish, and are meant to be solved with JavaScript only. Don’t forget to participate and share your solutions on Twitter!

• #adventjs on Twitter

Kodekalender (Norwegian)

Knowit is one of the Nordic region's leading consulting companies. They have once again brought their Norwegian calendar to life, and it is just the kind of holiday calendar for those of you who love programming. Behind each hatch hides a task you have to answer in the form of a simple text string or a number. The hatches vary in degree of difficulty and design, but common to all is that they are best suited for solving with code. Solve as many slots as possible to increase your chances of winning! Good luck!

• @knowitnorge on Twitter

WEBアクセシビリティ Advent Calendar (Japanese)

This Japanese advent calendar has been running since 2013 and is moderated by @hokaccha. Its focus lies on web accessibility, with a new author exploring a topic each day — from web accessibility to all the different types of programming languages you may want to explore for your projects. Once logged in, you can save a spot on the calendar and have your article or work published on that particular day.

"Do you happen to know any other advent calendars that have been created in languages other than in English? Please do feel free to reach out to me on Twitter and I’ll be sure to add them to this list." 🙌

Oldies But Goodies

Christmas Experiments (2018)

Christmas Experiments started back in 2012, with the goal to deliver great experiments and highlight top web creative as well as newcomers. It was a pretty cool WebGL advent calendar that featured a daily new experiment that was quite obviously made with love by digital artists. Unfortunately, it did not continue after the 2018 edition.

• @christmasxp on Twitter

24 Accessibility (2019)

An advent calendar we surely miss is the 24 Accessibility. The site hasn’t had a new article since 2019, but still offers a good resource of articles on all subjects related to digital accessibility. Whether you are new to accessibility or a veteran, a developer, designer, user experience professional, quality assurance analyst or project manager, you’ll find an article of interest during the run of the series.

• RSS Feed
• @24accessibility on Twitter

It’s A Shape Christmas (2019)

It’s A Shape Christmas is a digital calendar that counts down to Christmas and reveals a bespoke illustration each day themed around four different shapes (Square, Triangle, Circle and Hexagon) and Christmas. The project was started in 2011 by a UK design agency called Made by Shape. The website still showcases some of the best from the previous seasons. I’m sure you’ll agree: they’re all just too good not to be shared! ✨

• @shapechristmas on Twitter

24 Ways (2019)

First initiated by Drew McLellan, 24 ways started out as a simple website that published a new tip or trick each day leading readers through December up until Christmas. It launched in 2005 and still has all of the calendars available online. Unfortunately, the last one was published in 2019 and will be taking a well-earned break after that year’s “final countdown”.

• RSS Feed
• @24ways on Twitter

Perl Advent (2020)

The Perl Advent started back in 2000 and is perhaps the longest running web advent calendar that many know of. You’ll find insightful articles written by diverse author submissions from all types of Perl programming levels. A different Perl module will be featured each day for the twenty four days of advent, and an extra module on Christmas day. Make sure to go through the previous Perl advent calendars — it’s worth it.

• RSS Feed
• Mark Fowler’s website

PWAdvent (2020)

PWAdvent is a nice advent calendar for everyone who’s excited about the web platform and Progressive Web Apps, of course. Take a look at all the great stuff the web has to offer in last year’s calendar, in which a new progressive browser feature was introduced every day by Nico Martin himself and others.

A11y Advent Calendar (2020)

Heydon Pickering once said, “Accessibility is not about doing more work but about doing the right work.” Last year, Kitty Giraudel decided to publish an accessibility tip a day in their very own #A11yAdvent. Some of the tips are probably common knowledge for many, yet each of the posts cover so many of the important aspects of accessibility that will still hold true for years to come.

• RSS Feed
• Kitty Giraudel on Twitter

Last But Not Least…

Of course, we wanted to join in the fun ourselves and brought our very own #SmashingAdvent to life! As you already probably know, the Smashing team has been organizing conferences and events since 2012, so there are plenty of gems to shine the spotlight on. Do give @SmashingConf a follow on Twitter where we’ll be sharing our favorite talks and interviews with speakers from all over the globe.

On behalf of the entire Smashing team, we’d like to say thank you to each and every one involved in these projects — we see you! The communities in our web industry wouldn’t be able to learn so much and thrive if it wasn’t for your time, hard work and dedication. We all sincerely and truly appreciate each and every one of you. 🙏

And of course, if there’s a calendar that isn’t mentioned here, please do post it in comments section below.

Further Reading

• Core Web Vitals Tools To Boost Your Web Performance Scores
• Vanilla JavaScript Code Snippets
• Sustainable Design Toolkits And Frameworks
• Magical SVG Techniques

(cr, vf, mrn)

Many modern programmers, including front-end and full-stack developers, work daily with the command line. Even those who are relatively new to web development are picking up command-line skills early and finding practical tools and utilities to enhance their productivity in the terminal.

This post presents a categorized list of many command-line apps I’ve personally discovered over the past few years. Some of them are relatively new, others have been around for a while. So I hope something in this roundup will interest you and help you get stuff done when working in the terminal.

You can jump to a category using the navigation below:

• Terminal Apps
• Terminal Utilities and Enhancements
• Command-line Scripting and Frameworks
• Productivity Tools for the Terminal
  

Terminal Apps

This section features terminals, multiplexers, console emulators, mobile terminals, and command-line workspaces that you can use to replace the default terminal app on your system.

tmux

tmux is a popular terminal multiplexer for Unix-like operating systems that lets you easily switch among several programs in a single terminal, with the ability to “detach” a session (while still running in the background) or “reattach” it to a different terminal.

iTerm2

iTerm2, the successor to iTerm, is a replacement for your Terminal on macOS that includes features like split panes, robust search, autocomplete, instant replay, along with a whole slew of configuration options.

Mosh

Mosh is a remote terminal app (or mobile shell) for interactive SSH usage that includes several useful features for those who need to do terminal-based tasks over weak WiFi, cellular networks, or other less-reliable connections.

Zellij

Zellij is a terminal workspace that has the base functionality of a terminal multiplexer (similar to tmux) but includes features that allow users to extend it and create a personalized environment via panes/tabs and plugins.

Hyper

Hyper is an Electron-based terminal app for Mac, Windows, or Linux that’s built with web technologies (HTML/CSS/JS). Includes dozens of themes and plugins and is built on speed and stability.

cmder

cmder is a portable console emulator for Windows that was built due to the lack of a good option in this area for Windows users.

a-Shell

a-Shell is an iOS app that offers a ‘terminal in your pocket’ with files/directory control, compatibility with Apple Shortcuts, multiple windows, and lots more.

Eternal Terminal

Eternal Terminal is another remote terminal app inspired by other similar, popular projects.

Ten Hands

Ten Hands is a terminal app for Mac, Linux, and Windows that is billed as the simplest way to organize and run command-line tasks, useful for those who run similar daily tasks on multiple projects.

eDEX-UI

eDEX-UI is a fullscreen, cross-platform terminal emulator and system monitor heavily inspired by science fiction movie UIs, in particular, the Tron: Legacy film.

Tabby

Tabby, formerly “Terminus”, is a customizable cross-platform terminal app for local shells, SSH, serial, and Telnet connections that includes support for features like split panes, smart tabs, customizable hotkeys, and lots more.

Fish Shell

Fish Shell is another option for a command-line shell for Linux, macOS, and Windows that includes auto-suggest, tab completions, 24-bit color, web-based configuration, syntax highlighting, among other practical features.

Terminal Utilities And Enhancements

Once you’ve got your primary workspace, you’ll want to enhance it with various tools, utilities, themes, and so forth. This section includes some useful tools to make your terminal experience more enjoyable.

Oh My Zsh

Oh My Zsh is an open-source, community-driven framework for managing your configuration for Z Shell (or Zsh, a popular Unix shell). It comes bundled with thousands of helpful functions, helpers, 300+ plugins, 140+ themes, and more. Works best on macOS or Linux, but can also be used on Windows using something like Cygwin or WSL2.

Fig

Fig adds VSCode-style autocomplete to your existing terminal and includes support for existing CLI tools like Git, npm, Kubernetes, Docker, AWS, Google Cloud, and more.

fzf

fzf is a fast, portable, fuzzy finder for the command line that lets you run fuzzy search queries with a comprehensive feature set.

Shell History

Shell History (not free) is a macOS app that integrates with Bash, Zsh, or Fish and allows you to easily backup and sync via iCloud and organize your shell history in “notebooks”.

htop

htop is an interactive process viewer, originally Linux-only but now cross-platform, that aims to improve on the Linux top command by providing extra features when viewing running processes.

GitHub CLI

GitHub CLI, in case you missed it, is the official cross-platform command-line interface for GitHub, bringing pull requests, issues, and other GitHub-related tasks to your terminal.

Streamhut

Streamhut lets you share your terminal in real-time without installing anything. Simply run one of two commands (depending on your setup), useful for live terminal sessions in team collabs, interviews, or teaching.

icdiff

icdiff is a terminal-based file diff tool that makes good use of colors to present diffs in a more practical, visual manner.

>\_TerminalSplash

TerminalSplash, as the name suggests, is like Unsplash, but for terminal themes. Choose from more than 200 user-submitted themes or submit your own.

Terminalizer

Terminalizer is a customizable and cross-platform terminal recorder that lets you record terminal sessions then share them as animated GIFs or via a web player.

Asciinema

Asciinema is another popular option for terminal recording and sharing, but not available for Windows. The cool thing about this one is that the recorded output is not a video but a plain text animation of the terminal session, meaning you can select and copy/paste items from recordings.

gtop

gtop is another enhancement on the top command that provides a system monitoring dashboard for your terminal. Require Node.js and includes partial support on Windows.

DevDash

DevDash is a highly configurable terminal dashboard for developers and creators. You can customize it to display information from sources like Google Analytics, GitHub, Feedly, shell command output, and more.

Honorable Mentions:

• ora
  An elegant terminal spinner.
• tiny-care-terminal
  A little dashboard that tries to take care of you when you’re using your terminal.
• theme.sh
  A shell script that lets you set your terminal theme that includes 270+ preloaded themes.

Command-Line Scripting And Frameworks

Some numerous libraries and frameworks allow you to build and maintain your own command-line apps and utilities. Below you’ll find a few of those for Bash, JavaScript, and more.

Command And Conquer (cac)

Command And Conquer, also called cac, is a lightweight JavaScript framework for building command-line apps. For example, it’s been used to build several Node.js-based scaffolding tools.

zx

zx is a popular alternative to Bash from engineers at Google that allows you to write command-line apps using JavaScript with an easy-to-use API that allows you to call executables and get their output, handle errors, and more.

present

present is a Markdown-based presentation tool for the terminal that includes colors and effects and allows you to play pre-recorded playable code blocks as slides.

Bach

Bach is a Bash testing framework that can be used to test scripts that contain dangerous commands like rm -rf / and also includes APIs (e.g. @mock, @ignore, @mockallto, etc.) to mock commands.

CLUI

CLUI is a JavaScript API with utilities to allow you to build command-line interfaces with context-aware autocomplete into your apps (i.e. terminal-like applications that users interact with).

ShellCheck

ShellCheck is a shell extension to help you find bugs in your shell scripts.

Honorable Mentions

• Bashō
  Lets you write complex shell tasks using plain JavaScript and it mixes well with shell commands and scripts.
• import
  A fast and easy-to-use module system for Bash and other Unix shells.
• Bash Infinity
  A modular and lightweight library and boilerplate framework for writing tools using Bash.

Productivity Tools For The Terminal

Finally, this category puts together a small sampling of command-line utilities and programs that help with various productivity-related tasks like keeping stuff organized, sharing files, and more.

Dash Dash

Dash Dash is an online documentation site that presents the Unix man pages (i.e. manual pages) in a more palatable format, to help those less familiar with the terminal learn to use the command line.

nb

nb is a command-line tool with features that include local web note‑taking, bookmarking, archiving, and encryption. Storage is in plain text, includes Git-based versioning, wiki-style linking, color themes, and lots more.

Rclone

Rclone is an open-source command-line program that allows you to manage files on 40+ cloud storage services (Amazon S3, Dropbox, Google Drive, Azure, etc.). It includes cloud equivalents for familiar Unix commands and other features.

navi

navi is an interactive cheatsheet tool for your terminal. In addition to other features, you can browse through cheatsheet repositories, import cheatsheets, or add your own.

Taskbook

Taskbook is a fast command-line tool that lets you organize tasks, boards, and notes in your terminal, with features like search/filter, custom storage location, and a simple and user-friendly syntax.

Project Explorer

Project Explorer is a CLI tool that lets you build a tree visualization of any project. This would come in handy when bringing on new team members or when inheriting a new project.

transfer.sh

transfer.sh is a fast and easy-to-use app for sharing files via the command line. Includes support for services like Amazon S3, Google Drive, Storj, and the local file system.

Honorable Mentions

• ack
  A code-searching tool, similar to grep but optimized for programmers searching large trees of source code.
• goto
  A shell utility with auto-complete support to navigate to aliased directories.
• bashupload
  Upload files (up to 50GB) via the command line to easily share between servers, desktops, and mobile devices.
• copyfiles
  A command-line utility that adds extra features to copying files in your terminal.

What’s Your Favourite Command-Line Tool?

As mentioned, this wasn’t meant to be an exhaustive list, but merely a big collection of relevant command-line apps and utilities that I’ve personally come across in the past few years.

If you’ve built something yourself or if there’s one you use regularly that supercharges your terminal experience, feel free to drop it in the comments!

Further Reading

• Lesser Known Uses Of Better Known Attributes
• Tight Mode: Why Browsers Produce Different Performance Results
• Sustainable Design Toolkits And Frameworks
• Sticky Headers And Full-Height Elements: A Tricky Combination

(vf, yk, il, mrn)

It’s incredible to see what we can do with CSS today, especially if you still remember how difficult it once was to figure out stacking contexts or why margins collapsed and why top: float didn’t work. In this post, we’ll look at just that: exciting and fun things we can do with CSS, exploring common problems and use cases we all have to face in our work.

Richer, Life-Like Shadows With CSS

Shadows help convey meaning and add extra value to a UI. However, a lot of shadows that we see on the web these days don’t use their full potential. Let’s change that!

A comprehensive deep-dive into all things shadows comes from Rob O’Leary. His article on CSS Tricks explores how light affects shadows and how to define a light source — the foundation to creating authentic shadow effects. Once that base is set, you’ll learn how to use shadows to evoke depth, elevate elements, and inset them, how to layer shadows, and, of course, which CSS property to use for which use case. Rob also takes a look at the accessibility and performance implications that shadows bring along, as well as how to animate them.

Another fantastic article on the topic comes from Josh W Comeau. To put an end to those “fuzzy grey boxes that don’t really look much like shadows”, as Josh describes the current state of most shadows on the web, he shows how to transform typical box-shadows into beautiful, life-like ones. A little detail that makes any UI a lot more tactile.

CSS Paper Cut-Out Effect

If you ever wanted to create a paper cut-out effect for a heading, you might have struggled quite a bit. Perhaps you need to set up two separate divs that then would be overlapped on top of each other. The spacing would need to be defined in relative units, of course, that might be a bit difficult to get right across screens.

Stephanie Eckles’ CSS Paper Cut-Out Effect solves the problem for good with CSS custom properties, CSS Grid, CSS transforms and a good ol’-fashioned CSS function attr(). Stephanie is using a data-attribute on h1 along with a span inside it. attr() picks up the value of the data-attribute, which is then used for the content-property in a :after-pseudo element. The highlights, shadows and colors can then be adjusted with CSS Custom Properties. Reusable and simple to maintain!

And if you are interested in more magic by Stephanie and other wonderful people who love CSS, take a look at StyleStage, where modern CSS gets the spotlight it deserves.

Also, take a look at Ahmad Shadeed’s piece on Thinking About The Cut Out Effect, which goes into all the fine detail of deciding when SVG might make more sense, and how to implement in a real-life scenario. The article also provides plenty of code examples to get started with!

The Minimap For The Web

We’ve seen them before: tiny horizontal bars that usually live at the top of the page. As a user is scrolling down, the horizontal bar is filling up, so the user knows how much is actually left to scroll.

What if we make it a bit more contextual though? Perhaps the page includes some images and videos, or quotes and distinct sections — wouldn’t be interesting to highlight them differently, while also allowing readers to pin a position on the page and jump back if needed? Well, Rauno Freiberg thought so, too.

Rauno’s minimap for the web (currently works only in Firefox) makes it trivial to create a minimap representation of the entire page, while also allowing readers to pin section of the page and navigate between them. To achieve it, Rauno uses an experimental CSS property element() to display a live image from an arbitrary HTML element (which currently only available in Firefox).

Conditional Border Radius In CSS

When designing cards, you might want a border-radius to have a quite sizeable value when there is enough space to display it along with other cards. Yet when there is no space and perhaps no margin either on the card — as it might be the case on smaller screens — you might want to reduce border-radius to 0. How would you achieve that?

Ahmad Shadeed has looked into this problem in quite a bit of detail in his article on Conditional Border Radius In CSS. The idea, originally suggested by Heydon Pickering and Naman Goel, is to use a large enough number to trigger one state or the other. On smaller screens, if the difference between 100vw and 100% is 0, then the radius will be 0, too; but if the difference is larger, a larger value would be used. You can take a look at the CodePen as well.

CSS Grainy Gradients

What if you wanted to add some noise to bring a bit of texture to an image? Of course you could export images as PNGs, WebP or AVIFs, but ideally we’d want to add “noise” on top of SVGs, so we can always turn and off noise if we wanted to.

In his CSS-Tricks article on grainy gradients, Jimmy Chion explains how we can generate colorful noise to add texture to a gradient with just a sparkle of CSS and SVG. As Jimmy explains, the idea is to use an SVG filter to create the noise, then apply that noise as a background. Then we layer it underneath a gradient, refine the brightness and contrast, and — voilà — you have gradient that gradually dithers away.

Issue solved! You can also explore the Grainy Gradient playground that Jimmy has set up.

Multi-Line Background Gradient

Some things might seem impossible to do with CSS — well, until someone finds a hack to make it happen. Like in this case: Can you achieve a multi-line padded text with a gradient that doesn’t reset for each line?

Yes, as Matthias Ott shows. Matthias’ solution is a bit hacky, but it leads to the desired result thanks to a pseudo-element that is added on top of the text. An interesting idea to tinker with.

Form Field Focus Without Outlines

Who said forms need to be boring? Hakim El Hattab created a demo that proves that even something as simple as a form asking for name, email, and password is an occasion to think outside the box and cater for a spark of delight.

To achieve that, Hakim combines form focus and validation in a subtle yet surprising animation that gets by without any focus outlines on the fields themselves. Instead, a dot marks the field that is focused. When the focus switches to another field, the animation is triggered, and the dot jumps to the new active field, drawing a connection between the two. Form field validation is also integrated seamlessly, with the dot expanding and showing a checkmark. If you’d like to dive deeper into the code, Hakim also published a demo on Codepen. Inspiring!

Transitioning CSS Gradients

If you’ve ever tried to transition gradients in CSS, you probably have noticed that it actually doesn’t work. Instead of gradually fading from one gradient to another, the change is happening immediately, abruptly, with no smooth transition between the two.

As Keith J. Grant has discovered, we can achieve the transition with a clever workaround though. We use a pseudo-element and opacity transform for that. First, we apply one gradient to the element, then position its pseudo-element to fill the element, and then apply the second gradient to it. And we “transition” between two gradients by transitioning the opacity of the pseudo-element. You can check a full working example on CodePen.

Improving Image Performance With image-set()

Have you heard of image-set() already? You can think of it as a CSS background equivalent to the HTML srcset attribute for img tags. Chromium-based browsers and Safari have supported it for some years now, Firefox followed just recently. Ollie Williams takes a look at what we can and what we can’t do with it today.

As Ollie describes, one use case for image-set() is to provide multiple resolutions of a background image and leave it to the browser to decide which image is served to a user — a high-res version for users on fancy devices and a lower-res image for those on slow connections or screens with a lower pixel density, for example.

Another very promising use case is still lacking browser support, unfortunately: the idea to use new image formats like AVIF, WebP, or HEIF while adding a fallback for older browsers. If you want to achieve something like that already today and don’t need background-image, the <picture> element might be an alternative worth considering, as Ollie suggests. A great read to help you improve image performance.

Clip-Path Pop-Out Effect

With clip-path: path() supported by major browsers, it’s time to get creative. Mikael Ainalem shows a beautiful use case for the rather new feature: a buttery-smooth pop-out effect.

Mikael uses clip-path: path() to set a photo of a person apart from its circle-shaped background. As you hover over it, the person seems to rise from the inside of the circle, creating a cool 3D impression. Perfect for “About Us” pages.

Whimsical 3D Button

Details matter. Designing a lovely button doesn’t seem to be a big complicated endeavor: a bit of padding here and there, a funky color, accessible text, and a few button states. Well, Josh Comeau has gone all the way to design a truly whimsical 3D button that you might want to click more than once.

The idea is simple: we create two layers and offset the foreground layer a little bit at first. On hover, we shift the front layer down. Then, we adjust the focus outline with outline-offset, or use :focus:not(:focus-visible) to hide the outline when the button is focused and the user is using a pointer device.

Then we shift the button up by a few pixels when they hover, animate the transform a lil’ bit, adjust the Bezier curve for animation and add a bit of blurring, for a softer, more natural shadow. And voilà — we have a whimsical 3D button that is accessible, works on mobile and on desktop, and is a pleasure to tap and click on. Of course, you can find the full code snippet on Josh’s blog.

CSS Charts

Perhaps you need to design a column chart, or a bar chart, or even a multi-dataset column chart or stacked columns. Where do you even start? Perhaps with Charts.css, a CSS data visualization framework that uses CSS utility classes to style HTML elements as charts.

Created by Lana Gordiievski and Rami Yushuvaev, the framework supports many chart types, has no dependencies, and is very lightweight. It also includes thorough documentation on its components and built-in chart types, plus the source code is available on GitHub (licensed under MIT). And if you need slightly more creative approaches, Preethi explains how to create CSS Charts with interesting shapes on CSS-Tricks as well.

The New CSS Reset

What do you use to normalize styles across browsers? As of recently, there were new approaches to reduce the size of the global CSS reset, and perhaps they would be good candidates for your projects as well.

With his Modern CSS Reset, Andy Bell has reduced the CSS reset to its minimum by adding box-sizing rules, removing default margins, set core root default and body defaults. Along with it Andy removes all animations, transitions, and smooth scroll for people that prefer not to see them, and has added modern properties like scroll-behavior and text-decoration-skip-ink by default.

The New CSS Reset by Elad Shechter takes a slightly more aggressive approach. Elad removes all the default styles which we are getting on specific HTML elements except the display property. Both approaches are worth looking into!

Stable Scrollbar Gutters With CSS

Ah, the good ol’ layout shifts! As Bramus Van Damme explains, one of the slightly more obscure reasons for layout shifts comes due to different types of scrollbars on the web. While overlay scrollbars on iOS/macOS are placed over the content (and aren’t shown by default), other scrollbars are placed in the “scrollbar gutter”, i.e. the space between the inner border edge and the outer padding edge.

When the content of a box becomes too large, the browser will — by default — show a scrollbar. In the latter case, it will cause a layout shift. Fortunately, this problem might be gone for good soon. Meet a shiny new scrollbar-gutter property: by setting it to stable, we can have the browser always showing the scrollbar gutter, even if the box is not overflowing.

And to keep things symmetric, we can use scrollbar-gutter: stable both-edges. The feature isn’t available yet, but coming in Chromium very soon, with other rendering engines hopefully following soon.

The Surprising Things That CSS Can Animate

When you think of animating CSS properties, which ones come to your mind? Will Boyd looked at the question from a different perspective and decided to explore the properties that don’t come to mind immediately, the ones that aren’t typically associated with animation, but turn out to be animatable.

In his post “The Surprising Things That CSS Can Animate”, Will dives deep into these unexpectedly animatable properties — and, of course, the nifty things you can do by animating them. z-index, for example, can be used for layered animations, opacity helps you fade out a modal just with CSS. A great reminder of how powerful CSS is.

Learning Resources

Learning never stops, right? Below we compiled some useful — and fun! — resources that are perfect to take your CSS skills to the next level. And if you’re already a CSS pro, there are also challenges to put your knowledge to the test. Enjoy!

CSS Vocab And Cheatsheets

You might have been there before. Just when you are working on a tight deadline, you need to look up something quickly. For CSS, you will never go wrong with CSS Tricks Almanac.

Learn Flexbox The Fun Way

What do frogs, zombies, and towers have in common? Well, they are your best friends when learning Flexbox. Because, let’s be honest: Flexbox is very powerful once you understand it, but getting there can be quite hard. So let’s make learning a bit more fun.

In the game Flexbox Froggy, you help a little frog and its friends find their lilypads by, you guessed it, writing CSS. The game consists of 24 levels that take you from the very basics of Flexbox positioning to more advanced challenges.

If zombies are more down your alley, Flexbox Zombies is for you. Each section of the game unravels part of the plot, introduces a new Flexbox concept, and presents so-called “zombie survival challenges” that help you solidify your new skills.

Last but not least, you might also want to take a look at Flexbox Defense. Inspired by tower defense games, your job is to stop incoming enemies from getting past your defenses — by positioning your towers with CSS, of course. All three games run right in your browser. Happy flexbox’ing!

CSS Grid, CSS Selectors, And Other Competitions

Do you want to take your CSS skills to the next level? These three little games help you do just that — quite literally. In Grid Garden, you’ll become the proud owner of a carrot garden. 28 levels are waiting for you in which you need to take good care of your crop with the help of CSS grid.

If you feel your CSS selectors skills could need some polishing, CSS Diner is for you. Plates, apples, pickles — in each of the 32 challenges, you’ll need to use a different CSS selector to select specific items on a table.

And if you’re up for some competition, be sure to also check out CSSBattle. In the CSS golfing game, you’ll be using your CSS skills to visually replicate targets with smallest possible code to get to the top of the leaderboard. Each of the challenges is dedicated to a specific topic like visibility, display, transition, or z-index.

Wrapping Up

Have you come across a CSS resources or technique recently that changed the way you approach a particular challenge? Let us know in the comments below! We’d love to hear about it.

Further Reading

• The Fight For The Main Thread
• How To Animate Along A Path In CSS
• Core Web Vitals Tools To Boost Your Web Performance Scores
• Sustainable Design Toolkits And Frameworks

(vf, mrn)