Understanding Hydration Error in Next.js: Causes and Fixes

Unpopular opinion: If you combine HTML Custom Elements with JSX and a DOM morphing algorithm, you get the best parts of React, back when it was actually great (before concurrent mode). https://lnkd.in/dxq_aPA2

Here's a sarcastic and ironic response to your problem: ```vbnet I guess you're having a mid-life crisis, trying to save your sanity by making your parent web page scrollable when the mouse hovers over its child iframe! But wait, wait, don't you know that scrollable content is a basic requirement for a functional web page? Well, let me tell you, the solution to this problem is actually quite simple and straightforward. All you need to do is add a class name like `overflow-hidden` to your parent web page, and voila! The parent content will no longer be scrolled when the mouse hovers over the child iframe. However, this approach may not work in all cases. For instance, if the parent content is a fixed width or height, adding the `overflow-hidden` class may cause the parent content to flicker or appear unresponsive. In that case, you may need to consider using JavaScript to track the mouse position relative to the parent div and disable scrolling when the mouse is inside the child iframe. Here's an example of how you can achieve this using JavaScript: ```javascript const target = document.getElementById("webview"); if (target) { // Define event handler const preventScroll

🎯 #90DaysOfCode Challenge | Day 4/90 Ever wonder where your money goes each month? 🤔 Manually tracking expenses is a hassle! For Day 4, I built a practical solution: a simple Expense Tracker using HTML+CSS and JavaScript. The real challenge wasn't just listing expenses, but making the data persistent. Here’s what I focused on: 💾 Persistent Data with localStorage: The core feature! I implemented localStorage to save every transaction directly in the browser. Now, even if you refresh the page, your data stays put. Understanding client-side storage like this is crucial for building apps people can actually rely on. 💡 Efficient Calculations with .reduce(): Instead of complex loops, I used JavaScript's powerful .reduce() method to instantly calculate the total balance, income, and expenses from the transaction list. A great practice for writing cleaner, more optimized code! ✨ Intuitive UI Feedback: Used conditional CSS classes (green for income, red for expenses) applied via JavaScript to make the tracker easy to read at a glance. Building this Expense Tracker felt like creating something genuinely useful. Live Demo: https://lnkd.in/gpskDT87 #Day4 #90DaysOfCode #HTML #CSS #WebDevelopment #Frontend #JavaScript #LocalStorage #DataPersistence #PersonalFinance

JSON/CSV Diff Viewer A single-page web application for comparing two datasets \(JSON or CSV\) with advanced differentiation capabilities. Built with Vue 3, TypeScript, and Vite, this application runs entirely client-side without requiring a backend. Project developed by: Vincent Capek GitHub Repository: https://lnkd.in/gbVQpsWw Framework: Vue 3 \(Composition API with \<script setup\>\) Language: TypeScript \(strict mode\) Build Tool: Vite Styling: Tailwind CSS v4 Dependencies: - papaparse: CSV parsing with streaming support - fast-deep-equal: Deep object comparison - vue-virtual-scroller: Virtualization for large tables src/ ├── components/ │ ├── UploadPanel.vue # Upload panel with drag-and-drop │ ├── DiffControls.vue # Diff rules configuration │ ├── DiffSummary.vue # Statistics and export options │ └── DiffTable.vue # Virtualized results table │ ├── composables/ │ ├── useCsvJson.ts # CSV/JSON parsing & normalization │ └── useDiffE https://lnkd.in/gRapqAHq

JSON/CSV Diff Viewer A single-page web application for comparing two datasets \(JSON or CSV\) with advanced differentiation capabilities. Built with Vue 3, TypeScript, and Vite, this application runs entirely client-side without requiring a backend. Project developed by: Vincent Capek GitHub Repository: https://lnkd.in/gbVQpsWw Framework: Vue 3 \(Composition API with \<script setup\>\) Language: TypeScript \(strict mode\) Build Tool: Vite Styling: Tailwind CSS v4 Dependencies: - papaparse: CSV parsing with streaming support - fast-deep-equal: Deep object comparison - vue-virtual-scroller: Virtualization for large tables src/ ├── components/ │ ├── UploadPanel.vue # Upload panel with drag-and-drop │ ├── DiffControls.vue # Diff rules configuration │ ├── DiffSummary.vue # Statistics and export options │ └── DiffTable.vue # Virtualized results table │ ├── composables/ │ ├── useCsvJson.ts # CSV/JSON parsing & normalization │ └── useDiffE https://lnkd.in/gRapqAHq

JSON/CSV Diff Viewer A single-page web application for comparing two datasets \(JSON or CSV\) with advanced differentiation capabilities. Built with Vue 3, TypeScript, and Vite, this application runs entirely client-side without requiring a backend. Project developed by: Vincent Capek GitHub Repository: https://lnkd.in/gbVQpsWw Framework: Vue 3 \(Composition API with \<script setup\>\) Language: TypeScript \(strict mode\) Build Tool: Vite Styling: Tailwind CSS v4 Dependencies: - papaparse: CSV parsing with streaming support - fast-deep-equal: Deep object comparison - vue-virtual-scroller: Virtualization for large tables src/ ├── components/ │ ├── UploadPanel.vue # Upload panel with drag-and-drop │ ├── DiffControls.vue # Diff rules configuration │ ├── DiffSummary.vue # Statistics and export options │ └── DiffTable.vue # Virtualized results table │ ├── composables/ │ ├── useCsvJson.ts # CSV/JSON parsing & normalization │ └── useDiffE https://lnkd.in/gRapqAHq

🚨 i've run into this React error so many times and every time I promise myself I'll document it for future me. So today after the millionth time, I'm sharing it here in case it helps someone else. Error: Rendered more hooks than during the previous render The issue: My component needed a prop that only becomes available after the page finishes loading. But I was using that prop to fetch some data from the backend. Here's how it played out: First render -> prop missing -> component skips useQuery, runs some other hooks Second render -> prop available -> component now runs useQuery + other hooks React sees a different number of hooks between renders -> errors React expects hooks to be called in the same order on every render. the fix - component extraction pattern - Split into two components - Outer: waits until the prop exists (shows loading) - Inner: runs all the data-fetching hooks unconditionally So any time your component: - depends on props that load after the first render - needs to run hooks that depend on those props (like useQuery, useMutation etc.) This pattern can save you a few hours of debugging (and a few 🤦♀️ )

I was building an exam system with Filament. To keep questions clean, I stripped HTML tags in the Blade view. Worked… at first. Then, 30 seconds later, the <p> and &nbsp; tags were back. What happened? Filament’s RichEditor stores HTML, and Livewire binds data reactively. That means the component keeps syncing the server-side value to the frontend. Even if you clean it in Blade, Livewire “pushes” the original HTML back from the server every time it updates. Lesson learned: frontend cleanup isn’t enough — sanitize on save. Always clean the data before it hits the database, not just before rendering. Reactivity is awesome… until it fights your cleanup logic. 😅 protected static function boot() {   parent::boot();   static::saving(function ($question) {     $question->question_text = trim(strip_tags(html_entity_decode($question->question_text)));     if ($question->options) {       foreach ($question->options as $option) {         $option->option_text = trim(strip_tags(html_entity_decode($option->option_text)));       }     }   }); } Per Borgen Dominik Jasiński

Common causes of memory leaks in JavaScript: ▪️ Forgetting to clear intervals or timeouts. ▪️ Event listeners not removed when elements are destroyed. ▪️ Global variables holding references unnecessarily. ▪️ Closures capturing variables that are no longer needed. ▪️ DOM nodes kept in memory because of lingering references. ▪️ Large data structures stored in memory without cleanup. ▪️ Detached DOM elements still referenced in code. A memory leak is not always obvious but over time it makes your app slower, heavier, and less reliable. What would you add?