Stop using Bootstrap please!

Bootstrap è di sicuro diventato uno dei Framework front-end che tutti conoscono ed hanno utilizzato almeno una volta. Per alcuni Front-end developer è diventato uno standard de facto. Ma è davvero tutto oro quello che luccica? La sua velocità di utilizzo è in realtà assimilabile ad un prestito. Hai chiavi in mano, ma sai quanto andrai a pagare nel tempo? Durante questo talk vedremo quali sono le insidie che si nascondono dietro questo (e similari) framework e come sostituirlo grazie a tecnologie e metodologie moderne.

Transcript

1. top uin oottrap PLZ! Novemer 25th 2016
2. Wh a I?
3. David D Pump Creative Technologit Digital Architect at Co­organizer Makheth on: , , I like Cat, Drink, Comic and Videogame... Ojectwa Milano Frontend Twitter Githu Internet
4. Le ' tar Meaow!
5. Prologue urve m !!!
6. Do ou ue oottrap? Do ou ue it ecaue it' imple? Do ou ue it ecaue it' fat?
7. D o lik uh ?
8. om of o , wil hat m !
9. Wh d I d tha ?
10. D o rememer th uh lid fro earlier?
11. Chapter 01 Ol Wid We
12. Or no  ol ?
13. It wa onl 5 ear ago
14. There were nightmare out there!
15. Twitter lueprin an  o
16. Doe Twitter u Twitter oottrap? Internall, we ue it in a lot of application. On Twitter.com, ou can nd it and piece in our dropdown menu, form, and utton. “ ” Mark Otto, creator of oottrap
17. Chapter 02 M an th oottrap
18. Lov !
19. ut I had a lover
20. Mae two...
21. ut thi one ended all: FLXOX
22. Wh not onl e friend?
23. And I tarted to quetion melf
24. Chapter 3 Javacrip
25. oottrap' plugin don't fall ack particularl gracefull when Javacript i dialed “ ” oottrap Documentation
26. eautiful enhancement? What?
27. veron ue Jav crip toda ! le ~1% More than xplorer 9 or 10 TW... ource tatCounter
28. Quer ?
29. Angular, Reac , Vu ?
30. Wher ' th loa ? Javacript Fallack Avoid jQuer or ue inide j framework
31. Chapter 4 C
32. Heav ? We tart with 142.6KB or 20.8KB gzipped
33. Uele clae .col-xs-1?
34. Wha aou Unc ?
35. ae o oa ...
36. What aout vertical alignment? Hol Grail laout?
37. ven display: table; i etter erioul...
38. Ok, there i an alpha with exox option... ut it doen't have fallack... And C Grid i getting cloe...
40. Medi querie
41. 4 reakpoint , ae o DVIC?
42. peci cit .panel > .table-responsive:first-child > .table:first- border-top-right-radius: 3px; }
43. Wher ' th loa ? Override Optimization Cutomization
44. Chapter 5 HTML
45. Do ou have a prolem with that?
46. <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"> oottrap documentation
47. eparatio of concern W3C Do ou rememer: ? C Zen Garden
48. Wher ' th loa ? Dif cultie to reue code Dif cultie to temif / redeign Deug with meaningle clae peci t nightmare !important
49. Chapter 6 Preproceor
50. Uing oottrap via a preproceor i a lot etter
51. .author-nameLast { @extend .col-md-4; } or .author-nameLast { @include make-md-column(4); }
52. u ...
53. @ ten xtending i inviile. xtending doen’t necearil help le weight, contrar to the aing. xtending doen’t work acro media querie. xtending i not exile. Mixin have aolutel no drawack. “ ” Hugo Giraudel
54. @m in .author-nameLast { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4); @include make-lg-column(3); }
55. // Pagination @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, > li { > a, > span { padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; } &:first-child { > a, > span { @include border-left-radius($border-radius); } }
57. Wher ' th loa ? Add a reak point Too much DOM
58. Chapter 7 Deig
59. VRY OOTTRAP WIT VR
60. o, eah, there' a reaon wh a lot of weite look like thi. ecaue it work. “ ”
62. urger utton can HALV converion rate! ource
67. Wha aou carouel ?
68. 1% clicked a feature. Of thoe, 89% were in the rt poition. 1% of click for the mot igni cant oject on the home page? “ ” ource
69. Yeah, ut I can change ever ingle apect of oottrap!
70. Ok, what aout uing omething le loated?
71. Wher ' th loa ? Undertand what pattern don't work for ou Tr to ecape oottrap pattern
72. Chapter 8 Acceiilit
74. erioul, oottrap improved a lot in acceiilit, and alpha 4 i a lot etter. ut...
75. Pleae ue ! THI
76. and ! read aout color
77. Wher ' th loa ? Make it acceile
78. Chapter 9 or how to avoid fale mth. Remin m wh I u oottrap
79. I ' fa a wh ? Let' a it' fat for developer
80. Technica de "a concept in programming that re ect the extra development work that arie when code that i ea to implement in the hort run i ued intead of appling the et overall olution" Wikipedia
81. I ' or of tandar Yea , lik Fla , tal we ite , Geocitie ...
82. Yea , lo of jo prop al hav oottrap a requiremen Do ou reall want to work to x me oottrap implementation?
83. I ' goo tartin poin for intern O , com o ...
84. I it a good idea to learn C without eeing that? Mae ou want them to learn an OOC anti pattern?
85. Chapter 10 Alternative
86. GO Modular!
87. Adopt a methodolog: M ITC
88. Chooe a grid: u Nea uperG G
89. Do ou need component? utton T ograph Re ll
90. Githu i wonder plac
91. I ' dangerou t g alon
92. onu track Recap
93. Javacript Oh god no C Nope HTML Nope Preproceor If ou have Deign Quetionale Acceiilit With plugin
94. TLDR Prototpe, internal tool/admin, uncle' weite Y! Production weite NOP!
95. A la reao t avoi oottrap?
96. C'h rott er ***** “ ” @dertella
98. Inight an iliograph
99. Article: You don't need oottrap oottrap ankruptc top emedding oottrap clae oottrap an intervantion OOC i an anti­pattern Wh we don't ue oottrap oottrap ou're doing it wrong Wh don’t ou ue oottrap? The hamurger menu doen't work hould I ue a carouel? oottrap acceiilit iue