Forem: Will Soares

What is an "old way" of doing things that it'd be surprising/interesting for beginners when it comes to software development?

Will Soares — Mon, 08 Jul 2019 00:53:19 +0000

As usual and expected, I keep accidentally learning things at work that are sort of a mind-blowing to me. The last one happened in a meeting in which a dev had to send over the changes they did in a file to some other dev in the call and I was intrigued to see that they ran a git diff command and piped the output to a file. I couldn't guess what they would do with the file, which was named changes.patch.

Then they said: "Just take this file and run a git apply on it and you're done".

The other dev replied: "Just like old times..."

I just observed while my mind was ...

The thing is that I study Git a lot and I knew that devs used to share files via email whenever they wanted to share changes with the team, but it was just surprising to see that the output of a git diff could be used like that.

With that, I was wondering what similar stories people have to share and whether they wished that's how things would be done nowadays or not.

Destructuring JavaScript objects like a pro

Will Soares — Sun, 16 Jun 2019 16:19:22 +0000

Hello there!

For a long time now I've been wanting to take notes on a couple of tricks I currently use at work regarding the concept of Destructuring in JavaScript. I feel like most of the things I learn and am currently using in a daily basis will just fade out once I stop using them this often. Thus, I decided to write down those things in order to make them stick with me for longer even when I'm not looking at them daily. I used to do this when in middle and high school but stopped right after I started college and I feel the consequences now, specially considering I have a really shaky memory.

For those out there who are not familiar with the idea of destructuring in JavaScript, following is a brief overview of it. There are also tons of posts about it if you google it, so feel free to look for more content if this is too brief or not clear enough for you ;)

Destructuring was not always there in JavaScript for people to use, the concept was introduced to the language in June of 2015 together with a few other features that make up the 6th edition of the language, which is popularly known as ES6 or ES2015 (check this for reference).
The idea is basically to allow assignment of variables based on object properties or array values in a prettier manner. If you think of it as being the opposite idea of structuring something, which it is, you'll get that the object is being "broken down" into pieces until you find the value you want and then use that to create a variable.

Check the following code which shows one of the ways you would create a variable that is supposed to have a value contained in an object considering you don't know the existence of destructuring.

Note that classs is written like that in the entire text to avoid conflicts with the keyword class.

const homoSapiens = {
  kingdom: 'Animalia',
  classs: 'Mammalia',
  family: 'Hominidae',
  genus: 'Homo',
  species: 'H. sapiens'
}

const homoSapiensFamily = homoSapiens.family;

// and if you want to be certain of the type of the variable, you would
// set a default value for it in case the `family` property does not 
// exist in the source object
const safeHomoSapiensFamily = homoSapiens.family || '';

You see that you'd have to do the same thing for each property that you want to use in that object, which is not really a huge pain to do but why should we do it that way when we can take advantage of the power of destructuring to both create variables and make sure of their type?
The following is a snippet that uses destructuring to accomplish the same.

const { family = '', species = '' } = homoSapiens;

Here we are creating two variables called family and species based on properties that have the same name in the source object. And we are also making sure that they will be strings even when those two properties are not contained in the object.

You might argue that family and species are not really meaningful variable names if you look at them by themselves. Destructuring also allows us to specify the variable name (an alias) we want instead of using the name of the property in the object.

const {
  family: homoSapiensFamily = '',
  species: homoSapiensSpecies = ''
} = homoSapiens;

Here we use the same values as before but now we're creating two variables called homoSapiensFamily and homoSapiensSpecies. Much more meaningful, right?

If you got the idea by now I believe you noticed you can go crazy about it and destructure real nested objects.

const homoSapiens = {
  classs: {
    name: 'Mammalia',
    super: {
      name: 'Tetrapoda'
    },
    sub: {
      name: 'Theria'
    }
  },
  species: 'H. sapiens'
};

const {
  classs: {
    super: {
      name: homoSapiensSuperClass = ''
    }
  }
} = homoSapiens;

Here we created a variable named homoSapiensSuperClass which will have the value of Tetrapoda.

What if we try to destructure a nested object and at some point the property we specified does not exist?

// considering the previous homoSapiens object

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    }
  }
} = homoSapiens;

If you try this you'll see that we get an error that says:

Uncaught TypeError: Cannot destructure property `name` of 'undefined' or 'null'.

This happens because in the source object we don't really have an object called infra under the classs object. Thus, the homoSapiensInfraClass variable is never defined.

To avoid this you can set a default value for each property you are going through while destructuring an object. In this specific case, you would want to make sure that the default value for that infra property is an object, so you can keep destructuring it in case that property does not exist.

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    } = {}
  } = {}
} = homoSapiens;

This way even though the homoSapiens object does not contain a property called infra you will still end up defining a variable called homoSapiensInfraClass which will receive the default value you set or undefined if you did not set a default value for it.

It also works with arrays!

The idea is basically the same with arrays, the difference, apart from the fact that syntax is a bit different, is that you cannot consider property names and instead will do things based on the order of items in the array.

const [first, second ] = ['a', 'b'];
// first will be 'a' and second will be 'b'

// you can also set default values
const [safeFirst = 'a', safeSecond = 'b'] = ['a']
// safeSecond here will have a value of 'b'

It also works in a function signature!

You can also do destructuring in a function signature in order to expose only specific properties of the object being received to the function context.

const homoSapiens = {
  kingdom: 'Animalia',
  classs: 'Mammalia',
  family: 'Hominidae',
  genus: 'Homo',
  species: 'H. sapiens'
}

function logSpeciesInfo ({ species = '', kingdom = '', classs = '' }) {
  console.log(`The species ${species} belongs to the ${kingdom} kingdom and ${classs} class.' );
}

logSpeciesInfo(homoSapiens);
// Logs "The species H. sapiens belongs to the Animalia kingdom and Mammalia class."

Any other property from the object that is not specified in the function header does not exist within the function body.

Can I do destructuring everywhere?

There is a really cool table in the Destructuring assignment page of MDN web docs that shows the current browser compatibility of this syntax. You can see that it is widely supported so compatibility shouldn't be an issue for you, unless...IE is a thing for you :)

Quiz

With what you learned in this post, are you able to use the power of destructuring to swap values of two variables without using any extra variable? Try before looking at comments ;)

Let me know in the comments! And if you have any other use cases for destructuring make sure to share that as well :D

Thanks for reading!

Why you should already be using CSS Grid

Will Soares — Tue, 03 Jul 2018 00:33:25 +0000

Hey everyone!

In this post I'm going to share with you some of the things I gathered about CSS Grid and how you can use it to build cleaner markups and consequently increase maintainability in your projects, to mention one of its many advantages.

CSS Grid is one of those many shiny technologies that seem to appear out of the blue and gain popularity really fast, which makes us think that is probably another hype thing. As we are used to that kind of thing in the web development world, most of us end up being skeptical about trying something new and seeing how things really work with that new technology.

For me, this happened with CSS Grid. In my case, I gave it a shot when I first heard about it and watched videos from Wes Bos' CSS Grid course. I remember finding it really interesting and daunting at the same time since it changes your mindset when building layouts. Also, I had the idea of not being able to use it in real-world projects because of its current support. If I wanted to use it I would have to add a lot of backward compatibility code, so that was a no-go for me.

It turns out I needed a little more research on the subject and I'm glad I did. This post is greatly inspired in this talk by Morten Rand-Hendriksen.

Some history

CSS Grid, as any other specification officially approved and shipped in browsers, has been through a lot of discussion and implementations since it was first presented to W3C by a Microsoft team in 2012. As the idea of a grid layout had been floating around for more than 20 years already, that wasn't the first specification to be proposed (more info here).

The difference was that, in this time, the Microsoft team also presented a real implementation of the grid layout. That helped at evaluating the proposal in a more realistic way. Also, several people started playing with it and spreading the word about it, so many real examples of a grid layout started to come out. That, for me, was one of the things that really helped CSS Grid to quickly gain popularity in the community, which is amazing!

Since then, the specification has changed a lot and most of the work that was done before that time was also taken into consideration. With that, a lot of additions and clean-ups were made to the initial proposal.

With such enthusiasm about the new cool kid on the block, by the end of the first semester of 2017, Chrome, Firefox, Opera, and Safari had shipped support for CSS Grid. Take a look at its current support:

The support mentioned for Opera is for Opera Mobile only.

Interestingly, Microsoft was the last company to ship the updated version of grid layout in Edge. As for IE10 and IE11, the supported grid layout version is still the old one and it looks like those are not getting updated.

CSS Grid lingo

As with any other technology, it is a good starting point to get to know the lingo related to it. In this section, I'll list the basic concepts you should have in mind before start playing with CSS Grid.

Container

This is the root of your grid layout and wraps up all the other items inside your grid. In order to define a grid container, you basically set the display property to grid in the element you want to be your grid container.

Even though you will not see any difference after applying that rule, now you have a grid container you can start laying items on.

Item

A grid item is every direct child of your grid container. In the example above you can say that all the span elements are items of the grid container you created.

Tracks

Grid tracks refer to the columns and rows in a layout. Those two concepts are not new for someone that has been building grid-based layouts, so let's see how to define them in CSS Grid.

In the example above you see that we are using the properties grid-template-columns and grid-template-rows to define how we want our columns and rows to appear in our layout. Each value passed for those properties represent the size of the columns and rows we are creating.

For this example, we are defining 3 columns and 1 row, being that the first and last columns will have a width of 1fr (explained in the next section) and the middle one will have the double of that: 2fr. For the rows, we are specifically defining only 1 row, but as there are more items to be placed in the grid, new rows are automatically created for us. The first row has a fixed height of 10rem and all the remaining rows will have equal height which is equivalent to 1fr.

Fraction unit

The fraction unit or fr, represents parts of the available space you have in your column or row. If you look back at the example above you'll see that for the first row we are creating a fixed height and then for each of the remaining ones we are letting them take one fraction of the space available. Basically, the height that was left in the container will be equally split into the number of rows we still have in the grid.

It is interesting to notice here that you not always have to define all of your columns or rows manually. In situations you have a big number of tracks, you can use the repeat method to create track patterns, as in the example below.

Here we are creating a pattern for the columns. Every two columns in our grid will have a width of 1fr for the first column and 2fr for the second. The same works for rows as well. I recommend you to open that example in codepen and play with more combinations :)

Lines

You can also position your items based on linen numbers. When you create a CSS Grid layout you have the option to specify in which line your item will start and end. See the example below.

You can notice that in the example we are using line numbers to specify where several items will be positioned. For instance, the second span in the grid will be horizontally positioned from line 2 to line 5 (you can use the red lines as a reference, starting from 1 and from left to right). Also, the same span will be vertically positioned from line 1 to 3 (start counting from top to bottom). Due to that, the third span will be automatically repositioned, since the second span is occupying the space previously reserved to span #3. Also, notice that you can use the shorthand property grid-column or grid-row to set the starting and ending line of an element in the same rule. Check how the spans #5 and #6 are being positioned and play with it :)

Cell

In a grid layout, a cell is every individual space where you can lay your items on. Basically, you can lay an item in a specific cell or throughout a group of cells, by specifying the starting and ending point of an item (as we did in the previous section) or using a grid area.

Area

A grid area defines a named block that can be used to lay items in a grid template area. Let's see exactly how that works.

In this example we are defining a grid template area with the following blocks: header, sidebar, main, and footer. When you use the grid-template-area you can specify the rows and columns you want by using the names you used for each block.

After defining the template area you have to link those block names to each element in your markup. We do that by using the grid-area property, as shown in the example above. Once you assigned each block to a specific location in the template area, you can play around with moving the lines in the grid-template-area property and see that you don't have to reorder your markup in order to move items around. It simply works!

One interesting thing is that if you want to add some empty blocks in your template area you can do that by using a dot in the place of any block name. See example below.

Gap

It is generally good to provide some gap between your items. You could do that using margins around your items but in CSS Grid there is a much better way to do that. Using the grid-gap property.

CSS Grid vs Flexbox

After a bunch of new concepts and lingo in only one post, you may be wondering now what are the real advantages of CSS Grid over the previous approaches we have and are familiar with, like Flexbox.

One important difference between these two technologies is that with Flexbox you have to work with one-dimensional layouts, so you always need to think about your layout either as rows or columns at a specific time. With CSS Grid, you can work in a two-dimensional way, which means you can work with columns and rows at the same time! :)

For me, the main reason for such enthusiasm about CSS Grid is that now we can write much cleaner markups. A markup that truly tells you what are the real elements that you see in the page and does not make you create extra divs or whichever other HTML tags you might have used for the sole purpose of layout.

Take a look at these two examples created using CSS Grid and Flexbox, respectively.

CSS Grid

Flexbox

If you look at the HTML and CSS for those two examples, you will notice that the markup for Flexbox does not look as appealing as the one for CSS Grid. You can see that extra blocks had to be created in order to position more complicated parts of the layout. As for CSS Grid, no extra blocks were needed and all the markup you have is real content the user sees in the page.

Conclusion

So if you still have that question "Why CSS Grid?", here are a few points I would like to list for you:

cleaner markups
increase of maintainability and flexibility for your layouts
easy to achieve more complicated layouts as you can work with columns and rows simultaneously
the current support is at 84.9% of the global website traffic, so it is definitely okay. You will not need a lot of fallbacks (depending on the project requirements of course).

That's it for now! Thanks for reading and let me know what you think about CSS Grid and whether you are already using it in production or not :)

Useful links

How to integrate Spotify and Genius API to easily crawl song lyrics with Python

Will Soares — Sun, 08 Apr 2018 21:34:51 +0000

This post was originally published on my personal blog.

Hello, everyone!

For this post, I decided to talk about a Python script I wrote last year, which I am still using it very often nowadays.

This was one of those moments that you have an idea and you get really excited about it but have no clue on whether that would work as you expect or not. I started basically with some knowledge of Python and knowing which API I was going to use to accomplish that idea.

The goal was to implement a script with which I could fetch the lyrics for the song currently playing on Spotify. So, at first, I knew I was going to need something that would provide me with an interface I could use to connect that script with the Spotify service running on my computer. Also, as I was a loyal user of Genius.com I knew that they have a large public API I could get some help from.

For the long-term Spotify users, you probably remember when Spotify had the functionality to show the song lyrics within the desktop app, right? Good old times. I still don't understand why that was removed but all we got now is the Behind the Lyrics feature, which shows some ~~useless~~ information and small snippets of the lyrics for the song we are listening (it seems it is available only on mobile devices).

From here I will start to tear apart the script following the order it was implemented. If you want to check the full script before continuing, you can go to this repository on Github. There, you will also have instructions on how to run it, but keep in mind that I will guide you through that in this post as well :)

Connecting to Spotify

This was one of the things I had no clue how to do it so I had to do some googling to accomplish that. Luckily, this answer by jooon on Stackoverflow saved me a lot of time, so kudos to you sir.

Basically, as I am a Linux user, the Spotify client I use automatically creates a D-Bus interface called MPRIS - Media Player Remote Interfacing Specification.

From the D-Bus specifications page, the D-Bus API is commonly used to implement a service which will be consumed by multiple client programs. This kind of message system is designed for two specific cases: communication between desktop applications in the same desktop session and communication between the desktop session and the operating system, which includes any system processes (this is our case).

A D-Bus system has several layers and one of them is formed by wrapper libraries, which is the kind of tool we are using here. In order for the Python script to communicate with the Spotify desktop application, we will use the dbus-python wrapper library or technically called a binding for the libdbus library. After having that library installed in your system you can use the dbus module to create a SessionBus which we will use to communicate with Spotify.

If you are on Ubuntu and, for any reason, you do not have the dbus-python installed, you can install it by running: apt-get install python-dbus

import dbus

def get_current_song_info():
    # kudos to jooon from this stackoverflow question http://stackoverflow.com/a/33923095
    session_bus = dbus.SessionBus()
    spotify_bus = session_bus.get_object('org.mpris.MediaPlayer2.spotify',
                                         '/org/mpris/MediaPlayer2')
    spotify_properties = dbus.Interface(spotify_bus,
                                        'org.freedesktop.DBus.Properties')
    metadata = spotify_properties.Get('org.mpris.MediaPlayer2.Player', 'Metadata')

    return {'artist': metadata['xesam:artist'][0], 'title': metadata['xesam:title']}

In the code above we a simply creating a SessionBus instance and using that to create an Interface with the Spotify application.

From that connection, we can extract the metadata for that session, which will provide us with lots of info about the current Spotify session, including the name of the artist and song currently playing, which is what we need. Notice that this method returns a dictionary with two keys, artist and title.

Connecting to Genius API

Since we already have the name of artist and song we want to search, we can go ahead and make a request to the Genius API.

For that, we need an access token, which we can get by creating a Genius API client. First, we have to sign up for an account (or sign in if you already have an account on Genius). After that, you can go to the Genius API documentation page in order to manage your clients. The process to create a new client is pretty straightforward and after that, you will finally get your access token.

Once you have your access token we can implement the next method.

import requests

def request_song_info(song_title, artist_name):
    base_url = 'https://api.genius.com'
    headers = {'Authorization': 'Bearer ' + 'INSERT YOUR TOKEN HERE'}
    search_url = base_url + '/search'
    data = {'q': song_title + ' ' + artist_name}
    response = requests.get(search_url, data=data, headers=headers)

    return response

This method receives the song and artist name we extracted from the Spotify session and sends a request to the Genius API. Notice we are using the requests HTTP library to send a GET request.

Extracting the song lyrics

If everything works fine, you will have now a response object that contains tons of information about all the matches that were found in the API.

Due to the object shape we got from the request, we will have to iterate over the hits key in that object and look for an exact match using the artist_name variable.

# Search for matches in the request response
    response = request_song_info(song_title, artist_name)
    json = response.json()
    remote_song_info = None

    for hit in json['response']['hits']:
        if artist_name.lower() in hit['result']['primary_artist']['name'].lower():
            remote_song_info = hit
            break

If we successfully have a match in that object, it means that the song we look for is available in the API and is now available in the remote_song_info variable.

Even though we have all of that information about a specific song, guess what, we do not have the LYRICS!! Exactly, the Genius API (as for the date this script was implemented) does not directly offer you the lyrics for a song. There is no endpoint to search for lyrics, as well.

In order to bypass that situation, we would have to, in fact, crawl the web page in which that song is available. In the remote_song_info, you will have the URL for that song.

# Extract lyrics from URL if the song was found
if remote_song_info:
    song_url = remote_song_info['result']['url']

From here we basically have to make our script access that page and crawl the lyrics for us.

from bs4 import BeautifulSoup

def scrap_song_url(url):
    page = requests.get(url)
    html = BeautifulSoup(page.text, 'html.parser')
    lyrics = html.find('div', class_='lyrics').get_text()

    return lyrics

This method receives the song URL and uses the Beautiful Soup library to pull data from HTML files in an easier way.

During the implementation of this method, I had to analyze what was the structure for the HTML returned in order to figure out what I could use to extract only the text that represents the lyrics of the song. I ended up using the div that contains the class lyrics, which holds all the song lyrics. I hope they will never change the markup for that :)

We finally have the lyrics to print out to the console. Tha cool thing is that during the crawling process each line in the lyrics automatically receives a new line escape sequence (\n). With that, we get a good looking structure in the terminal.

How to use the Github repository

All the methods mentioned in this post are available in this repository.

In order to use it locally, you can simply clone the repository, add your access token to the token.txt file and from within the repo folder you can run the command below to get the lyrics for a song. Remember to open Spotify and play something :)

python get-lyric.py

The script should work with both Python 2.7 and Python 3. However, you should check which version you are using and which one you used to install the dependencies.

From the repository, you get some extra functionalities, such as:

Automatically have the song lyrics available in the lyric-view.txt file.
Search for any song by passing the artist and song names (this mode does not interact with Spotify so there is no need to open it). Check the README.md.

One last thing I would like to notice is that you don't always have to be inside the folder to get the lyrics, if you create an alias for that command in your .bashrc file.

For me, I had to add this line to my .bashrc file.

alias lyric="python ~/repos/lyrics-crawler/get-lyric.py"

And also, I had to use an absolute path for the token.txt and lyric-view.txt files in the script code.

With that, I can simply run the command lyric from any directory and get the lyrics for the song playing via Spotify.

I hope this was a good reading for you. If you have any suggestions or features for the repository, let me know or open a Pull Request, I'll appreciate it :)

Thanks!

CSS selectors reviewed with examples

Will Soares — Sun, 25 Mar 2018 22:03:38 +0000

Have you ever find yourself struggling to use CSS selectors to style an element that is the first sibling of the nth child of an element that contains an attribute with a specific value, or something like that? Well, if you have worked with dynamic layouts you have probably been through that.

This is intended to be a quick reference for CSS selectors, attributes, and pseudo-classes, presented with examples. I wanted to do this in a private document for personal use since there are tons of CSS cheat sheets out there. But, maybe I will get to put it in a different way, which can be more understandable to someone out there. So, why not share it with everyone?

For this post, there are a few basic concepts you must be aware of before continuing, those being selectors (type, attribute, id, class), pseudo-classes, pseudo-elements, and combinators.

Let's get started.

Selectors

Even though CSS tutorials often consider everything we are going to talk about here as CSS selectors, it is good to point that there is a specific term for each type of selectors in a CSS stylesheet.

Type selectors

These are selectors used to match elements in the DOM, such as p, div, span, and even customized tags, like in the example below.

custom {
  border: 1px solid black;
}

p {
  color: green;
}

<custom>Custom element</custom>

<p>Paragraph</p>

Class selectors

These are used to select elements in the DOM that have a specific class as an attribute. For this, you have to add a . to the beginning of the name you want to match.

.bordered {
  border: 1px solid red;
}

<div class="bordered">
    Bordered element.
</div>

Attribute selectors

These will match elements that have a specific attribute associated with it. This can be used to match both individual attributes and attributes associated with their values. For this type of selector, you must surround the attribute name with square brackets. Check the example below.

[name] {
  background-color: green;
}

[name="age"] {
  background-color: red;
}

<input type="text" name="name" placeholder="Your name" />
<input type="number" name="age" placeholder="Your age" />

In this example, you can notice that initially, we are creating a CSS rule for all the elements that have an attribute of name. This will give you the two inputs showed in your HTML code since both of them have the attribute. However, after that, we are creating a more specific rule that tells the browser to use a red background for elements that have an attribute of name with a value of age, which will give you the last input.

You can also use different operators to match values, other than using =. Check out them below.

`~=`

This operator matches a whitespace-separated list of words, in which one of the words is exactly the value passed.

[class~="bordered"] {
  border: 3px solid green;
}

<button class="btn bordered">Click Here</button>

`|=`

This operator matches elements with attribute value being the exact string passed or starting with the string followed by -.

[class|="primary"] {
  color: green;
}

<button class="primary-btn">Click Here</button>
<p class="primary">Paragraph</p>

`^=`

This operator matches elements with attribute value starting with the string passed.

[class^="call"] {
  color: green;
}

<button class="caller">Caller</button>
<button class="called">Called</button>
<button class="calling">Calling</button>

`$=`

This operator matches an element with attribute value ending with the string passed.

[class$="ed"] {
  background-color: pink;
}

<div class="required">
    <p>Required</p>
</div>
<div class="validated">
    <p>Validated</p>
</div>

`*=`

This operator matches an element with attribute value containing the string passed, at least once.

[class*="prim"] {
  background-color: pink;
}

<button class="btn-primary">Click here</button>

PS.: in order to perform those matches in a case-insensitive way, you can append an i to the rule, e.g: [attr="value" i].

ID selectors

These will match elements with a specific identifier associated with it. For this type of selector, you have to use a # before the ID you want to match. Check the example below.

#d123 {
  font-weight: bold;
}

<div>block without ID</div>
<div id="d123">block with ID of d123</div>

Universal selector

This one is used to match all the elements in the page. It can be used to reset margins and paddings for all elements, for instance. However, it is not indicated since it can overload the rendering process of your page.

* {
  border: 1px solid yellow;
}

<ul>
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>
    <span>Item 5</span>
  </li>
</ul>

Pseudo-class

Pseudo-classes are used to match content in a more extensive way since they can refer to elements not directly represented in the DOM, in almost all cases. These type of selectors usually refer to the state of an element. Due to that, they can be dynamically accessed, based on user interaction. Good examples are the :link and :visited pseudo-classes, which are used to style links based on whether they have been visited or not. In order to use a pseudo-class, you have to add a : to the beginning of the class name. As these selectors are hard to represent statically in this post, I think it is better to put them inside a JSFiddle so you can play a little with them if you want. There you can simply uncomment the part of CSS and HTML you want and see the results in the right side tab. Click here to check examples for the selectors listed below (some of them are explained below the table, some are just too intuitive and do not need to be clarified).

:focus match elements that are currently focused, meaning when a user clicks to edit an input or textarea element, for instance.
:active match the moment when users click an element. The style will be applied for as long as a user holds the click over an element.
:hover match elements in which the mouse is currently over.
:empty match elements that do not have any child.
:valid match inputs that hold legal values according to each input type. One example is when you have an input for email values, so you can apply a style for when a user enters a valid email. Note that an input with no value set is considered being in a valid state.
:checked match checkbox inputs that are currently checked.
:link match unvisited links.
:in-range match input elements that hold values within a specific range.
:not(selector) match every element that is not the one passed as a parameter.
:first-child match the first child inside of a specific parent. For instance, if you do p:first-child that will match the first paragraph inside of its parent.
:first-of-type match the first element of a given type. For instance, if you go simply :first-of-type that will match every element that is the first of its type inside a specific parent.
:lang(language) match elements that have an attribute of lang with a specific value.
:nth-child(n) match the element that is the nth element inside of a specific parent. For these rules in which you can specify an integer value for the index, you can pass something like 2n to get elements in every two index position, for instance.
:nth-last-child(n) same as nth-child but start counting from the end.
:nth-of-type(n) match the element that is the nth element of a given type inside a specific parent.
:nth-last-of-type(n) same as nth-of-type but start counting from the end.
:only-of-type match the element that is the only element of its type inside a specific parent. For instance, if you do p:only-of-type it will match the only existing paragraph, if there are more than one it will not match anything.
:only-child match the element that is the only child of a specific parent. If there are more than one children within that parent, nothing will be matched.
:optional match input elements with no required attribute.
:read-only match elements with a read-only attribute.
:read-write match elements with no read-only attribute.
:required match elements with a required attribute.
:root match the document's root element. This selector is usually used to set global CSS variables.

Pseudo-element

Pseudo-elements can be used to refer to content that does not exist in the source code, i.e, content that is generated afterward. Let's take a look at them below. If you want to check examples for this section, check this fiddle.

::after and ::before used to add and style elements that are respectively the last and first child of the selected element. This is usually used to add tooltips or icons to labels, inputs, etc.
::first-letter select the first letter of a text inside an element.
::first-line select the first line of a text inside an element.
::selection select the current text selected by the user.

Combinators

Combinators are, in my opinion, the most interesting part of CSS selectors. At this point, you will be able to gather everything you learned so far and associate it with combinators to get more complex CSS rules. Let's check the CSS combinators available. Check the examples here.

Group of selectors , This can be used when you want to apply the same style to several elements, so instead of creating different blocks for each one you can simply list them using , and write the rules once.

h1, h2, h3, h4, h5, h6 {
  margin: 1rem;
  text-decoration: underline;
}

The rules above apply margin and a text-decoration to all heading tags at once.

Descendant selector A blank space can be used to select elements that are within (descendant) a specific block.

.container .col {
  padding: .5rem 1rem;
}

Above we are adding padding to all the elements with the class col that are inside an element with the class container

Child selector > This one selects immediate children of a specific element. It differs from the blank space combinator because with it you cannot select grandchildren of a given parent.

.container > ul {
  border: 1px solid black;
}

Above we select all the ul elements that are immediate children of the .container block.

Adjacent sibling selector + This combinator helps to select the adjacent sibling of a given element. Check the example below.

.item2 + li {
  font-size: 2rem;
}

Here we are applying a font size of 2rem to the li that is the immediate sibling of the .item2 element. Note that this and the next combinator only look down the tree.

General sibling selector ~ This combinator gives you all the siblings of a given element.

.item2 ~ li {
  color: red;
}

Here we are selecting all the li elements that are sibling of the .item2 element, again, looking down the tree.

And that's it for now! I hope this quick review helped you somehow :)

PS.: this is a living document, if you have any comments, tips or know about missing selectors, let me know in the comments and I will update it.

How to build an image carousel with React

Will Soares — Tue, 13 Feb 2018 06:24:21 +0000

Hey everyone!

For this post, I decided to work with something I'm currently passionate about, React.

Recently, I'm having the opportunity to work a lot with React and as its advantages become clearer to me, I'm more and more willing to dive into this path of learning to build user interfaces powered with the library.

As you may know, React is a JavaScript library with which you can build complex interactive UIs following a component-based approach. It uses techniques and concepts that focus on making the interaction with the interface a more efficient task. By using a concept called virtual Dom, which is a lightweight representation of the real DOM, React makes interaction with the interface a really fast task, since for every change it compares the virtual DOM to the real DOM and updates only the portion that has changed.

Alright, so that is only one of the reasons why React is much more powerful than other libraries when you use it to build UIs. As in this post I'll focus on a real example of using React, you can look at the documentation if you find yourself lost while reading the code or if you don't know any concepts mentioned here.

Component-based thinking

One of the first things to do when you start creating a UI, is to think about it as a set of components that will wrap parts of your interface and then work together to create a good user experience, that is one of the things React does to you, it changes the way you organize your apps.

If you look at the header image for this post you'll get the idea of what we are going to build here. It looks really simple, right? And it, in fact, can be simple since we are using React :)

You should be aware that there are tons of ways of doing an image carousel in React, regarding the way you organize components and even how many components you create. For this example I decided to create three basic components, the first, the Carousel component, will be the wrapper for the entire layout and logic, the second, ImageSlide component, will simply render the image slides for the carousel, and the third will be the Arrow component, which will act as both the right and left arrows for the carousel transition. So, with that, you will have an instance of the ImageSlide for each image you give as the input for the carousel and two instances of the Arrow component, one for each arrow.

First things first, let's build the Carousel component.

The `Carousel` component

Before anything, you have to tell React in which part of your HTML file you want it to render your component.

In your HTML file, add this:

<div id="container">
  <!-- Your component will be rendered here. -->
</div>

In your JavaScript file, enter this:

ReactDOM.render(
  <Carousel />,
  document.getElementById('container')
);

As you see, we are binding the div container to the Carousel component, so React will use that placeholder to render your entire component.

Notice that you have to have the React and ReactDOM libraries available for you in your script. If you are trying this out in some sort of Code Playground such as CodePen or JsFiddle you can simply add the relevant scripts in the settings section. However, if you have a setup for React development on your local machine you probably know what to do :)

Now it's time to set up our Carousel component.

class Carousel extends React.Component {
  render () {
    return (
      <div className="carousel"></div>
    );
  }
}

Here we are creating a simple wrapper class that will be responsible to handle all the logic you'll have in your interface. The render method of this class will be responsible to return the markup for your entire layout, so we'll add all the other components to the div block being returned.

You should notice that here we are extending the React.Component class in order to declare that this specific class is going to be a React component. It is important to point that this is the ES6 equivalent of the React.createClass method. The former is just a "syntactic sugar" provided in the ES6 set of features. With that, you'll have several differences while implementing your component methods. Check this well written post by Todd Motto to see the details of each option.

As we already have the setup for the Carousel class, we should start looking at what we are going to render inside of it.

The `ImageSlide` component

This is going to be a really simple component, with no logic attached to it. This is a common pattern while building components in React and these types are known as stateless or functional components. The reason for that is due to the inexistence of a logic to control the state of those components, since they do not have a declared state. They end up being simply JavaScript functions that receive parameters (or not) and return a markup built based upon those input values (or not).

Let's see what the ImageSlide component looks like.

const ImageSlide = ({ url }) => {
  const styles = {
    backgroundImage: `url(${url})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  };

  return (
    <div className="image-slide" style={styles}></div>
  );
}

You can see that there is not much to do with this component. It should basically receive the image URL and create the required markup so it will act as one of the slides in our carousel.

ImageSlide is a function that receives a String, which is the image URL, creates an object that will describe how the component should be styled and returns the markup filled with the info we provided. As mentioned, you will have one instance of this component for each URL you provide in the array of images.

Regarding the style of this component, you can see that the image is being set as its background. However, it is up to you to style your component as you want, it won't affect the purpose of this post.

So after creating the markup for the image slides, we should add it to the render method in the Carousel component.

class Carousel extends React.Component {
  render () {
    return (
      <div className="carousel">
        <ImageSlide url={ imgUrl } />
      </div>
    );
  }
}

The URL is passed to the ImageSlide component as a property in the props object. Later in this post, we'll see how to properly get the image URL form the array of images used as a reference.

The `Arrow` component

const Arrow = ({ direction, clickFunction, glyph }) => (
  <div
    className={ `slide-arrow ${direction}` }
    onClick={ clickFunction }>
    { glyph }
  </div>
);

This component is even simpler since we don't have to setup anything before returning its markup. I decided to use three properties here because this component is being used both for the left arrow and the right one. Due to that, its implementation should be a little more generic. The direction property will tell the component which class to use for each instance (left or right). The clickFunction describes what should happen when each arrow is clicked and finally the glyph component refers to what will be the content of this component, that means what will be rendered.

With that, let's add both arrows to the Carousel component.

class Carousel extends React.Component {
  render () {
    return (
      <div className="carousel">
        <Arrow
          direction="left"
          clickFunction={ this.previousSlide }
          glyph="&#9664;" />

        <ImageSlide url={ imgUrl } />

        <Arrow
          direction="right"
          clickFunction={ this.nextSlide }
          glyph="&#9654;" />
      </div>
    );
  }
}

From here we can have a better idea of the final markup we'll have for our carousel.

Next, we should go back to the Carousel component since there are still several things to finish.

You notice that we are passing two different functions to the Arrows components. Those are responsible for handling the transition of slides. But how do they do that?

First, we should look at the states we need to create in order to tell the wrapper component which image it should render at each time. So, let's set up the constructor function so we can create the initial state for the Carousel component.

class Carousel extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      currentImageIndex: 0
    };
  }

  render () {...}
}

The first thing to do within the constructor function is to call super() passing it the props as a parameter, in case you want to access properties through the this keyword within this context. For now, it is optional to send the props object since we are not using props within the constructor.

Initially, we are setting a state called currentImageIndex set to 0. This is going to hold the current index for the image that has to be rendered on the screen at each time. Here we are starting from the first image in the images array.

This state is going to be used to get the correct URL passed to the ImageSlide component. Let's check how to do that.

class Carousel extends React.Component {
  constructor (props) {...}

  render () {
    return (
      <div className="carousel">
        <Arrow .../>

        <ImageSlide url={ imgUrls[this.state.currentImageIndex] } />

        <Arrow .../>
      </div>
    );
  }
}

After this, all we have to do is to tell the component how to update that state according to user interaction. That work is related to our Arrow components, and since we are already passing two functions (previousSlide and nextSlide) as properties, we now have to implement them.

You will notice that these two functions are analogous. All they do is to update the currentImageIndex state by one, either by adding or removing from it. There is only one detail to point here. There will be situations in which we will have to reset the value for the current index since it will at some point reach the maximum or the minimum index for the array of images. Therefore, it is important to check the length of the array in order to know whether we should reset the index or not.

class Carousel extends React.Component {
  constructor (props) {...}

  previousSlide () {
    const lastIndex = imgUrls.length - 1;
    const { currentImageIndex } = this.state;
    const shouldResetIndex = currentImageIndex === 0;
    const index =  shouldResetIndex ? lastIndex : currentImageIndex - 1;

    this.setState({
      currentImageIndex: index
    });
  }

  nextSlide () {
    const lastIndex = imgUrls.length - 1;
    const { currentImageIndex } = this.state;
    const shouldResetIndex = currentImageIndex === lastIndex;
    const index =  shouldResetIndex ? 0 : currentImageIndex + 1;

    this.setState({
      currentImageIndex: index
    });
  }

  render () {...}
}

For the previousSlide function you can notice that the reset condition is set to be the case in which the currentImageIndex state is 0, which means that if the index is pointing to the first image in the array and then the user clicks the left arrow, the index should then point to the last image in the array (imgUrls.length - 1).

The nextSlide does quite the same, the difference is that if the index is currently pointing at the last image, then it should be reset to point at the first (index = 0).

In all the remaining situations both methods simply change the mentioned state by one in order to get the previous or next image.

At last, there is one important thing to notice here. In order to update states in a React component, we have to use the setState method. This method is responsible for telling React that it should update that component and its children. This is the primary way of updating your user interface.

Therefore, whenever you click on the left or right arrow, you are basically updating the state of the currentImageIndex and consequently updating your interface with the new image slide.

However, in order to access the this keyword within those two functions, you have to properly bind the context to them. A common way to do that is in the component's constructor method.

class Carousel extends React.Component {
  constructor (props) {
    ...

    this.nextSlide = this.nextSlide.bind(this);
    this.previousSlide = this.previousSlide.bind(this);
  }

  previousSlide () {...}

  nextSlide () {...}

  render () {...}
}

Finally, we have implemented all the logic for our carousel component. You can take a look at the working demo and the full version of the code in this codepen.

PS1.: as it was not the purpose of the post, I omitted the styles used for the components, thus if you are interested in that you should take a look at the codepen mentioned above.

PS2.: I still want to add some animation to the slides transition, but I want to do it properly in the React way, so that will probably be a new post :)

Thanks for reading, folks!

What I learned from implementing a Sudoku solver in Python

Will Soares — Mon, 05 Feb 2018 02:49:56 +0000

Hey there!

For those who like storytelling, this post will probably be a good reading. However, if you are not into storytelling or just here for the technical part, jump to the Show me the code section.

For this post, I decided to write about the journey I took when I decided to implement a sudoku solver in Python (I hope I remember all the details and also what my legacy code is doing).

The language I chose to solve this problem is, in fact, one of the main reasons why I'm writing this post. Without it, maybe this whole story wouldn't be a journey worth telling.

Firstly, I'll explain in which context I decided to implement a solution for the Sudoku game. Of course, there are many things I usually think that I can solve with code, but those things rarely end up being implemented. So why was this case different from the others?

Well, last year I graduated in Computer Science and luckily that was the same year that the Department of Education in Brazil was evaluating all the undergraduate courses in public and private universities. It was a test called Enade, which is applied every three* years for each field of study.

As I was already a senior student, I had to take the test in order to complete my degree (that is a law now in Brazil). I was pretty comfortable in doing it (I just did not agree with it being a duty) and I thought that with a quick review on some CS related concepts, I was going to be fine. Well...

It is well known that this test gathers topics from the entire course (4 years, in general) and try to formulate questions, in which you are going to put things together in order to solve them. I was aware that I was going to face both pretty basic problems and really hard ones (those that you usually skip and come back at the end of the test just to be sure that you really have no idea how to solve it). It turns out that there was this one question that I thought it would be straightforward to answer but then it became the one I was going to skip, for sure.

The fact is that when I came back to the question I thought I was solving it but then when I finished writing a pseudolanguage solution I realized that there was a bug in my solution and I had no time to fix it :(

I was intrigued by that question, for real! So I decided I was going to implement it at home.

Why don't we move to the technical details right away?

Show me the code! (almost there)

In the mentioned question, you would have to write an algorithm that applied the concepts of recursive programming and backtracking to solve a sudoku game. For that, you could assume that some of the required functions were already implemented, for instance, the function responsible for telling you if a specific number is allowed in a specific column and row (of course it had to be the easiest one, not helping that much here, right?).

Basically, you would have as an input an array of pre-populated positions and a common number (or any other allowed character) to represent the positions your algorithm will have to fill out.

And that was the situation the question was providing you with. The way you were going to reach a solution would be up to you, regarding programming language and general logic (you could even use a pseudolanguage). The requirements were that you implement a recursive solution with a backtracking behavior.

If you don't remember or have never heard about those two concepts, here is a quick review.

Recursive programming

When you apply a recursive approach to solve a problem you are basically tearing apart the functionality of your program into smaller programs that solve the same problem. In the end, what you have to do is to reuse (that's why it's called recursive) the smaller function you created to solve your problem in its entirety.

I know, the previous paragraph was not enough to make the concept clear (I myself didn't get the idea at the first or second, maybe the third attempt?).

Let me try again, putting it in a simpler way, a recursive program is the one that tries to solve a problem by calling itself. The thing is that in that second call, the input will be a portion of the original input, so it can solve smaller problems and finally put everything together to give you the final solution.

Well, can you imagine how confusing it is to keep track of what a function is doing if it keeps calling itself again and again? That's not fun to do, trust me.

The cool thing here is that you don't really have to do that in order to understand the concept. It is enough if you are sure that the recursive function you implemented to solve a small portion of your problem is giving you the correct output. If it helps you, just accept that this is some sort of magic :)

Maybe, by now, you are wondering how is this thing going to stop if it keeps calling itself?

Well, here comes an important concept in recursive programming: the base case - this is the situation in which your program arrived at, let's say, the smallest portion of your program and is able to return a value instead of a call to the same function. That is when your program starts returning values so it can reach a final solution.

Let's go to a real example.

def sum (n):                           def sumR (n):
    res = 0                                if n == 1:
    for i in range(1, n+1):                    return 1
        res = res + i                      else:
                                               return n + sumR(n-1)
    return res

Both of the functions above are responsible for summing up to a given number and returning the total value. The difference is that on the left side, you have an iterative function (the "traditional" way of solving things) and on the right side it is a recursive version of it.

Notice that in the recursive method the function sumR is called within itself, but with an input of n-1. What is happening here? This is the magic part I mentioned.

Let's imagine that the input for the sumR function is 3, so n = 3.

In the first call, since 3 is not equal to 1, the program will execute the else block:

return 3 + sumR(3 - 1)

From here the program is going to enter in a new iteration and a new level in the stack of calls, but at this time the input will be 3 - 1, which is 2.

Again, 2 is not equal to 1 so the else block will be executed again and now the input for sumR will be 2 - 1, which is 1.

Oh hey, now the if block will be executed since the input is equal to 1. So what happens here is that the same function is not going to be executed again, instead, the value 1 will be returned.

With that value returned, it will be used in the previous call which was:

return 2 + sumR(2 -1), equivalent to return 2 + 1, which is 3

Now we have one more level solved and the value obtained will be used in the first recursive call to sumR, which was:

return 3 + sumR(3 - 1), equivalent to return 3 + 3, which is 6.

And that is the final summation of the numbers from 1 to 3.

Did you notice how exhausting it is to keep track of that even for a small input? If not, try to do the same thing for an input of 5 or 10 :)

After understanding how recursion works, if you wanna keep practicing it, this quiz is a good starting point. It might not be that easy at the beginning but once you get it, it's like magic!

Backtracking

This concept is also important to have in mind before reading the solution presented in this post. The idea here is simply to look for a solution in a range of possible candidates by trying each one of them and then discarding it at the first sign of an incorrect path.

It looks like a dumb way to solve things, but that's it. It recursively tries all the possible solutions until it finds the one. Imagine that the program is going through all the branches one at a time and then coming back, in regret, because that was the wrong path and then it goes to the next one.

But it can't be that bad, right? Some solutions implement heuristics for the backtracking approach, in which the algorithm automatically refuses candidates that are obviously bad. Here is a good article on backtracking.

Show me the code! (for real) - The Naive Solution

The very first thing I thought about before diving into this adventure was to choose a language with a syntax I would be comfortable with. That was the main reason why I chose Python. I didn't want to spend time checking semicolons or curly brackets at the beginning. I was actually trying to focus only on the algorithm logic.

So here we go. Starting from scratch.

As a developer I always try to break problems in tiny pieces, implementing a solution for those pieces and then putting everything together. For this problem, I started with the most basic functions, such as the one previously mentioned: validating an input in a specific position in the array.

Just a quick recap: the input for this algorithm should be an array with some prepopulated positions, those will be the fixed numbers that cannot be changed, as in the real sudoku game.

For the input array I set this example (with 0's representing the positions to fill out):

V = [
    0, 0, 0, 2, 6, 0, 7, 0, 1,
    6, 8, 0, 0, 7, 0, 0, 9, 0,
    1, 9, 0, 0, 0, 4, 5, 0, 0,
    8, 2, 0, 1, 0, 0, 0, 4, 0,
    0, 0, 4, 6, 0, 2, 9, 0, 0,
    0, 5, 0, 0, 0, 3, 0, 2, 8,
    0, 0, 9, 3, 0, 0, 0, 7, 4,
    0, 4, 0, 0, 5, 0, 0, 3, 6,
    7, 0, 3, 0, 1, 8, 0, 0, 0
]

Here you would have lots of options as to how the shape of this array should be. I decided to use a 81 length array, due to simplicity, in my opinion. Notice I have not thought about performance issues so far :)

You could also have a (9,9) array shape, in which each item would be another array of 9 items. The nested arrays could represent either columns or rows, it is up to you.

`has_violation`

def has_violation(V, value, index):
    pos_to_check = get_positions_to_check(V, index)

    if pos_to_check:
        for i in pos_to_check:
            if V[i] == value:
                return True
        return False
    else :
        return "No index available."

This is the function responsible for checking for violations when inserting a value in a given position. It receives the array 'V' with the current state of filled positions, the value to be inserted, and the index that will be filled.

Here, I am basically using the get_positions_to_check to get all the positions that intersect vertically and horizontally with the given index. With that, the function checks if at least one of these positions has the same value as the value passed as a parameter to the has_violation function. It returns False if no violations occur, True otherwise.

`get_positions_to_check`

Be aware that this one could possibly be unpleasant for your eyes :)

def get_positions_to_check(V, i):
    positions_to_check = [i]
    before_up = i - 9
    after_down = i + 9
    before_left = i
    after_right = i + 1

    if i >= 0 and i <= 80:
        while before_up >= 0:
            positions_to_check.append(before_up)
            before_up -= 9

        while after_down <= 80:
            positions_to_check.append(after_down)
            after_down += 9

        while before_left % 9 != 0:
            before_left -= 1
            positions_to_check.append(before_left)

        while after_right % 9 != 0:
            positions_to_check.append(after_right)
            after_right += 1

        return positions_to_check

This is the implementation of the function previously mentioned. It basically checks for all the positions that intersect with a given index.

It does that by checking all the positions that are both up, down, right, and left of the specific index. Those positions are determined by a factor of 9 starting from the index received as a parameter. For instance, if the index received is 30 (showed in green in the image below), the positions in the up direction will all be located in indexes that differ from exactly 9 positions from each one.

Remember that 0's are used to represent blank positions.

In this image, the values that are above the position in green are respectively in the positions 3, 12, and 21. Since we received 30 as the index to check, we have:

3 == 30 - (9 * 3)
12 == 30 - (9 * 2)
21 == 30 - (9 * 1)

With that is easy to get the positions that are vertically intersecting the received index.

For the positions in the same row, we have to work differently. Here I'm using the fact that each row starts with a multiple of 9 as its position number. For the index received, the first position in the same row has 27 as its index (you can count in the image above). So, is easy to use that as a stopping point for the positions on the left. We can use the same logic for the positions on the right, the difference is that the multiple of 9 will be the first number in the next row, so we don't want to include that in the positions_to_check array.

You should notice that the shape of the array ended up making this step a little bit cumbersome. Probably if I have used an array with a shape of (9, 9), this step, specifically, would have been easier.

`fill_matrix`

def fill_matrix(V, ignore_pos, i = 0, direction = 'fw'):
    if i > 80:
        return True

    if i in ignore_pos:
        if direction == 'fw':
            fill_matrix(V, ignore_pos, i + 1)
        else :
            fill_matrix(V, ignore_pos, i - 1, 'bw')
    elif V[i] < 9:
        if has_violation(V, V[i] + 1, i):
            V[i] += 1
            fill_matrix(V, ignore_pos, i)
        else :
            V[i] += 1
            fill_matrix(V, ignore_pos, i + 1)
    else :
        V[i] = 0
        fill_matrix(V, ignore_pos, i - 1, 'bw')

And finally, we get to the recursive function where all the magic happens.

Here I'm using a pretty straightforward approach, which didn't have to be that simple, but it actually works pretty well for the purpose of this post.

In order to control the paths the algorithm should follow, I'm using some flags (fw and bw) here as a sign that would tell the function to keep going forward or backward, in case it finds a wrong candidate. This is exactly where the backtracking requirement comes into play.

You can easily see that for a given index i, if it is in the list of positions to ignore or if the value in that position is already the highest value possible (9), then the algorithm should backtrack since that path is not the correct one. That is what the last line of the function is doing:

fill_matrix(V, ignore_pos, i - 1, 'bw')

Probably, you have already noticed the first if statement in this function and that is exactly what you are thinking: the base case. This is the stopping point of the algorithm. It assumes that if the index has arrived at the last position without an error, it means that the sudoku was solved. Yay!

The other if statements in this function are pretty simple, you can understand it just by looking at it, of course, if you have grasped how recursive functions work.

To take a look at the entire script, you can check this gist.

So what? What's the real point in all of this?

Well, so far it felt like I was really doing a great job and was finally coming up with a Sudoku solver until I finally tested it. Guess what happened?

IT DID NOT WORK!

Yeah, all of that hard work and fancy concepts did not give me the output I was expecting and instead, it threw an ugly and large error log, like the one in the image below.

Unfortunately, as I was extremely frustrated at the moment, I didn't really see the message that says RecursionError: maximum recursion depth exceeded in comparison and ended up trying to debug the whole error log. Yes, I tried to follow what the algorithm was doing step-by-step (it was probably about 30 min doing that) until I realized that the problem was not related to the logic I was following, but with the language itself.

When I read that the problem was that the limit of recursion level was exceeded, I was like: why is that? I'm just trying to solve a simple Sudoku board!

In fact, the stack of recursive calls that the algorithm was building started to grow really big and after some research, I realized an interesting thing about Python.

    Python does not offer you Tail Recursion Elimination.

But wait, what does Tail Recursion Elimination even mean? I knew about recursive programming and I thought that was the only type of recursion I would have to write. However, I realized that what I was doing was actually a kind of recursion called tail recursion.

Tail recursion is when the last line of your recursive function is a call to itself, and there is nothing more after that. That is exactly what the fill_matrix function looks like, right?

The thing here is that the tail recursion approach is much better for saving memory space since the computer does not have to do anything else after calling the recursive function, so it can forget about all the variables in that function and even reuse that space.

The real problem with the approach used was, in fact, the language I chose to solve it with. As the requirements of the question were that I should implement a recursive algorithm, Python is not really the best option to do that.

Even though I was doing tail recursion (without knowing), Python was not really doing anything with that, because it simply does not support it (or don't know what to do with it). Due to that, the stack of calls was growing too large.

What are the solutions here? Maybe using a programming language that offers Tail Recursion Elimination (functional programming languages often offer that) or doing some trick to make it work with Python.

After all, I don't blame Python for that, it wasn't built around the idea of recursion.

Just to let you know, I got the output I wanted by simply increasing the recursion limit supported in Python. That was a really dirty and dangerous way to solve it, but I just wanted to see if my algorithm was working. Actually, there are some modules with which you can add this feature to the language. See useful links below.

This was the line I used to increase the recursion limit.

    sys.setrecursionlimit(10000)

As this post is growing as large as the stack of recursive calls of my algorithm, I want to summarise the idea I wanted to communicate. I learned the importance of knowing your language before using it to solve a specific problem. It is important to know what a language offers to you before even getting to think about applying it to a real-world problem. Imagine if that was a large project and I have spent lots of months implementing a solution just to realize later that I have a tragic limitation with a language and I would spend more time trying to work around it.

As regarding the learning experience, it was actually awesome that I used Python for this. Those are the kind of challenge that makes you learn the most.

After all, I could appreciate the Sudoku board solved and it felt like heaven.

This is the solution if you wanna make sure the algorithm works.

 4, 3, 5, 2, 6, 9, 7, 8, 1, 
 6, 8, 2, 5, 7, 1, 4, 9, 3, 
 1, 9, 7, 8, 3, 4, 5, 6, 2, 
 8, 2, 6, 1, 9, 5, 3, 4, 7, 
 3, 7, 4, 6, 8, 2, 9, 1, 5, 
 9, 5, 1, 7, 4, 3, 6, 2, 8, 
 5, 1, 9, 3, 2, 6, 8, 7, 4, 
 2, 4, 8, 9, 5, 7, 1, 3, 6, 
 7, 6, 3, 4, 1, 8, 2, 5, 9

Ps.: sorry about some references being available only in Portuguese :(

Thanks for reading, I hope you liked it. If so, let me know so I can keep writing posts like this :)

Some useful links:
StackOverflow - Does Python optimize tail recursion?
Python Tail Recursion
brauchel - tco module

Setting Up D3.js with Babel and Webpack

Will Soares — Mon, 27 Nov 2017 17:19:08 +0000

This post was originally posted on my personal blog

Hello there! This is a post I decided to write when I found myself looking for a basic setup in order to start learning D3.js. Yeah, I know, you don’t have to configure a npm package just to start playing with D3. At its simplest, you can go to blockbuilder.org and edit the provided boilerplate code to see things working. Likewise, you can simply create an index.html file, add the D3 CDN, and include a script where you have written some D3 code. Those are really great alternatives if you are just trying to create some drafts and see how D3 works. However, when we want to create a well structured project where we have to use D3 and handle external data source, for instance, it is good to start with something we can easily scale.

In fact, what truly pushed me to going for this setup was that I find it really tedious to have to open the browser and manually reload the page every time I want to see how things changed. Now, if you think about working with D3 where you are basically dealing with visual stuff as an output, can you understand how good it is to have live reloading available?

Concepts behind this setup

Enough motivational talk, let’s get into some details and concepts for this project setup. You can take a look at its Github repository and check the files as you read.

D3.js

As you may know, D3.js is a JavaScript library that uses HTML, SVG, and CSS to create visualization sets for data driven documents. You can see some amazing data visualizations created with D3 in their gallery.

Webpack and webpack-dev-server

In order to provide you with a myriad of options to scale your project, this setup comes with a basic Webpack configuration file, which you can customize as you need.
As for the live reloading option, this setup provides configuration for the webpack-dev-server package, which gives you a little Node.js Express server. That is what allows you to recompile your assets as you make changes to your files.

Babel

Another nice thing to have in a setup like this is the option to write ES6 code, which adds new features to your JavaScript, such as support for Constants and Arrow Functions, for instance.
Babel is a Javascript compiler that allows you to write next generation Javascript and keep serving your browser with browser-compatible Javascript code.

Project structure

The project consists basically of the folders src, where all the not yet compiled source code remains, and dist, where you can find the bundles generated for all your code. Also, as you can see in the project tree below, you also get a webpack.config.js and package.json, where you can check the dependencies the project uses.

package.json

First, let’s check the list of dependencies and commands we use in this setup. Below you can see the contents of the package.json file.

In the scripts block you can see the commands configured to start and build the project. For the start command we are using the webpack-dev-server available inside our node_modules folder, considering that the package was not installed globally in your machine. For the options passed to that command we have:

--hot : this enables Hot Module Replacement in your server.
--inline : this adds the webpack-dev-server client entry point to the webpack configuration.
--progress: this displays the compilation progress in the command line.

The build command is responsible for using the options passed in the webpack.config.js and generate a customized build for your assets. For that we have:

-p: shortcut for setting production environment configuration, such as minimizing Javascript files and running the LoaderOptionsPlugin.
--config: specify the configuration file to be used.
--hide-modules: hide ugly and unnecessary output on modules being compiled.

As for the dependencies, we are using babel-core, babel-loader, babel-preset-es2015, and babel-preset-stage-0 to setup Babel compiler. Also, we have to add dependencies to handle Sass syntaxe in our CSS and to bundle our styles in a separate file (main.bundle.css). Finally, of course, we added the D3 dependency in its version 4.10.0.

webpack.config.js

The webpack configuration file is the place where you can customize your build process to match your needs. In the default configuration provided with this project we have the following sections:

context, entry, and output

Here you are basically telling webpack where it should look for files to compile and the files it should use as the entry point for the bundle. In this case we are passing the app.js and main.scss files, where all of your scripts and styles should be imported to. After that, the output key represents the folder and the name of the generated bundle file.

module

Here we are taking all of our modules (Javascript and Sass files) and applying loaders to them so webpack can generate browser-compatible code. It is important to notice that loaders are apllied from right to left, that means that for our stylesheets, for isntance, the sass-loader will be applied before the css-loader.

The ExtractTextPlugin here is being used so we can generate a separated file for our stylesheets, instead of having them appended to a style tag in the final index.html file.

devServer

Here is where the webpack-dev-server is configured for making the live reloading option available for us. First we define which folder the server should look for the static files to be served. As the webpack-dev-server documentation explains,these files will be served from memory and not from disk, so even if you have not generated a bundle of the source code to the dist folder, the files will still be served to the browser.

app.js

This is where you can add all your D3 code. If you want to get a more drawn up structure you can create separate script files and import them here. Below is the snippet provided as example, in which we are using a div with the ID of root, that is available in the index.html file.

import * as d3 from 'd3'

d3.select('#root')
  .append('h5')
  .append('text')
  .text(`D3 version: ${d3.version}`)

Project setup

If you already have node and npm installed in your machine, you can simply run the commands listed in the steps below.

1. Install dependencies

$ npm install

Or using yarn

$ yarn install

2. Run server

$ npm start

Or using yarn

$ yarn start

Now you can open you browser and go to http://localhost:4800/. You should see the D3 version this project uses, which is provided by the snippet shown below (also available in app.js).

import * as d3 from 'd3'

d3.select('#root')
  .append('h5')
  .append('text')
  .text(`D3 version: ${d3.version}`)

Project build

If you wanna generate the minified files for the project you can simply run the command below.

$ npm run build

Or using yarn

$ yarn run build

Loading external data

As loading external data is one of the most common things in a D3 project, this setup includes a basic flow to serve data files, such as JSON and CSV.

The webpack.config.js file includes a step in which all the files living in the data folder are copied to the dist folder so you can require them as you want. The default folder is called data and lives in the project root. If you want to change the name or location for that folder you just have to update the constant called paths in the webpack.config.js to match with your desired folder location.

In the app.js file you can find an example on loading external files using D3. At the moment you clone this repo, the sample.csv file is already copied for you in the dist folder. However, if you want to add more data files or change the existing one, you will have to build the project so you will have those modifications available for you in the dist folder.

// Loading external data
d3.csv('/data/sample.csv', (error, dataset) => {
  dataset.forEach((data) => {
    console.log(data)
  })
})

If everything goes alright, then you are ready to start some D3 hacking. I hope you liked this post and if you have any commments or contribution, feel free to contact me or open a Pull Request.

Finally, check out the example below so you can have a better idea of what I explained in this article.

Have fun! :)

Useful resources

Git: Ours or Theirs? (Part 2)

Will Soares — Wed, 22 Nov 2017 14:22:42 +0000

This post was originally posted on my personal blog

In the previous post you were presented with a basic workflow used to automatically handle merge conflicts. It was also explained why and when you would want to do that. However, it is important to notice that, before using this method, you should be completely aware of what you are doing. In fact, whenever I get conflicts when trying to do a pull or a rebase, I use to check each one of them to see if I will be able to handle the situation quickly by using some strategy, such as using the --ours or --theirs option.

Furthermore, I also warned you that, although it might have looked a really simple strategy, there are cases in which that same strategy would provide you with different outcomes, depending on which action you are using to merge the commits.

You may remember that, in the previous scenario, we were performing a merge process between the branches old-feature and my-new-feature. At this point, it is important to notice that you should avoid performing this kind of process using the merge or pull methods, as explained in this article. Instead of that, you should do a fetch and then a rebase to update your local branch with a remote one. Check this article for more info about the topic.

Also, before we go any further, you should remember the rule of thumb explained in the previous post:

The --ours option represents the current branch from which the merge/rebase process started before getting the conflicts, and the --theirs option refers to the branch where the changes are coming from.

With that, we can get into a new scenario where these options might look a little bit tricky. Let’s say you now want to perform a rebase because there are new commits in the upstream branch. The image below represents the two branches you have and their commits before the rebase.

Then, from within the my-new-feature you start rebasing you branch by running the command below:

$ (my-new-feature) git rebase old-feature

At this point, we have the key to learn how to properly use the ours and theirs options when doing a rebase.

Whenever you perform a rebase, the first thing Git does is to swap from your current branch to an upstream branch. Only after that, the rebase process begins.

With that in mind, it is easy to notice that the rule of thumb is still valid in this case, taking into consideration that the rebase process started in the upstream branch.

Now, you probably understand why this strategy might be tricky sometimes. You noticed that, according to the rule, the --ours option refers to the upstream branch with the commits from the old-feature branch and the --theirs option to the my-new-feature branch, as described in the image below.

After the checkout, Git starts replaying all your commits on top of the commits added to the old-feature branch. This is one more thing Git does differently when you perform a rebase, instead of changing the HEAD pointer to the upstream branch, it updates the remote branch adding your commits to it.

Let’s consider that, during the rebase, you get tons of conflicts, again, in the index.html file. Fortunately, you are sure that you can keep all of your changes and just ignore the changes coming from the remote branch. And you also understand that you should change your strategy a little in this scenario. Thus you go ahead and resolve the conflicts, keeping your changes, by running the command below.

$(old-feature) git checkout --theirs index.html

Notice, again, that the --theirs option here refers to your changes in my-new-feature.

After the rebase, you will have the following branch tree, which looks a bit different from the one you achieved in the previous post.

I hope now you understand how to automate the tedious task of handling conflicts when working with Git. Also, I expect you to be careful and only use such strategies when you know what you are doing.

Thanks for reading!

Git: Ours or Theirs? (Part 1)

Will Soares — Wed, 22 Nov 2017 14:10:28 +0000

This post was originally posted on my personal blog

In this article, I will assume that you already have a basic understanding of Git and consequently is familiar with the process of sharing code when you are working in a team. If you do not know about that, I would suggest you to read more about those topics here and here before going through this post.

If you are here on purpose, you probably know that this article relates to a really cumbersome situation that you constantly get into when trying to share your code with co-workers, who are working in the same repository. We all know that those situations, known as conflicts, may become a lot harder or time-consuming depending on the number of changes we are trying to commit.

As a beginner developer, I’m constantly wondering about things I could automate to increase my productivity at work. Due to that — and also because I once got a bunch of conflicts in a file — I came up with the topic for this post. So without further ado, let’s get into it.

To begin with, let’s imagine you have to work on a new feature that you are really excited about. Thus you go ahead and create a new branch for it.

$ (old-feature) git checkout -b my-new-feature

After making all the changes you needed to accomplish your task, let’s say you now need to merge the old branch, from which you have created the my-new-feature branch, into the current one. However, before attempting to do that you notice there are new commits on that branch and the git graph now looks like this:

Even though you noticed that, you think those changes on the old branch will not affect yours, so the merge command is executed within the my-new-feature branch.

$ (my-new-feature) git merge old-feature

And the output is:

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

Too bad! You’ve just got some conflicts that you should manually solve in the index.html file. But wait… the file is huge and there are tons of conflicts in it. You probably will take a long time to handle all of them if you do it one at a time.

So how can we automate that? Here we are presented with two really handy options Git provides us: ours and theirs. The first option represents the current branch from which you executed the command before getting the conflicts, and the second option refers to the branch where the changes are coming from. So in the situation described above the my-new-feature branch would be ours and the old-feature branch would be theirs.

In order to better understand when you would want to use any of those options, let’s imagine that you opened the index.html file and you noticed that all the changes coming from the old-feature branch are not correct and you can simply ignore them. With that, you want to keep only the changes from your branch, which are referred to by the ours option. So instead of handling them one line at a time you can simply run the command below.

$ (my-new-feature) git checkout --ours index.html

After that, you just need to explicitly tell Git that you solved the conflicts in that file by adding it to the Index, as shown in the command below.

$ (my-new-feature) git add index.html

Similarly, if you would want to keep all the changes coming from the old-feature branch and ignore your changes, you would just have to use the option theirs instead (in situations like the one described above, of course).

After the merge process is successfully finished we would have a branches graph like this:

With that you have used a strategy to resolve conflicts that may happen when doing a git merge. This allows you to save a considerable amount of time when you face problems like this.

It is important to notice that you must be careful when resolving conflicts this way. One must be sure about which changes should be kept and which ones should be ignored before doing it automatically. Besides, those options can be a little bit tricky in different situations. The one described here is specific to a merge process and should not be mistaken for cases when you are doing a rebase , for instance. But that is going to be discussed later in another post. Stay tuned!

...

In the meantime, if you want to learn more about the options and the other commands discussed you can take a look here.

If you have any questions or comments, let me know!

Thanks a bunch for reading!

Forem: Will Soares

What is an "old way" of doing things that it'd be surprising/interesting for beginners when it comes to software development?

Destructuring JavaScript objects like a pro

It also works with arrays!

It also works in a function signature!

Can I do destructuring everywhere?

Quiz

Why you should already be using CSS Grid

Some history

CSS Grid lingo

Container

Item

Tracks

Fraction unit

Lines

Cell

Area

Gap

CSS Grid vs Flexbox

CSS Grid

Flexbox

Conclusion

Useful links

How to integrate Spotify and Genius API to easily crawl song lyrics with Python

This post was originally published on my personal blog.

Connecting to Spotify

Connecting to Genius API

Extracting the song lyrics

How to use the Github repository

CSS selectors reviewed with examples

Selectors

Type selectors

Class selectors

Attribute selectors

~=

|=

^=

$=

*=

ID selectors

Universal selector

Pseudo-class

Pseudo-element

Combinators

How to build an image carousel with React

Component-based thinking

The Carousel component

The ImageSlide component

The Arrow component

What I learned from implementing a Sudoku solver in Python

Show me the code! (almost there)

Recursive programming

Backtracking

Show me the code! (for real) - The Naive Solution

has_violation

get_positions_to_check

fill_matrix

So what? What's the real point in all of this?

Setting Up D3.js with Babel and Webpack

This post was originally posted on my personal blog

Concepts behind this setup

D3.js

Webpack and webpack-dev-server

Babel

Project structure

package.json

webpack.config.js

app.js

Project setup

1. Install dependencies

2. Run server

Project build

Loading external data

Useful resources

Git: Ours or Theirs? (Part 2)

This post was originally posted on my personal blog

Git: Ours or Theirs? (Part 1)

This post was originally posted on my personal blog

`~=`

`|=`

`^=`

`$=`

`*=`

The `Carousel` component

The `ImageSlide` component

The `Arrow` component

`has_violation`

`get_positions_to_check`

`fill_matrix`