Montreal Girl Geeks: Building the Modern Web

Building the modern webRachel Andrew, Montreal Girl Geeks, February 2016

Rachel Andrew, Montreal Girl Geeks

https://rachelandrew.co.uk



Dancers do not need to use computers





The web gave me a community





“Knowing HTML” was a marketable skill



Learning something one day - teaching it to

someone else the next



The web gave me a new career.



The web was accessible, and had a culture of sharing knowledge.



Font tags and nested tables



<script type="text/javascript"></script>



The “Netscape Resize Fix”

If the user resized their browser window positioned elements lost their positioning values.

The “fix” was to reload the browser window on resize.











… basic support of existing W3C standards has been sacrificed in

the name of such innovation, needlessly fragmenting the Web

and helping no one.— http://archive.webstandards.org/mission.html


http://archive.webstandards.org/mission.html


Our goal is to support these core standards and encourage browser

makers to do the same, thereby ensuring simple, affordable

access to Web technologies for all.

— http://archive.webstandards.org/mission.html


http://archive.webstandards.org/mission.html




Encouraging designers to care about web standards



The IE6 years



Front-end developer 2005?

Browser bugs expert



Thanks to the hard work of countless WaSP members and

supporters (like you), Tim Berners-Lee’s vision of the web as an open, accessible, and universal community is largely the reality.— http://www.webstandards.org/2013/03/01/our-work-

here-is-done/Rachel Andrew, Montreal Girl Geeks

http://www.webstandards.org/2013/03/01/our-work-here-is-done/

http://www.webstandards.org/2013/03/01/our-work-here-is-done/


Browser vendors are implementing standard things in a standard way



Innovation happens through the standards

process



Show stopping browser bugs when doing

straightforward things in modern browsers are rare



Is it all easy now?



Studies show that a todo list is the most complex JavaScript app

you can create before a newer, better framework is invented.

— http://www.allenpike.com/2015/javascript-framework-fatigue/


http://www.allenpike.com/2015/javascript-framework-fatigue/

http://www.allenpike.com/2015/javascript-framework-fatigue/


We’re creating complexity

Hiding the simple languages of the web behind tooling and process





<div class="header"> <h1>My website</h1> <div class="nav"> </div></div>

<div class="article"></div><div class="sidebar"></div><div class="footer"></div>



<header> <h1>My website</h1> <nav> </nav></header>

<article></article><aside></aside><footer></footer>



Web Video Text Tracks Format (WebVTT)

WEBVTT

100:00:22.230 --> 00:00:24.606This is the first subtitle.

200:00:30.739 --> 00:00:34.074This is the second.

300:00:34.159 --> 00:00:35.743Third







Time-dimensional pseudo-classes

:current:past:future

:current(p, li, dt, dd) { background: yellow;}

:past(p, li, dt, dd) { background: transparent; color: #999999;}







CSS Grid Layout

<div class="wrapper"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <article class="content">Content</article></div>



.sidebar { grid-area: sidebar;}.content { grid-area: content;}.header { grid-area: header;}.wrapper { display: grid; grid-template-columns: 120px 10px 120px 10px 120px; grid-template-rows: auto; grid-template-areas: "header header header header header" "sidebar . content content content";}







“I’ll take a look if you create a Sass Mixin …”

— via my inbox



Emerging specifications like Grid remove the need

for a lot of the preprocessing







.ag1 { @include span(2 of 10);}

.ag2 { @include span(6 of 10); @include clearfix; }

.ag3 { @include span(2 of 10 last);}





/* declare a grid and set up a 10 column grid with gutters */.container { width: 90%; margin: 0 auto 0 auto; display: grid; grid-template-columns: [col] 4.25fr repeat(9, [gutter] 1fr [col] 4.25fr ) [gutter]; grid-template-rows: auto repeat(5, 100px);}

/* boxes positioned like so *//* heading in row 1 full width */h1 { grid-column: col / span col 10; grid-row: 1 / 2;}

/* left hand sidebar */.ag1 { grid-column: col / span gutter 2; grid-row: 2 / 3;}



We should be all over a spec like grid. This is the

future.





By leaning on frameworks, are we masking the issues?



Only by working with the specifications can we be part of improving them



Sheer frustration drove much of the Web Standards

movement



My fear is that our reliance on frameworks will stop us

pushing for better solutions





There are always compromises. They

shouldn’t be the same for every project.



Standardising on tools should not be at the

expense of learning HTML, CSS and JavaScript



Use your tools and frameworks lightly



Be ready to put them aside when they don’t suit a

project



Don’t become an expert in one brand of hammer.

Become a master carpenter.



Develop timeless skills



It is HTML, CSS, JavaScript

How you get there is just process.



The “space junk” of the web



Will we be still using frameworks to abstract away layout hacks, long

after there is any need for the hacks?



Best practices can become anti-patterns

HTTP/2 will see many of our best practices become bad practices.

— Image Sprites

— Domain Sharding

— Concatenating CSS and JavaScript

https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/Rachel Andrew, Montreal Girl Geeks

https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/


Whose time are we saving?



We write code once.

It runs 100s of 1000s of times in the browsers of our visitors.



“When I look around, I see our community spending a lot of time coming up with new tools and techniques to make our jobs easier. To ship faster. And it’s not that I’m against efficiency, but I think we need to consider the implications of our decisions. And if one of those implications is making our users suffer—or potentially suffer—in order to make our lives easier, I think we need to consider their needs above our own.”— http://aaron-gustafson.com/notebook/who-should-pay/


http://aaron-gustafson.com/notebook/who-should-pay/

http://aaron-gustafson.com/notebook/who-should-pay/




The myth of temporary



The web is inherently accessible. We choose to

protect that, or to break it.





I believe progressive enhancement is still the best approach we have



“a robust site or application in the more traditional sense minimises its dependencies. The minimum

dependency for a web site should be an internet connection and the

ability to parse HTML.”— http://www.bbc.co.uk/guidelines/futuremedia/

accessibility/html/progressive-enhancement.shtmlRachel Andrew, Montreal Girl Geeks

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/progressive-enhancement.shtml

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/progressive-enhancement.shtml


Start with the core experience



What is the minimum that I need to ship?

How can I ensure as I iterate I protect the core experience for everyone?



We Ship. We Iterate.



How should we integrate third party code?



Not Invented Here



“Are you afraid to write code? Does the thought linger in your brain that

somewhere out there somebody has already done this? Do you find yourself trapped in an analysis cycle where nothing is getting

done? Is your product mutating to accommodate third party components? If yes, then perhaps you are suffering from

invented-here syndrome.”— http://mortoray.com/2015/02/25/invented-here-syndrome/


http://mortoray.com/2015/02/25/invented-here-syndrome/


Avoid turning shortcuts and third party code into

dependencies



Dependency Inversion



“High level modules should not depend upon low-level modules. Both should depend upon abstractions.Abstractions should never depend upon details. Details should depend upon abstractions.”— http://www.objectmentor.com/resources/articles/dip.pdf


http://www.objectmentor.com/resources/articles/dip.pdf

http://www.objectmentor.com/resources/articles/dip.pdf




Progressively enhanced UI

— JavaScript implementation based on the regular HTML5 Video element

— Static maps that become draggable and zoomable - avoiding creating a dependency on one maps provider or library

— Ordering items via a form input - that become drag and drop if the user has JavaScript



You can’t do everything

You can do something



“A 100% pure progressively-enhanced website may not be practical on every single project you will ever encounter. While that sort of purity can exist, it’s unlikely in many business scenarios.

Budgets, timelines: these things exist. Progressive enhancement isn’t a zero sum game; it’s a continuum, just like the Web.”

— http://sixtwothree.org/posts/the-practical-case-for-progressive-enhancement


http://sixtwothree.org/posts/the-practical-case-for-progressive-enhancement

http://sixtwothree.org/posts/the-practical-case-for-progressive-enhancement


If your site doesn’t load who misses out? What do they lose?



Giving back



Where does our next generation of web

professionals come from?



If you have been doing this for a year, there is someone

6 months in who you are ideally placed to help.



You will learn by teaching



Contribute to the standards that make up the web



What do authors think?



Learn how the modern standards process works





If authors do not offer feedback, the final specification will reflect

our needs as understood by people who do not build

websites.



To make an impact on a specification you need to do so while it is still a draft

There is no point complaining about something that is finished. You have your chance to make your case during the open standards process.



Grid Layout and “gutters”



.wrapper { display: grid; grid-template-columns: 120px 10px 120px 10px 120px; grid-template-rows: auto; grid-template-areas: "header header header header header" "sidebar . content content content";}



.wrapper { display: grid; grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter]; grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);}



I believed the grid needed column and row gaps much like

multi-column layout has the column-gap property



.wrapper { display: grid; grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter]; grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);}



.wrapper { display: grid; grid-column-gap: 1em; grid-row-gap: 1em; grid-template-columns: repeat(12, [col] 4fr ); grid-template-rows: auto;}



Solving the gutter problem

— https://rachelandrew.co.uk/archives/2015/06/19/css-grid-layout-solving-the-gutter-problem/

— Post to the CSS WG list about the issue


https://rachelandrew.co.uk/archives/2015/06/19/css-grid-layout-solving-the-gutter-problem/

https://rachelandrew.co.uk/archives/2015/06/19/css-grid-layout-solving-the-gutter-problem/

https://lists.w3.org/Archives/Public/www-style/2015Jun/0153.html


Put together use cases. Show issues clearly.



Look for the issues already listed in draft specifications



I am hopeful that contributing to standards is

going to get easier



The CSS Working Group may move to GitHub for

issues in 2016



The Web Incubator Community Group

— https://www.w3.org/community/wicg/


https://www.w3.org/community/wicg/


“Their goal is to take the lessons learned during the RICG’s

responsive images slog and adapt web standards to match.”

— https://www.w3.org/community/respimg/2015/07/09/wicg/


https://www.w3.org/community/respimg/2015/07/09/wicg/

https://www.w3.org/community/respimg/2015/07/09/wicg/


The Specification Forum

http://discourse.wicg.io/


http://discourse.wicg.io/


Keep an eye on CSS Houdini

A task force working on drafts that seek to explain and expose different parts of CSS. This should ultimately make it easier to polyfill, innovate, experiment and create entire new features.

— https://wiki.css-houdini.org/

— https://dev.opera.com/articles/houdini/


https://wiki.css-houdini.org/

https://dev.opera.com/articles/houdini/


Browsers vendors and the CSS WG alike are looking for “signals” from authors

— are people talking about this spec?

— are they writing about it, speaking at conferences?

— are they directly requesting the features?





Make a noise so that browser vendors hear what

we want implemented



Adopt an emerging specification!



Some final thoughts



Things are changing fast. Solid understanding of core

web technologies has proved timeless.



Ensuring maximum accessibility should be at

the heart of all you do.



Find ways to contribute

Your voice & the voice of the people you build sites for is important.



Thank you.

@rachelandrew

Technology

Montreal Girl Geeks: Building the Modern Web