SlideShare a Scribd company logo
1 of 125
Download to read offline
Building the modern web
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
Dancers do not need to use
computers
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
The web gave me a
community
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
“Knowing HTML” was a
marketable skill
Rachel Andrew, NAGW 2015
Learning something one
day - teaching it to
someone else the next
Rachel Andrew, NAGW 2015
The web gave me a new
career.
Rachel Andrew, NAGW 2015
The web was accessible, and had
a culture of sharing knowledge.
Rachel Andrew, NAGW 2015
Font tags and nested tables
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
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
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
Rachel Andrew, NAGW 2015
Encouraging designers to
care about web standards
Rachel Andrew, NAGW 2015
The IE6 years
Rachel Andrew, NAGW 2015
Front-end developer 2005?
Browser bugs expert
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
Is it all easy now?
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
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
1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.
2
00:00:30.739 --> 00:00:34.074
This is the second.
3
00:00:34.159 --> 00:00:35.743
Third
Rachel Andrew, NAGW 2015
Rachel Andrew, NAGW 2015
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
Rachel Andrew, NAGW 2015
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
Rachel Andrew, NAGW 2015
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
Rachel Andrew, NAGW 2015
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
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
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
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
Use your tools and
frameworks lightly
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
Develop timeless skills
Rachel Andrew, NAGW 2015
It is HTML, CSS, JavaScript
How you get there is just
process.
Rachel Andrew, NAGW 2015
The “space junk” of the web
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
Whose time are we saving?
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
Rachel Andrew, NAGW 2015
The myth of temporary
Rachel Andrew, NAGW 2015
The web is inherently
accessible. We choose to
protect that, or to break it.
Rachel Andrew, NAGW 2015
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.shtml
Rachel Andrew, NAGW 2015
Start with the core
experience
Rachel 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
We Ship. We Iterate.
Rachel Andrew, NAGW 2015
How should we integrate
third party code?
Rachel Andrew, NAGW 2015
Not Invented Here
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
Dependency Inversion
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
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
You can’t do everything
You can do something
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
Giving back
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
You will learn by teaching
Rachel Andrew, NAGW 2015
Contribute to the standards
that make up the web
Rachel Andrew, NAGW 2015
What do authors think?
Rachel Andrew, NAGW 2015
Learn how the modern
standards process works
Rachel Andrew, NAGW 2015
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
Grid Layout and “gutters”
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
Put together use cases.
Show issues clearly.
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
Rachel Andrew, NAGW 2015
Make a noise so that
browser vendors hear what
we want implemented
Rachel Andrew, NAGW 2015
Adopt an emerging
specification!
Rachel Andrew, NAGW 2015
Some final thoughts
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

More Related Content

What's hot

Preparing a WordPress Plugin for Translation
Preparing a WordPress Plugin for TranslationPreparing a WordPress Plugin for Translation
Preparing a WordPress Plugin for TranslationBrian Hogg
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Rachel Andrew
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsStoyan Stefanov
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From ScratchBrian Hogan
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone InteractivityEric Steele
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for youSimon Willison
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 

What's hot (12)

Preparing a WordPress Plugin for Translation
Preparing a WordPress Plugin for TranslationPreparing a WordPress Plugin for Translation
Preparing a WordPress Plugin for Translation
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From Scratch
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Ajax Security
Ajax SecurityAjax Security
Ajax Security
 

Viewers also liked

20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage ContentBarry Feldman
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
 
임보람, 새로운 정보서비스 모델 제안(Korsa2009)
임보람, 새로운 정보서비스 모델 제안(Korsa2009)임보람, 새로운 정보서비스 모델 제안(Korsa2009)
임보람, 새로운 정보서비스 모델 제안(Korsa2009)Boram Lim
 
Mobile Homepage&Mobile App
Mobile Homepage&Mobile AppMobile Homepage&Mobile App
Mobile Homepage&Mobile Appkevin_kim
 
Building a Website - Art or Science
Building a Website - Art or ScienceBuilding a Website - Art or Science
Building a Website - Art or Sciencebizboost123
 
Internet of Things forecasts infographic
Internet of Things forecasts infographicInternet of Things forecasts infographic
Internet of Things forecasts infographicEmerald Technology
 
21 Essential JavaScript Interview Questions
21 Essential JavaScript Interview Questions21 Essential JavaScript Interview Questions
21 Essential JavaScript Interview QuestionsArc & Codementor
 
Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java DevelopersJoonas Lehtinen
 
The Next Indispensable Tool for Small Business
The Next Indispensable Tool for Small BusinessThe Next Indispensable Tool for Small Business
The Next Indispensable Tool for Small BusinessField Agent
 
Arex 2 q15 results presentation
Arex 2 q15 results presentationArex 2 q15 results presentation
Arex 2 q15 results presentationApproachResources
 
Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...
Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...
Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...Resurgent India
 
Event Report - Informatica Informatica World 2016
Event Report - Informatica Informatica World 2016Event Report - Informatica Informatica World 2016
Event Report - Informatica Informatica World 2016Holger Mueller
 
Q3 2015 investor presentation
Q3 2015 investor presentationQ3 2015 investor presentation
Q3 2015 investor presentationteradata2014
 
Q2 fy15 atento earnings presentation final
Q2 fy15 atento earnings presentation   finalQ2 fy15 atento earnings presentation   final
Q2 fy15 atento earnings presentation finalinvestorsatento
 

Viewers also liked (20)

20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 
임보람, 새로운 정보서비스 모델 제안(Korsa2009)
임보람, 새로운 정보서비스 모델 제안(Korsa2009)임보람, 새로운 정보서비스 모델 제안(Korsa2009)
임보람, 새로운 정보서비스 모델 제안(Korsa2009)
 
Mobile Homepage&Mobile App
Mobile Homepage&Mobile AppMobile Homepage&Mobile App
Mobile Homepage&Mobile App
 
Internet of Things Facts and Stats
Internet of Things Facts and StatsInternet of Things Facts and Stats
Internet of Things Facts and Stats
 
Building a Website - Art or Science
Building a Website - Art or ScienceBuilding a Website - Art or Science
Building a Website - Art or Science
 
Internet of Things forecasts infographic
Internet of Things forecasts infographicInternet of Things forecasts infographic
Internet of Things forecasts infographic
 
21 Essential JavaScript Interview Questions
21 Essential JavaScript Interview Questions21 Essential JavaScript Interview Questions
21 Essential JavaScript Interview Questions
 
Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java Developers
 
The Next Indispensable Tool for Small Business
The Next Indispensable Tool for Small BusinessThe Next Indispensable Tool for Small Business
The Next Indispensable Tool for Small Business
 
Examples of Ontology Applications
Examples of Ontology ApplicationsExamples of Ontology Applications
Examples of Ontology Applications
 
Regulating the dark net
Regulating the dark netRegulating the dark net
Regulating the dark net
 
Introduction to Coding
Introduction to CodingIntroduction to Coding
Introduction to Coding
 
Arex 2 q15 results presentation
Arex 2 q15 results presentationArex 2 q15 results presentation
Arex 2 q15 results presentation
 
Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...
Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...
Role of CFO in the Economic Turnaround - Manufacturing Sector Growth Rate - P...
 
Event Report - Informatica Informatica World 2016
Event Report - Informatica Informatica World 2016Event Report - Informatica Informatica World 2016
Event Report - Informatica Informatica World 2016
 
Q3 2015 investor presentation
Q3 2015 investor presentationQ3 2015 investor presentation
Q3 2015 investor presentation
 
Q2 fy15 atento earnings presentation final
Q2 fy15 atento earnings presentation   finalQ2 fy15 atento earnings presentation   final
Q2 fy15 atento earnings presentation final
 

Similar to Looking Back to Move Forward: Building the Modern Web

Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web DevelopmentRachel Andrew
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptChristian Heilmann
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
Intro To Django
Intro To DjangoIntro To Django
Intro To DjangoUdi Bauman
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!DrupalDay
 
Speed up your Drupal instance!!
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!bmeme
 
Creating Responsive Experiences
Creating Responsive ExperiencesCreating Responsive Experiences
Creating Responsive ExperiencesTim Kadlec
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015
Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015
Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015AboutYouGmbH
 
Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.
Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.
Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.Globant
 

Similar to Looking Back to Move Forward: Building the Modern Web (20)

Technology
TechnologyTechnology
Technology
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
Vaadin & Web Components
Vaadin & Web ComponentsVaadin & Web Components
Vaadin & Web Components
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
Knowing it all
Knowing it allKnowing it all
Knowing it all
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
JavaScript isn't evil.
JavaScript isn't evil.JavaScript isn't evil.
JavaScript isn't evil.
 
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
 
Speed up your Drupal instance!!
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!
 
It new2015
It new2015It new2015
It new2015
 
Why NodeJS
Why NodeJSWhy NodeJS
Why NodeJS
 
Creating Responsive Experiences
Creating Responsive ExperiencesCreating Responsive Experiences
Creating Responsive Experiences
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015
Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015
Rolando Santamaría Masó - Simplicity meets scalability - code.talks 2015
 
Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.
Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.
Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.
 

More from Rachel Andrew

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutRachel Andrew
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutRachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS LayoutRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Rachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayRachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSRachel Andrew
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel Andrew
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldRachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldRachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel Andrew
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridRachel Andrew
 

More from Rachel Andrew (20)

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
 
Graduating to Grid
Graduating to GridGraduating to Grid
Graduating to Grid
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 

Recently uploaded

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 

Recently uploaded (12)

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 

Looking Back to Move Forward: Building the Modern Web

  • 1. Building the modern web Rachel Andrew, NAGW 2015 Rachel Andrew, NAGW 2015
  • 4. Dancers do not need to use computers Rachel Andrew, NAGW 2015
  • 6. The web gave me a community Rachel Andrew, NAGW 2015
  • 8. “Knowing HTML” was a marketable skill Rachel Andrew, NAGW 2015
  • 9. Learning something one day - teaching it to someone else the next Rachel Andrew, NAGW 2015
  • 10. The web gave me a new career. Rachel Andrew, NAGW 2015
  • 11. The web was accessible, and had a culture of sharing knowledge. Rachel Andrew, NAGW 2015
  • 12. Font tags and nested tables Rachel Andrew, NAGW 2015
  • 13. <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
  • 14. 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
  • 19. … 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
  • 20. 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
  • 22. Encouraging designers to care about web standards Rachel Andrew, NAGW 2015
  • 23. The IE6 years Rachel Andrew, NAGW 2015
  • 24. Front-end developer 2005? Browser bugs expert Rachel Andrew, NAGW 2015
  • 25. 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
  • 26. Browser vendors are implementing standard things in a standard way Rachel Andrew, NAGW 2015
  • 27. Innovation happens through the standards process Rachel Andrew, NAGW 2015
  • 28. Show stopping browser bugs when doing straightforward things in modern browsers are rare Rachel Andrew, NAGW 2015
  • 29. Is it all easy now? Rachel Andrew, NAGW 2015
  • 30. 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
  • 31. We’re creating complexity Hiding the simple languages of the web behind tooling and process Rachel Andrew, NAGW 2015
  • 33. <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
  • 35. Web Video Text Tracks Format (WebVTT) WEBVTT 1 00:00:22.230 --> 00:00:24.606 This is the first subtitle. 2 00:00:30.739 --> 00:00:34.074 This is the second. 3 00:00:34.159 --> 00:00:35.743 Third Rachel Andrew, NAGW 2015
  • 38. 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
  • 41. 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
  • 42. .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
  • 45. “I’ll take a look if you create a Sass Mixin …” — via my inbox Rachel Andrew, NAGW 2015
  • 46. Emerging specifications like Grid remove the need for a lot of the preprocessing Rachel Andrew, NAGW 2015
  • 49. .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
  • 51. /* 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
  • 52. We should be all over a spec like grid. This is the future. Rachel Andrew, NAGW 2015
  • 54. By leaning on frameworks, are we masking the issues? Rachel Andrew, NAGW 2015
  • 55. Only by working with the specifications can we be part of improving them Rachel Andrew, NAGW 2015
  • 56. Sheer frustration drove much of the Web Standards movement Rachel Andrew, NAGW 2015
  • 57. My fear is that our reliance on frameworks will stop us pushing for better solutions Rachel Andrew, NAGW 2015
  • 59. There are always compromises. They shouldn’t be the same for every project. Rachel Andrew, NAGW 2015
  • 60. Standardising on tools should not be at the expense of learning HTML, CSS and JavaScript Rachel Andrew, NAGW 2015
  • 61. Use your tools and frameworks lightly Rachel Andrew, NAGW 2015
  • 62. Be ready to put them aside when they don’t suit a project Rachel Andrew, NAGW 2015
  • 63. Don’t become an expert in one brand of hammer. Become a master carpenter. Rachel Andrew, NAGW 2015
  • 64. Develop timeless skills Rachel Andrew, NAGW 2015
  • 65. It is HTML, CSS, JavaScript How you get there is just process. Rachel Andrew, NAGW 2015
  • 66. The “space junk” of the web Rachel Andrew, NAGW 2015
  • 67. Will we be still using frameworks to abstract away layout hacks, long after there is any need for the hacks? Rachel Andrew, NAGW 2015
  • 68. 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
  • 69. Whose time are we saving? Rachel Andrew, NAGW 2015
  • 70. We write code once. It runs 100s of 1000s of times in the browsers of our visitors. Rachel Andrew, NAGW 2015
  • 71. “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
  • 73. The myth of temporary Rachel Andrew, NAGW 2015
  • 74. The web is inherently accessible. We choose to protect that, or to break it. Rachel Andrew, NAGW 2015
  • 76. I believe progressive enhancement is still the best approach we have Rachel Andrew, NAGW 2015
  • 77. “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.shtml Rachel Andrew, NAGW 2015
  • 78. Start with the core experience Rachel Andrew, NAGW 2015
  • 79. 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
  • 80. We Ship. We Iterate. Rachel Andrew, NAGW 2015
  • 81. How should we integrate third party code? Rachel Andrew, NAGW 2015
  • 82. Not Invented Here Rachel Andrew, NAGW 2015
  • 83. “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
  • 84. Avoid turning shortcuts and third party code into dependencies Rachel Andrew, NAGW 2015
  • 86. “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
  • 88. 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
  • 89. You can’t do everything You can do something Rachel Andrew, NAGW 2015
  • 90. “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
  • 91. If your site doesn’t load who misses out? What do they lose? Rachel Andrew, NAGW 2015
  • 93. Where does our next generation of web professionals come from? Rachel Andrew, NAGW 2015
  • 94. 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
  • 95. You will learn by teaching Rachel Andrew, NAGW 2015
  • 96. Contribute to the standards that make up the web Rachel Andrew, NAGW 2015
  • 97. What do authors think? Rachel Andrew, NAGW 2015
  • 98. Learn how the modern standards process works Rachel Andrew, NAGW 2015
  • 100. 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
  • 101. 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
  • 102. Grid Layout and “gutters” Rachel Andrew, NAGW 2015
  • 103. .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
  • 104. .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
  • 105. I believed the grid needed column and row gaps much like multi-column layout has the column-gap property Rachel Andrew, NAGW 2015
  • 106. .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
  • 107. .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
  • 108. 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
  • 109. Put together use cases. Show issues clearly. Rachel Andrew, NAGW 2015
  • 110. Look for the issues already listed in draft specifications Rachel Andrew, NAGW 2015
  • 111. I am hopeful that contributing to standards is going to get easier Rachel Andrew, NAGW 2015
  • 112. The CSS Working Group may move to GitHub for issues in 2016 Rachel Andrew, NAGW 2015
  • 113. The Web Incubator Community Group — https://www.w3.org/community/wicg/ Rachel Andrew, NAGW 2015
  • 114. “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
  • 116. 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
  • 117. 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
  • 119. Make a noise so that browser vendors hear what we want implemented Rachel Andrew, NAGW 2015
  • 121. Some final thoughts Rachel Andrew, NAGW 2015
  • 122. Things are changing fast. Solid understanding of core web technologies has proved timeless. Rachel Andrew, NAGW 2015
  • 123. Ensuring maximum accessibility should be at the heart of all you do. Rachel Andrew, NAGW 2015
  • 124. Find ways to contribute Your voice & the voice of the people you build sites for is important. Rachel Andrew, NAGW 2015