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
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
110
みんなでプロポーザルを書いてみた
yuriko1211
0
280
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
940
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
距離関数を極める! / SESSIONS 2024
gam0022
0
290
CSC509 Lecture 11
javiergs
PRO
0
180
Macとオーディオ再生 2024/11/02
yusukeito
0
380
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
Featured
See All Featured
Music & Morning Musume
bryan
46
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Making Projects Easy
brettharned
115
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Agile that works and the tools we love
rasmusluckow
327
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
Done Done
chrislema
181
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Ruby is Unlike a Banana
tanoku
97
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Building Applications with DynamoDB
mza
90
6.1k
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