Fresh Resources for Web Designers and Developers (August 2024)
August 2024 brings us a collection of new tools, libraries, and resources to help you build better websites and applications, and improve your productivity as designers and developers. We’ve got everything from design inspiration to development tools, and everything in between.
Let’s explore and see what’s new this month.
e18e
e18e is a community-driven initiative focused on improving the JavaScript ecosystem. It aims to bring together people who are passionate about JavaScript by sharing knowledge, contributing ideas, and collaborating.
It has three key areas of focus: cleaning up and modernizing dependency trees, speeding up core packages and frameworks, and offering modern, lighter alternatives to core packages.
FreeFaces Gallery
FreeFaces Gallery is a curated collection of fonts available under various free licenses. It provides a range of typefaces, including Cursive, Display, Monospace, Sans Serif, Serif, and Slab.
It’s a valuable resource if you’re searching for high quality free fonts.
AppMotion Design
AppMotion is a mobile motion design gallery that showcases the best, hand-picked examples of app motion design. The gallery allows you to explore various design elements, such as checkboxes, pinch, spin, morph, and more.
A useful resource if you’re looking for inspiration in mobile app animations.
LogoIpsum
LogoIpsum is a tool that provides a collection of abstract, flexible SVG logos in various compositions—vertical, horizontal, small, and large. These logos are suitable for any graphic, UI, or layout style.
It’s a perfect resource for designers needing temporary placeholder logos before the final design is ready.
ShaderGradient
ShaderGradient is a tool for creating dynamic, moving gradients that can be customized for various designs. It’s available as a React component and can be used in design tools like Figma and Framer.
A handy tool to bring your designs to life with vibrant gradients.
Shots
Shots.so is a free online tool that helps you create beautiful mockups quickly. Simply upload your screenshot, select from scenes with the latest Apple devices, and customize the details.
It also offers browser, laptop, and mobile scenes to highlight your work.
SneakPeekit
SneakPeekit provides printable wireframe templates for designers to sketch ideas and capture insights on paper. It offers various sizes for both desktop and mobile.
If you prefer planning apps or websites with pencil and paper, these templates help speed up the creative process.
SVGMagic
SVGMagic is an open-source package for Next.js projects that simplifies the use of SVGs. It supports both SVG code and .svg files with seamless integration with TypeScript and MDX.
It makes it easy to deliver your creativity in SVG while also improving your development workflow.
Giscus
Giscus is an open-source comment system for websites that uses GitHub Discussions for storing comments and reactions. It offers privacy with no tracking or ads and will always be free.
It also supports custom themes, multiple languages, and automatic updates from GitHub. It is a flexible and secure choice if you’re looking to add a comment system to your site.
Orbit
Orbit is a GitHub Action specifically designed for a Laravel development environment, enabling simple and safe zero-downtime deployments. It offers an easy way to configure your deployment process through a special file, Orbit.toml.
This allows you to deploy your Laravel sites to your server quickly while ensuring that your site remains live throughout the process.
Glaze
Glaze is a utility-based animation library for the web, built on top of GSAP. It provides a powerful way to create complex animations with minimal code using a utility-first approach like TailwindCSS.
It supports responsive design and allows you to easily define animations for different screen sizes. A handy tool for adding dynamic animations to your web projects.
Motion Number
MotionNumber is a React.js component built on top of Framer Motion, designed to smoothly transition, format, and localize numbers.
It’s a handy library to create dynamic and visually appealing number animations in your projects.
Zen Browser
Zen is a new browser built on Firefox’s engine. It aims to provide a fast, secure, and privacy-focused web browsing experience.
This browser is designed to ensure your data remains private and secure. A good choice if you’re looking for an alternative browser that respects your privacy.
Ky
Ky is a lightweight library for modern environments. It aims at improving the native fetch API with a simpler interface, method shortcuts, error handling, retries, and JSON support.
It also offers customization through instances and hooks and includes TypeScript support for better type safety. It’s a great alternative for handling HTTP requests in your projects.
TailwindCSS Course
This free YouTube course by Chris Sev will help you learn TailwindCSS. Alongside learning Tailwind, it also covers essential CSS concepts.
This course is a comprehensive guide if you’re looking to both master TailwindCSS and understand the fundamentals of design with CSS.
Pines
Pines is a UI library designed for Alpine and Tailwind projects. It provides a collection of ready-to-use animations, and components like sliders, tooltips, accordions, modals, and more.
It also allows you to easily copy and paste these elements into your projects. A convenient resource if you want to quickly add interactive elements to your site.
PHP CSS Parser
PHP-CSS-Parser is a PHP library that parses CSS files, allowing you to extract them into a data structure. It allows you to manipulate the CSS and then output it as optimized CSS.
A very useful library if you need to work with and modify CSS programmatically in your PHP application.
Noodle
Noodle is an open-source app created to help students stay organized with their studies. It is designed to provide a single platform that meets all the needs of students, much like GitHub does for developers.
At the time of this writing, Noodle is currently in development, but you can follow the project on GitHub to stay updated on its progress.
Omi
Omi is a web components framework. It provides a wide range of features with over 100 templates, form components, and icon sets, with support for both object-oriented and data-oriented programming.
It is written in JSX, integrates seamlessly with modern tools like TailwindCSS, and provides everything you need for building web applications, including routing and styling through Constructable Stylesheets.
