Frontend Planet 🪐

🚀 Issue 109 of our #newsletter is here, packed with the latest in #frontend. 👉 frontendplanet.com/latest-resourc… 👈 Subscribe for more weekly insights 💌 at frontendplanet.com/newsletter/

Generate stunning AI-powered illustrations and graphics for your projects with Ilus.ai. Transform your ideas into beautiful art effortlessly. by @KristjanRetter 👉 ilus.ai 👈 #AI #Design

Conduct effective and engaging retrospectives with Kollabe's free online tools, perfect for Scrum and Agile teams to improve processes and collaboration. by @Kollabe_ 👉 kollabe.com/retrospectives 👈

Discover the key insights and trends from the 2023 State of React survey, highlighting the latest in React development, tooling, and community practices. 👉 2023.stateofreact.com/en-US 👈 #React #webdeveloper #FrontEnd

Unleash your creativity with Figma AI! 🚀 Get started faster, find assets quickly, and let AI handle the details. From generating mockups to renaming layers and translating text. by @figma 👉 figma.com/ai/ 👈 #Figma #AI #DesignTools

Notion Sites is here! Easily turn your Notion pages into websites. Perfect for personal blogs, portfolios, or team wikis. No coding needed! by @NotionHQ 👉 notion.so/product/sites 👈 #Notion #WebDesign #NoCode

projectManager reddit.com/r/programmerhu…

The trick here was creating a function that takes GSAP eases and converts them to CSS linear() 🔥 A flicker effect is a GSAP RoughEase that gets converted 👨‍🔬 Once you generate different custom easings, you can drop them in and use them elsewhere 🤙

Astro 4.7 is here to raise the bar! ... The Astro dev toolbar, that is. We've made it easier than ever to build toolbar apps through several API improvements, new helpers and more. astro.build/blog/astro-470/

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @​keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }

Get your free copy of the Frontend Handbook 2024!

Fantastic animation! Love seeing the behind-the-scenes process. 👏

🧞‍♂️ Today we have some ideas for scroll-based text highlight animations for you! Have a look: tympanus.net/codrops/2024/0… #gsap #animation

Discover top-tier, AI-created stock images and royalty-free photos for any project, available at no cost. by @lummipics 👉 lummi.ai/explore 👈

Explore a collection of Open Graph examples to enhance your website's social media integration and user engagement. by @DmytroKrasun 👉 opengraphexamples.com 👈

Transform your code snippets into visually appealing images with CodeSnap's editor. Perfect for developers aiming to enrich their digital content. by @Mokkapps 👉 codesnap.dev 👈

An open-source React.js library for advanced canvas shading, It includes components like Lumiflex, Zenitho, and Novatrix for diverse visual effects. by @latent_cat 👉 uvcanvas.com 👈

Dive into Gradientor by Rodolfo Fanti. Move, click, scroll, and press SPACEBAR to craft & copy unique CSS gradients. by @3DRudy 👉 gradientor.app 👈

Explore diverse web animation techniques through a practical comparison, making a ball bounce using Vanilla JS and various other methods. by @hearsparkbox 👉 #vanilla-js" target="_blank" rel="nofollow noopener">sparkbox.github.io/bouncy-ball/#v… 👈

Dive into the Popover API's versatility for UI components like dropdowns and tooltips, featuring flexible anchor positioning and seamless interaction. by @FrontendMasters 👉 frontendmasters.com/blog/menus-toa… 👈

Explore the comprehensive guide to visual testing using Playwright. Learn techniques to ensure your app's appearance stays consistent across browsers and devices. by @browsercatco 👉 browsercat.com/post/ultimate-… 👈