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
Tips & Tricks in Front-End Development
Search
Ire Aderinokun
June 18, 2016
Programming
20
2.8k
Tips & Tricks in Front-End Development
forLoop #2
Ire Aderinokun
June 18, 2016
Tweet
Share
More Decks by Ire Aderinokun
See All by Ire Aderinokun
Web Accessibility: It Doesn't Have to Be Hard
ireade
4
1k
Becoming a GDE & Overcoming Stage Fright
ireade
4
440
Web Components: The Future of Web Applications
ireade
6
1.5k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
430
Building "The Loop" (Introduction to Frontend Development)
ireade
3
270
Demystifying Angular Universal
ireade
5
530
Introduction to UI/UX Design
ireade
9
590
Building Modern Progressive Web Apps
ireade
7
1.5k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.2k
Other Decks in Programming
See All in Programming
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
Identifying User Idenity
moro
6
7.9k
Piniaの現状と今後
waka292
5
1.5k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
150
Server Driven Compose With Firebase
skydoves
0
400
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
Featured
See All Featured
A better future with KSS
kneath
238
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Music & Morning Musume
bryan
46
6.1k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Writing Fast Ruby
sferik
626
61k
The Language of Interfaces
destraynor
154
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Transcript
Tips & Tricks in Front-End Development Ire Aderinokun | forLoop
#2
About me • Ire Aderinokun • User Interface Designer and
Front-End Developer • Design+Tech, Big Cabal Media • Writer, www.bitsofco.de
How Do I…?
Centre an Element Both Horizontally and Vertically? How do I…
None
2D Transforms
None
2D Transforms
None
Flexbox
None
Make sure an image always fills it’s container? How do
I…
object-fit • fill • contain • cover
object-fit: fill;
object-fit: contain;
object-fit: cover;
None
Make sure an image is always visible within the viewport?
How do I…
None
Viewport Units • vh • vw • vmin • vmax
Viewport Units
None
Make a fixed fullscreen background image responsive? How do I…
None
background Property & Viewport Units
Handle visited vs. unvisited links? How do I…
None
a:visited
localStorage http://joelcalifa.com/blog/revisiting-visited/
None
None
Deal with broken images? How do I…
None
2 Facts about <img> 1. We can apply typography-related styling
to the <img> element 2. The <img> element is a “replaced element”
Styling the alt Text
Styling the Pseudo-Elements
None
None
None
Deal with empty states? How do I…
None
:empty
:empty
Make embedded content responsive? How do I…
Fixed Dimensions
position: absolute; https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
None
Fluid Dimensions
postMessage API iframe.js
postMessage API parent.js
None
Let’s talk about that Browser
browser?
60% of users are on Opera Mini
What’s the deal with Opera Mini? • High vs Extreme
Savings Mode • Uses the Presto rendering engine • Limited support for many HTML, CSS, and Javascript features • Javascript is executed on the server, not the client
None
Some Tips
Start with Semantic HTML
Provide Sensible Fallbacks or Alternatives Web Fonts System Fonts Icon
Fonts SVG or Images Gradients Solid Background Colours Animations Meaningful Initial Frame
Flexbox is your Friend
None
Use SVG
Test Without Javascript • Can the user complete the main
purpose of the site without javascript enabled?
Opera Mini forces us to practice Progressive Enhancement teaches
Workflow Tips
None
None
None
CSS
JavaScript
Automation
Other
Thanks! www.ireaderinokun.com www.bitsofco.de @ireaderinokun