Fresh Resources for Web Designers and Developers (October 2021)

We’ve been running this series for several years now and it feels like we never run out of great new resources for designers and developers. In this round of the series, we have tools, articles, and tutorials that both backend PHP developers and front-end developers would appreciate.

We’ve got a resource to get a dummy logo, a tool to generate image mockups, a GUI tool to scaffold your next cool application with Laravel, and a lot more.

Let’s jump in to get the full list.

Showcode

A web application that allows you to nicely present your code with an image. You can customize the background color, the code editor frame, and the size.

It supports many programming languages such as PHP, JavaScript, as well as templating languages like Twig. A handy tool to share code beautifully.

EventLoop

With PHP8, PHP got a boost of improvements including Fiber that’s coming to PHP8.1. This addition allows PHP to manage concurrency operation natively, and enables the developer to build a ramework on top of it such as to build “Event Loop”.

Event Loop is a mechanism that will allow PHP to perform a non-blocking I/O process. There are not many references for Event Loop on PHP, at the moment, but you can look into the same concept from the Node.js reference.

Laravel Storybook

This library integrates Storybook – a popular application to manage UI and design system – into Laravel. With it, you can render unit of your Larvel components using the Blade templating and Storybook Server right within your Laravel app.

VSCode WebView UI

A UI and design library for Visual Studio Code (VSCode) editor. It has a simple interface for the editor like the button, select, text area, and input. A great resource if you plan to build an extension for VSCode and maintain consistency of your extension with the editor.

Laravel Initializer

A web application to generate a scaffold with Laravel. It enables you to generate the bare Laravel framework, “Breeze” that’s already bundled with some utilities (e.g. user authentication, UI framework), and “Jetstream” which is a more advanced upgraded version of Breeze.

On top of that, you can also set the stack such as the database — whether you’d like to choose MySQL or PosgreSQL, Authentication method, Storage, Cache, and even the Payment system.

PHP Flasher

A framework to manage a notification system with PHP. It allows you to show various types of notifications simultaneously, render notifications from JSON, and even send notification to the OS. If you’re a developer who is very comfortable with PHP, you will definitely appreciate this framework.

LogoIpsum

A collection of free dummy logos you can display on your mockup, template, or dummy website and application. It has quite a handful of collection that’s designed to fit in any UI or graphic style. You can customize the styles, color, and download each logo as SVG.

MJML

MJML is a markup that aims to make it easier when composing layout for email templates. It takes out the complexity of email templates with its own HTML custom element.

You can start adding the component. The doc is pretty comprehensive if you’ve just gotten started. And then you can compile the markup with the yarn build to get the real output you can send to emails.

Learn CSS

An initiaive from Google Developer to provide a comprehensive resource to learn CSS. It covers the fundamentals of CSS such as Box Model, Selectors, Cascade, and Inheritance and Specificity that gives a solid foundation of how CSS works. Helpful for both beginners and advanced-level front-end developers.

ViteBook

ViteBook aims to provide an alternative to Storybook — a popular open-source tool to manage UI and design systems. Built on top of Vite.js, its key focus is performance. ViteBook is currently in early WIP. I’m looking forward to how it will evolve.

Encute

Encute is a PHP library to load and manage scripts and styles on WordPress with Object-oriented Programming (OOP) pattern. So we get a nicer syntax plus it adds some additional features. For example, you can enqueue script with “defer” or “async” load, and load it as a “module”.

Bootstrap Icons

Bootstrap used to include FontAwesome icon in its bundle. It has now created its own official set of icons. The set contains more than 1.300 icons with each icon offered in two different styles, outline and filled style, and comes with two format font icons, and SVG. Like Bootstrap, these icons are free FOREVER.

Open-UI

An initiative and collaborative effort from web developers and engineers to create a standard user interface with an open specification that developer can adopt and implement regardless of the platform used on the website.

It is currently a work in progress. I’m looking forward to how this will affect web development in the future.

Blurhash

An algorithm to generate a “blur” representation of an image. This gives you a small beautiful image that you can use as a placeholder while the real image is loaded fully. No more ugly empty boxes.

CORS

Have you encountered CORS error on your website? Are you wondering how that happens and how to fix it properly? This article provides all the answers with detailed in-depth explanations.

Mo

Mo is a handy CLI utility that allows you to find unused Node.js modules from, your computer system. It will also examine memory usage and provide you an option to remove it from your computer if you want. It’s a great way to free up some disk space in your computer.

Bundlers Tooling Report

“Bundlers Tooling Report” provides a detailed report of features of a bundler. There are several on the list such as Webpack, Browserify, Rollup, and Parcel. If you’re not sure which one is would be fit in your application, this report should help you.

Mantine

A set of more than 120 components to build modern web and application with React. Aside of components, it also provides a list of custom React Hooks that can be handy in a lot of situations such as to access the DOM reference, performing “debounced” function, state management, etc.

KeystoneJS

An open-source Node.js-based Headless CMS. It helps developers build applications or sites with custom datamodel faster. You simply need to describe the schema and it will automatically provide you the UI as well as GraphQL API to access the data on the front-end.

LoremSpace

A tool to generate dummy images or mockups. Instead of generating random images, it allows you to choose the theme of the image. Such as the “movie” will generate the list image movie poster image, “album” to generate music album cover, and “game” to generate game cover images. You can select that would fit in the theme of your website.