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!
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 which code snippet of 3 produced the displayed layout!
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.
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.
This is an handy tool for any front-end developer. Create and fine tune fluid typography values in your project with ease.
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 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.
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 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 teaches developers the basics of web accessibility. Learn step by step by completing short, interactive coding challenges and quizzes.
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 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.
Check your WCAG compliance. This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point.
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.
Privacy-focused Google Fonts alternative.
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.
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
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 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, 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.
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.
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.
An open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.
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 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 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 makes remote access your terminal easy and convenient. Access your terminal by opening the session link provided by webter.
Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for React and copypasta.
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 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.
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 is a VS Code extension that shows you Doom ‘Ouch Faces’ that correlate to the number of errors in your code!
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!
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.
Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.
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.
Allow you to store simple data, simpler. Get your token, and you’re good to go.
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.
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.
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.
A service that tracks versions so you don’t have to.
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.
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 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 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 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.
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 is an open source in-memory database for enabling real-time web apps. Build fast, scalable apps that feel silky smooth for users.
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
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.
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.
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 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.
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.
A library to help you give your users a refined, accessible and faster website navigation experience.
Find quickly all the class names and CSS properties with this interactive cheat sheet. The only Tailwind CheatSheet you will ever need!
RefactorJs is a platform where you can share code examples and receive feedback in the form of refactored versions.
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 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 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.
An extremely fast CSS parser, transformer, bundler, and minifier written in Rust.
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 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 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.
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Use this tool to generate random accessible color palettes.
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 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!
A low-code framework and comprehensive component library enabling digital teams to create consistent and brand compliant web frontends super efficiently.
An open source collection of Design Principles and methods.
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 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 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 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 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 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.