This document discusses the evolving nature of front-end development over time. It notes that in the past, skills like knowing HTML and CSS were highly marketable on their own. However, the field has grown increasingly complex with many new techniques and tools. The document encourages focusing on core fundamentals first before jumping to new tools, and stresses the importance of contributing to standards and open web platforms through techniques like filing issues to improve interoperability.

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

13. Dancers do not need to use
computers

15. The web gave me a
community

17. “Knowing HTML” was a
marketable skill

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

19. The web gave me a new
career.

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

22. Font tags and nested tables

26. 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);

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

29. … 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

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

32. Encouraging designers to
care about web standards

35. Front-end developer
2005?
Browser bugs expert

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

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

38. Innovation happens
through the standards
process

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

41. "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

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

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

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

50. The industry has grown up

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

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

54. How do I learn all this
stuff?!

55. You don't

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

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

58. Learn the core skills

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

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

61. Learn how to Learn

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

63. What problems do we have?

64. Does this address an actual
problem?

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

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

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

68. New is not always better
Beware shiny object syndrome

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

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

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

72. Knowing your core skills
brings opportunity to
contribute

73. Giving back

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

75. You will learn by teaching

76. Contribute to the
standards that make up the
web

77. The CSS Working Group

78. What do authors think?

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

80. Learn how the modern
standards process works

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

83. Vendor Prefixes are going
away

84. The Path of Flexbox vs.
Grid Layout

85. Flexbox - developed using
Vendor Prefixes

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

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

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

89. 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
}

90. The problem with feature
flags

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

92. It's a feature not a bug

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

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

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

98. Contribute to
interoperability
Raise bugs with browsers

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

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

101. Keep learning

102. Learning. Contributing
Excited about the future.

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