In programming you can choose sides. You can choose the front or back end and if you really can’t choose you can be Switzerland and choose full stack. For this meetup at the ANWB we've sided with front end and we had 3 Girl Coders who led us through different tech and aspects of front end coding. Presentations: - "Intro about Girl Code" by Ineke Scheffers - "Intro about ANWB" by Xiaolin Song - “Mixing UX with code: on being a Front Ender who also designs” by Hanny Verkerk - “My first adventure with Elm: An introduction and comparison with AngularJS” by Anne van den Berg - "How Bootstrap makes your Front End life easier" by Chantal Sloep

1. @GirlCodeNL
/GirlCodeNL

2. @GirlCodeNL
/GirlCodeNL
We are Girl Code
katja
kristin
ineke@afkatja
@kriepy
@FYIneke

3. @GirlCodeNL
/GirlCodeNL
@ ANWB

4. @GirlCodeNL
/GirlCodeNL
Mixing UX with code: on being a Front Ender who also designs
- Hanny Verkerk
My first adventure with Elm: An introduction and comparison with AngularJS
- Anne van den berg
How Bootstrap makes your Front End life easier
- Chantal Sloep
Drinks!
Program

5. Welcome to the ANWB
Intro by Xiaolin Song

6. Xiaolin Song
6

7. Xiaolin Song
7
• Full-Stack developer in Java and Front-end
• Work now at ANWB, Online, team “Mijn ANWB”
• Use now: Java 8, Apigee, AngularJS, Typescript
• Enjoy my work

8. What does ANWB
8
• Royal Dutch Touring Club, founded 1883
• 4,5 million members, Biggest in NL
• ANWB Core businesses:

9. Roadside assistance

10. Medical air & personshelp

11. Travel

12. Insurance

13. 13
4800 employees

14. ANWB ICT & Front-end
14
• Some numbers:
• 117 million hits per year at the website
• 11000 content pages
• 150 Web applications, 30 apps(mobile)
• FE orientated

15. ANWB ICT & Front-end
15
• Modern, driven

16. Why ANWB supports this meet-up
16
• 10% ICT’er in NL are women, at the bottom 3 of EU
• In ANWB 15% ICT’ers, 7% developers Online: women
• Girl Code wants more female software developers.
• ANWB supports the girls of Girl Code to get the
number up.
• And we’ve got jobs for you

39. My first adventure with Elm:
An introduction and comparison with AngularJS
Anne van den Berg
www.jcore.com
JCore_nl
jcoreNL
jcore-b.v.

40. whoami
40

41. whoami
•Full stack developer @
•Travelling
•CrossFit
41

42. Elm – the basics
42

43. No Runtime Exceptions
43

44. Typed
44

45. Functional language
45

46. Immutable
46

47. Compiles to
JavaScript, HTML & CSS
47

48. Basics – Hello World
48

49. Basics - beginnerProgram
49

50. Elm vs AngularJS
50

51. Elm vs AngularJS - example
51

52. 52
Angular

53. 53
Elm

54. 54
Elm

55. 55
Elm

56. 56
Elm

57. Elm vs AngularJS - errors
•AngularJS (runtime)
57

58. 58

59. Elm vs AngularJS - errors
•Elm (compile time)
59

60. Elm vs AngularJS
60
Elm AngularJS
Typed + -
Speed + -
Errors + -
Clean code + -
Learning curve - +

61. Elm vs AngularJS
61
Elm AngularJS Angular2 +
Typed + - +
Speed + - +/-
Errors + - -
Clean code + - +
Learning curve - + +

62. Elm material
•elm-lang.org
•github.com/isRuslan/awesome-elm
•Jessica Kerr
62

63. Questions?
63

64. Bootstrap
How Bootstrap makes your Front End life easier

65. About me
• Front end developer at Aviva Solutions
• HTML/CSS magician
• SharePoint and Sitecore Stylist
• JavaScript rookie
• ASP.Net Core wannabe
• Photography fanatic, Fitness freak
• https://www.linkedin.com/in/chantalsloep

66. What is Bootstrap?
• Bootstrap does a lot of stuff for you
• Clean basic styling
• Fully responsive and flexible grid
• jQuery effects
• Bootstrap is widely supported
• Many jQuery plugins use Bootstrap
• Bootstrap templates available for most CMS’s
• ASP.Net web application has Bootstrap integrated by default
• Bootstrap (V3) is customizable
• Bootstrap is free and open source

67. How to use Bootstrap
• Which version to use?
• V3~: IE8+*
• V4~: IE10+
• Play by the rules
• Don’t touch the original Bootstrap files: Add your own
• Bootstrap V3: Customize
• Web Developer toolbar

68. What’s new in Bootstrap 4?
• Flexbox
• Sass
• More grid options
• New media query breakpoints
• REM sizing
• Data-attributes

69. Demo
• Demo Bootstrap V3
• Demo Bootstrap V4

70. Not such creative mind? Unify!
https://htmlstream.com/preview/unify-v2.1
• Pre-defined templates based on Bootstrap 4
• Default websites and webpages
• Blogs & Magazines
• E-commerce
• Single page applications
• Lot’s of jQuery plugins included
• Many options and examples
• $25,- / €21,27
• Unify is BIG: Use only what you need

71. Demo
• Unify website
https://htmlstream.com/preview/unify-v2.1/