{"id":2434,"date":"2024-09-25T15:00:43","date_gmt":"2024-09-25T15:00:43","guid":{"rendered":"http:\/\/suimy.me\/?p=2434"},"modified":"2024-10-02T17:24:05","modified_gmt":"2024-10-02T17:24:05","slug":"fresh-resources-for-web-designers-and-developers-september-2024","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/09\/25\/fresh-resources-for-web-designers-and-developers-september-2024\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (September 2024)"},"content":{"rendered":"

It\u2019s September and we\u2019ve got a fresh set of resources for our fellow web developers.<\/p>\n

This month, we\u2019ve 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<\/a> written in Rust, and a few more interesting things that you might find useful.<\/p>\n

Let\u2019s just get started!<\/p>\n

<\/div>\n

Plugin Check<\/a><\/h4>\n

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

\"WordPress\"WordPress<\/span><\/span><\/figure>\n
<\/div>\n

Kubrick UI<\/a><\/h4>\n

Kubrick UI<\/strong> is an open-source React component library built on top of react-aria<\/a>, 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.<\/p>\n

\"Kubrick\"Kubrick<\/span><\/span><\/figure>\n
<\/div>\n

React Symbols<\/a><\/h4>\n

react-symbols<\/strong> is a lightweight React library<\/a> 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<\/a>, but I think it\u2019s perfectly good for any project.<\/p>\n

\"React\"React<\/span><\/span><\/figure>\n
<\/div>\n

Zola<\/a><\/h4>\n

Zola<\/strong> is a static site generator (SSG)<\/a> written in Rust<\/a>, similar to Hugo and Jekyll, that uses the Tera template engine<\/a>. It supports CommonMark<\/a>, 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.<\/p>\n

\"Zola\"Zola<\/span><\/span><\/figure>\n
<\/div>\n

MaryUI<\/a><\/h4>\n

MaryUI<\/strong> is a collection of Laravel Blade<\/a> 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\u2019re already familiar with.<\/p>\n

\"MaryUI\"MaryUI<\/span><\/span><\/figure>\n
<\/div>\n

Expressive Code<\/a><\/h4>\n

Expressive Code<\/strong> 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\u2019t 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.<\/p>\n

\"Expressive\"Expressive<\/span><\/span><\/figure>\n
<\/div>\n

Shoelace<\/a><\/h4>\n

Shoelace<\/strong> 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.<\/p>\n

\"Shoelace\"Shoelace<\/span><\/span><\/figure>\n
<\/div>\n

GitHub Copilot Extensions<\/a><\/h4>\n

GitHub has recently announced GitHub Copilot Extensions<\/strong>, 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.<\/p>\n

\"GitHub\"GitHub<\/span><\/span><\/figure>\n
<\/div>\n

Dioxus<\/a><\/h4>\n

Dioxus<\/strong> is a Rust library that lets you build apps for desktop, web, mobile, and more\u2014all from a single codebase. Inspired by React, it focuses on making development for cross-platform applications faster and easier. A great tool if you\u2019re looking to build apps for multiple platforms.<\/p>\n

\"Dioxus\"Dioxus<\/span><\/span><\/figure>\n
<\/div>\n

Motion Primitives<\/a><\/h4>\n

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

\"Motion\"Motion<\/span><\/span><\/figure>\n
<\/div>\n

Rclone<\/a><\/h4>\n

Rclone<\/strong> is a command-line tool that helps you manage files on cloud storage<\/a> 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.<\/p>\n

\"Rclone\"Rclone<\/span><\/span><\/figure>\n
<\/div>\n

Notion Helper<\/a><\/h4>\n

Notion Helper<\/strong> is a Node.js library<\/a> that simplifies working with the Notion API. It\u2019s easy to use, has no dependencies, and provides full JSDoc support for IntelliSense. An overall great tool for developers looking to integrate Notion<\/a> into their projects.<\/p>\n

\"Notion\"Notion<\/span><\/span><\/figure>\n
<\/div>\n

Wagtail<\/a><\/h4>\n

Wagtail<\/strong> 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.<\/p>\n

\"Wagtail\"Wagtail<\/span><\/span><\/figure>\n
<\/div>\n

UIKit<\/a><\/h4>\n

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.<\/p>\n

\"UIKit\"UIKit<\/span><\/span><\/figure>\n
<\/div>\n

SN Pro<\/a><\/h4>\n

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

\"SN\"SN<\/span><\/span><\/figure>\n
<\/div>\n

Image Placeholders<\/a><\/h4>\n

Image Placeholders<\/strong> is a WordPress plugin, part of WordPress\u2019s 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.<\/p>\n

\"Image\"Image<\/span><\/span><\/figure>\n
<\/div>\n

Atomico<\/a><\/h4>\n

Atomico<\/strong> 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.<\/p>\n

\"Atomico\"Atomico<\/span><\/span><\/figure>\n
<\/div>\n

Gutenberg Comment Highlight<\/a><\/h4>\n

Gutenberg Comment Highlight<\/strong> is a VSCode extension that improves readability for WordPress Gutenberg block meta data. It highlights block names starting with wp:<\/code> 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.<\/p>\n

\"Gutenberg\"Gutenberg<\/span><\/span><\/figure>\n
<\/div>\n

SST<\/a><\/h4>\n

SST<\/strong> 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.<\/p>\n

\"SST\"SST<\/span><\/span><\/figure>\n
<\/div>\n

Rspack<\/a><\/h4>\n

Rspack<\/strong> 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.<\/p>\n

\"Rspack\"Rspack<\/span><\/span><\/figure>\n

The post Fresh Resources for Web Designers and Developers (September 2024)<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

It\u2019s September and we\u2019ve got a fresh set of resources for our fellow web developers. This month, we\u2019ve got tools […]<\/p>\n","protected":false},"author":1,"featured_media":2436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2434"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=2434"}],"version-history":[{"count":3,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2434\/revisions"}],"predecessor-version":[{"id":2457,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2434\/revisions\/2457"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/2436"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=2434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=2434"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=2434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}