Progressive Web App

What is Progressive Web App?

  1. It must run under HTTPS.
  2. It must include a Web App Manifest. – The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop. Manifest.jason: from https://developers.google.com/web/fundamentals/web-app-manifest/
    {
      "short_name": "Maps",
      "name": "Google Maps",
      "icons": [
        {
          "src": "/images/icons-192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "/images/icons-512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ],
      "start_url": "/maps/?source=pwa",
      "background_color": "#3367D6",
      "display": "standalone",
      "scope": "/maps/",
      "theme_color": "#3367D6"
    }
  3. It must implement a service worker. –  a script that your browser runs in the background.

https://ionicframework.com/pwa

 

ART258: WP Child Themes, AWS, etc.

The process is  detailed at https://www.creativemedia.space/intro-to-cms-via-wordpress/

ChildTheme
Woo Commerce
Github create new project
use  VScode changes on code

Info on AWS from Chris. – I think what they call “serverless” is you don’t have to manage your server, create your database, and authentification, etc. It will be done by AWS (Amazon S3 for static site (html, css, and js stored), Amazon Cognito User Pool for user registration and authentication, Amazon API and Rambda to DB) Amazon provides easier package to do all. It is not serverless, but servers are packaged by Amazon interfaces. That what I think.

 

 

 

Alternative to Adobe and Other Tools

Affinity Photo  $49 Similar to Photoshop

Affinity Design  $49 Similar to Illustrator

ArtRage  $79?

Paint.net ?

Gimp open-source raster graphics editor – Similar to Photoshop

InkScape ?

Sketch for Mac  a tutorial $99 a proprietary vector graphics editor for Apple’s macOS
Sketch – Look at the CSS Attribute of feature to develop HTML and CSS.
Sketch Plugin – AutoPlugin-How to align center horizontally & vertically.

Webflow a tutorial – drag and drop tool built for designing websites

Squarespace – hosting?

 

 

 

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?