<?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: Victor Guzman</title>
    <description>The latest articles on Forem by Victor Guzman (@viguza).</description>
    <link>https://forem.com/viguza</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%2F386484%2F8235c669-fb49-40e4-93f9-ba17510e0d07.jpg</url>
      <title>Forem: Victor Guzman</title>
      <link>https://forem.com/viguza</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/viguza"/>
    <language>en</language>
    <item>
      <title>Coding without coding: What building with AI taught me</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Sat, 19 Apr 2025 12:32:40 +0000</pubDate>
      <link>https://forem.com/viguza/coding-without-coding-what-building-with-ai-taught-me-5ffl</link>
      <guid>https://forem.com/viguza/coding-without-coding-what-building-with-ai-taught-me-5ffl</guid>
      <description>&lt;p&gt;I’m a software engineer with nearly 15 years of experience. I’m currently director of engineering at a multinational company with over 150 engineers. Like many leaders in the tech industry, I’ve been watching AI move from novelty to necessity at an incredible pace.&lt;/p&gt;

&lt;p&gt;More and more companies aren’t just encouraging AI adoption, they’re making it a mandate. While I support this shift, I also know (as a manager) that not every developer is excited about it. So I decided to experience it firsthand. Not through a tutorial or a demo, but by building a real, live product, from scratch, using nothing but AI.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Idea: vinutils.com
&lt;/h3&gt;

&lt;p&gt;I could’ve built a simple to-do app. But I wanted something useful. Something real. Something I could publish.&lt;/p&gt;

&lt;p&gt;So I built &lt;a href="https://www.vinutils.com" rel="noopener noreferrer"&gt;vinutils.com&lt;/a&gt;, a free web tool for working with Vehicle Identification Numbers, things like validating, generating, or decoding VINs.&lt;/p&gt;

&lt;p&gt;The entire project was built in just a few nights over the course of a week, using a framework I had never used before. I used Cursor, in thinking mode, with the Sonnet 3.5 model. For a few features and images, I used ChatGPT.&lt;/p&gt;

&lt;p&gt;I didn’t write a single line of code manually. There were no code reviews. No product specs. No coordination with other teams. Just me, giving the AI a few prompts. The AI generated the code, fixed its own bugs, and made suggestions along the way. It felt fast, efficient, and, as someone who doesn’t code daily anymore, empowering.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Good, the Bad, and the Unsettling
&lt;/h3&gt;

&lt;p&gt;The most surprising thing? How well the AI could anticipate what I wanted. It often went beyond the prompt, and did it well. The speed of development, especially with an unfamiliar stack, was eye-opening. It made experimentation feel frictionless.&lt;/p&gt;

&lt;p&gt;But of course, it wasn’t perfect. There were bugs. Cursor crashed. Files were deleted by accident. Sometimes the AI got stuck in a loop. Other times, it hallucinated or misunderstood even clear prompts.&lt;/p&gt;

&lt;p&gt;And while I didn’t set out to learn the tech itself, I came away realizing: I hadn’t really learned it. Not the way I would’ve if I’d written everything by hand. The AI also made decisions, like which libraries to use, that I couldn’t fully vet. It worked, but I couldn’t always say it was the “right” way.&lt;/p&gt;

&lt;p&gt;That’s where things get dangerous.&lt;/p&gt;

&lt;h3&gt;
  
  
  What This Means for…
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Developers
&lt;/h4&gt;

&lt;p&gt;For junior devs, the biggest risk is over-reliance. Using AI for even the simplest tasks robs them of the analytical thinking that defines good software engineers. Keeping up with tech is already hard, now it’s even harder when speed and output expectations rise.&lt;/p&gt;

&lt;p&gt;But on the flip side, AI can be a fantastic silent mentor. It can explain code, walk through unfamiliar systems, and even do pair programming without needing to “bother” a teammate.&lt;/p&gt;

&lt;p&gt;For senior engineers, the pressure is different. Increased expectations from leadership, more code to review (often blindly trusted by the dev who wrote it), and the challenge of maintaining quality in an AI-accelerated world. But there are upsides too,  automating tedious tasks, validating ideas faster, and reclaiming time for higher-impact work.&lt;/p&gt;

&lt;h4&gt;
  
  
  Managers
&lt;/h4&gt;

&lt;p&gt;The biggest challenge is cultural: how do you get developers to buy into AI, and use it well?&lt;/p&gt;

&lt;p&gt;Used strategically, AI gives managers the chance to get closer to the code again, propose better solutions, and support teams more effectively. But even more important: it enables faster value delivery without growing the team proportionally. That means more experimentation, more iteration, and quicker feedback loop, all without organizational drag.&lt;/p&gt;

&lt;h4&gt;
  
  
  Companies
&lt;/h4&gt;

&lt;p&gt;AI isn’t magic, it comes with real costs. If used poorly, it can generate waste or tech debt. But used well, it increases delivery speed, product velocity, and innovation capacity.&lt;/p&gt;

&lt;p&gt;One overlooked impact: AI lowers the barrier to entrepreneurship. Anyone with an idea and a bit of time can now build and ship a product. That’s why we’re seeing a wave of solo founders and builders stepping out of corporate life to pursue their own paths.&lt;/p&gt;

&lt;h3&gt;
  
  
  Is This the Future?
&lt;/h3&gt;

&lt;p&gt;Absolutely. But it’s not a full replacement. Not yet, and maybe not ever.&lt;/p&gt;

&lt;p&gt;AI still needs human oversight, context, and judgment. It’s fast, yes. But we’re not at a point where we can trust it blindly. It’s not the end of the developer, it’s the next evolution of how we build.&lt;/p&gt;

&lt;h3&gt;
  
  
  If You’re Skeptical…
&lt;/h3&gt;

&lt;p&gt;I’d tell you this: AI is just another tool. A powerful one, yes, but still a tool. You don’t have to be afraid of it. You just have to understand it and learn how to use it well.&lt;/p&gt;

&lt;p&gt;Start small. Use it to explain code. Try it on a personal project. Let it surprise you. Once you experience the shift, it’s hard to ignore.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>ai</category>
      <category>vibecoding</category>
      <category>career</category>
    </item>
    <item>
      <title>How ChatGPT wrote my first chrome extension</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Sun, 19 Mar 2023 21:02:23 +0000</pubDate>
      <link>https://forem.com/viguza/how-chatgpt-wrote-my-first-chrome-extension-8dc</link>
      <guid>https://forem.com/viguza/how-chatgpt-wrote-my-first-chrome-extension-8dc</guid>
      <description>&lt;p&gt;As a developer, I've always been curious about building browser extensions. However, I never knew where to start. That was until I started using ChatGPT.&lt;/p&gt;

&lt;p&gt;With ChatGPT being the trending topic lately, I decided to run an experiment and test its capabilities. So, I decided to let ChatGPT build my very first chrome extension. And this is the blogpost on how it went.&lt;/p&gt;

&lt;h3&gt;
  
  
  About the extension
&lt;/h3&gt;

&lt;p&gt;ChatGPT taught me how to build my very first browser extension, &lt;a href="https://github.com/viguza/css-highlight" rel="noopener noreferrer"&gt;CSS Highlight&lt;/a&gt;. It allows users to highlight HTML elements with a specific class or ID using CSS.&lt;/p&gt;

&lt;h3&gt;
  
  
  About the process
&lt;/h3&gt;

&lt;p&gt;The first step in building this extension was creating the manifest.json file, which provides information about the extension, such as its name and version, and specifies which files it will use. ChatGPT helped me create the file by providing a template and explaining each section in detail.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"CSS-Highlight"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"manifest_version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"description"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Highlight HTML elements with a specific class or ID"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"icons"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"action"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"default_popup"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"popup/popup.html"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"default_title"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"CSS-Highlight"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"background"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"service_worker"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"background/background.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"content_scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"matches"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"http://*/*"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"https://*/*"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"&amp;lt;all_urls&amp;gt;"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"content/content.js"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"permissions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="s2"&gt;"activeTab"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once the manifest.json file was set up, ChatGPT helped me create the HTML, CSS, and JavaScript files for the extension. We started with the popup.html file, which contains the interface for the extension. ChatGPT guided me through the process of creating the layout and adding the necessary HTML elements.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"utf-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;CSS-Highlight&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/css"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"style.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"popup.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;CSS-Highlight&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;form&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h3&amp;gt;&lt;/span&gt;Search for:&lt;span class="nt"&gt;&amp;lt;/h3&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;select&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"searchType"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"both"&lt;/span&gt; &lt;span class="na"&gt;selected&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;All&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"class"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Class&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"id"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;ID&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/select&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"identifierInput"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"e.g. my-class"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"color"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"colorInput"&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"#ffdc00"&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"buttons-container"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"highlightButton"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Highlight&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"resetButton"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Reset&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;DOMContentLoaded&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;highlightButton&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;searchType&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;searchType&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;identifier&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;identifierInput&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;color&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;colorInput&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;identifier&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runtime&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sendMessage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;highlight&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;searchType&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;searchType&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;color&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="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;resetButton&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;searchType&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;both&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;identifierInput&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;colorInput&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#ffdc00&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runtime&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sendMessage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;reset&lt;/span&gt;&lt;span class="dl"&gt;'&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="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, we moved on to the content.js file, which is responsible for highlighting the HTML elements. ChatGPT helped me write the JavaScript code for the extension and explained how to use the Document Object Model (DOM) to manipulate the HTML elements on a web page.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;originalElements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

&lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runtime&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onMessage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;highlight&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;highlight&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;searchType&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;reset&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;reset&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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;highlight&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;class&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;elements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementsByClassName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;elements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;element&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="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;elements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`.&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;,#&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="nx"&gt;originalElements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="na"&gt;object&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;color&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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;reset&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;originalElements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;originalElements&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&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="nx"&gt;originalElements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With the help of ChatGPT, we were able to implement this background script using the WebExtensions API provided by the browser. The script listens for messages from the popup and content scripts, and relays those messages as needed. This allows for seamless communication between the different parts of the extension, making it work smoothly and efficiently for the user.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runtime&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onMessage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;highlight&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="na"&gt;active&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;currentWindow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sendMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tabs&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="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;reset&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="na"&gt;active&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;currentWindow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sendMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tabs&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="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;reset&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="k"&gt;break&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Final thoughts
&lt;/h3&gt;

&lt;p&gt;Throughout the process, ChatGPT was patient, clear, and knowledgeable. As a language model trained on a vast amount of data, it was able to provide me with accurate and relevant information and guide me through the development process in a way that was easy to understand.&lt;/p&gt;

&lt;p&gt;Building my first browser extension with ChatGPT was a fantastic experience. It was a great way to learn new skills, and I'm excited to see where this knowledge will take me in the future.&lt;/p&gt;




&lt;h3&gt;
  
  
  Real final thoughts
&lt;/h3&gt;

&lt;p&gt;You've probably figured it out by now, but I also asked ChatGPT to generate this blogpost based on the entire conversation. So everything you just read was written by ChatGPT.&lt;/p&gt;

&lt;p&gt;These are some of my conclusions (don't worry, these are written by me):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The first and most obvious are the limitations it has. Starting with the outdated and limited data. For example, the manifest.json originally created was in version 2 which is deprecated and I had to make manual changes to bring it up to version 3.&lt;/li&gt;
&lt;li&gt;Generating the correct prompt to get the desired response is not an easy task. On many occasions I had to rethink it or even start over.&lt;/li&gt;
&lt;li&gt;ChatGPT does not have all the answers. There was a specific error that took me a long time to figure out and after multiple attempts to get ChatGPT to give me the solution, I couldn't. To be fair, the error wasn't very well documented on google either.&lt;/li&gt;
&lt;li&gt;The time that ChatGPT saves us is enormous. I was able to create the extension in one night, with no prior experience. And best of all, I now have a much better understanding of the basics of a Chrome extension thanks to ChatGPT's explanations. So I coded and learned faster than ever before.&lt;/li&gt;
&lt;li&gt;I used GTP-3, and now I'm interested on seeing what GTP-4 would have done.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, what's next? I'm planning to continue building the extension for fun and learning purposes, and obviously publish it on the store.&lt;/p&gt;




&lt;h3&gt;
  
  
  Bonus thoughts
&lt;/h3&gt;

&lt;p&gt;I asked ChatGPT to write about its own limitations while doing this experiment:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ChatGPT is a language model and is limited by the quality and quantity of the data it was trained on.&lt;/li&gt;
&lt;li&gt;ChatGPT does not have the ability to interact with the browser environment directly, so it was unable to test the extension code in the context of the browser.&lt;/li&gt;
&lt;li&gt;The extension was built with a limited set of functionality, so it may not be suitable for more complex use cases.&lt;/li&gt;
&lt;li&gt;The extension was not tested across a wide range of browsers and operating systems, so there may be compatibility issues with certain configurations.&lt;/li&gt;
&lt;li&gt;ChatGPT is a language model and is not a substitute for an experienced developer who has a deep understanding of web development best practices and browser-specific quirks.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>ai</category>
      <category>chatgpt</category>
      <category>chromeextension</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Developer Fears: Staying Relevant</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Fri, 29 May 2020 23:24:47 +0000</pubDate>
      <link>https://forem.com/viguza/developer-fears-staying-relevant-ni9</link>
      <guid>https://forem.com/viguza/developer-fears-staying-relevant-ni9</guid>
      <description>&lt;h2&gt;
  
  
  About the series
&lt;/h2&gt;

&lt;p&gt;This is part of a series of posts dedicated to talk about the biggest fears that we face as developers.&lt;/p&gt;




&lt;p&gt;It took me a while to start this post and, being honest, I wasn’t even sure about writing it.&lt;/p&gt;

&lt;p&gt;Of course, I could just write the same things you can find everywhere: keep studying, take online courses, read, and so on. But you already know that!&lt;/p&gt;

&lt;p&gt;Instead, I’m going to share some things that I keep repeating myself when trying to stay up to date with tech. So, this is more like a how to avoid panicking rather than how to actually stay up to date.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Choose your needs
&lt;/h3&gt;

&lt;p&gt;I can't think about anything that evolves as quick as the tech stack. Every week (or even every day) you will see a new language, framework, platform, pattern, tool... you just name it.&lt;/p&gt;

&lt;p&gt;This makes it impossible to know all of them. And by know, I don't mean use it or read about it, I just mean know that it exists. So, my key is to choose what to learn based on the current needs, either mine or for the company.&lt;/p&gt;

&lt;p&gt;If you're new on a company, or planning to stay more time on it, then focus on the company tech stack.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make sure that you understand what type of company is: are they married with a defined stack or are they opened to innovation and trying new things?&lt;/li&gt;
&lt;li&gt;What is the current tech stack, so you can start learning about it soon.&lt;/li&gt;
&lt;li&gt;Are they planning new projects and considering new technologies? If so, then start reading about those. Even if they end up using a different technology, you will have learned something new.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But, if you're looking for a new job, then think about what you want and what the market is looking for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Decide what would you like to work on. To do this, check what the companies are looking for, what the current top technologies are. &lt;/li&gt;
&lt;li&gt;If you're feeling adventurous, look for things growing fast and that potentially will become popular in the short term. That would give you some advantage later when companies start moving into it.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Focus on the basics
&lt;/h3&gt;

&lt;p&gt;Once you have learned to code in 2 or 3 different languages, you will notice that underneath they are all similar and that a lot of stuff that you previously learned helped you to learn faster.&lt;/p&gt;

&lt;p&gt;That's why you should focus on more basic things. Rather than jumping right into a new language, first you need to learn how to create clean and quality code. Learn about different patterns and standards.&lt;/p&gt;

&lt;p&gt;All those things would make you a better developer, and the sooner you do that in your career the better.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Learn from your job
&lt;/h3&gt;

&lt;p&gt;People usually complains about having no time after work to study or learn new things. Well, we should learn to see the job as another source of knowledge.&lt;/p&gt;

&lt;p&gt;If you pay close attention, you will find a lot of different ways to learn at job:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Look at other people's code. You can learn about different coding styles, small tips on specific technologies and a bunch of things that you probably didn't know.&lt;/li&gt;
&lt;li&gt;Make sure to share knowledge. If you are, for example, learning about a new tool. Talk about it with your colleagues, it would help you remember what you learned and maybe they will learn something too.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. It’s not all about coding
&lt;/h3&gt;

&lt;p&gt;I've been conding for almost 10 years now, and this is something I learned on each company I've worked for: they value your coding skills, obviously. But something they value even more, is how much you get to know the company and business.&lt;/p&gt;

&lt;p&gt;And that, is my final advice, make sure to be the go-to person when people need to know something. That will put you on a nice position and you will be able to help everybody not only by coding.&lt;/p&gt;

&lt;p&gt;What about you? How do you keep relevant? Or what are your tips to avoid feeling overwhelmed?&lt;/p&gt;

</description>
      <category>fears</category>
      <category>career</category>
      <category>webdev</category>
      <category>motivation</category>
    </item>
    <item>
      <title>Developer Fears: Breaking Production</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Wed, 27 May 2020 21:26:00 +0000</pubDate>
      <link>https://forem.com/viguza/developer-fears-breaking-production-1emh</link>
      <guid>https://forem.com/viguza/developer-fears-breaking-production-1emh</guid>
      <description>&lt;h2&gt;
  
  
  About the series
&lt;/h2&gt;

&lt;p&gt;This is part of a series of posts dedicated to talk about the biggest fears that we face as developers.&lt;/p&gt;

&lt;h2&gt;
  
  
  There’s always a first time
&lt;/h2&gt;

&lt;p&gt;If you’re a new dev, you might be thinking: &lt;em&gt;”ha! It’s never happened to me”&lt;/em&gt;. Well, sorry to ruin your moment, but it’s just a matter of time.&lt;/p&gt;

&lt;p&gt;On the other side, people who have been coding for a while probably already did it or know someone who did and have some great stories to tell!&lt;/p&gt;

&lt;p&gt;But, don’t get me wrong, this is a good thing. Other than having funny stories to tell at the office, either if it was you or someone else, breaking production is one of the best moments that you have to learn and grow.&lt;/p&gt;

&lt;p&gt;And talking about funny stories, let me tell you 3 of my favorites. But more importantly, let’s see what we all learned from them and how that helped us to improve.&lt;/p&gt;

&lt;p&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%2Fi%2Fk63il7712swusr08pmiw.jpg" 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%2Fi%2Fk63il7712swusr08pmiw.jpg" alt="Alt Text" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The Jr hire that deployed on the first day 😱
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;It was the first day for a new junior dev. As part of the onboarding process, we let them follow the README with instructions on how to pull and set up the project locally.&lt;/p&gt;

&lt;p&gt;We were focused on our stuff when suddenly received a notification that a production deploy had been made... by the new guy.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;After a few seconds of panic, we determined that the deploy was triggered by a push to the canonical repo with no changes. Fortunately, nothing got broken and there were no casualties. What happened next?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Created a permissions policy:&lt;/strong&gt; we realized that we kept no track of who has access to what, and that allowed the guy to push to canonical when he shouldn't. After that, all grants were revoked and a new process was set up to ask for access as needed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Improved the README:&lt;/strong&gt; we also noticed that the root of the problem was that the document wasn’t clear on how/where to run the command. So, we updated it and also start encouraging people to update it during the onboarding if they notice something wrong with it.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  The SQL query without WHERE condition 😬
&lt;/h3&gt;

&lt;p&gt;This is a common one, especially if you work with data.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;There were a bunch of queries that need to be executed to update records on the database. The guy was selecting and running one query at the time and at some point he started screaming: &lt;em&gt;"rollback, rollback!!"&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;He half selected the last query and didn't include the WHERE clause, updating ALL the records in the database.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What did we learn from it?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Backups are really important:&lt;/strong&gt; thankfully, a backup was created before running the queries so it was easy to restore it. However, especially if it's a routine process, it's really easy to forget about backups and how important they are. Always make sure to create copies before starting any risky process.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Always test before running it live:&lt;/strong&gt; it doesn't matter if it's a query, a command, or a script. It's important to have another environment to test before doing it in production.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;💡 &lt;strong&gt;pro-tip:&lt;/strong&gt; &lt;em&gt;Start your queries by writing the WHERE clause, that way you make sure you don't forget about it.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The day that rollback didn’t fix it 💀
&lt;/h3&gt;

&lt;p&gt;This one actually happened to me.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We were seeing an issue on the staging environment causing the page not to load correctly and leaving the application on a useless blank page.&lt;/p&gt;

&lt;p&gt;We found the issue (or that's what we thought) and boom! It worked on staging. We immediately deployed to production, and it was supposed to be safe, but then we got the same error.&lt;/p&gt;

&lt;p&gt;So we did what we always do, revert the last deploy. It makes sense, right? Well, it didn't work!!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It took us 1 hour to figure out the problem. Which means that users were unable to use the site for 1 hour and that's bad, really bad. And here's what we learned from it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The backup plan won't always work:&lt;/strong&gt; we learned this the hard way. The revert was our backup plan in case of fire, but it's not bulletproof. It's useful to have a backup plan for your backup plan. In our case, it was to call DevOps team.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;It's not always code's fault:&lt;/strong&gt; After all, we discovered that the issue wasn't in the code that we deployed. Instead, it was a configuration in the deployment process causing the dependencies not to update properly. So, just don't assume it's always the code, and try to see the whole picture instead.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Conclusions
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Be careful!! Always double-check what you're doing and, if possible, ask someone else to look at it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;See something? Say something! The sooner you report the issue and everyone is aware of it, the sooner it can be solved and stop it from getting it worse.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Always learn as much as you can from it. I'm not saying that breaking production is a good thing nor encouraging you to do it. But if it happens, as long as we come out of it with a lesson learned or a process improved, it should be way less painful.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Have you ever broken production? Do you have any funny stories to share? Tell us!&lt;/p&gt;

</description>
      <category>fears</category>
      <category>career</category>
      <category>motivation</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Developer Fears: Legacy Code</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Tue, 26 May 2020 01:50:52 +0000</pubDate>
      <link>https://forem.com/viguza/developer-fears-legacy-code-2dol</link>
      <guid>https://forem.com/viguza/developer-fears-legacy-code-2dol</guid>
      <description>&lt;h2&gt;
  
  
  About the series
&lt;/h2&gt;

&lt;p&gt;This is part of a series of posts dedicated to talk about the biggest fears that we face as developers.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is legacy code?
&lt;/h2&gt;

&lt;p&gt;I’m sure that most of us have heard of legacy code, usually associated to something bad.&lt;/p&gt;

&lt;p&gt;You probably have your own definition for it, just like everyone else. But let’s (try to) put a face on it.&lt;/p&gt;

&lt;p&gt;I went through a lot of different pages looking for a standard to define what’s legacy code, and I came across with &lt;a href="https://understandlegacycode.com/blog/what-is-legacy-code-is-it-code-without-tests/" rel="noopener noreferrer"&gt;this definition&lt;/a&gt; and immediately felt identified with it:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Legacy Code is valuable code you’re afraid to change.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;or written differently&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Legacy Code is the code you need to change and you struggle to understand.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The important thing about this definition is to understand that every person has its own way to see legacy code and that it will depend on how familiar you are with the code and how do you feel about changing it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why code becomes legacy?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  No longer maintained
&lt;/h3&gt;

&lt;p&gt;There are many reasons to stop maintaining a piece of software:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It was successfully delivered&lt;/li&gt;
&lt;li&gt;The business priorities changed&lt;/li&gt;
&lt;li&gt;Limited budgets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Regardless of the reason, it’s imposible to keep updated a code that is no longer maintained, and it’s meant to become legacy.&lt;/p&gt;

&lt;h3&gt;
  
  
  Has no tests
&lt;/h3&gt;

&lt;p&gt;This is a trick one.&lt;/p&gt;

&lt;p&gt;It’s clear that anyone would be horrified of changing a piece of code that has no tests, specially if it’s a sensitive part of the software. And based on the initial definition, if you don’t feel comfortable, then it’s legacy code to you.&lt;/p&gt;

&lt;p&gt;However, tests can give a false confidence if we assume that they are as good as they should be. And as I see it, that’s even worst than coding worried because there are no tests.&lt;/p&gt;

&lt;h3&gt;
  
  
  Developer is not around
&lt;/h3&gt;

&lt;p&gt;The reality is, software is built through extensive periods of time, and usually it involves a lot of people working on the same code.&lt;/p&gt;

&lt;p&gt;On one side, that’s something good! The more people involved with the code, the more people that can help to work on it.&lt;/p&gt;

&lt;p&gt;However that’s not always the case. Sometimes, parts or even the whole software was in charge of a single person and, guess what? That person is no longer around, and it’s not documented, and has no tests... should I keep going?&lt;/p&gt;

&lt;h2&gt;
  
  
  What can we do?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  It’s not always bad
&lt;/h3&gt;

&lt;p&gt;Even though legacy code is considered to be a bad thing, that’s not always the case.&lt;/p&gt;

&lt;p&gt;Most of the time, legacy code is still production code and it’s doing it’s job. The only problem is that no one wants to touch it.&lt;/p&gt;

&lt;p&gt;What happens when the legacy code is no longer working as expected? That’s a whole different deal!&lt;/p&gt;

&lt;h3&gt;
  
  
  Your code will be legacy some day
&lt;/h3&gt;

&lt;p&gt;The truth is, you probably won’t be on the same place you are forever. And even if you do, you won’t remember every single piece of code you have written.&lt;/p&gt;

&lt;p&gt;Here are some things you can do to avoid nightmares to developers coming behind you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Write tests:&lt;/strong&gt; that would give people some confidence when changing it later.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Follow standards:&lt;/strong&gt; understanding code written with the same standards, make the task way easier.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Document:&lt;/strong&gt; yeah, probably you hate documenting too. But being honest, there’s no perfect code, and sometimes it’s just hard to read.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Reinvent the wheel or not?
&lt;/h3&gt;

&lt;p&gt;Some people, specially on the business side, might think that re-writing a piece of software will cost the exact same effort and money than the first time. It’s not always the case.&lt;/p&gt;

&lt;p&gt;You might want to balance both options, since each case is different from the other, redoing things sometimes is not that bad.&lt;/p&gt;

&lt;p&gt;In summary: legacy code is there and will continue to be there, it’s  relative to each person and we just can do small things to make it a little less painful.&lt;/p&gt;

&lt;p&gt;How do you deal with legacy code?&lt;/p&gt;

</description>
      <category>fears</category>
      <category>legacycode</category>
      <category>career</category>
      <category>coding</category>
    </item>
    <item>
      <title>Developer Fears: Estimation</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Sun, 24 May 2020 22:04:06 +0000</pubDate>
      <link>https://forem.com/viguza/developer-fears-estimation-5aof</link>
      <guid>https://forem.com/viguza/developer-fears-estimation-5aof</guid>
      <description>&lt;h2&gt;
  
  
  About the series
&lt;/h2&gt;

&lt;p&gt;This is the first part of a series of posts dedicated to talk about the biggest fears that we face as developers. Since that list can be huge, I'm not limiting it to a fixed number of parts and instead will let it grow as I get new ideas and suggestions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why are we (or think we are) so bad at it?
&lt;/h2&gt;

&lt;p&gt;There seems to be a consensus out there that agrees on the fact that we're bad when it comes to estimations. I don't think I know a developer that has never underestimated/overestimated a task. Don't worry, you're not alone.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.commitstrip.com/en/2012/04/24/the-wheel-of-estimation/" rel="noopener noreferrer"&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%2Fo0dzwl35o0edgfyz1bc8.jpg" alt="Alt text of image" width="650" height="522"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;However, when you hear all those stories, there are some common factors that could help us understand why the estimations were so wrong. Let's see some of them.&lt;/p&gt;

&lt;h3&gt;
  
  
  Unknowns
&lt;/h3&gt;

&lt;p&gt;Ideally, when you are going to estimate a new task, you will be provided with a detailed description of the requirements and scope. But let's face it, this is not an ideal world, and sometimes people are not clear about what they want but they still want to have an estimate.&lt;/p&gt;

&lt;p&gt;When this happens, you need to understand that you can just give them a quick guess based on the few info provided and the previous experience you have. But that it won't be, by no means, an estimate and it's pretty sure that it's gonna change.&lt;/p&gt;

&lt;h3&gt;
  
  
  Confidence
&lt;/h3&gt;

&lt;p&gt;No matter if it's under-confidence or overconfidence, this is an issue when trying to estimate things. Sometimes, developers tend to think that we can just sit and finish that task fast and clean and this can lead to underestimations. On the other hand, some developers don't trust their skills and usually overestimate tasks even if they're simple.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pressure
&lt;/h3&gt;

&lt;p&gt;This could be 2 things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internal:&lt;/strong&gt; developers can feel the need to demonstrate that they're good at their work, and that includes estimations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;External:&lt;/strong&gt; pressure can also come from people above us and, to be honest, that's most of the time.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Either if it's internal or external, we shouldn't let it to affect us. The truth is that it's ok not to know, and that we shouldn't give unreal estimates just to make us look good or to make people above happy.&lt;/p&gt;

&lt;h2&gt;
  
  
  Then, what can we do?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="http://dilbert.com/strip/2016-10-20" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.amuniversal.com%2F5b32eb906c790134d06d005056a9545d" alt="Alt text of image" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Don't worry, not all is lost. Here are some things that might help you to improve your estimates.&lt;/p&gt;

&lt;h3&gt;
  
  
  Choose an estimation technique
&lt;/h3&gt;

&lt;p&gt;These are usually given by the company. In my case, we use the &lt;a href="https://en.wikipedia.org/wiki/Fibonacci_scale_(agile)" rel="noopener noreferrer"&gt;Fibonacci scale&lt;/a&gt; to estimate tickets.&lt;/p&gt;

&lt;p&gt;Regardless the technique you use, the best thing you can do is estimate using ranges instead of explicit dates/times. This will give you some error margin to work with.&lt;/p&gt;

&lt;h3&gt;
  
  
  Break task
&lt;/h3&gt;

&lt;p&gt;If a task is too big to estimate, it probably can be broken into smaller tasks. Defining what's big depends on each organization/team, in my case a task can't be higher than 8 on Fibonacci scale.&lt;/p&gt;

&lt;h3&gt;
  
  
  Spikes are your friends
&lt;/h3&gt;

&lt;p&gt;I don't know what's your case but, to me, &lt;a href="https://en.wikipedia.org/wiki/Spike_(software_development)" rel="noopener noreferrer"&gt;spikes&lt;/a&gt; are present on almost every development iteration.&lt;/p&gt;

&lt;p&gt;And I have to say that they are super useful. Spikes bring clarity on how to approach a specific problem. Either if it's to create a small proof of concept or documenting a flow in the code, once you're done with it you will have a better understanding of what is involved on solving a problem.&lt;/p&gt;

&lt;h3&gt;
  
  
  What can we learn from all this?
&lt;/h3&gt;

&lt;p&gt;We're not alone, this is something that every single developer has to face at some point in their career. But most importantly, it's not (always) your fault. Estimates involve a lot of stuff, including external factors that sometimes we can't control.&lt;/p&gt;

&lt;p&gt;Have you ever been on a similar position? How do you deal with estimations? Tell us! We would love to hear about it and learn from it.&lt;/p&gt;

</description>
      <category>fears</category>
      <category>estimation</category>
      <category>career</category>
      <category>tips</category>
    </item>
    <item>
      <title>The First Post Experience</title>
      <dc:creator>Victor Guzman</dc:creator>
      <pubDate>Thu, 21 May 2020 23:01:58 +0000</pubDate>
      <link>https://forem.com/viguza/the-first-post-experience-56d6</link>
      <guid>https://forem.com/viguza/the-first-post-experience-56d6</guid>
      <description>&lt;p&gt;As developers, it's common to reach a time where we want to start writing. It doesn't matter if we are experienced or we just started our career, we always have something to say, something to share, something to teach.&lt;/p&gt;

&lt;p&gt;Well, today was that moment for me. After some time thinking about it and doing some research, I decided to sit down and write my very first post. And what better way to do it, than by sharing what I learned from all this?&lt;/p&gt;

&lt;p&gt;That's right, my very first post is about how I wrote my very first post (or how I call it: the post inception). And hopefully it's going to inspire other people, feeling insecure about it, to finally start writing.&lt;/p&gt;

&lt;h2&gt;
  
  
  What should I write about?
&lt;/h2&gt;

&lt;p&gt;Choosing a topic for your post can be overwhelming, but it shouldn't be. You can start with something general, that will help you to feel comfortable and prepare you to increase the level of your next posts.&lt;/p&gt;

&lt;p&gt;You can ask yourself some questions to help you identifying the topic of your post:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What do I feel comfortable enough to write about?&lt;/li&gt;
&lt;li&gt;Is there a new project, tool or technology that could be useful for other people and that I could teach them?&lt;/li&gt;
&lt;li&gt;Any recent news or articles that I would like to discuss about?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Answering those questions helped me a lot to decide my topic. After all the research and thinking, I realized that the whole process of writing your first post can be intimidating, so I decided to write about exactly that to help other people get over it.&lt;/p&gt;

&lt;p&gt;At the end, no matter what topic you choose, the most important thing to remember is that it's your first post, it probably won't and doesn't have to be perfect.&lt;/p&gt;

&lt;h2&gt;
  
  
  Organize your ideas before writing
&lt;/h2&gt;

&lt;p&gt;Before even typing the first word, it's important to estructure your ideas. Once you start preparing your post, you will notice that the amount of information available out there is overwhelming, and you can lose your flow really fast.&lt;/p&gt;

&lt;p&gt;Start by defining the title of your post. This could be one of the most difficult things, but it will help you to have a more clear idea of what you want to write. Even though, the title you decided at the beginning may not end up being the final title, it will help you narrow your topic enough to focus on something specific.&lt;/p&gt;

&lt;p&gt;Define the main ideas that you want to cover on the post and play around with them to identify the best order. You will know you are ready when you outline your post and can use it as a template that just need the gaps to be filled.&lt;/p&gt;

&lt;h2&gt;
  
  
  Write your post
&lt;/h2&gt;

&lt;p&gt;At this point you already know what you're gonna talk about, how are you gonna structure the content and it is time to start filling the blanks. There's not much to say here, but here are some advices that I found really useful:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Write short paragraphs:&lt;/strong&gt; big pieces of text can be hard to write and read, so make it easy for you and the readers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Find the right format:&lt;/strong&gt; a post can be structured in different ways depending on what you are writing. It could be a step-by-step guide, a few sections, etc.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Add images, video or graphics:&lt;/strong&gt; if possible, include some images or interactive content. That creates engagement and helps you break the content.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Proofread and adjust:&lt;/strong&gt; always proofread and edit your content as many times as you need, and make sure it has no typos or grammar errors.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Encourage feedback
&lt;/h2&gt;

&lt;p&gt;Last but not least, make sure to let everybody know that suggestions and comments are more than welcome, at the end you are writing this for them. There is a lot more to learn now that you are getting into writing, and there is people out there with a lot of experience willing to help you.&lt;/p&gt;

&lt;p&gt;Thanks for reading! I hope this really helps you.&lt;/p&gt;

</description>
      <category>writing</category>
      <category>firstpost</category>
      <category>motivation</category>
      <category>meta</category>
    </item>
  </channel>
</rss>
