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.9k
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
1.1k
Becoming a GDE & Overcoming Stage Fright
ireade
4
470
Web Components: The Future of Web Applications
ireade
6
1.6k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
470
Building "The Loop" (Introduction to Frontend Development)
ireade
3
280
Demystifying Angular Universal
ireade
5
550
Introduction to UI/UX Design
ireade
9
670
Building Modern Progressive Web Apps
ireade
7
1.6k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.5k
Other Decks in Programming
See All in Programming
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
リッチエディターを安全に開発・運用するために
unachang113
1
350
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
140
Reactの歴史を振り返る
tutinoko
1
170
AIのメモリー
watany
12
1.2k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
Automating Front-end Workflow
addyosmani
1370
200k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Statistics for Hackers
jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Thoughts on Productivity
jonyablonski
69
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
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