Welcome to the fifth of my yearly round of the “What’s New for Designers & Developers for 2021”.

Today’s post roundup will be showing you what were some of the best and greatest dev tools to productivity to a little bit of other web resources that either got released or been updated during 2021.

Not every tools and resources that been featured in each of my roundups will be featured in today’s post, as I feel that this list could be enormous. So let’s get in to it.

January’s Top Picks

SidePage

SidePage is the simplest tool to quickly create professional documentation for your projects. It’s fast, and it’s free.

Domain Mapper

Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains.

Devbook

Devbook is a new kind of search engine made just for developers. A single input that allows you to search in StackOverflow, documentation, code, infrastructure, and 3rd-party tools that you and your team are using.

Radix UI

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

Hotwire

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.

Radicle

Radicle is a peer-to-peer stack for code collaboration . It enables developers to collaborate on code without relying on trusted intermediaries.

February’s Top Picks

GitLive

GitLive adds a real-time layer for teams of developers. Pair program with your team members with one click, see which issues and repositories they are working on in real-time, see their working copy changes and copy over any of their uncommitted code you might need.

Blazor Component Library

Radzen Blazor Components is a free and open source set of 60+ native Blazor UI controls.

CodeLighthouse

CodeLighthouse catches errors in your application in live time and notifies you when they occur. We found coming through logs tedious, so we came up with an automated solution.

With detailed logs and application state information, you and your developers will be able to fix bugs quickly and easily before they become big problems for users.

Wickedblocks

Wickedblocks is an open source growing collection of layout blocks and components built with Tailwind CSS V2 ready to copy paste on your Tailwind project.

Scrum Study Cards

An easy to understand overview of the Scrum framework via a set of portable study cards covering everything you need to know about Scrum.

Flagpack

Have over 260 stunning flag icons for your digital product. This pack is an open source flag icons to use in your design tool or in your code project

Bootstrap 5 CheatSheet

An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need.

Flexbox Guide

A Guide for the concept of Flexbox and responsive design. Set the attributes as needed and copy the CSS code.

March’s Top Picks

Tailwindize

Tailwindize turns any given color into one from the default Tailwind CSS color palette. This allows you to transform any existing design into one using the Tailwind colors.

HTML Boilerplates

Start your web project by generating and downloading your custom HTML Boilerplate.

SmolCSS

Minimal snippets for modern CSS layouts and components

Bamboo CSS

A classless CSS library which adds nice default style for all HTML elements. It saves you a lot of time when you need to style HTML for your HTML/React/Vue demo on CodePen/CodeSandbox. It can also be used as a base style for your blog/website.

Hackertab.dev

Hackertab, a handy extension to help developers stay up-to-date with the latest tech happenings. It’s fully customizable, for frontend, backend, full-stack, mobile, data scientists for all developers.

StandupBuddy

StandupBuddy for Slack is a time-saving tool for distributed teams. The bot facilitates daily scrum meetings or any other recurring status meetings.

Reseter.css

Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all the premade styles by the browser. It normalizes the browser’s stylesheet for a better cross-browser experience.

April’s Top Picks

Printables

Start creating your app with clean mind and clear representing of screen structure with these free printable templates for your sketching.

Awesome Viewer

The Awesome lists on GitHub are great, but it’s hard to know which projects are actively maintained and sift through them all easily. I built this tool to help me visualize and query all of the cool resources people put together.

Cookie Though

With Cookie Though you can ask users for consent without sacrificing usability and in a GDPR compliant way. And the best part? It’s open source.

Cheat Cheetah

Build products faster,  startups need to move quickly & learn faster. Cheat Cheetah is the largest marketplace of curated, free cheatsheets built by leaders in startups, engineering & growth. It’s 100% free forever.

Awesome Cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

Frontend Tips

Tiny tips, tricks & best practices for front-end development

Encore

Encore is the fastest way to build backends. With the Encore platform, you can jump straight to building customer value and do not need to think about infrastructure or configuration.

SSizes

SSizes is an app that will detect and tell you the exact and right image sizes to use whenever you want to upload or post images and videos on your social account. We are here to ensure that we will make your social media dream come through.

May’s Top Picks

Web Interface Handbook

Here is a book about the fundamentals of creating a good web interface. You’ll find out how to make effective forms, typography, grids, and many other components of web design.

UX Challenges

Done reading all about UX? Well now you should put your UX knowledge to work with these real-world exercises.

QuickSnippets

Quick Snippets from Twitter.. So discover new programming tips easily.

Visual Testing Handbook

Visual testing is a pragmatic yet precise way to verify the look of UI components. It’s practiced by companies like Slack, Lonely Planet, and Walmart. This handbook gives you an overview of visual testing in Storybook.

Monito

Observe network requests, user interaction events, navigation, and console logs in one place. Easily export all the logs in a single archive. Take screenshots and record your screen without any additional software. Works in Chromium-based browsers.

June’s Top Picks

Vanilla Extract

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

Codefile

Codefile is a web app to share code in real time with other developers. It allows you to create collaborative code files for your technical interviews, pair programming, teaching, etc.

Helsinki Design System

The open-source design system for digital products and experiences with the City of Helsinki Design Language at its heart. The Helsinki Design System is focused on usability and accessibility and aims to improve the quality and consistency of City of Helsinki digital services – making the user experience better for everyone.

Ready UI

200+ UI blocks for Developers, Agencies, Startups, Marketers, & Designers to create beautiful websites. Production-ready bootstrap code with well-organized figma files to design and develop your next websites faster.

Mentor for Figma

This plugin offers a comprehensive library of design thinking methodologies, allows you to set up your design file, prepare for a design review with slide templates, and gives you an insight into the meeting structure of a genuine product design team.

htBuild

htBuild allows you to use components & variables right in your HTML, no need to write any javascript just use htBuild, the NextGen HTML!

Vuestic

Free and Open Source UI Library for Vue 3

July’s Top Picks

GitHub Copilot

GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. It draws context from comments and code, and suggests individual lines and whole functions instantly.

Being powered by OpenAI Codex, a new AI system created by OpenAI. The GitHub Copilot technical preview is available as a Visual Studio Code extension.

Tinter

Tinter is tiny web tool to generate color variation of images. tool also generate monochrome colors of images with multiple variants, without hampering the quality of image.

Code House

Code House is the all-in-one storehouse for developer cheatsheets. Made up of 300+ curated cheatsheets from 230+ sources. Filter by categories or source, sort by time or popularity, dark mode, bookmarking, add new cheatsheets, request feature, and much more.

GraphCDN

Reduce your origin traffic by up to 95% with our GraphQL edge cache and never worry about scaling again.

UI Snippets

A collection of UI Snippets. Simply right click the animation to copy the styling.

The Button Cheat Sheet

Do you need a button for your next project but you’re not sure about the right markup? Don’t worry, The Button Cheat Sheet has got you covered.

TailwindCSS Buttons

A copy & paste collection of TailwindCSS buttons. Browse through this collection of awesome and unique buttons and use them in any of your upcoming or exiting TailwindCSS project.

Frontendor UI

100+ UI blocks for Developers, Agencies, Startups, Marketers, & Designers to create beautiful websites & landing pages.

August’s Top Picks

The New CSS Reset

The New Simple and Lighter CSS Reset. This CSS reset is built from the understanding we don’t want to use the default style we are getting from the browsers, except the ‘display’ property.

This CSS reset removes all the default styles which we are getting on specific HTML elements except the ‘display’ property, as I already mention, and except special HTML elements like iframe, canvas, img, svg, video.

Gradient Editor

Design illustrations, patterns, icons, and more using a feature-packed editor with layering, design tools and free cloud storage.

Access Guide

Hello! Access Guide is a friendly introduction to digital accessibility – specifically to help understand WCAG 2.1 (Web Content Accessibility Guidelines), the official resource for legal compliance.

Liveblocks

Liveblocks is a set of APIs that helps you create performant and reliable collaborative experiences. With Liveblocks, you can make anything collaborative in minutes so that you can give your core product the attention it deserves.

CSS Layout Generator

Create your ideal layout in seconds with this handy online tool.

September’s Top Picks

Hippobase

Why overpay for managed databases? Hippobase makes it easy to self-host open source tools like Postgres, MySQL, MongoDB, Redis and others.

Manim

Manim is a community-maintained Python library for creating mathematical animations.

Wicked Backgrounds

Wicked Backgrounds is a free web app for generating nice wave gradients that you can use for your designs.

Apache Config Generator

ApacheConfig.live helps you get your Apache2 Configuration Live in an easy manner. simply fill in the form and the code is generated for you on the right. If you need help with the server slide, then click the SSL and HTACCESS information button on the resource site.

Framestack

Framestack is a collection of tools/libraries/frameworks you’ll probably need to start building your next idea and turn it to a reality, it is open source and anyone can contribute by adding new features or by simply adding their favorite tools.

Berowra

Berowra is an open source CMS for hobbyists and small buisnesses that enables them to start building on top of their content in just three minutes. It comes with an API, file hosting, Markdown support and more! At the moment it’s in beta on Deta Space!

The Design Quiz

The Design Quiz is the place for you to test your User Experience, User Interface and Graphic Design knowledge — plenty to learn from. Do you know how many principles of good design Dieter Rams has defined? Or when the first GUI prototype was created?

October’s Top Picks

W3C Design System

A look at how the W3C’s design system is structured. You can even download templates for use in your own projects.

Mechanic

Mechanic is an open source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser.

Papyr CMS

Papyr CMS is an easy-to-use, easy-to-extend content management system built on the NextJS React framework. It is designed around a number of free-but-scalable services that exist to help you get started and grow including Heroku, Cloudinary, and Stripe.

Microcopy

Search micro UX copy text: slogans, headlines, notifications, CTA, error messages, email, account preferences, and much more.

Railway

Made for any language, for projects big and small. Railway is the cloud that takes the complexity out of shipping software.

Figsplosion

Figsplosion let’s you blow off steam by literally blowing up your Figma designs!

November’s Top Picks

HeadSwift

Use less line of code while having the same result! Support for your favorite frameworks, no configuration required, and new frameworks added daily.

HTTPie for Terminal

A simple yet powerful command-line HTTP and API testing client for the API era.

LocalStack

A fully functional local AWS cloud stack. Develop and test your cloud & Serverless apps offline!

The Ultimate Cheatsheets

Collection of cheat sheets for popular programming languages along with links to download the cheat sheets.

Microcopy Ideas

The aim of the project is to collect microcopy and give you the ability to empathise in the term of the small bits of copy UI. It provides useful tips, examples, and practical guidelines that have been gathered over many years and have been collected by its users.

Colorblind Accessibility Manifesto

Learn how to make designs accessible to those with color blindness.

Lorem.Space

Lorem.space generates random placeholder images for your design layout in useful categories and custom sizes.

Track My Domains

Track My Domains helps domain investors track all their domains in a single place without going to multiple domain registrars.

Notifee

Notifee enables developers to rapidly build rich notifications with a simple API interface, whilst taking care of complex problems such as scheduling, background tasks, device API compatibility & more. It’s compatible with both Android and iOS.

Programming Quiz

Programming quiz test is here for you to test your programming knowledge to play quiz on different programming languages.

Ghost

Ghost is a lightweight plugin that converts high fidelity mockups to loading or “skeleton” screens.

Laws of UX

Laws of UX is focused on making complex psychology heuristics accessible to more designers through an interactive resource that collects those that are relevant to user experience design.

December’s Top Picks

Repobeats

Supabase

The Open Source Firebase Alternative Create a backend in less than 2 minutes. Start your project with a Postgres Database, Authentication, instant APIs, realtime subscriptions and Storage.

A11y Myths (Accessibility Myths)

A small project debunking common accessibility myths.

Animockup 2.0

Animockup is a web-based tool that helps you create animated mockups for your product teasers. Add gradient backgrounds, browse through 20+ mockups, customize the export settings, and much more.

Tekton

Tekton is a powerful and flexible open-source framework for creating CI/CD systems, allowing developers to build, test, and deploy across cloud providers and on-premise systems.

Access Guide

Access Guide is a friendly introduction to digital accessibility based on WCAG 2.1 (Web Content Accessibility Guidelines).

Tool Library by Uiscore

Curated tools library by design. Speed up your workflow with the library. More than 100 templates, free, trial and paid.

Layout patterns

A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.

Brewpy

Brewpy is just another WordPress generator, this time completely free for everyone. Great UX/UI is what makes it n1 in WordPress development.