Fresh resources for web designers and developers (July 2021)

As a web developer, there is always something you can learn every day and grow. You can learn design principles, user experience, user interface design and user behavior through analytics data. Or you can branch out to servers, such as installing and running a server package yourself.

In this round of the series, we have put together various resources from tools, podcasts, articles and much more where you can learn more disciplines beyond just creating the website itself. Let’s get started!

Fresh resources for web designers and developers (June 2021)

Fresh resources for web designers and developers (June 2021)

Being a web developer means constant learning as the field keeps evolving with new updates coming in every … Read more

UI Glass Generator

Glassy user interface is on its way back. We can see that it is now an integral part of the new interface design in Windows and macOS. Thanks to the latest CSS feature, we can also apply a similar interface to the website and this tool will make it even easier and faster to create one.

You can Use the GUI to adjust the color, opacity, and background of your site and it will generate the CSS that you can copy and paste.

UI Glass Generator

US Code Fortnite Theme

ONE Fortnite-inspired theme for Visual Studio Code. It comes with some special effects by activating Fortnite: Activate Legendary possibility. If you enjoy the game and flares while coding, this VSCode theme is for you.

US Code Fortnith theme

MakerStations

This site collects desktop setups from different professionals (designers, developers, authors, etc.). Not only does it present these for inspiration, but also dig into the owner’s personalities and the reasons behind the setup.

If you’re currently looking for inspiration for your new desktop setup, look no further. You will definitely find some good ones MakerStations.

MakerStations

React.js ARIA

A collection of React.js features that help create accessible UI components and design systems to your web application.

It is designed to provide the best possible interactive experience for users, whether they use a keyboard, a mouse or an aid. It’s a great initiative from Adobe for a better web.

React.js ARIA

React Hooks test library

Hooks are a concept in React.js to create components less rigid, and we can create custom hooks except those that are built-in.

If you have now encountered a situation where you would like to perform one automated test for the custom hook, this library will be useful. It provides the pattern to test your custom React.js Hook as closely as when used in a real component.

React Hooks test library

WiFi card

This tool does more convenient to share WiFi credentials using QR code. Simply enter the WiFi name and password. Print and attach it somewhere in the room.

ifi card

Umami

Umami is an open source application for collecting analytical data. It is easy to install in your own server or VPS with minimum requirements. Only you need Node.js and MySQL (or PostgreSQL). It is a great application if you are looking for one alternative to Google Analytics where you own and control all data.

Umami

CSS Podcast

Powered by the Google Developer Advocates duo, Una Kravets and Adam Argyle, you will learn so much about CSS; from practical tips, availability, performance and more. It is one of the best quality sources for learning CSS and web development in general.

CSS Podcast

Fosscard

Disagreement rises as one interactive communication tool for communities. You can participate in different groups, among others groups for web development and programming, to chat with the community or make a voice or video call.

Discord, however, is a SaaS. If you are looking for a self-host where you can have more control, Fosscard may be a good alternative.

Fosscard

Pure code PHP

A collection of advice on writing PHP codes that can be read, reused and most importantly maintained. It’s a great resource where you can learn some handy tips; such as how to best name variables, how to structure conditional block, and how to name a function and the arguments, to name a few.

Pure code PHP

MiniCLI

A tiny bit PHP Library to Build Command Line Interface (CLI). It provides the basic structure to register your custom command lines as well as the help and help functions to handle user input and output. A good start for creating a PHP-based command line.

MiniCLI

UniformCSS

ONE generator and utility-first CSS framework built with Sass. It’s a mix of the good of both worlds, where you can take advantage of the flexibility of utility-first workflow while still having the power of Sass, such as variables, mixins and functions.

UniformCSS

Layout Generator

An online tool to generate a basic layout for your website. It uses Grid for the layout and provides GUI to generate the layout. You can, for example set the number of columns, rows and adjustments. I think it’s a more intuitive way to generate a layout with CSS Grid.

Layout Generator

Fower

Utility-first CSS method is becoming quite popular. It provides flexibility to be scalable on small or large sites. If you are into writing CSS-in-JS for your web application and leaning on one utility-first CSS access to compose the styles, you may be interested in trying this library.

Fower is frame-agnostic so you can use it in various frameworks such as React.js, Vue.js and Svelt, or plain JavaScript.

Fower

RTL WTF

A great source for learning tips, use cases and best practices for build a website for right-to-left writing direction like Arabic and Hebrew. This website must be on your bookmark.

RTL WTF

Notistack

A React.js library that makes it easy to display “toast” messages on your web app. It is highly configurable, allowing you to present the best possible user experience.

To name a few, you can set the number of maximum messages, prevent duplicates by not displaying messages with the same message, and set the type of transition.

RTL WTF

Copy

An open source server application that you can use to run and manage backups on your own cloud servers. Kopia also provides a nice desktop application running on Windows, macOS and Linux where you can easily manage it, such as creating a snapshot and restoring the snapshot.

Copy

Web Components DevTools

Web Component allows you to create a custom component that the browser can understand and render. If you’ve encountered the need to build a custom web component, use this Chrome extension that allows you to troubleshoot the web component of your browser.

Web Components DevTools

Fluent typography

A handy little tool for create text size that scales with window size. The tool helps you generate the style that allows the text on your website to look great and proportional on any screen.

Fluent typography

MillionJS

A small JavaScript library (less than 1KB) to create one interactive user interface to your website. It implements Virtual DOM behind the scenes and some unique approaches that make it quick to render in the browser.

I think it could be one good alternative to some more established frameworks like React.js and Vue.js, especially if you just need to use Virtual DOM.

MillionJS

Leave a Comment