Irene Tomaini’s Post

Day 22 #100DaysOfCode 💻 1. Difference between map and filter? — B. map transforms, filter selects 2. What triggers this? (addEventListener) — B. Button click 3. What happens here? (onclick) — B. Runs on click 4. What is the output? (map without return) — B. [undefined, undefined, undefined] 5. Which is correct to get input value? — B. value 6. What is the output? (array.find) — B. 2 7. What does async/await simplify? — B. Callbacks 8. What is the output? (array.filter) — B. [3, 4] 9. Which is best for spacing between flex items? — B. gap 10. What does querySelector do? — B. First match 11. Layout direction (Tailwind flex-col md:flex-row) — B. Column on small, row on medium+ 12. Why does map return undefined? — B. Missing return 13. What does JSON.stringify() do? — A. Converts object to string 14. What does Array.push() do? — A. Adds element to the end 15. What is the use of the spread operator (...) ? — C. Copying or merging arrays/objects 16. How to save data in LocalStorage? — B. setItem('key', 'value') 17. Difference between const and let — A. const cannot be reassigned 18. == vs === — B. === checks both value and type 19. What is the output of typeof null? — C. "object" 20. What is Hoisting? — A. Moving declarations to the top 21. Why is useState used in React? — B. To manage component state 22. What does p-4 mean in Tailwind? — A. Padding on all sides 23. What does Array.reduce() do? — B. Accumulate values to a single result 24. Why use event.preventDefault()? — A. Stops default browser behavior 25. Which method does fetch() use by default? — A. GET 🚀 #javascript #reactjs #webdevelopment #frontenddeveloper #coding #learninginpublic #Akbiplob

Arena's Code Arena has GPT-5.5 at #9. The comments are calling the benchmark gamed. They're missing what the eval actually measures: agentic web dev. Frontend UI work. 5.5's known weak spot. The naming is the bug here, not the rankings. Open the leaderboard. The Categories panel for "Code Arena" has four entries total: WebDev (Overall, HTML, React), Image to WebDev (Overall). That's the full slice. No backend, no algorithms, no debugging. Patrick Bade caught it in one line under Arena's post: "Web Dev Code Arena". Benchmarks are slicing narrower every quarter and labels haven't kept pace. People see "Code" and import 20 years of what code work means. Half of this read might fall apart in 6 months. For now: the rankings aren't gamed. The naming is.

Our researcher Sławomir Zakrzewski uploaded a YAML file to a shared MLflow instance. When another user opened the run, JavaScript executed in their browser. Here's what happened. MLflow stores model artifacts - YAML configs, pickle files, dependency specs. When you open a run in the web UI, the frontend fetches that YAML and parses it client-side. The parser it uses supports a tag called !!js/function. That tag doesn't just read data. It constructs live JavaScript objects. The safe version of the parser - the one that strips these tags - was already used in two other places in the same codebase. The artifact viewer used the unsafe one. It's CVE-2026-33865, CVE-2026-33866 - Full write-up in the comments.

Exciting Update: Contributing to Open Source with Keybr.com! ⌨️ I recently had the opportunity to contribute to Keybr.com, an amazing open-source typing practice application that helps people around the world learn to touch type at the speed of thought. My latest PRs focused on enhancing the user experience on the frontend and smoothing out the local development environment for fellow contributors. Here are the highlights of my work: 📊 Upgrading Data Visualizations I dove into the React & Canvas-based charting engine (RollingSpeedChart, KeyFrequencyHistograms, and ProgressOverviewSections) to make the data much clearer for users tracking their typing journey: Added contextual axis labels and precise tick marks (formatting durations and speeds seamlessly). Introduced grid lines for much better comparative readability. Implemented a visual threshold line indicating the user's Average Speed across scattered data points. Improved visual markers ("bumps") that clearly pinpoint typos, giving users immediate feedback on where their accuracy drops. ⚙️ Improving the Developer Experience On the tooling side, I tackled some tricky environment-specific path issues in the Webpack configuration (webpack.config.js and webpack-manifest.js). These fixes ensure that the application builds smoothly and the local dev server fires up correctly across different Operating Systems (especially for Windows environments!). It’s incredibly rewarding to dive into a project with such a large user base and make improvements that help both learners typing on the site and developers contributing to the codebase. A big thank you to the maintainers of Keybr! If you're looking to improve your typing speed, gave them a look. And if you're a developer—dive into their open-source repo! 💡 #OpenSource #ReactJS #WebDevelopment #DataVisualization #Webpack #Keybr #CodingJourney Feel free to tweak the tone or adjust the hashtags as you see fit. Just copy and paste it into LinkedIn when you're ready! Let me know if you'd like to emphasize any other specific parts of the code we worked on.

I built a JS Minifier that does more than just remove whitespace. 🛠️⚡ Most online minifiers are "black boxes." You paste code, and you get a mess back. I wanted to build something that helps developers understand how their code is being transformed. The Engineering Details: AST Debugging : Built-in visualization using acorn to inspect the Abstract Syntax Tree. Zero UI Lag : Minification runs in a Web Worker, keeping the main thread free for a 60fps experience. Modern Compatibility: Fully supports ES2024+ syntax, powered by Terser. Smart State: Persistent configuration via localStorage and a responsive UI using react-resizable-panels. Mangle & Compress: Smart variable renaming and dead-code removal. The Results: In my tests, I'm consistently seeing 40-60% size reductions in milliseconds. #JavaScript #WebDev #Performance #Frontend #VibeCoding

🔥I am incredibly excited to announce the v0.1.1 launch of my new open-source project: 𝐁𝐚𝐜𝐤𝐋𝐞𝐧𝐬!, now available as VsCode Extension 💐 If you've ever stared at a massive, unfamiliar codebase and thought, "Wait, where is this function actually being called from?"... I built this for you. BackLens is a static code intelligence tool that turns your local workspace into an interactive, semantic call graph - right inside VS Code. You can visually trace execution flows and architectural hotspots. ❤️🔥 Key Features: • Object-Aware Parsing: Native AST support for JS, TS, and TSX/JSX—intelligently extracting functions, classes, and methods (more languages support will be added soon). • Framework & External Tracking: Instantly distinguish between your internal logic, 3rd-party node_modules, and framework functions/methods. • Hotspot Detection: Visually identify architectural bottlenecks and heavily-depended-upon core modules at a glance. • Interactive UI: Explore callers, callees, and class hierarchies. • Instant Go-To-Source: Click any node in the visual graph and jump directly to the exact line of code in your editor. • 100% Local & Secure: Powered by a blazing-fast WASM SQLite engine. Your code is analyzed locally and never leaves your machine. • Native Split-Pane Workflow: Designed specifically for VS Code Webviews to work seamlessly alongside your active coding sessions. It is completely open-source and available now. I would love for the developer community to take it for a spin. If you try it out, please let me know your thoughts (or what breaks)! 📦 Download on VS Code Marketplace: https://lnkd.in/gkmxiKP6 or Just Search 𝐁𝐚𝐜𝐤𝐋𝐞𝐧𝐬 on Vscode Extension Search Bar 🐙 GitHub (I'd appreciate a ⭐!): https://lnkd.in/g7w4pW7w #VSCode #VsCodeExtenssio #OpenSource #DeveloperTools #DevTools #SoftwareArchitecture #Backlens #CallGraph #CodeAnalysis #CodeArchitecture

Day 25 - One query. Three resources. Zero overfetching. 🚀TechFromZero Series - GraphQLFromZero 🌐 Try it live: https://lnkd.in/dncBEfwE This isn't a Hello World. It's a real GraphQL gateway: 📐 React → Apollo Client → GraphQL → Jikan REST API 🔗 The full code (with step-by-step commits you can follow): https://lnkd.in/dm9H_838 🧱 What I built (step by step): 1️⃣ Apollo Server 5 + Express 5 + TypeScript backend on a single /graphql endpoint 2️⃣ Tiny native-fetch Jikan REST client with an in-process TTL cache 3️⃣ A real GraphQL schema — Anime, Character, Image, Genre, Studio types 4️⃣ Nested resolvers so list views stay cheap and the detail page pulls characters in the SAME request 5️⃣ Vite + React + Apollo Client UI with shared queries and a fragment 6️⃣ Debounced search page that mirrors its query into the URL 7️⃣ Detail page that loads metadata + characters + voice actors in one round-trip 8️⃣ Multi-stage Dockerfile, Render Blueprint backend, Vercel frontend — both live 💡 Every file has detailed comments explaining WHY, not just what. Written for any beginner who wants to learn GraphQL by reading real code — with full clarity on each step. 👉 If you're a beginner learning GraphQL, clone it and read the commits one by one. Each commit = one concept. Each file = one lesson. Built from scratch, so nothing is hidden. 🔥 This is Day 25 of a 50-day series. A new technology every day. Follow along! 🌐 See all days: https://lnkd.in/dhDN6Z3F #TechFromZero #Day25 #GraphQL #LearnByDoing #OpenSource #BeginnerGuide #100DaysOfCode #CodingFromScratch

▶️ Still using for loops in JavaScript? You're missing out on cleaner, faster ways to write code. • map() → transform data • filter() → select data • reduce() → combine values Example: [1,2,3].map(x => x * 2) → [2,4,6] Cleaner. Shorter. More readable. 👏 I’ve written a complete beginner-friendly guide with examples, visuals, and practice exercises. 👉 Read full blog here: https://lnkd.in/geXb9SVF #webdevelopment #coding #frontend #chaiaurcode

Most developers know map, filter and reduce exist. Fewer know when to use which one. Here is how I think about it: map() — when you need to transform every element Same number of items in, same number out. Just different shape. filter() — when you need to remove some elements Same data, fewer items. Nothing is transformed. reduce() — when you need one value from the whole array Total, average, grouped object, flat list — anything single. The real power comes from chaining them: devs  .filter(d => d.active)  .map(d => d.name)  .sort() Three operations. One clean chain. No loops. No temporary variables. And the ones people forget: find() — returns one element, not an array some() — true if at least one matches every() — true only if all match flatMap() — map + flatten in one step Save this for your next code review. Which array method do you reach for most often? #JavaScript #WebDevelopment #Frontend #CleanCode #SoftwareEngineering