Fresh resources for web designers and developers (September 2021)

A lot is happening this month in the technology industry; from Docker, which updates their business and plans, prominent WordPress companies acquired, Web3, NFT, as well as new resources and updates keep coming in HTML, CSS and JavaScript. That’s why we’ve posted a few of these to keep you updated.

First we have some cool ones JavaScript libraries for creating animations, a CLI tool to help you manage and implement your WordPress site at DigitalOcean, there are also a few resources on the CSS category that will improve how to write CSS in modern applications, and more. Let’s see.

New Resources for Web Designers and Developers (August 2021)

New Resources for Web Designers and Developers (August 2021)

New tools and techniques are emerging every day in web development. And sometimes… Read more

Theather.js

Theater.js is one JavaScript library for writing animation. It comes with a rich UI called “Studio” which makes it more intuitive to use compared to similar libraries. It is also rich in features; you can use it for animate HTML, SVG, WebGL, or use it with a 2D / 3D graphical JavaScript library as Three.js or Pixie.js.

Sailed

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.

Sailed

Metatags

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.

Metatags

Houdini

“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.

Houdini

Sting

A JavaScript library that allows you to write CSS for your application directly in the JavaScript files; also known as CSS-in-JS. The library optimized CSS as it was compiled.

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.

Sting

Unplugin.js

Unplugin is a JavaScript library that aims to provide one unified plugin creation system for construction tools such as Webpack, Rollup and Vite. If you are a developer who wants to support more of these building tools, this is the library you might want to take a closer look at that can save you time and speed up development.

Sting

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.

React Render Tracker

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.

Store

Shaper

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.

Shaper

BeeKeeperStudio

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.

BeeKeeperStudio

Filament Admin

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.

Filament Admin

Motion.dev

JavaScript animation library with a focus on performance and simplicity. It utilizes the Animation API, which allows it to remain small (3.1 kb) while delivering native animation features such as transformation, transitions and keyframes out of the box.

On top of that, it also provides opportunities and facilitations to create an animation that feels more alive.

Motion.dev

Cal.com

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.

Cal.com

Cesium

ONE Cross-browser JavaScript library for creating 3D or 2D objects. It uses WebGL for hardware-accelerated graphics. Designed for dynamic precision and visual quality, Cesium is the perfect library for creating interactive 3D models such as globe, cityscape, terrain and other dynamic visualization.

Cesium

Dropzone

This is another cool JavaScript library worth mentioning. Dropzone.js turns any HTML element into, well, a “dropzone”. You can drag and drop a file onto it.

It will show the preview of the file, handle the upload process as well as reproduce the progress. If you want improve UX to upload files to your site, this is the JavaScript library you want.

Dropzone

SWR

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.

SWR

OppetidKuma

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.

OppetidKuma

Dopefolio

ONE boiler plate and template to quickly create an online portfolio. It is built with only HTML, CSS (Sass) and JavaScript. It is preconfigured, so all you have to do is fill in the HTML page, customize the styles with Sass, and run the NPM command to compile the styles. It’s fast, responsive, and since it’s just a static site, you can easily implement it for static site hosting like Netlify or Cloudflare Pages.

Dopefolio

Nerd

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.

Nerd

Leave a Comment