Who is this guy?
About me

Why PhD?

discipline,
focus,
endurance,
soft-skills,
"finish what you started!”

Basketball!

discipline,
rent gym, collet money,
get (enough!) reliable players,
responsibility, accountability,
enable players to play,
provide beer,
prevent bad-blood and arguments,
form teams quickly,
counting score

It is a lot like being a good developer in a company!

Amazing things on web

Exciting things on web

… that we can do (~~now?~~)

So let's begin…

… with a simple excercise

What does the following code do?


input[type=range]::-moz-range-track {
  background-color: hotpink;
}

What does the following code do?


input[type=range]::-webkit-slider-runnable-track {
  background-color: hotpink;
}

What does the following code do?


input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
  background-color: hotpink;
}


.modal-box {
    width            : 100px;
    height           : 200px;
    background-color : #ll3377;
    line-height      : 20px;
    overflow         : hidden;
    font             : 10px Arial;
    text-indent      : 5px;
    pointer-events   : none;
}

Q: What’s the line height?

Nope! It's normal

Example 1: Text flow

The shape-outside property controls how content will wrap around a floated element’s bounding-box.
Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon