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
460
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
660
Building Modern Progressive Web Apps
ireade
7
1.6k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.4k
Other Decks in Programming
See All in Programming
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
760
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
620
Create a website using Spatial Web
akkeylab
0
290
複数アプリケーションを育てていくための共通化戦略
irof
10
4k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
920
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
1
120
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
A2A プロトコルを試してみる
azukiazusa1
2
810
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
2
170
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
GitHub's CSS Performance
jonrohan
1031
460k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How to train your dragon (web standard)
notwaldorf
92
6.1k
How STYLIGHT went responsive
nonsquared
100
5.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