Pretext Pure JavaScript/TypeScript library for multiline text measurement & layout. Fast, accurate & supports all the languages you didn't even know about. Allows rendering to DOM, Canvas, SVG and soon, server-side. https://lnkd.in/e2X3Eev2

Learning and improving by building projects. Created a basic Image Editor with HTML, CSS, and JavaScript. Added real-time filters using Canvas API and download feature. Features: • Real-time filters (brightness, contrast, blur, etc.) • Presets (vintage, black & white, warm tone, etc.) • Reset option • Download edited image UI is not fully responsive yet, still working on improving it. 🔗 Live Demo:  https://lnkd.in/g9EHkjve 🔗 GitHub Link: https://lnkd.in/gwfEq_j7 Trying to get better with each project. #WebDevelopment #JavaScript #Frontend #Learning

Have you seen Pretext? Holy smokes, it's awesome. Pretext is a brand-new JavaScript/TypeScript library for multiline text measurement & layout by Cheng Lou, previously a React core developer and the original creator of the react-motion animation library. It lets you calculate the height of line-wrapped text without ever touching the DOM. Until now these kinds of UI operations required rendering the text and measuring the result, which is a super expensive operation. For us this matters because Research Tool has some hard UI challenges. We treat a large corpus as a navigable system, preserve document structure, and treat diff as a discovery primitive, so the interface has to present long passages, side-by-side comparisons, and anchored evidence. With Pretext we can now do all that without hot-path DOM measurements and layout reflow. It's got two super-useful modes: fast paragraph-height prediction and manual line layout. This means we can drive virtualized chat, masonry and occlusion using predicted text height, rich inline text, and custom line routing. Wanted to do my part to spread the word. Check it out https://lnkd.in/ggN9YxFP

🚀 Built a Background Changer using HTML, CSS & JavaScript Excited to share my latest mini project where I created a Background Color Changer 🎨 💡 With just a click, the entire background changes — simple idea, but a great way to strengthen core concepts! 🔹 What I used: • HTML for structure • CSS for styling • JavaScript for interactivity 🔹 Key Learnings: • DOM manipulation in JavaScript • Handling events like clicks • Writing clean and interactive UI logic • Improving user experience with small features 🔗 Live Demo: https://lnkd.in/eSmF8Qdw 💻 GitHub Repo: https://lnkd.in/eU-N3P2J This project reminded me that even small builds can teach big concepts 💯 I’m focusing on building consistently and improving step by step 🚀 💬 What was the first JavaScript project you built? #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingJourney #BuildInPublic

🪄 Stop writing JavaScript for your accordions. For years, animating height: auto meant one thing: JavaScript hacks. Measure scrollHeight. Run requestAnimationFrame. Add a helper library. All just to animate an accordion. Now there’s a single CSS property that changes this: interpolate-size: allow-keywords Add one line and the browser can finally animate between numbers and keywords like auto. That means smooth accordions with pure CSS. Even better: it’s progressive enhancement. If the browser doesn’t support it, the accordion still works — it just snaps open. Less JavaScript. Simpler UI code. What JavaScript workaround are you most excited to replace with CSS? 👇

I just built my first Image Editor using Vanilla JavaScript + HTML5 Canvas API 🎨 Instead of relying on frameworks, I went fully vanilla, which forced me to understand what’s really happening under the hood. Here are a few key things I learned along the way: 🔹 Canvas Manipulation I learned how to render images onto a <canvas> and apply real-time effects using canvasCtx.filter like Hue-Rotate, Invert, and Blur. 🔹 State Management (without React 😅) Managing 9+ filters manually taught me how state actually works. Every slider change recalculates and rebuilds the entire filter string in real time. 🔹 Dynamic UI Sync Built a preset system (Vintage, Dreamy, etc.) where selecting a preset updates both the image AND all sliders — keeping UI and data perfectly in sync. 🔹 File API & Exporting Handled image uploads and used canvas.toDataURL() to convert the canvas into a downloadable PNG — turning browser work into real output. 🛠 Tech Stack: • JavaScript (ES6+) • HTML5 Canvas API • Custom CSS Variables (Dark Mode) • Remixicon CDN This project gave me a whole new appreciation for tools like Canva and Photoshop — a lot more is happening behind the scenes than we think. 🎥 Check out the demo video below to see it in action! #WebDevelopment #JavaScript #FrontendDevelopment #CanvasAPI #BuildInPublic #LearningByDoing

Introducing ChaiTailwind: A Lightweight Utility-First CSS Engine Built with Vanilla JavaScript. Over the past few days, I’ve been exploring how modern utility-first frameworks like Tailwind CSS work behind the scenes. As part of this learning journey, I built a small experimental project called ChaiTailwind. ChaiTailwind is a JavaScript-powered styling engine that dynamically applies styles based on class names such as chai-px-4, chai-text-xl, and more — without relying on any external CSS framework. The goal was to better understand DOM manipulation, class parsing, and how scalable design systems can be structured at a fundamental level. Key Highlights: • Dynamic style generation using meaningful utility classes • Lightweight and dependency-free approach • Built entirely with Vanilla JavaScript • Easily extendable for custom UI utilities and design systems This project is primarily focused on learning and exploration, helping deepen my understanding of frontend architecture and performance considerations. I believe that building things from scratch is one of the best ways to truly understand how modern tools and frameworks operate internally. Looking forward to enhancing this further and exploring more advanced capabilities. Live: https://lnkd.in/gqjRXGvs #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #UIEngineering #TailwindCSS #SoftwareEngineering

For 25 years, styling the native <select> element was nearly impossible. We all reached for JavaScript libraries just to get a decent dropdown. Not anymore. With appearance: base-select in Chrome 134+, you can now fully customise the native <select> -- rich options with images, icons, custom colours, and smooth animations. No JavaScript needed. In my latest article, I walk through how to build a beautiful, accessible custom select using only HTML and CSS. Read the full article: https://lnkd.in/ekVWjwqr #CSS #HTML #WebDevelopment #Frontend #Accessibility #BaseSelect #WebDesign #UXEngineering

🚀 Mini Project #2 :- Random Quote Generator Today I created a Mini Project – Random Quote Generator using HTML, CSS, and JavaScript 💻✨ In this project, a new quote automatically appears every 2–3 seconds without clicking any button. JavaScript randomly selects a quote from a list and updates it on the screen, making the page dynamic and engaging. 🔹 What I practiced: ✅ DOM Manipulation(DOM Manipulation means changing or controlling the content, structure, or style of a webpage using JavaScript. 💻) ✅ Using Math.random() for random selection ✅ Using setInterval() to update quotes automatically ✅ Creating a simple interactive UI with HTML & CSS Small projects like this help me understand how JavaScript makes websites dynamic and interactive. If you have any suggestions or ideas for improvement, feel free to share them. I’d love to learn and improve! 😊 #Day21 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingJourney #100DaysOfCode

Today I practiced JavaScript DOM Manipulation using HTML, CSS, and JavaScript in Google Colab. In this small hands-on project, I implemented a few beginner-level interactive features: 🔹 Adding two numbers using input fields and displaying the result dynamically 🔹 Built a simple “Guess the Number” game using JavaScript logic 🔹 Changed the color of a box using a button click with CSS and JavaScript 🔹 Dynamically resized elements using class manipulation 🔹 Created and appended HTML elements (<h1>) dynamically using JavaScript These exercises helped me understand: • How to use DOM Manipulation • Handling button click events • Updating HTML content dynamically with JavaScript • Basic interactive web development concepts Learning step by step and building small projects every day. Looking forward to learning more about frontend development and JavaScript. #JavaScript #HTML #CSS #WebDevelopment #DOMManipulation #CodingJourney #LearningInPublic