Fresh Resources for Web Designers and Developers (January 2024)

It’s a new year and a new month, so what better time to start learning something new? This month’s collection of resources for web designers includes a wide range of tools, learning resources, and some other fun goodies to make your life easier. Without further ado, let’s dig in to see the full list!

Fresh Resources for Web Designers and Developers (December 2023)

Fresh Resources for Web Designers and Developers (December 2023)

As the holiday season nears, let’s dive into the latest development tools and resources before we close out… Read more

Twenty

Twenty is an innovative open-source Customer Relationship Management (CRM) system. It offers a modern alternative to traditional platforms like Salesforce, with a focus on user-friendliness and full control over data sources. Being open-source and self-hostable, it even allows for forking and customization of the project.

Overview of Twenty CRM systemOverview of Twenty CRM system

VOCS

VOCS is a straightforward documentation framework based on React and Vite. It’s a static documentation generator that lets you write in Markdown or MDX. It comes with an attractive default theme, customization options, and key features like syntax highlighting and Front Matter support.

Screenshot of VOCS frameworkScreenshot of VOCS framework

wp-option

wp-option is a user-friendly wrapper that improves WordPress options. It introduces validation and consistency in tasks like adding, updating, and retrieving options. This library is compatible with *_option and *_site_option functions for network-enabled installations.

wp-option library overviewwp-option library overview

SVGL

SVGL is an online SVG logo library created using Sveltekit and Tailwind CSS. It features logos from well-known companies and apps, such as Android, Adobe, Figma, and others. It’s a handy resource for web developers in need of professional logos for their projects.

Collection of logos in SVGLCollection of logos in SVGL

Vue0

Vue0 offers an AI-driven generative user interface system, tailored for Vue.js developers. It simplifies creating UI elements using AI and integrates seamlessly with Vue.js, enhancing your project with innovative UI solutions.

Preview of Vue0 interfacePreview of Vue0 interface

Hybridly

Hybridly is a framework designed to enhance the development of interactive single-page applications using Laravel and Vue. It provides a more focused approach compared to Inertia, with built-in advanced features and optimizations. This framework combines the classic development style with the integrated benefits of Laravel and Vue.

Interface of Hybridly frameworkInterface of Hybridly framework

Heroicons Micro

Introducing “Heroicons Micro” in the latest Heroicons release, a set of nearly 300 16×16 icons perfect for compact, high-density interfaces. These icons are ideal for creating responsive designs that remain crisp and well-proportioned on smaller screens.

Preview of Heroicons MicroPreview of Heroicons Micro

Geist Font

From Vercel, Geist is a new font designed for developers and designers. It comes in two styles: a coding version and a Sans version. With its Swiss design influence, Geist emphasizes simplicity and minimalism, making it a visually pleasing choice for coding and design work.

Geist Font stylesGeist Font styles

react-native-unistyles

Unistyles for React Native is a flexible styling library designed to streamline cross-platform styling. It enables efficient style sharing across different platforms, offering an intuitive experience for those already accustomed to React Native styling.

Overview of react-native-unistylesOverview of react-native-unistyles

Oku UI Motion

Oku Motion is a Vue3 and Nuxt3 compatible motion library, leveraging Motion One. It’s a ready-to-use solution based on the Web Animations API, ensuring small file sizes and high performance. This library provides fluid animations, enhancing the visual appeal of your projects.

Showcase of Oku UI MotionShowcase of Oku UI Motion

Storybook 7: Beginner’s Guide

Explore Storybook 7 with React.js through a free Egghead course. Learn to develop pages and components in isolation, enhancing focus and efficiency. Discover how to organize components into interactive stories, control them with ease, and integrate Testing Library. In just over 30 minutes, this course equips you with key skills to improve your React projects with Storybook.

Egghead Storybook 7 course coverEgghead Storybook 7 course cover

Yaak

Yaak is a comprehensive desktop application for managing REST and GraphQL requests. It supports various request types like form-data, JSON, and GraphQL, making it an indispensable tool for effective API interaction and streamlining your development process.

Interface of Yaak appInterface of Yaak app

Cult

Cult is an innovative tool designed to generate a foundational stack for your SaaS project. It incorporates a basic stack featuring popular technologies like Stripe, Supabase, Next.js, and Shadcn UI. This tool streamlines the process of integrating essential features for SaaS applications, boosting development speed and efficiency.

Overview of Cult toolOverview of Cult tool

Corvu

Corvu presents a series of open-source UI building blocks specifically for SolidJS. These unstyled components focus on customizability and accessibility, ensuring they are user-friendly for individuals with disabilities. They can be effortlessly tailored using TailwindCSS or plain CSS to fit your design needs.

Sample components from CorvuSample components from Corvu

Zag.js

ZagJS introduces UI components powered by Statecharts, offering a range of framework-agnostic patterns for essential UI components like Menu, Tooltip, Switch, and Dialog. These versatile components can be utilized across various JavaScript frameworks including React, Vue, and Solid.js, making them ideal for diverse design systems.

Collection of ZagJS componentsCollection of ZagJS components

Design Systems Surf

Design Systems Surf provides a vast collection of design systems from major companies like Adobe, Amazon, Apple, and Atlassian. It serves as an excellent source of inspiration for both designers and developers aiming to create scalable and effective design systems.

Showcase of various design systemsShowcase of various design systems

Plate.js

Plate.js is a comprehensive framework for building rich-text editors in React, based on Slate.js. Featuring accessible components from Radix UI and pre-designed elements, Plate.js simplifies the creation of rich-text editors, making it an ideal choice for developers looking to enhance their projects with robust text editing capabilities.

Preview of Plate.js editorPreview of Plate.js editor

FontSource

Fontsource revolutionizes the way you include fonts in your web applications. By enabling you to install and import fonts directly from NPM, it simplifies font management and integration into your projects.

Display of FontSource usageDisplay of FontSource usage

Color Naming Buddy

This handy tool, Color Naming Buddy, assists in generating names for colors. Simply enter a hex color code, and it will suggest a corresponding name, making it a valuable tool for designers to accurately label their color palettes.

Color Naming Buddy interfaceColor Naming Buddy interface

Use Sushi

Sushi is a Laravel package that introduces an “array” driver in Eloquent. This tool is ideal for leveraging the capabilities of Eloquent to work with data stored in arrays, streamlining data management in Laravel applications.

Sushi Laravel package in actionSushi Laravel package in action