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
150
Frontend 100
sebdeckers
1
490
Frontend 101
sebdeckers
4
540
Frontend 102
sebdeckers
3
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
チームリードになって変わったこと
isaka1022
0
190
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Thoughts on Productivity
jonyablonski
69
4.5k
How to Ace a Technical Interview
jacobian
276
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
For a Future-Friendly Web
brad_frost
176
9.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Rails Girls Zürich Keynote
gr2m
94
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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