Throughout 2024, we’ve encountered an array of extraordinary resources for designers and developers.

The fifth installment of “What’s New for Designers & Developers from 2024” highlights some of the most valuable and versatile tools and resources tailored to professionals in design and development. These include VS Code extensions, new CSS libraries, tools and frameworks, DevTools extension, tools to development within Figma, CLI utilities, code boilerplates, Git tools, TailwindCSS tools and utilities, CMS platforms, cheat sheets for development and more other resources for developers.

As we anticipate the innovations 2025 will bring, let’s take a moment to reflect on the standout general resources of 2024. Enjoy the retrospective!

January

Clamp Calculator

This calculator to generate any number of custom fluid tokens, and extract the CSS to use in your projects. These tokens can be applied to typography, space or any other CSS property that accepts a length unit

Front Tips

With Front Tips you can get your daily dose of short video tips and tricks covering HTML, CSS, and JavaScript, coupled with essential insights into Frontend Development libraries and tools.

CSS Hooks

Hooks introduce advanced CSS capabilities to native inline styles, offering minimal runtime, no build steps, and a tiny CSS footprint.

NestJS File Generator for VSCode

Meet the NestJS File Generator extension! Say farewell to the manual setup of NestJS files and boost your development workflow. Integrate the NestJS File Generator extension to effortlessly create classes, controllers, decorators, and essential NestJS components. Streamline your coding process for optimal efficiency and speed.

February

Tokenami

Tokenami is a CSS library that utilizes CSS variables within the style attribute. It provides type-safe static styles featuring theming, responsive variant support, all without the need for bundler integration. Tokenami serves as an alternative to CSS-in-JS solutions that inject styles, offering a streamlined approach to managing styles in your web development projects.

Keycheck

Keycheck.dev is a tool crafted to assist developers in discovering and aligning shortcuts for their applications with those available in other applications and tools. This resource simplifies the process of mapping and integrating shortcuts across different software, streamlining workflows and enhancing productivity for developers.

Astronuts

Integrate Astronuts seamlessly into your current tech stack tools to instantly access engineering metrics and insights related to pull requests (PRs) and issue tracking. Astronuts serves as your software engineering Co-Pilot, providing essential information to help you save time and enhance your development velocity.

March

CSSformalize

Introducing CSSformalize – an innovative CSS framework designed to streamline the customisation of native HTML forms.

The framework empowers users with an intuitive on-site interface, enabling effortless adjustments to paddings, dimensions, and color schemes to match your unique preferences. Seamlessly integrate our lightweight CSS file into your project, harness the power of automatically generated CSS variables, and witness your form designs transform with ease!

Mojo CSS

Mojo CSS is an atomic CSS Framework that dynamically generates CSS based on your HTML in real-time and with near-zero runtime.

It provides the fastest method to craft custom, stunning, and responsive layouts without the need to write a single line of CSS. With a comprehensive suite of utilities, Mojo CSS maximises the performance of your web pages.

Fluid for Tailwind CSS

Craft websites that appear more visually appealing across a broader range of screen sizes, all with reduced code. Fluid for Tailwind CSS enables effortless generation of modern clamp() values utilising every built-in utility.

Relux

Relux is a UX design methodology framework that adopts relational database concepts to organize and structure the UX design process for various projects.

Waku

Waku, being a minimal React framework, is tailored to expedite the development process for startups and agencies working on small to medium-sized React projects. These projects encompass marketing websites, lightweight ecommerce platforms, and web applications.

MightyMeld for Tailwind CSS

Elevate your Tailwind code experience by visually constructing your app with our innovative prefab kits, autocomplete, and genuinely helpful AI. Experience the full power of Tailwind in a visual studio that not only interprets your code but also injects clean code seamlessly.

CSS Variables Generator

Figma plugin to elevate the design-to-development workflow. It instantly converts Figma variables and styles into CSS custom properties.

Blocked by CORS

Blocked by CORS serves as the ultimate solution for handling CORS (Cross-Origin Resource Sharing) issues. With the comprehensive knowledge and extensive toolset, navigating CORS challenges becomes as simple as child’s play.

April

Gimli Bootstrap

Enhance your productivity with Gimli Bootstrap: the smart DevTools extension tailor-made for Bootstrap developers. Enjoy key features such as Smart Autocomplete and Instant Feedback, all while seamlessly integrating with any website.

Magick.css

magick.css is a sleek, (mostly) classless CSS framework crafted for simplicity and clarity. Housed in a single file, each design choice is meticulously documented. The aim? To achieve an elegant yet whimsically playful aesthetic, while prioritizing readability and information conveyance—reminiscent of a wizard’s notes.

This framework maintains its allure and functionality across all devices and screen dimensions, without the need for JavaScript. Drawing inspiration from LaTeX, vintage TTRPG rulebooks, CSS frameworks like concrete.css and Tufte CSS, and the usability-focused ethos of brutalism, magick.css offers a unique blend of style and usability.

Glaze

Glaze is an animation framework that combines the power of GSAP and utility-based document authoring à la Tailwind to create a simple. Yet powerful, way to compose declarative animations for the web.

Noir

Free, open-source, and compatible across platforms, our tool is tailor-made for power developers. Revel in features like multiple connections, query tabs, export capabilities, a polished editor, diverse themes, and a lightning-fast grid – all effortlessly accessible via intuitive keyboard shortcuts.

FigNotion

FigNotion serves as a bridge between design, documentation, and development within Figma, seamlessly integrating Notion pages. This integration simplifies project management, fosters enhanced collaboration, and saves time for teams utilizing both Figma and Notion. Ideal for streamlining workflows and maximizing efficiency across design and development tasks.

Firebolt

Firebolt is a full stack React framework designed to streamline your development process, allowing you to concentrate on delivering your projects efficiently. It comes equipped with built-in CSS-in-JS support, straightforward and adaptable file-based routing, and robust functionality for fetching data and interacting with databases directly within your components.

Copilot Context

Boost GitHub Copilot’s code suggestions and expedite your tasks with Copilot Context! This VSCode Extension offers a suite of tools to effortlessly add or remove context from any code document, enhancing your coding experience and streamlining your workflow.

Blinko

Blinko, the pioneering plugin for Figma and FigJam, prioritizes your health and productivity. Tailored to enhance your eyesight and mitigate eye strain, it requires just a few minutes of daily use to yield benefits.

May

px

px is a CLI application designed for executing commands across various JavaScript package managers seamlessly! It automatically detects the package manager being used in the project and forwards the command to the appropriate tool. Ideal for developers working on multiple projects, px simplifies the workflow by ensuring compatibility across different package managers.

Crafter

Crafter is an innovative issue tracking software that operates on autopilot. By extracting context from sources such as Slack, GitHub, and product documents, it automatically generates structured tickets. Ideal for teams aiming to achieve rapid efficiency gains without the need for complex setups.

Boilermate

Share your code boilerplates to help everyone learn and deploy faster!

The Front End Developer/Engineer Handbook 2024

This handbook serves as a valuable resource for both experienced professionals and newcomers in the field of front-end web development. It provides comprehensive insights and opportunities for learning and exploring the practice of front-end development.

Gitshare

Sharing private GitHub repositories has never been easier. Now, you can effortlessly share your repository with colleagues, recruiters, fans, or students with just one click.

Fullwindcss

Have you ever found Tailwind’s 11 color shades limiting? Wished for more options like gray-975? Check out our free tool! Looking for access to every shade from 0 to 1000 for every Tailwind color? Explore this (paid) plugin for easy access to all shades.

Countescale

Counterscale is a simple web analytics tracker and dashboard that you self-host on Cloudflare. It’s designed to be easy to deploy and maintain, and should cost you near-zero to operate – even at high levels of traffic (Cloudflare’s free tier could hypothetically support up to 100k hits/day).

Riza

Safely execute untrusted code within your app using this sandboxed environment. Whether it’s JavaScript, TypeScript, Python, Ruby, or PHP. You can run various languages securely without compromising your app’s integrity.

Penpot 2.0

The latest release of this open-source design tool, version 2.0, is now available. It introduces Grid Layout support, components, inspection enhancements, a revamped user interface, and various other improvements, making it even more powerful for both design and code collaboration.

Aider

Aider is a command line tool that lets you pair program with LLMs, to edit code stored in your local git repository. Aider will directly edit the code in your local source files, and git commit the changes with sensible commit messages.

Dash Forms

Dash Forms provides a quick and secure solution for collecting form submissions from both web and mobile applications, all within minutes and without any dependencies. With Dash Forms, you can optionally choose to have form submissions sent directly to your email. Tailored for developers, it offers seamless integration and ease of use.

June

matcha.css

matcha.css is a pure CSS library crafted to style HTML elements akin to a default browser stylesheet, eliminating the need for users to manually patch their documents. It’s perfect for fast prototyping, static HTML pages, Markdown-generated documents, and developers aiming to streamline their workflow without diving into CSS intricacies, while still making use of the full range of available HTML elements.

Type Fluidity

Select px or rem units and define font and viewport sizes to generate a custom CSS clamp function. You can also preview the result with a custom line height and your choice of Google font.

Restyle

The simplest way to add CSS styles to your React components.

Webstudio CMS

Webstudio has introduced a frontend builder compatible with any headless CMS. This visual builder connects to your preferred CMS without requiring custom code, making it easy to create and manage your website’s front end.

KianKit

KianKit is a powerful starter kit that combines the flexibility of SvelteKit with the robustness of Supabase, enabling you to build feature-rich applications over a weekend.

Figgy

Figgy is a app that visualises your Figma activity using a GitHub-style contribution chart. It allows you to easily track your daily design contributions, monitor your productivity, and gain insights into your work patterns.

MapleCMS

MapleCMS is a powerful and intuitive headless CMS enhanced with AI capabilities. Effortlessly create, manage, and integrate your content anywhere, with zero learning curve and seamless code generation for any tech stack!

Goat Slider

Goat Slider is the ultimate solution the Webflow community has been waiting for. It simplifies the creation of premium sliders, including CMS sliders, making the process easy and efficient.

Jot

Jot is a document editor that combines expressive Markdown and HTML editing capabilities with a set of pre-built, editable blocks and private, secure local storage. It enhances your creative writing by adding more flexibility and creativity.

July

Bread Jam

This extension offers various render patterns for code components, especially for variable names, to improve differentiation and enhance readability.

Codeye

Codeye is a revolutionary Visual Studio Code extension and CLI that transforms your coding experience. Designed to boost developer productivity tenfold, Codeye can generate entire software projects, install developer tools, manage servers, and much more—all from simple text prompts.

Chat With Sheet

Show cheat sheet for you, you can generate your own cheat sheet with chatting.

SQLPilot

SQLPilot is an AI-first SQL editor that helps you write SQL queries in natural language. It connects to your database source, allowing you to include context directly in the prompt.

WhoCanUse

A highly useful tool that highlights how color contrast impacts people with various visual impairments, enhancing understanding and accessibility.

SQL Playground

SQL Playground provides an online platform for writing and executing SQL queries on MySQL and PostgreSQL databases. Ideal for learning, it includes built-in schema generators, advanced syntax highlighting, and is quick, free, and user-friendly.

Ophiuchi

Set up a localhost SSL proxy effortlessly in just 5 seconds with this desktop app. Just click to get started—it handles everything for you.

Ludic Framework

Ludic is a lightweight framework for building HTML pages using a component-based approach similar to React. Designed to work with htmx.org, it allows developers to create dynamic web services with minimal JavaScript. Ludic’s potential is maximized when used with its web framework, which is a wrapper around the powerful Starlette framework. Built with the latest Python 3.12 features, Ludic heavily incorporates typing.

August

Monowi

Monowi is your go-to resource for new product designers. Just like the tiny town in Nebraska, USA, with only one resident, starting your career can feel lonely and challenging. But don’t worry—Monowi is here to help. The hands-on exercises will guide you, build your confidence, and help you develop skills quickly and effectively.

Gridy

Effortlessly design beautiful, responsive CSS grid layouts for your website.

CSS Grid Generator

The CSS Grid Generator is a tool that helps developers create custom CSS grid layouts with ease. It allows users to specify the number of columns, rows, and gutter size.

Shade Theme for VS Code

Shade Theme is a modern, dark theme for Visual Studio Code featuring a sophisticated shadow aesthetic. Designed to reduce eye strain and enhance code readability, it offers a unique blend of vibrant colors and subtle contrasts.

Saaskit

A Next.js starter kit is an open-source Next.js SaaS kit designed to build scalable and production-ready SaaS applications. This starter template includes authentication, MongoDB, Lemon Squeezy, Tailwind CSS, and Shadcn-UI.

Code Stash

This application, developed using Tauri, React, and TypeScript, enables users to organize their code snippets into groups and collections. Each snippet can have a title, description, and multiple files or manually entered pieces of text.

Gowebly

The Gowebly CLI is a free and open-source tool designed to simplify building amazing web applications with Go on the backend. Using htmx and hyperscript along with popular CSS frameworks on the frontend, the CLI generates a ready-to-use project that helps you quickly understand the Go + htmx technology stack.

Many project elements are already optimally configured and ready for production, ensuring maximum developer comfort.

Cradle CMS

Cradle CMS is an out-of-the-box system that includes a Backend, Frontend, Admin UI, Webserver, and API. This licensed software is designed for self-managed hosting on a Linux server. Written in Go, it offers high performance and low operational costs.

September

FastHTML

FastHTML is a next-generation web framework designed for building fast, scalable web applications with minimal and efficient code. It combines power and expressiveness, enabling developers to create advanced, interactive web apps with ease.

The framework is optimized for speed and lightweight performance, allowing you to write less code while accomplishing more. Its simple, intuitive syntax makes it easy to learn and quickly develop complex applications.

Built entirely with Python, FastHTML leverages the full power of the Python ecosystem while mapping HTML and HTTP functionality directly to its operations. To fully utilize FastHTML, a solid understanding of HTML and HTTP is essential, as the framework encourages the application of sound software engineering practices.

Milkdown

A lightweight WYSIWYG Markdown editor built around a plugin system that offers extensive customization options.

Catdocs

Catdocs is an OpenAPI documentation tool that streamlines the management of API documentation for teams. It enables the splitting of OpenAPI documents, allowing different teams or individuals to work on separate parts of the API documentation independently.

Nkhili CSS

Nkhili CSS is a lightweight framework that serves as an indispensable tool for web developers aiming for efficiency and speed in styling their websites. It offers a structured foundation of pre-written CSS code, allowing developers to streamline the styling process and focus more on the functionality and user experience of their web applications.

Metronic

Metronic is a robust ecosystem with advanced components and a multi-layout concept, built using Tailwind and Bootstrap. It accelerates web app development across popular frameworks such as React, Next.js, Vue, Angular, Laravel, Django, Blazor, and more.

Variables Doc Designer

Effortlessly document and sync your design variables with a sleek, customizable interface that enhances both accuracy and aesthetics. Elevate your workflow with seamless integration and beautifully organized layouts, ideal for professional designers.

Buggregator

Buggregator is a free Swiss Army knife for developers, offering a range of features typically found in various paid tools, but at no cost.

Static Page Tools

A directory of static site tools where you can discover website generators and add features like search and comments. Start building a fast, secure, and optimized website today.

Tailwind Reference

Get quick access to all class names and CSS properties with this interactive cheat sheet—the only Tailwind reference you’ll ever need!

October

Version Cat

VersionCat scours the internet to find the latest versions of popular apps. You can easily search for updates or receive email alerts for new versions of your favorite apps by visiting VersionCat.com. Save time and stay updated and it’s 100% free!

blocks.md

blocks.md is a tool that transforms your Markdown files into beautiful, customizable, accessible, and fully localizable forms and web pages. It simplifies the process of turning content into functional, user-friendly interfaces.

Pont

Pont is a simple project template generator and loader. You can generate templates and load them from Git repositories or local directories.

Player.style

These video and audio player themes work seamlessly with any web player, including Video.js, YouTube embeds, and more, as well as with every web app framework like HTML and React. Open-source and built with Media Chrome, they are fully customizable using just HTML and CSS, providing flexibility and ease of integration.

No_Class.css

No_Class is a modern stylesheet designed to work exclusively with native markup. By leveraging semantic HTML, it provides a wide range of usable targets to kickstart and maintain your projects. This blank slate approach fosters greater creativity and opens up new opportunities for expression.

Wonderium.dev

Wonderium.dev is a learning platform built by front–end developers, for front–end developers. It features an interactive card game that teaches the fundamentals of web development, allowing you to immediately put your new skills into practice.

WunderUI 2.0

WunderUI Design System is a collaborative tool tailored for creatives, designed to streamline the digital product design process in Figma. It boosts performance by offering a solid foundation, enabling effortless creation and enhancing workflow efficiency in Figma.

Notion CRM For Designers

Organize your clients more efficiently with this template. As a designer, it can become challenging to keep everything in one place and maintain a clear overview of your clients. This product addresses that problem, offering a streamlined solution to manage your client information with ease.

November

Logfolio

Logfolio helps software engineers maintain daily work logs and record accomplishments to track progress and professional growth. It organizes achievements, provides insights, and leverages AI to summarize your work, create customized cover letters, and prepare effectively for interviews.

Snippets

Snippets is your go-to home for storing and showcasing those neat pieces of code. Always wanted to create your own component library like shadcn? Now you can! Simply save your code, preview and see it live, and share it with friends or make it public for the world to explore.

TestSprite

TestSprite is a fully autonomous AI software testing agent that handles the entire testing process for both frontend and backend. From generating test cases and writing testing code to diagnosing issues and suggesting fixes, TestSprite takes care of it all.

aPulse

aPulse is a lightweight, open-source NodeJS tool for server status monitoring and notifications. It’s easy to configure and supports notifications through Telegram, Slack, Discord, and more. With aPulse, you can track latency, validate content, and access a real-time dashboard—all with zero dependencies!

SportyBlocks

Supercharge your sports website with SportyBlocks! This toolkit offers over 70 Tailwind CSS components for building scoreboards, player cards, standings, and more. It’s easy to use, responsive, and fully customizable. With a one-time purchase, you get lifetime updates and access to Figma files.

FlyonUI

FlyonUI is a free and open-source Tailwind CSS components library featuring semantic classes. It’s designed to offer the best of both worlds: the visual clarity of semantic classes combined with the robust functionality of JavaScript plugins. FlyonUI makes building beautiful, responsive interfaces effortless.

December

Gitten

Gitten is a user-friendly Git platform that simplifies repository management, making Git accessible to non-technical users. Powered by GitHub as a backend, it provides intuitive tools and insights for efficient version control, enabling anyone to manage repositories with ease online.

Tailwind 4.0 Palette Color Generator

A modern palette generator tailored for the upcoming Tailwind CSS 4.0, featuring seamless support for its CSS-first configuration. Perfect for creating customized, responsive color schemes with ease.

Piconss

Piconss is a sleek and lightweight icon library tailored for developers, featuring customizable SVG icons with built-in support for dark and light themes. Optimized for seamless integration, it’s an ideal choice for modern web projects that prioritize performance and flexibility.

TypeBalance

TypeBalance is a powerful plugin that optimizes your text layers with just a few clicks. It applies perfectly tuned settings for letter-spacing and line-height, ensuring ideal readability and visually stunning typography.

No BS Privacy

Creating an app is challenging enough without dealing with complex legal jargon. This tool offers fast, straightforward privacy policies tailored for indie developers and small startups. With inline editing, instant downloads, and a user-friendly interface, you can generate a complete privacy policy in just 60 seconds.

Retro UI

RetroUI is a retro-styled component library designed for modern web applications. It features over 20 open-source components that can be easily copied and pasted into your React codebase, making it simple to add a nostalgic touch to your projects.

UX Research Templates

UX Research Templates is a collection of resources designed to facilitate workshops and streamline the creation of research plans, methods, and outcome documentation. Ideal for UX professionals, these templates help ensure a structured and efficient research process.

UI Builder

UI Builder is an open-source React component offering a no-code, visual interface for creating UIs. Fully compatible with shadcn and custom components, it’s ideal for designing landing pages, marketing emails, and more. Easily integrate it into your shadcn/ui projects for seamless development.

Awesome Doc Gallery

Awesome Docs Gallery is an open-source, crowdsourced collection showcasing the best open-source documentation sites on the web. It serves as a go-to resource for discovering top-notch documentation that sets the standard for clarity, usability, and design in the open-source community.