SlideShare a Scribd company logo
edulink - 2017 - frontend
kasper reijnders
01 introduction
02 history
03 frameworks
04 websites
05 webapps
06 quirks
today
introduction
Kasper Reijnders
○ frontend enthusiast
○ user centered design
○ 29 years
○ information studies @ university of amsterdam
○ vinyl lover
Experience
once upon a time
1. web pages
1. web pages
2. interaction
1. web pages
2. interaction
3. user driven web
1. web pages -> informative
2. interaction
3. user driven web
1. web pages -> informative
2. interaction -> feedback
3. user driven web
1. web pages -> informative
2. interaction -> feedback
3. user driven web -> social
1. informative -> plain html
2. feedback
3. social
1. informative -> plain html
2. feedback -> more styles, basic javascript
3. social
1. informative -> plain html
2. feedback -> more styles, basic javascript
3. social -> javascript driven
chrome internet explorer
edge safari firefox uc android browser
opera android browser
global
kenya
netherlands
what does this mean?
frameworks
grunt gulp
websites
1999
<button onclick="return someFunction()">
2008
<button class="button">
<script>
$('.button').on('click', someFunction() {});
</script>
2017
<button class="button">
<script>
document.querySelector('.button')
.addEventListener('click', someFunction() {});
</script>
splitted code
project: incentro.com
how do we work
● development in parts
● rules
● tools
development in parts
rules
CSS using BEM standards (block__element--modifier)
decide what is a component, element, etc
coding styles
tools
We deliver:
● Assets (css, js, images, fonts)
● Prototype
● Pattern library
tools
autoprefixer
pug
gulpESLint
sass
web applications
develop with a framework of your choice
mine
angular.io
model view controller (mvc)
model view viewmodel (mvvm)
project:
mistergreendirect.nl
think in components and modules
separate function
use development standards from the community
when working in a team all use the same coding styles
and
get an agreement on what is a component and what is not
quirks
when developing in javascript one should know
[] = Array()
JavaScript is not type safe
8 + "string" = "8string"
(5 == "5") = ?
(5 === "5") = ?
(5 == "5") = true
(5 === "5") = false
"string" + 9 = "string9"
"string" - 9 = ?
"string" + 9 = "string9"
"string" - 9 = NaN
[] + [] = ?
[] + [] = ""
[] + {} = ?
[] + {} = [object Object]
{} + [] = ?
{} + [] = 0
{} - {} = ?
{} - {} = NaN
{} - {} = NaN

More Related Content

Similar to frontend college edulink kenia

CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
Denise Jacobs
 
Get shit done
Get shit doneGet shit done
Get shit done
Michal Kostic
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
Netguru
 
DhanalakshmiPanjamExp
DhanalakshmiPanjamExpDhanalakshmiPanjamExp
DhanalakshmiPanjamExp
Dhanalakshmi panjam
 
Windows 8 for Web Developers
Windows 8 for Web DevelopersWindows 8 for Web Developers
Windows 8 for Web Developers
Gustaf Nilsson Kotte
 
Single Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem systemSingle Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem system
Synerzip
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
Matt Raible
 
Bootstrap
BootstrapBootstrap
Bootstrap
AvinashChunduri2
 
Brad Enterprise Solution Architect
Brad Enterprise Solution ArchitectBrad Enterprise Solution Architect
Brad Enterprise Solution Architect
Brad Travis
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
climboid
 
Knowing it all
Knowing it allKnowing it all
Knowing it all
Rachel Andrew
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
 
Abdul wahab resume_1+years
Abdul wahab resume_1+yearsAbdul wahab resume_1+years
Abdul wahab resume_1+years
Wahab Awaradi
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Matt Raible
 
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docxYeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
adampcarr67227
 
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docxYeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
jeffevans62972
 
Sr front end web developer Ln11
Sr front end web developer Ln11Sr front end web developer Ln11
Sr front end web developer Ln11
Aakash Desai
 
Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019
PhuocNT (Fresher.VN)
 
TypeScript and SharePoint Framework
TypeScript and SharePoint FrameworkTypeScript and SharePoint Framework
TypeScript and SharePoint Framework
Bob German
 

Similar to frontend college edulink kenia (20)

CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
Get shit done
Get shit doneGet shit done
Get shit done
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
 
DhanalakshmiPanjamExp
DhanalakshmiPanjamExpDhanalakshmiPanjamExp
DhanalakshmiPanjamExp
 
Windows 8 for Web Developers
Windows 8 for Web DevelopersWindows 8 for Web Developers
Windows 8 for Web Developers
 
Single Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem systemSingle Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem system
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Brad Enterprise Solution Architect
Brad Enterprise Solution ArchitectBrad Enterprise Solution Architect
Brad Enterprise Solution Architect
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Knowing it all
Knowing it allKnowing it all
Knowing it all
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Abdul wahab resume_1+years
Abdul wahab resume_1+yearsAbdul wahab resume_1+years
Abdul wahab resume_1+years
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
 
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docxYeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
 
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docxYeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
Yeshwanth 512-815-6436[email protected]FrontendUI Developer.docx
 
Sr front end web developer Ln11
Sr front end web developer Ln11Sr front end web developer Ln11
Sr front end web developer Ln11
 
Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019
 
TypeScript and SharePoint Framework
TypeScript and SharePoint FrameworkTypeScript and SharePoint Framework
TypeScript and SharePoint Framework
 

Recently uploaded

9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 

Recently uploaded (20)

9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 

frontend college edulink kenia