Inspiration

Fresh Resources for Web Designers and Developers (September 2024)

It’s September and we’ve got a fresh set of resources for our fellow web developers.

This month, we’ve got tools from various categories, including a plugin to check a WordPress plugin, a React component library for WordPress admin applications, a collection of Laravel Blade components, a static site generator written in Rust, and a few more interesting things that you might find useful.

Let’s just get started!

Plugin Check

Plugin Check is a WordPress tool to help you ensure your plugin meets the standards required for the WordPress.org plugin directory . It checks for compliance with best practices, covering areas like performance, security, i18n, A11y, and flagging any violations or concerns to help improve your plugin.

WordPress Plugin Check compliance toolWordPress Plugin Check compliance tool

Kubrick UI

Kubrick UI is an open-source React component library built on top of react-aria, designed for creating custom WordPress admin applications. It helps developers to ensure their WordPress Admin applications are consistent, accessible, and seamlessly blend with the familiar WordPress Admin interface.

Kubrick UI React component library for WordPress adminKubrick UI React component library for WordPress admin

React Symbols

react-symbols is a lightweight React library providing over 100 files and folder icons. Built with TypeScript, it supports React Server Components (RSC) and provides optimized, minified SVGs. The icons are originally designed and created for the VSCode theme, Symbols, but I think it’s perfectly good for any project.

React Symbols library icons and folders for VSCodeReact Symbols library icons and folders for VSCode

Zola

Zola is a static site generator (SSG) written in Rust, similar to Hugo and Jekyll, that uses the Tera template engine. It supports CommonMark, and provides features like GitHub-flavored tables and task lists out-of-the-box. A great tool for developers looking to build fast, secure, and flexible websites.

Zola static site generator written in RustZola static site generator written in Rust

MaryUI

MaryUI is a collection of Laravel Blade components for Livewire 3. It offers pre-designed UI elements that help Laravel developers quickly and easily build UIs and pages for their apps. It is built using daisyUI and Tailwind CSS for styling, giving you flexible customization with tools you’re already familiar with.

MaryUI Laravel Blade components for Livewire 3MaryUI Laravel Blade components for Livewire 3

Expressive Code

Expressive Code makes it easy to display code blocks on your content or page. It supports VS Code themes with accurate syntax highlighting, and includes features like editor frames, copy-to-clipboard buttons, text markers, and collapsible sections. Best of all, it doesn’t rely on any front-end frameworks like React or Vue, and works with popular site generators like Astro and Next.js, as well as plain Markdown and MDX.

Expressive Code code block syntax highlighting and editor framesExpressive Code code block syntax highlighting and editor frames

Shoelace

Shoelace is an open-source, framework-agnostic library of customizable web components. It offers accessible, modern UI elements like buttons and dialogs, with easy theming and integration into any project, making it ideal for building responsive, flexible web interfaces.

Shoelace library of customizable web componentsShoelace library of customizable web components

GitHub Copilot Extensions

GitHub has recently announced GitHub Copilot Extensions, that enables developers to develop and deploy using natural language within VS Code and GitHub. It allows you to tap into specific tools, like Docker, Azure, Stripe, and MongoDB, that provide you better tools and context to fix or solve problems within your app in one streamlined process.

GitHub Copilot Extensions for VSCode and development toolsGitHub Copilot Extensions for VSCode and development tools

Dioxus

Dioxus is a Rust library that lets you build apps for desktop, web, mobile, and more—all from a single codebase. Inspired by React, it focuses on making development for cross-platform applications faster and easier. A great tool if you’re looking to build apps for multiple platforms.

Dioxus Rust library for cross-platform app developmentDioxus Rust library for cross-platform app development

Motion Primitives

Motion Primitives is a collection of React components built with Framer Motion and Tailwind CSS. It makes it easy for you to add smooth animations to your websites. A perfect library for both developers and designers looking to make websites more alive.

Motion Primitives React components for smooth animationsMotion Primitives React components for smooth animations

Rclone

Rclone is a command-line tool that helps you manage files on cloud storage easily. It serves as an alternative to the web interfaces provided by the cloud vendors. It supports over 70 different cloud storage services, including S3 object stores and various file storage options. It makes it easier to transfer and organize your files across multiple platforms.

Rclone command-line tool for cloud file managementRclone command-line tool for cloud file management

Notion Helper

Notion Helper is a Node.js library that simplifies working with the Notion API. It’s easy to use, has no dependencies, and provides full JSDoc support for IntelliSense. An overall great tool for developers looking to integrate Notion into their projects.

Notion Helper Node.js library for Notion API integrationNotion Helper Node.js library for Notion API integration

Wagtail

Wagtail is an open-source content management system (CMS) built on Django, designed with a focus on user experience. It provides designers and developers with fine control over content and design. It makes it easy and flexible to create websites. If your Python project is looking for a CMS that is easy to use and customize, I think Wagtail is a great choice.

Wagtail open-source CMS built on DjangoWagtail open-source CMS built on Django

UIKit

UIKit is a toolkit designed for building fast, responsive 3D user interfaces using react-three-fiber. It provides pre-styled, customizable components that make it easier for you to create interactive layouts and interfaces. A great library for developing UIs in web-based 3D apps, such as games or virtual/augmented reality (VR/AR) projects.

UIKit toolkit for building 3D user interfacesUIKit toolkit for building 3D user interfaces

SN Pro

SN Pro is a free, open-source typeface based on Nunito. It refines each character for better readability, improving kerning and ligature support, while tweaking specific letters like Q and t. I think it’s a good-looking font for any type of website. It looks clean and feels more polished.

SN Pro free open-source typeface based on NunitoSN Pro free open-source typeface based on Nunito

Image Placeholders

Image Placeholders is a WordPress plugin, part of WordPress’s effort to improve performance. It works by determining and storing the dominant color for newly uploaded images in the media library, and uses it to create a placeholder background of the color on the frontend that would be visible until the related image is loaded.

Image Placeholders WordPress plugin for performance improvementImage Placeholders WordPress plugin for performance improvement

Atomico

Atomico is a lightweight library for building web components using functions, hooks, and a virtual DOM, similar to React. It is also framework-agnostic, meaning your components will work with libraries like React, Vue, Svelte, or Angular. I think it is a great library for developers looking to build web components that are fast and easy to use.

Atomico lightweight library for building web componentsAtomico lightweight library for building web components

Gutenberg Comment Highlight

Gutenberg Comment Highlight is a VSCode extension that improves readability for WordPress Gutenberg block meta data. It highlights block names starting with wp: as variables and applies basic JSON syntax highlighting to any JSON strings, making comments easier to read than the default greyed-out look of standard HTML comments.

Gutenberg Comment Highlight VSCode extension for better readabilityGutenberg Comment Highlight VSCode extension for better readability

SST

SST is a framework that simplifies building full-stack applications on your own AWS infrastructure. With a single configuration, you can deploy everything your app needs. It supports a wide range of AWS services, including Lambda, API Gateway, and S3, as well as supports popular frameworks like Next.js, Nuxt, Solid, Astro, etc. A really handy tool for deploying your application.

SST framework for building full-stack applications on AWSSST framework for building full-stack applications on AWS

Rspack

Rspack is a high-performance JavaScript bundler written in Rust, designed to be a faster alternative to Webpack. It offers fast build performance, Hot Module Replacement (HMR), and full compatibility with Webpack plugins and loaders. Rspack also supports built-in optimizations like tree shaking, and is framework-agnostic, giving developers flexibility with large-scale projects. A great tool for developers looking to improve their build performance in their projects and applications.

Rspack high-performance JavaScript bundler written in RustRspack high-performance JavaScript bundler written in Rust

The post Fresh Resources for Web Designers and Developers (September 2024) appeared first on Hongkiat.

Leave a Reply

Your email address will not be published.