nbogie

import * as THREE from 'https://unpkg.com/three@0.122.0/build/three.module.js';

function dumpObjectToTextLines(obj, lines = [], isLast = true, prefix = '') {
    if (!obj || !obj.children) {
        return lines;
    }
    const localPrefix = isLast ? '└─' : '├─';
    lines.push(`${prefix}${prefix ? localPrefix : ''}${obj.name || '*no-name*'} [${obj.type}]`);
    const newPrefix = prefix + (isLast ? '  ' : '│ ');
    const lastNdx = obj.children.length - 1;

nbogie

// Trying to build stacked crosssectional plates of animated 3d noise, to mimic this work: 
//https://jacobjoaquin.tumblr.com/post/188120374046/jacobjoaquin-volumetric-noise-20190225
//
// Using the noise algorithm from this shader by iq: https://www.shadertoy.com/view/4sfGzS
// then making it have octaves.
//
// TODO: Make the plates square and isometric.
// TODO: Fix the noise so that builds in from both up as well as down.
// TODO: Correctly just overlay the colours of each upper disc on the lower discs, if the upper pixel is not transparent.  Need to model alpha.
// TODO: don't calculate a noise value that is going to be thrown away!

nbogie

Not master copy. Master copy is currently https://docs.google.com/spreadsheets/d/1yxMpMPd0f9T_c1s2h9KRQ_DnYVJ6Vym_23bRS7ZeBRg/edit#gid=0

Use case 1: User submits new apartment for rent

Which step of CRUD ?

Create

Example on a website

nbogie

React week 3 - student questions and issues for class

• setFoo doesn't magically update foo (useState):
  • mo's issue https://github.com/mnashawati/baby-names-react/blob/for-study/src/App.js#L30
• useState("someinitvalue") only initialises the variable the first time the component is ?rendered?. Subsequent calls to useState return the new current value of the variable.
• passing props down and down. useContext? "
  • should I learn redux?
• "should i learn class components?"
• to investigate: synthetic events an issue?

nbogie

pure js exercises using data

home-made

• tv maze - pure JS exercises (in repl)
• jobs listing pure JS exercises (in mahmut's repl)
  • get all the company titles and positions of every job [{company: CYF, position: programmer}, ...], etc
• stuff from my json-examples netlify
• p5js (filter points by dist(), find points by same, find enemies with low hit-points, etc)

nbogie

this is a rough plan for a demonstration. it is NOT a guide for students.

demo plan - random polygons

start with nothing

see [beginShape() documentation](https://p5js.org/reference/#/p5/beginShape

nbogie

javascript: (async () => { const RoughNotation = await import('https://unpkg.com/rough-notation?module'); const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]; const colorNames = "#66FF66 #FD5B78 #FF9966 #FFFF66 #50BFE6 #FF00CC".split(" "); document.querySelectorAll('p').forEach(elem => { RoughNotation.annotate(elem, { type: 'box', color: 'black', strokeWidth: pick([1, 2, 5]) }).show(); }); document.querySelectorAll('a').forEach(elem => { RoughNotation.annotate(elem, { type: 'highlight', color: pick(colorNames) }).show(); elem.style.color = 'black'; }); })()

nbogie

(async () => {
    const RoughNotation = await import('https://unpkg.com/rough-notation?module');

    const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
    const colorNames = "#66FF66 #FD5B78 #FF9966 #FFFF66 #50BFE6 #FF00CC".split(" ");

    document.querySelectorAll('p').forEach(elem => {
        RoughNotation.annotate(elem, { type: 'box', color: 'black', strokeWidth: pick([1, 2, 10]) }).show();
    });
    document.querySelectorAll('a').forEach(elem => {

nbogie

let allCountryScores = [
    {
      name: "Ethiopia", 
      scores:  [ {n: "Hanif", s: 999999999}, {n: "neill", s: 999999}, {n: "bob", s: "4134234"}, {n: "Hanif", s: "700"}]
    },     
    {
      name: "Scotland", 
      scores: [   {n: "lucy", s: 9999}, {n: "groundkeeper willie", s: 4000}, {n: "braveheart", s: 200}]
    },
    {

nbogie

Getting create-react-app working on Ubuntu (19.04)

problems and solutions

Main success conditions to be met:

We will be done if...

• npx create-react-app is runs and completes successfully
• student can run the react app created by the above