Fresh Resources for Web Designers and Developers (August 2023)

Web development continues to evolve, particularly in PHP and JavaScript. Both of these programming languages have shaped the web for a long time. Today, we will focus on some of the resources associated with these two languages.

In this edition, we offer tools to help you manage monorepos, a PHP library for internationalization, several UI libraries, and much more. So without further ado, let’s delve into the full list.

Shikiji

Shikiji is an open-source JavaScript library that’s inspired by the popular syntax-highlighting library, Shiki. It focuses on ESM support and introduces several changes to enhance portability across various JavaScript engines, including regular browsers, Deno, Node.js, and Bun.

Twolash

Twoslash is an extension of Shiki that simplifies code embedding for the JavaScript and TypeScript languages. It provides type-driven insights and error detection through text editor compiler APIs. Code samples are generated server-side to reduce dependence on client-side JavaScript. It’s an excellent library for those wanting to present detailed code snippets to their audience.

Lerna

Lerna is a renowned open-source tool that facilitates the management of multiple packages within a single repository. Recently acquired by the team behind NX, it has seen renewed direction and focus. With Lerna, upgrading versions for multiple packages and subsequently releasing them to the NPM registry becomes a breeze. It’s an invaluable tool for projects encompassing several related packages or libraries that need concurrent development and versioning.

Semi Design

“Semi Design” is a UI library boasting over 60 components. It integrates with Figma, allowing for a seamless transition from design to code. The library emphasizes accessibility, supports internationalization, and ensures rigorous quality assurance through an exhaustive testing process (unit, e2e, and visual tests). Moreover, it’s SSR-compatible, making it compatible with modern tools like Next.js, Astro, and more.

Brick DateTime

Brick\DateTime offers a collection of immutable classes designed for easy handling of date and time in PHP. Built on top of PHP’s native date-time classes, it extends their capabilities with additional concepts and APIs. These include LocalDate, LocalTime, YearMonth, and MonthDay. Adhering to the ISO 8601 standard, these classes ensure the accurate representation of date and time right out-of-the-box.

Vanilla Components

Vanilla Components is a lightweight and adaptable UI library tailored for Vue 3. Constructed using Vue 3, TypeScript, and Tailwind CSS as its foundational styles, it streamlines all the intricate details, allowing developers to concentrate on development and achieve higher productivity.

Hyperf

Hyperf stands out as a high-performance, flexible, and extensible framework purposed for crafting modern, scalable web applications and microservices using PHP. It is particularly recognized for its speed, user-friendliness, and competence in managing concurrent connections. Additionally, Hyperf offers a comprehensive set of features right out-of-the-box, including a router, database adapters, middleware, and more.

TotalTypeScript Tips

This collection offers useful tips to help you understand TypeScript better and tackle common challenges effectively. Each tip is presented in a concise, annotated video that lasts between 2 to 5 minutes, making this a go-to resource for those seeking quick and practical insights into TypeScript troubleshooting techniques.

Valibot

Valibot is an all-in-one data validation library that seamlessly integrates with data from servers, forms, and configuration files. Impressively, it doesn’t depend on any external components and is compatible across various JavaScript environments, including browsers, Node.js, and Deno. This library is essential for ensuring the accuracy of your data inputs and outputs.

LaRecipe

LaRecipe is a PHP library crafted to streamline the creation of documentation for products or applications in Laravel-based projects. It empowers developers to generate and manage documentation directly within the code using markdown format, facilitating easy maintenance and updates as the project evolves.

Consola

Consola is a contemporary and highly configurable logger suitable for both Node.js and browser environments. It aims to offer developers an efficient and customizable method for managing logs and outputting information during development and debugging phases. Users can configure the display of logs, introducing custom formats, timestamps, and color-coding, as well as applying various styles and themes.

OFetch

OFetch serves as an enhanced library for the Fetch API, designed for compatibility with Node.js, browsers, and Workers. It streamlines HTTP requests and response management by facilitating automatic JSON parsing, effective error management, and providing “retry” options. Given its lightweight nature, OFetch stands out as an excellent alternative for fetching data over APIs.

Omnivore

Omnivore has been crafted to simplify the collection, organization, and management of articles, newsletters, and documents intended for future reading. It boasts beneficial features such as note-taking and highlighting to enrich the reading journey. Additionally, Omnivore allows users the freedom to organize reading lists based on individual preferences and ensures seamless synchronization across various devices.

TypeScript Challenge Video

This collection comprises over 100 videos that tackle various TypeScript challenges along with their solutions. The length of each video varies based on the topic; some are concise, while others may exceed 1 hour. It’s a comprehensive collection that is worth bookmarking for anyone looking to enhance their TypeScript skills.

PHP ECMA Intl

This PHP extension adheres to the ECMA-402 internationalization standard. It offers functions and classes to manage locale-sensitive data, such as date, time, currency, and numerals. With this extension, you can ensure consistent and secure internationalization content for your web application using PHP.

Astro Portofolio

This Astro template is specifically designed for building a portfolio site. Crafted by the Astro design team, it showcases a landing page that highlights your skills and recent projects. Additional features include a user-friendly light and dark mode toggle, a prominent contact call-to-action on all pages, type-safe frontmatter, and a curated collection of icons.

Marigold UI

Marigold is a UI framework and component library built upon react-aria and Tailwind CSS. Its primary goal is to offer a collection of accessible and pre-designed UI components that seamlessly integrate into any web application. Marigold aids in the development of consistent and visually striking user interfaces.

Untun

Untun provides a useful tool that lets you establish a “tunnel” from your local HTTP(s) server to the global internet, using Cloudflare Quick Tunnels. This tool is invaluable for testing your web application across various devices, including mobile ones, without the need for deployment on a public server.

Laravel Folio

Laravel Folio introduces a page-based router, reducing routing complexities in Laravel applications. By seamlessly integrating with Blade templates found in your application’s resources/views/pages directory, routing becomes simpler. However, you still have access to all the potent features Laravel offers in its traditional routing, including Middleware, Caching, Model Binding, and more.

Siyuan

Siyuan is an open-source, self-hosted note-taking and knowledge management application. It boasts a myriad of features for crafting and organizing notes, documents, and other content types. For instance, you can employ Markdown for note formatting, arrange notes hierarchically, design custom templates for varied note types, and so much more.