🛠️ Make decisions without hand-holding.
🔥 Learn through trial, error, and iteration.
Pick a project, no matter how small—a to-do app, a portfolio, or even a simple game. The point isn’t perfection—it’s progress.
The best way to learn code? Write code. 💻
Stop Watching, Start Building 🚀
Tutorials are great for learning concepts, but they can quickly become a crutch. Real growth as a coder comes when you step away from “tutorial hell” and start building projects.
Why? Because building forces you to:
💡 Solve real problems.
Generics make sure fetchData knows exactly what type of data it’s dealing with — no surprises at runtime!
💬 How are you using generics in your TypeScript projects?
🚀 Ever wondered how to write a single function that works for ANY data type?
That’s where TypeScript generics come in!
Think of them as templates for your code, making it reusable and type-safe.
Below is a simple example to fetch data from an API with a generic type:
🗄️ Database Magic in Pure JavaScript: Meet Node.js SQLite! 🚀
Node.js now has a native SQLite module that lets you create and query databases directly in your JavaScript code.
Note: Currently experimental 🛠️
12 Days of OpenAI: Day 2 🔥
Who is watching? 🔗 youtu.be/yCIYS9fx56U?...
Server Components 🌐: Offload rendering, fetch data, improve performance.
The Sweet Spot 🎯: Balance client and server components to unleash the full potential of your React apps.
Embrace the duality, and happy coding! 🚀
⚛️ React Devs, listen up! 🔊
The React team said it best: "Client components are fine, btw. The goal isn't to move everything to React server components. You need both. Client and server."
Client Components ⚡️: Essential for dynamic UIs and user interactions.
It's easy to use, just pass in the keys and the value type. Happy typing 😁!
#TypeScript #WebDevelopment
🚀 TypeScript Tip: Record<Keys, Type> is a handy utility type that helps you create an object type with specified keys and value types.
This comes in handy when you want to ensure that an object has a certain set of keys and their respective value types.
💡 In your `useEffect` hook, you can check if the `beforeunload` event is triggered and display a confirmation dialog if necessary.
Follow @ruckydev.bsky.social for more React tips.
#reactjs
🚨 Detecting page exits with React? 🤔
Use `useEffect` with `beforeunload` event! 💡
Here's how it works:
🚨 When the user navigates away from the page, the `beforeunload` event is triggered.
4. After the delay, it updates the real count
The result? A super responsive UI that feels fast and smooth!
Have you tried useOptimistic hook yet? What cool uses can you think of for your projects?
Check out the attached code snippet for a simple counter example. Here's what's happening:
1. We create an optimistic count that updates instantly
2. When you click "Increment", you see the count go up immediately
3. Behind the scenes, it simulates a delay (like a network request)
How does it work?
1. You give it your current state
2. You provide a function to update that state
3. It returns an "optimistic" version of the state that you can use right away
Why "optimistic"?
Because it optimistically shows the result of an action before it's actually complete!
🚀 React Developers: Introducing useOptimistic - The Hook for Instant UI Updates!
What is useOptimistic hook?
It's a new React hook that lets you show an updated UI state immediately, even while an async action (like a network request) is still in progress.
🚀 React Component Libraries to Check Out in 2024
• ShadcnUI - ui.shadcn.com
• Mantine - mantine.dev
• Material UI - lnkd.in/dfyZ2…
• Ant Design - ant.design
• Vercel Geist - vercel.com/geist
• Tailwind UI - tailwindui.com
• Chakra UI - chakra-ui.com
• Next UI - nextui.org
