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
960
Becoming a GDE & Overcoming Stage Fright
ireade
4
420
Web Components: The Future of Web Applications
ireade
6
1.4k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
410
Building "The Loop" (Introduction to Frontend Development)
ireade
3
260
Demystifying Angular Universal
ireade
5
520
Introduction to UI/UX Design
ireade
9
570
Building Modern Progressive Web Apps
ireade
7
1.5k
What about CSS? Progressive Enhancement & CSS
ireade
9
4k
Other Decks in Programming
See All in Programming
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
580
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
120
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
10
870
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
100
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
4
300
Inner Source@DB: Eine Geschichte über Open-Source-Praktiken im DB Konzern
morl99
1
110
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
590
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
2024 コーディング研修
ckazu
2
600
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
460
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
500
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
530
Featured
See All Featured
The Mythical Team-Month
searls
217
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Unsuck your backbone
ammeep
664
57k
What's in a price? How to price your products and services
michaelherold
238
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Web Components: a chance to create the future
zenorocha
306
41k
Building an army of robots
kneath
300
41k
What the flash - Photography Introduction
edds
64
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
91
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
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