Fresh Resources for Web Designers and Developers (September 2020)

We’ve seen a tremendous activity from the PHP as well as the JavaScript community, especially on Twitter. There have been new updates and releases on PHP packages, JavaScript libraries, and some progress on PHP8. So in this round of this series, we’ve put together various resources from both PHP and JavaScript.

These will provide you the resources and tools to become an all-around web developer. So, let’s take a look at the resources in the list.

JetStream

A new open-source PHP package from Laravel. In a nutshell, it is a scaffold that includes login and registration, email verification, 2FA, session management, and user management. A truly complete package to build a web application using Laravel.

Stripe.com Globe Tutorial

Stripe.com’s new web design has been a buzz on social media. It features a striking gradient color with an interactive globe. In this tutorial, the team at Stripe revealed how they build the globe.

GraphQL PHP

This library allows you to build API on your web application using GraphQL. If your site is built on top of WordPress, you can simply use WP GraphQL which implements and integrate with the library so you don’t have to set it up from scratch.

TALL Stack

TALL is a development stack that consists of Tailwind, Alpine.js, Laravel, and Livewire – all preconfigured stack set up and running so you can easily build a modern web application using PHP and JavaScript.

Systemuicons

A collection of modern icons for your web and mobile application. It’s available to load with the CDN and SVG file that you can download. It’s completely free so you can use it in any way you like without attribution to the author.

Image Intervention

A PHP library that allows you to manipulate an image file easily. You can do things like resizing, adding watermark, cropping, rotating, and even adding text on the image.

Detox

This library called Detox aims to make setting up an automated end-to-end (e2e) testing for mobile application much easier. Once it’s set up, it will run your application and emulate the user interaction you have set up in the native iOS emulator.

PDF.js

A JavaScript library built by the team at Mozilla to render PDF in the browser. It’s a feature-full library that it’s able to view each page, navigate to a particular page, initiating to print the page, bookmarking the page, or search the content.

React Podcast

React Podcast covers a lot of helpful material on React.js; guides, tips and tricks, interviews with developers, and a case study of popular project. It’s a worth bookmarking resource if you’d like to keep up with this industry.

React Spectrum

A collection of a responsive and accessible user interface (UI) from Adobe. On top of the usual components like the layouts, buttons, and forms, it also comes with a complementary feature that integrates with a testing tool like React Testing Library, Jest or Mocha to test your application using the UI.

Alice

Alice is a PHP library that makes it easier to generate dummy data either to develop and test your website using a simple one config file in JSON, YAML, or PHP format.

Super Linter

Super Linter is a Github Action config by the team at Github itself to run a linter. It works with the various linters and languages including CSS, PHP, JavaScript, Ruby, and Python out of the box.

FAST Design

FAST is a complete set of tools to build a user interface and design system using the standard Web Components. Developed by the team at Microsoft, the library includes the package which gives you access to the new Microsoft design system, Fluent UI.

Rome

Rome is a tool that aims to unify several tools together that we now commonly use to build modern JavaScript applications. At the moment, it’s shipped with a stable linter but we could expect new tools built-in in the future that would replace Babel, Webpack, Prettier, etc.

Shoelace

A UI library built on top of the standard Web Components specification. It contains some feature-rich custom HTML elements that we can use just as easy as a regular HTML. One of my favourite elements is the <sl-rating></sl-rating> to add star rating.

WordPress Stubs

This is a Composer package that provides the necessary data such as the function and class specifications to run static code analysis in a WordPress-based project. We can use it with PHPStan or Psalm; the two most popular tools to perform static code test in PHP.

Blade UI Kit

A collection of reusable Blade components. It’s similar to HTML and Web Components in a way that we use these components as a regular HTML element. We can add it to a template page, set the attributes with the appropriate values, and it will render the content.

Stitches

Stitches is a “styling” library that aims to modernize and simplify styling components generated with virtual DOM, such as those with React.js. It’s fast, supports the server-side rendering, and provides a much better developer experience.

Equal Access

A collection of tools to test the accessibility of your website. The tool consists of web browser extensions, and a Node module that allows you to run the test within a continuous integration which is compatible with headless browser including Selenium, Puppeteer, and Zombie.

Hybrid.js

A JavaScript library to register a custom Web Component. Unlike the other similar libraries which forces implementing with the JS class syntax, it allows you to do it using just a plain function which, in JavaScript, makes the syntax easier to write and to understand.