Petri K. Silén’s Post

Three days ago, I began exploring Stencil.js, and it has the potential to revolutionize how we build web components. What sets it apart? - Write once, run everywhere (Angular, React, Vue - it doesn't matter) - TypeScript + JSX = an excellent developer experience - Creates genuine Web Components using browser standards - Built-in lazy loading for performance improvements - Ideal for design systems The true game-changer is the ability to build components that function in any framework, eliminating the need to rewrite the same button component multiple times. I spent yesterday creating a simple component and testing it across various frameworks, and it just worked seamlessly everywhere. This is significant for the future: while frameworks may come and go, Web Components are based on browser standards and are here to stay. If you're navigating multiple frameworks or considering design systems, Stencil.js is worth your attention. P.S. - I'm still learning, but I'm already excited about the possibilities. Sometimes, the best discoveries occur when you are open to exploring something new. #WebComponents #StencilJS #Frontend #WebDevelopment #JavaScript

Why is there a random '0' on my screen?!" The classic React trap. 🪤⚛️ If you have built React apps for a while, you have probably seen a stray `0` randomly floating in your UI. This happens when we misuse conditional rendering! Keeping JSX clean means using inline expressions, but you have to choose the right tool for the job: 1️⃣𝐓𝐡𝐞 "𝐄𝐢𝐭𝐡𝐞𝐫/𝐎𝐫" (𝐓𝐞𝐫𝐧𝐚𝐫𝐲 𝐎𝐩𝐞𝐫𝐚𝐭𝐨𝐫 `? :`) 🔀 Use this when you need to choose between two different components. 𝐸𝑥𝑎𝑚𝑝𝑙𝑒: `{isLoggedIn ? <Dashboard /> : <LoginForm />}` It is basically a clean `if-else` statement right inside your UI. 2️⃣𝐓𝐡𝐞 "𝐎𝐧𝐥𝐲 𝐈𝐟" (𝐋𝐨𝐠𝐢𝐜𝐚𝐥 𝐀𝐍𝐃 `&&`) 🚪 Use this when you want to render something 𝑜𝑛𝑙𝑦 if a condition is met. If it's false, render nothing. 𝐸𝑥𝑎𝑚𝑝𝑙𝑒: `{isLoading && <Spinner />}` ⚠️ 𝐓𝐡𝐞 𝐂𝐨𝐦𝐦𝐨𝐧 𝐏𝐢𝐭𝐟𝐚𝐥𝐥 (𝐓𝐡𝐞 𝐃𝐫𝐞𝐚𝐝𝐞𝐝 '𝟎'): In JavaScript, `0` is falsy. But in React, if you put a number in JSX, React renders it! ❌ `cart.length && <CheckoutButton />` ➔ If length is 0, your UI literally prints "0". ✅ `cart.length > 0 && <CheckoutButton />` ➔ Forces a boolean check. Renders nothing if false. Swipe through the infographic below to see the visual breakdown! 👇 Be honest, how many times has the "length &&" bug caught you off guard? #ReactJS #FrontendDevelopment #WebDev #JavaScript #CleanCode #SoftwareEngineering #CodingTips

React is a powerful JavaScript library used to build fast and interactive user interfaces. ⚛️ It works with components and Virtual DOM to make modern web apps smooth and efficient. #ReactJS #WebDevelopment #JavaScript #Frontend #CodingFromZero0 🚀

Many developers underestimate React Hook Form. Traditional React forms often lead to: ❌ Too many useState calls ❌ Unnecessary re-renders ❌ Complex validation logic React Hook Form solves this efficiently. ✔ Minimal re-renders ✔ Built-in validation ✔ Cleaner form code ✔ Better performance for large forms It’s not just a form library — it’s a performance-focused solution for scalable React applications. What do you prefer for forms in React? Formik or React Hook Form? 👇 👉 Follow for more React & MERN insights. #ReactJS #ReactHookForm #FrontendDevelopment #JavaScript #WebDevelopment #MERNStack #FrontendEngineering

Ever notice how two frontend frameworks like #React and #Vue can solve the exact same #JavaScript problem with completely different mental models? I recently completed a frontend technical challenge in Vue, my first real exposure to it after building all my projects in React. The task was to build a data table powered by an #API with search, filtering, sorting, and clear loading/error states. While wiring the filters and sorting logic, I had a small ❗aha moment. In React, when the state changes, the component function runs again. The render cycle re-executes, and React reconciles the DOM. In Vue, the declarations inside <script setup> run once. Vue tracks which parts of the template depend on which pieces of state and updates only what needs updating. Same UI problem and two rather different philosophies. Moments like this are why learning another framework can be quite valuable. It doesn’t just teach new syntax; it helps to understand the trade-offs and recognise which approach might fit a particular product or problem better.

https://huesnatch.com/ 🚀 JavaScript Is Literally Everywhere One language. Endless possibilities. 👇 ⚡ What you can build with JavaScript React → Frontend that users love 💻 Node.js → Powerful backend & servers ⚙️ TypeScript → Scalable, bug-free code 🛡️ D3.js → Stunning data visualizations 📊 Three.js → Mind-blowing 3D experiences 🧊 Jest → Rock-solid testing 🧪 jQuery → Quick DOM manipulation ⚡ Next.js → Production-ready web apps 🚀 Express → Fast & clean APIs 🔌 Electron → Cross-platform desktop apps 🖥️ Phaser → 2D game development 🎮 💡 Why JavaScript matters ✔ Frontend + Backend ✔ Web + Mobile + Desktop ✔ Beginner-friendly, industry-ready If you know JavaScript, you’re never limited. 🔥 👉 Which JavaScript stack are you learning right now? #JavaScript #WebDevelopment #FullStack #ReactJS #NodeJS #NextJS #TypeScript #Developers #Programming #huesnatch #huesnatch.com

🚀 JavaScript Bundle Bloat Killing Your Site Speed? Fix It Now! 🚀 Your Next.js/React app looks perfect... until Lighthouse gives you a 2.5s LCP and 65+ bundle size score. In 2026, bundle optimization separates amateur side-projects from production apps that actually convert. Fresh guide on javascriptdoctor.blog: "Optimizing Bundle Size in JavaScript Applications" Battle-tested techniques: ✅ Tree-shaking that actually works (ES modules only!) ✅ Dynamic imports + React.lazy for route splitting ✅ Replace lodash/moment/axios with native alternatives ✅ Brotli compression (76% smaller than Gzip) ✅ Bundle analyzers to find your real culprits ✅ Vite vs Webpack vs esbuild speed comparison Drop your bundle from 450KB → 120KB. Users stay instead of bounce. Read here: https://lnkd.in/gGZhds8b What's bloating YOUR bundle most? Lodash? Charts? Your UI library? Drop it below! 👇 #JavaScript #WebPerformance #NextJS #ReactJS #BundleOptimization

🚀 JavaScript Is Literally Everywhere One language. Endless possibilities. 👇 ⚡ What you can build with JavaScript React → Frontend that users love 💻 Node.js → Powerful backend & servers ⚙️ TypeScript → Scalable, bug-free code 🛡️ D3.js → Stunning data visualizations 📊 Three.js → Mind-blowing 3D experiences 🧊 Jest → Rock-solid testing 🧪 jQuery → Quick DOM manipulation ⚡ Next.js → Production-ready web apps 🚀 Express → Fast & clean APIs 🔌 Electron → Cross-platform desktop apps 🖥️ Phaser → 2D game development 🎮 💡 Why JavaScript matters ✔ Frontend + Backend ✔ Web + Mobile + Desktop ✔ Beginner-friendly, industry-ready If you know JavaScript, you’re never limited. 🔥 👉 Which JavaScript stack are you learning right now? #JavaScript #WebDevelopment #FullStack #ReactJS #NodeJS #NextJS #TypeScript #Developers #Programming 🚀

Javascript  for Everything: JS + React = Web Development JS + Three.js = 3D Visualization JS + Angular = Web Applications JS + Phaser = Game Development JS + Vue.js = Progressive Web Apps JS + TensorFlow.js = Machine Learning JS + Node.js = Server-Side Development JS + Electron = DesktopApp Development JS + React Native = MobileApp Development #javascript