Fresh Resources for Web Designers and Developers (November 2021)

One thing that I love with the Web development industry is that we, as developers, keep innovating to improve the web. This is why we’ve always found new exciting tools and resources to feature on our list.

In this round of the series, we have a tool to create nice realistic shadows using CSS3, several new frameworks and libraries for React.js, and PHP.

Without further ado, let’s jump in to see the full list.

Freescout

Freescout is a lightweight help desk application built with Laravel. You can use it to help manage your customer tickets, mailbox, and conversations. It’s open-source, free, and packed with features.

Freescout is overall a great alternative to the paid-platform app like Zendesk and Help Scout, especially if you value and need control over your data.

Shadow Palette

A little GUI tool that allows you to create a more realistic drop shadow for your website. You can customize several shadow properties, such as the light position, color, and opacity. The tool will generate the CSS rules that you can copy and implement on your website.

Firefox Relay

Relay is a service from Firefox that allows you to create an email alias of your real email address. You can create several email aliases of one email address and use them when signing up on websites like e-Commerce, membership, subscription, etc. It’s a great service to protect your online privacy further.

SVGCode

A little online app to convert raster images into SVG easily. The tool supports several image formats, including JPG, PNG, and WebP. It’s built with the “Progressive Web App” approach, which means even if you’re offline, the app is still going to work. Simply drag-n-drop any image onto the app, and it’s all set.

Framework X

A simple framework to create a reactive application using PHP. Internally, it leverages some PHP extensions like Coroutines and Fibers (available since PHP8.1) to handle the concurrent and async operations akin to Node.js. You can use Framework X everywhere that runs PHP, including shared hosting.

Shopify Hydrogen

Hydrogen is a new React.js framework from the team at Shopify. It has building blocks to create a custom Shopify storefront, such as utility functions, custom React.js hooks, and components.

If you’re looking to build a Headless store with Shopify, this framework has covered you with the necessities.

Frappe Charts

A lightweight JavaScript library to create a chart. You can install it as an NPM module or load the JavaScript file on your webpage like in the old days.

It supports several types of charts, including bar and pie charts. It’s also responsive and fast since it is not dependent on other external JavaScript libraries.

Chrome DevTools Recorder

Google Chrome has just made an improvement to the DevTools with a feature called “Recorder”. This feature allows you to record your website interaction.

You can replay the recorded interaction or emulate it with certain environments and conditions. It provides a better measure on real web application performance.

Remix

Remix is a new full-stack React.js framework that provides an abstraction to build a better website. It handles routing, error requests, and other tiny details of building a website with great user experience — out of the box. The framework will help web developers become more productive.

Redux Toolkit

An official collection of tools from Redux that aims to make developing a website with Redux more efficient. It includes some utility functions and configs for common use cases.

This way, you can be more productive instead of befuddling with the configurations and the boilerplates, which can be a bit cumbersome.

Bulletproof React

A collection of tips, advice, and best practices for developing React.js application. Here you will learn a lot of topics surrounding app architecture, project structure, styling, state management, and a lot more. If you want to improve your React.js skills, you should definitely have it bookmarked.

Apache EChart

An open-source initiative from Apache, EChart is more than just a chart JavaScript library. It’s a robust collection of interactive charts with animations, and with an overall better visual. This allows you to convey the data to the users better than a static chart.

Awesome Design Tools

This resource contains a massive list of tools for designers from various categories. Here you can find tools for accessibility, prototyping, sketching, stock assets (icons, photos, etc.), and a lot more. I’m pretty sure many designers will find this list extremely useful.

Localstack

Localstack is a fully-functioning local AWS cloud stack. This means you can develop, run and test your AWS application offline. It supports several AWS services, including AWS Lambda, S3, DynamoDB, Kinesis, SQS, and SNS.

Having AWS stack run locally will help you speed up and simplify the testing and development workflow of your application.

Founder Resources

A collection of resources like tools and content for those who’d like to start their journey as a business or startup founder. Being an entrepreneur is not easy. So get this list bookmarked and get prepared.

EmailValidator

A PHP library that makes it easy to validate an email address. It provides several methods of validation, including validation through the email RFC, DNS, or you can also write your own validation.

Docker OSX

A Docker image that allows you to run a container with macOS. This is another cool stuff to help effectively test your application and ensure that it runs across different platforms.

Fonoster

An open-source alternative to Twilio. It allows you to run a stack application from VOIP, SMS, mail, chat, and video on your server. A great alternative for those who’d like to have full control over their platform and the data.

Laravel Tenancy

A robust PHP library to set up multitenancy in Laravel. This allows you to run a single Laravel application with multiple database connections. It works seamlessly and works out-of-the-box with several popular Laravel packages like Vapor, Nova, Livewire, and a lot more.

SwiperJS

A modern JavaScript library to create a slider. Designed and intended to be used on mobile websites and apps. SwiperJS is framework agnostic, allowing you to use any framework, including jQuery and Zepto.

On top of that, it also provides official integration that allows it to work out-of-the-box with some of the most popular modern frameworks like Vue.js, React.js, Svelte and Angular.