Bleeding Edge Web

Bleeding Edge Web: October 2014

News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

http://edgeATX.github.io/slides

D3.js: Data Visualization for the Modern Web

— Andrew Thornton (@encodingpixels)

Thanks to our sponsor:

PayPal

Bleeding Edge Web(site)

We're on the Web!

http://edgeATX.github.io/

Includes most of our slide decks from the past 2 years:

News from the Bleeding Edge

What Is Bleeding Edge Web?

A monthly-ish update of the latest and greatest in:

Anything else that might be interesting to web app devs!

Browser Update

Browser Pop Quiz

Last version check — August 2014 (2 months ago):

Chrome Firefox Opera Safari IE
37 31 23 7 11

Browser Pop Quiz

As of October 23, 2014:

Chrome Firefox Opera Safari IE
37
38
31
33
23
25
7
8
11

Chrome Highlights

Version 38

Chrome

Firefox Highlights

Version 32

Firefox

Firefox Highlights

Version 33

Firefox

Opera Highlights

Version 24 (based on Chromium 37)

Opera

Opera Highlights

Version 25 (based on Chromium 38)

Opera

Safari Highlights

Version 8

Safari

IE Highlights

IE

W3C Spec Highlights

CSS Shapes - Level 1

http://www.w3.org/TR/css-shapes/

CSS Shapes allow web designers to wrap content around custom paths, like circles, ellipses and polygons, thus breaking free from the constraints of the rectangle.

This is a live example — select text or resize the browser!

We're no strangers to love
You know the rules and so do I
A full commitment's what I'm thinking of
You wouldn't get this from any other guy

I just wanna tell you how I'm feeling
Gotta make you understand

Never gonna give you up
Never gonna let you down
Never gonna run around and desert you
Never gonna make you cry
Never gonna say goodbye
Never gonna tell a lie and hurt you

To view the live example, use a browser that supports CSS Shapes!

CSS Shapes - Level 1

Code for the previous example:

<img class="shape" src="images/bleeding-web.gif">

<p>We're no strangers to love...</p>
<p>I just wanna tell you how I'm feeling...</p>

<style>
.shape {
  shape-outside: url(images/bleeding-web.gif);
  float: left;
}
</style>

Quick Side Note...

Modernizr is awesome!

Compare the previous slide in browsers that do and do NOT support CSS shapes.

The shapes CSS class gets added to the <html> tag by Modernizr if supported

<script src="modernizr.js"></script>

<div class="shapes-example">
  // Example HTML and code
</div>
<div class="shapes-preview">
  <img src="shapes-preview.png">
</div>

<style>
  .shapes-example,
  .shapes .shapes-preview {
    display: none;
  }
  .shapes .shapes-example {
    display: block;
  }
</style>

CSS Shapes - Level 1

Key concept: target shapes must be floated

Built-in shapes: circle, ellipse, polygon

Additional layout properties, e.g. shape-margin: 1em;

CSS Shapes - Level 1

Why is this interesting?

* Surprisingly, Firefox typically leads on W3C spec support, but does NOT currently support Shapes.

CSS Shapes - Level 1

Resources

CSS Shapes - Level 1

Why "Level 1"?

There is also a Level 2 spec (currently in Editor's Draft status)

Will extend Level 1:

Intermission

Trivia Question

Windows is currently called Windows 8.

The next planned version is Windows 10.

Why no Windows 9?

Trivia Question (con't)

Official party line:

Windows 10 carries Windows forward into a new way of doing things. It is not an incremental change, but a new Windows that will empower the next billion users.

— "Microsoft Spokesman"

Trivia Question (con't)

Official party line:

Windows 10 carries Windows forward into a new way of doing things. It is not an incremental change, but a new Windows that will empower the next billion users.

— "Microsoft Spokesman"

Most likely real answer:

I bet the real reason it's called Windows 10 is because some enterprise app written 20 years ago checks for "Windows 9x"

— Anil Dash (@anildash)

Languages, Frameworks & Tools

Node-os

http://node-os.com/

The first operating system powered by npm

Mojolicious

http://mojolicio.us/

A next generation web framework for the Perl programming language

All the modern features you expect: REST, routes, plugins, even WebSockets

"Perl-ish" templates

Mojolicious (con't)

http://mojolicio.us/

Example of parsing a web page:

use Mojo::Base -strict;
use Mojo::ByteStream 'b';
use Mojo::UserAgent;

# Extract named character references from HTML spec
my $tx = Mojo::UserAgent->new->get('https://html.spec.whatwg.org');
b($_->at('td > code')->text . ' ' . $_->children('td')->[1]->text)->trim->say
  for $tx->res->dom('#named-character-references-table tbody > tr')->each;

1;

uilang

http://uilang.com/

A minimal, ui-focused programming language for web designers
<script src="uilang.js"></script>

<div id="notification">
  <p>You have 3 unread messages.</p>
  <button class="hide">Hide</button>
</div>

<code>
  clicking on ".hide" adds class "hidden" on "#notification"
</code>

PayPal HTML5 Video Player

http://paypal.github.io/accessible-html5-video-player/ (Overview)

Resources

Can I Use?

http://caniuse.com/

Massive matrix of browser-specific feature support

Includes known issues, links to specs and polyfills and more

Polyfill.io

https://cdn.polyfill.io/v1/ (Overview)

Hosted HTML5 / CSS3 / ES6 polyfill delivery service

A way of sending one single copy of each of the best polyfills, in the right order (respecting dependencies), to just the browsers that lack a native implementation.
/* Detected: chrome/37.0.2062
 *
 * - Array.isArray, License: CC0  (required by modernizr:es5array)
 * - Array.prototype.every, License: CC0  (required by modernizr:es5array)
 * - Array.prototype.filter, License: CC0  (required by modernizr:es5array)
 *   etc...
 */

Iconmonstr

http://iconmonstr.com/

2,600+ high-quality, royalty-free and customizable icons

Keyword search and curated collections

And now for something completely different...

Cool Firefox Features You May Have Missed

Event Listeners Popup

Available as of FF 33+

Useful for validating event handler setup, debugging memory leaks, etc.

Responsive Design Mode

Easily test standard and custom mobile layout sizes

Take mobile-sized fullscreen screenshots

3D DOM View

In recent FF, go to Developer Toolbox Options and check "3D View"

Click the tiny 3D box icon bottom-right and enjoy

Fin

http://www.meetup.com/bleeding-edge-web/

http://edgeATX.github.io/slides

Brian Moeskau — @bmoeskau

Thanks!

/

#