DOM Manipulation with JavaScript: Interactive Web Development

Boobook is a personal book list web app where users can add, view, and delete books. Built with HTML, CSS, and JavaScript, it demonstrates dynamic UI interactions, DOM manipulation, and core CRUD functionality. Live at https://lnkd.in/g4KpB9aE.

Built a To-Do List Web App using HTML, CSS, and JavaScript. This application allows users to add daily tasks and manage them efficiently. Tasks can be added to a list, marked as completed, edited, or deleted. The app also separates tasks into Pending Tasks and Completed Tasks, making it easier to track progress. This project helped me understand how simple web applications can improve everyday productivity. #WebDevelopment #HTML #CSS #JavaScript #Learning #oasisinfobyte.

Passing Parameters in React Native Stack Navigation Sometimes we need to send data from one screen to another, like user ID, name, or product details. In React Native, this can be done easily using navigation.navigate() and route.params. ✔ Pass data while navigating ✔ Receive data in the next screen ✔ Useful for dynamic screens This simple feature helps make apps more interactive and flexible. How often do you pass parameters between screens in your apps? 🤔 #ReactNative #MobileDevelopment #JavaScript #CodingTips

Most websites still have jumpy, default scrolling. But a small detail like smooth scrolling can instantly make a site feel more premium. So I experimented with Lenis in a React project to improve the scrolling experience. Here’s what I implemented: • Smooth scrolling across the entire app • Navigation buttons that scroll smoothly to sections • Programmatic scrolling using lenis.current.scrollTo() • Customizable easing and scroll behavior Lenis is surprisingly lightweight but gives you full control over how users move through your page. Small UI details like this can drastically improve how professional and polished a website feels. Still exploring more advanced configurations. If you're a frontend developer, have you tried Lenis or another smooth scrolling library? #React #FrontendDevelopment #JavaScript #WebDevelopment #UIUX

One thing that made React applications feel more like real web apps for me was routing. In traditional websites, navigating between pages usually reloads the entire page. But in React applications, we often want navigation to feel smooth and instant. That’s where React Router DOM comes in. It allows us to create multiple views inside a single-page application while keeping the user experience seamless. Some core ideas I explored while using it: • Defining routes with Route • Navigating between pages using Link • Structuring the app with BrowserRouter • Managing different UI views without full page reloads Instead of the browser requesting a new HTML page each time, React simply updates the components that need to change. It’s a small concept, but it plays a big role in how modern React applications behave. Understanding tools like this makes frontend development feel much more powerful. #reactjs #frontenddevelopment #webdevelopment #SheryiansCodingSchool

🔸 Visually appealing apps and easy-to-use apps are two very different things. If you cannot navigate your website using just a keyboard, your accessibility needs improvement I recently went deep into how accessibility actually works in React and JavaScript apps. 💡 Here’s what stood out: • Why focus management matters in modals and dropdowns • How components like tabs and modals should behave for accessibility • Where ARIA should be used (and where it should not) • Why semantic HTML solves most accessibility problems • How keyboard navigation is the real baseline, not optional Accessibility is not about adding extra attributes. It’s about building UI correctly from the start. If your app doesn’t work with keyboard or screen readers, it’s not fully built yet #reactjs #javascript #webaccessibility #softwaredevelopment #technology #programming #article #webapplication #ig

𝗧𝗵𝗲 𝗨𝗹𝗧𝗶𝗺𝗮𝗧𝗲 𝗬𝗢𝗨𝗧𝗨𝗕𝗘 𝗕𝗢𝗢𝗞𝗠𝗔𝗥𝗞 𝗠𝗔𝗡𝗔𝗚𝗘𝗥 I built a YouTube video library web app. You can save and organize videos like a personal library. - Save videos quickly - Organize them however you want - Access them without logging in - Keep everything in one clean interface I used HTML, CSS, Vanilla JavaScript, localStorage, and PWA. No frameworks or backend were used. - Save YouTube video links - Auto-generate thumbnails - Organize videos into custom groups - Instant search and filtering You can mark favorites, edit labels, and move videos between groups. The app has a responsive design and works offline. I learned how to manage complex state using localStorage and build a complete product experience with Vanilla JS. You can try the live demo: https://lnkd.in/gDXsAD6R Source: https://lnkd.in/gCWmJ_2i

🚀 New Project Live: Task Manager App (JavaScript) I’m excited to share my latest web development project — a Task Manager App built with HTML, CSS, and JavaScript! This lightweight and responsive app lets users create, edit, and delete tasks with a clean and intuitive interface. 🧠 What It Does: ✔ Add new notes with title & description ✔ Edit or remove tasks ✔ Fully responsive on desktop and mobile ✔ Smooth UI interactions ⚙️ Technologies Used: HTML5 | CSS3 | JavaScript | Boxicons 📌 Whether you’re practicing front‑end skills or building productivity tools, this project shows practical use of DOM manipulation and responsive design. 👉 Check it out on GitHub: https://lnkd.in/eUvMGP9X 💬 Feedback and suggestions are welcome — I’d love to hear what you think! #JavaScript #WebDevelopment #Frontend #ProductivityApp #ToDoApp #ProjectShowcase

🚀 Just Built: NoZeroDays — A Habit Consistency App I’ve started building and sharing one project every week. This week, I built NoZeroDays, a productivity app that helps track daily goals and maintain streak consistency. 🔹 The Idea The concept is simple: never let a day go by without progress. Even 1% counts. 🔹 Features ✔ Add and manage daily goals ✔ Track consistency streaks ✔ Persistent data using LocalStorage ✔ Multi-page navigation using React Router ✔ Clean and responsive UI with Tailwind CSS 🔹 Tech Stack • React.js • JavaScript (ES6+) • React Router • Tailwind CSS • LocalStorage 🔹 What I Learned Structuring a React project properly Managing state efficiently Handling side effects and data persistence Improving UI consistency Links in first comment 👇 Feedback is always welcome 🙌 #React #WebDevelopment #BuildInPublic #FrontendDeveloper #JavaScript

🚀 Why React Apps Feel Smooth Even With Heavy UI? Imagine a search page that needs to render 10,000 results while the user is still typing. In older React versions, React had to finish rendering the entire component tree in one go. If the UI was large, the browser could freeze for a moment while React completed that work. Then came React Fiber. Instead of rendering everything at once, React now breaks rendering into small units of work and processes them in chunks. After doing a small chunk, React gives control back to the browser before continuing. Now imagine the user typing quickly: • React starts rendering results • User types again • React pauses the current rendering • Processes the typing event first (higher priority) • Then resumes or restarts rendering with the latest state So instead of blocking the UI, React keeps interactions fast and responsive. 💡 That’s the power of React Fiber — interruptible rendering that prioritizes user interactions. This is one of the key reasons modern React apps can handle large lists and heavy UI updates smoothly. #ReactJS #FrontendDevelopment #JavaScript #WebPerformance #ReactFiber