Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building the modern web
Rachel Andrew, Montreal Girl Geeks, February 2016
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
Dancers do not need to use
computers
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
The web gave me a
community
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
“Knowing HTML” was a
marketable skill
Rachel Andrew, Montreal Girl Geeks
Learning something one
day - teaching it to
someone else the next
Rachel Andrew, Montreal Girl Geeks
The web gave me a new
career.
Rachel Andrew, Montreal Girl Geeks
The web was accessible, and had
a culture of sharing knowledge.
Rachel Andrew, Montreal Girl Geeks
Font tags and nested tables
Rachel Andrew, Montreal Girl Geeks
<script type="text/javascript">
<!--
function MM_reloadPage(init) {
if (init==true) with (navigator) {if ((appName=="Netsc...
The “Netscape Resize Fix”
If the user resized their browser window positioned
elements lost their positioning values.
The ...
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
… basic support of existing W3C
standards has been sacrificed in
the name of such innovation,
needlessly fragmenting the W...
Our goal is to support these core
standards and encourage browser
makers to do the same, thereby
ensuring simple, affordab...
Rachel Andrew, Montreal Girl Geeks
Encouraging designers to
care about web standards
Rachel Andrew, Montreal Girl Geeks
The IE6 years
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 ope...
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
Is it all easy now?
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 invent...
We’re creating complexity
Hiding the simple languages of
the web behind tooling and
process
Rachel Andrew, Montreal Girl G...
Rachel Andrew, Montreal Girl Geeks
<div class="header">
<h1>My website</h1>
<div class="nav">
</div>
</div>
<div class="article"></div>
<div class="sidebar">...
<header>
<h1>My website</h1>
<nav>
</nav>
</header>
<article></article>
<aside></aside>
<footer></footer>
Rachel Andrew, M...
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 --...
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
Time-dimensional pseudo-classes
:current
:past
:future
:current(p, li, dt, dd) {
background: yellow;
}
:past(p, li, dt, dd...
Rachel Andrew, Montreal Girl Geeks
Rachel Andrew, Montreal Girl Geeks
CSS Grid Layout
<div class="wrapper">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<artic...
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;...
Rachel Andrew, Montreal Girl Geeks
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
Rachel Andrew, Montreal Girl Geeks
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: gri...
We should be all over a spec
like grid. This is the
future.
Rachel Andrew, Montreal Girl Geeks
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
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
Use your tools and
frameworks lightly
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
Develop timeless skills
Rachel Andrew, Montreal Girl Geeks
It is HTML, CSS, JavaScript
How you get there is just
process.
Rachel Andrew, Montreal Girl Geeks
The “space junk” of the web
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...
Best practices can become anti-patterns
HTTP/2 will see many of our best practices become bad
practices.
— Image Sprites
—...
Whose time are we saving?
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 e...
Rachel Andrew, Montreal Girl Geeks
The myth of temporary
Rachel Andrew, Montreal Girl Geeks
The web is inherently
accessible. We choose to
protect that, or to break it.
Rachel Andrew, Montreal Girl Geeks
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 s...
Start with the core
experience
Rachel 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 ...
We Ship. We Iterate.
Rachel Andrew, Montreal Girl Geeks
How should we integrate
third party code?
Rachel Andrew, Montreal Girl Geeks
Not Invented Here
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 th...
Avoid turning shortcuts and
third party code into
dependencies
Rachel Andrew, Montreal Girl Geeks
Dependency Inversion
Rachel Andrew, Montreal Girl Geeks
“High level modules should not depend upon low-
level modules. Both should depend upon
abstractions.
Abstractions should n...
Rachel Andrew, Montreal Girl Geeks
Progressively enhanced UI
— JavaScript implementation based on the regular
HTML5 Video element
— Static maps that become d...
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 th...
If your site doesn’t load who
misses out? What do they lose?
Rachel Andrew, Montreal Girl Geeks
Giving back
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, Mo...
You will learn by teaching
Rachel Andrew, Montreal Girl Geeks
Contribute to the standards
that make up the web
Rachel Andrew, Montreal Girl Geeks
What do authors think?
Rachel Andrew, Montreal Girl Geeks
Learn how the modern
standards process works
Rachel Andrew, Montreal Girl Geeks
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
...
To make an impact on a specification you need to do so
while it is still a draft
There is no point complaining about someth...
Grid Layout and “gutters”
Rachel Andrew, Montreal Girl Geeks
.wrapper {
display: grid;
grid-template-columns:
120px 10px 120px 10px 120px;
grid-template-rows: auto;
grid-template-area...
.wrapper {
display: grid;
grid-template-columns:
repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-r...
I believed the grid needed
column and row gaps much like
multi-column layout has the
column-gap property
Rachel Andrew, Mo...
.wrapper {
display: grid;
grid-template-columns:
repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-r...
.wrapper {
display: grid;
grid-column-gap: 1em;
grid-row-gap: 1em;
grid-template-columns: repeat(12, [col] 4fr );
grid-tem...
Solving the gutter problem
— https://rachelandrew.co.uk/archives/2015/06/19/css-
grid-layout-solving-the-gutter-problem/
—...
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.”
— h...
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 sho...
Browsers vendors and the CSS WG alike are looking for
“signals” from authors
— are people talking about this spec?
— are t...
Rachel Andrew, Montreal Girl Geeks
Make a noise so that
browser vendors hear what
we want implemented
Rachel Andrew, Montreal Girl Geeks
Adopt an emerging
specification!
Rachel Andrew, Montreal Girl Geeks
Some final thoughts
Rachel Andrew, Montreal Girl Geeks
Things are changing fast.
Solid understanding of core
web technologies has
proved timeless.
Rachel Andrew, Montreal Girl G...
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 Gir...
Thank you.
@rachelandrew
Rachel Andrew, Montreal Girl Geeks
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Game Based Learning for Language Learners
Next
Upcoming SlideShare
Game Based Learning for Language Learners
Next
Download to read offline and view in fullscreen.

Share

Montreal Girl Geeks: Building the Modern Web

Download to read offline

A talk spanning my 18 years plus as a web developer, what we have learned and where we are going.

Related Books

Free with a 30 day trial from Scribd

See all

Montreal Girl Geeks: Building the Modern Web

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

    Oct. 6, 2021
  • EvadeDube

    Sep. 23, 2021
  • MAHENDRANJ7

    Sep. 22, 2021
  • chikawonah

    Sep. 16, 2021
  • ArjunkumarYadav2

    Aug. 17, 2021
  • GennxAndrey

    Jul. 30, 2021
  • JudithSalinas6

    Jul. 29, 2021
  • mortezarashidi1

    Jul. 19, 2021
  • AvinashKumar1736

    Jul. 14, 2021
  • ashishdoneriya

    Jul. 14, 2021
  • unknownperson45

    Jul. 9, 2021
  • karenglez8

    Jul. 7, 2021
  • LauraVVanLaningham

    Jul. 3, 2021
  • srinivasy13

    Jul. 1, 2021
  • NeerajKannam1

    Jun. 20, 2021
  • sridhars1

    Jun. 11, 2021
  • madihabuksh1

    Jun. 9, 2021
  • NathalieMavra

    Jun. 2, 2021
  • joseruicosta

    Jun. 2, 2021
  • LAXMIKUMARI57

    Jun. 1, 2021

A talk spanning my 18 years plus as a web developer, what we have learned and where we are going.

Views

Total views

241,666

On Slideshare

0

From embeds

0

Number of embeds

628

Actions

Downloads

1,155

Shares

0

Comments

0

Likes

1,131

×