10 Things we Learned from the DaWanda Responsive Relaunch
-
Upload
dawanda -
Category
Technology
-
view
624 -
download
0
description
Transcript of 10 Things we Learned from the DaWanda Responsive Relaunch
![Page 1: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/1.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/2.jpg)
1. Media Queries Aren’t Easy
![Page 3: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/3.jpg)
![Page 4: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/4.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/5.jpg)
2. Touch Event API from Hell
![Page 6: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/6.jpg)
![Page 7: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/7.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/8.jpg)
3. IE, old B@$#^&d...
![Page 9: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/9.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/10.jpg)
4. JavaScript Memory Leaks
![Page 11: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/11.jpg)
• DOM manipulation: don’t mix jQuery with vanilla JavaScript
• Unbind your event handlers!
![Page 12: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/12.jpg)
5. Think About the Future!
![Page 13: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/13.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/14.jpg)
6. Have A Standard Place for Everything
![Page 15: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/15.jpg)
7. Most Magic is Black Magic
![Page 16: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/16.jpg)
8. Make State Explicit
![Page 17: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/17.jpg)
![Page 18: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/18.jpg)
9. Small Steps can Go on a Long Way
![Page 19: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/19.jpg)
10. Don’t Sweep Things Under the Carpet
![Page 20: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/20.jpg)
Thank You!@lucaongaro
![Page 21: 10 Things we Learned from the DaWanda Responsive Relaunch](https://reader035.fdocuments.us/reader035/viewer/2022062708/558c5ff2d8b42af30b8b4744/html5/thumbnails/21.jpg)
PS: We’re Hiring......and it’s a lot of fun at DaWanda!