1.
Knowing it all
Rachel Andrew | Web Summer Camp

2.
Hello

3.
Progressive Web Apps, React, ES6, the
Web of Things, Browser APIs, PSR-7,
Functional Programming, Symfony,
ElasticSearch, Varnish, research, UX,
adaptive content, interaction design ...

4.
Business development, business finance,
systems adminstration, Puppet,
Docker, Apache and MySQL, Perl, PHP,
JavaScript, CSS, HTML ...

5.
What is CSS today?

6.
What is it to be a front-
end developer today?

7.
Burnout

8.
We want to know what is
the right thing to do
We want absolute answers.

9.
How would I get started
today?

10.
It's 1989

11.
Dancers do not need to use
computers

12.
The web gave me a
community

13.
“Knowing HTML” was a
marketable skill

14.
Learning something one
day
Teaching it to someone else the next

15.
The web gave me a new
career.

16.
The web was accessible, and
had a culture of sharing
knowledge.

17.
Font tags and nested tables

18.
What does this do?
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);

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

20.
… basic support of existing W3C
standards has been sacrificed in
the name of such innovation,
needlessly fragmenting the Web
and helping no one.
1
http://archive.webstandards.org/mission.html

21.
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.
1
http://archive.webstandards.org/mission.html

22.
Encouraging designers to
care about web standards

23.
Front-end developer
2005?
Browser bugs expert

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.
1
http://www.webstandards.org/2013/03/01/our-work-here-is-done/

25.
Browser vendors are
implementing standard
things in a standard way

26.
Innovation happens
through the standards
process

27.
Creating a better layout
system for the web
A story that begins in 1996

28.
"Traditional page-layout authoring tools
for desktop publishing allow you to create
and move and resize document frames.
You can then view and alter properties of
these frames, e.g. the background color
and the style of borders if any."
- https://www.w3.org/TR/NOTE-
layout

29.
"these policies cause an element to
define an invisible grid, in which
descendant element will be placed."
- https://www.w3.org/TR/
2005/WD-css3-
layout-20051215/

30.
Interoperability means
browser vendors work
together on the standards
that form the web

31.
Show stopping browser
bugs when doing
straightforward things in
modern browsers are rare

32.
The industry has grown up

33.
Studies show that a todo list is
the most complex JavaScript app
you can create before a newer,
better framework is invented.
1
http://www.allenpike.com/2015/javascript-framework-fatigue/

34.
We’re creating complexity
Hiding the simple languages of the web
behind tooling and process

35.
How do I learn all this
stuff?!

36.
You don't

37.
Not every tool /
technique / "best" practice
is for you

38.
Learn the skill of assessing
what is useful for you

39.
Learn the core skills

40.
Learn these first
4 HTML
4 CSS
4 JavaScript fundamentals
4 Accessibility fundamentals
4 Basics of HTTP

41.
Understand the
foundations
and you'll find everything else much
easier

42.
Learn how to Learn

43.
Learn the key things
properly
Don't fall into the habit of skimming
the surface and copying & pasting

44.
What problems do we have?

45.
Does this address an actual
problem?

46.
Is the person evangelizing
this working on projects
like ours?

47.
Collect ideas
Learn enough so you will recognise
when you have the problem that they
solve

48.
Collect experts
When you do need to learn they can
point you to real-world tested
experience

49.
New is not always better
Beware shiny object syndrome

50.
There is a lot of great work
being developed on very
simple stacks

51.
We all end up with
4 HTML
4 CSS
4 JavaScript
... how you get there is just process.

52.
That said ...
Leave a little space to play with cool
stuff
(because it's fun)

53.
Knowing your core skills
brings opportunity to
contribute

54.
Giving back

55.
If you have been doing this
for a year, there is someone
6 months in who you are
ideally placed to help.

56.
You will learn by teaching

57.
Contribute to the
standards that make up the
web

58.
The CSS Working Group

59.
What do authors think?

60.
Making a difference to a
CSS Specification
can be as straightforward as writing
about how you want to use it

61.
Learn how the modern
standards process works

62.
To make an impact on a
specification you need to do
so while it is still
experimental

63.
Vendor Prefixes are going
away

64.
The Path of Flexbox vs.
Grid Layout

65.
Flexbox - developed using
Vendor Prefixes

66.
Vendor prefixes don't know
an author from an end-user

67.
Browsers implemented and
then the spec changed
and changed again

68.
How do we create a flex container?
display: box
display: flexbox
display: flex
Flex shorthand for the flex items?
box-flex: 1
flex: 1

69.
Defining a Grid the old way
#grid {
display: grid;
grid-definition-columns: 150px 1fr;
grid-definition-rows: 50px 1fr 50px
}
The new way
#grid {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 50px 1fr 50px
}

70.
The problem with feature
flags

71.
Developing behind flags
means authors need to be
proactive in testing

72.
It's a feature not a bug

73.
If authors do not offer
feedback
the final specification will reflect our
needs as understood by people who do
not build websites.

74.
Contributing to the open
web platform
is like giving future you a gift

75.
Contribute to CSS Specifications
4 Specifications are discussed on GitHub at https://
github.com/w3c/csswg-drafts

76.
Contribute to
interoperability
Raise bugs with browsers

77.
GridBugs
https://github.com/rachelandrew/
gridbugs

78.
Learn to create a reduced
test case
This is a skill that will save time in
your own work and also in logging
issues with any project

79.
Keep learning

80.
Learning. Contributing
Excited about the future.

81.
Thank you!
Slides and links at
https://rachelandrew.co.uk/speaking/
event/web-summer-camp-2017
@rachelandrew