This article was published 1 year ago, therefore the contents of this post may be out of date.

We’ve seen some incredible resources for designers and developers throughout 2022.

The fifth roundup for “What’s New for Designers & Developers from 2022” will be what were some of the helpful and greatest general tools and resources for all who in the dev and design industries that either got released or been updated.

From CSS framework, automated pitch creation, web accessibility, tools for GitHub, CDN for Images and Videos, code editor extensions and more.

I’m excited to look forward to what the web will bring in 2023, but in the meantime, take a look back at the best general resources of 2022. Enjoy!

January

ParrotBay

Parrotbay

ParrotBay provides a unique URL that you can execute any type of HTTP requests against it. allows you to inspect your HTTP requests, design web-hooks, and mimic your entire back-end endpoints with static and dynamic JSON responses.

Guess CSS

Guess Css

Guess which code snippet of 3 produced the displayed layout!

Tailwind CSS Cheat Sheet

Tailwind Css Cheat Sheet

Get started with this free tool to view and search for all the class names and CSS properties from the world’s most popular utility-first CSS framework.

Pico.css

Pico Css

Minimal CSS Framework for semantic HTML. It contains elegant styles for all native HTML elements without .classes and it also has dark mode automatically enabled.

Modern Fluid Typography Editor

Modern Fluid Typography Editor

This is an handy tool for any front-end developer. Create and fine tune fluid typography values in your project with ease.

Uniform CSS

Uniform Css

Uniform CSS is a utility-first CSS framework and a fully configurable utility generator built for Sass. Load and configure directly in your main Sass project, and gain the power of a utility-first workflow without losing the productivity of Sass.

Pitch 2.0

Pitch.2.0

Pitch 2.0 is a fully automated pitch creation and monitoring system—so you can focus on your product and not on your deck. Connects to multiple data sources, tracks 100+ metrics about your company, and recommends the best version for each investor.

February

DevTools for Tailwind CSS

The DevTools for Tailwind CSS bring back designing and debugging in your browser. Intellisense autocompletion, full JIT support, custom configs. Right from your browser.

Minze

Minze

Minze lets you rapidly build native web components. It provides an intuitive abstraction layer around the web components API for creating encapsulated, reusable, cross-framework web components.

a11yphant

A11yphant

a11yphant teaches developers the basics of web accessibility. Learn step by step by completing short, interactive coding challenges and quizzes.

March

RepoTracker

repo tracker

RepoTracker is dashboard that lets you easily keep track of commits, issues and PRs in multiple GitHub repositories. It’s almost like a GitHub front page, all repo updates at a single glance.

Valclass CSS Framework

Valclass

Valclass accelerate the process of building a website for web developers. A utility-first CSS framework packed with classes like v-d-flex, v-pt-30px, v-text-center and v-rotate-lg that can be composed to build any design, directly in your markup.

The A11Y Project Checklist

The A11y Project Checklist

Check your WCAG compliance. This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point.

API Diff

Api Diff

API Diff helps you check changes within two versions of an API. Drag and drop or add URLS of the two files on the platform and see the modifications in the blink of an eye. If you are more comfortable with that, you can use the CLI or the Github Action.

Fonts

Fonts

Privacy-focused Google Fonts alternative.

TailGrids

Tailgrids

Ready to use Tailwind CSS UI Components, Blocks, Sections, and Templates. Choose from 300+ diverse UI components, copy-paste UI components code, and build your unique web app user-interface, landing page, website, or template faster.

CSS UI

Css Ui

Pure CSS interactive components without any JavaScript at all.

April

Unlist

Unlist

Unlist is an open source curated lists of lists. You can download the data either in JSON or CSV format. Currently available data sets are Cities, Countries, Country Codes, Languages and Timezones

Cirrus v0.7

Cirrus

A component and utility centric SCSS framework designed for rapid prototyping. Use beautiful pre-built components to bootstrap your next project and utility classes to polish your final design.

Dagger

Dagger

Dagger is a portable for CI/CD pipelines. This tool allows dev-ops engineers to build powerful pipelines quickly, then run them anywhere. Some of the benefits include: unifying dev and CI environments, testing and debugging pipelines locally and also avoid CI lock-in.

Dev Army Knife

Dev Army Knife

Dev Army Knife, a toolkit for developers to do various tasks. Whether it may be a simple QR Code generation or editing a few lines of code without the editor, the Dev Army Knife is here to help you. Inspired by the Swiss Army Knife, this toolkit includes many useful tools for developers to use in day-to-day tasks. No registration required.

Serverless Cloud

Serverless Cloud

Create zero-config back-ends with APIs, data, storage, events, scheduled tasks, secure parameters, and more. Then run front-end frameworks like React, Vue.js, Next.js, and 11ty, alongside your back-end code in a unified dev experience with instant deployments.

Open Web Advocacy

Open Web Advocacy

OWA (Open Web Advocacy) is a group of software engineers from all over the world who have come together to advocate for the future of the open web by providing regulators, legislators and policy makers the intricate technical details that they need to understand the major anti-competitive issues in our industry and how to solve them.

May

Spruce CSS Framework

Spruce Css Framework

An open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.

Empty State Designer

Empty State Designer

Don’t reinvent the wheel! Instead use pre-made empty states that will simplify your design process and free up your time. There’s variations of UX copy, illustrations, icons, styling. Which will make it easier to create professional empty states in seconds.

HyperUI

Hyperui

HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.

Flarity

Flarity

Flarity lets you manipulate your images in real-time. Use our free and easy API to speed up your site or application by caching your changes on our built-in worldwide CDN. With Auto mode, you don’t have to understand images, Flarity do it for you!

Webter

Webter

Webter makes remote access your terminal easy and convenient. Access your terminal by opening the session link provided by webter.

Loaders

Loaders

Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for React and copypasta.

June

Neon

Neon

Neon is a fully managed serverless Postgres with a generous free tier. This tool separates storage and compute, offering modern developer features such as serverless, branching, bottomless storage, and many more. And it’s open source and written in Rust.

Fetch Client

Fetch Client vSCode

Fetch Client is Visual Studio Code extension which is used to test the Rest API. It is used to test your HTTP/s requests and create test cases without any script/code.

Client Service Agreement

Client Service Agreement

This is a functional and comprehensive client service agreement for anyone including freelancers and business owners who need to create a legal relationship with clients.

In Your Face

In Your Face

In Your Face is a VS Code extension that shows you Doom ‘Ouch Faces’ that correlate to the number of errors in your code!

AWS Bootstrap

Aws Bootstrap

AWS is powerful, but hard to configure. With AWS Bootstrap you can set up a full-stack application on AWS in minutes. Just pick your favourite frameworks, connect your AWS account, and deploy!

July

Tailscale SSH

Tailscale

Tailscale SSH, now in beta, is a better way to establish SSH connections between devices in your Tailscale network, as authorized by your access controls, without managing ssh keys, and authenticates and encrypts your SSH connection using WireGuard.

Untools

Untools

Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

DNS Toys

Dns.toys

DNS toys is a free and open source DNS server that offers useful utilities such as weather, timezone conversion etc. over the DNS protocol, making it easily accessible from the command line.

SimpleDB

Simpledb

Allow you to store simple data, simpler. Get your token, and you’re good to go.

Betterforms

Betterform

Forms simply for everyone – betterform is simple and intuitive forms that just work anywhere. With a small footprint of only 1.2KB zipped, betterform will work and scale with even the most performance-minded websites. Better yet, you own your data.

Flywheel by Digger

Flywheel

Think infrastructure is hard? Try Flywheel! Simply connect your Github and AWS accounts and let Flywheel handle the rest. It will configure your infrastructure in minutes and automagically keep it always up-to-date.

Socket for GitHub 1.0

Socket

Detect and block software supply chain attacks Unlike a traditional vulnerability scanner, Socket can actually detect an active supply chain attack and help you to block it. Socket detects over 60 issues in open source code, for comprehensive protection.

August

UpToDate

Up To.date

A service that tracks versions so you don’t have to.

The Public APIs List

Apis List

The growing source for all the public APIs is empowered by the community to ensure you will get the most recent data of all possible public APIs.

Kmenu

Kmenu

As you scale, it’s a challenge to make sure the users don’t feel overwhelmed and are able to navigate the application seamlessly. That’s where command menus come in! This library allows you to easily configure and add in a command palette on your website.

GitGoat

Gitgoat

GitGoat is an open source tool that was built to enable DevOps and Engineering teams to design and implement a sustainable misconfiguration prevention strategy. It can be used to test products with access to GitHub repositories without a risk to your production environment.

Aspect

Aspect

Aspect is visual editor for react components. Convert designs into code using the Figma plugin, or sample UI from any site using Aspect’s chrome extension.

Teta CMS

Teta Cms

Teta CMS is our in-house platform that provides a CouchDB database, User authentication with social OAuth providers, Real-time subscriptions, Custom queries with Ayaya, Auto-generated docs, and an easy-to-use and responsive user interface.

UI Filler

Ui Filler

Never search for placeholders again. With UI Filler, you can design content with better placeholder text and images. It’s as easy as copy & pasting, so you can build and design faster (and better). Made with ❤️ for designers & developers.

clientDB

Client Db

clientDB is an open source in-memory database for enabling real-time web apps. Build fast, scalable apps that feel silky smooth for users.

Emoji Cloud

Emoji Cloud

Your emoji game is about to get a lot more serious. with emoji cloud, you can add vector emojis to your projects with zero configuration and a single line of code

Gamify Your Habit Tracker

Gamify Your Habit Tracker Notion

This Habit Tracker is special, because not only tracks your good habits. Also, helps you break bad habits, reach your goals and keep motivated with a gamified system.

September

System.css

System Css

System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

However, this library does not use any JavaScript and is compatible with any front-end framework of your choice.

Phyllo

Phyllo

Phyllo is a universal API pipe that helps developers get access to creator-permissioned data across multiple platforms. This data can be used to power critical use cases in industries such as influencer marketing, financial services, creator tools and Web3.

SurrealDB

Surreal Db

SurrealDB is an end-to-end cloud native database for web, mobile, serverless, jamstack, backend, and traditional applications. This reduces the development time of modern applications by simplifying your database and API stack, removing the need for most server-side components, allowing you to build secure, performant apps quicker and cheaper.

Media Query Style

Mediaquery Style

If you are really like me. You will often know which media query to reach for but just can’t quite remember the syntax. This site lists popular media queries with a handy copy button for code the snippet you need.

kmenu

Kmenu

A library to help you give your users a refined, accessible and faster website navigation experience.

Tailwind CSS Cheat Sheet

Tailwind Components Tailwind Css Cheat Sheet

Find quickly all the class names and CSS properties with this interactive cheat sheet. The only Tailwind CheatSheet you will ever need!

October

RefactorJs

Refactorjs

RefactorJs is a platform where you can share code examples and receive feedback in the form of refactored versions.

Token CSS

Token Css

Token CSS is a new tool that seamlessly integrates Design Tokens into your development workflow. Conceptually, it is inspired by tools like Tailwind, Styled System, and many CSS-in-JS libraries that provide tokenized constraints for your styles—but there’s one big difference.

AskEdith

Ask Edith

AskEdith is an AI English-To-SQL translator that can speed up the analytics process for beginners and experts alike. Ask your data questions directly, and share your results in graph or CSV format. Works with CSV, Google Sheets, Airtable, and SQL databases.

UI Foundations Kit

Ui Foundations Kit

UI Foundations Kit provides 64 well-designed, copy-and-paste-able React components that work seamlessly with MUI v5. Build your next app without worrying about layouts or CSS, and tweak whatever you want.

Lightning CSS

Lightning Css

An extremely fast CSS parser, transformer, bundler, and minifier written in Rust.

November

Turbo

Turbo

Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.

WunderGraph

Wunder Graph

A secure open-source platform thats allows your build, manage, and integrate APIs for web and mobile applications. WunderGraph provides out of the box authentication, functions, databases, storage, subscriptions, and more with a focus on developer experience.

a17t

A17t

a17t is a Tailwind CSS plugin that provides atomic components like field, button, and card in a neutral design language that scales with your project.

Remix

Remix

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

Fallback Font Generator

Fallback Font Generator

Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.

Randoma11y

Randoma11y

Use this tool to generate random accessible color palettes.

Slides

Slides 6

Slides is a static website generator which you can use to create beautiful, animated websites within minutes. Just select layouts from a collection of templates and publish with clean code.

Instaprice

Instaprice

Instaprice is a helpful service that shows what other freelancers charge for the job you are quoting on. Earn the actual market rates and never get caught out undercharging again!

December

kickstartDS

Kickstartds

A low-code framework and comprehensive component library enabling digital teams to create consistent and brand compliant web frontends super efficiently.

Design Principles

Design Principles

An open source collection of Design Principles and methods.

Tailscan for Tailwind CSS

Tailscan

Tailscan is the ultimate developer tool for Tailwind CSS. Build and design your Tailwind website visually, right within the browser. You can also debug your website visually in seconds and check how other websites using Tailwind CSS are built.

Stylify

Stylify Css

Stylify is a library that uses CSS-like selectors to generate utility-first CSS dynamically based on what you write. It also brings features like components, custom selectors, variables, helpers and etc.

Atomizer

atomic

Atomizer is an unopinionated CSS utility library for modern websites. Just add classes like D(f) and Fz(1.5rem) to your markup to efficiently style your website.

Marten

Marten Framework

Marten is a Crystal Web framework that enables pragmatic development and rapid prototyping. It provides a consistent and extensible set of tools that developers can leverage to build web applications without reinventing the wheel.

Microsoft PowerToys

Microsoft Powertoys

Microsoft PowerToys is a collection of tools that help you to be more productive, some of the utilities highlighted: Always on Top, Image Resizer, Color Picker, Text Extractor from image, File Explorer Add-ons and more.

Retool Workflows

Retool Workflows

Retool Workflows is a fast way for developers to create cron jobs, custom alerts, and ETL tasks. Stop provisioning infrastructure and maintaining one-off scripts—focus on the code that matters.

Share

What’s New for Designers & Developers from 2022: Tools & Resources