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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
