The Digital Bucket List for People in the Web

by Mike Street

Slide 1

Slide 1 text

The Digital Bucket List for People in the Web @mikestreety

Slide 2

Slide 2 text

Hello. @mikestreety

Slide 3

Slide 3 text

Mike Street Front-end developer at Liquid Light Co-founder of Bytes (@)mikestreety on everything @mikestreety

Slide 4

Slide 4 text

@mikestreety

Slide 5

Slide 5 text

@mikestreety

Slide 6

Slide 6 text

The Digital Bucket List for People in the Web @mikestreety

Slide 7

Slide 7 text

for web folk & how to make yourself better @mikestreety

Slide 8

Slide 8 text

12 Things Every Person in the Web MUST Do This Weekend. @mikestreety

Slide 9

Slide 9 text

12 Things Every Person in the Web MUST Do This Weekend. Number 9 Will BLOW YOUR MIND. @mikestreety

Slide 10

Slide 10 text

No. Just No. @mikestreety

Slide 11

Slide 11 text

Your mission: @mikestreety

Slide 12

Slide 12 text

Your mission: Can we get Mike a less “up-his-own-arse” talk title? @mikestreety

Slide 13

Slide 13 text

Your mission: Can we get Mike a less “up-his-own-arse” talk title? @mikestreety

Slide 14

Slide 14 text

Your mission: Can we get Mike a less wanky talk title? #mikeswankytalktitle @mikestreety

Slide 15

Slide 15 text

It is a list of things which have got me where I am You do not have to do everything or anything on this list. This is just something to inspire you. and make you better at your job (hopefully) @mikestreety

Slide 16

Slide 16 text

Build a CSS Framework @mikestreety

Slide 17

Slide 17 text

1. Build it 2. Use it 3. Use it again 4. Delete it all 5. Build it again 6. Use it again 7. Make it better 8. GOTO 6. @mikestreety

Slide 18

Slide 18 text

CSS Frameworks are like sex Building a CSS framework is like having sex: everyone should at least do it once but once you have, you don’t need to brag about it, Everyone thinks theirs is the best and everyone is embarrassed by their first attempt. http:/ /goo.gl/nylH0d @mikestreety

Slide 19

Slide 19 text

How does it help? Gives you experience in building a large scale site. You'll write better CSS for everything trying to write CSS for all @mikestreety

Slide 20

Slide 20 text

Write a blog post about something you don’t understand @mikestreety

Slide 21

Slide 21 text

Blog post ideas • Flexbox • PHP Includes • SCSS Mixins • Ruby • HAML • SVG • The background css property (http:/ /goo.gl/A8UNRD) @mikestreety

Slide 22

Slide 22 text

How does it help? You expand your knowledge. You learn things better when you have to explain something to other people. @mikestreety

Slide 23

Slide 23 text

Put on an event or meet up @mikestreety

Slide 24

Slide 24 text

How does it help? • Meet new people. • Face new challenges • Kicks your organisational skills into gear • Gives you something else to worry about focus on • Forces human interaction @mikestreety

Slide 25

Slide 25 text

Read some documentation @mikestreety

Slide 26

Slide 26 text

SCSS is_superselector($super, $sub) is-superselector(".foo", ".foo.bar") => true is-superselector(".foo.bar", ".foo") => false is-superselector(".bar", ".foo .bar") => true is-superselector(".foo .bar", ".bar") => false @mikestreety

Slide 27

Slide 27 text

SCSS unique_id Returns a unique CSS identifier which is different every time. body::before { content: '#{unique_id()}'; } body::before { content: "uu1tw78zv"; } @mikestreety

Slide 28

Slide 28 text

How does it help? Makes you a better developer as you learn new things. You find new ways to solve problems @mikestreety

Slide 29

Slide 29 text

Build a HTML email @mikestreety

Slide 30

Slide 30 text

How does it help? Makes you realise where we came from Gives you new problems to solve with code @mikestreety

Slide 31

Slide 31 text

Contribute to or make an open source project @mikestreety

Slide 32

Slide 32 text

Contribute Raise an issue Suggest ideas Suggest patches Make a pull request1 1 https:/ /yourfirstpr.github.io @mikestreety

Slide 33

Slide 33 text

What kind of thing can you make? • A jQuery plugin • A NPM module • Some reusable code like a map plugin • A Bower package • A composer package • Anything! @mikestreety

Slide 34

Slide 34 text

How does it help? You give back to the community that you borrow from. People make pull requests, people make your code better. You learn how to make code better. @mikestreety

Slide 35

Slide 35 text

Do some DIY @mikestreety

Slide 36

Slide 36 text

@mikestreety

Slide 37

Slide 37 text

@mikestreety

Slide 38

Slide 38 text

@mikestreety

Slide 39

Slide 39 text

How does it help? Gets you away from the screen. Gives you something physical to build. @mikestreety

Slide 40

Slide 40 text

Pick up an arduino & and LED and make it blink @mikestreety

Slide 41

Slide 41 text

How does it help? It helps you understand machine code a bit more. Your code in the real world. @mikestreety

Slide 42

Slide 42 text

Buy a Raspberry Pi @mikestreety

Slide 43

Slide 43 text

Using a Raspberry Pi 1. Buy it 2. Install Raspbian & set up 3. Download and run your first script 4. Break Raspbian 5. Reinstall Raspbian & set up 6. Don't run that last script 7. Install Node...or something 8. Repeat! @mikestreety

Slide 44

Slide 44 text

How does it help? Improves knowledge of Linux systems Gives you a safe place to practice command line Safe environment to run scripts to see if they work @mikestreety

Slide 45

Slide 45 text

Do something pointless with the web @mikestreety

Slide 46

Slide 46 text

@mikestreety

Slide 47

Slide 47 text

@mikestreety

Slide 48

Slide 48 text

Do something pointless with the web @mikestreety

Slide 49

Slide 49 text

Some ideas • A shoe tracker app for your own shoes • A web app that tells you what tv to watch based on your twitter timeline • An app that looks at supermarket websites and will tell you where the cheapest salmon is • A web based lava lamp. • A photo booth style app @mikestreety

Slide 50

Slide 50 text

How does it help? Try new technologies Try new methodologies Try new tools Try new processes @mikestreety