Pro Yearly is on sale from $80 to $50! »

Tips & Tricks in Front-End Development

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.

0b0ba94d014c694b932ada74f1c9f1af?s=128

forLoop

June 19, 2016
Tweet

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…

  5. None
  6. 2D Transforms

  7. None
  8. 2D Transforms

  9. None
  10. Flexbox

  11. None
  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;

  17. None
  18. Make sure an image is always visible within the viewport?

    How do I…
  19. None
  20. Viewport Units • vh • vw • vmin • vmax

  21. Viewport Units

  22. None
  23. Make a fixed fullscreen background image responsive? How do I…

  24. None
  25. background Property & Viewport Units

  26. Handle visited vs. unvisited links? How do I…

  27. None
  28. a:visited

  29. localStorage http://joelcalifa.com/blog/revisiting-visited/

  30. None
  31. None
  32. Deal with broken images? How do I…

  33. None
  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

  37. None
  38. None
  39. None
  40. Deal with empty states? How do I…

  41. None
  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/

  47. None
  48. Fluid Dimensions

  49. postMessage API iframe.js

  50. postMessage API parent.js

  51. None
  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
  56. None
  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

  61. None
  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

  66. None
  67. None
  68. None
  69. CSS

  70. JavaScript

  71. Automation

  72. Other

  73. Thanks! www.ireaderinokun.com www.bitsofco.de @ireaderinokun