pixelquadrat GmbH’s Post

Responsive two-column timeline layout library — plain JavaScript, zero dependencies, MIT licensed. new version 2.13.1 reachable here https://lnkd.in/eV65B7Rs want to see in action? https://www.mattopen.com/ #javascript #webdev #opensource #bugfix #pixelquadrat #mattopen

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