We’ve come across extraordinary resources for designers and developers throughout the year 2023.

The fifth installment of “What’s New for Designers & Developers from 2023” will spotlight some of the most valuable and exceptional general tools and resources catering to individuals in the development and design industries. These encompass a wide range of tools, including style library, VS code extensions, modern UI and UI libraries, programming documentation, managing data and it’s bases. New CMS, CLI, Git tools and many more assorted web tools and resources.

While eagerly anticipating the innovations the web will unveil in 2024, let’s take a moment to revisit the standout general resources of 2023. Enjoy the retrospective!

January

Tamagui

Tamagui is your new favorite style library. It makes cross-platform React styles much faster – both to develop, at runtime. Featuring a novel optimizing compiler that turns styled components into clean CSS and minimal VDOM, using tree-flattening.

Hyper Fetch

Ultimate framework for data exchange and asynchronous state management. Take advantage of caching, queuing, persistence, offline first support, request deduplication, authentication, progress tracking, architecture guidelines and more!

Markwhen

Have a text-based calendar right in VS code. Supports timeline, calendar, and map views, as well as markdown-style images and nested groups.

SpellCheck

Say goodbye to typos in your Figma designs with SpellCheck, the best plug-in for spell-checking. Multiple languages supported. Grammar, white-spacing mistakes and ‘lorem ipsum’ detection. Keep your writing clear and mistake-free with this must-have tool.

Appshots

Appshots is a curated collection of the best design patterns found across mobile apps. With thousands of screenshots (of iOS apps) categorised and organised by app, you can easily find the best pattern for your next project. Currently it’s limited to iOS apps. Android and web apps are on the way.

CodeImage

CodeImage is an application that allows you to manage your code snippets and beautify them quickly to share it everywhere. CodeImage is an open source side project born thanks to the SolidJS hackathon and it’s currently maintained

February

Sailboat UI

Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open-source Tailwind CSS components, and make it easy to build your products.

Open Devdocs

Open Devdocs is programming documentation that anyone can edit. By users, for users — with tons of examples and clear explanations. It’s like a combination of Wikipedia and Stack Overflow, built for developers who read the docs dozens of times per day and need something hyper-optimized for them.

Argos

Developer-first visual testing platform. Say goodbye to pesky visual bugs and hello to seamless pull request reviews. Argos makes installation a breeze with CI integration and testing framework plugins. Argos works with all stacks.

UI Content

UI Content is Lipsum alternative, the perfect solution for UI designers looking to add engaging and meaningful content to your projects.

DummyJSON

Get dummy/fake JSON data to use as placeholder in development or in prototype testing.

Disclaimer Generator

A disclaimer generator tool is a great tool for website and app owners, as it allows them to easily create a disclaimer for their website or app. This is especially important for website and app owners.

Gluon

A framework that let’s you develop desktop apps from websites, using system installed browsers and NodeJS.

March

UI Guideline

UI Guideline is the handbook that every UI Designer/Developer should include in their workflow. Through synthesizing all the wisdom of the most popular Design Systems and UI Libraries in one place, it makes your work easier and shortens your research time.

Outerbase

Outerbase is an easy way to manage your data on Postgres, MySQL, and other relational databases. Using SQL or EZQL, our GPT-3 based plain text to SQL generator, users can come in and easily edit, view, query, and visualize their data all in one place.

NextCron

NextCron is your one-stop solution for managing asynchronous jobs in NextJS serverless applications. With just a few clicks, you can configure and schedule jobs that fit your unique needs. Experience seamless and reliable job management today with NextCron.

Windstatic

A free collection of aesthetically designed elements & layouts made with Tailwind CSS and Alpine.js ready to copy n’ paste into your next project!

Clack

Building interactive command line applications doesn’t have to be so hard. @clack/core provides unstyled, feature-rich components designed to be a strong foundation for your custom CLIs.

Learndevs

Learn the fundamentals of web development and built beautiful user interfaces. Join our community of learners and help each other grow together.

Usecue CMS

Turn your code into a CMS and create the perfect customer experience for your Hugo website. Made possible by our integrated hosting solution.

April

Modern Font Stacks

System font stack CSS organized by typeface classification for every modern operating system.

Relume Ipsum

Generate website copy quickly and easily using AI, all without leaving Figma. → Instantly generate copy based on templates & components → Lock copy you want to keep and the AI will write the rest with context → Improve existing copy with prompts in Figma

Bearer CLI

Bearer CLI is a free, open-source command-line tool to help developers secure their code. It analyses source code against common security risks and vulnerabilities and provides a direct output in a terminal with the right context to fix them quickly.

May

CSS To Tailwind

Convert CSS code to Tailwindcss syntax in real time.

Lucia

Lucia is a simple and flexible user and session management library that provides an abstraction layer between your app and your database. It’s bare-bones by design, keeping everything easy to use and understand.

Fradict

Fradic provides accurate and up-to-date information through extensive collections of definitions, and contextual examples, as well as keyboard shortcuts so you can build a website faster using framer. Perfect for beginners and experts.

Genie for Figma

Genie is a powerful Figma plugin that uses OpenAI’s API to generate and improve text content, translate text, generate images, and save AI responses for later use. With Genie, you can get creative and streamline your workflow, all within Figma.

Gut

Gut is an easy-to-use git client for Windows, Mac and Linux. It is designed to be simple and intuitive, but also powerful and flexible. Gut is built with Golang which makes it fast and lightweight.

June

Strawberry

Strawberry is a tiny frontend framework that gives you reactivity and composability. It does this with zero-dependencies, without a build step, and it fits in less than 3KB when gzipped.

Typography Manual

A set of rules that will improve your typography 10x.

Lighthouse Metrics

Lighthouse Metrics makes it easy to measure your website’s performance. Run one-time tests from anywhere in the world, or monitor your page from a specific region over time.

BARF

BARF is a small and unobtrusive framework for building JSON-based web APIs on REST or GraphQL-based architectures. It is implemented such that getting started is easy and quick, but it is also flexible enough to allow for more complex use cases.

Damn Good Tools

DamnGood.Tools is a set of productivity tools, not necessarily AI-based. You can detect fonts for any, quickly render screenshots of your site in many dimensions, chat with any PDF file, and more.

July

Flexer

Flexer is a CSS Flexbox playground, offering a nice and clean interface, that could help you position your elements better.

Panda

Panda is a styling engine that generates styling primitives to author atomic CSS and recipes in a type-safe and readable manner.

Panda combines the developer experience of CSS-in-JS and the performance of atomic CSS. It leverages static analysis to scan your JavaScript and TypeScript files for JSX style props and function calls, generating styles on-demand (aka Just-in-Time).

GQL: Git Query Language

GQL is a query language with a syntax very similar to SQL with a tiny engine to perform queries on .git files instance of database files, the engine executes the query on the fly without the need to create database files or convert .git files into any other format, note that all Keywords in GQL are case-insensitive similar to SQL.

DevTools

DevTools is a free, online utility suite crafted for developers. Offering practical, fast, and easily accessible tools. Personalise your experience, work offline, and explore related utilities. Crafted with care for your everyday dev tasks.

Bootstrap IntelliSense

Bootstrap IntelliSense: Effortlessly enhance your Bootstrap development in Visual Studio Code with CSS class autocompletion. Save time, minimise errors, and simplify your workflow for a more efficient and effective coding experience.

NoDB

Nodb simply utilises REST API to store your app data in JSON format to the cloud. There is no dependency installation to your project. Ideal for serverless applications.

Pines

Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It’s a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.

Rewind UI

Rewind-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. The components was designed to be flexible and easy to use, so you can focus on what matters most: building great user experiences.

Brutopia

Introducing the remarkable “Brutopia” bootstrap theme, a captivating blend of readability and neo-brutalist design principles.

Vlad

This represents a unique adaptation of Dracula’s authentic theme, tweaked to exude a darker ambiance. I’ve further customised some JavaScript/TypeScript configurations and italic elements to suit my personal preferences.

Firefox Monitor

Stay safe with privacy tools from the makers of Firefox that protect you from hackers and companies that publish and sell your personal information.  Firefox will alert you of any known data breaches, find and remove your exposed info and continually watch for new exposures.

August

pkg-size

Find the true size of an npm package.

htmx

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

It’s small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react.

goastVS

goastVS is a free VS Code extension. Use the tool to fix bugs, integrate external libraries, and automate coding tasks right in VS Code. The model will output a series of steps that satisfy the prompt and use a single click will generate diffs for each step.

Serverless Icebreaker

Serverless Icebreaker not only assists you in identifying potential performance issues early in the development cycle but also enables common understanding in teams about AWS Lambda’s performance characteristics.

Free Domain Alerts

Monitor up to 20 domains for Domain and SSL expiration alerts, as those dates get closer we will let you know in a more and more urgent way.

Any App Finder

Quickly find and insert App store icons into Figma.

Web Check

Gain valuable insights into the internal workings of any website: discover potential vulnerabilities, analyze server architecture, review security configurations, and identify the technologies employed on the site.

The current dashboard provides a comprehensive display of essential information, such as IP details, SSL chain, DNS records, cookies, headers, domain information, search crawl rules, page mapping, server location, redirect history, open ports, traceroute data, DNS security extensions, site performance metrics, trackers, associated hostnames, and even the site’s carbon footprint.

Design Systems

Design Systems is a Figma plugin that helps designers quickly create grid layouts within frames. It simplifies the process of setting up grid structures, allowing users to define the number of rows and columns and automatically generating the layout.

Ampier Email Template Generator

Ampier is the plugin for Figma that will transform your design into clean and responsive HTML and AMP code versions! Export production ready code to your ESP that works for all common email clients, including Gmail, Apple Mail, Outlook, and others.

September

CSS Selectors: A Visual Guide

This guide serves as your map, detailing and visualizing these essential selectors.

Maily.to

Maily is a free and open-source editor that makes it hassle-free to craft beautiful emails. It comes with a set of pre-built components and opinionated design that you can use to build your emails.

Code Snippets Manager

A Notion template designed for developers. Organize, access, and manage code snippets effortlessly. Streamline your workflow and find your code in a snap.

Mailwind

Mailwind is a simple and easy-to-use API that lets you send powerful and transactional emails with responsive and customizable Tailwind CSS templates.

WebGlossary

WebGlossary is a glossary primarily focused on web development, but extending to many related fields. It is based on the living book The Web Development Glossary by Jens Oliver Meiert (Frontend Dogma). It currently includes 3,591 entries, some of which have several meanings.

Dotsync

Dotsync is a small, free, open-source and blazingly fast dotfiles synchronizer!

OpenStatus

OpenStatus is an open source alternative to your current monitoring service with a beautiful status page.

Doccot

A single source of truth for design documentation that is shared across design, product, development, marketing, sales and even management. With Doccot’s Figma Plugin, the process is fast and effortless, helping designers take their work to the next level.

The UX Cookbook

Handcrafted recipes to get you started with everything UX — user research, design, usability testing, and more.

October

Classyfont

The Ultimate font-face CSS Generator with customization ease. Say goodbye to manual CSS, save time, and enhance web development with real-time previews. Empowering your fonts has never been easier!

Bolt SQL

A database client should be beautiful, run fast, and be simple to use. Bolt SQL uses end-to-end encryption to encrypt your credentials and tracking-free (no 3rd analytics).

Figma Guide to Handoff

Use this step-by-step guide to prep your Figma design files for developer handoff. This guide covers everything from file organization to documentation and collaboration. Follow these guidelines to improve your handoff process and reduce misunderstandings between teams.

Cookie Chimp

AI-driven cookie management platform. Auto-scan, categorise, fill missing info, and generate dynamic policies. Streamline user consent effortlessly.

Static

A static site generator you’re going to love. No more complicated configs or bloated frameworks. – Static is easy. – HTML is easy. – Yet, somehow we lost the art of crafting simple Static HTML websites No longer will this stand. Say hello to Static!

Specfy

Always up-to-date infrastructure graph and stack documentation. All your production insights in one platform, built for the DevOps and Technical Leader.

BuildShip

Create powerful APIs, schedule jobs, backend tasks with BuildShip. Connect together any AI model, pre-built workflow nodes, or generate one with AI. Tweak with code (if needed), and deploy instantly in one click. Experience the new way to build & ship!

November

Protomaps

Protomaps is an open source map of the world, deployable as a single static file on cloud storage.

Componly

Componly provides design system teams with the means to efficiently oversee and control their components. It delivers an extensive range of capabilities, such as component visualisation tools, customisable component tracking, in-depth reporting, and enlightening analytics.

Rspress

Rspress is a static site generator powered by Rspack and rendered using the React framework.

It features a pre-designed documentation theme that enables you to swiftly create a documentation site. Additionally, you have the flexibility to tailor the theme to suit your specific static site requirements, whether for blogs, product homepages, and more.

Moreover, you can seamlessly incorporate official plugins to effortlessly construct component library documentation.

Gitignore

Effortlessly generate and regenerate .gitignore files from the command line using the github/gitignore templates.

JSONsilo

Streamline JSON file management effortlessly with JSONsilo. Store, access, and share your JSON files with ease.

CSS Size Analyzer

Analyze CSS size and catch bloat like embedded images or fonts. After running this tool, check if there are any large CSS rules that stand out. If there are a large number of smaller selectors this is harder to optimise.

Blazy

Blazy revolutionises animation within Figma prototypes through a one-click solution, catering to the needs of UX/UI Designers and presenters alike. It provides advanced control, over 40 animation presets, triggers, keyframe management, customisable properties, and the ability to access CSS/React code in Dev Mode.

NeoBrutalismCSS

lightweight and minimalist CSS library inspired by the principles of neo-brutalist web design. It provides a set of simple and modular CSS classes to help you create brutalist-style web pages with ease.

Nuxt UI

Nuxt UI simplifies the creation of stunning and responsive web applications with its comprehensive collection of fully styled and customizable UI components designed for Nuxt.

Pivotlar

Pivotlar offers the ultimate solution for simplifying WordPress hosting management. With Pivotlar, provisioning your Virtual Private Server (VPS) on your preferred cloud service and setting up multiple WP sites becomes as easy as a single click. Bid farewell to the time-consuming process of VPS configurations and let Pivotlar take care of everything, ensuring your website is live within minutes.

But that’s not all – Pivotlar seamlessly integrates with your Cloudflare account, facilitating swift DNS configuration to make your site accessible in no time. Furthermore, we provide effortless SSL installation, guaranteeing secure browsing for your visitors.

December

SSHx

SSHx enables you to share your terminal via a link on a collaborative infinite canvas. Experience real-time collaboration with features like remote cursors and chat.

This fast and secure tool employs end-to-end encryption and runs on a lightweight Rust-based server. Install SSHx effortlessly with a single command and utilise it for teaching, debugging, or accessing the cloud.

AuthKit

AuthKit is a pre-built, customisable sign-in UI hosted by WorkOS. It comes equipped with support for various authentication methods right from the start, allowing developers to deliver an exceptional signup experience effortlessly.

TanStack Form

Put an end to your form-related frustrations and embrace simplicity, composability, and type-safety with TanStack Form. This solution boasts a minimal footprint, lacks dependencies, features a framework-agnostic core, and offers precise type-safe APIs. TanStack Form strikes the ideal balance between simplicity and power, providing you with the tools needed to swiftly build forms with confidence.

Ark UI

Ark UI is a headless, open-source UI library that encompasses more than 30 components explicitly crafted for constructing reusable and scalable Design Systems. It accommodates a diverse array of JavaScript frameworks and provides specialized packages tailored for each supported framework.

Bun Nook Kit

Bun Nook Kit (BNK) is a comprehensive toolkit for software development. Leveraging the power of Bun and TypeScript. With zero third-party dependencies, strong TypeScript inferencing. And a focus on Web API standards, BNK offers a modular, type-safe, and efficient way to build robust applications.

Terminal Keeper

This extension is crafted to enable users to store and organize their terminal sessions. With Terminal Keeper, users can effortlessly save and retrieve past terminal sessions, create new sessions, and edit or delete existing ones. Terminal Keeper simplifies the management of terminal sessions in VSCode, providing a more convenient and streamlined experience.

UI Table Builder

Customise your tables with custom shadows, borders, and more – it’s like giving your tables a makeover! Achieve striped rows, highlighted headers, and pixel-perfect columns effortlessly. Plus, we’ve got a magic button that generates HTML and Tailwind CSS code for you!