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 is the simplest tool to quickly create professional documentation for your projects. It’s fast, and it’s free.
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 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 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.
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 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.
Radzen Blazor Components is a free and open source set of 60+ native Blazor UI controls.
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 is an open source growing collection of layout blocks and components built with Tailwind CSS V2 ready to copy paste on your Tailwind project.
An easy to understand overview of the Scrum framework via a set of portable study cards covering everything you need to know about Scrum.
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
An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need.
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 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.
Start your web project by generating and downloading your custom HTML Boilerplate.
Minimal snippets for modern CSS layouts and components
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, 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 for Slack is a time-saving tool for distributed teams. The bot facilitates daily scrum meetings or any other recurring status meetings.
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
Start creating your app with clean mind and clear representing of screen structure with these free printable templates for your sketching.
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.
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.
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 for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
Tiny tips, tricks & best practices for front-end development
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 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
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.
Done reading all about UX? Well now you should put your UX knowledge to work with these real-world exercises.
Quick Snippets from Twitter.. So discover new programming tips easily.
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.
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
Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.
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.
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.
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.
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.
Free and Open Source UI Library for Vue 3
July’s Top Picks
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 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 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.
Reduce your origin traffic by up to 95% with our GraphQL edge cache and never worry about scaling again.
A collection of UI Snippets. Simply right click the animation to copy the styling.
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.
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.
100+ UI blocks for Developers, Agencies, Startups, Marketers, & Designers to create beautiful websites & landing pages.
August’s Top Picks
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.
Design illustrations, patterns, icons, and more using a feature-packed editor with layering, design tools and free cloud storage.
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 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.
Create your ideal layout in seconds with this handy online tool.
September’s Top Picks
Why overpay for managed databases? Hippobase makes it easy to self-host open source tools like Postgres, MySQL, MongoDB, Redis and others.
Manim is a community-maintained Python library for creating mathematical animations.
Wicked Backgrounds is a free web app for generating nice wave gradients that you can use for your designs.
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 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 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 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
A look at how the W3C’s design system is structured. You can even download templates for use in your own projects.
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 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.
Search micro UX copy text: slogans, headlines, notifications, CTA, error messages, email, account preferences, and much more.
Made for any language, for projects big and small. Railway is the cloud that takes the complexity out of shipping software.
Figsplosion let’s you blow off steam by literally blowing up your Figma designs!
November’s Top Picks
Use less line of code while having the same result! Support for your favorite frameworks, no configuration required, and new frameworks added daily.
A simple yet powerful command-line HTTP and API testing client for the API era.
A fully functional local AWS cloud stack. Develop and test your cloud & Serverless apps offline!
Collection of cheat sheets for popular programming languages along with links to download the cheat sheets.
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.
Learn how to make designs accessible to those with color blindness.
Lorem.space generates random placeholder images for your design layout in useful categories and custom sizes.
Track My Domains helps domain investors track all their domains in a single place without going to multiple domain registrars.
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 test is here for you to test your programming knowledge to play quiz on different programming languages.
Ghost is a lightweight plugin that converts high fidelity mockups to loading or “skeleton” screens.
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 is a way to embed contributor analytics into your GitHub project’s README.md. With Repobeats, contributors and users of your projects get a clear, beautiful, view of how your project is evolving over time.
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.
A small project debunking common accessibility myths.
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 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 is a friendly introduction to digital accessibility based on WCAG 2.1 (Web Content Accessibility Guidelines).
Curated tools library by design. Speed up your workflow with the library. More than 100 templates, free, trial and paid.
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 is just another WordPress generator, this time completely free for everyone. Great UX/UI is what makes it n1 in WordPress development.