The short and sweet answer is: whenever, wherever, however you can.

SoloLearn

What I mean is that you can use the commute time to your work by coding on your phone or learning with applications like Enki or SoloLearn. It’s a very good learning experience!

When you are at home and have 10 minutes of free time – use it! Do that next exercise on FreeCodeCamp or change one line in your current project. Reread and better understand the code of some project one more time.

What you will find is that your attitude matters a lot when trying to attain a new skill. Don’t hesitate, don’t think too much. Just use every opportunity possible to move forward. Once you don’t hesitate to use a small window while riding a bus to learn more, you won’t hesitate to spend 3 hours on the weekend too! Stop doing some progress. Start doing as much progress as your current life situation allows you to. Not only you will learn, but you will be energized, positive and look forward to doing more each day.

Thoughts -> Words -> Actions -> Habits -> Character -> Purpose

Thoughts turn into words, words turn into actions, actions turn into habits…

When you decide to sit idly when you could be learning, you lose much more than some time spent on learning. You consciously decide that it’s not that important and you are fine as you are. You resign, when you don’t need to and tell yourself that your goals aren’t that important. When you decide to use that moment instead and put more effort, it builds up. You become serious about it and the results are sure to come.

Happy results in the new, 2019 year!

I had some trouble with understanding how the cubic-bezier function works while going through the tutorials on https://freecodecamp.org. My answer is based on the previous answer by eirenaois on StackOverflow.

1. Bezier curve is based on four points: P0, P1, P2, and P3. P0 is set by default to (0, 0) and P3 is set by default to (1, 1). These are the beginning and the ending of the curve and you can’t change them.
2. The curve will stretch differently depending on what coordinates you give for points P1 and P2.

In the example above P1 is set to (0.1, 0.1) and P2 is set to (1, 0). The speed of the animation depends on how much does the state change per given amount of time. In this example, the animation gets faster with time. For the first half of the time used for the animation, it will cover about 15% of the distance (when Time = 0.5, State ~ 0.15). It will cover the remaining 85% of the distance in the second half.

Please check the example in jsfiddle to see how the animation works in practice: cubic-bezier ball animation

HTML:

<div class=”ball”></div>

CSS:

  .ball{
background: red;
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 50%;
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
0% {
left: 0%;
}
100% {
left: 100%;
}
}

In the example, the ball moves from the left edge of the screen to the right edge over the course of 4 seconds. Keyframes are there to set where the animation should begin and end, animation-timing-function: cubic-bezier() to set the speed of the animation at different points in time.

You can find the CSS cubic-bezier Builder here.