5-minute JavaScript tutorials

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:

JavaScript Beginners

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.

Beginner JavaScript Resources

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

.

ES6: New things in JavaScript

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.

Leaflet for interactive maps

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.

Highcharts for data charts and graphs

I had to update my resource document Getting Started with Highcharts because the library has been updated, and jQuery is no longer required. The document covers:

  • Installation
  • Your First Chart
  • Changing Colors and Styles
  • Setting and Changing Chart Options
  • Licensing and Payments
  • Interactive Demos with jsFiddle
  • Which Chart Type Should I Use?

Separately, I have a Highcharts assignment for students in their third week of learning JavaScript. It includes a GitHub repo.

Useful sites for CSS, browser support issues

Found today while searching for answers to some coding questions:

Unminify: It’s impossible to read minified CSS, JavaScript, etc. This site accurately reformats minified code for you, making it human-readable.

Can I Use … ? Find out which browsers fully or partially support any given front-end web technology (such as box-sizing: all browsers!).

Should I Prefix? For some CSS properties, we need to include extra versions for Chrome, Firefox, or both (using the prefixes -webkit- or -moz-) — find out which properties still need these.

DiffChecker: Compare two text files. The differences between the two files (even spacing and tabs) are shown clearly with side-by-side highlighting.

Advice for starting to learn to code

Start learning HTML and CSS here:
https://www.codecademy.com/learn/learn-html
https://www.codecademy.com/learn/learn-css

Free interactive exercises at Dash/General Assembly:
https://dash.generalassemb.ly/

Supplement your HTML and CSS learning:
http://htmldog.com/guides/

Best first website host for students and faculty:
Reclaim Hosting
Your first domain name registration is free.

Look stuff up and get good answers: HTML
https://developer.mozilla.org/en-US/docs/Web/HTML

Look stuff up and get good answers: CSS
https://developer.mozilla.org/en-US/docs/Web/CSS

Anything from W3schools — DON’T USE IT!
Do not confuse the bad W3schools with the good, proper W3C
https://www.w3.org/standards/

After you feel comfortable with HTML and CSS, start learning JavaScript.
NOT JAVA! That is a completely different language.
JavaScript makes the web interactive.
https://www.codecademy.com/learn/introduction-to-javascript

Best book for learners — new edition will be published in February 2018:
https://www.amazon.com/Learning-Web-Design-Beginners-JavaScript/dp/1491960205

A good book for learning JavaScript and jQuery:
https://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647

Where to write your code

The best code editor is ATOM (Mac and Windows):
https://atom.io/

NOT DREAMWEAVER — never Dreamweaver!

Play with code interactively here:

Links updated Nov 9, 2017

css.php