Fixing Sticky Sidebar Issue in Filament Admin Panel

🚀 What Really Happens When a Browser Renders HTML → CSS → JavaScript? Let’s take a real-time example. You open an e-commerce website to buy a product. Within seconds, a complete webpage appears. But behind the scenes, the browser is doing a lot of intelligent work. 🧱 Step 1: HTML – The Structure First, the browser downloads the HTML file and converts it into a DOM (Document Object Model). Think of it as building the basic structure of a house. Now the browser knows: • This is the product title • This is the image • This is the price • This is the “Add to Cart” button At this stage, everything looks plain — just structured content. 🎨 Step 2: CSS – The Styling Next, CSS is downloaded and converted into the CSSOM (CSS Object Model). Now the magic begins: • The price becomes bold and red • Fonts look clean and professional • Buttons get colors and rounded corners • Everything aligns perfectly Your plain structure now looks like a modern website. 🖥️ Step 3: Render Tree → Layout → Paint Now the browser combines DOM + CSSOM to create a Render Tree. It calculates: • Where should the image appear? • How much space does the button need? • What is the exact position of each element? Then it paints everything on your screen pixel by pixel. This all happens in milliseconds. ⚡ Step 4: JavaScript – The Brain Now comes interactivity. You click “Add to Cart.” Instantly: • Cart count changes from 0 → 1 • Total price updates • A confirmation popup appears That’s JavaScript manipulating the DOM in real time. 🔥 In Simple Words: HTML builds the house 🏠 CSS decorates it beautifully 🎨 JavaScript makes it alive and interactive ⚡ Understanding this flow helps you: ✔ Write optimized code ✔ Reduce loading time ✔ Avoid unnecessary re-renders ✔ Build better user experiences Frontend development isn’t just coding — it’s understanding how the browser thinks. #Frontend #WebDevelopment #HTML #CSS #JavaScript #LearningJourney

CSS custom properties have a problem most developers don't think about. The browser stores them as raw strings. It has no idea if --color is a color, a length, or a banana. That's why you can't transition a gradient - the browser sees two opaque strings and just swaps them instantly. I spent way too long working around this. Pseudo-elements with opacity fades. JavaScript-driven interpolation. All to get a gradient hover transition that should be simple. Then @property clicked for me. You register a custom property with a type - <color>, <angle>, <percentage> - and suddenly the browser can interpolate it. Gradient transitions, rotating conic gradients, animated borders. All in pure CSS. 3 things that surprised me: 1. You transition the custom property itself, not the background. The gradient rebuilds every frame with interpolated values. 2. Setting inherits: false scopes a variable to one element. Child elements get the fallback instead. Useful for design tokens. 3. Invalid values fall back to your defined initial-value instead of breaking the declaration. Type safety in CSS. It's been in Chrome and Edge since 2020, Safari since 2023, and Firefox caught up in July 2024. No reason not to use it now. I wrote a full guide with live animated examples you can interact with - link in comments. What CSS feature replaced a JavaScript workaround for you? #CSS #WebDev #FrontEnd #WordPress Full guide with live interactive demos here: https://lnkd.in/edvf9m5J

Most developers use CSS custom properties like this: :root { --brand-color: \#6366f1; } And that's about it. But did you know you can actually type your CSS variables? Meet @property. It's been in CSS since 2024 and almost nobody talks about it. Here's what it lets you do: @property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .card { background: linear-gradient(var(--gradient-angle), \#6366f1, \#ec4899); transition: --gradient-angle 0.6s ease; } .card:hover { --gradient-angle: 180deg; } Read that again. We just animated a gradient. With pure CSS. No JavaScript. This was impossible before because the browser didn't know that --gradient-angle is an angle. It treated all custom properties as strings. You can't transition a string. @property tells the browser: "Hey, this variable is an angle. You can interpolate it." And it's not just angles. You can type your variables as: <color> <length> <percentage> <number> <integer> This opens up things like:  ✅ Animating gradients (as shown above)  ✅ Animating colors between two custom properties  ✅ Type-safe design tokens that throw errors if misused  ✅ Counter animations (animating a number from 0 to 100) Browser support? All major browsers support it today. Yes, including Firefox. The next time someone tells you CSS can't animate gradients, send them this post. What's the coolest CSS trick you've discovered recently? Drop it below 👇 #css #frontend #javascript

🚀 Building a Dynamic Grocery List using HTML, CSS, and JavaScript I recently worked on a small project where I created a dynamic Grocery List interface. The goal of this task was to understand how JavaScript can be used to manipulate the DOM and dynamically update content on a webpage. In this project, I implemented: • A structured HTML layout for the grocery list • CSS styling to create a clean and simple UI • JavaScript DOM manipulation to dynamically render and manage list items This exercise helped strengthen my understanding of how front-end technologies work together to create interactive web pages. Small projects like this are a great way to practice and build a strong foundation in JavaScript and web development. Always excited to keep learning and building! 💻 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #DOMManipulation #CodingJourney #LearningByBuilding #DeveloperGrowth

🚀 Built a Popup Modal using HTML, CSS & JavaScript Excited to share another mini project from my frontend development journey — a Popup Modal Component! 💻✨ Popups (modals) are widely used in modern websites for alerts, confirmations, forms, and notifications. In this project, I built a simple and reusable popup using pure HTML, CSS, and JavaScript. 🔹 Tech Stack Used: ✅ HTML5 – Structured layout ✅ CSS3 – Styling, animations & responsive design ✅ JavaScript – Popup open/close functionality 🔹 Key Features: ✔️ Open and close popup with button click ✔️ Smooth animation effects ✔️ Clean and modern UI design ✔️ Responsive for all screen sizes ✔️ Reusable component for websites Through this project, I improved my understanding of: 👉 DOM Manipulation 👉 Event Handling 👉 UI Component Development 👉 CSS Transitions & Animations Small UI components like this are essential for building interactive and user-friendly web applications. 💡 🔗 Live Demo: https://lnkd.in/gfj99_fa #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDeveloper #ReactDeveloper #BuildInPublic #LearningByBuilding

🎨 Day 4 of My JavaScript DOM Challenge Today I built a small Color Scheme Changer using HTML, CSS, and JavaScript. The idea is simple but powerful: When a user clicks on a color box, the background color of the entire page changes dynamically. This helped me practice DOM selection, event handling, and dynamic styling — which are core concepts of interactive web development. 🔹 What I Practiced in This Mini Project 1️⃣ Selecting Multiple Elements with querySelectorAll() I used querySelectorAll('.button') to select all color boxes at once. This returns a NodeList, which allows me to work with multiple elements efficiently. 2️⃣ Looping Through Elements using forEach() Since multiple buttons were selected, I used forEach() to loop through each element and apply the same logic. This is extremely useful when we want the same functionality across multiple UI elements. 3️⃣ Handling User Interaction with addEventListener() Each button listens for a click event. When a user clicks a box, JavaScript captures that interaction and triggers a function. This is the foundation of interactive web applications. 4️⃣ Understanding event and event.target Using the event object helped me identify which element was clicked. event.target.id allowed me to dynamically grab the ID of the clicked color box. 5️⃣ Dynamic DOM Manipulation Finally, I updated the page background dynamically: body.style.backgroundColor = e.target.id; Since the button IDs match CSS color names, the page color updates instantly. This small trick makes the code clean and efficient. 💡 Key Learning Small projects like this help build a strong foundation in DOM manipulation, which is essential for building dynamic user interfaces. Every interactive website — from dashboards to apps — relies heavily on these concepts. Next mini project coming soon: BMI Calculator 📊 Consistency > Motivation. 🔖 #JavaScript #WebDevelopment #FrontendDevelopment #DOMManipulation #CodingJourney #LearnInPublic #100DaysOfCode #JavaScriptProjects #BeginnerDeveloper #BuildInPublic #ProgrammingLife #TechJourney

🔥 90% of Websites Struggle with This Basic CSS Concept I've seen many websites struggle with a basic concept: understanding the CSS box model. Imagine you're sending a gift to a friend. You wrap the gift in paper, and that's like the content area. But then you add some extra space around the paper, like a ribbon or a bow, and that's like the padding. The problem arises when you try to add a border around the gift, and suddenly it looks like the ribbon is overlapping with the border. That's because the border is added to the outside of the padding, not inside. Here's a quick example: Let's say you have a paragraph of text with a width of 200px, padding of 20px, and a border of 5px. If you don't understand the box model, you might think the total width is 200px. But in reality, the total width is 200px , content, + 2 x 20px , padding, + 2 x 5px , border, = 250px. Did this help? Save it for later. Check if your website has this problem by inspecting your elements in the browser's dev tools. #WebDevelopment #LearnToCode #CSS #BoxModel #WebDesign #CodingTips #TechEducation #FrontendDevelopment #WordPress #HTML #JavaScript #ResponsiveDesign #WebDesignTips #CSSbasics #CodingForBeginners

🚨 Is Your Website's JavaScript Making It Slow? Imagine you're at a restaurant, and your food arrives in 10 minutes. But then, you notice the kitchen is taking 30 minutes to prepare each dish. That's what's happening when JavaScript slows down your website. JavaScript is like the kitchen staff. It helps prepare interactive dishes , or web pages, quickly. But if the staff , or JavaScript, is inefficient, it takes longer to serve the food , or load the page, . One major reason JavaScript slows down websites is DOM manipulation. The DOM , Document Object Model, is like a restaurant's menu. When JavaScript changes the menu , or DOM, , it takes time. Here's a quick example: Let's say you have a website with a button that adds new items to a list. When you click the button, JavaScript adds the item to the list. But if JavaScript does this inefficiently, it can slow down the website. To fix this, use efficient JavaScript techniques like batching DOM updates. This means updating the menu , or DOM, in batches, rather than one item at a time. Did this help? Save it for later. Check if your website has this problem by testing its performance. You can use tools like Google PageSpeed Insights to identify areas for improvement. ✅ #JavaScript #WebDevelopment #PerformanceOptimization #WebDesign #CodingTips #TechEducation #FrontendDevelopment #WordPress #WebsiteSpeed #SlowWebsite #JavaScriptTips #WebPerformance