<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Carlos Augusto de Medeir Filho</title>
    <description>The latest articles on DEV Community by Carlos Augusto de Medeir Filho (@camfilho).</description>
    <link>https://dev.to/camfilho</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F243811%2Fce415a5a-7093-4e2f-945a-7c9be08be17d.jpeg</url>
      <title>DEV Community: Carlos Augusto de Medeir Filho</title>
      <link>https://dev.to/camfilho</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/camfilho"/>
    <language>en</language>
    <item>
      <title>The powerful yet dangerous .*</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Thu, 29 Dec 2022 03:02:11 +0000</pubDate>
      <link>https://dev.to/camfilho/the-powerful-yet-dangerous-3nm3</link>
      <guid>https://dev.to/camfilho/the-powerful-yet-dangerous-3nm3</guid>
      <description>&lt;h2&gt;
  
  
  Learning a bit about . * ? in Regex
&lt;/h2&gt;

&lt;p&gt;In a regular expression (regex), the &lt;code&gt;.&lt;/code&gt; (dot) character is a wildcard that matches any single character, the &lt;code&gt;*&lt;/code&gt; (star) character indicates that the preceding character or pattern should be matched zero or more times, and the &lt;code&gt;?&lt;/code&gt; (question mark) character indicates that the preceding character or pattern is optional and should be matched zero or one time.&lt;/p&gt;

&lt;p&gt;Here are some examples to illustrate the meaning of each of these characters:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The . character is a wildcard that matches any single character. For example, the regex a.c would match the strings abc, a9c, a#c, and so on.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The * character indicates that the preceding character or pattern should be matched zero or more times. For example, the regex a.*c would match the strings ac, abc, a9c9c, and so on.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The ? character indicates that the preceding character or pattern is optional and should be matched zero or one time. For example, the regex colou?r would match the strings color and colour, but not the string colouur.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here are some examples that combine these characters in different ways:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The .* pattern is a wildcard that matches any character (.) zero or more times (*). This pattern is often used to match any characters that come before or after a specific pattern. For example, the regex abc.*def would match the strings abcdef, abc123def, and so on.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The .*? pattern is a non-greedy version of the .* pattern, which means that it will try to match as few characters as possible.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The a.*b? regex would match the strings a, ab, abc, and so on. The b? pattern is optional, so it will match either b or the empty string.&lt;/p&gt;

</description>
      <category>emptystring</category>
    </item>
    <item>
      <title>Transposing a Matrix in Ruby: Using the Zip Method</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Sun, 18 Dec 2022 06:36:58 +0000</pubDate>
      <link>https://dev.to/camfilho/transposing-a-matrix-in-ruby-using-the-zip-method-46o2</link>
      <guid>https://dev.to/camfilho/transposing-a-matrix-in-ruby-using-the-zip-method-46o2</guid>
      <description>&lt;p&gt;Have you ever needed to flip the rows and columns of a matrix in your Ruby code? This process, known as transposing a matrix, can be useful in a variety of situations. In this post, we'll learn how to transpose a matrix safely in Ruby using the zip method.&lt;/p&gt;

&lt;h2&gt;
  
  
  Asking GPT-3 about the Zip Method
&lt;/h2&gt;

&lt;p&gt;As I was working on some Ruby challenges on Exercism.io, I had the idea to ask GPT-3 about the #zip method. Instead of just Googling it or looking at the documentation, I thought it would be more fun to ask GPT-3. It explained to me that the #zip method combines the elements of two or more arrays into a single array of pairs. For example,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;zip&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;# c is now [[1, 'a'], [2, 'b']]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I asked "What is an interesting use of the &lt;code&gt;#zip&lt;/code&gt; method"?. It told me that it was possible to &lt;br&gt;
transpose a matrix using the zip method. The proposed solution was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;zip&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="ss"&gt;:itself&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It was definitely wrong. So, I decided to come up with my solution to transpose a matrix using zip. Here is what I came up:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;matrix&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;],[&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt;
&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;zip&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="o"&gt;..&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; 
&lt;span class="c1"&gt;# [[1,3],[2,4]]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But what happens when we try to transpose a matrix with different row sizes?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;],[&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;]].&lt;/span&gt;&lt;span class="nf"&gt;transpose&lt;/span&gt;

&lt;span class="c1"&gt;# transpose': element size differs (3 should be 2) (IndexError)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Safely Transposing a Matrix: The Bass Approach
&lt;/h2&gt;

&lt;p&gt;How do we transpose a matrix safely in Ruby? After some googling, I came across an article by Matthew Bass titled "How to Safely Transpose Ruby Arrays" (&lt;a href="http://www.matthewbass.com/2009/05/02/how-to-safely-transpose-ruby-arrays/" rel="noopener noreferrer"&gt;http://www.matthewbass.com/2009/05/02/how-to-safely-transpose-ruby-arrays/&lt;/a&gt;). In this article, Bass outlines a method for safely transposing a matrix as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;safe_transpose&lt;/span&gt;
  &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="n"&gt;max_size&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;max&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;size&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;size&lt;/span&gt; &lt;span class="p"&gt;}.&lt;/span&gt;&lt;span class="nf"&gt;size&lt;/span&gt;
  &lt;span class="n"&gt;max_size&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;times&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
    &lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;first&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;size&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;each_with_index&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
  &lt;span class="n"&gt;result&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This method works by first finding the size of the largest row in the matrix. It then iterates over each column in the matrix, creating a new row in the result for each iteration. Finally, it populates each element in the new row by extracting the element at the corresponding position in each row of the original matrix.&lt;/p&gt;

&lt;h2&gt;
  
  
  Safely Transposing a Matrix: The Zip Method Approach
&lt;/h2&gt;

&lt;p&gt;Inspired by GPT-3's suggestion, I decided to try implementing a safe transpose using the zip method. Here's the result:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;transpose&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="kp"&gt;nil&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;max&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;size&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;size&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;zip&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="o"&gt;..&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This method works by first padding the first row of the matrix with nil values until it is as long as the longest row in the matrix. This ensures that all rows have the same number of elements, which is necessary for the zip method to work correctly. Next, it calls the zip method on the first row of the matrix, followed by the rest of the rows (using the splat operator *).&lt;/p&gt;

&lt;h2&gt;
  
  
  Benchmarking the Bass Approach vs. the Zip Method Approach
&lt;/h2&gt;

&lt;p&gt;Now, let's see how these two methods compare in terms of performance. Here is a simple benchmark that generates a random matrix with 1000 rows and 1000 columns, and measures the time it takes to transpose the matrix using both the blog method and the zip method approach:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="nb"&gt;require&lt;/span&gt; &lt;span class="s1"&gt;'benchmark'&lt;/span&gt;

&lt;span class="c1"&gt;# Generate a random matrix with 1000 rows and 1000 columns&lt;/span&gt;
&lt;span class="n"&gt;matrix&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="no"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nb"&gt;rand&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;# Benchmark the two transpose methods&lt;/span&gt;
&lt;span class="no"&gt;Benchmark&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;bm&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
  &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;report&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"safe_transpose:"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;safe_transpose&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;report&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"transpose:"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;transpose&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;matrix&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is an example of the output you might see when running this benchmark:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;              user     system      total        real
safe_transpose:  0.440000   0.000000   0.440000 (  0.443733)
      transpose:  0.050000   0.000000   0.050000 ( 

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Comparison of Approaches
&lt;/h2&gt;

&lt;p&gt;So which approach is better: the blog's method or the zip method approach? Both have their pros and cons.&lt;/p&gt;

&lt;p&gt;The first method is relatively simple and easy to understand, but it can be somewhat slow for large matrices due to its nested loops. On the other hand, the zip method approach is faster, but it requires padding the rows of the matrix with nil values, which may not be desirable in all cases.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In this post, we learned how to safely transpose a matrix in Ruby using two approaches. We also compared and contrasted them, considering their pros and cons.&lt;/p&gt;

&lt;p&gt;I hope this post has helped you understand how to transpose a matrix in Ruby, and that you feel more confident using either the traditional method or the zip method approach in your own projects. Whether you're a beginner or an experienced programmer, transposing matrices is a useful skill to have in your toolkit.&lt;/p&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;

</description>
      <category>socialmedia</category>
    </item>
    <item>
      <title>TIL Presence Validation on Boolean Column</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Fri, 04 Mar 2022 20:21:58 +0000</pubDate>
      <link>https://dev.to/camfilho/til-presence-validation-on-boolean-column-45mf</link>
      <guid>https://dev.to/camfilho/til-presence-validation-on-boolean-column-45mf</guid>
      <description>&lt;p&gt;Hello, I am Carlos Augusto de Medeiros Filho. This is a short post on what I learned today about rails model validations. I usually write those posts to my future self and to consolidate the knowledge in my brain. I hope you find it useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  The standard way of validating the presence
&lt;/h2&gt;

&lt;p&gt;Rails give us a way to validate the presence of the model attributes.&lt;/p&gt;

&lt;p&gt;For instance, imagine we have a User model with a column named &lt;code&gt;age&lt;/code&gt;. We want to raise an error every time we try to save an instance of &lt;code&gt;User&lt;/code&gt; in the database before sending the query.&lt;/p&gt;

&lt;p&gt;One way to do it would be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ApplicationRecord&lt;/span&gt;
  &lt;span class="n"&gt;validates&lt;/span&gt; &lt;span class="ss"&gt;:age&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;presence: &lt;/span&gt;&lt;span class="kp"&gt;true&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Rails checks the presence/absence of the property by using the &lt;code&gt;#blank?&lt;/code&gt; method.&lt;br&gt;
However, the way this method handles boolean values may be a little bit misleading. See below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="kp"&gt;false&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;blank?&lt;/span&gt; &lt;span class="c1"&gt;# =&amp;gt; true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;A possible solution would be that instead of checking the presence per se, we could check if the value is one of the values we pass in as a list, in this case &lt;code&gt;[true, false]&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Imagine that our &lt;code&gt;User&lt;/code&gt; has a column that defines if that user is an admin or not named &lt;code&gt;is_admin&lt;/code&gt;. We can check the presence, or the inclusion of the value of this property is true or false, meaning that we can't have a &lt;code&gt;nil&lt;/code&gt; value for &lt;code&gt;is_admin&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ApplicationRecord&lt;/span&gt;
  &lt;span class="n"&gt;validates&lt;/span&gt; &lt;span class="ss"&gt;:is_admin&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;inclusion: &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="ss"&gt;in: &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt; &lt;span class="kp"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kp"&gt;false&lt;/span&gt; &lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>rails</category>
      <category>todayilearned</category>
      <category>webdev</category>
    </item>
    <item>
      <title>[CSS] You Don't Know Margins</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Sun, 21 Mar 2021 18:10:18 +0000</pubDate>
      <link>https://dev.to/camfilho/css-you-don-t-know-margins-3mh0</link>
      <guid>https://dev.to/camfilho/css-you-don-t-know-margins-3mh0</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Some of the challenges in developing a website are its layout, legibility, spacing. In those cases, one solution could possibly be a smart use of margin. But, do you really know how the property &lt;code&gt; margin &lt;/code&gt; works?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This article is organized as follows:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Introduction&lt;/li&gt;
&lt;li&gt;Definition&lt;/li&gt;
&lt;li&gt;Why?&lt;/li&gt;
&lt;li&gt;When?&lt;/li&gt;
&lt;li&gt;When not?&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Definition
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://duckduckgo.com/" rel="noopener noreferrer"&gt;DuckDuckGoing&lt;/a&gt; around about Margin Collapse, I have found some definitions about it, here I bring a summary of them.&lt;/p&gt;

&lt;p&gt;Accordingly to W3.org, margin collapse is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The adjoining margins of two or more boxes can combine to form a single margin.[...] the resulting is called collapsing margin."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A more comprehensive definition is given by CSS-Tricks:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Collapsing margins happens when two vertical margins come in contact with one another."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The final definition that I bring is given by MDN:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;While those definitions do a good job in describing what margin collapse is, bellow I show some cases where this collapse happens.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why?
&lt;/h2&gt;

&lt;p&gt;Before moving on to the examples, I need to explain why it happens.&lt;/p&gt;

&lt;p&gt;One of the reasons that CSS uses margin collapse I found on &lt;a href="https://medium.com/@YeshaS93/collapsing-margins-a9d7d3f7be6e" rel="noopener noreferrer"&gt;this article&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The concept of margin collapsing comes from graphic design. There, you have margins to title and subtitles, but when a subtitle comes just after the title you should not double the margins. This is why they developed the concept of collapsed margins and this is why it happens just on vertical margins.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Using the power of margin collapsing, it is easily possible to define &lt;br&gt;
margins to sets of vertical content.&lt;/p&gt;

&lt;p&gt;I explain, imagine we had a set of 3 paragraphs with this property.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;p {
 margin-top: 10px;
}

&lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My First Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Second Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Third Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//0 margin
&lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The spacing wouldn't be equally spaced. An easy solution to this lies on the margin collapse.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;p {
 margin-top: 10px;
 margin-bottom: 10px;
}

&lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My First Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin (collapsed)
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Second Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin (collapsed)
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Third Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin
&lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  When?
&lt;/h2&gt;

&lt;p&gt;If there is one thing to remember when you leave this page is that &lt;strong&gt;collapsing only happens on vertical margins&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The main scenarios are:&lt;/p&gt;

&lt;h3&gt;
  
  
  Parent and Descendants
&lt;/h3&gt;

&lt;p&gt;If no border, padding, inline part or clearance separate the margin-top of a parent to his first child, then it is going to collapse.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F3u6e6fgj1w796auccp5r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F3u6e6fgj1w796auccp5r.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The same happens with the last child of the parent.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F4or2viiyxoy4562gduvv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F4or2viiyxoy4562gduvv.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Adjacent Siblings
&lt;/h3&gt;

&lt;p&gt;When there are adjacent siblings, the margin-bottom of the top element collapses with the margin-top of the bottom element. The resulting size is the biggest between the two.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ffyhhl598dgjbp1h6q1hd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ffyhhl598dgjbp1h6q1hd.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Empty Blocks
&lt;/h3&gt;

&lt;p&gt;The margin-top and margin-bottom of an empty block collapse if there are no padding, border, inline content avoiding it. Also, it does not collapse if the block does not have a height or min-height attribute.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsa87hszmhfou48svch8z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsa87hszmhfou48svch8z.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Negative Margins
&lt;/h3&gt;

&lt;p&gt;When it comes to negative margins, the resulting size depends on the signals involved.&lt;/p&gt;

&lt;h4&gt;
  
  
  Negative + Positive
&lt;/h4&gt;

&lt;p&gt;The resulting size of a negative margin and a positive margin is their algebric sum.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fjm0texf4hh51tb5peywf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fjm0texf4hh51tb5peywf.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Negative + Negative
&lt;/h4&gt;

&lt;p&gt;When both margins are negative, the resulting size is similar when there are positive + positive. In this, the most negative one wins.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fgfrou7kk1ciqdgxbbhwm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fgfrou7kk1ciqdgxbbhwm.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When not?
&lt;/h2&gt;

&lt;p&gt;There are many exceptions to the collapsing rule that it would be hard to know it by heart. &lt;br&gt;
Here I show some examples when the margins do not collapse.&lt;/p&gt;

&lt;h3&gt;
  
  
  Non-Block-Level Elements
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt; &lt;code&gt; Flex Items&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;code&gt;Grid Items &lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;code&gt; Absolutely positioned items&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;code&gt;Other non-block-elements &lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Border or Padding Property on the Parent Element
&lt;/h3&gt;

&lt;p&gt;If there is a border-top or padding-top between the parent and the first-child.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F8g2bj1sco8xs42ra4dwg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F8g2bj1sco8xs42ra4dwg.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The same happens if there is a border-bottom or padding-bottom between the parent and its last-child.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F755l2emdr2psof592bdb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F755l2emdr2psof592bdb.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Horizontal Margins
&lt;/h3&gt;

&lt;p&gt;The horizontal margins never collapse.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Furj7mr9n82mreso954dq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Furj7mr9n82mreso954dq.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7osydb3fqh1047zs3mmx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7osydb3fqh1047zs3mmx.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Even though it came with the idea of easing our lives, It can be really tricky to deal with margin collapse. This is mainly because of the many rules and exceptions has grown since the invention of it. One possible solution that it is easy to remember and understand is only applying margin-top to the elements. To read more about the possible solutions, &lt;a href="https://csswizardry.com/2012/06/single-direction-margin-declarations/" rel="noopener noreferrer"&gt;Harry Robert&lt;/a&gt; discuss more on his article.&lt;/p&gt;

&lt;p&gt;Follow me on &lt;a href="https://twitter.com/camfilho" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and comment down below your thoughts on this.&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Get Better at HTML and CSS by Cloning these 10 Minimalist-ish Websites</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Sun, 12 Jan 2020 02:07:47 +0000</pubDate>
      <link>https://dev.to/camfilho/get-better-at-html-and-css-by-cloning-these-10-minimalist-ish-websites-4pij</link>
      <guid>https://dev.to/camfilho/get-better-at-html-and-css-by-cloning-these-10-minimalist-ish-websites-4pij</guid>
      <description>&lt;p&gt;Practicing may not make you perfect but certainly it makes you closer to being.&lt;br&gt;
Here I bring a list of 10 minimalist websites to be cloned. The focus here should &lt;strong&gt;not&lt;/strong&gt; be the animation, rather you should reason about grid, layout, positioning, color choice, and typography.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let's go
&lt;/h2&gt;

&lt;h3&gt;
  
  
  WIBE
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F6x4vdbv7lexj9jw6m4hq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F6x4vdbv7lexj9jw6m4hq.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's start by cloning &lt;a href="https://www.wibe.in/" rel="noopener noreferrer"&gt;Wibe&lt;/a&gt;. It is a simple yet quite beautiful website. Even after not paying attention to the animations and transitions, it's typography and grid makes it stunning.&lt;/p&gt;

&lt;h3&gt;
  
  
  Syndicut
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsstf3kwpye1e4dlzv2zm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsstf3kwpye1e4dlzv2zm.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The next on the list. Even though it takes a little bit longer to load, &lt;a href="http://www.syndicut.co/" rel="noopener noreferrer"&gt;Syndicut&lt;/a&gt; is one of the best on the list. It plays with the image grid while showing a big text right on our face. Hint: use the CSS grid.&lt;/p&gt;

&lt;h3&gt;
  
  
  Andstudio
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F61wzoxivgxo1z5ukttoi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F61wzoxivgxo1z5ukttoi.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It looks a little bit with the first one, but &lt;a href="https://andstudio.lt/" rel="noopener noreferrer"&gt;Andstudio&lt;/a&gt; is a little bit more complex. Andstudio plays with text orientation and its position on the website.&lt;/p&gt;

&lt;h3&gt;
  
  
  Portfolio
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsfevtqgo8xyw3s3sbtx6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsfevtqgo8xyw3s3sbtx6.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is &lt;a href="https://jesussandrea.com/" rel="noopener noreferrer"&gt;Jesus Sandrea&lt;/a&gt; portfolio. By now I think you started to see a trend. Those minimalist websites use typography, grid, and black/white colors to show the message. Sometimes they want us to picture the text content, another the images.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://www.olivierophotographie.fr/" rel="noopener noreferrer"&gt;Olivier Photography&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fxo3lsx23u7cx3iomyo1n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fxo3lsx23u7cx3iomyo1n.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This one is quite simple, but with plenty of animation. Maybe he trusts a little bit too much on text than images, but his website is quite powerful.&lt;/p&gt;

&lt;h3&gt;
  
  
  2Che
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fji8xmqbd5h60engbk65w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fji8xmqbd5h60engbk65w.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Starting with some color other than white and black, &lt;a href="http://www.2che.com.hr/" rel="noopener noreferrer"&gt;2Che&lt;/a&gt; plays with image positioning and strong text. It may not be that minimalist, but I liked the doggo photo at the end.&lt;/p&gt;

&lt;h3&gt;
  
  
  Guillaume
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F0ro2g5acjrmg26ov6nnr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F0ro2g5acjrmg26ov6nnr.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Back to black and white, &lt;a href="https://guillaumetomasi.com/" rel="noopener noreferrer"&gt;Guillaume&lt;/a&gt;'s website is another one that plays with text over the image. I'm still stuck on the infinity scroll effect though.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://shoheitakenaka.com/" rel="noopener noreferrer"&gt;Shohei Takenaka&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F12e3bh8kr2bbru6nifv4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F12e3bh8kr2bbru6nifv4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is incredible how a little bit of black, white, and good typography can make your website look beautiful. Of course that in this case, her photos make her website look stunning&lt;/p&gt;

&lt;h3&gt;
  
  
  Peiying
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff2iu03yzoo5n0nxz8hdk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff2iu03yzoo5n0nxz8hdk.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We are close to the end of our list. &lt;a href="https://pfeng.cc/" rel="noopener noreferrer"&gt;Peiying&lt;/a&gt;'s website is another example of how playing with text positioning and orientation can make your website interesting. Her website is more focused on the text content, but the images are well positioned, especially in the title's background.&lt;/p&gt;

&lt;h3&gt;
  
  
  00F Agency
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fumytq2kkgu876fabw2zy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fumytq2kkgu876fabw2zy.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Last but not least, &lt;a href="https://00f.agency/en/" rel="noopener noreferrer"&gt;00F Agency&lt;/a&gt; have a "blueful" website. In addition to the colors, the website also plays with the name of the color in hex! If anyone finishes this one, please comment below!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I know that even though minimalist-ish, those websites demand quite some time to finish. Personally, I am posting on Codepen what I'm accomplishing to do. It is really fun to discover new font-family, new ways of organizing our grid and text transformation.&lt;/p&gt;

&lt;p&gt;I hope you have fun as much as I am having to clone those pages.&lt;/p&gt;

&lt;p&gt;Do you know any other Minimalist website that would be fun to try to clone? Please comment below.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lets Talk &lt;a href="https://camfilho.github.io/" rel="noopener noreferrer"&gt;@camfilho&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;If you cloned one of them, shoot out a tweet to me. I'm going to be glad =)&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Getting Started with Ruby On Rails in 2020</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Mon, 06 Jan 2020 01:10:28 +0000</pubDate>
      <link>https://dev.to/camfilho/getting-started-with-ruby-on-rails-in-2020-4jfn</link>
      <guid>https://dev.to/camfilho/getting-started-with-ruby-on-rails-in-2020-4jfn</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;The new year is already here. It is time to set new goals, follow your dreams and also get a job in tech.&lt;br&gt;
If learning Ruby on Rails is one of your goals, then you are in the right place. &lt;/p&gt;

&lt;p&gt;In this article, I am going to present to you the best resources to jumpstart your Rails skills while having fun in the process.&lt;/p&gt;

&lt;p&gt;Let's get started, shall we?&lt;/p&gt;

&lt;h2&gt;
  
  
  The Ruby Part
&lt;/h2&gt;

&lt;p&gt;Before jumping into Rails, it is nice to have a basic knowledge of Ruby. &lt;br&gt;
Ruby is a dynamic language. It is known as an object-oriented programming language and it was created in the mid-1900s my uncle Matz.&lt;/p&gt;

&lt;h3&gt;
  
  
  Codecademy
&lt;/h3&gt;

&lt;p&gt;The best place to get a good base in Ruby is &lt;a href="https://www.codecademy.com/"&gt;Codecademy&lt;/a&gt;. Codecademy is a learn-by-doing platform that teaches many languages. Some of them are paid, others are free like Ruby.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exercism.io
&lt;/h3&gt;

&lt;p&gt;After finishing the Codecademy course, you can go straight to &lt;a href="//exercism.io"&gt;Exercism.io&lt;/a&gt; and join the ruby track. Exercism.io is a series of challenges that you can solve and receive feedback from the best mentors.&lt;/p&gt;

&lt;p&gt;p.s. If you feel like needing another source of information before joining exercism.io, there is also the &lt;a href="https://rubymonk.com/"&gt;Ruby Monk&lt;/a&gt;. Here you only need to take the first course called Ruby Primer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rails
&lt;/h2&gt;

&lt;p&gt;Now you are ready to start Rails!&lt;/p&gt;

&lt;p&gt;The best resource for Rails beginners is &lt;a href="//railstutorial.org"&gt;RailsTutorial&lt;/a&gt;.&lt;br&gt;
The latest version of the book is paid but they have an &lt;a href="https://www.learnenough.com/ruby-on-rails-4th-edition-tutorial/beginning"&gt;older free version&lt;/a&gt;. Don't worry, the older version isn't that old.&lt;/p&gt;

&lt;p&gt;After reading up to the 6th chapter, you are ready to watch some rails tutorials videos.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=wbZ6yrVxScM"&gt;Simple Rails blog&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.youtube.com/watch?v=2tKObYPDclY"&gt;Simple Todo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I highly recommend you to follow along, because it is one o the best way to learn Rails.&lt;/p&gt;

&lt;p&gt;Now it is time for you to know &lt;a href="https://guides.rubyonrails.org/"&gt;Rails Guide&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Rails Guide is the official documentation for Rails. It is not the most friendly place for beginners but they have really good content.&lt;br&gt;
I recommend you familiarize yourself with Rails Guide. &lt;br&gt;
Try to add it to your search when you google your questions on the internet like: "How to generate model RailsGuide".&lt;/p&gt;

&lt;p&gt;Now you are good to go to read chapters seven and eight.&lt;/p&gt;

&lt;p&gt;At this point, you have to make a decision. &lt;br&gt;
Either you go back to read rest the chapters and follow along or you can start building your own project (I suggest the last option). Here is a list of projects for you.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;To-do List 
Here you can practice all the CRUD actions without having to worry too much about the front end.&lt;/li&gt;
&lt;li&gt;Blog 
Here you are also going to practice the CRUD actions but I challenge you do add users using Devise gem.&lt;/li&gt;
&lt;li&gt;A URL shortener&lt;/li&gt;
&lt;li&gt;A social bookmark app&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By now, you should be comfortable using Rails and the free source of information that will make you grow is beginning to be scarce. &lt;/p&gt;

&lt;p&gt;I recommend you take a look at GoRails. Also, you can find a good Rails course on Udemy like &lt;a href="https://www.udemy.com/course/the-complete-ruby-on-rails-developer-course/"&gt;The Complete Ruby on Rails Developer Course &lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Join an Online Tech School (Bootcamp?)
&lt;/h3&gt;

&lt;p&gt;Here is an article about the time that I &lt;a href="https://dev.to/camfilho/how-i-joined-microverse-global-school-for-developers-and-how-it-is-going-so-far-28h2"&gt;joined Microverse Tech School&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Be part of the community
&lt;/h3&gt;

&lt;p&gt;I recommend you joining telegram, slack, Reddit thread. Find fellow Rubyists on twitter, write about your learnings on your personal blog or over dev.to. Improve your Ruby, finish Exercism.io challenges.&lt;br&gt;
Help newcomers on Rails. Record YouTube videos.&lt;/p&gt;

&lt;p&gt;If you feel demotivated, you should get a &lt;a href="https://medium.com/better-programming/the-advantages-and-challenges-of-pair-programming-bd39b5f16e35"&gt;pair-programming&lt;/a&gt;.&lt;br&gt;
You can find one from forums over the internet or through Microverse.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Rails is a really mature framework. Thanks to Ruby and its community, Rails continues to evolve year by year. Definitely you should learn Rails, especially if you think in landing your first job as a developer. Rails and Ruby community are helpful, don't be afraid to ask questions.&lt;/p&gt;

&lt;p&gt;You can &lt;a href="//www.twitter.com/camfilho"&gt;follow me on twitter&lt;/a&gt; and ask me questions over there =)&lt;/p&gt;

&lt;p&gt;I also post on &lt;a href="https://camfilho.github.io/"&gt;camfilho.github.io&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Please, if you have more sources of information, please comment below so I can add.&lt;/p&gt;

&lt;p&gt;Happy 2020!&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>rails</category>
    </item>
    <item>
      <title>What's new in Ruby 2.7.0</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Sat, 04 Jan 2020 03:17:43 +0000</pubDate>
      <link>https://dev.to/camfilho/what-s-new-in-ruby-2-7-0-4hel</link>
      <guid>https://dev.to/camfilho/what-s-new-in-ruby-2-7-0-4hel</guid>
      <description>&lt;p&gt;After some controversial decisions between Matz and the community, Ruby 2.7.0 finally came out right on time to our Christmas be complete. This is the last release before the exciting Ruby 3.0 coming up in December of 2020.&lt;/p&gt;

&lt;p&gt;Ruby 2.7.0 also begins to prepare all the Rubyists to the major changes that it is going through on the next year's release by showing warnings, experimental features and so forth. Here I'm going to present you some of the changes that 2.7.0 introduced.&lt;/p&gt;

&lt;h2&gt;
  
  
  Numbered Parameters
&lt;/h2&gt;

&lt;p&gt;Now we can access the arguments passed to a block without having to define the block-argument between pipes ||.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;_1&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="c1"&gt;#=&amp;gt; [3]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As pointed &lt;a href="https://bugs.ruby-lang.org/issues/4475"&gt;here&lt;/a&gt;, sometimes the array name is so self-explanatory that we don't really need a block variable name to make it more readable. e.g. &lt;code&gt;Books.all.each {|b| p b.title}&lt;/code&gt;. In this context, numbered parameters come really in hand by saving us some keystrokes without losing readability.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="no"&gt;Books&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;each&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nb"&gt;p&lt;/span&gt; &lt;span class="n"&gt;_1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;title&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Pattern Matching
&lt;/h2&gt;

&lt;p&gt;Following the trend of all the major programming languages in adopting functional programming, Ruby is bringing &lt;code&gt;Pattern Matching&lt;/code&gt; as an experimental feature. &lt;a href="https://bugs.ruby-lang.org/issues/14912"&gt;See discussion here&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt;
    &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;num1&lt;/span&gt;&lt;span class="p"&gt;,[&lt;/span&gt;&lt;span class="n"&gt;num2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;num34&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;]&lt;/span&gt;
        &lt;span class="nb"&gt;p&lt;/span&gt; &lt;span class="n"&gt;num1&lt;/span&gt;
        &lt;span class="nb"&gt;p&lt;/span&gt; &lt;span class="n"&gt;num2&lt;/span&gt;
        &lt;span class="nb"&gt;p&lt;/span&gt; &lt;span class="n"&gt;num34&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;irb&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="ss"&gt;warning: &lt;/span&gt;&lt;span class="no"&gt;Pattern&lt;/span&gt; &lt;span class="n"&gt;matching&lt;/span&gt; &lt;span class="n"&gt;is&lt;/span&gt; &lt;span class="n"&gt;experimental&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;and&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;behavior&lt;/span&gt; &lt;span class="n"&gt;may&lt;/span&gt; &lt;span class="n"&gt;change&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="n"&gt;future&lt;/span&gt; &lt;span class="n"&gt;versions&lt;/span&gt; &lt;span class="n"&gt;of&lt;/span&gt; &lt;span class="no"&gt;Ruby&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;
&lt;span class="mi"&gt;10&lt;/span&gt;
&lt;span class="mi"&gt;20&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It also can traverse a hash object and assign its value if a pattern is matched.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="nb"&gt;require&lt;/span&gt; &lt;span class="s2"&gt;"json"&lt;/span&gt;

&lt;span class="n"&gt;json&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span class="no"&gt;END&lt;/span&gt;&lt;span class="sh"&gt;
{
  "actor": "Keanu Reeves",
  "age": 55,
  "movies": [{ "title": "The Matrix", "year": 1999 }]
}
&lt;/span&gt;&lt;span class="no"&gt;END&lt;/span&gt;

&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="no"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;symbolize_names: &lt;/span&gt;&lt;span class="kp"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;actor: &lt;/span&gt;&lt;span class="s2"&gt;"Keanu Reeves"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;movies: &lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="ss"&gt;title: &lt;/span&gt;&lt;span class="s2"&gt;"The Matrix"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;year: &lt;/span&gt;&lt;span class="n"&gt;year&lt;/span&gt;&lt;span class="p"&gt;}]}&lt;/span&gt;
  &lt;span class="nb"&gt;p&lt;/span&gt; &lt;span class="n"&gt;year&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;irb&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;&lt;span class="mi"&gt;55&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="ss"&gt;warning: &lt;/span&gt;&lt;span class="no"&gt;Pattern&lt;/span&gt; &lt;span class="n"&gt;matching&lt;/span&gt; &lt;span class="n"&gt;is&lt;/span&gt; &lt;span class="n"&gt;experimental&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;and&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;behavior&lt;/span&gt; &lt;span class="n"&gt;may&lt;/span&gt; &lt;span class="n"&gt;change&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="n"&gt;future&lt;/span&gt; &lt;span class="n"&gt;versions&lt;/span&gt; &lt;span class="n"&gt;of&lt;/span&gt; &lt;span class="no"&gt;Ruby&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;
&lt;span class="mi"&gt;1999&lt;/span&gt;
&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1999&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Improved REPL (IRB)
&lt;/h2&gt;

&lt;p&gt;Let's be honest. Even though irb is really helpful when we want to refresh some ruby syntax, it is not that fun to code on it. IRB now supports multi-line editing, syntax highlighting, inline editing of methods, auto completion and auto indentation.&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/W4bxGjRPzI5GsWViUD/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/W4bxGjRPzI5GsWViUD/giphy.gif" alt="irb" width="480" height="310"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Beginless Range
&lt;/h2&gt;

&lt;p&gt;A range without explicitly beginning is experimentally introduced.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="o"&gt;..&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="c1"&gt;#=&amp;gt; ['a','b','c']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Enumerable#tally
&lt;/h2&gt;

&lt;p&gt;It counts the occurrence of each element&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tally&lt;/span&gt;

&lt;span class="c1"&gt;#=&amp;gt; {"a"=&amp;gt;2, "b"=&amp;gt;1, "c"=&amp;gt;1, "d"=&amp;gt;1}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Argument Forwarding
&lt;/h2&gt;

&lt;p&gt;This feature is quite useful when you want just to pass arguments from one parent function to his child. Ruby 2.7.0 made it easy with the argument forwarding (...)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;...&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="no"&gt;Bar&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;...&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Bear in mind that the parenthesis is mandatory.&lt;/p&gt;

&lt;h2&gt;
  
  
  Separation of positional and keyword arguments
&lt;/h2&gt;

&lt;p&gt;I believe that this is the biggest change brought by Ruby 2.7.0.&lt;br&gt;
Now keyword argument is not considered a normal argument that is a Hash object passed as the last argument. From now on, a keyword is going to be treated as a separated argument like block is. &lt;br&gt;
&lt;br&gt;&lt;br&gt;
If you run any ruby code that used the old of of arguments, it is going to show some warnings. This can be annoying especially when we run Rails because it may flood your console. Thanks to rails team, it is being fixed one by one as you can see here on this &lt;a href="https://github.com/rails/rails/search?q=ruby+2.7&amp;amp;type=Issues"&gt;issue&lt;/a&gt; on github.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Install?
&lt;/h2&gt;

&lt;p&gt;You can install the new version by using your ruby package manager.&lt;br&gt;
If you use &lt;code&gt;rbenv&lt;/code&gt; you can install it by typing &lt;code&gt;rbenv install 2.7.0&lt;/code&gt;&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>rails</category>
    </item>
    <item>
      <title>A Good Way to Learn Idiomatic Ruby</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Wed, 30 Oct 2019 17:50:53 +0000</pubDate>
      <link>https://dev.to/camfilho/a-good-way-to-learn-idiomatic-ruby-d25</link>
      <guid>https://dev.to/camfilho/a-good-way-to-learn-idiomatic-ruby-d25</guid>
      <description>&lt;h2&gt;
  
  
  Once I read that
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;"A good way to learn Idiomatic Ruby is to read idiomatic Ruby" &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And I didn't know why I haven't thought about this while I was learning the other languages!&lt;/p&gt;

&lt;p&gt;From now on, I am going to dig in the library files so I get more and more used to Ruby's Idiom.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do you do to read "good" Ruby code?
&lt;/h2&gt;

</description>
      <category>ruby</category>
      <category>rails</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Margin Collapse Explained by Images</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Thu, 24 Oct 2019 19:28:53 +0000</pubDate>
      <link>https://dev.to/camfilho/margin-collapse-explained-by-images-361e</link>
      <guid>https://dev.to/camfilho/margin-collapse-explained-by-images-361e</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Some of the challenges in developing a website are its layout, legibility, spacing. In those cases, one solution could possibly be a smart use of margin. But, do you really know how the property &lt;code&gt; margin &lt;/code&gt; works?&lt;/p&gt;

&lt;p&gt;Before moving on, I have a challenge for you.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1187060178983833600-272" src="https://platform.twitter.com/embed/Tweet.html?id=1187060178983833600"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1187060178983833600-272');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1187060178983833600&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;The solution lies on margin collapse.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This article is organized as follows:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Introduction&lt;/li&gt;
&lt;li&gt;Definition&lt;/li&gt;
&lt;li&gt;Why?&lt;/li&gt;
&lt;li&gt;When?&lt;/li&gt;
&lt;li&gt;When not?&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Definition
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://duckduckgo.com/" rel="noopener noreferrer"&gt;DuckDuckGoing&lt;/a&gt; around about Margin Collapse, I have found some definitions about it, here I bring a summary of them.&lt;/p&gt;

&lt;p&gt;Accordingly to W3.org, margin collapse is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The adjoining margins of two or more boxes can combine to form a single margin.[...] the resulting is called collapsing margin."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A more comprehensive definition is given by CSS-Tricks:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Collapsing margins happens when two vertical margins come in contact with one another."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The final definition that I bring is given by MDN:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;While those definitions do a good job in describing what margin collapse is, bellow I show some cases where this collapse happens.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why?
&lt;/h2&gt;

&lt;p&gt;Before moving on to the examples, I need to explain why it happens.&lt;/p&gt;

&lt;p&gt;One of the reasons that CSS uses margin collapse I found on &lt;a href="https://medium.com/@YeshaS93/collapsing-margins-a9d7d3f7be6e" rel="noopener noreferrer"&gt;this article&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The concept of margin collapsing comes from graphic design. There, you have margins to title and subtitles, but when a subtitle comes just after the title you should not double the margins. This is why they developed the concept of collapsed margins and this is why it happens just on vertical margins.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Using the power of margin collapsing, it is easily possible to define &lt;br&gt;
margins to sets of vertical content.&lt;/p&gt;

&lt;p&gt;I explain, imagine we had a set of 3 paragraphs with this property.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;p {
 margin-top: 10px;
}

&lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My First Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Second Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Third Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//0 margin
&lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The spacing wouldn't be equally spaced. An easy solution to this lies on the margin collapse.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;p {
 margin-top: 10px;
 margin-bottom: 10px;
}

&lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
//10px margin
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My First Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin (collapsed)
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Second Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin (collapsed)
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt; My Third Paragraph &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
//10px margin
&lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  When?
&lt;/h2&gt;

&lt;p&gt;If there is one thing to remember when you leave this page is that &lt;strong&gt;collapsing only happens on vertical margins&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The main scenarios are:&lt;/p&gt;

&lt;h3&gt;
  
  
  Parent and Descendants
&lt;/h3&gt;

&lt;p&gt;If no border, padding, inline part or clearance separate the margin-top of a parent to his first child, then it is going to collapse.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F3u6e6fgj1w796auccp5r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F3u6e6fgj1w796auccp5r.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The same happens with the last child of the parent.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F4or2viiyxoy4562gduvv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F4or2viiyxoy4562gduvv.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Adjacent Siblings
&lt;/h3&gt;

&lt;p&gt;When there are adjacent siblings, the margin-bottom of the top element collapses with the margin-top of the bottom element. The resulting size is the biggest between the two.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ffyhhl598dgjbp1h6q1hd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ffyhhl598dgjbp1h6q1hd.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Empty Blocks
&lt;/h3&gt;

&lt;p&gt;The margin-top and margin-bottom of an empty block collapse if there are no padding, border, inline content avoiding it. Also, it does not collapse if the block does not have a height or min-height attribute.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsa87hszmhfou48svch8z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsa87hszmhfou48svch8z.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Negative Margins
&lt;/h3&gt;

&lt;p&gt;When it comes to negative margins, the resulting size depends on the signals involved.&lt;/p&gt;

&lt;h4&gt;
  
  
  Negative + Positive
&lt;/h4&gt;

&lt;p&gt;The resulting size of a negative margin and a positive margin is their algebric sum.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fjm0texf4hh51tb5peywf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fjm0texf4hh51tb5peywf.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Negative + Negative
&lt;/h4&gt;

&lt;p&gt;When both margins are negative, the resulting size is similar when there are positive + positive. In this, the most negative one wins.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fgfrou7kk1ciqdgxbbhwm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fgfrou7kk1ciqdgxbbhwm.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When not?
&lt;/h2&gt;

&lt;p&gt;There are many exceptions to the collapsing rule that it would be hard to know it by heart. &lt;br&gt;
Here I show some examples when the margins do not collapse.&lt;/p&gt;

&lt;h3&gt;
  
  
  Non-Block-Level Elements
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt; &lt;code&gt; Flex Items&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;code&gt;Grid Items &lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;code&gt; Absolutely positioned items&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;code&gt;Other non-block-elements &lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Border or Padding Property on the Parent Element
&lt;/h3&gt;

&lt;p&gt;If there is a border-top or padding-top between the parent and the first-child.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F8g2bj1sco8xs42ra4dwg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F8g2bj1sco8xs42ra4dwg.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The same happens if there is a border-bottom or padding-bottom between the parent and its last-child.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F755l2emdr2psof592bdb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F755l2emdr2psof592bdb.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Horizontal Margins
&lt;/h3&gt;

&lt;p&gt;The horizontal margins never collapse.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Furj7mr9n82mreso954dq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Furj7mr9n82mreso954dq.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7osydb3fqh1047zs3mmx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7osydb3fqh1047zs3mmx.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Even though it came with the idea of easing our lives, It can be really tricky to deal with margin collapse. This is mainly because of the many rules and exceptions has grown since the invention of it. One possible solution that it is easy to remember and understand is only applying margin-top to the elements. To read more about the possible solutions, &lt;a href="https://csswizardry.com/2012/06/single-direction-margin-declarations/" rel="noopener noreferrer"&gt;Harry Robert&lt;/a&gt; discuss more on his article.&lt;/p&gt;

&lt;p&gt;Follow me on &lt;a href="https://twitter.com/camfilho" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and comment down below your thoughts on this.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How I Joined Microverse Global School for Developers and How It Is Going So Far.</title>
      <dc:creator>Carlos Augusto de Medeir Filho</dc:creator>
      <pubDate>Sun, 06 Oct 2019 18:46:03 +0000</pubDate>
      <link>https://dev.to/camfilho/how-i-joined-microverse-global-school-for-developers-and-how-it-is-going-so-far-28h2</link>
      <guid>https://dev.to/camfilho/how-i-joined-microverse-global-school-for-developers-and-how-it-is-going-so-far-28h2</guid>
      <description>&lt;h3&gt;
  
  
  &lt;strong&gt;Disclaimer&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;I created this article way before having my referral link, so it's not a sponsored article.&lt;/p&gt;

&lt;p&gt;However, if you apply using my &lt;a href="https://www.microverse.org/?grsf=z2vsx8"&gt;referral link&lt;/a&gt; you are going to be marked as referred by me and I'm going to get discount on the program, so it's a wi-win!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is the Microverse Program?&lt;/strong&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Microverse is a global school for remote software developers where students learn through remote pair programming and don't pay anything until they get a job.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is one of the definitions that you find out when you Google (or &lt;a href="https://www.duckduckgo.com"&gt;&lt;strong&gt;DuckDuckGo&lt;/strong&gt;&lt;/a&gt;) about what Microverse is. Another definition may be:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Microverse is a dimension that can be reached from the Earth dimension by shrinking with Pym Particles and thus compressing the person's matter to a certain point, thereby forcing it through an artificially created nexus into the other universe.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Even though those definitions are all fine, the first one does not fully describe the &lt;em&gt;amazingness&lt;/em&gt; of what Microverse Pair Program really is.&lt;/p&gt;

&lt;p&gt;If you came here interested to know my a review about &lt;strong&gt;Microverse Program&lt;/strong&gt;, you are only allowed to go to the next section if you follow me on twitter 😛 &lt;a href="https://www.twitter.com/camfilho"&gt;@camfilho&lt;/a&gt;. &lt;em&gt;(I'm joking, you can move on now)&lt;/em&gt;.&lt;del&gt;But seriously, follow me so we can interact there, I just have 2 followers :(&lt;/del&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  A Little Bit of Context
&lt;/h2&gt;




&lt;p&gt;Here is my story: I'm Brazilian and I joined Electrical Engineering School in 2012 at UFRN (Brazil). In the upcoming five years of undergrad studies, one of the 10000 things that I've studied was about programming and really enjoyed it 💛 (&lt;em&gt;even though it was C/C++ the chosen language back the time haha&lt;/em&gt;). &lt;br&gt;
Since then, I've always dreamed about working in the IT industry as a software engineer, but the university never really allowed me to focus on the necessary skills to work as a Dev. All the programming skills that I used back then were to apply on control, optimization, network analysis and so forth. Even after graduating, I started my master's program and I never really put 100% of me on studying the nuances of software development, until September of 2019.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Beginning
&lt;/h2&gt;




&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IrYVFODl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://media.makeameme.org/created/so-youre-telling-5bb2293a4f.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IrYVFODl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://media.makeameme.org/created/so-youre-telling-5bb2293a4f.jpg" alt="Alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On August of 2019, I started to look around about the Microverse Program and got hooked by the premise of paying $0 upfront. What else did I want, learn the technologies that the industry is using on the and only pay when I get a job?!? I googled and DuckDuckGo about it,  trying to discover more about it and trying to find some reviews of past students. However, I could not find much information. Basically, I noticed some posts on a few forums and the students' stories on Microverse's web page. I was a little bit worried about making this commitment to a platform that I barely knew. But I had decided that I if was going to dive deep into the software engineering world, I would have to be ready to study it &lt;strong&gt;full time!&lt;/strong&gt; After that, I filled the first form and waited for their answer.&lt;/p&gt;




&lt;h2&gt;
  
  
  Update (04/10/2020)
&lt;/h2&gt;

&lt;p&gt;Hey, today it is 04/10/2020 and more than 1 year later I'm starting to write the second part of this article.I'm writing it because a lot of people contacted me to know more about the program. &lt;/p&gt;

&lt;p&gt;In this second part I'm going to tell you if I finished the program and how I' doing so far. &lt;strong&gt;Spoiler alert:&lt;/strong&gt; I got a job before finishing the whole curriculum.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Steps
&lt;/h2&gt;

&lt;p&gt;First I applied on their web page &lt;a href="https://www.microverse.org/?grsf=z2vsx8"&gt;Microverse&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  1. The Code Challenge
&lt;/h3&gt;

&lt;p&gt;After filling up their form, I received an e-mail with the instructions for the next steps. We had to solve a few coding challenges in order to get to the next step. The good thing is that they give us a "Prep Course" if you are new to coding or want to prepare for the coding challenges.&lt;/p&gt;

&lt;p&gt;Since I had prior experience with programming, mostly learned at the university, I have skipped the prep course and went direct to the next step.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Record a Video
&lt;/h3&gt;

&lt;p&gt;In this step, we had to record a small video talking a little bit about us and our motivation to study at &lt;strong&gt;Microverse Program&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Well, I'm a little bit shy to record my self or even taking a photo of me. Besides, my English conversation skills were a little bit rusty because I could not practice it every day. But once I made the commitment of entering the program, I recorded it and sent it to them without thinking twice.&lt;/p&gt;

&lt;p&gt;The next day, I got accepted to move forward to the next step!&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Coding Challenges
&lt;/h3&gt;

&lt;p&gt;Since I am usually programming small things, was able to solve all the challenges that they assigned to me. All of them were at Hacker Rank's site, which was nice because this is a really good platform.&lt;/p&gt;

&lt;p&gt;The goal here was to leverage our problem-solving skills rather than being picky in a specific language choice. We could use any programming language of our choice. I chose Python!&lt;/p&gt;

&lt;p&gt;Once more, &lt;strong&gt;I made it&lt;/strong&gt;! Next step, here I go!&lt;/p&gt;

&lt;h3&gt;
  
  
  3. The Trials
&lt;/h3&gt;

&lt;p&gt;This part of the application process was really interesting. In the trials, I got paired with 3 other applicants and we built a collaborative project with each one of them. The goal here was to see whether we could adapt to the &lt;strong&gt;pair programming&lt;/strong&gt; way of life. Also, they checked our English fluency level, our internet connection stability, and our microphone quality.&lt;/p&gt;

&lt;p&gt;In this step, I had to strictly follow the &lt;a href="https://medium.com/free-code-camp/how-remote-pair-programming-works-and-why-it-can-change-your-life-cd7b767dc60f"&gt;&lt;strong&gt;pair programming&lt;/strong&gt;&lt;/a&gt; methodology while on a call with my coding partner. First, each of us had to complete one coding challenge at Hacker Rank. After that, we pick one project among the list given to us. The process was simple:  We chose an initial role (driver, navigator) and then we constantly changed roles while committing to a Github Repo. We had 4 straight hours to complete the project + the coding challenge, then repeat the process with the next coding partner assigned to us.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vrnnDm-n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://media.makeameme.org/created/me-after-finishing-465ff5d8f9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vrnnDm-n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://media.makeameme.org/created/me-after-finishing-465ff5d8f9.jpg" alt="My after finishing 4 hours of coding trials"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  4. The Final Step
&lt;/h3&gt;

&lt;p&gt;After going through all the steps, I received the amazing news that I was able to move forward to the next final level.&lt;br&gt;
This step was simple yet the most important one: We had an acceptance call with the founder of &lt;strong&gt;Microverse Program&lt;/strong&gt; and we had to carefully read the &lt;strong&gt;ISA agreement&lt;/strong&gt; and send the required documents to them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Congratulation that you got this far! If you have more question, please don't hesitate in contacting me &lt;a href="https://www.twitter.com/camfilho"&gt;@camfilho&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;By the time that I'm writing this post, I am moving to the 4th week of the program. So far, I met incredible people from different cultures and regions of the world. We are in a constant sharing knowledge environment, where we not only learn about coding but also about being a world citizen. Of course, not everything is hunky-dory, we sometimes have to give in some initial ideas to the better of the group, especially when we are working with our coding partner. All in all, If you are interested in joining the Microverse Program, I strongly suggest you do it! Microverse staff is really helpful and they are in constant evolution. They really care about the students and, even better, you getting a job is also what they want, because we only pay when we get paid.&lt;/p&gt;

&lt;p&gt;If you are still in doubt and want to know more about it, I'm writing the second part of this post where I'm going to talk about how it is a daily life of a microverse student, what platform we use to learn and how they keep track and take care of us.&lt;/p&gt;

&lt;p&gt;If you have any questions about the program, please contact me over twitter.&lt;/p&gt;

&lt;p&gt;My &lt;a href="https://www.microverse.org/?grsf=z2vsx8"&gt;Microverse Referral link&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclaimer: I'm not sure which step came first if it was the 'coding challenge' or 'record a video'.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Let's keep in touch&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Liquid error: internal&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
