An introduction to Frontend - 2020 Edition

AN INTRODUCTION TO FRONTEND
1
Marco Montalbano

View Slide

GOAL
2
https://git.io/fjmCg

View Slide

3
HTML

View Slide

HTML
4
• The acronym “HTML” stands for Hypertext Markup Language
• It is not a programming language
• It is a markup language which describes the structure of a web page semantically
• It describes how to lay out the content of a web page using HTML elements called tags
• It tells the browser what to display.

View Slide

TAG
5
• Each tag has a defined meaning
• It can contain other tags
• They are enclosed in angle brackets:
• Usually tags are made up of two elements: a "start tag" and an "end tag"
• The start tag may include attributes within the tag
testo
void elements ( https://bit.ly/void-elements )

View Slide

TAGS
6
- -
base structure of an HTML document

…
...

embedded in tag
metadata are not displayed on the page but are used
by browsers or search engines

embedded in tag
page title
title is visible inside the browser tab

is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written
in

…

View Slide

TAGS
7
-
defines a division or a section in an HTML document

this is a section

is a generic inline container for phrasing content
this text is on the same line
this text is on the same line

paragraph
this is a paragraphthis is a paragraph
this is a paragraph
this is a paragraph

link
link to google
link to google

View Slide

8

View Slide

9
HEADER
HERO
CONTENT
FOOTER
ARTICLE ARTICLE ARTICLE

View Slide

TAGS
10
- - -
heading
Title h1
Title h2
Title h3
Title h4
Title h5
Title h6
Title h1
Title h2
Title h3
Title h4
Title h5
Title h6
-
ordered list

first item
second item

1. first item
2. second item
-
unordered list

first item
second item

● first item
● second item
- -
table – row – cell

cell A1
cell A2

cell A1 cell A2

View Slide

TAGS – VOID ELEMENTS
11

text input

line break
this text contains
a line break
this text contains
a line break

defines a thematic break
this is a topic

this is a different topic
this is a topic
this is a different topic

image

View Slide

View Slide

ATTRIBUTES
13

href contains a URL or a URL fragment that the
hyperlink points to
link to google

the attribute src is mandatory and defines the image
URL

- name and value are submitted with the form data
- type specifies the type element to display

all tags can have an id and a class
text

View Slide

• MDN web docs – https://developer.mozilla.org/en/docs/Web/HTML
• Codecademy – https://www.codecademy.com/learn/learn-html
• W3C – https://www.w3.org/html
14
REFERENCES

View Slide

15
HTML
in action
https://bit.ly/fe4b-html

View Slide

16
CSS

View Slide

CSS
17
• The acronym “CSS” stands for Cascade Style Sheet
• It is not a programming language
• Used for describing the presentation of an HTML document
• Defines fonts, layout, colors, etc. of the whole page and single elements
• It tells the browser how to display informations.

View Slide

CSS
18
a web page is styled according to
a set of style rules
div {
color: blue;
font-size: 15px;
}
selector
property
value

View Slide

SELECTORS https://mzl.la/33MQNR4
19
in order to identify which elements are affected by style rules
we need a selector
1. type selectors div { … }
#policy-section { … }
2. ID selectors
.small { … }
3. class selectors
[title] { … }
[title="open"] { … }
4. attribute selectors

Text here
Small text here
Click me

View Slide

#elm-id
div#elm-id
element with id "elm-id"
with id "elm-id"
.elm-class
div.elm-class
elements with class "elm-class"
all with class "elm-class"
div
div, span
div span
div > span
all
and
nested in
children of
grouping and combine selectors
SELECTORS
20
div:hover
.error:focus
all on mouse-over
elements with class “error” on focus
#elm-id.elm-class element with id "elm-id" and class "elm-class"

View Slide

Position/Number-based
:first-child
:last-child
:nth-child()
:nth-of-type()
Relational
:not()
:empty
Link-related
:link
:visited
:hover
:active
Input & link related
:focus
:enabled
:disabled
:checked
:indeterminate
:required
:optional
:target
SELECTORS pseudo-classes https://mzl.la/3cVYN6v - https://css-tricks.com/pseudo-class-selectors/
21
is a keyword added to a selector that specifies a special state of the
selected element(s)
Live Demo
https://codesandbox.io/embed/pseudo-class-selectors-0xntp

View Slide

SELECTORS
22
just a more complex
selector
div.menu-bar li:hover > ul {
color: blue;
}

View Slide

PROPERTIES
23
color:
background-color:
background-image:
#FF0000
blue
url("html5.png")
font-family:
font-size:
font-weight:
font-style:
Arial, sans-serif
14px
bold
italic
text-align:
text-shadow:
text-decoration:
text-decoration:
center
1px 1px 1px blue
line-through
underline
position:
position:
position:
top:
right:
bottom:
left:
static
relative
absolute
10px
-5px
3px
10px

View Slide

24

View Slide

BOX MODEL
25
the CSS box model is essentially a box that wraps
around every HTML element

View Slide

BOX MODEL
26
margin: 10px;
margin: 10px 15px;
margin: 10px 15px 10px 10px;
increases the element margin
padding: 10px;
padding: 10px 15px;
padding: 10px 15px 10px 10px;
padding-top: 10px; padding-right: 15px; …
increases space around the border and content of the element
border: 1px solid #F1F1F1;
border-top: 2px solid #F1F1F1;
adds a border around the element
height: 150px;
width: 50%;
sets a width and a height to the element

View Slide

DISPLAY
27
every HTML element has a default display value
depending on what type of element it is
display: block;
and are block elements.
A block-level element always starts on a
new line and takes up the full width
available.
This is a paragraph
This is another paragraph
display: inline;
does not start on a new line and only
takes up as much width as necessary
This link does not start on a
new line and only takes up as much
width as necessary.

View Slide

POSITION https://mzl.la/2MZAn0D
28
static relative absolute
The position CSS property sets how an element is positioned in a document.
The top, right, bottom, and left properties determine the final location of positioned elements.

View Slide

AWD vs RWD
29
ADAPTIVE WEB DESIGN
multiple templates
specific for each device
RESPONSIVE WEB DESIGN
a single design that
adjusts to each device

View Slide

RESPONSIVE WEB DESIGN
30
• Rule 1 –
• Rule 2 – use % values instead of px
• Rule 3 – define breakpoints using media query
Media Query uses @media rule to include a set of CSS properties
only if the specific condition is true
.col {
width: 100%;
}
@media (max-width: 768px) {
.col {
width: 50%;
}
}

View Slide

LAYOUT EVOLUTION https://bit.ly/css-layout-evolution
31
At the beginning the most
sophisticated layout tool designers
had was
…
.. and inline-block
display: inline-block;
Then we began to hack out layouts
with complicated mixtures of
absolute positioning, floats ..
position: absolute;
float: left;
Flexbox
&
Grid Layout

View Slide

FLEXBOX https://mzl.la/2Ckg35E - https://css-tricks.com/snippets/css/a-guide-to-flexbox
32
it gives the container the ability to alter its items' width/height (and order)
to best fill the available space
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
.container {
display: flex;
}
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}
support for IE
starts from 10*

View Slide

33
justify-content align-items align-content
support for IE
starts from 10

View Slide

34
align-self
order
ﬂex-grow
support for IE
starts from 10

View Slide

FLEXBOX READ PLAY MORE
35

View Slide

GRID LAYOUT https://mzl.la/2q4aXYi - https://css-tricks.com/snippets/css/complete-guide-grid
36
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
.item-header { grid-area: header; ... }
.item-main { grid-area: main; ... }
.item-sidebar { grid-area: sidebar; ... }
.item-footer { grid-area: footer; ... }
support for IE
starts from 10*

View Slide

GRID LAYOUT READ PLAY MORE
37

View Slide

TRANSITION
38
Transitions enable you to define the transition between two states of an element
.cookie-policy {
opacity: 1;
transition: opacity 2s;
}
.cookie-policy.hidden {
opacity: 0;
}

View Slide

WHY “CASCADING” ?
39
the rule used is chosen by cascading down from the more
general rules to the specific rule required
selector # of ID # of CLASS # of TAG specificity
#my-id 1 0 0 100
.my-class 0 1 0 10
li 0 0 1 1
ul li 0 0 2 2
li.my-class 0 1 1 11

the most specific rule is chosen •
with equal specificity, the last rule is chosen •
style-inline rules out every other rule •

View Slide

WHERE DO I WRITE THIS?
40
 not so bad, but avoid it anyway <style> span { color: blue; } 

load it from file
new tag is embedded in tag

Style inline
don’t try this at office nowhere
this text is blue
style.css
span {
color: blue;
}
this text is blue

View Slide

41
REFERENCES
• MDN web docs – https://developer.mozilla.org/en/docs/Web/CSS
• Codecademy – https://www.codecademy.com/learn/learn-css
• W3C – https://www.w3.org/Style/CSS/Overview.en.html

View Slide

42
CSS
in action
https://bit.ly/fe4b-css

View Slide

43
JAVASCRIPT

View Slide

JAVASCRIPT
44
• It’s not an acronym
• It is a scripting Object-Oriented language
• Everything is an object (except null and undefined)
• It is untyped
• It is implemented client-side in web browsers
• It is also implemented server-side with node.js
• It makes web pages interactive
• It’s an implementation of the EcmaScript standard
https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

View Slide

A re-introduction to JavaScript https://mzl.la/3fMBmxE
45
JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape. JavaScript was first
released with Netscape 2 early in 1996. It was originally going to be called LiveScript, but it was renamed in
an ill-fated marketing decision that attempted to capitalize on the popularity of Sun Microsystem's Java
language — despite the two having very little in common. This has been a source of confusion ever since.
Several months later, Microsoft released JScript with Internet Explorer 3. It was a mostly-compatible
JavaScript work-alike. Several months after that, Netscape submitted JavaScript to Ecma International, a
European standards organization, which resulted in the first edition of the ECMAScript standard that year.
The standard received a significant update as ECMAScript edition 3 in 1999, and it has stayed pretty much
stable ever since. The fourth edition was abandoned, due to political differences concerning language
complexity. Many parts of the fourth edition formed the basis for ECMAScript edition 5, published in
December of 2009, and for the 6th major edition of the standard, published in June of 2015.

View Slide

ECMAScript
46
timeline
ES 6
June
2015
This update adds significant new syntax for
writing complex applications, including class
declarations and ES6 modules. Other new
features include iterators and for/of loops,
Python-style generators, arrow function
expression, binary data, typed arrays, new
collections, promises, number and math
enhancements, reflection, proxies and
template literals for strings.
ES 6
ES 9
June
2018
ES 1
June
1997
First edition.
ES 1
ES 2
June
1998
Editorial changes to keep the specification fully
aligned with ISO/IEC 16262 international
standard.
ES 2
ES 3
December
1999
Added regular expressions, better string
handling, new control statements, try/catch
exception handling, tighter definition of errors,
formatting for numeric output ...
ES 3
ES 5
December
2009
Adds "strict mode," a subset intended to
provide more thorough error checking and
avoid error-prone constructs. Adds some new
features, such as getters and setters, library
support for JSON, and more complete
reflection on object properties.
ES 5
ES 5.1
December
2011
This edition 5.1 of the ECMAScript standard is
fully aligned with third edition of the
international standard ISO/IEC 16262:2011.
ES 5.1
ES 7
June
2016
The major standard language features include
block-scoping of variables and functions,
destructuring patterns (of variables), ...
ES 7
ES 8
June
2017
Includes async/await constructions, which
works using generators and promises.
ES 8

View Slide

let and const names:
• Can contain letters, numbers, $ and _
• Can start with a letter, $ and _
• Are case-sensitive ( y and Y are two different variables )
VARIABLES and CONSTANTS https://bit.ly/mdn-js-let – https://bit.ly/mdn-js-const
47
support for IE
starts from 11
let and const cannot be redeclared
let age = 30;
let age = 30; // syntax error
const name = 'John';
const name = 'John'; // syntax error
const cannot be reassigned
let age = 30;
age = 31;
const name = 'John';
name = 'Marco'; // syntax error
const must be initialized
let age;
age = 31;
const name; // syntax error
name = 'Marco';

View Slide

VARIABLES and CONSTANTS https://bit.ly/mdn-js-let – https://bit.ly/mdn-js-const
48
let myNumber = 3 + 5;
let myString = 'Hello' + ' ' + 'World!!';
let myArray = ['apple', 'lime', 3];
console.log( myArray[0] );
//Prints ‘apple’
let myObject = {
name: 'John',
age: 28
};
console.log(myObject.name);
//Prints ‘John’
let myFloat = 3.5;
let myFunction = function(num1, num2) {
return num1 + num2;
}
support for IE
starts from 11

View Slide

CONST rules of thumb
49
const myObject = {
name: 'John',
age: 28
};
// syntax error
myObject = 'Just a string';
const myObject = {
name: 'John',
age: 28
};
// this is ok
myObject.age = 31;
const has immutable binding not immutability
support for IE
starts from 11

View Slide

you can also declare variable with var keyword
VAR
50
if you need browser compatibility for non-modern browsers
babeljs.io for the rescue
But forget about it!

View Slide

FUNCTIONS https://mzl.la/2IEQd0C
51
• Usually is defined through keyword function followed by a name and ( )
• The name can contain letters, numbers, _ and $ (just like variables)
• The ( ) can contain arguments separated by commas
• Arguments can have a default value
function add(num1, num2 = 10) {
return num1 + num2;
}
const result = add(5, 5); //= 10
const add = function(num1, num2 = 10) {
return num1 + num2;
}
no support for IE
const result = add(6); //= 16

View Slide

ARROW FUNCTIONS https://mzl.la/3a9wMs6
52
• Is a syntactically compact alternative to a regular function expression
• Doesn’t have its own bindings to the this, arguments, super, or new.target keywords
• Arrow functions can have either a "concise body" or the usual "block body".
const result = add(5, 5); //= 10
const add =(num1, num2 = 10) => {
return num1 + num2;
}
const result = add(6); //= 16
no support for
IE
const add = (num1, num2 = 10) => num1 + num2;

View Slide

BLOCK-LEVEL SCOPE
53
let age = 31;
console.log(age);
// 31
if (true) {
let age = 25;
console.log(age);
// 25
}
console.log(age);
// 31
function getValue(condition) {
// myVariable doesn't exist here
if (condition) {
let myVariable = 5;
} else {
}
}
Variables declared using let or const keywords are block-level scoped
A block is indicated by the { and } characters
support for IE
starts from 11

View Slide

ReferenceError: 'myVariable' is not defined
console.log(myVariable);
TEMPORAL DEAD ZONE
54
console.log(myVariable);
let myVariable = 5;
ReferenceError: Cannot access 'myVariable'
before initialization
A variable declared with either let or const
cannot be accessed until after the declaration
support for IE
starts from 11

View Slide

COMPARISON OPERATORS https://mzl.la/2wCuFwX
55
3 == 3
== vs ===
A comparison operator compares its operands and returns a logical
value based on whether the comparison is true
true "3" == 3 true
3 === 3 true "3" === 3 false 3 >= 3 true
3 < 4 true

View Slide

for ( let step = 0; step < 5; step++ ) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
for
LOOPS AND ITERATION https://mzl.la/2KX0uUo
56
Loops offer a quick and easy way to do something repeatedly
let i = 0;
while (i < 5) {
i += 1;
console.log(i);
};
while
let i = 0;
do {
i += 1;
console.log(i);
} while (i < 5);
do

View Slide

const array1 = ['a', 'b', 'c'];
array1.forEach(function (element) {
console.log(element);
});
.forEach()
ARRAY METHODS https://mzl.la/2N39dGy
57
Array object offer helper methods
const array1 = [1, 2, 3];
const results = array1.map((value) => value * 2);
.map()
const array1 = [2, 3, 4];
const results = array1.filter(function (value) {
return value % 2 === 0;
});
.filter()
support for IE
starts from 9

View Slide

DESTRUCTURING ASSIGNMENT https://mzl.la/2CeK22j
58
Expression that makes it possible to unpack values from arrays, or
properties from objects, into distinct variables.
no support for
IE
console.log(name); // John
console.log(age); // 28
const person = ['John', 28];
const [ name, age ] = person;
ARRAY
const person = {
name: 'John',
age: 28
};
const { name, age } = person;
OBJECT
const person = {
name: 'John',
age: 28
};
const printInfo =({ name, age }) => {
console.log(name); // John
console.log(age); // 28
}
printInfo(person);
USAGE WITH
FUNCTIONS

View Slide

TEMPLATE STRINGS https://mzl.la/2DUepv9
59
Multi-line strings and string interpolation features
no support for
IE
const text = `This is a
multi-line
text`;
const person = {
name: 'John',
age: 28
};
const text = `My name is ${ person.name }`;

View Slide

EXPORT / IMPORT https://mzl.la/3itzuMi - https://mzl.la/3kEU666
60
no support for
IE
export default {
name: 'John',
age: 28
};
EXPORT
DEFAULT
import person from './person.js';
IMPORT DEFAULT
export const red = { name: 'red', hex: '#FF0000' }
const green = { name: 'green', hex: '#00FF00' }
const blue = { name: 'blue', hex: '#0000FF' }
export { green, blue };
NAMED EXPORT
import { red, green, blue } from './colors.js';
NAMED IMPORT
import React, { useState } from 'react';
MIXED IMPORT

View Slide

61
REFERENCES
• MDN web docs – https://developer.mozilla.org/it/docs/Web/JavaScript
• Codecademy – https://www.codecademy.com/learn/introduction-to-javascript
• Nicholas C. Zakas - Understanding ES6 – https://leanpub.com/understandinges6/read

View Slide

62
JAVASCRIPT & DOM

View Slide

DOM
63
DOM ( Document Object Model )
describes the HTML document as a tree structure
wherein each node is an object
• The document object represents your web page
• Document is made up of nodes
• Element nodes are html tags
• The HTML DOM can be accessed with JavaScript

View Slide

DOM • JS FUNCTIONS
64
document.getElementsByTagName( 'span' )
returns a collection of all elements in the document with the
specified tag name, as a NodeList object
document.getElementsByClassName( 'my-class' )
specified class name, as a NodeList object
document.getElementsByName( 'email' )
specified name (the value of the name attribute), as a NodeList
object
document.querySelectorAll( '.my-class' )
returns a static NodeList representing a list of the
document's elements that match the selector.
test
test
 const element = document.querySelectorAll('.my-class'); // elements contains both spans. 
document.getElementById( 'my-id' )
returns the element that has the ID attribute with the
specified value
test
 const element = document.getElementById('my-id'); 
document.querySelector( '.my-class' )
returns the first Element within the document that
matches the specified selector, or group of selectors.
test
test
 const element = document.querySelector('.my-class'); // element contains the first span. 

View Slide

DOM • NODE PROPERTIES
65
firstChild - lastChild → Node object
returns the first and last child node of the specified
node
Hello World!
 const element = document.getElementById('my-id'); console.log( element.firstChild ); //= console.log( element.lastChild ); //= 
innerHTML
returns the HTML content of an element
Hello World!
 const element = document.getElementById('my-id'); console.log( element.innerHTML ); //= Hello World! 
textContent
returns the textual content of the specified node, and
all its descendants
Hello World!
 const element = document.getElementById('my-id'); console.log( element.textContent ); //= Hello World! 
childNodes → NodeList object
returns a collection of a node's child nodes
Hello World!
 const element = document.getElementById('my-id'); console.log( element.childNodes ); //= [ , ] 

View Slide

DOM • EVENTS
66
dispatchEvent
dispatches an Event at the specified element
(EventTarget - DOM interface).
Greet!
 const element = document.getElementById('my-button'); const clickEvent = new Event('click'); element.dispatchEvent(clickEvent); 
addEventListener
sets up a function (callback) that will be called whenever
the specified event is delivered to the target.
Greet!
 const element = document.getElementById('my-button'); element.addEventListener('click', function(event) { console.log('Hi all!'); console.log(event.target); //= <button id="my-button"> ... }); 

View Slide

FETCH https://mzl.la/2OLg6yA
69
The Fetch API provides an interface for fetching resources
const responsePromise = fetch('https://next.json-generator.com/api/json/get/VylGdfytP');
const jsonPromise = responsePromise.then(function (response) {
return response.json();
});
jsonPromise.then(function (json) {
console.log(json);
});
no support for
IE

View Slide

POLYFILL
70
DOMTokenList.prototype.toggle = function (name, force) {
var exists = this.contains(name);
if (exists === force) {
return force;
}
if (exists) {
this.remove(name);
} else {
this.add(name);
}
return !exists;
};
A polyfill is a piece of code (usually
JavaScript on the Web) used to provide
modern functionality on older browsers
that do not natively support it.
https://mzl.la/2P2Q7Tm
no support for
IE
support for IE
starts from 10
const element = document.querySelector('.element');
let isVisible = true;
element.classList.toggle('visible', isVisible);

View Slide

WHERE DO I WRITE THIS?
71
…
not so bad, but avoid it in most cases
 alert('Hello World!'); 

load it from file
new tag is embedded at the end of tag

Script inline
don’t try this at office nowhere
greet

View Slide

72
REFERENCES
• MDN web docs – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
• Codecademy – https://www.codecademy.com/courses/javascript-beginner-en-gwcYv/0/1
• What is the DOM? – https://css-tricks.com/dom/

View Slide

73
JAVASCRIPT & DOM
in action
https://bit.ly/fe4b-js

View Slide

74
SASS - SCSS

View Slide

SASS - SCSS https://sass-lang.com
75
• It is a CSS pre-processor
• It extends CSS adding variables, mixins, functions and more
• It make CSS more maintainable over time
• It can be converted to CSS using different tools

View Slide

CSS = SCSS
76
• Same syntax
• Same semantics
SCSS = CSS + extensions
• Nesting
• Variables
• Partials and Import
• Mixins
• Extend/Inheritance
• Operators

View Slide

SCSS • NESTED RULES
77
#header {
color: black;
}
#header > .navigation {
font-size: 12px;
}
#header a {
color: blue;
}
#header a:hover {
color: green;
}
CSS
#header {
color: black;
> .navigation {
font-size: 12px;
}
a {
color: blue;
&:hover {
color: green;
}
}
}
SCSS

View Slide

SCSS • NESTED RULES • @media
78
.component {
width: 100%;
}
.component .blue {
color: blue;
}
.component {
width: 50%;
}
}
CSS
.component {
width: 100%;
.blue {
color: blue;
}
width: 50%;
}
}
SCSS

View Slide

SCSS • VARIABLES
79
• Begin with “$” dollar signs
• Common property values can be written only once
• You can change multiple values changing just one code line
• Variable names can use hyphens “-” and underscores “_” interchangeably
$border-color: #FFFFFF;
$my-border: 1px solid #FFFFFF;
$my-border: 1px solid $border-color;
$size: 100px;

View Slide

SCSS • VARIABLES
80
.component-header {
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.component-footer {
color: #FFFFFF;
background-color: #FF0000;
}
.another-component {
color: #FF0000;
}
CSS
$color-1: #FFFFFF;
$color-2: #FF0000;
.component-header {
color: $color-1;
border-bottom: 1px solid $color-1;
}
.component-footer {
color: $color-1;
background-color: $color-2;
}
.another-component {
color: $color-2;
}
SCSS

View Slide

• Suppose we have two TAGs with a total width of 1000px
• One must be ¾ of the other
SCSS • MATH OPERATIONS
81
#content {
width: 750px;
}
#sidebar {
width: 250px;
}
CSS
$width: 1000px;
$contentWidth: $width * (3 / 4);
$sidebarWidth: $width - $contentWidth;
#content {
width: $contentWidth;
}
#sidebar {
width: $sidebarWidth;
}
SCSS

View Slide

SCSS • MATH FUNCTIONS
82
• ceil( 2.4 ) → 3
• floor( 2.6 ) → 2
• round( 1.67 ) → 2
• percentage( 0.5 ) → 50%
• sqrt( 25px ) → 5px
• abs( -15px ) → 15px
• min( 5, 10 ) → 5
• max( 5, 10 ) → 10
SCSS • COLOR FUNCTIONS
• rgb( 90, 129, 32 ) → #5a8120
• red( #5a8120 ) → 90
• green( #5a8120 ) → 129
• blue( #5a8120 ) → 32
• lighten( #80e619, 20% ) → #b3f075
• darken( #80e619, 20% ) → #4d8a0f

View Slide

SCSS • INTERPOLATION SYNTAX
83
You can use variables in selectors and property names using
#{} interpolation syntax
$name: "foo";
$attr: "border";
p.#{$name} {
#{$attr}-color: blue;
}
SCSS
p.foo {
border-color: blue;
}
CSS

View Slide

Using @extend lets you share a set of CSS properties
from one selector to another
SCSS • @extend
84
.success {
color: green;
}
.element-1 {
@extend .success;
font-weight: bold;
}
.element-2 {
@extend .success;
}
SCSS
.success, .element-1, .element-2 {
color: green;
}
.element-1 {
font-weight: bold;
}
CSS

View Slide

A placeholder class is a special type of class
that only prints when it is extended
SCSS • @extend
85
%message-shared {
color: green;
}
%another-message {
color: blue;
}
.element {
@extend %message-shared;
}
SCSS
.element {
color: green;
}
CSS

View Slide

• Used to define a group of properties and use them later on
• Parametric mixins are by all means functions
SCSS • @mixin
86
@mixin border-radius($radius: 10px) {
-moz-border-radius: $radius;
border-radius: $radius;
}
#header {
@include border-radius(4px);
}
SCSS
#header {
-moz-border-radius: 4px;
border-radius: 4px;
}
CSS

View Slide

SCSS • @mixin PRO
87
@mixin border-radius($radius: 10px) {
@if ($radius == 20px) {
$radius: $radius * 2px;
}
-moz-border-radius: $radius;
border-radius: $radius;
}
#header {
@include border-radius(20px);
}
SCSS
#header {
-moz-border-radius: 40px;
border-radius: 40px;
}
CSS

View Slide

@import "variable";
@import "header";
@import "footer";
...
application.scss
SCSS • IMPORT
88
You can import .scss files inside other .scss files
@import "this-is-valid";
.header {
color: $color-1;
}
_header.scss
.footer {
color: $color-2;
}
_footer.scss
$color-1: #FFFFFF;
$color-2: #FF0000;
...
_variables.scss

View Slide

$var: red;
#header {
.white {
$var: white;
color: $var; // white
}
color: $var; // red
}
SCSS • SCOPE
89
Variables and mixins are first looked for locally, and if they aren't found,
the compiler will look in the parent scope, and so on
$var: red;
#header {
.white {
$var: white;
color: $var; // white
}
color: $var; // red
}
$var: blue;
#footer {
color: $var; // blue
}
#header {
color: red;
}
#header .white {
color: white;
}
#footer {
color: blue;
}
CSS
SCSS

View Slide

90
https://www.sassmeister.com

View Slide

1 npm install -g sass
HOW DO I COMPILE IT?
91
-g installs the specified package as a
global package. It is useful if you want to
use it as a command line tool
sass input.scss output.css
2

View Slide

92
NODE.JS

View Slide

NODE.JS
93
• Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
• V8 is the JavaScript execution engine built for Google Chrome and open-sourced by Google in
2008.
• Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient
• It executes JavaScript code server-side
• There are a lot of applications today that use Node.js

View Slide

94

View Slide

95

View Slide

NPM https://www.npmjs.com
96
“Node.js' package ecosystem, npm, is the largest ecosystem
of open source libraries in the world” https://nodejs.org
NPM ≈ Maven ≈ Composer ≈ Bundler ≈ …
Java PHP Ruby

View Slide

package.json is used to give information to npm that
allows it to identify the project as well as handle the
project's dependencies.
devDependencies are dependencies not required for
normal operation, but required/recommended if you
want to patch or modify the project ( unit test, lint,
builder, ecc. ).
dependencies field is used to list all the dependencies
of your project that are available on npm. When
someone installs your project through npm, all the
dependencies listed will be installed as well.
NPM https://docs.npmjs.com/files/package.json
97
{
"name": "project-name",
"description": "project-desc",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json

View Slide

NPM https://docs.npmjs.com/cli-documentation
98
npm install - npm update
installs a package, and any packages that it
depends on
npm prune
removes packages that are not listed on the
parent package's dependencies list
npm install
installs the specified package and adds it to the
package.json
{
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json

View Slide

NPM https://docs.npmjs.com/misc/scripts
99
{
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json
npm test
this runs a package’s “test” script, if one was
provided.
scripts section
The “scripts” property is a dictionary containing script
commands that are run at various times in the
lifecycle of your package. You can also trigger them
manually.
npm run build
this runs a package’s “build” script, if one was
provided.

View Slide

NPM • node_modules
100
npm install
{
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"mocha": "^6.2.2"
},
"scripts": {
"test": "mocha",
"build": "webpack"
}
}
package.json
A folder with name
node_modules is created.
This folder contains all
downloaded dependencies.
You don’t need to commit
and push this folder, so
remember to add it to
.gitignore file.

View Slide

HOW DO I INSTALL NODE.JS?
101

View Slide

WHERE ARE PACKAGES?
102

View Slide

103
PARCEL

View Slide

PARCEL
104
Parcel is a Web Application Bundler.
Its main features set includes:
• zero configuration
• assets bundling (HTML, CSS, JS)
• automatic transforms using Babel
• caching and parallel processing for faster builds
• hot module replacement

View Slide

HOW DO I INSTALL PARCEL?
105
npm install -D parcel-bundler
1
-D installs the specified
package as a dev dependency

View Slide

PARCEL SCRIPTS https://en.parceljs.org/getting_started.html
106
1
{
"name": "an-introduction-to-frontend",
"description": "An introduction to Frontend",
"version": "1.0.0",
"license": "MIT",
"parcel-bundler": "~1.12.4"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
}
package.json

View Slide

107
from https://bit.ly/fe4b-js to https://github.com/marcomontalbano/an-introduction-to-frontend
Let’s Try
107

View Slide

108
GitHub
https://github.com/marcomontalbano/an-introduction-to-frontend
Thank You!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Project Name

View Slide

An introduction to Frontend - 2020 Edition

An introduction to Frontend - 2020 Edition

Marco Montalbano

More Decks by Marco Montalbano

Other Decks in Programming

Featured

Transcript