Fresh Resources for Web Designers and Developers (August 2021)
There are new tools and techniques coming up every day in the field of web development. And sometimes, … Read more
A free open-source Command-line Interface (CLI) to manage your WordPress sites to DigitalOcean. The CLI allows you to manage your site efficiently, including provisioning servers.
You can also deploy the site, backup the site and do rollback, and even manage the DNS and SSL certificate with Let’s Encrypt. A great handy tool for WordPress power-users and SysOps.
A web application to generate preview of your site on Google and several social media sites like Facebook, Twitter, Pinterest, and Slack. You can use this tool to manage your site title, description, and image to ensure that they fit in and are optimized before sharing it on those sites.
“Houdini” makes CSS more powerful. It works similar to how the Custom Element works in HTML; it allows web developers to define custom CSS properties with their own custom functionalities.
So you can create something like
--cool-text-decoration which will provide some custom richer text decoration than what the browser provides.
It delivers only the CSS that’s needed by the app component and supports server-side rendering. Also, Stitches is framework-agnostic so you can use it in any of your favorites whether it’s React.js, Vue.js, or Svelte.
React Render Tracker
Sometimes rendering a React.js component can be quite expensive for the browser to process and might affect the performance of the application. You can use this tool to inspect how many times the component is rendered on the browser.
You’d want to make sure that the component is not re-rendered excessively. A handy tool to debug and optimize your React.js application.
Great “Alt” Text
Alt text is an important piece of information on the image. It provides the additional information of the image that would benefit not only search engine but also assitive device. This allows your image to perform better on Search Engine and makes your website more accessible to users.
But how do you make a great “alt” text? Jake Archibaled of Google Developer Advocate have some tips for you.
This little tool can help you create a prototype of your next awesome web application fast. Rather than creating it from scratch, you can save time by using this tool to generate UI base styles with some defined parameters like Font Family, Text Size, Color Accent, and their proportion.
The tool will immediately generate the preview and base CSS that you can copy-paste it onto your website stylesheet.
A desktop application to connect and manage the database. It supports several types of database including MySQL, Postgres, SQLite, and SQL Server. With this application, you can perform several database operations conveniently such as creating or deleting database, run an SQL query, and more.
BeeKeeperStudio is available for macOS, Windows, and some Linux distros. It’s open-source and free; and it will always be free.
Filament is a TALL (Tailwind, Alpine.js, Laravel, and Livewire) stack to build an Admin planel application. It’s pre-packaged with features that you would need to build a functioning standard application such as User Authentications, Authorization, and some utilities that make development easier and boost productivity.
On top of that, it also provides options and easing to create an animation that feels more alive.
Recently changed its name to Cal.com, Calendso is an open-source tool to host and manage your own calendar application. It’s an overall good alternative to Google Calendar or Calendly especially if it needs to have full control over the data and customize however you like to fit in your business or development requirement.
A React Hook that improves as well as simplifies data fetching for a web application. Unlike the traditional data fetch, SWR covers the common requirements for a modern application with React.
Not only that it fast, lightweight, and reusablebut it’s also compatible with both SSR (Server-side Rendering) and SSG (Server-side Generator), React Suspense, and React Native. This library has got you covered so you can focus on developing the best of user experience for your application.
A self-hosted application for site monitoring. UptimeKuma features a nice interactive UI and supports a number of protocols such as the basic HTTP (S), TCP, Ping, or through DNS records.
You can set it to send notification to a number of channels including Email, Slack, Discord, Telegram, etc. UptimeKuma is a nice alternative to the commercial offering like Uptime Robot; it’s open-source, and you can add as many as the site you’d like to monitor without the additional $ cost.
A carefully curated color palette aims to create clear, elegant designs following a minimal and flat style pattern. This palette has been translated to color some popular developer applications such as Atom, Coda, JetBrains, SublimeText, Terminal, and even Slack. A great initiative to tie your daily apps together with a unified color scheme.