montreal girl geeks: building the modern web
TRANSCRIPT
Building the modern webRachel Andrew, Montreal Girl Geeks, February 2016
Rachel Andrew, Montreal Girl Geeks
Learning something one day - teaching it to
someone else the next
Rachel Andrew, Montreal Girl Geeks
The web was accessible, and had a culture of sharing knowledge.
Rachel Andrew, Montreal Girl Geeks
<script type="text/javascript"><!--function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script>
Rachel Andrew, Montreal Girl Geeks
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.
Rachel Andrew, Montreal Girl Geeks
… 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
Rachel Andrew, Montreal Girl Geeks
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
Rachel Andrew, Montreal Girl Geeks
Encouraging designers to care about web standards
Rachel Andrew, Montreal Girl Geeks
Front-end developer 2005?
Browser bugs expert
Rachel Andrew, Montreal Girl Geeks
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
Browser vendors are implementing standard things in a standard way
Rachel Andrew, Montreal Girl Geeks
Innovation happens through the standards
process
Rachel Andrew, Montreal Girl Geeks
Show stopping browser bugs when doing
straightforward things in modern browsers are rare
Rachel Andrew, Montreal Girl Geeks
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/
Rachel Andrew, Montreal Girl Geeks
We’re creating complexity
Hiding the simple languages of the web behind tooling and process
Rachel Andrew, Montreal Girl Geeks
<div class="header"> <h1>My website</h1> <div class="nav"> </div></div>
<div class="article"></div><div class="sidebar"></div><div class="footer"></div>
Rachel Andrew, Montreal Girl Geeks
<header> <h1>My website</h1> <nav> </nav></header>
<article></article><aside></aside><footer></footer>
Rachel Andrew, Montreal Girl Geeks
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
Rachel Andrew, Montreal Girl Geeks
Time-dimensional pseudo-classes
:current:past:future
:current(p, li, dt, dd) { background: yellow;}
:past(p, li, dt, dd) { background: transparent; color: #999999;}
Rachel Andrew, Montreal Girl Geeks
CSS Grid Layout
<div class="wrapper"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <article class="content">Content</article></div>
Rachel Andrew, Montreal Girl Geeks
.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";}
Rachel Andrew, Montreal Girl Geeks
“I’ll take a look if you create a Sass Mixin …”
— via my inbox
Rachel Andrew, Montreal Girl Geeks
Emerging specifications like Grid remove the need
for a lot of the preprocessing
Rachel Andrew, Montreal Girl Geeks
.ag1 { @include span(2 of 10);}
.ag2 { @include span(6 of 10); @include clearfix; }
.ag3 { @include span(2 of 10 last);}
Rachel Andrew, Montreal Girl Geeks
/* 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;}
Rachel Andrew, Montreal Girl Geeks
We should be all over a spec like grid. This is the
future.
Rachel Andrew, Montreal Girl Geeks
By leaning on frameworks, are we masking the issues?
Rachel Andrew, Montreal Girl Geeks
Only by working with the specifications can we be part of improving them
Rachel Andrew, Montreal Girl Geeks
Sheer frustration drove much of the Web Standards
movement
Rachel Andrew, Montreal Girl Geeks
My fear is that our reliance on frameworks will stop us
pushing for better solutions
Rachel Andrew, Montreal Girl Geeks
There are always compromises. They
shouldn’t be the same for every project.
Rachel Andrew, Montreal Girl Geeks
Standardising on tools should not be at the
expense of learning HTML, CSS and JavaScript
Rachel Andrew, Montreal Girl Geeks
Be ready to put them aside when they don’t suit a
project
Rachel Andrew, Montreal Girl Geeks
Don’t become an expert in one brand of hammer.
Become a master carpenter.
Rachel Andrew, Montreal Girl Geeks
It is HTML, CSS, JavaScript
How you get there is just process.
Rachel Andrew, Montreal Girl Geeks
Will we be still using frameworks to abstract away layout hacks, long
after there is any need for the hacks?
Rachel Andrew, Montreal Girl Geeks
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
We write code once.
It runs 100s of 1000s of times in the browsers of our visitors.
Rachel Andrew, Montreal Girl Geeks
“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/
Rachel Andrew, Montreal Girl Geeks
The web is inherently accessible. We choose to
protect that, or to break it.
Rachel Andrew, Montreal Girl Geeks
I believe progressive enhancement is still the best approach we have
Rachel Andrew, Montreal Girl Geeks
“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
What is the minimum that I need to ship?
How can I ensure as I iterate I protect the core experience for everyone?
Rachel Andrew, Montreal Girl Geeks
How should we integrate third party code?
Rachel Andrew, Montreal Girl Geeks
“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/
Rachel Andrew, Montreal Girl Geeks
Avoid turning shortcuts and third party code into
dependencies
Rachel Andrew, Montreal Girl Geeks
“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
Rachel Andrew, Montreal Girl Geeks
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
Rachel Andrew, Montreal Girl Geeks
You can’t do everything
You can do something
Rachel Andrew, Montreal Girl Geeks
“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
Rachel Andrew, Montreal Girl Geeks
If your site doesn’t load who misses out? What do they lose?
Rachel Andrew, Montreal Girl Geeks
Where does our next generation of web
professionals come from?
Rachel Andrew, Montreal Girl Geeks
If you have been doing this for a year, there is someone
6 months in who you are ideally placed to help.
Rachel Andrew, Montreal Girl Geeks
Contribute to the standards that make up the web
Rachel Andrew, Montreal Girl Geeks
Learn how the modern standards process works
Rachel Andrew, Montreal Girl Geeks
If authors do not offer feedback, the final specification will reflect
our needs as understood by people who do not build
websites.
Rachel Andrew, Montreal Girl Geeks
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.
Rachel Andrew, Montreal Girl Geeks
.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";}
Rachel Andrew, Montreal Girl Geeks
.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);}
Rachel Andrew, Montreal Girl Geeks
I believed the grid needed column and row gaps much like
multi-column layout has the column-gap property
Rachel Andrew, Montreal Girl Geeks
.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);}
Rachel Andrew, Montreal Girl Geeks
.wrapper { display: grid; grid-column-gap: 1em; grid-row-gap: 1em; grid-template-columns: repeat(12, [col] 4fr ); grid-template-rows: auto;}
Rachel Andrew, Montreal Girl Geeks
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
Rachel Andrew, Montreal Girl Geeks
Put together use cases. Show issues clearly.
Rachel Andrew, Montreal Girl Geeks
Look for the issues already listed in draft specifications
Rachel Andrew, Montreal Girl Geeks
I am hopeful that contributing to standards is
going to get easier
Rachel Andrew, Montreal Girl Geeks
The CSS Working Group may move to GitHub for
issues in 2016
Rachel Andrew, Montreal Girl Geeks
The Web Incubator Community Group
— https://www.w3.org/community/wicg/
Rachel Andrew, Montreal Girl Geeks
“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/
Rachel Andrew, Montreal Girl Geeks
The Specification Forum
http://discourse.wicg.io/
Rachel Andrew, Montreal Girl Geeks
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/
Rachel Andrew, Montreal Girl Geeks
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?
Rachel Andrew, Montreal Girl Geeks
Make a noise so that browser vendors hear what
we want implemented
Rachel Andrew, Montreal Girl Geeks
Things are changing fast. Solid understanding of core
web technologies has proved timeless.
Rachel Andrew, Montreal Girl Geeks
Ensuring maximum accessibility should be at
the heart of all you do.
Rachel Andrew, Montreal Girl Geeks
Find ways to contribute
Your voice & the voice of the people you build sites for is important.
Rachel Andrew, Montreal Girl Geeks