October #sfhtml5 on Accelerated Mobile Pages

I joined October SFHTML5 last night, topic was Accelerated Mobile Pages Project.

AMP Project Page:
https://www.ampproject.org/
Google's Blog Post:
Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web
It's an open source project, GitHub Page is here:
https://github.com/ampproject



We talk a lot about performance... we all know performance matters. But what does "slow" mean? "Slowness" is contextual... but as Google's philosophy "Ten things we know to be true" says, we should "focus on user and all else will follow" - so developers should really think about "What does the user feel?" using the service you have built.



One thing we experience is this clash of "monetization and user acquisition" vs "user experience".

This slide got a big reaction! Very true - devs know ad cruft hurts users #sfhtml5 #webdev pic.twitter.com/6JuEw2okwy

— Alan Hogan (@AlanHogan) October 24, 2015

AMP is trying to solve that problem, building a win-win-win for users, publishers and advertisers.

This slide explains why AMP (Accelerated Mobile Pages) is a winning proposition #sfhtml5 @google #webdev pic.twitter.com/dGCb5io4bh

— b01dface (@b01dface) October 24, 2015

AMP project consists of AMP HTML, AMP JS and AMP CDN. No user-authored JS, subset of tags and selectors, but instead it consists of advanced components like amp-img tag, amp-ad tag which is a custom tag for ads, amp-twitter tag that shows embedded tweet, etc.

It's still an early stage project, and the team welcomes you all to join the project, try it out, give feedback and contribute to the project.

Videos:

RAIL: Putting the User at the Center of Performance with Paul Irish



Perf audit: Loading performance

#sfhtml5 Wikimedia team printed Chrome DevTools & analyzed what is slowing down page load, ended up doubling speed! https://t.co/OYZHYxVw9B

— Fumi (@Fumi) October 24, 2015

AMP: Accelerated Mobile Pages with Paul Bakaus



AMP Anatomy with Malte Ubl



Q&A with Paul Irish, Malte Ubl, Jordan Adler, and Paul Bakaus



Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

Modern Layouts: Getting Out of Our Ruts with Jen Simmons #sfhtml5

I joined SFHTML5 meetup last week, the speaker was +Jen Simmons and she gave a speech under the title "Modern Layouts: Getting Out of Our Ruts".



In case you missed it, worth your 70 min to watch!

Slides:



Demos:

http://labs.thewebahead.net/thelayoutsahead/

Code:

https://github.com/jensimmons/thelayoutsahead

Jen's Website:

http://thewebahead.net/

Video:



Some notes from the talk:

The people in the web industry were the people who'd be saying "The web is not print! We need to do it differently! Web is not print!"

True- but it is now time to look at magazines and print to learn about their wonderful and beautiful and creative layouts. Because, a lot of websites look the same. Many of them look ugly. They're full of ads. We need to learn from the beautiful magazines to make more beautiful websites. And current web technology actually allows us to do that.

Vogue magazine :D

vogue.com website :(

Magazines :D

Websites :(

This is a screenshot from a magazine article.

"You can totally make this happen on the web, using CSS Shapes level1" says Jen.

And here are some examples of how to make creative layout using CSS Shapes.

You can get the words between the images too, using masked images.

And here you can write a code to surround the text outside of polygon.

And then you can use the CSS Shapes editor Chrome plugin, to adjust and define a polygon shape. Super cool!!

Some more examples from magazines.

We can also definitely do similar things on the web by transforming text using CSS Transforms Module. Many people thinks about transforming (rotating) for animations- we should use it for other purposes -not just animations.

Some more styles that we might see more in the future: no matter what shape the window is, the height is always 100vh(viewport hight), and the there's the black box surrounding it, followed by the text.

An example of similar approach that was on New York Times article:
Judy Blume Knows All Your Secrets - NYTimes.com

But they seem to be using JavaScript for layout, when they don't have to...

"We don't need more JavaScript on our pages- we already have JavaScripts for ads, tracking users and analytics and all kinds of things, we already have performance problems on the web. I am a big believer that the moment you reach for JavaScript to solve a layout problem, you're doing it wrong. There should be a ban on using JavaScript for layout. You can do everything with CSS. It's going to be much faster, much more performative." says Jen.

On Flexbox: "There's lots of things that Flexbox can do, I think it'll take several years to know what Flexbox is capable of. I think the people who invented Flexbox don't even know what Flexbox is capable of - it's really that crazy awesome!"

A lot of people asks when they can use those features in production. Jen replies with a question: Do websites need to look exactly the same in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

"If you went to this site with IE6, it doesn't have drop shadow on the text, "N" won't be curly, but if you're actually a person using IE6- you wouldn't know that you are missing a drop shadow. People will only know about their own browser, and will not cry over the missing drop shadow that they don't know that exists. And this is the fundamental concept of Progressive Enhancement, and what the web is about." says Jen.

"Your website can look different in different browser, we don't need to hold the entire web hostage until IE7 doesn't exist any more, and make everyone on the web get the IE7-looking websites because we're scared to have the website look different on different browser."

"Hardest part is changing our thinking, not our CSS."

"Translate. Don't Transfer."
Looking at some magazines- good layout really serves the content and alters people's experience of that content. "It's important to remember the lessons we learned in the era when everyone thought the web was print and went the wrong road. We don't want to just transfer from graphic design, magazine design into the web- we have to translate. We have to get some inspiration, and come up with something we have never seen before that goes on to the web."

Experiment! Prototype!

The most dangerous phrase in the language is "We've always done it this way"
-Grace Hopper

And if you're interested in watching Bill Cunningham's "New York" that Jen mentioned, you can watch it on Hulu!


Storify:

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer.
 -Fumi Yamazaki

All About WebGL #sfhtml5

I joined SFHTML5 event on "All about WebGL" last week.

If you've missed it, the video archive is here!



Peter Lubbers opening the event.



Talk #1: Introduction to WebGL with Tony Parisi 

What started as a brave experiment four years ago is now a full-fledged part of the HTML5 application platform. WebGL provides real-time, hardware-accelerated 3D graphics to anyone with a browser. To create these experiences, all you need is a text editor and a little imagination. WebGL is being used worldwide to create games, virtual environments, page graphics and data visualization, and it now runs on all desktop browsers and nearly all mobile devices. Tony will give a brief, somewhat technical introduction to WebGL, provide a quick survey of what’s hot and what’s hype, and share his thoughts about where this exciting new technology is headed.

WebGL support by browsers as of 2014/1/26:
http://caniuse.com/#search=webgl%20

Tony showed lots of awesome WebGL examples.

100,000 Stars Google Experiment







His slides are up here:

An Introduction to WebGL - SFHTML5 Talk January 2014 from Tony Parisi

Talk #2: Optimizing WebGL Applications with +Don Olmstead 

WebGL allows developers to create fully 3D worlds within the context of the browser. However the API itself is very low level, and if used improperly can cause a performance bottleneck within the application. To effectively use the API its necessary to understand both how WebGL works and how an application uses the interface. To illustrate this the optimization of the PlayStation 4 UX, the largest site built completely on top of WebGL, will be discussed.

Did you know that PlayStation 4 UX was built on WebGL? That is totally awesome!



His slides are up here:




Talk #3: WebGL and real-time web communication with Victor Sand

You can sign up for Goo Engine here> http://www.gootechnologies.com/products/engine/

As we have seen, WebGL is a very powerful tool for enriching the Web with graphics, but how do we get it into the hands of the creators? How do we provide the myriad Web developers with powerful and sharpened mechanisms that take away the hassle of specialized and redundant ground work? Victor will highlight some aspects in building years of experience into a smooth pipeline, providing coders and artists alike with a sturdy and powerful web graphics tool. Then, Victorwill demonstrate how WebGL experiences created with Goo Engine can be elevated to the next level by making them even more immersive and engaging. They will show how you can use any smartphone connected to the public Internet to remotely control WebGL applications and games. Last, Victor will demonstrate how this communication pattern can be applied to control Web connected physical objects from continents away.

Slides

SFHTML5 WebGL Meetup - Jan 23, 2014 from pmoskovi

Talk #4: Finding (and Making) your Happy Place with Isaac Cohen 

Inspiring talk!

We as coders are by definition creators, our tools are html5 and our canvas the internet itself. Because of the power of the tools we possess, we are able to ask emotional questions through code. By spending time creating exactly what we want to create, we not only manifest a space that we can go to as an escape, but additionally provide an free oasis for the rest of humanity to explore. In this talk we will look at a few of these digital playgrounds, and additionally actualize a project of our own using WebRTC , the Web Audio API , and Three.js

Isaac's slides
Isaac's talk

The room was packed- actually they had 500 people in the waiting list so opened the cafe to accommodate more people!



Great view



Lots of food and wine



Thanks to Peter, Vanessa and all the staffs that made this event happen!

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

HTML5 Game Development course at Udacity

If you are a developer interested in building a game with HTML5, check out "HTML5 Game Development course" at Udacity- created by Colt McAnlis, Peter Lubbers and Sean Bennett :)

"HTML5 Game Development course"

Colt, the main instructor is Chrome Games Developer Advocate at Google focusing on HTML5 and Native Client always keeps giving infinite advices and tips about game development, and I'm really glad it has become this package for many people to learn :D (Although I am not a developer myself, I always enjoying listening and learning from Colt's talks.)

Promo video:



=======
Syllabus
=======

Lesson 0 - Optional HTML/Javascript crash course - Released February 4th, 2013
Lesson 1 - Introduction to Canvas rendering - Released February 4th, 2013
Lesson 2 - Atlases - Released February 18th, 2013
Lesson 3 - Map rendering - Released February 25th, 2013
Lesson 4 - Basic Input, handling events - Released March 4th, 2013
Lesson 5 - The entity hierarchy - Released March 11th, 2013
Lesson 6 - Box2D, and using external libraries - Released March 18th, 2013
Lesson 7 - Adding sound - Released March 25th, 2013
Lesson 8 - Asynchronous Loading - Released April 1st, 2013


==================
Study group meetup
==================

For each session, they held a study group at Google SF office to invite local developers and communicate, answer all the questions and listen to feedbacks. I was able to join their last meetup and it was a really great opportunity.






You can see all of the video archived :)

Lesson 0 & 1



 Lesson 2



 Lesson 3



Lesson 4



 Lesson 5



Lesson 6



Lesson 7



Lesson 8




Some of the links covered at the last session:
-Realm of the Mad God- a game that you can learn how to make a very small sized game
-Ilya Grigorik and his session video on "Breaking the 1000ms Time to Glass Mobile Barrier": slides  and video

===================
Other advice from Colt
===================

-Chrome Games review from Google I/O 2012
-List of books that can help you become an awesome game developer

...and of course if you don't know HTML5Rocks, this is THE time for you to visit!

http://www.html5rocks.com/


Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki