Richard Sedellke’s Post

#motimeline v2.13.1 — category filter bug fix and new version online After filtering, badges were stacking on top of each other on the spine. The column algorithm was reading stale positions from hidden items. Fix: visible items get a clean left/right recalculation after every filter change. Hidden items are fully excluded from position and badge-offset calculations. npm install motimeline@latest #javascript #webdev #opensource #bugfix #pixelquadrat

Stop using delete to remove Array elements! 🛑 If you think the answer to the code below is 3, you're falling for a classic JavaScript trap. let numArr = [1, 2, 3, 4]; delete numArr[2]; Console.log(numArr.length) #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #FrontendDev #CleanCode

#moTimeline v2.13.2 — bugfix release Badges and cards could land on the wrong side of the center spine when adjacent items had equal height. Fixed by replacing the offsetTop-based column algorithm with a clean virtual fill-shorter-column approach. No more rounding drift. Zero breaking changes. Drop-in update. 📦 npm install motimeline@latest 🔗 https://lnkd.in/eXb-CZb2 #JavaScript #OpenSource #WebDev #mattopen #pixelquadrat

Tired of setting up oxfmt, oxlint, husky, and lint-staged from scratch every time? I built a CLI tool that does it all in one command. One command. Clean code. Every project.  𝗻𝗽𝘅 𝘀𝗲𝘁𝘂𝗽𝗹𝘆 Try it out -> https://lnkd.in/e6WePMGe #oxfmt #oxlint #husky #lint-staged #typescript #javascript

🚀 𝐃𝐚𝐲 𝟏𝟏/𝟏𝟓 𝐨𝐟 𝐌𝐲 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐒𝐞𝐫𝐢𝐞𝐬 Today I learned about Events in JavaScript ⚡ 👉 Events are actions that happen in the browser (like click, hover, key press, etc.) 📌 Example: let btn = document.getElementById("btn"); btn.addEventListener("click", function() { console.log("Button clicked!"); }); 👉 Common Events: click → when user clicks mouseover → when mouse moves over element keydown → when key is pressed 👉 Events make websites interactive and dynamic 💻✨ 💬 Question: Which event have you used — click or keyboard events? Let’s learn together 🚀 #JavaScript #WebDevelopment #LearningInPublic #Day11 #FrontendDevelopment

𝐄𝐱𝐭 𝐉𝐒 𝟖.𝟎 𝐚𝐝𝐝𝐬 𝐜𝐚𝐩𝐚𝐛𝐢𝐥𝐢𝐭𝐢𝐞𝐬 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐩𝐫𝐞𝐯𝐢𝐨𝐮𝐬𝐥𝐲 𝐡𝐚𝐝 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝 𝐭𝐡𝐞𝐦𝐬𝐞𝐥𝐯𝐞𝐬. Here's the full picture. 👉 This release covers both the Modern and Classic toolkits with targeted improvements across four categories: Core additions that work across both toolkits: → Digital Signature component → QR Code Reader & Generator → Font Awesome 7 as default → Updated ECMAScript compiler support Modern toolkit upgrades: → Lockable Grid plugin → Horizontal Buffered Rendering → Dialog Boundary Control → Improved ARIA support Classic toolkit: → Tri-State TreePanel Checkboxes Swipe through for each one in detail. 𝐓𝐫𝐲 𝐄𝐱𝐭 𝐉𝐒 𝐅𝐫𝐞𝐞 𝐟𝐨𝐫 𝟑𝟎 𝐃𝐚𝐲𝐬 👇 https://lnkd.in/gK8FhY_h #ExtJS #JavaScript #FrontendEngineering #WebDevelopment #EnterpriseUI

🚀 Working with Shadow DOM? Here’s a simple two‑step debugging pattern I use When an element lives inside Shadow DOM, document.querySelector() won’t find it directly. Instead of guessing the custom element, I follow this safe, repeatable approach 👇 ✅ Step 1: Find which Shadow Host contains your element Use this when you know the inner element (e.g. .main-section) but don’t know the shadow root: [...document.querySelectorAll('*')].find(el => el.shadowRoot?.querySelector('.main-section')) ✅ Step 2: Use the found shadow host to validate existence / visibility Once you know the host (dsf-app in this case), update your check: !!document.querySelector('dsf-app')?.shadowRoot?.querySelector('.main-section')?.offsetParent 🧩 How this works (simple mental model) document └─ <dsf-app> ← shadow host (FOUND in step 1) └─ #shadow-root (open) └─ <div class="main-section"> ✅ #JavaScript #ShadowDOM #WebComponents #FrontendTips #AutomationTesting #DevTools #LinkedInLearning

#javascript #javascriptTips Converting input type number by using parseInt or Number() function or using a plus operator for instance const num = +value. We can instead use the valueAsNumber property which gives the value as number type simple 🪄 Picture Credit: Steve Sewell 🙌

𝗟𝗼𝗼𝗽𝗶𝗻𝗴 𝗦𝘁𝗮𝘁𝗲𝗺𝗲𝗻𝘁𝘀 𝗜𝗻 𝗝𝗦 Looping statements in JavaScript repeat a block of code until a condition becomes false. You use loops to make your code shorter and easier to manage. JavaScript provides the following loops: - for Loop: used when you know how many times the loop should run - while Loop: runs as long as the given condition is true You can use loops to print numbers, find multiples, or count divisors. For example, you can print numbers from 1 to 5 using a for loop: for (let i = 1; i <= 5; i++) { console.log(i); } This prints: 1 2

Today’s practice was all about understanding how DOM manipulation really works in JavaScript. I worked on deleting elements dynamically using event handling. At first, it looked simple — just use "remove()" and done. But while practicing, I discovered an important edge case. When using "event.target.parentNode.remove()", it works perfectly when clicking on the intended element (like an image inside a list). But if you click outside the expected target, it can remove the wrong parent — even the entire list. To fix this, I implemented a condition to ensure deletion only happens when the clicked element is the correct one ("IMG" tag). This small practice helped me understand: • The difference between "event.target" and "event.currentTarget" • How DOM structure affects behavior • Why adding conditions makes code safer Every small bug teaches something valuable. #JavaScript #DOM #FrontendDevelopment #LearningInPublic #WebDevelopment