Temporal API: Native Date Handling for JavaScript

🚫 Almost nobody ships raw JavaScript Date to production anymore. And for good reason. In real-world apps, we default to dayjs or date-fns immediately. Not because we love extra dependencies. Because Date is mutable, timezone-sensitive, and easy to get subtly wrong. I’ve seen renewal logic fail because of this pattern: - mutate a date - compute diff with millisecond math - DST hits - off-by-one billing error The root issue is design. Date mixes time, timezone, and calendar logic into one object. Temporal fixes this: - Immutable operations - Clear types: PlainDate, Instant, ZonedDateTime - No manual millisecond arithmetic - Explicit timezone handling Browser support: - Available in modern Chrome and Firefox. - Safari is currently in Technical Preview. Practical takeaway: If you maintain a TypeScript or Node.js codebase, start evaluating Temporal. Over time, this could replace your date library and eliminate an entire class of bugs. Are you planning to adopt Temporal, or waiting for full Safari support? #javascript #typescript #nodejs #webdev #frontend #backend #tc39 #softwareengineering #devexperience

I used to think JavaScript performance issues only came from big mistakes. Heavy libraries. Bad algorithms. Huge assets. But in real projects, I kept finding something else… Small coding habits. The kind that work fine. The kind nobody questions. The kind that quietly make apps slower over time. Things like: • Using `Array.includes()` for large repeated lookups • Deep cloning big objects without realizing the cost • Blocking the main thread with heavy work • Updating the DOM again and again inside loops Individually, they seem tiny. Together, they decide whether your app feels smooth or sluggish. I wrote a practical guide with real examples and fixes you can apply immediately 👇 🔗 https://lnkd.in/dhvzzenc #JavaScript #WebDevelopment #Frontend #Performance #Programming

You've read the threads. You've seen the comparisons. You've nodded along to "React has problems" posts for years. Now do something about it. Open your terminal. Run this: npm create @granularjs/app my-super-app That's it. No config files to set up. No boilerplate to copy-paste. No 15-minute YouTube tutorial required. In under 30 seconds, you'll have a fully working app with: - Reactive state that updates the DOM directly — no virtual DOM, no diffing, no reconciliation - No re-renders — ever. Change a value, only the DOM nodes that use it update - No JSX, no TSX — plain JavaScript that does exactly what it says - Built-in router, SSR, query client, forms, WebSockets, virtual lists — batteries included - Global stores with one line: just export a reactive value from any file No useEffect. No useMemo. No useCallback. No dependency arrays. No stale closures. No race conditions between renders. The entire reactive model works outside of component lifecycles. State is a first-class primitive, not something bolted onto a rendering engine. You don't need to migrate anything. You don't need to convince your team. You don't need permission. Just run the command. Explore the code. Form your own opinion. If React is really fine, 30 seconds won't change your mind. But if it isn't — you just found the alternative. npm create @granularjs/app my-super-app Granular is open source: https://lnkd.in/dZGxj8Dy #javascript #frontend #webdev #opensource #reactivity

React 19 just killed useMemo and useCallback. Let that sink in for a second. The new React Compiler automatically figures out what needs memoization. No more wrapping every other function in useCallback like a paranoid developer at 3 AM. I've spent embarrassing amounts of time debugging stale closures from bad memoization. Gone. Here's what actually matters in React 19: → The Compiler rewrites your code for performance behind the scenes. Instagram already runs on it. Early numbers show ~2x rendering speed. → forwardRef is dead. ref is just a prop now. Finally. → <Context.Provider> becomes just <Context>. Small change, but honestly? It's the little things. → Server Components ship for real this time. Faster first paint, better SEO, less client-side JavaScript. → Actions let you slap a function on a <form> and handle mutations without the usual boilerplate dance. The one that caught me off guard: useOptimistic. You set state optimistically on the client, and if the server disagrees, it just rolls back. No manual error handling gymnastics. Also React.lazy is getting replaced by promise-as-child syntax inside Suspense. Cleaner async loading without the wrapper. Real talk — this is the biggest single-version jump React has made since hooks dropped in 16.8. What feature are you most excited about (or most skeptical of)? #reactjs #webdev #javascript

"I’m excited to share my project: a Real-Time Typing Speed Tester! Built using HTML, CSS, and vanilla JavaScript, this app tracks user performance under pressure. It was a great exercise in managing state and handling real-time user input. Key Features: - Dynamic Timer: 15s, 30s, and 60s modes. - Live Metrics: Real-time calculation of WPM (words per minute) and mistake tracking. - Responsive Design: Clean, modern UI that works across devices. - Persistence: High-score tracking to keep users coming back for a new PB. I’m constantly looking for ways to refine my front-end skills, and this project helped me dive deeper into event listeners and interval management. Check it out here: - https://lnkd.in/gFS8mrp5 GitRepo:- https://lnkd.in/gjdC3u49 #WebDevelopment #JavaScript #FrontEnd #CodingProject #HTML #CSS"

Ever wonder why your website feels sluggish even though your code "looks fine"? I've been there. Spending hours debugging performance issues without understanding what's actually happening under the hood. That's exactly why I created this in-depth look at browser rendering. "How Browsers Render: A Developer's Guide" breaks down the invisible process that turns your code into what users actually see. What you'll learn: ✅ The actual pipeline from URL to pixels (and why each stage matters) ✅ What the DOM really is—and why it's not the same as HTML ✅ How CSS gets processed and applied (CSSOM explained simply) ✅ Why some changes trigger expensive repaints while others don't ✅ How to use Chrome DevTools to see this process in action ✅ Practical debugging strategies based on browser internals This is part of my "Zero to Full Stack Developer" series—where we build real understanding from the ground up. Read here: https://lnkd.in/gdVY-RE6 Follow the complete series: https://lnkd.in/g2urfH2h What performance issue surprised you most when you first learned about browser rendering? #WebDevelopment #FullStackDeveloper #Programming #JavaScript #FrontendDevelopment #WebPerformance #SoftwareEngineering #BrowserEngineering #LearnToCode #DevTools #TechBlog

⚛️ React 19 quietly improves how we load external scripts For a long time, loading third-party scripts in React felt… awkward. Need Google Analytics, Stripe, Maps, or some SDK? You probably reached for 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 and manually injected a <script> tag into the DOM. It worked but it wasn’t great. The old approach came with problems: ❌ Manual DOM manipulation ❌ Boilerplate code ❌ Risk of loading the same script multiple times ❌ Tricky timing and race-condition bugs All that friction just to load a script. 🚀 What’s new in React 19? React 19 makes <script> tags first-class citizens. ✅ You can render <script> directly in JSX ✅ React handles placement and deduplication automatically ✅ Even if multiple components render the same script, it’s loaded only once 💡 Why this matters  - Scripts can live next to the components that need them  - Better dependency co-location  - Fewer global setup files  - Fewer hidden side effects  - Cleaner code and better mental models It’s a small change, but one that quietly improves everyday React development especially for apps that rely on third-party SDKs. Sometimes the best improvements aren’t flashy APIs, just fewer foot-guns. #React19 #FrontendDevelopment #JavaScript #WebDevelopment #Programming

⚛️ React 19 introduces a simple but powerful shift, script tags are now first class citizens. For years, loading external scripts in React felt awkward. Whenever we needed Google Analytics, Stripe, Maps, or any third party SDK, we reached for useEffect and manually injected a <script> into the DOM. It worked, but it was fragile, verbose, and easy to get wrong. Why the old approach was painful ❌ Manual DOM manipulation ❌ Extra boilerplate code ❌ Risk of duplicate script loads ❌ Race conditions when components mounted multiple times All of this just to load a script. What changes with React 19? ✅ You can now render the <script> tag directly inside your component, just like any other JSX. ✅ React automatically handles hoisting, placement, and deduplication. ✅ Even if multiple components render the same script, it loads only once. Why this matters? - This unlocks true dependency co-location. - If a component needs a script, it declares it itself. - No more global setup files. - No more hidden side effects. - Cleaner code, fewer bugs, and better mental models. This is one of those small API changes that quietly improves how we build React apps every day. #React19 #FrontendDevelopment #JavaScript #WebDevelopment #TechTrends #Programming

What if your state could say "no" to a bad update? In every major frontend framework — React, Vue, Svelte, Solid — state updates are fire-and-forget. Once you call setState or update a signal, it's done. If the new value is invalid, you find out after the fact. You react to the damage. Granular does something no other framework does: it lets you intercept a state change before it commits. before(cart.total).change((next) => { if (next < 0) return false; // blocked }); Return false and the update never happens. The state stays untouched. No rollbacks, no cleanup, no useEffect gymnastics. This is a subscribable chain that runs before the reactive graph propagates. It's not middleware. It's not a validator bolted on top. It's built into the core reactive engine. Use cases: → Form validation that prevents invalid state from ever existing → Business rules enforced at the state level (cart can't go negative, quantity can't exceed stock) → Optimistic UI with a safety net — cancel the update if the server says no → Permission guards — block state mutations based on user role The before()/after() pattern is what reactivity should have been from the start: a chain you can observe, intercept, and control at every stage. Granular is open source: https://lnkd.in/dZGxj8Dy npm create @granularjs/app my-app #javascript #frontend #webdev #opensource #reactivity

React stale state is not a bug. It’s us (and closures). I used to think React was “randomly” giving me old state. Turns out, it wasn’t React at all. In JavaScript, when a function is created, it freezes the values around it. That’s a closure. Whatever the state was at that moment — that’s what the function remembers. React just makes this more obvious. Every render creates a new version of your functions. But if you write useEffect(() => { ... }, []), you’re basically saying: “Hey React, keep using the first version forever.” So yeah — your effect runs, your handler fires… but it’s talking to state from the past. That’s the “stale closure” everyone trips over. For years we’ve dealt with this by: tweaking dependency arrays throwing values into useRef or just disabling the linter and moving on Recently, I’ve been liking the direction of useEffectEvent — it lets an effect run when it should, but still read the latest state without hacks. Big takeaway for me: If your hook is ignoring dependencies, it’s not optimized — it’s just outdated. Curious how others are handling this in real codebases 👇 Still useRef, or trying newer patterns? P.S : For more information on this topic , please read out my blog at medium https://lnkd.in/gDY6ZSgf #React #JavaScript #Frontend #Engineering