One thing that I love with Web development industry is that we, as developers keep innovating to make the web better. 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.
Shadow Palette
A little GUI tool that allows you to create a more realistic drop shadow for your website. You can customize several of the shadow properties such as the light position, color, and opacity. The tool will generate the CSS rules that you simply 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, and 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.
A simple framework to create a reactive application using PHP. Internally, it leverages some PHP extension 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 comes with 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 got you covered with the necessities.
Frappe Charts
A lightweight JavaScript library to create a chart. You can install it as an NPM module or simply 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 environment and conditions. It provides a better measure on the real web application performance. This feature will be shipped as a beta feature on Chrome 97.
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 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, photots, etc), and a lot more. I’m pretty sure a lot of 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 a number of 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 own server. A great alternative for those who’d like to have full control over their platform and the data.
Freescout
Freescout is a lightweight help desk application built with Laravel. You can use it to help and 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.
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 which allows 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.
