Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
about:consistency
lessons learned - the hard way
Christoph Reinartz - @pistenprinz
28 Mai 2015
.gradient_bright_hover:hover,
.gradient_bright_hover:hover *,
.gradient_dark_hover:hover,
.gradient_dark_hover:hover * {
c...
specifically…
may i introduce you to the world’s creepiest cascade?
Christoph Reinartz - @pistenprinz
#banner_topnav div.ta...
specificity graph 2012
consistency is measurable
Christoph Reinartz - @pistenprinz
AND THEN I SAID TO THOSE GUYS AT TRIVAGO
TEAR DOWN THIS WALL OR I WILL DO IT!
• 70k LOC Scss with deep nesting
• Incomplete Coding Styleguides
• Incomplete Code Analysis
• Missing Workflow & Styleguide...
the result
spaghetti code (not delicious!!)
• longer development times
• many bugfixes needed - instable UI
• hard to maint...
Christoph Reinartz - @pistenprinz
fifty shades of grey
or why to use color variables in sass
• about 50 features per release cycle
• about 60 devs working on the core product
• ~ 80 concurrent layout variation A/B t...
• Prototype and bootstrap code with design
facelifts
• Code Styleguide and Code linters
• Styleguides generated with KSS f...
specificity graph 2012
consistency is measurable
Christoph Reinartz - @pistenprinz
specificity graph nowadays
better curves
Christoph Reinartz - @pistenprinz
• Build solid CSS framework base
• Introduced pattern library at trivago
• Massive workflow improvements and more
visibilit...
Christoph Reinartz
Frontend Developer
@pistenprinz
thanks
i’m done
Christoph Reinartz - @pistenprinz
Slide 1:
https://www.flickr.com/photos/jef_safi/2271196842/
Slide 7:
https://www.flickr.com/photos/fcrippa/1423941532/
source...
Nächste SlideShare
Wird geladen in …5
×

von

about:consistency - lesson learned: the hard way Slide 1 about:consistency - lesson learned: the hard way Slide 2 about:consistency - lesson learned: the hard way Slide 3 about:consistency - lesson learned: the hard way Slide 4 about:consistency - lesson learned: the hard way Slide 5 about:consistency - lesson learned: the hard way Slide 6 about:consistency - lesson learned: the hard way Slide 7 about:consistency - lesson learned: the hard way Slide 8 about:consistency - lesson learned: the hard way Slide 9 about:consistency - lesson learned: the hard way Slide 10 about:consistency - lesson learned: the hard way Slide 11 about:consistency - lesson learned: the hard way Slide 12 about:consistency - lesson learned: the hard way Slide 13 about:consistency - lesson learned: the hard way Slide 14 about:consistency - lesson learned: the hard way Slide 15
Nächste SlideShare
Project Ironman - Large Scale CSS Refactoring @trivago
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

0 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

about:consistency - lesson learned: the hard way

Herunterladen, um offline zu lesen

Lightning talk about User Interface consistency at the LeanUX Meetup in Düsseldorf

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Gehören Sie zu den Ersten, denen das gefällt!

about:consistency - lesson learned: the hard way

  1. 1. about:consistency lessons learned - the hard way Christoph Reinartz - @pistenprinz 28 Mai 2015
  2. 2. .gradient_bright_hover:hover, .gradient_bright_hover:hover *, .gradient_dark_hover:hover, .gradient_dark_hover:hover * { color:#fff !important } show me your css not just an edge case Christoph Reinartz - @pistenprinz
  3. 3. specifically… may i introduce you to the world’s creepiest cascade? Christoph Reinartz - @pistenprinz #banner_topnav div.tab_links li div.dropdown table.localization a.plain:hover { … }
  4. 4. specificity graph 2012 consistency is measurable Christoph Reinartz - @pistenprinz
  5. 5. AND THEN I SAID TO THOSE GUYS AT TRIVAGO TEAR DOWN THIS WALL OR I WILL DO IT!
  6. 6. • 70k LOC Scss with deep nesting • Incomplete Coding Styleguides • Incomplete Code Analysis • Missing Workflow & Styleguide audits architecture & processes Christoph Reinartz - @pistenprinz
  7. 7. the result spaghetti code (not delicious!!) • longer development times • many bugfixes needed - instable UI • hard to maintain consistency • issues with scalability and reusability Christoph Reinartz - @pistenprinz
  8. 8. Christoph Reinartz - @pistenprinz fifty shades of grey or why to use color variables in sass
  9. 9. • about 50 features per release cycle • about 60 devs working on the core product • ~ 80 concurrent layout variation A/B tests • ~ 4 billion requests per months • 50 platforms the trivago scale some numbers Christoph Reinartz - @pistenprinz
  10. 10. • Prototype and bootstrap code with design facelifts • Code Styleguide and Code linters • Styleguides generated with KSS for bigger Features in 2013 • Monitoring for CSS on the way iterative improvements Christoph Reinartz - @pistenprinz
  11. 11. specificity graph 2012 consistency is measurable Christoph Reinartz - @pistenprinz
  12. 12. specificity graph nowadays better curves Christoph Reinartz - @pistenprinz
  13. 13. • Build solid CSS framework base • Introduced pattern library at trivago • Massive workflow improvements and more visibility • Proof of concept for Living Design Systems current status status quo Christoph Reinartz - @pistenprinz
  14. 14. Christoph Reinartz Frontend Developer @pistenprinz thanks i’m done Christoph Reinartz - @pistenprinz
  15. 15. Slide 1: https://www.flickr.com/photos/jef_safi/2271196842/ Slide 7: https://www.flickr.com/photos/fcrippa/1423941532/ sources Christoph Reinartz - @pistenprinz

Lightning talk about User Interface consistency at the LeanUX Meetup in Düsseldorf

Aufrufe

Aufrufe insgesamt

5.235

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

3.205

Befehle

Downloads

4

Geteilt

0

Kommentare

0

Likes

0

×