Presentatie tijdens Fabrique University, door tech lead Marko Kruijer. In deze course leer je alles wat je altijd al wilde weten op het gebied van techniek, maar niet durfde te vragen. Frontend/backend, wat is het verschil? Shared hosting, managed hosting, whut? Hebben developers het over DIFF’s en REPO’s en heb je geen idee waar het over gaat? Waarom hebben we web fonts nodig. En wat is een API eigenlijk? Heb jij deze gedachten weleens? En wil je meer weten over techniek? Tech lead Marko Kruijer neemt je mee in de wereld van techniek.

1. Web Technology 101everything you’ve always wanted to know, but were afraid to ask
Marko Kruijer – DIA Best in Tech 2017

2. Fabrique
-mute je microfoon
-vragen mag! in de chat J
huisregels
Technology+2

3. Fabrique
-introductie
-de basis van een website
-waarom is techniek complex?
-de 3 moeilijkste dingen
-domeinen en email
-’praten’ met API’s (a.k.a koppelingen 101)
-HTML, CSS & webfonts
welke onderwerpen gaan we behandelen
Technology+3

5. Fabrique
Boerenverstand
“Maar ik heb geen informatica gestudeerd”
Technology+5

6. Fabrique
Frontend, Backend,
Hosting…
De basis van een website
Technology+6

7. Fabrique
Frontend
Technology+7

8. FabriqueTechnology+8

9. Fabrique
Backend
Technology+9

10. FabriqueTechnology+10

11. Fabrique
Hosting
Shared, dedicated of cloud?
Technology+11

12. Fabrique
Shared hosting
Samen zullen we alles delen
Technology+12

13. FabriqueTechnology+13

14. Fabrique
VPS (dedicated)
Baas van je eigen server
Technology+14

15. FabriqueTechnology+15

16. Fabrique
Cloud hosting
Scalable hosting, betalen o.b.v. je gebruik
Technology+16

17. FabriqueTechnology+17

18. Fabrique
Managed hosting?
Wie onderhoudt je auto? Wie beheert de weg?
Technology+18

19. FabriqueTechnology+19

20. Fabrique
De cloud bestaat niet
Fun fact
Technology+20

21. Fabrique
Simpel of complex?
Techniek voor of door klanten
Technology+21

22. Fabrique
Ik wil mijn tweets
kunnen wijzigen
Een exercitie (5 minuten)
Technology+22

23. FabriqueTechnology+23
Should you be able to edit any tweet you've
ever tweeted at any time?
Or should you just have a few minutes to do it
until it locks?
Do you offer this to everyone? Opt-in? Opt-
out?
Should you be able to edit tweets or direct
messages also?
What does it look like to edit a tweet? Can it
be simple and obvious? Does it need
additional UI? How do you expose that UI? Is it
worth the extra UI?
Does the tweet go out to the public timeline
immediately or after the editing grace period?

24. FabriqueTechnology+24
What if someone favorites a tweet and it is
later edited? Does it shed the favorites? E.g. a
tweet that originally said "I like pancakes!"
could be later edited to "People that favorited
this like clubbing seals!" (or much worse).
Same question, with retweets. And with
replies.
Are there any social or moral implications of
this?
How does tweet editing affect the
overall feel of using Twitter? Would a time
delay affect that feel? Would people think of
tweets differently?
Does tweet editing make hacked accounts an
even more dangerous prospect?

25. FabriqueTechnology+25
How do third party clients handle tweet
editing? Is there a public API for it? How
complex is that?
Or do you only offer tweet editing through the
web? How does that move go over with
developers?
How do you ensure third party editing offers
an up-to-par UX? Does that matter?
If tweets aren't time-delayed, how do you
handle edited tweets through the API? - How
do you tell third-party clients to update a
tweet they are currently displaying rather than
show a new one?

26. FabriqueTechnology+26
Where do edited tweets go? Back on top of
the timeline, or stay where they are?
Should it be visually displayed that a tweet has
been edited? How do you enforce that in third-
party apps?
Are there legal implications here? What if
someone tweets something illegal and then
changes it to something legal?
Does tweet editing open up any kind of bad
guy behavior? What kind of mis-use can be
expected?
What are the infrastructural concerns? Are all
revisions saved? How much additional web
server and database load is this?

27. FabriqueTechnology+27
Do you throttle editing like you presumably do
for tweet creation?
How actually requested is this feature? Is it
just a vocal minority?
What's in it for Twitter if they go down this
path? Happier users? Is that a guarantee?
How much time, effort, and money is this
going to take? (Design, development, UX,
testing, etc) Are they prepared to support this
for the life of the product?
Is the team into the idea or would it be
grueling and not-fun?

28. Fabrique
Ok laat maar
Zo veel overwegingen
Technology+28

29. Fabrique
E-mails kunnen dagen
onderweg zijn
Fun fact
Technology+29

30. Fabrique
Maar wat is nu écht
ingewikkeld?
leuk die tweets wijzigen
Technology+30

31. Fabrique
cache invalidation,
naming things, and
off-by-one errors.
There are two hard things in computer science:
Technology+31

32. Fabrique
Caching
Wat heeft dit met cash te maken?
Technology+32

33. Fabrique
Optimalisatie
”In computing, a cache is a hardware or software component
that stores data so future requests for that data can be served
faster”
maar wat is het?
Technology+33

34. Fabrique
Snelheid
voor: 100 views per minute
na: 5000 views per minute
caching, mits goed toegepast ==
Technology+34

35. Fabrique
Caching altijd doen?
vraag
Technology+35

36. Fabrique
Floepertje?
what’s in a name?
Technology+36

37. FabriqueTechnology+37

38. Fabrique
Say my name!
Het kan maar duidelijk zijn
Technology+38

39. Fabrique
Quetzalcoatl
say what?
Technology+39

40. FabriqueTechnology+40

41. Fabrique
Off-by-1
De laan met bomen, wie kent ‘m niet
Technology+41

42. Fabrique
Array
Een lijst
Technology+42

43. Fabrique
Opdracht
› De ‘Lindelaan’ is 240 meter lang.
› Om de 10 meter staat een boom
› Hoeveel bomen staan er op de Lindelaan?
› Schrijf het antwoord op
Technology+43

44. FabriqueTechnology+44

45. Fabrique
25
het antwoord
Technology+45

46. Fabrique
Het www en internet
zijn niet
hetzelfde
Fun fact
Technology+46

47. Fabrique
De website moet live!
Paniek peeuw!
Technology+47

48. Fabrique
Het domein van de
klant wordt overgezet,
waarom duurt dat zo
lang?
TTL
Technology+48

49. Fabrique
Records everywhere
DNS in een notedop (Domain Name System)
Technology+49

50. FabriqueTechnology+50

51. FabriqueTechnology+51

52. Fabrique
A records
voor domeinen
Technology+52

53. Fabrique
MX records
SPF records
voor email
Technology+53

54. Fabrique
Maar die TTL dan?
Hoe lang duurt het voordat DNS servers de records verversen
Technology+54

55. Fabrique
API’s en talen die ze
spreken
Technology+55

56. Fabrique
Wat is XML eigenlijk?
extensible markup language
Technology+56

57. Fabrique
JaSON
wie is die man?
Technology+57

58. Fabrique
JavaScript Object
Notation
Technology+58

59. Fabrique
Leuk, maar wat is een
API eigenlijk?
API’s die JSON en XML uitspugen
Technology+59

60. Fabrique
Geen aap, maar:
Technology+60

61. Fabrique
Een ober
application programming interface, een ‘koppeling’ met een systeem
Technology+61

62. Fabrique
De ene API is de andere niet
Kwalitatieve verschillen tussen API’s
Technology+62

63. Fabrique
Zit je wel eens in een
meeting?
met developers
Technology+63

64. Fabrique
Doctype
LAMP (Linux, Apache, MySQL, Python/PHP/Perl)
CDN (content delivery network)
DIFF (Difference)
Git (version control)
REPO (Repository)
OS (operating system)
Shell
SSH (Secure Shell)
een paar termen
Technology+64

65. Fabrique
Wij maken toch
websites? Hoe dan!?
Leuk die termen
Technology+65

66. Fabrique
Een website ontwerpen
en maken
Van ontwerp naar webpagina’s
Technology+66

67. Fabrique
HTML & CSS
techniek is onzichtbaar, behalve CSS
Technology+67

68. Fabrique
HTML
the language for describing the structure of
Web pages
Technology+68

69. FabriqueTechnology+69

70. Fabrique
CSS
the language for describing the presentation
of Web pages, including colors, layout, and
fonts
Technology+70

71. FabriqueTechnology+71

72. Fabrique
csszengarden.com
de kracht van CSS, zien is geloven
Technology+72

79. FabriqueTechnology+79

80. Fabrique
C’est tout
fin
Technology+80

82. Fabrique
BB, NN
Fill out the survey please!
Technology+82