<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Random</title>
    <description>The latest articles on DEV Community by Random (@random_ti).</description>
    <link>https://dev.to/random_ti</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif</url>
      <title>DEV Community: Random</title>
      <link>https://dev.to/random_ti</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/random_ti"/>
    <language>en</language>
    <item>
      <title>The Company Is Strong. So Why Are 4,000 People Gone?</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Sat, 28 Feb 2026 06:10:58 +0000</pubDate>
      <link>https://dev.to/random_ti/the-company-is-strong-so-why-are-4000-people-gone-3hfj</link>
      <guid>https://dev.to/random_ti/the-company-is-strong-so-why-are-4000-people-gone-3hfj</guid>
      <description>&lt;p&gt;Going to be a rant.&lt;/p&gt;

&lt;p&gt;We just watched a CEO &lt;a href="https://x.com/md_taqui_imam/status/2027274834665992342?s=20" rel="noopener noreferrer"&gt;tweet &lt;/a&gt; that they’re making their company “smaller” and not because revenue collapsed, not because the product failed, not because customers left, but because they can. Nearly half the company, over 4,000 people, gone in one move while the business is still growing, improving profitability, and serving more customers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Read that again.&lt;/strong&gt; This wasn’t survival mode, this was optimization mode.&lt;/p&gt;

&lt;p&gt;The tone of the tweet was calm, transparent, even generous with severance and benefits, which somehow makes it more unsettling. &lt;/p&gt;

&lt;p&gt;The logic was simple: intelligence tools plus flatter teams equal a new way of running a company. Faster decisions, fewer layers, more output per person. So leadership chose to act now instead of cutting slowly over years. And this is what people are missing in the AI debate. It’s not about whether AI writes better code. It’s about compression.&lt;/p&gt;

&lt;p&gt;If a strong, profitable company can say “we need fewer people because AI changes how work gets done,” then the baseline just shifted. Layoffs used to be reactive. Now they’re proactive. “Profitable” used to mean safe. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Now it doesn’t.&lt;/strong&gt; This isn’t framed as survival, it’s framed as restructuring for an intelligence-driven future. And once companies realize 10 people can do the work of 15, they don’t keep 15 out of kindness. They optimize for margins. That’s the uncomfortable truth.&lt;/p&gt;

&lt;p&gt;AI isn’t just a tool inside products anymore, it’s becoming the operating system of companies. And operating systems are designed for efficiency. If this is happening while models are still early, what happens in three years? Maybe the real question isn’t whether AI replaces developers. Maybe it’s how many developers a modern company actually needs. Because once leaders decide that number is lower, they don’t drift toward it. They jump. And that jump is what we just saw.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rant over.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
      <category>news</category>
    </item>
    <item>
      <title>Built Something Crazy This Week – Inkash</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Sat, 14 Feb 2026 13:45:51 +0000</pubDate>
      <link>https://dev.to/random_ti/built-something-crazy-this-week-inkash-17g1</link>
      <guid>https://dev.to/random_ti/built-something-crazy-this-week-inkash-17g1</guid>
      <description>&lt;p&gt;Hey dev's 👋 it's me &lt;strong&gt;&lt;a href="https://taqui.vercel.app" rel="noopener noreferrer"&gt;Taqui&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This week I built something that actually pushed me hard.&lt;/p&gt;

&lt;p&gt;It’s called &lt;strong&gt;Inkash&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Live:&lt;/strong&gt; &lt;a href="https://inkash.vercel.app" rel="noopener noreferrer"&gt;https://inkash.vercel.app&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/taqui-786/inkash" rel="noopener noreferrer"&gt;https://github.com/taqui-786/inkash&lt;/a&gt; (Drop a Star ⭐) &lt;/p&gt;

&lt;p&gt;Inkash is a smart link generator that compresses real data into a short shareable URL.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No database.&lt;/li&gt;
&lt;li&gt;No backend storage.&lt;/li&gt;
&lt;li&gt;The data lives inside the URL itself.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That was the fun part.&lt;/p&gt;


&lt;h2&gt;
  
  
  What Inkash Actually Does
&lt;/h2&gt;

&lt;p&gt;The idea is simple:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Take user input
&lt;/li&gt;
&lt;li&gt;Compress it using the deflate algorithm
&lt;/li&gt;
&lt;li&gt;Convert it into a URL-safe string
&lt;/li&gt;
&lt;li&gt;Generate a shareable link
&lt;/li&gt;
&lt;li&gt;On load, decompress and restore the original content
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So large content becomes a compact link.&lt;br&gt;&lt;br&gt;
When someone opens it, everything rebuilds instantly on the client.&lt;/p&gt;

&lt;p&gt;It feels kind of crazy seeing big data turn into a short URL and still restore perfectly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;it also has markdown editor you can us&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuxfrv2ic908f8cl16ot7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuxfrv2ic908f8cl16ot7.png" alt="editor" width="800" height="493"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Sharing Feature:
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftrd3uos39qda6tu9lddw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftrd3uos39qda6tu9lddw.png" alt="Sharing" width="800" height="464"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The cool thing is,&lt;/p&gt;

&lt;p&gt;You can generate the QR-code of the link and share it&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1y5kjwlfr5d5ewqckkd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1y5kjwlfr5d5ewqckkd.png" alt="QR-code" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ybgvawnn5xodyciaq9b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ybgvawnn5xodyciaq9b.png" alt="save it" width="800" height="120"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Core Compression Logic (Simplified)
&lt;/h2&gt;

&lt;p&gt;Here’s a simplified version of how compression and decompression works:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;deflate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;inflate&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pako&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;compressData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;compressed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;deflate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;btoa&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fromCharCode&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;compressed&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;decompressData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;encoded&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;binary&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;atob&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;encoded&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bytes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Uint8Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;binary&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;charCodeAt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;inflate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bytes&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;to&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;string&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Under the hood, it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Uses the deflate algorithm to reduce payload size
&lt;/li&gt;
&lt;li&gt;Converts binary compressed data into Base64
&lt;/li&gt;
&lt;li&gt;Makes the output URL safe
&lt;/li&gt;
&lt;li&gt;Restores everything safely on load
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Technical Challenges
&lt;/h2&gt;

&lt;p&gt;The real challenge was not just compression.&lt;/p&gt;

&lt;p&gt;It was making sure everything works safely inside a browser URL.&lt;/p&gt;

&lt;p&gt;Here are some things I had to handle:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Making compressed output URL safe
&lt;/li&gt;
&lt;li&gt;Handling corrupted or invalid hashes
&lt;/li&gt;
&lt;li&gt;Respecting browser URL length limits
&lt;/li&gt;
&lt;li&gt;Preventing UI crashes during decompression
&lt;/li&gt;
&lt;li&gt;Managing edge cases with large payloads
&lt;/li&gt;
&lt;li&gt;Keeping everything fully client-side
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If even one character in the URL changes, decompression can fail. So proper validation and error handling was very important.&lt;/p&gt;




&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Next.js
&lt;/li&gt;
&lt;li&gt;TypeScript
&lt;/li&gt;
&lt;li&gt;Client-side compression using pako
&lt;/li&gt;
&lt;li&gt;Modern UI components
&lt;/li&gt;
&lt;li&gt;Clean and scalable architecture
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There is no database involved.&lt;/p&gt;

&lt;p&gt;The link itself is the storage.&lt;/p&gt;

&lt;p&gt;That was the main experiment and honestly the most fun part.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;Building Inkash taught me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How the deflate algorithm works in real usage
&lt;/li&gt;
&lt;li&gt;Binary to Base64 transformations
&lt;/li&gt;
&lt;li&gt;URL encoding and safety concerns
&lt;/li&gt;
&lt;li&gt;Browser URL length constraints
&lt;/li&gt;
&lt;li&gt;How easy it is to break decoding
&lt;/li&gt;
&lt;li&gt;How to build something useful without a backend
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This project broke many times before it became stable. But once it worked, it felt clean and kind of magical.&lt;/p&gt;

&lt;p&gt;If you check it out, I would really love honest feedback.&lt;/p&gt;

&lt;p&gt;What would you improve or add to something like this?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>productivity</category>
    </item>
    <item>
      <title>This portfolio isn’t perfect, but it’s 100% mine</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Sat, 24 Jan 2026 06:26:18 +0000</pubDate>
      <link>https://dev.to/random_ti/this-portfolio-isnt-perfect-but-its-100-mine-3hi5</link>
      <guid>https://dev.to/random_ti/this-portfolio-isnt-perfect-but-its-100-mine-3hi5</guid>
      <description>&lt;p&gt;Hey devs 👋 its me Taqui&lt;/p&gt;

&lt;p&gt;Just wanted to share the story behind my &lt;strong&gt;last&lt;/strong&gt; portfolio.&lt;/p&gt;

&lt;p&gt;I already had a portfolio before this. It looked cool, it worked fine, but for some &lt;strong&gt;reason&lt;/strong&gt; it never felt like it was really mine. I couldn’t fully connect with it.&lt;/p&gt;

&lt;p&gt;The truth is, my older portfolio was mostly a rebuild of &lt;strong&gt;chandai’s&lt;/strong&gt; portfolio. I learned a lot from building it, especially about layout, animations, and structure. But at the end of the day, it still felt like I was wearing someone else’s design.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;So I decided to start again. From zero.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;This time,&lt;/strong&gt; I made one clear rule for myself:&lt;br&gt;
Build something from my own ideas, my own layout decisions, and my own taste.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F68wszlu252fm1amezsde.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F68wszlu252fm1amezsde.png" alt="Full page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I did take inspiration from other great portfolios (because that’s how we all learn), but every section, spacing choice, and interaction was designed and built by me. No copying. No rebuilding someone else’s work.&lt;/p&gt;
&lt;h3&gt;
  
  
  Tech stack I used:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Next.js
&lt;/li&gt;
&lt;li&gt;Tailwind CSS (mostly custom styles)
&lt;/li&gt;
&lt;li&gt;Very little shadcn/ui, only where it made sense, like the contact form
&lt;/li&gt;
&lt;li&gt;Small UI details and interactions done manually instead of relying on libraries
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When you open the site, you’ll notice a subtle &lt;strong&gt;fade-in blur animation.&lt;/strong&gt; That was intentional. I wanted the site to feel calm and smooth, not flashy or loud. Something that feels pleasant to scroll through.&lt;/p&gt;

&lt;p&gt;This isn’t my first portfolio.&lt;br&gt;&lt;br&gt;
But it’s the first one that &lt;strong&gt;truly feels like *me&lt;/strong&gt;*.&lt;br&gt;&lt;br&gt;
And because of that, I’m calling it my last portfolio.&lt;/p&gt;

&lt;p&gt;I’ve attached a demo banner image above so you can get a quick idea of the look and feel.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Live URL (new portfolio):&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://taqui.vercel.app" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Checkout its live 🚀&lt;/a&gt;
 &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Source code:&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/taqui-786/taqui" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Drop a ⭐ on Github&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;If you’re curious, feel free to check it out.&lt;br&gt;&lt;br&gt;
And if the code helps you or inspires you in any way, &lt;strong&gt;dropping a GitHub star&lt;/strong&gt; would honestly mean a lot ⭐&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1hpha1ol9wpb0otafogq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1hpha1ol9wpb0otafogq.png" alt="my footer"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Feedback is welcome.
&lt;/h2&gt;

&lt;p&gt;Happy Show Off Saturday 🚀&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>buildinpublic</category>
    </item>
    <item>
      <title>I Built Everything Fast… Then One Page Destroyed My Confidence</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Tue, 09 Dec 2025 07:04:12 +0000</pubDate>
      <link>https://dev.to/random_ti/i-built-everything-fast-then-one-page-destroyed-my-confidence-ik9</link>
      <guid>https://dev.to/random_ti/i-built-everything-fast-then-one-page-destroyed-my-confidence-ik9</guid>
      <description>&lt;p&gt;Hey buddy, &lt;/p&gt;

&lt;p&gt;So… I built almost the whole app. Shipped every hard thing. Solved every annoying bug.&lt;/p&gt;

&lt;p&gt;And then &lt;strong&gt;one single page&lt;/strong&gt; came out of nowhere and said:&lt;br&gt;&lt;br&gt;
“Bro, sit down.”&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fel30nef8fyrnuydxjws6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fel30nef8fyrnuydxjws6.png" alt="snapgroove"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Welcome to my life with &lt;strong&gt;Snapgroove&lt;/strong&gt; - a tiny tool I’m building to make your screenshots look less like a cry for help. Give them shadows, gradients, device frames… all in one click. Basically: &lt;em&gt;make your work look expensive without knowing design.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;And guess what?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;The core app is done.&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Like actually done.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Editor works
&lt;/li&gt;
&lt;li&gt;Image export is smooth
&lt;/li&gt;
&lt;li&gt;All features tested
&lt;/li&gt;
&lt;li&gt;Logo and branding ready
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Live here → &lt;strong&gt;&lt;a href="https://snapgroove.vercel.app" rel="noopener noreferrer"&gt;https://snapgroove.vercel.app&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;But then…&lt;br&gt;&lt;br&gt;
The landing page happened.&lt;br&gt;&lt;br&gt;
And suddenly I felt like I forgot how to think.&lt;/p&gt;


&lt;h2&gt;
  
  
  &lt;strong&gt;The Fun Part: Building the Actual App&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As a full-stack dev, building features is my comfort zone.&lt;br&gt;&lt;br&gt;
Give me logic, give me APIs, give me bugs that ruin my sleep - I will survive.&lt;/p&gt;

&lt;p&gt;Snapgroove came together pretty fast:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A clean editor
&lt;/li&gt;
&lt;li&gt;Nice export flow
&lt;/li&gt;
&lt;li&gt;Simple UI
&lt;/li&gt;
&lt;li&gt;It’s all open-source too: &lt;strong&gt;taqui-786/Snapgroove&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://github.com/taqui-786/Snapgroove" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Github Repo&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;I even vibe-coded some layouts for the landing page.&lt;br&gt;&lt;br&gt;
But honestly? Everything felt &lt;strong&gt;too generic&lt;/strong&gt; or &lt;strong&gt;too messy&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
I’m just not great at design stuff. And this is the part that always slows me down on every project I make.&lt;/p&gt;

&lt;p&gt;And yes, I know the app itself is still not perfect. It’s in beta. I’m improving it as fast as I can. But landing pages… bro… they hit different.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;The Not-So-Fun Part: The Landing Page Breakdown&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;It’s wild how I can build a full editor in a single sitting, but a landing page will take my brain hostage for days.&lt;/p&gt;

&lt;p&gt;I tried multiple layouts.&lt;br&gt;&lt;br&gt;
I tried being creative.&lt;br&gt;&lt;br&gt;
I even told myself, “Just ship it, nobody cares.”&lt;/p&gt;

&lt;p&gt;But I care.&lt;br&gt;&lt;br&gt;
And nothing feels right.&lt;/p&gt;

&lt;p&gt;Landing pages are weird.&lt;br&gt;&lt;br&gt;
You need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Good design
&lt;/li&gt;
&lt;li&gt;Clean layout
&lt;/li&gt;
&lt;li&gt;The right words
&lt;/li&gt;
&lt;li&gt;The right vibe
&lt;/li&gt;
&lt;li&gt;Something that doesn’t scream “bro, we know you’re a developer”
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And I’m still figuring that out.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;What I Need Help With (Yes, You 😭)&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;If you’re reading this, I’d honestly love your input.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Take a quick look at the app
&lt;/li&gt;
&lt;li&gt;Tell me what confused you
&lt;/li&gt;
&lt;li&gt;Suggest what the landing page should highlight
&lt;/li&gt;
&lt;li&gt;Share any design inspo sites you use
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Anything helps.&lt;br&gt;&lt;br&gt;
I’m a developer who’s way better at &lt;strong&gt;building things&lt;/strong&gt; than &lt;strong&gt;selling them&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
So any tips, design ideas, or copy advice… I’ll take it all.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Why I’m Even Sharing This&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Because building stuff is fun.&lt;br&gt;&lt;br&gt;
But being stuck alone makes it harder.&lt;/p&gt;

&lt;p&gt;And I know I’m not the only dev who can ship complex features in 2 hours but can’t pick a font for 2 weeks.&lt;/p&gt;

&lt;p&gt;If you feel the same, you’re not alone.&lt;br&gt;&lt;br&gt;
We’re in the same boat, staring at Figma like it’s a final exam.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Thanks for Reading 🙏&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;If you have even 2 minutes, your design brain cells could save my entire project.&lt;/p&gt;

&lt;p&gt;Drop any tips.&lt;br&gt;&lt;br&gt;
Share any inspo.&lt;br&gt;&lt;br&gt;
Tell me what looks weird.&lt;br&gt;&lt;br&gt;
Or just say “yo this looks clean” so I don’t cry.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App:&lt;/strong&gt; &lt;a href="https://snapgroove.vercel.app" rel="noopener noreferrer"&gt;https://snapgroove.vercel.app&lt;/a&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Codebase:&lt;/strong&gt; taqui-786/Snapgroove&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Bun is joining Anthropic 🔥</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Wed, 03 Dec 2025 06:48:42 +0000</pubDate>
      <link>https://dev.to/random_ti/bun-is-joining-anthropic-2k19</link>
      <guid>https://dev.to/random_ti/bun-is-joining-anthropic-2k19</guid>
      <description>&lt;p&gt;Big news - &lt;strong&gt;Bun is now joining Anthropic&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
According to the official announcement, Anthropic acquired Bun so it can power &lt;strong&gt;Claude Code&lt;/strong&gt;, the &lt;strong&gt;Claude Agent SDK&lt;/strong&gt;, and future AI-dev tools.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://bun.com/blog/bun-joins-anthropic" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;👉 Official News&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;Bun - the super fast JavaScript/TypeScript runtime, bundler, package manager, and test runner — will now serve as core infrastructure for Anthropic’s developer-focused AI tools.&lt;/p&gt;




&lt;h2&gt;
  
  
  💠 Key points that i extracted
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Bun becomes part of Anthropic’s core engineering stack
&lt;/li&gt;
&lt;li&gt;Bun will directly power Claude Code and future dev tools
&lt;/li&gt;
&lt;li&gt;Faster performance, better DX, and more stability expected
&lt;/li&gt;
&lt;li&gt;Bun stays &lt;strong&gt;open source&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Anthropic will invest full-time engineering support into Bun
&lt;/li&gt;
&lt;li&gt;Goal: build a stronger, AI-supercharged dev workflow&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What the community on Reddit is saying
&lt;/h2&gt;

&lt;p&gt;Reddit thread: &lt;a href="https://www.reddit.com/r/webdev/comments/1pch41f/bun_is_joining_anthropic/" rel="noopener noreferrer"&gt;https://www.reddit.com/r/webdev/comments/1pch41f/bun_is_joining_anthropic/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A quick vibe check from the top comments:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Is this the rug pull people were worried about?”
&lt;/li&gt;
&lt;li&gt;“They bought it because it’s critical infrastructure for them.”
&lt;/li&gt;
&lt;li&gt;“People are overreacting. It’s not a rug pull.”
&lt;/li&gt;
&lt;li&gt;Some users feel this is good for Bun’s long-term health
&lt;/li&gt;
&lt;li&gt;Some are worried it might become paid later (“Bun Pro”)
&lt;/li&gt;
&lt;li&gt;Others think Bun still isn’t mature enough for real-world teams&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A few devs also pointed out they love Bun for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Faster installs
&lt;/li&gt;
&lt;li&gt;Less tooling overhead
&lt;/li&gt;
&lt;li&gt;A cleaner experience than Node
&lt;/li&gt;
&lt;li&gt;Good standard library
&lt;/li&gt;
&lt;li&gt;Solid for new projects
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But yep - the skepticism is still alive.&lt;/p&gt;




&lt;h2&gt;
  
  
  ✅ Pros of the Bun x Anthropic deal
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Stronger engineering support&lt;/strong&gt;&lt;br&gt;
Anthropic has the resources to make Bun more stable and production-ready.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Better dev tools powered by AI&lt;/strong&gt;&lt;br&gt;
Since Bun will power Claude Code and other AI tools, we might see faster, cleaner workflows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Still open source&lt;/strong&gt;&lt;br&gt;
This is a big relief for many devs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Better performance gains&lt;/strong&gt;&lt;br&gt;
Bun already has speed benefits - now with more backing, it could get even better.&lt;/p&gt;


&lt;h2&gt;
  
  
  ⚠️ Cons &amp;amp; concerns from developers
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Fear of monetization&lt;/strong&gt;&lt;br&gt;
A common worry: Bun might slowly drift into “Bun Pro” territory.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Corporate ownership shift&lt;/strong&gt;&lt;br&gt;
Some devs loved Bun’s indie vibe - now they’re unsure if direction will stay community-focused.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Optimized for Anthropic first&lt;/strong&gt;&lt;br&gt;
There’s a worry Bun will become tailored mainly for AI tooling, not general web development.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Maturity concerns&lt;/strong&gt;&lt;br&gt;
A few devs said Bun didn’t feel stable yet in real-world jobs.&lt;/p&gt;


&lt;h2&gt;
  
  
  🔥 My quick take
&lt;/h2&gt;

&lt;p&gt;Honestly, this is a &lt;strong&gt;big move&lt;/strong&gt; - and mostly a good one.&lt;/p&gt;

&lt;p&gt;If Anthropic keeps Bun open-source and improves stability, we might see a new era of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Faster dev workflows
&lt;/li&gt;
&lt;li&gt;AI-first tooling
&lt;/li&gt;
&lt;li&gt;Modern runtimes built for real projects
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Still… the concerns are real.&lt;br&gt;&lt;br&gt;
Nobody wants to wake up one day and find half the runtime behind a paywall.&lt;/p&gt;

&lt;p&gt;For now, I’m excited.&lt;br&gt;&lt;br&gt;
Let’s see how Bun grows with Anthropic behind it. 👀&lt;/p&gt;


&lt;h2&gt;
  
  
  That's it
&lt;/h2&gt;

&lt;p&gt;What do you think is this a good deal or another free tool to be converted into paid stuff, &lt;/p&gt;

&lt;p&gt;Let me know your honest thoughts on this in comments📩&lt;/p&gt;

&lt;p&gt;See you in next blog, till then &lt;strong&gt;Happy Coding&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/taqui-786" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Follow me in Github⭐&lt;/a&gt;
&lt;/p&gt;




&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag__user ltag__user__id__1193992"&gt;
    &lt;a href="/random_ti" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/random_ti"&gt;Random&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/random_ti"&gt;I'm a self-taught Web developer who is always learning and creating cool Project stuffs.&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




&lt;p&gt;&lt;a href="https://github.com/taqui-786" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-100000%3Fstyle%3Dfor-the-badge%26logo%3Dgithub%26logoColor%3Dwhite" alt="github"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/Taquiimam14" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite" alt="twitter"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://taqui-imam.vercel.app" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPortfolio-255E63%3Fstyle%3Dfor-the-badge%26logo%3DAbout.me%26logoColor%3Dwhite" alt="portfolio"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/taquiDevloper" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBuy_Me_A_Coffee-FFDD00%3Fstyle%3Dfor-the-badge%26logo%3Dbuy-me-a-coffee%26logoColor%3Dblack" alt="buymeacoffee"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>career</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Is Self-Taught Coding Still Worth It?</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Mon, 07 Jul 2025 08:02:59 +0000</pubDate>
      <link>https://dev.to/random_ti/is-self-taught-coding-still-worth-it-3i43</link>
      <guid>https://dev.to/random_ti/is-self-taught-coding-still-worth-it-3i43</guid>
      <description>&lt;p&gt;So you’re broke, confused, 22, hate your job, and think learning to code will fix it all. &lt;/p&gt;

&lt;p&gt;Hello friends it's me &lt;a href="https://taqui-imam.vercel.app" rel="noopener noreferrer"&gt;Md taqui imam&lt;/a&gt; and &lt;strong&gt;WELCOME&lt;/strong&gt; to the most popular side quest of the 2020s.&lt;/p&gt;

&lt;p&gt;You probably googled:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"How to learn to code in 3 months"
&lt;/li&gt;
&lt;li&gt;"Is self-taught coding dead?"
&lt;/li&gt;
&lt;li&gt;"Can I get a dev job with no degree and bad WiFi?"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And now you’re here, trying to figure out if teaching yourself programming is still a thing or just another internet scam like dropshipping crypto monkey NFTs.&lt;/p&gt;

&lt;p&gt;Let’s talk 😅&lt;/p&gt;




&lt;h2&gt;
  
  
  ✅ Yes. Self-taught coding still works.
&lt;/h2&gt;

&lt;p&gt;If anyone tells you it doesn’t, they probably just failed at it and now run a bootcamp charging $10k to copy-paste ChatGPT responses into React components.&lt;/p&gt;

&lt;p&gt;The truth is: companies still care more about &lt;em&gt;what you can build&lt;/em&gt; than &lt;em&gt;where you learned&lt;/em&gt;. A solid GitHub &amp;gt; random diploma from “Any Tech Institute.”&lt;/p&gt;




&lt;h2&gt;
  
  
  But no, it’s not “easy now because of AI”
&lt;/h2&gt;

&lt;p&gt;Yeah yeah, you’ve seen the TikToks:&lt;br&gt;&lt;br&gt;
“Learn Python in 10 minutes!”&lt;br&gt;&lt;br&gt;
“Make $120k with just HTML and ChatGPT!”&lt;br&gt;&lt;br&gt;
Sure, and I can become a surgeon by watching Grey’s Anatomy.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu5cembv6i0coztc9yky7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu5cembv6i0coztc9yky7.png" alt="Error Image" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;AI is a tool, not a cheat code. It &lt;em&gt;helps&lt;/em&gt; you learn faster, but it won’t do the learning for you. You still need to suffer through broken layouts, error messages, and existential dread like the rest of us.&lt;/p&gt;




&lt;h2&gt;
  
  
  What should you actually learn?
&lt;/h2&gt;

&lt;p&gt;You don’t need a PhD in rocket science to start. Here’s a basic path:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTML/CSS: Make things look not horrible.&lt;/li&gt;
&lt;li&gt;JavaScript: Make things do stuff.&lt;/li&gt;
&lt;li&gt;React or Next.js: Make things do stuff better.&lt;/li&gt;
&lt;li&gt;GitHub: So you can tell employers “Look, I actually built something.”&lt;/li&gt;
&lt;li&gt;Optional: Python + Flask/Django: If you prefer backend and chill.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s it. Don’t get lost in “Should I learn Rust or Go or Zig or Assembly for fun?” You’re not building a compiler, you’re building your way out of retail.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A request to senior dev's who are reading this, Can you please comment 📩 down a proper Web development roadmap for the new beginners of 2025.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Build real things. Not to-do apps.
&lt;/h2&gt;

&lt;p&gt;Everyone makes a to-do app. Stop it. Build dumb but fun projects:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Rate My Chai” — users rank local tea stalls&lt;/li&gt;
&lt;li&gt;“Is It A Scam?” — submit WhatsApp messages for instant sussy score&lt;/li&gt;
&lt;li&gt;“BrokenCSS” — a portfolio of your worst designs (trust me, it’s relatable)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Build stuff that you enjoy. Passion beats perfection.
&lt;/h2&gt;

&lt;p&gt;Will you get a job?&lt;br&gt;
Eventually, yes. But not on Day 30 of your Udemy course.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Be ready to:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Apply to 100+ jobs&lt;/li&gt;
&lt;li&gt;Hear nothing&lt;/li&gt;
&lt;li&gt;Doubt everything&lt;/li&gt;
&lt;li&gt;Land one job&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Suddenly feel like a genius again&lt;br&gt;
This is normal. This is the grind. And yes, it’s still worth it.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvchiq6bt51tr9ykp3fwr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvchiq6bt51tr9ykp3fwr.png" alt="Final Thoughts" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;Self-taught devs built half the internet. The other half was built by &lt;strong&gt;unpaid interns and stackoverflow.com&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;You don’t need permission to start. Just curiosity, caffeine, and stubbornness. So stop overthinking, pick a tutorial, and start building broken crap until it’s less broken.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;And remember:&lt;/strong&gt; The only thing worse than bad code is never writing any.&lt;/p&gt;

&lt;p&gt;Now go. &lt;em&gt;&lt;strong&gt;Learn. Build. Break. Repeat.&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
The future still belongs to those who Google error messages best.&lt;/p&gt;

&lt;p&gt;Seeee you in next blog 👋&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Happy Learning &amp;amp; Coding&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>ai</category>
      <category>career</category>
      <category>learning</category>
    </item>
    <item>
      <title>Please take a Look 🙌</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Fri, 27 Jun 2025 04:59:25 +0000</pubDate>
      <link>https://dev.to/random_ti/please-take-a-look-49of</link>
      <guid>https://dev.to/random_ti/please-take-a-look-49of</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/random_ti" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/random_ti/i-made-a-portfolio-please-clap-4e5d" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;I made a portfolio, Please clap 🙃&lt;/h2&gt;
      &lt;h3&gt;Random ・ Jun 26&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#opensource&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>JavaScript Date object is finally being replaced 😱</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Tue, 29 Apr 2025 10:47:53 +0000</pubDate>
      <link>https://dev.to/random_ti/javascript-date-object-is-finally-being-replaced-d10</link>
      <guid>https://dev.to/random_ti/javascript-date-object-is-finally-being-replaced-d10</guid>
      <description>&lt;p&gt;The new Temporal API is coming to JavaScript and will make working with dates and times MUCH easier.&lt;/p&gt;

&lt;p&gt;Hello Dev’s its me &lt;strong&gt;&lt;a href="https://mdtaquiimam.vercel.app/" rel="noopener noreferrer"&gt;Md Taqui Imam&lt;/a&gt;&lt;/strong&gt;, So let's explore the new javascript temporal Api and please don't forget to drop a "🔥❤️🦄🙌" and Follow me.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/taqui-786" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Follow me in Github⭐&lt;/a&gt;
 &lt;/p&gt;
&lt;h2&gt;
  
  
  🤔 What is Temporal Api ?
&lt;/h2&gt;

&lt;p&gt;This new JavaScript feature makes working with dates and times easier and more reliable than the old Date object. It offers various types for handling dates, times, and durations, with many options to modify them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here’s why it’s a complete upgrade 🛠️:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;1️⃣ Immutable objects (no more accidental mutations!)&lt;br&gt;
2️⃣ Built-in timezone support without external libraries&lt;br&gt;
3️⃣ Intuitive API for date arithmetic&lt;br&gt;
4️⃣ Clear distinction between wall-clock time and exact time&lt;br&gt;
5️⃣ First-class duration objects for time spans.&lt;/p&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyo6jeo5j35qgend0wi28.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyo6jeo5j35qgend0wi28.png" alt="Save it for later"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  📌 How to access Temporal Api ?
&lt;/h2&gt;

&lt;p&gt;Currently Temporal API can be accessed via Temporal API polyfill its you choice of using npm or yarn packages. This makes it possible for you to use Temporal even if the native support is missing, as you will see later in this document.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;With NPM:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; @js-temporal/polyfill
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;With YARN:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;yarn add @js-temporal/polyfill
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Now Let’s See Some Examples 🔥
&lt;/h2&gt;

&lt;p&gt;The code example in the image shows how much cleaner date operations become with Temporal.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Adding Time to a Date:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpktls6qd0njak9kv6akq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpktls6qd0njak9kv6akq.png" alt="image_one"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This code adds 2 hours to the current date and time, then formats it as a string.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Comparing Dates:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fceyz74xe75f8x88bfvco.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fceyz74xe75f8x88bfvco.png" alt="image_two"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This code compares the current date and time with December 31, 2022, returning -1, 0, or 1 depending on whether the first date is before, equal to, or after the second date.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Creating a Date from a String:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx3qt8lpvllycfidhat7h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx3qt8lpvllycfidhat7h.png" alt="image_three"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This code creates a date object from an ISO date string and formats it as a string.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Subtracting Time from a Date:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpsfc46vnc37u1way9q3p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpsfc46vnc37u1way9q3p.png" alt="image_four"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This code subtracts 3 months from the current date and time, then formats it as a string.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Calculating the Duration Between Two Dates:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhjq2mes2gx8mbj2hkd6y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhjq2mes2gx8mbj2hkd6y.png" alt="image_five"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Works out how long the period between two dates is. You might use this when signing a JWT to work out how many seconds from now your expiry date is.&lt;/p&gt;

&lt;p&gt;This code calculates the number of seconds between the current date and time and December 25, 2025&lt;/p&gt;


&lt;h2&gt;
  
  
  That’s it
&lt;/h2&gt;

&lt;p&gt;For more examples and code reference checkout 👉 &lt;a href="https://temporal-api-cheatsheet.rodneylab.com/" rel="noopener noreferrer"&gt;Temporal API Cheatsheet:&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Who else 😅 is excited to never write “new Date()” again?&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;okay, see you in my next blog, till then&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Happy coding.&lt;/strong&gt;&lt;/p&gt;




&lt;div class="ltag__user ltag__user__id__1193992"&gt;
    &lt;a href="/random_ti" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/random_ti"&gt;Random&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/random_ti"&gt;I'm a self-taught Web developer who is always learning and creating cool Project stuffs.&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;p&gt;&lt;a href="https://github.com/taqui-786" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-100000%3Fstyle%3Dfor-the-badge%26logo%3Dgithub%26logoColor%3Dwhite" alt="github"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/Taquiimam14" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite" alt="twitter"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://mdtaquiimam.vercel.app" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPortfolio-255E63%3Fstyle%3Dfor-the-badge%26logo%3DAbout.me%26logoColor%3Dwhite" alt="portfolio"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/taquiDevloper" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBuy_Me_A_Coffee-FFDD00%3Fstyle%3Dfor-the-badge%26logo%3Dbuy-me-a-coffee%26logoColor%3Dblack" alt="buymeacoffee"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Have you Read this ?</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Fri, 20 Dec 2024 12:30:20 +0000</pubDate>
      <link>https://dev.to/random_ti/have-you-read-this--4fdo</link>
      <guid>https://dev.to/random_ti/have-you-read-this--4fdo</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/random_ti" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/random_ti/7-secret-ui-libraries-no-one-talks-about-20kk" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;7 Secret UI Libraries No One Talks About 🔥&lt;/h2&gt;
      &lt;h3&gt;Random ・ Dec 15 '24&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#frontend&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>discuss</category>
    </item>
    <item>
      <title>7 Secret UI Libraries No One Talks About 🔥</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Sun, 15 Dec 2024 11:14:59 +0000</pubDate>
      <link>https://dev.to/random_ti/7-secret-ui-libraries-no-one-talks-about-20kk</link>
      <guid>https://dev.to/random_ti/7-secret-ui-libraries-no-one-talks-about-20kk</guid>
      <description>&lt;p&gt;Are you tired of building UI components from scratch? Let me introduce you to some amazing UI libraries that will save you tons of time and make your websites look fantastic!&lt;/p&gt;

&lt;p&gt;These libraries offer ready-to-use components that are both beautiful and functional.&lt;/p&gt;

&lt;p&gt;let’s Explore, And don’t forget to &lt;a href="https://github.com/taqui-786****" rel="noopener noreferrer"&gt;Follow Me in Github&lt;/a&gt; 🙏,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fam7om1cg5nvompcsu8xo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fam7om1cg5nvompcsu8xo.png" alt="Save it for later" width="800" height="120"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://ui.lukacho.com/components" rel="noopener noreferrer"&gt;1. Lukacho UI&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frpc7dp48y2v613318bl6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frpc7dp48y2v613318bl6.png" alt="LukachoUi" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A minimalist and modern UI component library that focuses on clean design principles.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://ui.lukacho.com/components" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎨 Clean and modern design aesthetic&lt;/li&gt;
&lt;li&gt;⚡ Lightweight and performance-focused&lt;/li&gt;
&lt;li&gt;📱 Fully responsive components&lt;/li&gt;
&lt;li&gt;🎯 Easy integration with popular frameworks&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://htmlrev.com/" rel="noopener noreferrer"&gt;2. HTMLRev&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3511xe6rk6xcqqc16wbt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3511xe6rk6xcqqc16wbt.png" alt="HTMLrev" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A comprehensive collection of HTML templates and components perfect for quick project setups.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://htmlrev.com/" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎁 Free and premium templates&lt;/li&gt;
&lt;li&gt;💻 Cross-browser compatibility&lt;/li&gt;
&lt;li&gt;🛠️ Easy customization options&lt;/li&gt;
&lt;li&gt;✨ Regular updates and additions&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.hyperui.dev/" rel="noopener noreferrer"&gt;3. HyperUI&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbwhbazjzyddg5e3bhwzc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbwhbazjzyddg5e3bhwzc.png" alt="Hyperui" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An extensive Tailwind CSS component library that offers a wide range of pre-built elements.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hyperui.dev/" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎯 Tailwind CSS optimized&lt;/li&gt;
&lt;li&gt;📦 Copy-paste ready components&lt;/li&gt;
&lt;li&gt;🎨 Customizable design tokens&lt;/li&gt;
&lt;li&gt;💪 Production-ready code.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.material-tailwind.com/blocks" rel="noopener noreferrer"&gt;4. Material Tailwind Blocks&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5gjso1wp309ulva60j5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5gjso1wp309ulva60j5.png" alt="Material Tailwind" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Material Tailwind PRO — Supercharge Your Development With Powerful Blocks&lt;br&gt;
Beautiful material design components built with Tailwind CSS and Material Design principles.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.material-tailwind.com/blocks" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎨 Material Design aesthetics&lt;/li&gt;
&lt;li&gt;⚡ Tailwind CSS integration&lt;/li&gt;
&lt;li&gt;📱 Responsive by default&lt;/li&gt;
&lt;li&gt;🔧 Easy customization&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://magicui.design/" rel="noopener noreferrer"&gt;5. MagicUI Design&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qp9yccb2w5di16wzyfr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qp9yccb2w5di16wzyfr.png" alt="MagicUi" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A magical collection of UI components with unique animations and interactions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://magicui.design/" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✨ Beautiful animations&lt;/li&gt;
&lt;li&gt;🎯 Accessibility focused&lt;/li&gt;
&lt;li&gt;🎨 Modern design patterns&lt;/li&gt;
&lt;li&gt;💻 Developer-friendly API.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://ui.aceternity.com/" rel="noopener noreferrer"&gt;6. Aceternity UI&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3xui47h74jxz0qfnkdx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3xui47h74jxz0qfnkdx.png" alt="AcernityUi" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A next-generation UI component library with focus on modern web experiences.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://ui.aceternity.com/" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🚀 Modern animations&lt;/li&gt;
&lt;li&gt;📦 Ready-to-use components&lt;/li&gt;
&lt;li&gt;🎨 Customizable themes&lt;/li&gt;
&lt;li&gt;⚡ Optimized performance.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://motion-primitives.com/" rel="noopener noreferrer"&gt;7. Motion Primitives&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq4bmx965ryc00ae3r1sc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq4bmx965ryc00ae3r1sc.png" alt="Motion Primitives" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A specialized library focused on animation and motion components for web applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://motion-primitives.com/" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Checkout ✨&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎬 Advanced animation controls&lt;/li&gt;
&lt;li&gt;⚡ Performance optimized&lt;/li&gt;
&lt;li&gt;🎯 Easy to implement&lt;/li&gt;
&lt;li&gt;📱 Cross-platform support.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Remember, these libraries are constantly evolving with new components and features being added regularly.&lt;/p&gt;

&lt;p&gt;Pick the one that best matches your project needs and coding style! 🎉&lt;/p&gt;

&lt;p&gt;And see you in next blog post, till then Byy, Have a Nice Day.&lt;/p&gt;

&lt;h2&gt;
  
  
  Happy coding!
&lt;/h2&gt;





&lt;div class="ltag__user ltag__user__id__1193992"&gt;
    &lt;a href="/random_ti" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/random_ti"&gt;Random&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/random_ti"&gt;I'm a self-taught Web developer who is always learning and creating cool Project stuffs.&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;&lt;a href="https://github.com/taqui-786" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-100000%3Fstyle%3Dfor-the-badge%26logo%3Dgithub%26logoColor%3Dwhite" alt="github" width="95" height="28"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/Taquiimam14" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite" alt="twitter" width="83" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://mdtaquiimam.vercel.app" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPortfolio-255E63%3Fstyle%3Dfor-the-badge%26logo%3DAbout.me%26logoColor%3Dwhite" alt="portfolio" width="120" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/taquiDevloper" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBuy_Me_A_Coffee-FFDD00%3Fstyle%3Dfor-the-badge%26logo%3Dbuy-me-a-coffee%26logoColor%3Dblack" alt="buymeacoffee" width="161" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>frontend</category>
    </item>
    <item>
      <title>React 19 is now stable ! What’s New 👇</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Sun, 08 Dec 2024 12:43:56 +0000</pubDate>
      <link>https://dev.to/random_ti/react-19-is-now-stable-whats-new-1k3b</link>
      <guid>https://dev.to/random_ti/react-19-is-now-stable-whats-new-1k3b</guid>
      <description>&lt;p&gt;React 19 has arrived with exciting new features and improvements!&lt;/p&gt;

&lt;p&gt;Hello Dev’s its me &lt;strong&gt;&lt;a href="https://mdtaquiimam.vercel.app/" rel="noopener noreferrer"&gt;Md Taqui Imam&lt;/a&gt;&lt;/strong&gt;, The &lt;strong&gt;&lt;a href="https://react.dev/blog/2024/12/05/react-19" rel="noopener noreferrer"&gt;React 19&lt;/a&gt;&lt;/strong&gt; is now stable so let’s explore what’s new and how you can use these features in your projects.&lt;/p&gt;

&lt;p&gt;This guide will walk you through the most important updates with practical examples.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/taqui-786" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer"&gt;Follow me in Github⭐&lt;/a&gt;
&lt;/p&gt;




&lt;h2&gt;
  
  
  Actions and Form Handling ⭐
&lt;/h2&gt;

&lt;p&gt;Actions are one of the biggest additions in React 19. They make it easier to handle form submissions and data mutations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;UpdateProfile&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;submitAction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;isPending&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useActionState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;previousState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;formData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;formData&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;updateProfile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// No error&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Failed to update profile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt;
 &lt;span class="p"&gt;},&lt;/span&gt;
 &lt;span class="kc"&gt;null&lt;/span&gt;
 &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;submitAction&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;disabled&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Updating…&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Update Profile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;error&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;}
&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/form&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Using Form Status 🟢
&lt;/h2&gt;

&lt;p&gt;The new &lt;strong&gt;&lt;code&gt;useFormStatus&lt;/code&gt;&lt;/strong&gt; hook makes it easy to show loading states:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useFormStatus&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dom&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;SubmitButton&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;pending&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useFormStatus&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

 &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;disabled&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;pending&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;pending&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Submitting…&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Submit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  New Hooks 🎉
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. useOptimistic 🆕&lt;/strong&gt;&lt;br&gt;
This hook helps create instant feedback while waiting for server responses:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { use } from 'react';
function UserProfile({ userPromise }) {
 const user = use(userPromise);

 return (
 &amp;lt;div&amp;gt;
 &amp;lt;h1&amp;gt;{user.name}&amp;lt;/h1&amp;gt;
 &amp;lt;p&amp;gt;{user.email}&amp;lt;/p&amp;gt;
 &amp;lt;/div&amp;gt;
 );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyz27hhslrxv2pxywsmeh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyz27hhslrxv2pxywsmeh.png" alt="Save it " width="800" height="120"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Document Metadata Support
&lt;/h2&gt;

&lt;p&gt;React 19 now supports metadata tags natively:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;BlogPost&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/title&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;meta&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;description&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;summary&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;canonical&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/article&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Also checkout This Blog
&lt;/h2&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/random_ti" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/random_ti/7-secret-ui-libraries-no-one-talks-about-20kk" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;7 Secret UI Libraries No One Talks About 🔥&lt;/h2&gt;
      &lt;h3&gt;Random ・ Dec 15 '24&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#frontend&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;






&lt;h2&gt;
  
  
  Asset Loading Improvements
&lt;/h2&gt;

&lt;p&gt;New APIs for optimizing resource loading:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;preload&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;preinit&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;preconnect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dom&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="c1"&gt;// Preload important resources&lt;/span&gt;
 &lt;span class="nf"&gt;preload&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/fonts/main.woff2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;as&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;font&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
 &lt;span class="nf"&gt;preinit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/styles/critical.css&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;as&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;style&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
 &lt;span class="nf"&gt;preconnect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.example.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Main&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;&lt;strong&gt;Web Components Support&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;React 19 now fully supports custom elements:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;custom&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;
 &lt;span class="nx"&gt;stringProp&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
 &lt;span class="nx"&gt;numberProp&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
 &lt;span class="nx"&gt;objectProp&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt; &lt;span class="na"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;bar&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}}&lt;/span&gt;
 &lt;span class="nx"&gt;onCustomEvent&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;detail&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
 &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Other Improvements 🛠️
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Ref as a Prop&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Old way with forwardRef&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;OldInput&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;forwardRef&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
 &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="err"&gt;…&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="c1"&gt;// New way in React 19&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;NewInput&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;…&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="err"&gt;…&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;&lt;strong&gt;Better Error Reporting 🔥&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;React 19 provides clearer error messages and better hydration error reporting:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;root&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createRoot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;container&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="na"&gt;onCaughtError&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="c1"&gt;// Handle errors caught by Error Boundaries&lt;/span&gt;
 &lt;span class="nf"&gt;logError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="p"&gt;},&lt;/span&gt;
 &lt;span class="na"&gt;onUncaughtError&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="c1"&gt;// Handle errors not caught by Error Boundaries&lt;/span&gt;
 &lt;span class="nf"&gt;reportFatalError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion / That’s it 😅
&lt;/h2&gt;

&lt;p&gt;React 19 brings many exciting features that make development easier and more efficient. The new form handling capabilities, hooks, and improved asset loading will help developers build better applications with less code.&lt;/p&gt;

&lt;p&gt;Remember that while these features are now stable, it’s recommended to test thoroughly when upgrading existing applications to React 19.&lt;/p&gt;

&lt;p&gt;For more information, check out the &lt;a href="https://react.dev/blog/2024/12/05/react-19" rel="noopener noreferrer"&gt;official React 19 announcement &lt;/a&gt;and documentation.&lt;/p&gt;

&lt;p&gt;And see you in next blog post, till then Byy, Have a Nice Day.&lt;/p&gt;
&lt;h2&gt;
  
  
  Happy coding!
&lt;/h2&gt;




&lt;div class="ltag__user ltag__user__id__1193992"&gt;
    &lt;a href="/random_ti" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/random_ti"&gt;Random&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/random_ti"&gt;I'm a self-taught Web developer who is always learning and creating cool Project stuffs.&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;p&gt;&lt;a href="https://github.com/taqui-786" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-100000%3Fstyle%3Dfor-the-badge%26logo%3Dgithub%26logoColor%3Dwhite" alt="github" width="95" height="28"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/Taquiimam14" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite" alt="twitter" width="83" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://mdtaquiimam.vercel.app" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPortfolio-255E63%3Fstyle%3Dfor-the-badge%26logo%3DAbout.me%26logoColor%3Dwhite" alt="portfolio" width="120" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/taquiDevloper" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBuy_Me_A_Coffee-FFDD00%3Fstyle%3Dfor-the-badge%26logo%3Dbuy-me-a-coffee%26logoColor%3Dblack" alt="buymeacoffee" width="161" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>react</category>
      <category>programming</category>
    </item>
    <item>
      <title>useActionState — A New Hook in React 🎉</title>
      <dc:creator>Random</dc:creator>
      <pubDate>Tue, 02 Jul 2024 09:21:23 +0000</pubDate>
      <link>https://dev.to/random_ti/useactionstate-a-new-hook-in-react-5blm</link>
      <guid>https://dev.to/random_ti/useactionstate-a-new-hook-in-react-5blm</guid>
      <description>&lt;p&gt;&lt;strong&gt;Hello Developers 👋&lt;/strong&gt;, &lt;/p&gt;

&lt;p&gt;It’s me your friend &lt;a href="https://mdtaquiimam.vercel.app" rel="noopener noreferrer"&gt;Md Taqui Imam&lt;/a&gt;, and today I’m going to explain a new and exciting hook in React called &lt;strong&gt;useActionState&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://github.com/taqui-786" rel="noopener noreferrer"&gt;Follow me in Github⭐&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is useActionState?
&lt;/h2&gt;

&lt;p&gt;useActionState is a new React hook that helps us update state based on the result of a form action.&lt;/p&gt;

&lt;p&gt;It’s like a smart helper that remembers things for us and can change them when we submit a form.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;&lt;a href="https://react.dev/reference/react/useActionState" rel="noopener noreferrer"&gt;Checkout Official Documentation🚀&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Important Note: Right now, useActionState is only available in React’s Canary and experimental channels. To get the most out of it, you’ll need to use a framework that supports React Server Components.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  How to use useActionState?
&lt;/h2&gt;

&lt;p&gt;To use this hook, we first need to import it from React:&lt;/p&gt;

&lt;p&gt;import { useActionState } from 'react';&lt;br&gt;
Then, we can use it in our component like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const [state, formAction, isPending] = useActionState(actionFunction, initialState);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;Here’s what each part means:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;‘state’&lt;/strong&gt; is our current form state&lt;br&gt;
&lt;strong&gt;‘formAction’&lt;/strong&gt; is a new action we’ll use in our form&lt;br&gt;
&lt;strong&gt;‘actionFunction’&lt;/strong&gt; is the function that runs when the form is submitted&lt;br&gt;
&lt;strong&gt;‘initialState’&lt;/strong&gt; is the starting value of our state&lt;/p&gt;
&lt;h2&gt;
  
  
  When to use useActionState:
&lt;/h2&gt;

&lt;p&gt;Use this hook when you want to update state based on form submissions, especially if you’re using Server Components and want quicker responses.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s make a simple counter form using useActionState:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm() {
  const [state, formAction] = useActionState(increment, 0);
  return (
    &amp;lt;form&amp;gt;
      {state}
      &amp;lt;button formAction={formAction}&amp;gt;Increment&amp;lt;/button&amp;gt;
    &amp;lt;/form&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;In this example,&lt;/strong&gt; every time we click the button, our count goes up by one. The useActionState hook takes care of updating the state when the form is submitted.&lt;/p&gt;
&lt;h2&gt;
  
  
  For More Detail and example checkout this video 👇
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/GgyP0_b-WPY"&gt;
&lt;/iframe&gt;
&lt;/p&gt;
&lt;h2&gt;
  
  
  That’s it 😅
&lt;/h2&gt;

&lt;p&gt;Remember, the best way to learn is by doing.&lt;/p&gt;

&lt;p&gt;So when &lt;strong&gt;useActionState&lt;/strong&gt; becomes more widely available, give it a try in your projects and see how it can improve your forms!&lt;/p&gt;
&lt;h2&gt;
  
  
  Alert ⚠️
&lt;/h2&gt;

&lt;p&gt;Don't forget to checkout my new article 🫡&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyhcsbol19i5nmy0pdczb.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyhcsbol19i5nmy0pdczb.jpg" alt="nextjs" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/p/d01672dbea7c" rel="noopener noreferrer"&gt;Click Here👋&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;...&lt;/p&gt;
&lt;h2&gt;
  
  
  Happy coding!
&lt;/h2&gt;




&lt;div class="ltag__user ltag__user__id__1193992"&gt;
    &lt;a href="/random_ti" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1193992%2Ff72bad2f-7d5c-4d02-ac87-d2ec645042da.gif" alt="random_ti image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/random_ti"&gt;Random&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/random_ti"&gt;I'm a self-taught Web developer who is always learning and creating cool Project stuffs.&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;p&gt;&lt;a href="https://github.com/taqui-786" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-100000%3Fstyle%3Dfor-the-badge%26logo%3Dgithub%26logoColor%3Dwhite" alt="github" width="95" height="28"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/Taquiimam14" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite" alt="twitter" width="83" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://mdtaquiimam.vercel.app" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPortfolio-255E63%3Fstyle%3Dfor-the-badge%26logo%3DAbout.me%26logoColor%3Dwhite" alt="portfolio" width="120" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/taquiDevloper" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBuy_Me_A_Coffee-FFDD00%3Fstyle%3Dfor-the-badge%26logo%3Dbuy-me-a-coffee%26logoColor%3Dblack" alt="buymeacoffee" width="161" height="28"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>react</category>
    </item>
  </channel>
</rss>
