Dimitar Yanev’s Post

𝗧𝗵𝗮𝘁 𝗲𝘅𝘁𝗿𝗮 <𝗱𝗶𝘃> 𝗰𝗼𝗺𝗲𝘀 𝘄𝗶𝘁𝗵 𝗮 𝗰𝗼𝘀𝘁 𝗪𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝘄𝗵𝗲𝗻 𝘄𝗲 𝘂𝘀𝗲 <𝗱𝗶𝘃> 𝗶𝗻𝘀𝘁𝗲𝗮𝗱 𝗼𝗳 <> </>? <𝗱𝗶𝘃></𝗱𝗶𝘃> creates a real DOM element. <> </> doesn’t render anything in the DOM. That means:  • 𝗠𝗼𝗿𝗲 𝗺𝗲𝗺𝗼𝗿𝘆 𝘂𝘀𝗮𝗴𝗲  • 𝗠𝗼𝗿𝗲 𝘄𝗼𝗿𝗸 𝗳𝗼𝗿 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗮𝗻𝗱 𝗹𝗮𝘆𝗼𝘂𝘁  • 𝗛𝗮𝗿𝗱𝗲𝗿 𝘁𝗼 𝗱𝗲𝗯𝘂𝗴 𝗮𝗻𝗱 𝗶𝗻𝘀𝗽𝗲𝗰𝘁 Fragment avoids all of that by keeping the DOM clean. div is still needed for styling, layout, events, refs, CSS targeting. Are there other differences? #reactjs #javascript #frontend #webdevelopment

Frontend Tip: If your website feels slow, it’s probably not your code, it’s your assets. Here’s what I always do: • Compress images before uploading • Use SVGs instead of PNGs where possible • Lazy load images Small changes, big performance boost. #frontend #webperformance #javascript

Just built a smoky fluid effect 🔥 This is the kind of effect you usually see on highend, award-winning websites and I broke it down step by step in a YouTube tutorial. From layout → 3D setup → fluid distortion, everything is covered in a simple way. 🎥 Watch the full tutorial: https://lnkd.in/gnEc3U3i #webgl #threejs #reactthreefiber #frontend #webdev #javascript #3danimation #creativecoding

React allows accessing the latest props and states in useEffect/useLayoutEffect without causing re-renders. The useEffectEvent hook will help achieve this. The hook helps extract non-reactive logic from useEffect webhooks. Non-reactive logic refers to when we don't want to perform any action. The useEffectEvent hook wraps a callback function and returns an Effect Event function, and whenever it gets called, the function has access to the latest props and state. So, it won't trigger a re-render, unlike in the case of dependency arrays. But it's not the replacement of the dependency array, as that is usually required to trigger effects. You should try it in your workflow as per the use cases. #react #javascript #frontend #hooks

Most websites feel static. Scroll… nothing happens. No feedback. No motion. No life. So developers try to fix it: ❌ Add one library for scroll ❌ Another for parallax ❌ Another for counters ❌ Another for text effects Now the site is heavy and messy. There should be a simpler way. ✅ One setup ✅ Multiple effects ✅ Lightweight ✅ Easy to use That’s exactly what I built 👇 👉 MotionFlow.dev Turn static websites into smooth experiences — without complexity. #motionflow #webdev #frontend #buildinpublic #javascript

💡 How do you implement dark mode in your projects? I recently built a simple dark/light mode toggle using CSS variables and JavaScript in my portfolio. In this carousel, I’m sharing the exact steps I used. Sometimes, small features like this make a huge difference in user experience. 🔗 Check out my portfolio here: https://lnkd.in/d5PJ_nj8 Curious to know 👇 How do you handle theming in your projects? #WebDevelopment #JavaScript #CSS #Frontend #UIUX #DevCommunity #Jameskamz

One small habit I've been practicing for the last few months when building Alpine.js components. Not every variable in a component is meant to be reactive, so I don't like defining everything as a direct property inside `x-data`. Instead, I prefer to place component constants in a separate method called `initNonReactive`, just to keep things organized. When you revisit a component after several days, it instantly gives you a clear picture of which properties are intended to change and which are not. #AlpineJS #JavaScript #WebDevelopment #Frontend #CleanCode

useEffect runs after every render by default. Here's how to control it: ✅ Run once on mount: useEffect(() => { ... }, []) ✅ Run when a value changes: useEffect(() => { ... }, [value]) ✅ Cleanup on unmount: useEffect(() => { return () => cleanup() }, []) One hook. Three behaviors. Know the difference. 🎯 #ReactJS #Frontend #JavaScript #WebDev

Hydration issues in Next.js can break your UI silently. No errors. Just weird behavior. Here’s why 👇 Server renders HTML. Client re-renders same component. If output differs: ❌ Hydration mismatch Common causes: ✖ Using random values (Math.random, Date.now) ✖ Accessing window during SSR ✖ Conditional rendering differences Result: → UI flicker → Unexpected bugs What works: ✔ Keep server & client output consistent ✔ Move client-only logic inside useEffect ✔ Avoid non-deterministic values Key insight: SSR means your code runs twice. If results differ… Your UI becomes unpredictable. #NextJS #ReactJS #Frontend #SSR #JavaScript #SoftwareEngineering #Debugging #Engineering #WebDevelopment