Tips & Tricks in Front-End Development

Ire Aderinokun takes us through the tips and tricks in Front-End development at the second forLoop event in Lagos.

Transcript

1. Tips & Tricks in Front-End Development Ire Aderinokun | forLoop #2
2. About me • Ire Aderinokun • User Interface Designer and Front-End Developer • Design+Tech, Big Cabal Media • Writer, www.bitsofco.de
3. How Do I…?
4. Centre an Element Both Horizontally and Vertically? How do I…
6. 2D Transforms
8. 2D Transforms
10. Flexbox
12. Make sure an image always fills it’s container? How do I…
13. object-fit • fill • contain • cover
14. object-fit: fill;
15. object-fit: contain;
16. object-fit: cover;
18. Make sure an image is always visible within the viewport? How do I…
20. Viewport Units • vh • vw • vmin • vmax
21. Viewport Units
23. Make a fixed fullscreen background image responsive? How do I…
25. background Property & Viewport Units
26. Handle visited vs. unvisited links? How do I…
28. a:visited
29. localStorage http://joelcalifa.com/blog/revisiting-visited/
32. Deal with broken images? How do I…
34. 2 Facts about <img> 1. We can apply typography-related styling to the <img> element 2. The <img> element is a “replaced element”
35. Styling the alt Text
36. Styling the Pseudo-Elements
40. Deal with empty states? How do I…
42. :empty
43. :empty
44. Make embedded content responsive? How do I…
45. Fixed Dimensions
46. position: absolute; https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
48. Fluid Dimensions
49. postMessage API iframe.js
50. postMessage API parent.js
52. Let’s talk about that Browser
53. browser?
54. 60% of users are on Opera Mini
55. What’s the deal with Opera Mini? • High vs Extreme Savings Mode • Uses the Presto rendering engine • Limited support for many HTML, CSS, and Javascript features • Javascript is executed on the server, not the client
57. Some Tips
58. Start with Semantic HTML
59. Provide Sensible Fallbacks or Alternatives Web Fonts System Fonts Icon Fonts SVG or Images Gradients Solid Background Colours Animations Meaningful Initial Frame
60. Flexbox is your Friend
62. Use SVG
63. Test Without Javascript • Can the user complete the main purpose of the site without javascript enabled?
64. Opera Mini forces us to practice Progressive Enhancement teaches
65. Workflow Tips
69. CSS
70. JavaScript
71. Automation
72. Other
73. Thanks! www.ireaderinokun.com www.bitsofco.de @ireaderinokun