299: Mike King Presentation

Mike King’s Portfolio Page     http://mikeking.io

Mike King’s Codepen     https://codepen.io/micjamking/#

Mike King’s Github     https://github.com/micjamking

He walked through his new portfolio pages of each project case studies at Ikayzo with various functions that he performed (from intern to manager in design department?)  for the last seven years after graduating KCC NMA. He also showed his new projects at Google also. My thoughts was that working with a smaller company you get to see entire process and may have opportunities to perform many different functions.

Clearstream project: Existed a lot of overhead and needed to redesign the platform—started from creating vocabulary for the project. Needs to be responsive ->SVG.

GoHawaii Mobile App project:

TourAloha projet: Pearl Harbor survivor voice can be heard at the site.

Teacup App project: The analytics that supplies what google analetics can’t provide.

Google’s Grasshopper: Mobile App using JavaScript.


How He Learned Javascript Coding: His sup. at Ikayzo, eventually went to Google, suggested him a book: Foundation HTML5 Animation with JavaScript (He mention something about Ch13.) He did lot of exercises and you can see on his Codepen https://codepen.io/collection/AMgkZv/#.

He also did many courses and tutorials other medium such as Codeacademy provides.

Work Time Allocation at Google: At Google, 80% work and 20% what you want to do. His 27 year-old supervisor, younger than him, coded internationalization software which replaced people who had been doing long hand. This person became the manager of this tool group, where Michael King is a member of.

Sketch: At Google, people uses Sketch, Photoshop, and Illustrator, but currently it is the direction of Sketch. He uses Sketch for everything.

Final Code Launch Process at Google: Eeach group has its autonomy. There is development, QA, and CEO checks it against some check list(?) before launching the page. That’s all.

Mike mentioned two websites: grow.io and blinkk.com(Mikes group?).

His concept of CMS(Content Management System) has been changed working at Google – use Google spreadsheet instead (db).

On His Animation: VR app(?) in mind, he created the HERO image/animation. Star is PNG, Halo effect png, CSS box shadow is used, pseudo element line?, CSS animation -transform, @keyframes(?). iframe animation, HTML <canvaselement.

He uses scroll based animation. Add and clear elements.

SVG: all elements are SVG because it is flexible, small, crisp, also you can animate it.

Animated GIFs and SVG:

Animated Gif may cause some performance issues for mobile (mobile network issue with iterative or recursive codes?)

SVG is great for vector in browser – individual element can be modified like illustrator.


Animation such as 60 frames in a second (16milisec) but browser manages the best performance. Screen canvas context.


Page download speed, video is next best. Animation interactive.

Other Misc. He is working hero image(?) section @home and others work header, collocal node, grid module, cha??, module is ??? Coders difficulty with Photoshop and Illustrator. Mike can work with those no problem. Multiple people working different responsibilities on the page. Designers need to use Sketch so they just place flatenned image paste to Sketch. Tools they use.

I was wondering how mobile network work with gaming data in WCDMA?


My Home Page WriteUp


The light that passed through the leaves of the trees dance on the ground.

La lumière qui traverse les feuilles des arbres danse sur le sol.

The spirit of our future is being formed on the surface of computer screen.
L’esprit de notre futur se forme à la surface de l’écran d’ordinateur.
Дух нашего будущего формируется на поверхности экрана компьютера.


l’avenir se déroule(takes place) ici.
future unfolds here.
будущее здесь.
未来就在这里(Le futur est là)(The future is here)
未來在這裡展開。(L’avenir commencera ici.)(The future unfolds here.)(未来はここから始まります。)


White sea waves in the distant ocean.(White waves are visible in the distant ocean.)
The sunlight that passes through the leaves of the trees dances on the ground.
(The light that passed through the leaves of the trees dance on the ground.)
A gentle wind passes through.
The spirit of our future is being formed on the surface of computer screen.
future unfolds here.

Les vagues blanches sont visibles dans l’océan lointain.

Vagues blanches dans la mer lointaine.

(Vagues blanches de la mer au loin.こっちかも)
La lumière du soleil qui passe à travers les feuilles des arbres dansent sur le terrain.
(La lumière qui traverse les feuilles des arbres danse sur le sol.)
vent doux de passer à travers.
(L’esprit de notre futur se forme à la surface de l’écran d’ordinateur.)
L’esprit de notre futur forme la surface de l’écran d’ordinateur.
l’avenir se déroule(takes place) ici.


(電腦屏幕表面形成了我們未來的精神。Not quite?どっち?)

Белые морские волны в далеком океане.
Солнечный свет, который проходит через листья деревьев, танцует на земле.
(Дух нашего будущего формируется на поверхности экрана компьютера.)
Дух нашего будущего формирует поверхность экрана компьютера.
будущее здесь.

299: Number of HTTP Methods Involved for Free WordPress.com Site and a Minimum Static Site w/o CSS on Bluehost

Accessing to apur1e.wordpress.com via Firefox with Tools>Web Developer >Network shows many GET and POST methods are executed to access to the blog home page.

The total of 52 requests (HTTP Methods)
3.12 MB / 76.04 KB transferred
Finish: 11.95 s
DOMContentLoaded: 1.40 s
load: 1.80 s

While accessing to apurie.com via Firefox with Tools>Web Developer>Network shows single methods is executed to go to my static home page without images and CSS file.

One request (HTTP Method: GET)
540 B / 524 B transferred
Finish: 183 ms
DOMContentLoaded: 213 ms
load: 215 ms

The above is an apples and oranges comparison.

But one can sense wordpress.com has possibly includes overhead due to database accesses, theme effectiveness, and additional advertisement images and gifs.

For future, I would like to compare the WordPress on my Bluehost installation to compare with free WordPress.com site.

299: WordPress Internals


Yoast.com WordPress Theme Anatomy


apur1e.wordpress.com/about uses single.php – single entry – this can have categories.

my blogger home page is page.php index.php and they have header, loops, and footer.

Blog site’s home is a Index.php, which is basically list of articles


I am looking at Firefox >Tools>Tool Developer>Network, and there are lots of POST HTTP requests on my screen. Every time I hit <return> on this editing, it execute/send POST request from admin-ajax.php to the domain apur1e.wordpress.com/wp-admin/admin-ajax.php.




Went back all the postings

Here are two web books to scan and tryout:

Fundamentals of Web Programming has two sections:
Part I : Client Side Programming, and
Part II: Server Side Programming.

How to think like a computer scientists 😉

Recreating Vintage Computer Art with Processing” Youtube video by Alexander Miller.

p5js Best Resources:

Make: Getting Started with P5.js : Making interactive JavaScript and Processing by Lauren McCarthy, Casey Reas, & Ben Fry
Daniel Shiffman Youtubes – such as Coding Train
Creating Star Field with p5js – by Daniel Shiffman

Things to learn in future: how to export processing art into mp4 like motion graphics. Then work it with AfterEffects to edit with other motion graphics.

How did I corrupted 299kh.wordpress.com?
I have a working apur1e.wordpress.com to blogART299 notes.

There, I worked on the WordPress.com and its customization. Learned a bit of using categories to select the specific category postings to be shown on a page. Down loaded version of wordpress download to Bluehost.com site has more options to change web pages.

I created apurie.com/test17 for my portfolio using WordPress.

I plan to go back to Joshua Davis:
HYPE library video by Davis
and ‘As Above’
and Realtime Audio Reactive Video-using audio imput,
and Yeasayer-O.N.E.
and Sveta Olga 004


ART299 : From Today’s Class

WordPress: The level of customization

This is big loop in php:

Chris’ video and resources:


Use of http://underscores.me/