I finally put the time in and wrestled with the JavaScript fetch() API until I understood it well.
I also learned how to use the FormData constructor to easily grab all the values from an HTML form on submission. Same script. This is something I used to do with jQuery’s $( this ).serialize().
Vanilla JavaScript:
(new Image()).src = url;
Function:
const listOfURLs = [url1, url2, ...];
function preloadImage(url) {
(new Image()).src = url;
}
for (let i = 0; i < listOfURLs.length; i++) {
preloadImage(listOfURLs[i]);
}
Just another code snippet I am prone to forget.
This is a summary of a news nerds discussion in early November 2019.
A long but clear explanation of the whole module-bundling process is Modern JavaScript Explained For Dinosaurs (2017).
Using fetch(someURL) replaces all that AJAX headache we used to love/hate. This is a fairly clear example from the Frontend Masters Bootcamp website.
So many tutorial videos are so darned long! This summer, I set out to make a new series of videos for absolute beginners in JavaScript. They are free on YouTube, and here is the playlist:
Most of these video are shorter than 5 minutes. Only one is longer than 6 minutes (6:43), and I might try to go back and make that one shorter.
I have tried to title each video very specifically so that you can scan the playlist and pick a focused topic without thinking too hard.
The idea was to demonstrate characteristics of JavaScript, as well as the most basic programming concepts, in the JavaScript console — which every modern web browser has. I hope this will encourage beginners to play along and try things out in the console themselves.
Eloquent JavaScript, 3rd edition (2018), by Marijn Haverbeke: This free online book is available as a PDF, EPUB or MOBI (Kindle) download. I recommend it highly (as do many others).
I urge you to seek out resources at Mozilla Developer Network (MDN) and NOT at W3schools. Here are some great MDN resources for finding answers about JavaScript:
The excellent book series You Don’t Know JS is fully available online to read for free.
These two recently updated Codecademy courses are interactive, hands-on, and really great for beginners:
If you learned jQuery back when it was truly necessary, you might (like me) appreciate this resource for doing all those things using pure vanilla JavaScript instead: plainJS – The Vanilla JavaScript Repository
.
This is a great guide:
Writing Modular Code: A Starter Guide to Node & Webpack for Web Developers
“This repo was designed to teach news developers about the power of modular development using Node and Webpack. It is not an extensive dive into the merits or philosophies of modular code, nor is it an in-depth lesson on the complexities both Node and Webpack offer. Instead, this guide aims to be a first step for web developers unfamiliar with potentially daunting world of Node and Webpack.”
Written by the great @brizandrew
Today I read 4 Modern JavaScript (ES6+) Features You Should Be Using Now, by Mosh Hamedani. He says these are “the 20% of features that you use 80% of the time.” Plus, they are all “natively supported in all modern browsers.” (Here’s a nice link to a chart showing which features are supported in which browsers.)
Aside: This is the best ES6 reference I know. It’s by Luke Hoban.
var message = 'Hi ' + name + ',';
var message = `Hi ${name},`;
Top: Old way to concatenate strings and variables. Bottom: New way, using “template literals.” Note the two backticks in the bottom line.
Use of let and const instead of var: Both of these define variables scoped to the containing block, such as a for-loop.
var square = function(number) {
return number * number;
}
Above, the old way of writing an anonymous function. Below, the new way, with the “fat arrow” (=>):
const square = (number) => {
return number * number;
}
Lots more about those fat-arrow functions in Mosh’s post.
Destructuring lets us “extract properties from an object, or items from an array.” The syntax is like this:
const { street, city, state } = address;
That creates three new variables, with the values of address.street, address.city, and address.state from an existing object, address, with those properties. Syntax for extracting from an array is similar; see the post for an example.
The latest update I’ve made to a handout for students is Introduction to Leaflet.js. Leaflet is a JavaScript library for creating very flexible interactive maps, using a variety of tile sets — which enables you to make a map that looks quite different from a Google Map. There are lots of options for customization.
The Leaflet Quick Start Guide is good, but it doesn’t walk a beginner through how to enable the use of Mapbox tile sets, even though Leaflet recommends using them. Mapbox changed drastically about a year back, and those changes made it necessary to rewrite my tutorial.
Separately, I have a Leaflet assignment for students in their seventh week of working with JavaScript.
Docs for learning React: Hello, World!
Chrome extensions for React:
In the browser, React is faster than plain JavaScript because it relies on JavaScript objects. We never read from the DOM, and we only write to it the things that have changed. After watching several of the videos in React.js Essential Training (Lynda.com), I’m more than ever convinced that few, if any, journalism projects or apps would call for using React.
Install and start a local server: httpster (note: This requires Node and npm, which were covered here, including how to install them). Tip: cd into the directory containing your files before entering the command to start the server.
thedirectory $ httpster
The default: http://localhost:3333/
With a basic Hello, World app running in my browser, here’s what the React Developer Tools gave me (open the usual Chrome Developer Tools; find React on the far right side or on the drop-down menu):
There’s no requirement that you use httpster specifically, but you need to be running some server locally.
Likely you will use Webpack with React, so you can just use webpack-dev-server.
This is when I wanted to scream, but I contained myself: JSX stands for “JavaScript as XML.” Hearing that was enough to make me want to scream, but the clincher was when the video instructor said it allows us to “use tags that look a whole lot like HTML.” Argh! We already have HTML!
Then: “JSX is not natively supported by the browser.” This is why we need Babel (also covered in my earlier post) to transpile the code. It just gets worse and worse.
You’ll need two distinct folders in your project (in addition to node_modules): one for the stuff you actually build, and other for the files that run in the user’s browser. In the first videos I watched, these were named build and app. In this set of videos, they’re named src and dist.
What you name these folders doesn’t really matter — you will define their roles in the webpack.config.js file (assuming you’re using Webpack), but you have to be clear on what the purpose of each one is — so you’re putting your files in the correct place.
In the last video in section 2 (React.js Essential Training), I understood how the loaders work, or rather, how they are set up in the webpack.config.js file. The test property uses a regex string to indicate which file extensions will be governed by the specified loader. Each loader must be installed with npm, and it is specified in the loaders array.
In the strings for CSS and SCSS, the slam (!) separates multiple loaders, which will run in the order given, left to right.
