Fresh Resources for Web Designers and Developers (July 2024)

July is here, and we are back with a fresh set of resources for our fellow web developers. This month, we have a variety of tools and libraries covering different areas of web development, from libraries, frameworks, guides, and best practices, to inspiration. Without further ado, let’s jump in and see the full list.

Autofix CI

Autofix.ci is a tool for GitHub Action that automatically fixes your pull requests. You can define a GitHub Action workflow, run your code-fixing tools, and it will update your pull requests as needed. It works with existing linters, formatters like Prettier and ESLint, and other tools without extra configuration. It supports all pull requests, including those from forks and unprotected branches.

Composer Unused

composer-unused is a tool that scans your code to show unused Composer dependencies. Unlike the composer why command, which only shows why a package is installed, composer-unused checks if the symbols provided by a package are used in your code.

ESLint Config Inspector

ESLint Config Inspector is a visual tool for understanding and inspecting the ESLint flat configuration file, introduced in ESLint v9.0.0. Managing config files is easy but can still be complex as it grows. This tool helps you see which rules are enabled or disabled, making it simpler to understand and manage your ESLint setup.

MySQL Explain

MySQL Explain is a web app that visualizes the MySQL EXPLAIN output. Instead of struggling with MySQL’s cryptic output, you can use this tool to quickly identify performance problems, helping you to avoid slow or costly database queries.

Harlequin

Harlequin is a powerful and colorful database client run from the Terminal. It works on any shell environment, terminal, or machine, and supports various databases, including MySQL and Postgres. It features a data catalog to view tables and columns, a query editor with autocomplete and multiple tabs, and a results viewer that can handle over a million results interactively.

Write Description Text

An extensive guide on writing alt text. It covers the very basics and principles of text descriptions, and provides instructions for both decorative images, which are included for aesthetic purposes, and informative images, which communicate information, convey mood, or enhance user experience.

Even though the guide is designed to be used in BBC News articles, there are many things we can learn and apply to our own websites.

Shipping Incrementally

If you work in the tech industry, you might be familiar with the pressure to build and ship products quickly, often leading to rushed, stressful, and risky releases. This article, by Zahra Traboulsi, advocates for the shipping incrementally approach. It requires conscious effort to adopt but ultimately makes daily tasks easier and reduces the stress associated with project deadlines. It’s well worth the read for anyone working in tech.

Once: Writebook

Writebook is a user-friendly tool that allows you to instantly publish your own books on the web for free, without needing a publisher. It makes it easy to turn your text and pictures into a simple, browsable online book format. It makes the publishing process easier compared to traditional blogging and social media posting.

Animotion

Animotion is a library that allows you to create animated presentations easily using Svelte, Reveal.js, and Tailwind CSS. It uses SvelteKit as the template, making it simple to deploy your presentations with the SvelteKit adapters, including Cloudflare Pages, Netlify, Vercel, and more.

Vue.js Crash Course 2024

The Vue.js Crash Course 2024 is a 3-hour YouTube tutorial by Traversy Media. It covers the basics of the Vue.js framework. You’ll learn about components, directives, lifecycle, events, and other essential topics. A great resource for mastering Vue.js fundamentals, whether you’re just getting started or looking for a refresher.

Wire in the Wild

Wire in the Wild is a website showcasing real-world projects built with Laravel Livewire or the TALL Stack. It provides inspiration and demonstrates the possibilities of Livewire. You can submit your own projects, making it a valuable resource for both developers and clients.

Minji

Minji is a free iPhone app that helps you manage projects and clients easily. With a simple, intuitive interface, you can create, organize, and track tasks, filter projects by status, and manage clients. A perfect app for freelancers, team leads, and project managers looking to be more productive.

dotUI

dotUI provides a collection of modern, mobile-friendly UI components built on top of React Aria Components. It’s designed to help you create an accessible React application and user-friendly interface with ease.

Lume

Lume is a static site generator for Deno. It’s designed to be easy to use, while also offering flexibility and support for various file formats like Markdown, YAML, and JavaScript. It simplifies your workflow by avoiding the hassle of managing many packages and complex bundlers.

Laravel Error Solutions

laravel-error-solutions is a Laravel package that enhances error pages by displaying helpful solutions directly on them. It provides automatic fix buttons for common issues and also supports AI-generated solutions. It helps you resolve problems in your Laravel application more efficiently.

SSH Action

SSH Action allows you to run remote SSH commands as part of your CI/CD workflows. It’s useful for automating tasks on remote servers, such as deploying code, running scripts, or managing server configurations, all directly from your GitHub repository. It can help you streamline your app or website deployment process and operations.

Lenis

Lenis is a lightweight and efficient library for smooth scrolling. Designed for modern browsers. It supports features like WebGL scroll syncing and parallax effects, making it a great choice for adding stylish and fluid scrolling to your site.

Themosis

Themosis improves WordPress development by introducing modern practices like MVC and tools from Laravel. It helps you build more organized, scalable WordPress sites with features like custom routing and a CLI from Laravel.

WP ORM

WP-ORM is a library that brings Eloquent-style ORM functionality to WordPress. It provides an easy-to-extend ORM with support for core WordPress models like posts, users, and comments. It integrates well with some of the popular frameworks in WordPress such as Bedrock, Themosis, or Wordplate.

Swapy

Swapy is a JavaScript library that makes any layout draggable and swappable with just a few lines of code. It’s framework-agnostic, meaning you can use it with any JavaScript framework or library including React, Vue, Svelte, and others.