DEV Community

Cover image for Best Post of the Month - April 2023
Jon Snow
Jon Snow

Posted on

1 1 1 1 1

Best Post of the Month - April 2023

1. SVG sphere animation in React.js with anime.js

In this blog post we animate the sphere using anime js in react js. There are many Javascript animation libraries out there, but Anime.js is one of the best. it's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.

SVG sphere animation in React.js  with anime.js



2. Stepper Iteration in React JS with Anime JS

In this blog post we animate the count box using anime js in react js. There are many Javascript animation libraries out there, but Anime.js is one of the best. it's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.

Stepper Iteration in React JS with Anime JS



3. Beautiful SVG Cat Animation in React

Lottie Animation in react



4. CSS 3D Isometric Social Media Menu Hover Effects

CSS 3D Isometric Social Media Menu Hover Effects

CSS 3D Isometric Social Media Menu Hover Effects



5. How to create a scroll to top btn in react js

How to create a scroll to top btn in react js



6. Free 3D Illustrations library for your projects

Casual life 3d icons



7. 25 Killer One-Liners in JavaScript

Some of the example

i. Detect Dark Mode

const prefersDarkMode = window.matchMedia( "(prefers-color-scheme: dark)").matches; 
console.log(prefersDarkMode);
Enter fullscreen mode Exit fullscreen mode

ii. Remove falsy values from array

const removeFalsy = (arr) => arr.filter(Boolean)

removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false]) // ['a string', true, 5, 'another string']
Enter fullscreen mode Exit fullscreen mode

iii. Shuffle an array

const shuffle = arr => arr.sort(() => Math.random() - 0.5);

console.log(shuffle([1, 2, 3, 4, 5])); // [2, 5, 1, 4, 3] (output will vary)
Enter fullscreen mode Exit fullscreen mode


8. 3D Card Hover Effect

3D Card Hover Effect



Free CSS Tools

  1. CSS Glassmorphism Generator

  2. Neumorphism CSS Generator



Thanks for Reading ❤️! Check my website Demo coding for updates about my latest blog posts, video tutorials, and some cool web dev tips. Let's be friends!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay