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
460
Building "The Loop" (Introduction to Frontend Development)
ireade
3
270
Demystifying Angular Universal
ireade
5
540
Introduction to UI/UX Design
ireade
9
650
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
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
130
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
230
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
バリデーションライブラリ徹底比較
nayuta999999
1
430
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
410
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Documentation Writing (for coders)
carmenintech
71
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Become a Pro
speakerdeck
PRO
28
5.4k
Building Adaptive Systems
keathley
41
2.6k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Rails Girls Zürich Keynote
gr2m
94
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
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