Teaching programming to children during the Corona crisis

Most of the world, is in some form of lockdown caused by the Corona virus, The Netherlands where I live included. Most of us now has to work from home and combine this with teaching since the schools are closed for at least a few weeks.

Since long I wanted to educate my kids on how tech works combined with programming. So here we go. This post will list short single file lessons, which try to make children from 9-13 understand technology better. My children had and will have a lot of fun, I hope yours will have as well.

To teach I chose the more than excellent p5js library based on Processing https://p5js.org/ with the excellent online editor https://editor.p5js.org/

Instruction

  • Open the editor https://editor.p5js.org/
  • Open the link next to each lesson and copy the all of the code
  • Past it into the editor and hit the play button
  • Since my children are not up to speed in English most of the naming and comments are in dutch. But adults/ developers should have no difficulty to adapt/translate it.

The core of p5js

  • setup() : initializes the canvas, setup variables and such things
  • draw() : is the function which probably runs a lot of times per seconds (requestAnimationFrame()) in here you place the code to play with, animations and such

Lesson 1: Displays, screens and Pixels

code 1: Black and white pixels in a 4 x 4 matrix simplified to 1 for white and 0 for black

code 2: Grayscale pixels, introduce the range of the RGB values ranging from 0 to 255

code 3: Color pixels, explain the RGB model and how to create mixes colors with RGB (green and blue becomes yellow ). I also adapted this code live to show them the actual pixels size of what they had created.

code 4: Pixels and Variables introduction of a variable as a magical box and a larger canvas to experiment with variables

Lesson 2: moving things and key presses

code 1: drawing and positioning explained

code 2: moving things around, make sure that your children click the canvas after they run the code otherwise the key presses won’t be handled.

code 3: drawing, activate the canvas again, and perhaps help your children to add a ‘magic’ random color on each keypress

Lesson 3: drawing pixels with the mouse

code 1: mouse position explained and experiment

code 2: condition when moving the mouse, change the color while drawing with a condition

code 3: mirror pixel, let the program do some extra drawing

The web last year

This year it seemed right to do some review of the last year. A year in which I learned a lot, gained new insights and even more questions..

Direction of the web

A lot have been written about the web by a lot of people with more influence than me. Hence I also don’t like the direction where the web is heading. 60-70 percent of the internet is owned well known large corporations. And the gap to publish something totally by yourself is getting larger and larger.

I like to compare it with houses, not many people can build a brick house by themselves, nevertheless if needed anyone can build a functional shelter. This shelter is something you get, know instantly how to build one all by yourself and own it. The digital equivalent of a shelter is a online publication or a post which unfortunately is owned directly by a large company. I would love to see people own the internet again publish completely on their own.

Online marketing

This year the divide between online marketing and engineering became more clear and present. I am even on the verge of diving deep into the world of online marketing because I do not understand it anymore. I always had a vision that when an online product solved a genuine problem for people that you should never hinder people.

Nevertheless it seems necessary to add bigdata, popovers, slide-ins, conversion footers eg. to increase the revenue.
Next year I really want to learn more about this balance. An hope to find answers in big data and measurements.
I still have the feeling that online products should be free of annoyances. Hence if allowed, lots of people would possibly prefer to drive a car with ad banners on the windscreen.

Front-end

This year we took some big steps to out vision to remove jQuery the next year. Unfortunately we still see IE11 sticking at 4 percent of our users. Which sometimes makes me sad. I prefer programming over implementing or finding fixes for browser inconsistencies for IE and sometimes IOS. Nevertheless it is part of the job might fall in the same category as emptying queues for backenders.

Learning goals

My main learning focus will be the same as last year; keep up with front-end, learn more on software architecture and get deeper in to linux/shell scripting.
To broaden my knowledge I want to extend my Node.js skills and dive deeper in Python.
Smaller topics I want to spend time on are:

  • Gain more insights in the balance between Online marketing and UX as a business goal
  • Building teams and motivating people
  • Typescript
  • Webassembly
  • Variable fonts
  • Service workers
  • Ethics and technology

Conclusion

Next will be again full of exciting things in technology, but I also predict a shift in balance. I hope that that more people will walk up straight instead of bent down on their phone (myself included).
For myself I am keen on learning a lot and keeping the nice life/work balance…

Improving performance

These days it’s very important for a site have a decent performance. For visitors as well as to reduce server costs for google 😉 …  Improving performance becomes a hard task when a website has a lot of machinery and complex parts from the path. In this article I will explain the low hanging fruit we could harvest. We also moved to Akamai to make use of a cdn since we serve the larger part of Europe.

Keep in mind that this process is based on our main site but it could be useful for other sites as well.

JS, Try to decrease the  javascript loaded

The main issue with lots of JavaScript is that it needs to be parsed, which is an issue for mid, and lower-end smartphones.
We took the following steps

  • Gaining insight
  • Removing unneeded javascript
  • have a discussion with marketing, about the marketing scripts being loaded by Google Tag Manager.
  • Create a division in transpiled bundles, one for legacy browsers and one for modern browsers

First we needed some insights luckily there is a convenient package for that `webpack-bundle-analyzer` once  installed I created an npm task to run webpack and analyze the results right away.

"webpack-analyze": "webpack --env.NODE_ENV=develop --profile --json > module/Eurocampings/analysis/stats.json && webpack-bundle-analyzer module/Eurocampings/analysis/stats.json"

This task runs webpack with some statistics flags which generates the output to JSON. After that the webpack-bundle-analyzer does the crunching en presents us with a nice Mondriaanesque webpage like the image below.

First obvious thing for us was to remove the moment locales, which we done in webpack with the IgnorePlugin

const ignorePlugin = new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
    });

This removed all the locales in the bundle, we still use several locales which we import directly in the modules. For us this already saved some hundreds kbs.

For the Google Tag manager we first tested what the performance increase would be. It turned out the the increase was significant. Since we cannot market our site properly without GTM we need to discuss with the business which things can be done with GTM to improve the performance of the site.

For the separate bundling of the JavaScript resource we need to decide which versions of browsers we still would like to support. The gain is this process will be the faster parsing for already modern browser. We need to calculate the business value before we will take this route.

CSS, remove unneeded things

  • Removing unneeded CSS
  • Check for mixins which generate lots of extra CSS
  • Remove vendor prefixes and if needed use postCSS and AutoPrefixrCritical rendering, inline CSS

Critical rendering, inline CSS

The principle of inline css is actually simple, use an npm package which uses a headless browser to scan a local, of live html-page, restricted by a width and a height. The classnames eg of the elements in the box are used to extract the styles to be inlined in the page. To be used to improve critical rendering.

For our situation, many dynamic pages, we needed to find an automated solution. We also posed the question, should we somehow generate one generic inline CSS blob, or should each page has its own inline css sections. The latter is more accurate but requires more processing time, and we need to scan every possible page. 

We went for the following solution.

  1. Scan the most important pages
  2. Combine the extracted CSS into 1 chuck of inline CSS
  3. Insert the inline CSS on all the pages

We use https://github.com/pocketjoso/penthouse this gives us a more low level critical css module which helps us to fetch the styles from several pages and combine them into one critical css file.

Other assets

For the other assets we sure had something to optimize for the other assets. Font were high on the list and easy to fix.

The font preloading was actually very simple, we made the decision to only preload the woff2 fonts and have the woff format as fallback for IE11 which we still support but luckily the usage is slowly decreasing. We use an assethelper which reads a manifest.json generated by webpack. Since we do not require the font we needed to explicitly bundle the font files like this

const fontStagMedium = './module/Eurocampings/assets/fonts/stag-medium-webfont.woff2';
const fontStagLight = './module/Eurocampings/assets/fonts/stag-light-webfont.woff2';

entry: {
            stagMedium: path.resolve(__dirname, fontStagMedium),
            stagLight: path.resolve(__dirname, fontStagLight),

Now we could add the fonts to the head section to preload the fonts

<link rel="preload" href="<?php echo $this->assetPacker('stag-medium-webfont.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo $this->assetPacker('stag-light-webfont.woff2'); ?>" as="font" type="font/woff2" crossorigin>
Without font preloading (fonts load in the stylesheet)
with font preloading (fonts load in parallel with css)

Wrap up

The business

We experienced that it is necessary to inform the business that with a large and complicated site: there are no silver bullets. You have to improve the site (lighthouse) point by point. Be transparent about the technical cost of each step. Sometimes you can combine the work to be made to improve the performance with some refactoring which helps to sell the step.

Things left to improve

One of the hardest parts we currently deal with is that our site has been out for a lot of years and have a lot of stakeholders. The result is that we have a lot….  A lot of HTML, JS and CSS. We pointed this to the business a lot of times, the sites needs focus and afterwards we can strip things out. Turns that this is not easy.  We decided to improve our user measurements and notice the business of parts never being used that need to be striped out. And of course we need to implement some functionality of service workers to help with the clientside caching especially for mobile users.

Current improvements

We still have work to do to improve the scores even further, hence our current measurements with lighthouse and pagespeed show an improvement of at least 200%. We are still performing mediocre on mobile. Luckily we know which step we need to take.