Javascript

Javascript

340 bookmarks
Newest
Lottie-Animationen in Websites integrieren
Lottie-Animationen in Websites integrieren
Mit Lottie könnt ihr unkompliziert skalierbare und interaktive Animationen in Websites integrieren. Das sog. Lottie-File basiert auf JSON und wird mittels JavaScript in die Website integriert.
·kulturbanause.de·
Lottie-Animationen in Websites integrieren
Javascript Debugging Made Easier with Sourcemaps
Javascript Debugging Made Easier with Sourcemaps
Updated: Add clean task that uses rimraf to delete the bundle.min.js file if it already exist. Without this it would just append to the existing bundle.min.js file. When you release your web site to production, you should minify and concatenate your javascript files. You will have much better performance by doing this but unfortunately debugging becomes difficult with the minified code as it shortens all of the variable and method names.
·digitaldrummerj.me·
Javascript Debugging Made Easier with Sourcemaps
DOM diffing with vanilla JS
DOM diffing with vanilla JS
A couple of weeks ago, we looked at how to build reactive, state-based components with vanilla JS. How to create a state-based UI component How to add reactivity to a state-based UI component with Proxies How to batch UI rendering for better performance Today, we’re going to learn how to add DOM diffing to our component. If you haven’t yet, go back and read the first three articles, or today’s won’t make a whole lot of sense.
·gomakethings.com·
DOM diffing with vanilla JS
The best way to learn JavaScript in 2022
The best way to learn JavaScript in 2022
Yesterday, I got an email from a newsletter subscriber asking: What’s the best way to practice JavaScript? There’s no one right way to learn JavaScript. But after teaching it for a handful of years now, I have found some trends and common approaches that make things easier for a lot of students. Let’s dig in! Lean into your learning style Some folks learn best by reading, others from watching videos, and others from just diving in and trying a bunch of stuff until things click.
·gomakethings.com·
The best way to learn JavaScript in 2022
Four different ways to inject text and HTML into an element with vanilla JavaScript
Four different ways to inject text and HTML into an element with vanilla JavaScript
Today, we’re going to look at four different techniques you can use to get and set text and HTML in DOM elements. Let’s dig in! The Element.innerHTML property You can use the Element.innerHTML property to get and set the HTML content inside an element as a string. div class="greeting" pHello world!/p /divlet greeting = document.querySelector('.greeting'); // Get HTML content // returns "pHello world!/p" let html = greeting.innerHTML; // Set HTML content // This replaces what was in there already greeting.
·gomakethings.com·
Four different ways to inject text and HTML into an element with vanilla JavaScript
Five more ways to inject HTML into the dom with vanilla JavaScript
Five more ways to inject HTML into the dom with vanilla JavaScript
Yesterday, we looked at four ways to inject text and HTML into the DOM with vanilla JS. Today, we’re going to look at five more. Let’s dig in! The document.createElement() method You can use the document.createElement() method to create an element. Pass in the element to create, without angled brackets (), as an argument let div = document.createElement('div'); let link = document.createElement('a'); let article = document.createElement('article'); You can use any valid HTML tag, and even create custom ones, too.
·gomakethings.com·
Five more ways to inject HTML into the dom with vanilla JavaScript
How I became the vanilla JS guy
How I became the vanilla JS guy
Yesterday, I had the pleasure of chatting with Chris Bongers about how I became the vanilla JS guy. We talked about how I got into web development after years as an HR professional, how I made the career switch, the viability of CSS as a career path, and why I got into JavaScript. We also talked a fair bit about the value of sharing everything you learn, and the power of daily writing.
·gomakethings.com·
How I became the vanilla JS guy
How to create a search page for a static website with vanilla JS
How to create a search page for a static website with vanilla JS
One of the biggest missing features from most static site generators (like Hugo, 11ty, and Jekyll, ) is that they lack built-in search. Database-driven platforms like WordPress make a server call and search the database to find matching content. Static websites have no database to query. Today, I’m going to share how I built the search functionality for my site with vanilla JS. Let’s dig in! Quick aside: done-for-you alternative If you don’t want to roll-your-own search functionality, Algolia and ElasticSearch are two done-for-you search vendors.
·gomakethings.com·
How to create a search page for a static website with vanilla JS
SPAs were a mistake
SPAs were a mistake
For years, a trend in our industry has been to build single-page apps, or SPAs. With an SPA, the entire site or app lives in a single HTML file. After the initial load, everything about the app is handled with JavaScript. This is, in theory, supposed to result in web apps that feel as fast and snappy as native apps. Today, I want to explore why that’s nonsense. Let’s dig in!
·gomakethings.com·
SPAs were a mistake
How to make MPAs that are as fast as SPAs
How to make MPAs that are as fast as SPAs
Yesterday, I wrote about how SPAs were a mistake. Today, I want to talk about how you can build multi-page apps (or, you know, regular websites) that are as fast as SPAs. Let’s dig in! A quick summary The sites and apps I build are absurdly fast. They load nearly instantly. Even on spotty 3G connections on the other side of the world, where many of my students live, things still load really quickly (like, 3 seconds or less fast).
·gomakethings.com·
How to make MPAs that are as fast as SPAs