<?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: scarlett</title>
    <description>The latest articles on DEV Community by scarlett (@scarlettperry).</description>
    <link>https://dev.to/scarlettperry</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%2F83630%2F6fa4c2c3-cd0f-4b54-98b8-5b066b537e97.jpeg</url>
      <title>DEV Community: scarlett</title>
      <link>https://dev.to/scarlettperry</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/scarlettperry"/>
    <language>en</language>
    <item>
      <title>Debugging Python code in the terminal (with examples)</title>
      <dc:creator>scarlett</dc:creator>
      <pubDate>Sun, 29 Dec 2019 17:46:11 +0000</pubDate>
      <link>https://dev.to/scarlettperry/debugging-python-code-in-the-terminal-with-examples-d39</link>
      <guid>https://dev.to/scarlettperry/debugging-python-code-in-the-terminal-with-examples-d39</guid>
      <description>&lt;p&gt;&lt;em&gt;For one of my projects, I wrote a new endpoint in a Flask application. My project had many pieces that built on each other, so I wanted to test in various ways and expand my backend debugging tool belt. Here are 3 tools I learned to use and now regularly use for debugging Python code.&lt;/em&gt; 🐍&lt;/p&gt;

&lt;h1&gt;
  
  
  1. curl
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://github.com/curl/curl" rel="noopener noreferrer"&gt;curl&lt;/a&gt; is a command line tool for making HTTP requests. I like it because it’s a quick way to test endpoints are doing what I expect, but I found writing a curl confusing at first.&lt;/p&gt;

&lt;h3&gt;
  
  
  Breaking down the anatomy of a curl
&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%2Fvwzrs1z248vevzhxa8yo.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%2Fvwzrs1z248vevzhxa8yo.png" alt="curl get request"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Example GET request to retrieve a specific student’s info&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;-v&lt;/code&gt;&lt;br&gt;
is optional and stands for &lt;em&gt;verbose&lt;/em&gt;. With it, you’ll see all the details of the request and response that are normally hidden, which can be useful for debugging.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;-H&lt;/code&gt;&lt;br&gt;
stands for &lt;em&gt;header&lt;/em&gt;, and it’s how to specify extra headers to include in the request, such as an authentication token. In my example, the endpoint can only be accessed by school employees, so I’ve added a header to indicate that I am making an internal origin request. Otherwise, the request response would say I’m unauthorized. (It's not necessary to know what Envoy is for the example, but here’s more info if you’re curious: &lt;a href="https://www.envoyproxy.io/" rel="noopener noreferrer"&gt;1&lt;/a&gt; &amp;amp; &lt;a href="https://www.envoyproxy.io/docs/envoy/v1.9.0/configuration/http_conn_man/headers#x-envoy-internal" rel="noopener noreferrer"&gt;2&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;You don’t always have to specify extra headers (depends on the API or type of request), and you can include many headers in your request.&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%2F9j7pohvit895bydaqtwb.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%2F9j7pohvit895bydaqtwb.png" alt="curl post request"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Example POST request to make a new student&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;-X POST&lt;/code&gt;&lt;br&gt;
will perform a POST request. &lt;code&gt;-X&lt;/code&gt; allows you to change the HTTP method used because the default is GET.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;-d&lt;/code&gt;&lt;br&gt;
stands for &lt;em&gt;data&lt;/em&gt;. With this option, you can specify what data you’re sending to the HTTP server, in the same way that a browser does when you fill out a form and click the submit button. There are various ways to pass data in a curl POST request; in my example, I’m sending JSON.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Content-Type&lt;/code&gt;&lt;br&gt;
Since I’m sending data, I need to let the server know the &lt;a href="https://www.talend.com/blog/2015/12/10/understanding-http-content-negotiation/" rel="noopener noreferrer"&gt;format of the data&lt;/a&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  2. Python Interpreter
&lt;/h1&gt;

&lt;p&gt;The &lt;a href="https://docs.python.org/3/tutorial/interpreter.html" rel="noopener noreferrer"&gt;Python interpreter&lt;/a&gt; is a tool that comes with your Python installation. It’s an interactive &lt;a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop" rel="noopener noreferrer"&gt;REPL&lt;/a&gt; in which you can type and execute Python code. I use it often to import and interact with the files I’ve written.&lt;/p&gt;

&lt;h3&gt;
  
  
  Getting Acquainted
&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%2Fhjowzhyglasvj9h43wlu.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%2Fhjowzhyglasvj9h43wlu.png" alt="test db model schema in python interpreter"&gt;&lt;/a&gt;&lt;br&gt;
&lt;code&gt;service_venv ipython&lt;/code&gt;&lt;br&gt;
is how I launch the interpreter. But it’s more commonly invoked by typing &lt;code&gt;python&lt;/code&gt; or &lt;code&gt;python3&lt;/code&gt;  (depending on your installation). Note: &lt;a href="https://ipython.readthedocs.io/en/stable/interactive/tutorial.html" rel="noopener noreferrer"&gt;IPython&lt;/a&gt; provides extra features than the standard Python interpreter, but the examples I’m showing can be performed in the standard interpreter as well.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;from app.models.student import *&lt;/code&gt;&lt;br&gt;
imports the specific file to use in the interpreter. I am specifying the directory path of the &lt;em&gt;student.py&lt;/em&gt; file: there’s a folder &lt;em&gt;app&lt;/em&gt; at the top level directory which contains the folder &lt;em&gt;models&lt;/em&gt; which contains the file &lt;em&gt;student.py&lt;/em&gt;. &lt;code&gt;import *&lt;/code&gt; states that I want everything (&lt;code&gt;*&lt;/code&gt;) in that file. Note: when importing a file, do not add the file ending.&lt;/p&gt;

&lt;p&gt;The import statement is necessary; without it, in my example, &lt;code&gt;StudentModel&lt;/code&gt; and &lt;code&gt;.save()&lt;/code&gt; would be undefined and the Python interpreter would throw an error message.&lt;/p&gt;

&lt;p&gt;Everything’s setup, and now I can test if my code is working as expected!&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%2Fsbstmt64we5zxw7ap78p.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%2Fsbstmt64we5zxw7ap78p.png" alt="python method"&gt;&lt;/a&gt;&lt;br&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%2F2sa0sha75ghusbt5f6za.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%2F2sa0sha75ghusbt5f6za.png" alt="testing python method in python interpreter"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this example, I'm testing a specific method &lt;code&gt;get_students&lt;/code&gt; in the Python interpreter.&lt;/p&gt;

&lt;p&gt;What are some investigations I could do? Perhaps I can test what happens when a user passes in a string value. Or I can see what happens if a user passes in a valid integer value but a student with that id doesn't exist. Am I returning a helpful error message? In the method &lt;code&gt;get_students&lt;/code&gt;, I haven't done error handling...yet! In my experience, testing in the Python interpreter has been great for "ooooh yeah need to add that" realizations.  &lt;/p&gt;

&lt;h2&gt;
  
  
  3. Pytest
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://docs.pytest.org/en/latest/getting-started.html" rel="noopener noreferrer"&gt;Pytest&lt;/a&gt; is a Python testing framework that can be setup quickly to run tests and report the results. It’s also another command line tool!&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%2Fy3h11b0lph26bk3sozxv.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%2Fy3h11b0lph26bk3sozxv.png" alt="testing a method with pytest"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here’s an example of an integration test that tests that a GET call returns the expected data.&lt;/p&gt;

&lt;p&gt;I learned how to write tests by studying examples, and I was confused by what values were in a test, like &lt;em&gt;json_body&lt;/em&gt;. So, I'd take tests a part and add print statements, like in the example below. But when running the test, I wouldn't see the output of the print statements. 🧐&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%2Fi1ttn5grckzlft855ul3.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%2Fi1ttn5grckzlft855ul3.png" alt="testing a method with pytest"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;-s&lt;/code&gt;
&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%2Flzs8eg1p362tjbqbjezo.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%2Flzs8eg1p362tjbqbjezo.png" alt="seeing the console output of pytest results"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;python -m pytest&lt;/code&gt;&lt;br&gt;
is how to &lt;a href="http://doc.pytest.org/en/latest/usage.html" rel="noopener noreferrer"&gt;invoke testing&lt;/a&gt; through the Python interpreter. &lt;code&gt;service_venv&lt;/code&gt; is specific to my development environment.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;tests/integration/test_student_resource.py&lt;/code&gt;&lt;br&gt;
is the directory path of the file I want to test.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;-s&lt;/code&gt;&lt;br&gt;
is the star of this example. Adding this &lt;a href="https://stackoverflow.com/questions/14405063/how-can-i-see-normal-print-output-created-during-pytest-run" rel="noopener noreferrer"&gt;option&lt;/a&gt; allows all print statements in tests to get printed in the terminal when the tests is run. Now I'd be able to see the value of &lt;em&gt;print(json_body)&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Pytest is a powerful tool with powerful features, but this small &lt;code&gt;-s&lt;/code&gt; flag has helped me to debug and learn how to write tests.&lt;/p&gt;

&lt;p&gt;And that's it! I'm excited to see what other debugging tools I pick up as I continue to work on backend projects.&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4b38m3x90cy238xssjbv.gif" 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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4b38m3x90cy238xssjbv.gif" alt="that's all folks!"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>tutorial</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Deploying to Production 101: deploying safely and putting out fires</title>
      <dc:creator>scarlett</dc:creator>
      <pubDate>Wed, 30 Oct 2019 16:27:21 +0000</pubDate>
      <link>https://dev.to/scarlettperry/deploying-to-production-101-deploying-safely-and-putting-out-fires-92j</link>
      <guid>https://dev.to/scarlettperry/deploying-to-production-101-deploying-safely-and-putting-out-fires-92j</guid>
      <description>&lt;p&gt;What can make deploying to production scary? Perhaps it’s your first time going through the process. Or you’re deploying to a service with high user traffic. Or your Pull Request introduces potentially risky changes. &lt;strong&gt;Check&lt;/strong&gt;, &lt;strong&gt;check&lt;/strong&gt;, &lt;strong&gt;&lt;em&gt;check&lt;/em&gt;&lt;/strong&gt; - these scenarios applied to my first major deploy. I was also hit by &lt;a href="https://github.com/Netflix/chaosmonkey" rel="noopener noreferrer"&gt;chaos monkey&lt;/a&gt; during it (more info on &lt;a href="https://www.gremlin.com/community/tutorials/chaos-engineering-the-history-principles-and-practice/" rel="noopener noreferrer"&gt;chaos engineering&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;Things went sideways during my first major deploy to production, but from the experience, I learned how to conduct better deploys and gained a stronger understanding of what and how to monitor.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/cJT8hgZsfTwPG5orV9/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/cJT8hgZsfTwPG5orV9/giphy.gif" alt="Shrek putting out a fire"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  What is "deploying"?
&lt;/h1&gt;

&lt;p&gt;Your API or frontend service on &lt;em&gt;localhost:8080/3000&lt;/em&gt; can’t be accessed by others if they go to that URL from their computer. It lives on your computer and can be accessed only by you.&lt;/p&gt;

&lt;p&gt;Generally speaking, deploying is the process of taking your local development environment and making it publicly available on a remote host,  allowing other users with the URL to access your application. The deployment process is continuous; as you make updates to your application locally, you deploy the new code to make it publicly available.&lt;/p&gt;

&lt;h1&gt;
  
  
  How to deploy?
&lt;/h1&gt;

&lt;p&gt;Deployment processes vary. &lt;/p&gt;

&lt;p&gt;I deployed my Flatiron School Ruby on Rails, React &lt;a href="https://github.com/scarlettperry/new-art-city" rel="noopener noreferrer"&gt;final project&lt;/a&gt; to Heroku with a few terminal commands.&lt;/p&gt;

&lt;p&gt;At work, my deploys are a multi-step process in which I release new code in stages and to different environments, as opposed to releasing it fully to production right away. The environments/steps are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Staging&lt;/strong&gt;: A sandbox environment that is nearly identical to production. In this step, the new code is tested and monitored to ensure everything is working in harmony under a production-like environment.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Canary&lt;/strong&gt;: A single production node. In this step, the new code is released to a small percentage of real users and monitored for any issues that might not have been caught earlier.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;More subsets of production&lt;/strong&gt;: In this step, the new code is released to more production nodes but not yet all of production. And (as you've guessed by now) it is &lt;em&gt;monitored&lt;/em&gt;, &lt;em&gt;monitored&lt;/em&gt;, &lt;em&gt;monitored&lt;/em&gt; before released to 100% of production.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Production&lt;/strong&gt; 🎉&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The multi-step process is great because it’s a series of gates to catch any bugs before the new code is put in front of users. The deploy doesn’t run on its own, however. At each step, engineers approve if the new code gets to pass onto the next, so the success of a deployment process like this depends on understanding how to monitor and following best practices.&lt;/p&gt;

&lt;h1&gt;
  
  
  Best Practices
&lt;/h1&gt;

&lt;p&gt;From my first major deploy that went awry, I learned the key things to practice in future deploys. Here’s my advice, which hopefully can be applied to your process.&lt;/p&gt;

&lt;p&gt;(1) &lt;strong&gt;Let the new code “bake” longer in each deployment phase&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fe53788ff84946d76cf50e4686bad06b2%2Ftenor.gif%3Fitemid%3D7922321" 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%2Fmedia1.tenor.com%2Fimages%2Fe53788ff84946d76cf50e4686bad06b2%2Ftenor.gif%3Fitemid%3D7922321" alt="cake is baked too long"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At work, teams define how long you must wait on staging, canary, etc. before moving on to the next step. We call this wait period “baking”, in which you see if any errors manifest from and/or alarms are set off by the new changes you’ve introduced to the application. Once you’ve waited the bake period and verified that all is well, you can proceed to the next deployment phase. I like to wait an additional 10-15 minutes in each step for extra monitoring and QAing to make sure I feel confident that the new changes are safe to roll out to production.&lt;/p&gt;

&lt;p&gt;(2) &lt;strong&gt;Monitor, monitor, monitor, and then monitor some more&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://i.giphy.com/media/fV5W4OhCwXAq49K03C/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/fV5W4OhCwXAq49K03C/giphy.gif" alt="person watching oven closely"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A successful deploy is hinged on thorough monitoring, and it starts with understanding how the code you're going to deploy interacts with the rest of the application and what kinds of errors/issues you want to be on the lookout for. Also, it’s important to get comfortable with your team’s monitoring tools and understand what purpose they serve. For example, the tools I use during deploys fall into two investigation modes: is something broken? how is it broken? For the former, I look to Grafana for a big picture overview on whether the system is healthy and changes to key stats (ie. number of 5xx responses). For investigating how something is broken, I use Kibana to look at individual logs and do queries (ie. filtering logs by whether they are classified as a warning, error, or  critical) to trace where in the application the issue is happening.&lt;/p&gt;

&lt;p&gt;(3) &lt;strong&gt;Actively communicate with teammates when there is an issue&lt;/strong&gt;&lt;br&gt;
Seeing your deploy go on 🔥 can be scary, but everyone has gone through/will go through a problematic deploy. Alert your team if something goes wrong and include any helpful information in the message, like links to graphs or logs that show what/where the issue is. Get confirmation on what to do next if you’re unsure - pause your deploy? rollback? An application is owned by a team, and everyone shares the responsibility to keep it healthy and running.&lt;/p&gt;

&lt;p&gt;Anything can happen during a deploy—related or unrelated to your code changes, which is why I find the process intimidating. But learning how to make the deployment process in itself a safeguard has made me feel more equipped to conduct deploys successfully.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>devops</category>
    </item>
    <item>
      <title>Linting an Existing Application: 3 Key Things I Learned</title>
      <dc:creator>scarlett</dc:creator>
      <pubDate>Sun, 08 Sep 2019 21:43:31 +0000</pubDate>
      <link>https://dev.to/scarlettperry/linting-an-existing-application-3-key-things-i-learned-bpp</link>
      <guid>https://dev.to/scarlettperry/linting-an-existing-application-3-key-things-i-learned-bpp</guid>
      <description>&lt;p&gt;I’m here to write on something I’m really proud of doing at work: linting an un-linted production codebase! For one of my onboarding tickets, I set up TSLint in the build of a React project - meaning code with linting errors can’t be merged to master. Linting would be 100% necessary! Yay! What this also meant for me was fixing a ton of existing linting errors.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/LLR3cBvqxpamY/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/LLR3cBvqxpamY/giphy.gif" alt="cleaning gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I had never linted my personal projects, so this process was new to me. I also wasn't too familiar with the codebase and it used TypeScript, which I don’t know. #challengeaccepted. Throughout the linting process, I thought a lot about linting best practices and researched many of the TSLint error messages to understand what was wrong with the code. Here are 3 key things I learned while working on this project:&lt;/p&gt;

&lt;h1&gt;
  
  
  Enable TSLint to Auto Fix Errors
&lt;/h1&gt;

&lt;p&gt;Some of the linting errors were easy fixes such as missing semicolons, trailing whitespaces at the end of a line, consecutive blank lines, etc. Though easy to fix, it would have been time consuming to fix them manually. There’s always a better way, and I learned that you can enable your IDE to automatically fix eligible linting errors.&lt;/p&gt;

&lt;p&gt;Here’s how I set it up in VS Code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Download the &lt;a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin"&gt;TSLint extension&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;In VS Code's &lt;em&gt;settings.json&lt;/em&gt; file, add:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;”editor.codeActionsOnSave”: { “source.fixAll.tslint”: true }
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h6&gt;
  
  
  (&lt;code&gt;Prefences&lt;/code&gt; -&amp;gt; &lt;code&gt;Settings&lt;/code&gt; -&amp;gt; search for "settings.json" -&amp;gt; select &lt;code&gt;Edit in settings.json&lt;/code&gt;)
&lt;/h6&gt;

&lt;p&gt;To get the automatic TSLint fixes, I went directly to the file with linting errors and just saved it; I didn’t need to make any changes to the file. I preferred this method over running the terminal command &lt;code&gt;tslint —fix&lt;/code&gt; (which would automatically fix all eligible linting errors across the whole application) since I wanted to get more familiar with the codebase and understand the code in those files. &lt;/p&gt;

&lt;p&gt;Check out &lt;a href="https://palantir.github.io/tslint/rules/"&gt;TSLint core rules&lt;/a&gt; to see what linting errors are eligible to be fixed automatically; search for the “Has Fixer” flag.&lt;/p&gt;

&lt;h1&gt;
  
  
  Silence &lt;em&gt;Some&lt;/em&gt; Errors
&lt;/h1&gt;

&lt;p&gt;For some of the errors, I wondered about their severity and &lt;em&gt;what linting errors are fine to ignore?&lt;/em&gt; I searched for &lt;a href="http://help.embold.io/tslint-high/"&gt;articles&lt;/a&gt; on this topic and asked around and ultimately learned this is subjective. I started looking at other React projects that used Typescript at the company and compared &lt;em&gt;tslint.json&lt;/em&gt; files (where linting rules can be silenced) to see if there was a standard practice. Here's an example of how to silence TSLint rules in &lt;em&gt;tslint.json&lt;/em&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt; "rules": {
      "object-literal-key-quotes": false,
      "no-any": false
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Silencing a rule in the &lt;em&gt;tslint.json&lt;/em&gt; file ignores the rule overall but you can also silence a single instance of a linting error. The latter is a great alternative if generally you think the TSLint rule is important to address but want to make an exception for a certain line of code. Perhaps there’s a reason to keep the line of code the same or perhaps TSLint incorrectly flagged there was an error (this happened on a few occasions). To ignore an instance of a linting error, place this above the flagged line of code: &lt;br&gt;
&lt;code&gt;// tslint:disable-next-line: &amp;lt;name-of-linting-rule&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// tslint:disable-next-line: react-unused-props-and-state
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h1&gt;
  
  
  Carefully Review Lint Fixes
&lt;/h1&gt;

&lt;p&gt;I used Version Control in VS Code to quickly and easily review the changes made, especially if they were from automatic fixes. I was concerned about over-linting, breaking a feature, or introducing a new bug, so as I fixed linting errors I tested that the application was still working as expected. Through linting the application slowly, I also noticed a few instances where TSLint mistakenly flagged an error. For example, a few lines were flagged with &lt;code&gt;react-unused-props-and-state&lt;/code&gt; but the props &lt;em&gt;were&lt;/em&gt; being used in the file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/lxfXcVFaE42By/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/lxfXcVFaE42By/giphy.gif" alt="suspicious gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For me, addressing linting errors in small batches and in a controlled manner was the best way to make sure I was linting properly and to review and test changes.&lt;/p&gt;

&lt;p&gt;I learned a lot through this experience and am happy that I contributed in an important way to ensure consistent coding style and improve the development process for my teammates.&lt;/p&gt;

&lt;p&gt;I’ll end this post with a linting playlist. Fixing linting errors can take a while and listening to music helps keep your mood 🌞🌞🌞.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="100%" height="380px" src="https://open.spotify.com/embed/playlist/1yZdw9xRtSwCQF0fL8VrJV%20"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>react</category>
      <category>typescript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
