{"id":2167,"date":"2024-08-30T13:00:30","date_gmt":"2024-08-30T13:00:30","guid":{"rendered":"http:\/\/suimy.me\/?p=2167"},"modified":"2024-09-04T17:11:03","modified_gmt":"2024-09-04T17:11:03","slug":"fresh-resources-for-web-designers-and-developers-august-2024","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/08\/30\/fresh-resources-for-web-designers-and-developers-august-2024\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (August 2024)"},"content":{"rendered":"

August 2024 brings us a collection of new tools, libraries, and resources to help you build better websites<\/a> and applications, and improve your productivity<\/a> as designers and developers. We\u2019ve got everything from design inspiration to development tools, and everything in between. <\/p>\n

Let\u2019s explore and see what\u2019s new this month.<\/p>\n

e18e<\/a><\/h4>\n

e18e<\/strong> 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.<\/p>\n

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.<\/p>\n

\"e18e\"e18e<\/span><\/span><\/figure>\n

FreeFaces Gallery<\/a><\/h4>\n

FreeFaces Gallery<\/strong> is a curated collection of fonts available under various free licenses. It provides a range of typefaces, including Cursive<\/a>, Display, Monospace<\/a>, Sans Serif<\/a>, Serif, and Slab.<\/p>\n

It\u2019s a valuable resource if you\u2019re searching for high quality free fonts<\/a>.<\/p>\n

\"FreeFaces\"FreeFaces<\/span><\/span><\/figure>\n

AppMotion Design<\/a><\/h4>\n

AppMotion<\/strong> 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.<\/p>\n

A useful resource if you\u2019re looking for inspiration in mobile app animations.<\/p>\n

\"AppMotion\"AppMotion<\/span><\/span><\/figure>\n

LogoIpsum<\/a><\/h4>\n

LogoIpsum<\/strong> is a tool that provides a collection of abstract, flexible SVG logos<\/a> in various compositions\u2014vertical, horizontal, small, and large. These logos are suitable for any graphic, UI, or layout style.<\/p>\n

It\u2019s a perfect resource for designers needing temporary placeholder logos before the final design is ready.<\/p>\n

\"LogoIpsum\"LogoIpsum<\/span><\/span><\/figure>\n

ShaderGradient<\/a><\/h4>\n

ShaderGradient<\/strong> is a tool for creating dynamic, moving gradients that can be customized for various designs. It\u2019s available as a React component and can be used in design tools like Figma and Framer.<\/p>\n

A handy tool to bring your designs to life with vibrant gradients.<\/p>\n

\"ShaderGradient\"ShaderGradient<\/span><\/span><\/figure>\n

Shots<\/a><\/h4>\n

Shots.so<\/strong> 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.<\/p>\n

It also offers browser, laptop, and mobile scenes to highlight your work.<\/p>\n

\"Shots.so\"Shots.so<\/span><\/span><\/figure>\n

SneakPeekit<\/a><\/h4>\n

SneakPeekit<\/strong> provides printable wireframe templates<\/a> for designers to sketch ideas and capture insights on paper. It offers various sizes for both desktop and mobile.<\/p>\n

If you prefer planning apps or websites with pencil and paper<\/a>, these templates help speed up the creative process.<\/p>\n

\"SneakPeekit\"SneakPeekit<\/span><\/span><\/figure>\n

SVGMagic<\/a><\/h4>\n

SVGMagic<\/strong> is an open-source package for Next.js projects that simplifies the use of SVGs. It supports both SVG code and .svg<\/code> files with seamless integration with TypeScript and MDX.<\/p>\n

It makes it easy to deliver your creativity in SVG while also improving your development workflow.<\/p>\n

\"SVGMagic\"SVGMagic<\/span><\/span><\/figure>\n

Giscus<\/a><\/h4>\n

Giscus<\/strong> is an open-source comment system for websites that uses GitHub Discussions<\/a> for storing comments and reactions. It offers privacy with no tracking or ads and will always be free.<\/p>\n

It also supports custom themes, multiple languages, and automatic updates from GitHub. It is a flexible and secure choice if you\u2019re looking to add a comment system to your site.<\/p>\n

\"Giscus\"Giscus<\/span><\/span><\/figure>\n

Orbit<\/a><\/h4>\n

Orbit<\/strong> is a GitHub Action specifically designed for a Laravel development environment,<\/a> enabling simple and safe zero-downtime deployments. It offers an easy way to configure your deployment process through a special file, Orbit.toml<\/code>.<\/p>\n

This allows you to deploy your Laravel sites to your server quickly while ensuring that your site remains live throughout the process.<\/p>\n

\"Orbit\"Orbit<\/span><\/span><\/figure>\n

Glaze<\/a><\/h4>\n

Glaze<\/strong> 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<\/a>.<\/p>\n

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.<\/p>\n

\"Glaze\"Glaze<\/span><\/span><\/figure>\n

Motion Number<\/a><\/h4>\n

MotionNumber<\/strong> is a React.js component built on top of Framer Motion<\/a>, designed to smoothly transition, format, and localize numbers.<\/p>\n

It\u2019s a handy library to create dynamic and visually appealing number animations in your projects.<\/p>\n

\"MotionNumber\"MotionNumber<\/span><\/span><\/figure>\n

Zen Browser<\/a><\/h4>\n

Zen<\/strong> is a new browser built on Firefox\u2019s engine. It aims to provide a fast, secure, and privacy-focused web browsing<\/a> experience.<\/p>\n

This browser is designed to ensure your data remains private and secure. A good choice if you\u2019re looking for an alternative browser that respects your privacy.<\/p>\n

\"Zen\"Zen<\/span><\/span><\/figure>\n

Ky<\/a><\/h4>\n

Ky<\/strong> is a lightweight library for modern environments. It aims at improving the native fetch<\/code> API with a simpler interface, method shortcuts, error handling, retries, and JSON support.<\/p>\n

It also offers customization through instances and hooks and includes TypeScript support for better type safety. It\u2019s a great alternative for handling HTTP requests in your projects.<\/p>\n

\"Ky\"Ky<\/span><\/span><\/figure>\n

TailwindCSS Course<\/a><\/h4>\n

This free YouTube course by Chris Sev will help you learn TailwindCSS<\/a>. Alongside learning Tailwind, it also covers essential CSS concepts.<\/p>\n

This course is a comprehensive guide if you\u2019re looking to both master TailwindCSS and understand the fundamentals of design with CSS<\/a>.<\/p>\n

\"TailwindCSS\"TailwindCSS<\/span><\/span><\/figure>\n

Pines<\/a><\/h4>\n

Pines<\/strong> is a UI library designed for Alpine and Tailwind projects. It provides a collection of ready-to-use animations<\/a>, and components like sliders, tooltips, accordions, modals, and more.<\/p>\n

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.<\/p>\n

\"Pines\"Pines<\/span><\/span><\/figure>\n

PHP CSS Parser<\/a><\/h4>\n

PHP-CSS-Parser<\/strong> 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.<\/p>\n

A very useful library if you need to work with and modify CSS programmatically in your PHP application.<\/p>\n

\"PHP-CSS-Parser\"PHP-CSS-Parser<\/span><\/span><\/figure>\n

Noodle<\/a><\/h4>\n

Noodle<\/strong> 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.<\/p>\n

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.<\/p>\n

\"Noodle\"Noodle<\/span><\/span><\/figure>\n

Omi<\/a><\/h4>\n

Omi<\/strong> 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.<\/p>\n

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.<\/p>\n

\"Omi\"Omi<\/span><\/span><\/figure>\n

The post Fresh Resources for Web Designers and Developers (August 2024)<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

August 2024 brings us a collection of new tools, libraries, and resources to help you build better websites and applications, […]<\/p>\n","protected":false},"author":1,"featured_media":2169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2167"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=2167"}],"version-history":[{"count":3,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2167\/revisions"}],"predecessor-version":[{"id":2189,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2167\/revisions\/2189"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/2169"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=2167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=2167"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}