'

Looking Back to Move Forward: Building the Modern Web

Понравилась презентация – покажи это...





Слайд 0

Building the modern web Rachel Andrew, NAGW 2015 Rachel Andrew, NAGW 2015


Слайд 1

Rachel Andrew, NAGW 2015


Слайд 2

Rachel Andrew, NAGW 2015


Слайд 3

Dancers do not need to use computers Rachel Andrew, NAGW 2015


Слайд 4

Rachel Andrew, NAGW 2015


Слайд 5

The web gave me a community Rachel Andrew, NAGW 2015


Слайд 6

Rachel Andrew, NAGW 2015


Слайд 7

“Knowing HTML” was a marketable skill Rachel Andrew, NAGW 2015


Слайд 8

Learning something one day - teaching it to someone else the next Rachel Andrew, NAGW 2015


Слайд 9

The web gave me a new career. Rachel Andrew, NAGW 2015


Слайд 10

The web was accessible, and had a culture of sharing knowledge. Rachel Andrew, NAGW 2015


Слайд 11

Font tags and nested tables Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 14

Rachel Andrew, NAGW 2015


Слайд 15

Rachel Andrew, NAGW 2015


Слайд 16

Rachel Andrew, NAGW 2015


Слайд 17

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 20

Rachel Andrew, NAGW 2015


Слайд 21

Encouraging designers to care about web standards Rachel Andrew, NAGW 2015


Слайд 22

The IE6 years Rachel Andrew, NAGW 2015


Слайд 23

Front-end developer 2005? Browser bugs expert Rachel Andrew, NAGW 2015


Слайд 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-workhere-is-done/ Rachel Andrew, NAGW 2015


Слайд 25

Browser vendors are implementing standard things in a standard way Rachel Andrew, NAGW 2015


Слайд 26

Innovation happens through the standards process Rachel Andrew, NAGW 2015


Слайд 27

Show stopping browser bugs when doing straightforward things in modern browsers are rare Rachel Andrew, NAGW 2015


Слайд 28

Is it all easy now? Rachel Andrew, NAGW 2015


Слайд 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/javascriptframework-fatigue/ Rachel Andrew, NAGW 2015


Слайд 30

We’re creating complexity Hiding the simple languages of the web behind tooling and process Rachel Andrew, NAGW 2015


Слайд 31

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 33

<header> <h1>My website</h1> <nav> </nav> </header> <article></article> <aside></aside> <footer></footer> Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 35

Rachel Andrew, NAGW 2015


Слайд 36

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 38

Rachel Andrew, NAGW 2015


Слайд 39

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 42

Rachel Andrew, NAGW 2015


Слайд 43

Rachel Andrew, NAGW 2015


Слайд 44

“I’ll take a look if you create a Sass Mixin …” — via my inbox Rachel Andrew, NAGW 2015


Слайд 45

Emerging specifications like Grid remove the need for a lot of the preprocessing Rachel Andrew, NAGW 2015


Слайд 46

Rachel Andrew, NAGW 2015


Слайд 47

Rachel Andrew, NAGW 2015


Слайд 48

.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


Слайд 49

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 51

We should be all over a spec like grid. This is the future. Rachel Andrew, NAGW 2015


Слайд 52

Rachel Andrew, NAGW 2015


Слайд 53

By leaning on frameworks, are we masking the issues? Rachel Andrew, NAGW 2015


Слайд 54

Only by working with the specifications can we be part of improving them Rachel Andrew, NAGW 2015


Слайд 55

Sheer frustration drove much of the Web Standards movement Rachel Andrew, NAGW 2015


Слайд 56

My fear is that our reliance on frameworks will stop us pushing for better solutions Rachel Andrew, NAGW 2015


Слайд 57

Rachel Andrew, NAGW 2015


Слайд 58

There are always compromises. They shouldn’t be the same for every project. Rachel Andrew, NAGW 2015


Слайд 59

Standardising on tools should not be at the expense of learning HTML, CSS and JavaScript Rachel Andrew, NAGW 2015


Слайд 60

Use your tools and frameworks lightly Rachel Andrew, NAGW 2015


Слайд 61

Be ready to put them aside when they don’t suit a project Rachel Andrew, NAGW 2015


Слайд 62

Don’t become an expert in one brand of hammer. Become a master carpenter. Rachel Andrew, NAGW 2015


Слайд 63

Develop timeless skills Rachel Andrew, NAGW 2015


Слайд 64

It is HTML, CSS, JavaScript How you get there is just process. Rachel Andrew, NAGW 2015


Слайд 65

The “space junk” of the web Rachel Andrew, NAGW 2015


Слайд 66

Will we be still using frameworks to abstract away layout hacks, long after there is any need for the hacks? Rachel Andrew, NAGW 2015


Слайд 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 Rachel Andrew, NAGW 2015


Слайд 68

Whose time are we saving? Rachel Andrew, NAGW 2015


Слайд 69

We write code once. It runs 100s of 1000s of times in the browsers of our visitors. Rachel Andrew, NAGW 2015


Слайд 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-shouldpay/ Rachel Andrew, NAGW 2015


Слайд 71

Rachel Andrew, NAGW 2015


Слайд 72

The myth of temporary Rachel Andrew, NAGW 2015


Слайд 73

The web is inherently accessible. We choose to protect that, or to break it. Rachel Andrew, NAGW 2015


Слайд 74

Rachel Andrew, NAGW 2015


Слайд 75

I believe progressive enhancement is still the best approach we have Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 77

Start with the core experience Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 79

We Ship. We Iterate. Rachel Andrew, NAGW 2015


Слайд 80

How should we integrate third party code? Rachel Andrew, NAGW 2015


Слайд 81

Not Invented Here Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 83

Avoid turning shortcuts and third party code into dependencies Rachel Andrew, NAGW 2015


Слайд 84

Dependency Inversion Rachel Andrew, NAGW 2015


Слайд 85

“High level modules should not depend upon lowlevel 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


Слайд 86

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 88

You can’t do everything You can do something Rachel Andrew, NAGW 2015


Слайд 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-progressiveenhancement Rachel Andrew, NAGW 2015


Слайд 90

If your site doesn’t load who misses out? What do they lose? Rachel Andrew, NAGW 2015


Слайд 91

Giving back Rachel Andrew, NAGW 2015


Слайд 92

Where does our next generation of web professionals come from? Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 94

You will learn by teaching Rachel Andrew, NAGW 2015


Слайд 95

Contribute to the standards that make up the web Rachel Andrew, NAGW 2015


Слайд 96

What do authors think? Rachel Andrew, NAGW 2015


Слайд 97

Learn how the modern standards process works Rachel Andrew, NAGW 2015


Слайд 98

Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 101

Grid Layout and “gutters” Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 104

I believed the grid needed column and row gaps much like multi-column layout has the column-gap property Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 107

Solving the gutter problem — https://rachelandrew.co.uk/archives/2015/06/19/cssgrid-layout-solving-the-gutter-problem/ — Post to the CSS WG list about the issue Rachel Andrew, NAGW 2015


Слайд 108

Put together use cases. Show issues clearly. Rachel Andrew, NAGW 2015


Слайд 109

Look for the issues already listed in draft specifications Rachel Andrew, NAGW 2015


Слайд 110

I am hopeful that contributing to standards is going to get easier Rachel Andrew, NAGW 2015


Слайд 111

The CSS Working Group may move to GitHub for issues in 2016 Rachel Andrew, NAGW 2015


Слайд 112

The Web Incubator Community Group — https://www.w3.org/community/wicg/ Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 114

The Specification Forum http://discourse.wicg.io/ Rachel Andrew, NAGW 2015


Слайд 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, NAGW 2015


Слайд 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, NAGW 2015


Слайд 117

Rachel Andrew, NAGW 2015


Слайд 118

Make a noise so that browser vendors hear what we want implemented Rachel Andrew, NAGW 2015


Слайд 119

Adopt an emerging specification! Rachel Andrew, NAGW 2015


Слайд 120

Some final thoughts Rachel Andrew, NAGW 2015


Слайд 121

Things are changing fast. Solid understanding of core web technologies has proved timeless. Rachel Andrew, NAGW 2015


Слайд 122

Ensuring maximum accessibility should be at the heart of all you do. Rachel Andrew, NAGW 2015


Слайд 123

Find ways to contribute Your voice & the voice of the people you build sites for is important. Rachel Andrew, NAGW 2015


Слайд 124

Thank you. @rachelandrew https://rachelandrew.co.uk/presentations/nagw Rachel Andrew, NAGW 2015


Слайд 125


×

HTML:





Ссылка: