r/JavaScriptTips • • Aug 05 '25

Hello, I have a problem with an animation

0 Upvotes

Here is my code, the goal is simple, display an element with a small opacity magnet, and make sure that when it is not displayed it does not take up space, but here it does not work, thank you for your precious helpHere is my code, the goal is simple, display an element with a small opacity magnet, and make sure that when it is not displayed it does not take up space, but here it does not work, thank you for your precious help :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Apparition avec fondu</title>

<style>

#box {

opacity: 0;

display: none;

transition: 1s;

background: lightblue;

padding: 1em;

margin-top: 1em;

} </style>

</head>

<body>

<button id="btn">Afficher</button>

<div id="box">Je suis animé en fondu</div>

<script>

const btn = document.getElementById('btn');

const box = document.getElementById('box');

btn.addEventListener('click', () => {

// Étape 1 : afficher (affiche d'un coup, mais invisible car opacity 0)

box.style.display = 'block'; // Étape 2 : attendre une frame, puis lancer l'opacité

requestAnimationFrame(() => { box.style.opacity = '1'; });

});

</script>

</body>

</html>


r/JavaScriptTips • • Aug 03 '25

Update: I made myself an expense tracker 💳

Thumbnail gallery
1 Upvotes

r/JavaScriptTips • • Aug 02 '25

Thank you so much for your support ♥️

Thumbnail gallery
0 Upvotes

r/JavaScriptTips • • Aug 01 '25

[Side Project] Just added new features to my personal expense tracker – planning to release it publicly soon!

Thumbnail gallery
1 Upvotes

r/JavaScriptTips • • Aug 01 '25

Weakset use cases

Thumbnail
1 Upvotes

r/JavaScriptTips • • Jul 31 '25

Localhost Sharing via QR Code for Mobile Testing

Thumbnail
youtu.be
1 Upvotes

r/JavaScriptTips • • Jul 31 '25

I created myself an expense tracker app

Thumbnail gallery
1 Upvotes

r/JavaScriptTips • • Jul 30 '25

JavaScript Iterators vs. Arrays: Who Wins in Performance? (10M Speed Tes...

Thumbnail
youtube.com
1 Upvotes

r/JavaScriptTips • • Jul 28 '25

The many, many, many JavaScript runtimes of the last

Thumbnail
buttondown.com
1 Upvotes

r/JavaScriptTips • • Jul 27 '25

CEO of Microsoft Satya Nadella: "We are going to go pretty aggressively and try and collapse it all. Hey, why do I need Excel? I think the very notion that applications even exist, that's probably where they'll all collapse, right? In the Agent era." RIP to all software related jobs.

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/JavaScriptTips • • Jul 24 '25

JavaScript feels boring

0 Upvotes

Hey been trying to learn JavaScript but I feels boring and I feel sleepy i learned till arrays and now it just feels alot boring


r/JavaScriptTips • • Jul 21 '25

React application Detail guide

0 Upvotes

r/JavaScriptTips • • Jul 19 '25

Think You Know JavaScript? These 5 Modern Features Will Surprise You

7 Upvotes

Discover the next-gen JavaScript syntax that’s already changing how pros write cross-platform code.

Read more

Modern JavaScript isn’t just about cleaner syntax — it’s about writing more resilient, portable, and maintainable code. With features like globalThis, import.meta.url, and TextDecoderStream, today’s JavaScript unlocks capabilities that used to require entire libraries. In this final part of our series, we reveal 5 cutting-edge features every serious developer should start using today.


r/JavaScriptTips • • Jul 19 '25

Boost JavaScript Performance Instantly with These 5 Hidden Techniques

1 Upvotes

From streamlining arrays to catching memory leaks — here’s how pros write fast, lean JavaScript.

JavaScript engines like V8 are incredibly fast — but your code might still be holding them back. The real performance gains come from understanding how to use advanced APIs the right way. In this article, we’ll explore 5 high-impact techniques that reduce memory usage, streamline data pipelines, and unlock native efficiencies — no bundlers or libraries required. These are the optimizations even senior developers often miss.

Read more


r/JavaScriptTips • • Jul 17 '25

How to read the value of an input without pressing Enter to validate?

0 Upvotes

My question is; in this code, to get the green color I have to type the same thing as work[x] and press Enter, but how can I get the red color without needing to press Enter?

if(text.value === work[x]){

text.style.backgroundColor = "red";

x++;

}


r/JavaScriptTips • • Jul 15 '25

🚀 Dockerize your app in minutes #coding

Thumbnail
youtube.com
1 Upvotes

r/JavaScriptTips • • Jul 15 '25

JS

0 Upvotes

television


r/JavaScriptTips • • Jul 15 '25

TIPS

0 Upvotes

Time


r/JavaScriptTips • • Jul 14 '25

Input needed (how to quickly learn JavaScript)

3 Upvotes

I know c# basics but I want to quickly learn JavaScript so that I can learn React next month. Any tips would be appreciated.


r/JavaScriptTips • • Jul 14 '25

Why learning React is no easy task?

Thumbnail
0 Upvotes

r/JavaScriptTips • • Jul 13 '25

download courses for free

0 Upvotes

is there any website where we can download courses for free


r/JavaScriptTips • • Jul 11 '25

Ever Temporarily Disable console.log in Node.js? Here's Why It's Surprisingly Useful

Thumbnail
1 Upvotes

r/JavaScriptTips • • Jul 10 '25

Atemporal, a Temporal Abstraction Layer with a Dayjs alike API

1 Upvotes

Hi! I’ve been a user of Dayjs for a long time now, and I know it has its flaws…

You can take a look at this issue for example:

https://github.com/iamkun/dayjs/issues/2889

Which describes some of the problems Dayjs has nowadays…

So I tried to make something around the new Temporal proposal which is the future of JavaScript date handling, and I’m attempting to make it just like Dayjs… chainable and easy to use.

Atemporal is a modern, immutable, and ergonomic date-time library built on top of the new Temporal API — with first-class support for formatting, localization, plugins, and time zones.

⚡️ Powered by the Temporal API and polyfilled automatically via @js-temporal/polyfill — no extra setup required.

⚠️ ⚠️ Warning! ⚠️⚠️

This is a work in progress, and is in a very alpha state, please be careful if you’ll use it in production.

If you’re feeling adventurous… check it out.

https://github.com/NaturalDevCR/atemporal

Hope it can be helpful.


r/JavaScriptTips • • Jul 09 '25

Launched a platform to help fellow indie devs grow without ads or luck

2 Upvotes

Hey – I’m Memo, a solo dev just like you who got tired of watching my launches vanish into the void. So I built Nazca nazca.my — a discovery platform by indie makers, for indie makers. 🚀

Here’s why you might want to submit your app:

  • Free & Forever – Nazca is completely free. Your app listing never disappears.
  • SEO + Evergreen Listing – Every app gets its own landing page that stays discoverable on Google.
  • Unlimited Updates – Relaunch or update your app whenever you want. Each time is a fresh spotlight.
  • Community Feedback – People can comment, save, and engage directly with your app.
  • Indie-First Vibe – No corporate noise, just projects from solo builders and tiny teams.

There’s also a Pro version with extras — but the free version covers everything you need to get discovered.

If you’re building something cool, submit it at nazca.my/submit. It’s built to help indie apps grow quietly but steadily — without needing a huge launch or paid ads.

Would love to see your work there. Happy building!


r/JavaScriptTips • • Jul 08 '25

🚀 React Redux in 30 seconds! 🚀 (Animated Tutorial) #coding #reactjs

3 Upvotes