21
10 Things we Learned from the DaWanda Responsive Relaunch Luca Ongaro, Lead Frontend Engineer @ DaWanda

10 Things we Learned from the DaWanda Responsive Relaunch

  • Upload
    dawanda

  • View
    623

  • Download
    0

Embed Size (px)

DESCRIPTION

Presentation of Luca Ongaro, Lead Front End Engineer at DaWanda, held at webmontag Berlin #79

Citation preview

Page 1: 10 Things we Learned from the DaWanda Responsive Relaunch

10 Things we Learned from the DaWanda Responsive Relaunch

Luca Ongaro, Lead Frontend Engineer @ DaWanda

Page 2: 10 Things we Learned from the DaWanda Responsive Relaunch

1. Media Queries Aren’t Easy

Page 3: 10 Things we Learned from the DaWanda Responsive Relaunch
Page 4: 10 Things we Learned from the DaWanda Responsive Relaunch

• Choose a strategy (mobile first?) and be consistent

• Leverage a preprocessor like SCSS: variables for breakpoints, mixins for queries

Page 5: 10 Things we Learned from the DaWanda Responsive Relaunch

2. Touch Event API from Hell

Page 6: 10 Things we Learned from the DaWanda Responsive Relaunch
Page 7: 10 Things we Learned from the DaWanda Responsive Relaunch

• If you need to react on both click and tap, use an active element (<a> or <button>) and only bind click

• If you bind tap, never ever move/hide the target

Page 8: 10 Things we Learned from the DaWanda Responsive Relaunch

3. IE, old B@$#^&d...

Page 9: 10 Things we Learned from the DaWanda Responsive Relaunch

• IE8: no support for media queries

• IE9: max 4095 CSS rules per file

• IE10: nasty bug with pseudo-elements, text-

size/line-height and relative units

Page 10: 10 Things we Learned from the DaWanda Responsive Relaunch

4. JavaScript Memory Leaks

Page 11: 10 Things we Learned from the DaWanda Responsive Relaunch

• DOM manipulation: don’t mix jQuery with vanilla JavaScript

• Unbind your event handlers!

Page 12: 10 Things we Learned from the DaWanda Responsive Relaunch

5. Think About the Future!

Page 13: 10 Things we Learned from the DaWanda Responsive Relaunch

• Make documentation and styleguide easy to write, maintain and access

• Write tests, and keep them fast!

Page 14: 10 Things we Learned from the DaWanda Responsive Relaunch

6. Have A Standard Place for Everything

Page 15: 10 Things we Learned from the DaWanda Responsive Relaunch

7. Most Magic is Black Magic

Page 16: 10 Things we Learned from the DaWanda Responsive Relaunch

8. Make State Explicit

Page 17: 10 Things we Learned from the DaWanda Responsive Relaunch
Page 18: 10 Things we Learned from the DaWanda Responsive Relaunch

9. Small Steps can Go on a Long Way

Page 19: 10 Things we Learned from the DaWanda Responsive Relaunch

10. Don’t Sweep Things Under the Carpet

Page 20: 10 Things we Learned from the DaWanda Responsive Relaunch

Thank You!@lucaongaro

Page 21: 10 Things we Learned from the DaWanda Responsive Relaunch

PS: We’re Hiring......and it’s a lot of fun at DaWanda!