Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend 103
Search
Sebastiaan Deckers
April 15, 2013
Programming
2
480
Frontend 103
Sebastiaan Deckers
April 15, 2013
Tweet
Share
More Decks by Sebastiaan Deckers
See All by Sebastiaan Deckers
Commons Host: Building a CDN for the rest of the world
sebdeckers
1
110
SVG Reality
sebdeckers
5
130
About Sebastiaan
sebdeckers
0
130
Frontend 100
sebdeckers
1
480
Frontend 101
sebdeckers
4
540
Frontend 102
sebdeckers
3
480
Frontend Testing
sebdeckers
3
330
Grunt: The JavaScript Task Runner
sebdeckers
8
390
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
450
見た目から始める生産性向上
ikumatadokoro
10
1.4k
Elm 0.19.0 Changes
bkuhlmann
0
510
"config" ってなんだ? / What is "config"?
okashoi
0
330
敵対的ポイフル
futabato
0
130
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
430
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
禅の心を手に入れよ
eltociear
1
370
Netty Chicago Java User Group 2024-04-17
sullis
0
200
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Being A Developer After 40
akosma
66
580k
Faster Mobile Websites
deanohume
300
30k
Documentation Writing (for coders)
carmenintech
60
4k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
The Mythical Team-Month
searls
216
42k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Music & Morning Musume
bryan
41
5.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.6k
Writing Fast Ruby
sferik
622
60k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Practical Orchestrator
shlominoach
183
9.7k
Transcript
103 Frontend Workflow 1. tool chain 2. content outline 3.
HTML structure 4. CSS selectors 5. hide everything 6. CSS styling
folder structure text editor web browser tool chain
folder structure separate concerns content: HTML, images design: CSS behaviour:
JavaScript
folder structure mysite /index.html /about.html /scripts /app.js /jquery.js /jquery-plugin.js /styles
/app.css /bootstrap.css /assets /logo.png /profile.jpg
write down the content into a text file create a
logical content structure independent of design Demo https://gist.github.com/cbas/5381537 outline
structure boilerplate HTML head vs body semantic markup
Demo https://gist.github.com/cbas/5381645 boilerplate HTML don't reinvent the wheel learn from
peers apply best practices
head vs body meta information goes in the head content
goes in the body
Demo https://gist.github.com/cbas/5381586 semantic markup navigation, sections headers, footers, titles text,
links, images tables, lists, forms div, span
navigation <nav />
sections <section /> <article /> <aside /> <figure />
headers <header />
footers <footer />
titles <h1 /> <h2 /> <h3 /> <h4 /> <h5
/> <h6 />
<p /> <b /> <strong /> <i /> <em />
<cite /> <blockquote /> <q /> <abbr /> <code /> text
links <a href="talk.pdf">Slides</a>
images <img src="photo.jpg" />
<table /> <thead /> <tbody /> <tr /> <td />
<tfoot /> tables
lists <ul /> <ol /> <li /> <dl /> <dt
/> <dd />
forms <form /> <input type="text" /> <input type="password" /> <input
type="date" /> <textarea /> <button />
non-semantic containers <div /> <span />
inlining, embedding, linking, importing CSS target all content empty blocks
selectors
inline CSS <p style="color: blue;">Cordon</p> Violates separation of concerns by
mixing design with content. Don't do this.
embedded CSS CSS is duplicated on each page. Avoid. <style>
p { color: gray; } a.button { background: url(pattern.jpg); } </style>
linked CSS HTML file references CSS file. This is usually
the best method. <link rel="stylesheet" src="app.css" />
imported CSS CSS file references another CSS file. Acceptable but
has performance issues. @import url("typography.css");
Demo https://gist.github.com/cbas/5382374 target all content Write a selector for each
element empty blocks
hide everything Avoid interference from unstyled content
Pro: old, reliable method Con: not semantic <!-- HTML comments
-->
[hidden] attribute Pro: semantically clear Con: still relatively unsupported Fix:
[hidden] { display: none; }
CSS styling normalize.css Make an element visible Implement the CSS
block for its selector