New Resources for Web Designers and Developers (August 2021)
New tools and techniques are emerging every day in web development. And sometimes… Read more
And for free open source command line interface (CLI) to manage your WordPress sites for DigitalOcean. CLI allows you to manage your site efficiently, including provisioning servers.
You can also implement the site, back up 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.
Another web application Generate preview of your site on Google and more social media like Facebook, Twitter, Pinterest and Slack. You can use this tool to manage the title, description and image of your site to ensure that they fit and are optimized before sharing it on these sites.
“Houdini” makes CSS more powerful. It works the same way the custom element works in HTML; that allows web developers to define custom CSS properties with their own custom functionalities.
So you can do something like e.g.
--cool-text-decoration which will provide something customized, richer text decoration than what the browser offers.
It provides only the CSS required for the app component and supports server-side rendering. Also, Stitches are frame-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 of a React.js component can be quite expensive for the browser to process and can affect the performance of the application. You can use this tool to inspect how many times the component is rendered in the browser.
You want to make sure that the component is not reproduced too much. A handy tool for debugging and optimizing your React.js application.
Fantastic “Alt” text
Alt-text is an important information in the image. It provides the additional information about the image which will not only benefit the search engine but also the help function. This allows your image to perform better on the search engine and makes your site more accessible to users.
But how do you make a good “everything” text? Jake Archibaled from Google Developer Advocate has some tips for you.
This little tool can help you create a prototype of your next amazing web application quickly. Instead of creating it from scratch, you can save time by using this tool for generate UI base styles with some defined parameters such as font family, text size, color accent, and their proportions.
The tool will instantly generate the preview and basic CSS that you can copy and paste into your site’s stylesheet.
A desktop application for connect and manage the database. It supports several types of databases including MySQL, Postgres, SQLite and SQL Server. With this application you can easily perform several database operations, such as creating or deleting database, running an SQL query and more.
BeeKeeperStudio is available for macOS, Windows and some Linux distros. It is open source and free; and it will always be free.
Filament is a TALL (Tailwind, Alpine.js, Laravel, and Livewire) stack for building an Admin Planel application. It comes pre-packaged with features you need to build a working standard application such as user authentication, authorization, and some utilities that facilitate development and increase productivity.
On top of that, it also provides opportunities and facilitations to create an animation that feels more alive.
Recently changed name to Cal.com, Calendso is one open source tool to host and manage your own calendar application. It’s a generally good alternative to Google Calendar or Calendly, especially if it needs to have full control over the data and customize it the way you want it to fit your business or development requirements.
And React Hook it improves and simplifies data retrieval for a web application. Unlike traditional data retrieval, SWR covers the general requirements of a modern application with React.
Not only that fast, easy and reusable, but so is it compatible with both SSR (Server-side Rendering) and SSG (Server-side Generator), React Suspense and React Native. This library has covered you so you can focus on developing the best user experience for your application.
A self-hosted site monitoring application. UptimeKuma has a nice interactive user interface and supports a variety of protocols such as the basic HTTP (S), TCP, Ping or via DNS records.
You can set it to send notifications to a variety of channels, including Email, Slack, Discord, Telegram, etc. UptimeKuma is a great alternative to the commercial offering like Uptime Robot; it is open source and you can add as many as the site you want to monitor without further ado $ cost.
A carefully composed color palette aims to create clear, elegant designs in 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 an overall color scheme.