Code Notes

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).

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

SMS and Google Sheets with Python

Student presentations in my advanced class are usually very interesting, and we all learn about new libraries and tools.

This week, Ryan S. showed an app that a soon-to-be-married fellow built to manage invitations and RSVPs for his wedding (read about the app).

“Sending an SMS or MMS is one of the most common tasks performed on the Twilio Platform” (see example).

The Twilio API is quite a Swiss Army Knife for making phone calls and sending/receiving SMS messages! Read more about SMS and Twilio.

The Python-happy groom also used gspread, a Python client library for the Google Sheets API (docs and GitHub).

Just another demonstration that you can do anything with Python!

UF Data Science and Informatics

UF DSI is a student organization that spans multiple disciplines and colleges at the University of Florida. They have a website and a Facebook group. They have a large, active board and are devoted to helping students advance their skills.

To that end, they offer free workshops throughout the academic year. Workshops cover Python, R, SQL, and data visualization. Links to DSI GitHub repos for each workshop series can be found on the website, and dates and times for workshops come through the Facebook group.

Jupyter Notebooks

To install: Install (instructions at jupyter.org). Note that pip or pip3 install works. It’s on that page, after the Anaconda part.

You do not have to use Anaconda, which installs a lot of extra things.

You can install into a virtualenv.

After installing (with virtualenv activated, if you installed it that way), in Terminal, at bash prompt:

jupyter notebook

On Mac OS and Chrome, a new browser tab opens automatically, and you’re in the same folder where you were in the Terminal. If you have someone else’s notebook or a folder full of notebooks, you can toss them into that folder using Finder, just like any files.

Above: Two folders and one notebook file. Below: A notebook, open for work.

Create a new notebook file: The New button is on the far right side.

The thing I find hard to remember: You have to press Shift-Return to run the code in one of the boxes, or to save markdown you wrote. On the Cell menu, there’s an option to Run All.

Menus and icons: Very self-explanatory. Explore them.

File menu: “Revert to checkpoint” lets you roll back to the previous save.

File menu: “Close and Halt.” Saves the current notebook file and closes it.

To quit Jupyter, go to the Terminal and Control-C (not Command).