DEV Community: Eric Douglas

Minimalist Roadmap to Becoming a Full-Stack Developer

Eric Douglas — Tue, 14 Jul 2020 12:31:31 +0000

I fear not someone who has practiced 10,000 kicks once, but I fear someone who has practiced one kick 10,000 times.

Bruce Lee

When we are starting to learn about web development, we really struggle to find a clear and feasible path to guide us on this journey.

Although we have a lot of great schools that certainly will help to conquer this challenge, they might be really expensive.

We have an awesome alternative to this: Udemy courses! They contain a lot of useful content and are really affordable.

For me, this is the absolute sweet spot in education: students can access the content paying a small amount, and instructors receive their very deserved reward for investing (a lot of) time preparing the courses. I truly love Udemy courses for this reason ❤.

But one thing we do not have in Udemy is a roadmap to guide new students about what to study and in which order.

So with this roadmap below, you can without doubts become a professional developer, and after finish those courses, you will have enough knowledge to decide for your own your next steps 😉

Good luck on your journey!

PROTIP: invest some time finding/developing your learning methodology.

HTML & CSS

Udemy: Modern HTML & CSS From The Beginning (Including Sass)

Git

FreeCodeCamp: Git and GitHub for Beginners - Crash Course

JAVASCRIPT

Udemy: The Modern Javascript Bootcamp Course

REACT

Udemy: Complete React Developer (w/ Redux, Hooks, GraphQL)

NODE.JS

Udemy: Node.js API Masterclass With Express & MongoDB

MONGODB

Udemy: MongoDB - The Complete Developer's Guide

The beauty of recursion and pattern matching in functional programming languages

Eric Douglas — Fri, 19 Jun 2020 13:58:02 +0000

translations: pt-br

%% The lookup function receives a Key and a Node
lookup(_, {node, 'nil'}) ->
    undefined;
lookup(Key, {node, {Key, Val, _, _}}) ->
    {ok, Val};
lookup(Key, {node, {NodeKey, _, Smaller, _}}) when Key < NodeKey ->
    lookup(Key, Smaller);
lookup(Key, {node, {_, _, _, Larger}}) ->
    lookup(Key, Larger).

%% Explanation about parameters and data structure
%%
%% Empty node -> {node, 'nil'}
%% Non-empty node -> {node, {Key, Val, Smaller, Larger}}
%% node -> it's just an atom, like a constant
%% Key and Val -> can be of different types
%% Smaller and Larger -> Can be empty or non-empty node structures as well,
%%                       so you can have your binary tree

I want to invite you to admire the beauty, succinctness and power of the code above [1].

It is a function to find some value in a binary tree, using recursion and pattern matching.

We can see how simple and extremely declarative it is to write a function with these concepts and techniques from functional programming languages.

We have absolutely ZERO instructions in order to tell HOW the algorithm should work! We just expressed WHAT it will do, not how.

The code was written in Erlang.

Detailed explanation

This function will search in a binary tree by the Key you passed to it and will return a tuple with the Val (value) associated with the key passed, or undefined if it was not found.

A great advantage we have in Erlang and Elixir is the possibility to create more cases for the same function just changing the pattern in its parameters.

The function has the same name and arity (number of parameters), but since the pattern is different, it is like it was another function.

The cases will be verified from top to bottom, so we should put more specific cases first, and more general cases in the end. Think about it like a functional way to write switch or if / else statements.

We have 4 possible cases in our lookup/2 function, so let's see what which one does:

`lookup(_, {node, 'nil'})`

The first lookup will ignore the first value passed to it (_), and if the second value matches, it will return undefined. As you can see, the second value is an empty node.

`lookup(Key, {node, {Key, Val, _, _}})`

The second lookup will see if the Key we passed is the same Key in the node passed. If it is, we just found the node that contains the value we want to retrieve.

In that case, the lookup will return {ok, Val}, where Val is the value we are interested in.

`lookup(Key, {node, {NodeKey, _, Smaller, _}}) when Key < NodeKey`

The third lookup will match the case where the key we passed is different from the key in the node passed.

We also have a guard clause in the function signature, to keep it more specific. The guard clause when Key < NodeKey is important for us to decide in which direction we should go to search the value we expect.

In that case, we know that if the Key is smaller than NodeKey, we need to continue our search in the Smaller node. So we use a pattern match to extract the Smaller value and ignore the other data we won't use with _ again.

To continue our search, when we match the third lookup function, we will call it recursively, now with the following data lookup(Key, Smaller).

This is recursion and pattern matching in action! ❤

`lookup(Key, {node, {_, _, _, Larger}})`

The last case, and more general one, is when any of the previous lookup functions were not matched. We know this will only occur when the Key we passed is different from the Key in the current node, and the Key passed is larger than the key in the present node, so we need to continue our search in the Larger node.

In that case, we will call lookup recursively with the following data lookup(Key, Larger).

And that's it!

With ZERO instructions about HOW to do, we have a super simple, declarative, and full-featured function that retrieves a value from a binary tree! This is absolutely amazing and mind-blowing <3.

I hope you enjoyed it!

Cheers! :)

References

Code excerpt from chapter 7 - Recursion, section "More than lists", from the book Learn You Some Erlang for Great Good. LINK

How to configure Jest on a Next.js project

Eric Douglas — Wed, 17 Jun 2020 16:05:45 +0000

You just need to follow few steps to have Jest enabled in your Next.js application.

Let's see how to do this!

1. Install the dependencies

npm i -D babel-jest jest

2. Add the `test` script to run yor tests

Inside your package.json file, add this line in the scripts section:

"test": "jest --watch"

Now, all you need to do is (after we finish the setup), type npm test on you terminal.

3. Setup .eslintrc.json

If you are using ESLint, you will need to tell it to stop warning you about Jest functions.

Create a file called .eslintrc.json if you don't have one, and add the following code in the env section:

{
    "env": {
        "jest": true
    }
}

4. Final step: .babelrc

Just create a file called .babelrc and put this inside of it:

{
  "presets": ["next/babel"]
}

And that's it! If you need configure some thing particularly related to your project (like ignore certain folder), you can take a look at this file and this folder.

Bye! 👋

Quick Sort implemented in Erlang Analysis

Eric Douglas — Sat, 13 Jun 2020 17:32:41 +0000

When you want to truly understand what you are studying, you must go all the way down in the rabbit hole in order to absorb the content.

This is a step by step analysis of what is happening in a quick sort algorithm implemented in the book Learn you Some Erlang for Great Good [1].

recursive.erl

-module(recursive).

-export([partition/4, quick_sort/1]).

quick_sort([]) -> [];
quick_sort([Pivot | Rest]) ->
    {Smaller, Larger} = partition(Pivot, Rest, [], []),
    quick_sort(Smaller) ++ [Pivot] ++ quick_sort(Larger).

partition(_, [], Smaller, Larger) -> {Smaller, Larger};
partition(Pivot, [H | T], Smaller, Larger) ->
    if H =< Pivot ->
           partition(Pivot, T, [H | Smaller], Larger);
       H > Pivot -> partition(Pivot, T, Smaller, [H | Larger])
    end.

Analysis

quick_sort([5, 2, 2, 7, 6, 3])
  Pivot = 5
  Rest = [2, 2, 7, 6, 3]
  {Smaller, Larger} = ???

  partition(5, [2, 2, 7, 6, 3], [], [])
    Pivot = 5
    H = 2
    T = [2, 7, 6, 3]
    Smaller = []
    Larger = []

    partition(5, [2, 7, 6, 3], [2, []], [])
      Pivot = 5
      H = 2
      T = [7, 6, 3]
      Smaller = [2, []]
      Larger = []

      partition(5, [7, 6, 3], [2, [2, []]], [])
        Pivot = 5
        H = 7
        T = [6, 3]
        Smaller = [2, [2, []]]
        Larger = []

        partition(5, [6, 3], [2, [2, []]], [7, []])
          Pivot = 5
          H = 6
          T = [3]
          Smaller = [2, [2, []]]
          Larger = [7, []]

          partition(5, [3], [2, [2, []]], [6, [7, []]])
            Pivot = 5
            H = 3
            T = []
            Smaller = [2, [2, []]]
            Larger = [6, [7, []]]

            partition(5, [], [3, [2, [2, []]]], [6, [7, []]])
              Smaller = [3, [2, [2, []]]]
              Larger = [6, [7, []]]

  {Smaller, Larger} = {[3, [2, [2, []]]], [6, [7, []]]}

  %% (1) quick_sort([3, [2, [2, []]]] = Smaller) ++ [5 = Pivot] ++ (2) quick_sort([6, [7, []]] = Larger)
  quick_sort([3, 2, 2]) ++ [5] ++ quick_sort([6, 7])

  %% Solving (1) until the end
  quick_sort([3, 2, 2]) = quick_sort([2, 2]) ++ [3] ++ quick_sort([])
    quick_sort([2, 2]) = quick_sort([2]) ++ [2] ++ quick_sort([])
      quick_sort([2]) = quick_sort([]) ++ [2] ++ quick_sort([])

  %% Solving (2) until the end
  quick_sort([6, 7]) = quick_sort([]) ++ [6] ++ quick_sort([7])
    quick_sort([7]) = quick_sort([]) ++ [7] ++ quick_sort([])

  %% Replacing the values from our first quick_sort run
  %% obs 1: quick_sort([]) == []
  %% obs 2: consider that some values are from the left side quick_sort and other from righ side quick_sort

  %% quick_sort([3, 2, 2]) ++ [5] ++ quick_sort([6, 7])
  [2] ++ [2] ++ [3] ++ [5] ++ [6] ++ [7]

  %% Result
  [2, 2, 3, 5, 6, 7]

References

Book LYSE - chapter: Recursion

DEV Community: Eric Douglas

Minimalist Roadmap to Becoming a Full-Stack Developer

HTML & CSS

Git

JAVASCRIPT

REACT

NODE.JS

MONGODB

The beauty of recursion and pattern matching in functional programming languages

Detailed explanation

lookup(_, {node, 'nil'})

lookup(Key, {node, {Key, Val, _, _}})

lookup(Key, {node, {NodeKey, _, Smaller, _}}) when Key < NodeKey

lookup(Key, {node, {_, _, _, Larger}})

References

How to configure Jest on a Next.js project

1. Install the dependencies

2. Add the test script to run yor tests

3. Setup .eslintrc.json

4. Final step: .babelrc

Quick Sort implemented in Erlang Analysis

References

`lookup(_, {node, 'nil'})`

`lookup(Key, {node, {Key, Val, _, _}})`

`lookup(Key, {node, {NodeKey, _, Smaller, _}}) when Key < NodeKey`

`lookup(Key, {node, {_, _, _, Larger}})`

2. Add the `test` script to run yor tests