Fresh Resources for Web Designers and Developers (May 2024)

It’s that time again to check out some tools, libraries, and frameworks for our web developer friends. This month’s collection has a bunch of goodies, from cool JavaScript libraries to handy tools for GitHub releases, and even a DIY version of Heroku you can host yourself.

Let’s dive in and see what’s on the list!

Fresh Resources for Web Designers and Developers (April 2024)

.no-js #ref-block-post-71729 .ref-block__thumbnail { background-image: url(“https://assets.hongkiat.com/uploads/thumbs/250×160/designers-developers-monthly-04-2024.jpg”); }

Fresh Resources for Web Designers and Developers (April 2024)

It’s time for another edition of our collection of fresh tools and resources for our fellow designers and… Read more

Deno Examples

Deno by Examples provides practical code samples for using Deno from the basic to advanced tasks, such as setting HTTP servers, handling JSON, processing forms, and server-side rendering with JSX. Each example includes clear, executable code snippets to help you get up to speed with Deno.

Deno code examplesDeno code examples

Solid Start

SolidStart is the official starter framework for SolidJS. It provides templates to quickly set up new applications with options like built-in server-side rendering, TypeScript support, Vite, Nitro, and Router. It makes it easier and faster build and running a site with SolidJS.

SolidJS frameworkSolidJS framework

UseMods

UseMods offers a collection of utility functions for JavaScript. It includes functions for common tasks like formatNumber to make user-friendly format numbers, sum to calculate array of numbers, average to find the mean of an array. It’s overall a handy library to help you with various small tasks and functions needed to build modern web applications efficiently, whether it’s on the front-end or SSR.

JavaScript utility functionsJavaScript utility functions

FilamentPHP Fabricator

Fabricator is a FilamentPHP plugin that helps you create dynamic, block-based page layouts in their Filament applications. It allows you to easily create and manage content blocks through a user-friendly interface, making it simple to build complex pages or layout without needing extensive technical skills.

FilamentPHP block editorFilamentPHP block editor

LM Studio

LM Studio is a desktop app for running Large Language Models (LLMs) like Llama, MPT, and StarCoder locally on your computer. It supports some common AI tasks like text embeddings and server-side completions. It’s user-friendly, works on Windows, macOS, and Linux. It is a suitable app for those who need to work offline for better privacy. Note that your computer will need a lot of RAM and a fast CPU to run this app effectively.

LM Studio software interfaceLM Studio software interface

MUI-X

MUI X contains a collection of advanced React components such as DataGrid, Charts, and Date & Time Pickers. It helps you organize and display lots of data efficiently, with options like sorting, filtering, and even letting you export stuff to Excel. A perfect library to build complex data-driven applications.

MUI X advanced componentsMUI X advanced components

Typebox

TypeBox is a library that lets you create JSON Schemas for TypeScript type checking and runtime validation, such as for validating data in REST and RPC services. This ensures your data structures follow defined types during development and in production.

TypeBox JSON schemaTypeBox JSON schema

Github Action Release

A GitHub Action for managing releases in Github. It runs on Linux, Windows, and macOS environments and allows you to easily configure various options for your release, such as uploading files, adding release notes, and more. This Action makes it easier to automate the release processes of your software.

GitHub Action for releasesGitHub Action for releases

Nest.js Boilerplate

NestJS Boilerplate includes features like authentication, database integration with TypeORM and Mongoose with support for PostgreSQL and MongoDB, mailing functionality, and i18n out of the box. It’s designed to streamline the development of typical NestJS projects by providing a ready-to-use setup with common functionalities so you can get your application up and running quickly.

NestJS project setupNestJS project setup

Taxonomy

Taxonomy is an example of an application with Next.js. It includes the new /app directory, advanced routing with layouts and nested layouts, data fetching, and caching. This setup demonstrates the new capabilities and structure of Next.js, and is a great resource if you’re looking to learn and implement these features in your own projects.

Next.js advanced routingNext.js advanced routing

Relative Time Element

The relative-time-element is a Web Component built by the team at Github. It is an upgrade to the standard time tag. It shows dates as local or relative times so users will see it in their own format and time zone. If JavaScript is off, the original date still shows up. This tool makes sure dates look right for everyone.

Github relative time componentGithub relative time component

Dokku

Dokku is a free, open-source alternative to Heroku for managing apps. You can install it on any hardware and use cheap cloud providers to save money. You can simply push apps to it using Git, and they’ll run just like on Heroku, but on your own server.

Dokku server managementDokku server management

Coolify

Coolify is a self-hosted alternative to Heroku, Netlify, and Vercel. It works with many programming languages and allows you to launch various applications on any server like a VPS, Raspberry Pi, or cloud services like EC2 and DigitalOcean. It provides automatic SSL certificate setup and Git integration with both hosted and self-hosted platforms including GitHub, GitLab, Bitbucket, and Gitea. This makes deploying your apps simple while giving you more control over the infrastructure.

Coolify deployment platformCoolify deployment platform

Biome

Biome is a handy tool for web projects. It features a fast formatter and linter for JavaScript, TypeScript, JSX, JSON, and supports 97% of Prettier features. You can easily integrate it with VSCode to enable it to format and lint your code in real-time as you write, helping you improve your code quality.

Biome code formatter and linterBiome code formatter and linter

GTS

Built by the team at Google, GTS is a collection of tools for TypeScript projects. It provides a style guide, formatter, and proofreader in one package. You don’t need to worry about configurations. Just install it in your project, and run gts fix, and your code will be clean and tidy. It helps you to catch mistakes early, saving time during code reviews.

Google TypeScript StyleGoogle TypeScript Style

LunarPHP

LunarPHP is an open-source package built with Laravel to build a headless e-commerce platform. It includes all the tools you need to manage your store, from catalogs to customers and orders, in a sleek and customizable admin area built with Laravel Livewire.

LunarPHP e-commerce platformLunarPHP e-commerce platform

ArkUI

ArkUI is a library for creating customizable and accessible UI components. It’s designed to work with various JavaScript frameworks, so you can use it either with React.js, Vue, or Solid. On top of that, all the components start unstyled, so you can match them perfectly to your design.

ArkUI customizable UI componentsArkUI customizable UI components

OpenAI Cookbook

The OpenAI Cookbook provides example code and guides for using the OpenAI API to work on some common tasks. Most examples are in Python, but the principles can apply to any language. You can apply it using some of the SDKs available like openai-node or openai-php.

OpenAI API example codesOpenAI API example codes

FrameworkX

Framework X makes asynchronous programming in PHP easy. It’s a fast and simple framework designed for creating reactive web applications with support for async and non-blocking execution. You can host it anywhere, even on shared hosting.

Framework X for PHPFramework X for PHP

UI Lib Picker

UI Lib Picker is a handy tool for Vue 3 and Nuxt 3 users. It simplifies the process by offering an overview of various UI frameworks, making it easier for you to choose the one that fits your projects. It includes popular collections like NuxtUI, PrimeVue, and Vuetify, among others.

UI library comparison toolUI library comparison tool

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

Leave a Reply

Your email address will not be published.