{"id":1143,"date":"2024-05-29T13:00:16","date_gmt":"2024-05-29T13:00:16","guid":{"rendered":"http:\/\/suimy.me\/?p=1143"},"modified":"2024-06-05T17:09:37","modified_gmt":"2024-06-05T17:09:37","slug":"fresh-resources-for-web-designers-and-developers-may-2024","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/05\/29\/fresh-resources-for-web-designers-and-developers-may-2024\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (May 2024)"},"content":{"rendered":"

It\u2019s that time again to check out some tools, libraries, and frameworks for our web developer friends. This month\u2019s 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.<\/p>\n

Let\u2019s dive in and see what\u2019s on the list!<\/p>\n

\n\t\t\t\t\tFresh Resources for Web Designers and Developers (April 2024)<\/span><\/a><\/p>\n
\n

.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”); }<\/p><\/div>\n

\n

Fresh Resources for Web Designers and Developers (April 2024)<\/h4>\n

\n\t\t\t\t\t\tIt’s time for another edition of our collection of fresh tools and resources for our fellow designers and…\t\t\t\t\t\tRead more<\/span><\/p>\n<\/div>\n<\/div>\n

Deno Examples<\/a><\/h4>\n

Deno by Examples<\/strong> 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.<\/p>\n

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

Solid Start<\/a><\/h4>\n

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

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

UseMods<\/a><\/h4>\n

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

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

FilamentPHP Fabricator<\/a><\/h4>\n

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

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

LM Studio<\/a><\/h4>\n

LM Studio<\/strong> 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\u2019s 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.<\/p>\n

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

MUI-X<\/a><\/h4>\n

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

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

Typebox<\/a><\/h4>\n

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

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

Github Action Release<\/a><\/h4>\n

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<\/a> makes it easier to automate the release processes of your software.<\/p>\n

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

Nest.js Boilerplate<\/a><\/h4>\n

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

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

Taxonomy<\/a><\/h4>\n

Taxonomy<\/strong> is an example of an application with Next.js. It includes the new \/app<\/code> 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\u2019re looking to learn and implement these features in your own projects.<\/p>\n

\"Next.js\"Next.js<\/span><\/span> <\/figure>\n

Relative Time Element<\/a><\/h4>\n

The relative-time-element<\/strong> is a Web Component built by the team at Github. It is an upgrade to the standard time<\/code> 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.<\/p>\n

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

Dokku<\/a><\/h4>\n

Dokku<\/strong> 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\u2019ll run just like on Heroku, but on your own server.<\/p>\n

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

Coolify<\/a><\/h4>\n

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

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

Biome<\/a><\/h4>\n

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

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

GTS<\/a><\/h4>\n

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

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

LunarPHP<\/a><\/h4>\n

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

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

ArkUI<\/a><\/h4>\n

ArkUI<\/strong> is a library for creating customizable and accessible UI components. It\u2019s 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.<\/p>\n

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

OpenAI Cookbook<\/a><\/h4>\n

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<\/a> or openai-php<\/a>.<\/p>\n

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

FrameworkX<\/a><\/h4>\n

Framework X<\/strong> makes asynchronous programming in PHP easy. It\u2019s 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.<\/p>\n

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

UI Lib Picker<\/a><\/h4>\n

UI Lib Picker<\/strong> 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.<\/p>\n

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

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

It\u2019s that time again to check out some tools, libraries, and frameworks for our web developer friends. This month\u2019s collection […]<\/p>\n","protected":false},"author":1,"featured_media":1145,"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\/1143"}],"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=1143"}],"version-history":[{"count":3,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1143\/revisions"}],"predecessor-version":[{"id":1169,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1143\/revisions\/1169"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/1145"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=1143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=1143"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}