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