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
Salvattore
Search
RobertoEsteban
October 28, 2013
Technology
0
52
Salvattore
Lightning Talks Dia Sábado 26 de Octubre en StartechConf 2013.
RobertoEsteban
October 28, 2013
Tweet
Share
More Decks by RobertoEsteban
See All by RobertoEsteban
@punchgirls
robertoesteban
0
89
BrainTask
robertoesteban
0
40
Como fui contratado dos veces por Google
robertoesteban
0
140
How AdkintunMobile
robertoesteban
0
100
Pero si en mi computador funciona!!!
robertoesteban
0
140
Estrategias de Contenidos
robertoesteban
0
79
Secretos para hablar en Publico
robertoesteban
0
150
¿Por qué aprender a desarrollar aplicaciones móviles ?
robertoesteban
0
99
Los grandes artistas copian, los genios roban
robertoesteban
0
130
Other Decks in Technology
See All in Technology
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
380
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
450
コードレビューを支援するAI技術の応用
akkie76
2
140
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
700
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
250
バッチ処理のSLOをどう設計するか
rynsuke
7
580
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
Challenges - Open Farming Hackdays 2024
loleg
0
570
Featured
See All Featured
Building an army of robots
kneath
300
41k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Designing for humans not robots
tammielis
247
25k
Agile that works and the tools we love
rasmusluckow
323
20k
Being A Developer After 40
akosma
56
580k
Embracing the Ebb and Flow
colly
78
4.1k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
KATA
mclloyd
14
11k
Typedesign – Prime Four
hannesfritz
36
2k
Become a Pro
speakerdeck
PRO
8
4.4k
Transcript
None
THE PROBLEM
THE “SOLUTION”
THE PROBLEM WITH THE “SOLUTION” MADNESS IMAGELOAD? JS-DEFINED LAYOUT
None
EASY SETUP, CSS-ORIENTED <section class=“test”> <div class=“item”>Item 1</div> <div class=“item”>Item
2</div> <div class=“item”>Item 3</div> … <div class=“item”>Item 20</div> </section>
EASY SETUP, CSS-ORIENTED <div class=“item”> Item 1 </div> <div class=“item”>
Item 2 </div> <div class=“item”> Item 3 </div> <div class=“item”> Item 4 </div> <div class=“item”> Item 5 </div> <div class=“item”> Item 6 </div>
EASY SETUP, CSS-ORIENTED <section class=“test” data-columns> <div class=“item”>Item 1</div> <div
class=“item”>Item 2</div> <div class=“item”>Item 3</div> … <div class=“item”>Item 20</div> </section>
.test[data-columns]::before { content: ‘3 .column.size-1of3’ } EASY SETUP, CSS-ORIENTED .column
{ float: left; } .size-1of3 { width: 33.333%; }
<section class=“test” data-columns> <div class=“column size-1of3”> <div class=“item”>Item 1</div> <div
class=“item”>Item 4</div> … </div> <div class=“column size-1of3”> <div class=“item”>Item 2</div> <div class=“item”>Item 5</div> … </div> <div class=“column size-1of3”> <div class=“item”>Item 3</div> <div class=“item”>Item 6</div> … </div> </section> EASY SETUP, CSS-ORIENTED
PROBLEM SOLVED, THE RIGHT WAY <div class=“item”> Item 1 </div>
<div class=“item”> Item 2 </div> <div class=“item”> Item 3 </div> <div class=“item”> Item 4 </div> <div class=“item”> Item 5 </div> <div class=“item”> Item 6 </div>
@media screen and (min-width: 481px) and .test[data-columns]::before { content: ‘2
.column.size-1of2’ } } @media screen and (min-width: 601px) and .test[data-columns]::before { content: ‘3 .column.size-1of3’ } } MEDIA QUERIES COMPATIBLE
IN USE lamula.pe tadpoles.in
GIVE IT A TRY salvattore.com by @rnmp and @ppold