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
130
SVG Reality
sebdeckers
5
140
About Sebastiaan
sebdeckers
0
140
Frontend 100
sebdeckers
1
480
Frontend 101
sebdeckers
4
540
Frontend 102
sebdeckers
3
490
Frontend Testing
sebdeckers
3
330
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2024
yui_knk
2
230
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
What is Parser
yui_knk
9
4.2k
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
130
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
830
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
A New Era of Testing
mannodermaus
2
510
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Featured
See All Featured
The Invisible Side of Design
smashingmag
296
50k
GraphQLとの向き合い方2022年版
quramy
43
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Music & Morning Musume
bryan
46
6k
Faster Mobile Websites
deanohume
304
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
The Cult of Friendly URLs
andyhume
76
6k
Adopting Sorbet at Scale
ufuk
73
8.9k
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