Slide 1

Slide 1 text

Tips & Tricks in Front-End Development Ire Aderinokun | forLoop #2

Slide 2

Slide 2 text

About me • Ire Aderinokun • User Interface Designer and Front-End Developer • Design+Tech, Big Cabal Media • Writer, www.bitsofco.de

Slide 3

Slide 3 text

How Do I…?

Slide 4

Slide 4 text

Centre an Element Both Horizontally and Vertically? How do I…

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

2D Transforms

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

2D Transforms

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Flexbox

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Make sure an image always fills it’s container? How do I…

Slide 13

Slide 13 text

object-fit • fill • contain • cover

Slide 14

Slide 14 text

object-fit: fill;

Slide 15

Slide 15 text

object-fit: contain;

Slide 16

Slide 16 text

object-fit: cover;

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Make sure an image is always visible within the viewport? How do I…

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Viewport Units • vh • vw • vmin • vmax

Slide 21

Slide 21 text

Viewport Units

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Make a fixed fullscreen background image responsive? How do I…

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

background Property & Viewport Units

Slide 26

Slide 26 text

Handle visited vs. unvisited links? How do I…

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

a:visited

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Deal with broken images? How do I…

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

2 Facts about 1. We can apply typography-related styling to the element 2. The element is a “replaced element”

Slide 35

Slide 35 text

Styling the alt Text

Slide 36

Slide 36 text

Styling the Pseudo-Elements

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Deal with empty states? How do I…

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

:empty

Slide 43

Slide 43 text

:empty

Slide 44

Slide 44 text

Make embedded content responsive? How do I…

Slide 45

Slide 45 text

Fixed Dimensions

Slide 46

Slide 46 text

position: absolute; https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Fluid Dimensions

Slide 49

Slide 49 text

postMessage API iframe.js

Slide 50

Slide 50 text

postMessage API parent.js

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Let’s talk about that Browser

Slide 53

Slide 53 text

browser?

Slide 54

Slide 54 text

60% of users are on Opera Mini

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Some Tips

Slide 58

Slide 58 text

Start with Semantic HTML

Slide 59

Slide 59 text

Provide Sensible Fallbacks or Alternatives Web Fonts System Fonts Icon Fonts SVG or Images Gradients Solid Background Colours Animations Meaningful Initial Frame

Slide 60

Slide 60 text

Flexbox is your Friend

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Use SVG

Slide 63

Slide 63 text

Test Without Javascript • Can the user complete the main purpose of the site without javascript enabled?

Slide 64

Slide 64 text

Opera Mini forces us to practice Progressive Enhancement teaches

Slide 65

Slide 65 text

Workflow Tips

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

CSS

Slide 70

Slide 70 text

JavaScript

Slide 71

Slide 71 text

Automation

Slide 72

Slide 72 text

Other

Slide 73

Slide 73 text

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