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.

A new Flask tutorial for journalism students

This semester I’ve been gradually building out a single, comprehensive python-beginners repo at GitHub, and the latest segment is all about getting started with Flask — a popular Python framework for building web apps (and easier than Django).

I have tried to use various books and online tutorials to teach Flask for the past two years, but I’ve finally given up on that because there’s just so much extra stuff (confusing for my students), or they are outdated and largely wrong now, or both.

Miguel Grinberg’s new, fully updated mega-tutorial for Flask is comprehensive and thorough — but it’s just too thorough, really, for journalism and communications students who only learned Python about four weeks ago.

Learn progressive web apps

New find: Progressive Web Apps Training, from Google.

“A PWA is not an API or a technology, but it is a web development approach that uses a combination of tools and technologies already available to create targeted, ideal user experiences. [This course] shows how to use service workers, APIs, and an application shell architecture for meaningful offline experiences, fast first load, and easy user reengagement upon repeat visits.”

Two things PWAs can do that a normal web app can’t:

  • Send push alerts/notifications.
  • Be used offline, and update any changes you made when you are back online.

Smashing Magazine wrote:

“Progressive web apps could be the next big thing for the mobile web. Originally proposed by Google in 2015, they have already attracted a lot of attention because of the relative ease of development and the almost instant wins for the application’s user experience.”

Unlike a native app, a web app can be used on mobile immediately. There’s no download from the App Store or equivalent.

A progressive web app will be built with HTML5 and with JavaScript, probably using a JavaScript framework.

This video explains why a progressive web app is desirable and shows excellent examples — including The Washington Post‘s PWA.

Resources

What are Progressive Web Apps? A blog post that is quite clear, does not get bogged down in jargon (of which there is plenty, where PWAs are concerned), and summarizes the whole mess nicely.

Why does The Washington Post’s Progressive Web App increase engagement on iOS? Even without iOS support, a PWA just loads faster. Way faster, apparently.

Forbes rebuilt its new mobile website as a Progressive Web App: All journalism is mobile, and there’s a lot of food for thought in this article.

5 awesome progressive web apps worth exploring: Twitter Mobile, The Washington Post, Flipboard, Paper Planes, Topple Trump.

Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices (GitHub repo).

Service Worker API (MDN): A JavaScript file that control the web page/site, “intercepting and modifying navigation and resource requests, and caching resources …” Key to offline use of a PWA.

PWAs vs. native apps: A deeper dive into pros and cons (published January 2017).

css.php