<?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>Forem: André Luis de Oliveira</title>
    <description>The latest articles on Forem by André Luis de Oliveira (@anddreluis2).</description>
    <link>https://forem.com/anddreluis2</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%2F838952%2Fb7ea939e-6d11-4591-b2b8-fef7cbf6e4d2.jpeg</url>
      <title>Forem: André Luis de Oliveira</title>
      <link>https://forem.com/anddreluis2</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/anddreluis2"/>
    <language>en</language>
    <item>
      <title>Tech in Football: the innovation kills the tradition?</title>
      <dc:creator>André Luis de Oliveira</dc:creator>
      <pubDate>Mon, 17 Feb 2025 01:22:34 +0000</pubDate>
      <link>https://forem.com/anddreluis2/tech-in-football-the-innovation-kills-the-tradition-5g2n</link>
      <guid>https://forem.com/anddreluis2/tech-in-football-the-innovation-kills-the-tradition-5g2n</guid>
      <description>&lt;p&gt;In early 2025 and this topic still open: the technologies used in modern football kills the tradition and the emotion of the 'old football'?. Our answer isn't so simple as it appears to be. In the past years, we are using even more features than ever, features like VAR, data analysis in apps like SofaScore, Footstats and we also can talk about the mordern arenas replacing the old and traditional stadiums. This points make us think about and agree with a point: the football as we know are changing and evolving with the techs.&lt;/p&gt;

&lt;p&gt;About VAR, in the middle 2022 it was such a polemic because of the human failures and bad use of this feature. Nobody was a hundred percent against it. But the main topic that I came here to talk is about data collect and analysis. It was a feature that the clubs use for a lot of reasons: scout, hiring new players and even to bet's market.&lt;/p&gt;

&lt;p&gt;For the data and tech enthusiasts, apps like SofaScore are the main tools to review a player performance, looking to ball-pass rating, shots on goal, expected goals and a lot more.&lt;/p&gt;

&lt;p&gt;It's undeniable that we have a lot of freak players like Erling Haaland that scored 23 times in 17 first appears in 2022/2023 season. Obviously the numbers are by your side, being considered the best striker of this generation. But in some cases, some players will be wronged in this analysis and it happens because the way that this data collect happens.&lt;/p&gt;

&lt;p&gt;The following text came from &lt;a href="https://www.sofascore.com/news/pontuacoes-estatisticas-sofascore/:" rel="noopener noreferrer"&gt;https://www.sofascore.com/news/pontuacoes-estatisticas-sofascore/:&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;"The football is a game that valorizes the goals, if you are part of a goal, your contribuition will be valorized even more in sofascore pontuation. Even further, football is more than just score goals, and we try to consider this complexity when we are creating a algorithm looking to give a equal oportunity to all players get a big pontuation. Looking this way if a player got a lot of disarms, fundamental passes, dribble and interceptions, theoretically, he can receive a higher pontuation than a player that scored twice but isn't involved in the match. It's about sports science that doesn't allow pre-concepts because it all goes to a machine that break tens of statistics to produce this pontuation."&lt;/p&gt;

&lt;p&gt;Despite this concern about the automation of football, algorithms doesn't look at a lot of facts. A lack for example: for the algorithm never will be a nice thing, but in 'real-life', a good lack can stop a counter attack that allows the adversary to score a goal.&lt;/p&gt;

&lt;p&gt;Pre-assists also are a topic to be discussed, regardless of the good numbers in analysis plataform, Bruno Guimarães from Newcastle United have a very peculiar characteristic: the dept pass between the defender and the side player, that allows a cross to the area. In this case, this pre-assist is contabilized just as a normal pass, when in reality it represents a trigger to a ofensive construction.&lt;/p&gt;

&lt;p&gt;This cases that I talked about are just some of the many problems that this data collect as we have nowadays can interfer in reality. This is something embryonary but I believe that this metrics have a lot to get better and help the clubs and the managers to deal with the players and competitivity of the championships, looking for better performances and funnier games to watch.&lt;/p&gt;

&lt;p&gt;The fact is: this is happening and we have to look about it. We cannot let the bad reasons like BET's analysis and this 'newbie' way to collect data affect the evolution of this sport that we all love so much.&lt;/p&gt;

&lt;p&gt;In the end: everything evolved with techology, why not football?&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Unpacking Tao of React #1</title>
      <dc:creator>André Luis de Oliveira</dc:creator>
      <pubDate>Mon, 01 Apr 2024 21:50:29 +0000</pubDate>
      <link>https://forem.com/anddreluis2/destrinchando-tao-of-react-1-21ee</link>
      <guid>https://forem.com/anddreluis2/destrinchando-tao-of-react-1-21ee</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Imagine you're a front-end dev and you don't know anything about software architecture. Now, imagine you have an interview tomorrow at exactly &lt;strong&gt;7:32 AM&lt;/strong&gt; and you need to absorb some core concepts—&lt;em&gt;fast&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;While browsing the internet, you stumble across a specific book—but unfortunately, you don't have enough time to read it (after all, the interview is literally &lt;strong&gt;tomorrow&lt;/strong&gt; at 7:32 AM 😵‍💫).&lt;/p&gt;

&lt;p&gt;If that sounds like you, this article (and the next ones) are for you.&lt;/p&gt;

&lt;p&gt;The book I'm talking about is &lt;a href="https://alexkondov.com/tao-of-react/" rel="noopener noreferrer"&gt;&lt;strong&gt;Tao Of React&lt;/strong&gt;&lt;/a&gt; by Alex Kondov.&lt;/p&gt;

&lt;p&gt;I decided to re-read it and share a few thoughts on how using some of its concepts worked for me &lt;strong&gt;in production&lt;/strong&gt;. I'll go through specific topics—from folder structure to external libraries and state management decisions.&lt;/p&gt;

&lt;p&gt;Let's dive in!&lt;/p&gt;




&lt;h2&gt;
  
  
  1 - Architecture
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;initially just folder organization lol&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  1.1 - The &lt;em&gt;common&lt;/em&gt; module
&lt;/h3&gt;

&lt;p&gt;The idea is simple: if you'll reuse it in more than one place, toss it in a &lt;code&gt;common&lt;/code&gt; folder.&lt;/p&gt;

&lt;p&gt;Not just components—hooks, helpers, utils, anything reusable. Abstract it and centralize.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
To avoid duplication and make maintenance easier.&lt;/p&gt;


&lt;h3&gt;
  
  
  1.2 - Absolute paths
&lt;/h3&gt;

&lt;p&gt;This might sound like nitpicking, but once your project scales, you'll be &lt;em&gt;grateful&lt;/em&gt; for following this.&lt;/p&gt;

&lt;p&gt;Avoid this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../../../../common/helpers/foo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Use this instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@common/helpers/foo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Clarity and flexibility. If you ever refactor folder structures, your imports stay clean and understandable.&lt;/p&gt;


&lt;h3&gt;
  
  
  1.3 - Wrap components inside folders
&lt;/h3&gt;

&lt;p&gt;Think about how you organize your clothes—you don't mix shirts and pants randomly.&lt;/p&gt;

&lt;p&gt;Now think about your components the same way.&lt;/p&gt;

&lt;p&gt;What's easier to understand and maintain?&lt;/p&gt;

&lt;p&gt;❌ Bad:&lt;br&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmlmy14w4z6w49m2datd9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmlmy14w4z6w49m2datd9.png" alt="bad practice" width="311" height="208"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;✅ Good:&lt;br&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9hv6pvoh40a417guqx4i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9hv6pvoh40a417guqx4i.png" alt="good practice" width="302" height="240"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h3&gt;
  
  
  1.4 - Route/Module structure
&lt;/h3&gt;

&lt;p&gt;Simple rule: &lt;strong&gt;Separation of Concerns&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Each page (or module) should only contain stuff related to itself.&lt;br&gt;&lt;br&gt;
If you're in the &lt;code&gt;home&lt;/code&gt; page folder, there shouldn't be any code about the &lt;code&gt;dashboard&lt;/code&gt; there.&lt;/p&gt;

&lt;p&gt;Easy.&lt;/p&gt;


&lt;h3&gt;
  
  
  1.5 - Modular dependencies
&lt;/h3&gt;

&lt;p&gt;Here's where I respectfully disagree with Alex Kondov.&lt;/p&gt;

&lt;p&gt;He mentions the &lt;strong&gt;Rule of Three&lt;/strong&gt;: it's okay to repeat something up to three times—on the third time, refactor and abstract.&lt;/p&gt;

&lt;p&gt;But I say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you're using something from module X in module Y—&lt;strong&gt;it's already reusable&lt;/strong&gt;. Move it to &lt;code&gt;common&lt;/code&gt;. Why wait?&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h3&gt;
  
  
  1.6 - External components
&lt;/h3&gt;

&lt;p&gt;Imagine using a UI library's &lt;code&gt;Button&lt;/code&gt; like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click Me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Suddenly, the library maintainers change it to:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;placeholder&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Click Me"&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you have to refactor &lt;em&gt;every instance&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Create a wrapper around external components. So if the API changes, you only need to update it in &lt;em&gt;one&lt;/em&gt; place.&lt;/p&gt;

&lt;p&gt;Yes, the example is exaggerated—but the lesson stands.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's next?
&lt;/h2&gt;

&lt;p&gt;In the next article: &lt;strong&gt;How to create a module efficiently?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Basically, a step-by-step to not mess things up when modularizing your app.&lt;/p&gt;




&lt;p&gt;That's it for now!&lt;br&gt;&lt;br&gt;
Hope you enjoyed the read—I'm writing this the way I wish someone had explained it to me. Feedback is welcome ✌️&lt;/p&gt;

</description>
      <category>react</category>
      <category>frontend</category>
      <category>architecture</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
