Why to prefer CSS over JavaScript for UI components and animations

View profile for Jomkit Jujaroen
Jomkit Jujaroen

This is awesome advice. As someone with experience in JavaScript and React, I always want to leverage that power to build dynamic and responsive UI, but the reality is that browser APIs and CSS have come a long way. Browsers now provide native solutions to UI components and features that were formerly the domain of JS. Another example is animations and dynamic UI. CSS is constantly evolving with new capabilities, and they’ve been investing heavily in more function-style constructs for creating animations. If possible, it's usually better to use CSS for animating web page elements instead of JS for speed and performance. Theodore L.'s back to top button implementation illustrates this really well. I love JavaScript as much as anyone, but being an effective web developer means keeping up with technology and using the right tool for the job. Building a specialized feature for a client? You will probably need JS. Just want to scroll back to the top of a web page? Use what the browser gives you. #WebDevelopment #JavaScript #CSS #Frontend #React #WebPerformance

View profile for Theodore L.
Theodore L.

Most “back to top” buttons use JavaScript. But they really don’t have to. The browser already knows how to scroll. We just have to ask nicely. All you need is: - Give your page an id="top" (usually on the <body>). - Add a link with href="#top" that scrolls back to the top. - Use position: fixed to pin it in the corner. - And scroll-behavior: smooth on the html for smooth transitions No listeners. No scroll events. No extra code. This is simpler, faster, and works everywhere. Sometimes, native HTML and CSS are all you need. ***** To learn more tips about CSS, make sure to join my newsletter https://lnkd.in/eemgxQ7M ❤️

  • Create a functionning back to top button in CSS only
Theodore L. 5mo

Thank you for the repost ;)

Like
Reply
1 Reaction

To view or add a comment, sign in

More Relevant Posts

  • View profile for Theodore L.
    Theodore L.

    Most “back to top” buttons use JavaScript. But they really don’t have to. The browser already knows how to scroll. We just have to ask nicely. All you need is: - Give your page an id="top" (usually on the <body>). - Add a link with href="#top" that scrolls back to the top. - Use position: fixed to pin it in the corner. - And scroll-behavior: smooth on the html for smooth transitions No listeners. No scroll events. No extra code. This is simpler, faster, and works everywhere. Sometimes, native HTML and CSS are all you need. ***** To learn more tips about CSS, make sure to join my newsletter https://lnkd.in/eemgxQ7M ❤️

    • Create a functionning back to top button in CSS only

    To view or add a comment, sign in

  • View profile for Sedat Kacar, PhD
    Sedat Kacar, PhD

    🚀 Understanding the Power of defer in JavaScript Ever wondered why your JavaScript sometimes fails to find a button or element on the page? 🤔 Here's the deal — when the browser loads an HTML page, it reads it from top to bottom. It adds each element (, , etc.) to the DOM. But when it reaches a So, if your script is above the button: html: <script> document.getElementById("startBtn").onclick = startRace; </script> <button> id="startBtn">Start</button> 💥 It fails — because the button doesn't exist yet! ✅ Fix? Place your script after the button or use the magical keyword defer: html: <script src = "main.js" defer></script> defer tells the browser: "Download this script, but wait to execute it until after the whole page is loaded." It's cleaner, faster, and safer. A small attribute, but it makes a big difference in how your web pages behave. ⚡ #Awareness #Logic #Accuracy #LoadOrder #Intelligence #Measure #Alignment #Latency #Mindfulness #Understanding #Knowledge #Action #Discipline #Design #Insight #Reflection

    • No alternative text description for this image

    To view or add a comment, sign in

  • View profile for Amara Farman
    Amara Farman

    🌟 🎨 Change Text & Background Using JavaScript! 🌟 I just created a simple interactive web page using HTML, CSS, and JavaScript that allows you to: ✅ Enter custom text ✅ Change the text color and background color (with preset or custom options) ✅ Instantly preview your changes ✅ Reset everything with one click 💡 It’s a fun way to learn how to handle DOM events, CSS variables, and JavaScript interactivity — all in one small project! 🎯 Skills practiced: DOM Manipulation Event Handling Dynamic CSS with JavaScript Check out the full project 👉 (you can upload your .html file to GitHub or CodePen and add the link here) #JavaScript #WebDevelopment #HTML #CSS #LearningByDoing #FrontendDevelopment Adeel Tariq

    To view or add a comment, sign in

  • View organization page for Smartupworld Websolutions
    Smartupworld Websolutions

    1,790 followers

    smartupworld.com #smartupworld Adding a class with javascript https://lnkd.in/gHH7Xjsi You can add a class to an HTML element using JavaScript by using the classList property. The classList property provides methods for working with the classes of an element, including adding, removing, and checking for the presence of a class. Here’s an example of how to add a class to an element using JavaScript: <div id="example">This is an example element</div> <script> var element = document.getElementById("example"); element.classList.add("highlight"); </script> In this example, we start by using the document.getElementById method to select the element with an id of example. We then access the classList property of the element, and use the add method... <a class="read-more-link" href="">Read More →</a>

    To view or add a comment, sign in

  • View organization page for upspire
    upspire

    27 followers

    smartupworld.com #smartupworld Adding a class with javascript https://lnkd.in/gHH7Xjsi You can add a class to an HTML element using JavaScript by using the classList property. The classList property provides methods for working with the classes of an element, including adding, removing, and checking for the presence of a class. Here’s an example of how to add a class to an element using JavaScript: <div id="example">This is an example element</div> <script> var element = document.getElementById("example"); element.classList.add("highlight"); </script> In this example, we start by using the document.getElementById method to select the element with an id of example. We then access the classList property of the element, and use the add method... <a class="read-more-link" href="">Read More →</a>

    To view or add a comment, sign in

  • View organization page for Daily rumblings
    Daily rumblings

    23 followers

    smartupworld.com #smartupworld Adding a class with javascript https://lnkd.in/gHH7Xjsi You can add a class to an HTML element using JavaScript by using the classList property. The classList property provides methods for working with the classes of an element, including adding, removing, and checking for the presence of a class. Here’s an example of how to add a class to an element using JavaScript: <div id="example">This is an example element</div> <script> var element = document.getElementById("example"); element.classList.add("highlight"); </script> In this example, we start by using the document.getElementById method to select the element with an id of example. We then access the classList property of the element, and use the add method... <a class="read-more-link" href="">Read More →</a>

    To view or add a comment, sign in

  • View organization page for Laravel Company
    Laravel Company

    264 followers

    Before diving into the specifics of creating a real-time document preview using HTML, CSS, and JavaScript, let's first address the issue of the paginated live preview not working well with paged.js and @page rules. Paged.js is a JavaScript library that allows you to create a paginated, interactive document, but it does not handle real-time rendering natively. You'll need to use a library like Paper.js or Quill.js, which can provide more advanced features for real-time document rendering. Here's a high-level overview of how you can achieve a real-time document preview with Paper.js: 1. Install Paper.js: You can install Paper.js using npm (Node Package Manager) by running the following command in your terminal: ```bash npm install paperjs ``` 2. Create a Paper instance: In your HTML document, create a Paper instance using the `create()` method: ```javascript const paper = new Paper('#paper'); ``` 3. Add a `page` attribute to your HTML elements: Add a `page` attribute to your HTML elements that you want to display the document on. For example, if you want to display the resume or cover letter on a specific page, you can use the `page` attribute like this: ```

    To view or add a comment, sign in

  • View profile for Al Mahbub Khan
    Al Mahbub Khan

    smartupworld.com #smartupworld Adding a class with javascript https://lnkd.in/gWfcnDUr You can add a class to an HTML element using JavaScript by using the classList property. The classList property provides methods for working with the classes of an element, including adding, removing, and checking for the presence of a class. Here’s an example of how to add a class to an element using JavaScript: <div id="example">This is an example element</div> <script> var element = document.getElementById("example"); element.classList.add("highlight"); </script> In this example, we start by using the document.getElementById method to select the element with an id of example. We then access the classList property of the element, and use the add method... <a class="read-more-link" href="">Read More →</a>

    To view or add a comment, sign in

Jomkit Jujaroen

845 followers

View Profile

Explore content categories