Montreal Girl Geeks: Building the Modern Web

Building the modern web
Rachel Andrew, Montreal Girl Geeks, February 2016
Rachel Andrew, Montreal Girl Geeks

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

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

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

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/

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/

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
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

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/

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/

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.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/

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

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

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 speciﬁcation 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;
120px 10px 120px 10px 120px;
grid-template-areas:
"header header header header header"
"sidebar . content content content";
}

.wrapper {
display: grid;
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-column-gap: 1em;
grid-row-gap: 1em;
grid-template-columns: repeat(12, [col] 4fr );
}

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

Put together use cases.
Show issues clearly.

Look for the issues already listed in draft speciﬁcations

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/

“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/

The Speciﬁcation Forum
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/

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

Montreal Girl Geeks: Building the Modern Web

Related slideshows

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Montreal Girl Geeks: Building the Modern Web

Similar to Montreal Girl Geeks: Building the Modern Web (20)

More from Rachel Andrew

More from Rachel Andrew (20)

Recently uploaded

Recently uploaded (20)

Montreal Girl Geeks: Building the Modern Web