<?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: Kara Luton</title>
    <description>The latest articles on DEV Community by Kara Luton (@karaluton).</description>
    <link>https://dev.to/karaluton</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%2F7624%2Fcb682b98-f3a6-4c3a-bc8a-9aa94f18c3d6.jpg</url>
      <title>DEV Community: Kara Luton</title>
      <link>https://dev.to/karaluton</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/karaluton"/>
    <language>en</language>
    <item>
      <title>A Guide to Perfecting Pull Requests</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Thu, 20 Jul 2023 16:51:26 +0000</pubDate>
      <link>https://dev.to/karaluton/a-guide-to-perfecting-pull-requests-2b66</link>
      <guid>https://dev.to/karaluton/a-guide-to-perfecting-pull-requests-2b66</guid>
      <description>&lt;p&gt;I don't know about you but I love the feeling of getting to hit the merge button on my code and sending it off to production. That's our ultimate goal as software engineers - to get our code out there into the world. However, unless you're living life on the edge, there's a big hurdle to overcome before getting to push that merge button - getting approvals on your pull request. Let's talk about how to make the best of your PRs that way your reviewers know exactly what they're looking at and you get to hit that merge button faster.&lt;/p&gt;

&lt;p&gt;Pull requests are telling the story of your changes. They are a conversation between you and your reviewers and as the author of the story you want to make sure the process of reviewing your PR is as easy as possible. It is vital that our PRs give everything to our reviewers that they may need. They should concisely describe our motives and thoughts behind our changes all the while preemptively answering any questions our reviewers may have.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/7JzoBM-dAAw?start=5"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Outlining Your PR
&lt;/h2&gt;

&lt;p&gt;Just like a good story, our pull request should begin with an outline of its chapters. In our case, our chapters are our commits. We've all seen commits that provide absolutely no insight into what has gone on but each commit message should show a progression in your pull request story. &lt;/p&gt;

&lt;p&gt;The subject line of your commit should give an overview of the changes made while the body should provide additional context such as why the changes were made, any possible future implications, and a reference to the ticket or issue number. &lt;/p&gt;

&lt;p&gt;Using &lt;a href="https://www.conventionalcommits.org/en/v1.0.0/"&gt;conventional commits&lt;/a&gt; can help provide even more at-a-glance insight. &lt;/p&gt;

&lt;h2&gt;
  
  
  Organizing Your PR
&lt;/h2&gt;

&lt;p&gt;Having explicit commit messages is important but in order for your story to be understood those commits need to be organized in a way that makes sense. You want to make sure your reviewers can easily follow the story you're telling about your changes. &lt;/p&gt;

&lt;p&gt;But what if you have to implement a fix or refactor something later on and you've already made commits? That's totally ok! As developers, we have the power to change history with rebasing. If you aren't familiar with rebasing it allows us to rework our commits. You can change the order, rewrite your commit messages, or even squash two or more commits together. Here's a &lt;a href="https://dev.to/karaluton/explain-like-i-m-five-git-rebase-vs-merging-1k69"&gt;quick TLDR&lt;/a&gt; on the difference between rebasing and merging.&lt;/p&gt;

&lt;h2&gt;
  
  
  Paying Attention to the Size of Your PR
&lt;/h2&gt;

&lt;p&gt;If our commits are the chapters to our pull request then our actual code implementations and changes are the story itself. It's important that we pay attention to the size of our story. There's a computer programming principle called the &lt;a href="https://en.wikipedia.org/wiki/Single-responsibility_principle"&gt;Single-Responsibility Principle&lt;/a&gt;. It states...&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Every module, class or function in computer programming should have responsibility over a single part of that program's functionality, and it should encapsulate that part. All of that module, class or function's services should be narrowly aligned with that responsibility.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To summarize, a single module, class or function should only focus on one thing. That same concept applies to pull requests. You may think that a PR that touches a lot of files would receive more comments than a smaller PR but a &lt;a href="https://smartbear.com/learn/code-review/best-practices-for-peer-code-review/"&gt;study&lt;/a&gt; revealed that developers should review no more than 200-400 lines of code at a time. Beyond 400 lines of code, the ability to find defects diminishes. &lt;/p&gt;

&lt;p&gt;So by breaking a large pull request into several smaller ones you're actually increasing the chance that you'll receive feedback and the potential for your reviewers to catch a bug they may have missed if the PR was larger. &lt;/p&gt;

&lt;h2&gt;
  
  
  Your PR's Introduction
&lt;/h2&gt;

&lt;p&gt;We’ve covered the chapters to our PR story and the story itself but what’s a good story without an introduction? That’s where our title and description come in. &lt;/p&gt;

&lt;p&gt;A pull request title is the first bit of information you're providing to your reviewers for what they are about to look at. It needs to give a concise overview of what is happening in the PR. The description is where you can provide more detail for your reviewers or anyone looking at your PR in the future. &lt;/p&gt;

&lt;p&gt;Remember to never assume the reader's prior knowledge of the area of the codebase you're working in. It's your job as the author to provide the context to them. You can do this through including information on the "what", the "why", and the "how" of your changes.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;what&lt;/strong&gt; should provide explicit details on the changes in your pull request. Remember how our commits are the outline of our story? This is where they come into play. Use your commit messages as a baseline for explaining your changes to your reviewers. Expand on what you wrote previously with a bit more detail. This section of your description should also include any lingering TODOs linked to their follow-up ticket. &lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;why&lt;/strong&gt; should explain the reasoning behind your changes including any architectural decisions you made and any possible implications from those decisions. This can include user stories for why this specific feature was added, thoughts behind refactoring you did, or even explaining your thought process. &lt;/p&gt;

&lt;p&gt;Lastly is the &lt;strong&gt;how&lt;/strong&gt;. How are your reviewers supposed to test your code? Go through the steps to reproduce your changes in a demo environment. You want to be as explicit as possible - provide direct links for the route that needs to be tested and any feature flags or permissions they may need. You also want to make sure the exact scenarios you want tested are laid out. For example, certain steps your reviewers may need to take to show an error state. &lt;/p&gt;

&lt;h2&gt;
  
  
  Become Your Own Reviewer
&lt;/h2&gt;

&lt;p&gt;Before adding any reviewers to a pull request I become my own reviewer. I look through each of my commits to make sure they're linear and self-explanatory and take a look at the code itself too. While doing this I often annotate my own PR commenting on specific lines of code that may leave your reviewers with questions. You can use this to explain why you chose to do something a particular way like if the direction to go was a little outside of the norm or you can highlight a line of code to get more opinions on it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Continuing the Conversation
&lt;/h2&gt;

&lt;p&gt;Now that you’ve put together the story of your pull request, added your reviewers, and officially opened your PR you would think that things end there, however, the conversation around your changes are only beginning. The entire point of a pull request is to get eyes on your code so others can catch bugs or provide feedback. An essential part of the PR process is responding to that feedback. &lt;/p&gt;

&lt;p&gt;Pull requests are a story and you should be having conversations around that story with your reviewers. Whether you only get one or two comments or ten, you’ll want to make sure to reply to every single one. Pull requests should not be merged until every comment has been addressed whether that’s implementing a suggestion or not. If you do apply a suggestion from a reviewer be sure to acknowledge that.&lt;/p&gt;

&lt;p&gt;Not all comments will be within the scope of your pull request, however. Ultimately, it’s your decision what is and is not within scope but if something is outside of the scope then you need to create a follow up ticket. The key to a great pull request is being completely transparent. Explain to your reviewer why their suggestion is out of scope and include the link to the follow up ticket where it will be addressed. &lt;/p&gt;

&lt;p&gt;After all comments are addressed it’s finally time - you get to push the merge button! You’ve accomplished your goal of merging your code to production and that’s another ticket marked off your to do list. Now it’s just time to start the entire process again with a new one.&lt;/p&gt;




&lt;p&gt;What are your tips for making a perfecting pull request? Comment below!&lt;/p&gt;

&lt;p&gt;Be sure to follow me on &lt;a href="//www.twitter.com/karaluton"&gt;Twitter&lt;/a&gt; or &lt;a href="//www.threads.net/karaluton"&gt;Threads&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>opensource</category>
    </item>
    <item>
      <title>The ABCs of HTML Elements</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Wed, 27 Jan 2021 20:03:00 +0000</pubDate>
      <link>https://dev.to/karaluton/the-abcs-of-html-elements-apj</link>
      <guid>https://dev.to/karaluton/the-abcs-of-html-elements-apj</guid>
      <description>&lt;p&gt;It can be a little overwhelming when first learning all of the HTML elements. Here's a quick overview of some of the more common elements for each letter of the alphabet!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A&lt;/strong&gt;: Anchor &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The anchor tag defines a hyperlink which is used to link from one page to another.&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="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"https://dev.to/karaluton"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Kara Luton's dev profile!&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;B&lt;/strong&gt;: Button &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Every website or web app has one - a button! The &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; tag defines a clickable button. Inside the button you can put text and you should always specify a &lt;code&gt;type&lt;/code&gt; attribute to tell browsers what type of button it is.&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="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;A cool button&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;C&lt;/strong&gt;: Code &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Ever wanted to display a snippet of code on your website? The &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt; tag allows you to do just that. The content inside is displayed in the browser's default monospace font.&lt;/p&gt;

&lt;p&gt;You can see the use of &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt; right here in this article in the examples above.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;D&lt;/strong&gt;: Div &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Ahh the &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; - one of the basic building blocks of HTML. The &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; tag defines a section in an HTML document.&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="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;DEV is an awesome community!&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;E&lt;/strong&gt;: Em &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; tag is used to &lt;em&gt;emphasize&lt;/em&gt; text. The text inside of an &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; tag is often displayed in italic.&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="nt"&gt;&amp;lt;em&amp;gt;&lt;/span&gt;This text is EMPHASIZED!&lt;span class="nt"&gt;&amp;lt;/em&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;F&lt;/strong&gt;: Form &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Used to create an HTML form for user input and it can contain several form elements i.e. &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; and more!&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="nt"&gt;&amp;lt;form&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"name"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Name:&lt;span class="nt"&gt;&amp;lt;/label&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;"name"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"name"&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;"submit"&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"Submit!"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;G&lt;/strong&gt;: ¯_(ツ)_/¯&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;H&lt;/strong&gt;: Headings &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;-&lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; through &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; tags define HTML headings. &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; is the most important while &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; is the least important heading.&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="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;This is my main header&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;I'm important but not as important as the h1&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;I&lt;/strong&gt;: Image &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Let's add some visuals to your page! The &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag is used to embed an image in an HTML page. There are two required attributes: &lt;code&gt;&amp;lt;src&amp;gt;&lt;/code&gt; which specifies the path to the image and &lt;code&gt;&amp;lt;alt&amp;gt;&lt;/code&gt; which is the alternate text for the image.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;J&lt;/strong&gt;: ¯_(ツ)_/¯&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;K&lt;/strong&gt;: Keyboard Input &lt;code&gt;&amp;lt;kbd&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This is similar to the &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt; tag, however, &lt;code&gt;&amp;lt;kbd&amp;gt;&lt;/code&gt; is used to define keyboard input.&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="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;To copy text you will need to press the &lt;span class="nt"&gt;&amp;lt;kbd&amp;gt;&lt;/span&gt;Ctrl&lt;span class="nt"&gt;&amp;lt;/kbd&amp;gt;&lt;/span&gt; + &lt;span class="nt"&gt;&amp;lt;kbd&amp;gt;&lt;/span&gt;C&lt;span class="nt"&gt;&amp;lt;/kbd&amp;gt;&lt;/span&gt; buttons.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;L&lt;/strong&gt;: List Item &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; tag defines a list item and is used inside ordered lists &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; and unordered lists &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;.&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="nt"&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Franklin&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Maggie&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Kara&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;M&lt;/strong&gt;: Main &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The main content of a document. This element should be unique to the document and not contain repeated content like sidebars, navigation links, etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;N&lt;/strong&gt;: Navigation &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;A set of navigation links.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;O&lt;/strong&gt;: Ordered List &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;An ordered list that can be numerical or alphabetical. A &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; tag defines each individual item.&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="nt"&gt;&amp;lt;ol&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;One&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Two&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Three&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/ol&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;P&lt;/strong&gt;: Paragraph &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; tag defines a paragraph. Browsers will automatically add a single blank line before and after each paragraph element.&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="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;This is a paragraph about how cool the DEV community is. Isn't it a great place to learn more about being a web developer and software engineer?!&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Q&lt;/strong&gt;: Quotation &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;When using the &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; tag the browser will normally insert quotation marks around the text.&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="nt"&gt;&amp;lt;q&amp;gt;&lt;/span&gt;It's not a bug. It's an undocumented feature!" -Unknown&lt;span class="nt"&gt;&amp;lt;/q&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;R&lt;/strong&gt;: ¯_(ツ)_/¯&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;S&lt;/strong&gt;: Span &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;A &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; is an inline container used to mark up part of a text or document. It's similar to the &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; element but is inline instead of block-level.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;T&lt;/strong&gt;: Table &lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Defines an HTML table which consists of one &lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt; element and one or more &lt;code&gt;&amp;lt;tr&amp;gt;&lt;/code&gt; - table row, &lt;code&gt;&amp;lt;th&amp;gt;&lt;/code&gt; - table head and &lt;code&gt;&amp;lt;td&amp;gt;&lt;/code&gt; - table cell 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="nt"&gt;&amp;lt;table&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Dog name&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Dog age&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Dog breed&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Maggie&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;5 years&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Golden retriever and border collie&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Franklin&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;5 months&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Mini goldendoodle&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;U&lt;/strong&gt;: Unordered List &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Similar to the ordered list &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; except that this is an unordered, bulleted list.&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="nt"&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Coca-cola&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Pepsi&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Dr. Pepper&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;V&lt;/strong&gt;: Video &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt;&lt;br&gt;
Used to embed a video in a document. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;W, X, Y and Z&lt;/strong&gt;: ¯_(ツ)_/¯&lt;/p&gt;




&lt;p&gt;Be sure to follow me on &lt;a href="https://twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>My Work From Home Setup</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Fri, 08 Jan 2021 17:38:29 +0000</pubDate>
      <link>https://dev.to/karaluton/workstation-inspiration-5h3j</link>
      <guid>https://dev.to/karaluton/workstation-inspiration-5h3j</guid>
      <description>&lt;p&gt;Now that the majority of us are working from home 100% of the time, having a workstation that inspires you is more important than ever. &lt;/p&gt;

&lt;p&gt;I recently moved into a new house and have been slowly piecing together my new office. Here's what I have so far.&lt;/p&gt;

&lt;h2&gt;
  
  
  Room Overview
&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%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frry1f1zrkqcjgygwz13o.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frry1f1zrkqcjgygwz13o.jpg" alt="Wide shot of Kara's office"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is my office so far. My office is open to our front hallway and the entrance of my house so I wanted something both aesthetically pleasing and functional for my everyday work. &lt;/p&gt;

&lt;p&gt;This is definitely still a work in progress - I'll post update pictures once I get everything finished. I'm thinking of putting a credenza on the left side of my office so I can have some functional storage. &lt;/p&gt;

&lt;p&gt;I also really like having a TV on in the background while I work so I'm thinking of splurging on a &lt;a href="https://www.samsung.com/us/televisions-home-theater/tvs/the-frame/highlights/?cid=sem-mktg-pub-tv-us-google-na-01012021-140023-&amp;amp;ds_e=GOOGLE-cr:0-pl:201014718-&amp;amp;ds_c=FF~Core+Brand_CN~Frame_PH~on_MK~usnat_BS~vd_PR~ctv_SB~frame_PK~cpql_FS~lo_CA~kew_MD~h_KS~ba_MT~bmm-&amp;amp;ds_ag=AG~General+Frame_MK~usnat_AT~ta_MD~h_AG~General+Frame_AI~yes-&amp;amp;ds_k=the+%2Bframe+%2Btv&amp;amp;gclid=CjwKCAiAouD_BRBIEiwALhJH6Hz8O5pVXAVjw-b61BHRFa8XxJocfnA_2CBfXeEVqzeINgRRwQXwPRoCm0EQAvD_BwE&amp;amp;gclsrc=aw.ds" rel="noopener noreferrer"&gt;Frame TV&lt;/a&gt; for above the credenza. This way I can have background noise while I work but it also doesn't &lt;em&gt;look&lt;/em&gt; like a TV. I also would like to add some hanging planters to add some more greenery to my space.&lt;/p&gt;

&lt;h2&gt;
  
  
  Desk Setup
&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%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9d5rikxu2hvawu59dfk6.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9d5rikxu2hvawu59dfk6.jpg" alt="Close up of Kara's desk with an open Mac laptop on a stand, a monitor and a mechanical keyboard."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As far as my actual desk goes, I have my work-issued MacBook Pro on a &lt;a href="https://www.amazon.com/dp/B008JIGL08/ref=twister_B08N1DF9BX?_encoding=UTF8&amp;amp;psc=1" rel="noopener noreferrer"&gt;Rain Design&lt;/a&gt; stand. I mainly use my laptop as a screen for Slack and my email but I like that the stand keeps it at eye level.&lt;/p&gt;

&lt;p&gt;My monitor was issued by my work and is a &lt;a href="https://www.amazon.com/Dell-LED-Lit-Monitor-U2518D-Compatibility/dp/B075KGLYRL" rel="noopener noreferrer"&gt;Dell UltraSharp 25"&lt;/a&gt;. I like that the monitor can be adjusted up or down but I'd eventually like to get a monitor arm to free up some space on my desk.&lt;/p&gt;

&lt;p&gt;Even before Covid my team was remote so video calls are a big part of my day-to-day work. My webcam is the &lt;a href="https://www.amazon.com/Logitech-Widescreen-Calling-Recording-Desktop/dp/B006JH8T3S" rel="noopener noreferrer"&gt;LogiTech HD Pro C920&lt;/a&gt; and my favorite part about it is that is has a privacy cover. I also have a &lt;a href="https://lumecube.com/products/video-conference-lighting-kit-for-remote-workers?gclid=CjwKCAiAouD_BRBIEiwALhJH6GncGZG67fi3bQ-fHKAiCgGWNpyLG4QbeAVX1vFmZ2YO8NQs2NqGfhoCwuUQAvD_BwE" rel="noopener noreferrer"&gt;Lume Cube&lt;/a&gt; on an adjustable tripod to provide some additional light on video calls.&lt;/p&gt;

&lt;p&gt;My husband and I built my mechanical keyboard and I am obsessed! He's really big into mechanical keyboard and truthfully is the only reason I have one but I don't think I could go without it now. My keyboard case is a &lt;a href="https://www.aliexpress.com/item/32962893580.html" rel="noopener noreferrer"&gt;KBD67&lt;/a&gt; with &lt;a href="https://zealpc.net/products/zilent?variant=5894817710118" rel="noopener noreferrer"&gt;Zeal 62g Zilent switches&lt;/a&gt; and Tai Hao Baby Miami keycaps (which are unfortunately not sold anymore).&lt;/p&gt;

&lt;p&gt;My mousepad is the Don't Be Afraid To Commit mousepad from &lt;a href="https://www.etsy.com/shop/SoSplush?ref=yr_purchases&amp;amp;page=1#items" rel="noopener noreferrer"&gt;SoSplush&lt;/a&gt;. I've actually referenced it a ton since getting it! My mouse is the &lt;a href="https://www.apple.com/shop/product/MLA02LL/A/magic-mouse-2-silver?fnode=3fdba185618ac58ae37e19f29e42022c92b1998f84442e3be1350c72dc3f19744716ca028a8191a33c1bec9677a187812ef5b0e5cacc2657c3e5899a7b6aa94ab521b362c504ca496b1e145861ce0b68cdda8646df01ccb7ec9d4647a41f7c90983bd06c23455e1510529563dafcf313_" rel="noopener noreferrer"&gt;Apple Magic Mouse&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I also have my personal laptop on my desk which is a 2014 MacBook Pro. I don't use this often and have been debating about selling it and getting an iPad instead.&lt;/p&gt;

&lt;p&gt;You probably noticed the cup with a million pens on my desk. I recently picked up bullet journaling and that's just a &lt;em&gt;part&lt;/em&gt; of my collection. I keep all of my bullet journaling supplies on the shelves on my desk.&lt;/p&gt;

&lt;p&gt;The plant on my desk is a Sansevieria 'Starfish'. It's pretty hardy and has survived me forgetting to water it quite often.&lt;/p&gt;

&lt;h2&gt;
  
  
  Artwork
&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%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fo0zpbk0jju75qd0ct6in.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fo0zpbk0jju75qd0ct6in.jpg" alt="Close up of the front of my desk with artwork hanging on the wall"&gt;&lt;/a&gt;&lt;br&gt;
I recently hung up these three photos from &lt;a href="https://www.society6.com" rel="noopener noreferrer"&gt;Society 6&lt;/a&gt;. They really add some warmth to my space and a touch of personality. I specifically chose the line art of the ballerina since I used to dance. &lt;/p&gt;




&lt;p&gt;Do you have a dedicated office space or an on-the-go setup in your house? I would LOVE to see your workstations - comment below!&lt;/p&gt;

&lt;p&gt;Be sure to follow me on &lt;a href="https://twitter.com/karaluton" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>workstations</category>
    </item>
    <item>
      <title>HTTP Methods Explained</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Tue, 11 Aug 2020 14:35:50 +0000</pubDate>
      <link>https://dev.to/karaluton/http-methods-explained-2ghh</link>
      <guid>https://dev.to/karaluton/http-methods-explained-2ghh</guid>
      <description>&lt;p&gt;As a frontend developer you'll most likely be interacting with a lot of APIs. It's especially important to understand the different methods you can use when interacting with an API  and the responses you receive back.&lt;/p&gt;

&lt;p&gt;We'll be going over HTTP methods for REST APIs. So first let's talk about what in the world a REST API is. &lt;/p&gt;

&lt;p&gt;REST stands for "representational state transfer" and is a set of rules developers need to follow when they create their API. REST APIs have five types of methods aka the type of request you send to the server.&lt;/p&gt;

&lt;p&gt;Those methods are the following:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;GET&lt;/li&gt;
&lt;li&gt;POST&lt;/li&gt;
&lt;li&gt;PUT&lt;/li&gt;
&lt;li&gt;PATCH&lt;/li&gt;
&lt;li&gt;DELETE&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Each method performs one of four possible actions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create&lt;/li&gt;
&lt;li&gt;Read&lt;/li&gt;
&lt;li&gt;Update&lt;/li&gt;
&lt;li&gt;Delete&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You may have heard these actions referred to as &lt;code&gt;CRUD&lt;/code&gt; before.&lt;/p&gt;

&lt;p&gt;Let's dive into each method and what responses you get for both a successful and invalid request.&lt;/p&gt;

&lt;h2&gt;
  
  
  GET
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;: Requests retrieve resource information. &lt;br&gt;
&lt;strong&gt;Action&lt;/strong&gt;: Read&lt;br&gt;
&lt;strong&gt;Successful response&lt;/strong&gt;: 200 OK&lt;br&gt;
&lt;strong&gt;Error response&lt;/strong&gt;: 404 not found&lt;/p&gt;

&lt;h2&gt;
  
  
  POST
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;: The server creates a new entry in a database&lt;br&gt;
&lt;strong&gt;Action&lt;/strong&gt;: Create&lt;br&gt;
&lt;strong&gt;Successful response&lt;/strong&gt;: 201 Created&lt;br&gt;
&lt;strong&gt;Error response&lt;/strong&gt;: 404 not found or 409 conflict - if the resource already exists&lt;/p&gt;

&lt;h2&gt;
  
  
  PUT
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;: Updates an existing resource&lt;br&gt;
&lt;strong&gt;Action&lt;/strong&gt;: Update&lt;br&gt;
&lt;strong&gt;Successful response&lt;/strong&gt;: 200 OK &lt;br&gt;
&lt;strong&gt;Error response&lt;/strong&gt;: 204 no content, 404 not found or 405 method not allowed&lt;/p&gt;

&lt;h2&gt;
  
  
  PATCH
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;: Very similar to &lt;code&gt;PUT&lt;/code&gt; but makes a partial  update on a resource&lt;br&gt;
&lt;strong&gt;Action&lt;/strong&gt;: Update&lt;br&gt;
&lt;strong&gt;Successful response&lt;/strong&gt;: 200 OK&lt;br&gt;
&lt;strong&gt;Error response&lt;/strong&gt;: 204 no content, 404 not found or 405 method not allowed&lt;/p&gt;

&lt;h2&gt;
  
  
  DELETE
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;: Deletes resources&lt;br&gt;
&lt;strong&gt;Action&lt;/strong&gt;: Delete&lt;br&gt;
&lt;strong&gt;Successful response&lt;/strong&gt;: 200 OK&lt;br&gt;
&lt;strong&gt;Error response&lt;/strong&gt;: 404 not found or 405 method not allowed&lt;/p&gt;

&lt;p&gt;A quick summary of the responses you may see is that anything in the 200 range means the request was successful, anything in the 400 range means an error has originated from the client and the 500 range means an error has originated from the server.&lt;/p&gt;




&lt;p&gt;Have you stumbled upon any cool APIs that you've worked with before? I'd love to hear about them in the comments!&lt;/p&gt;

&lt;p&gt;Be sure to follow me on &lt;a href="https://www.twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Reflecting On One Year of Remote Work</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Thu, 27 Feb 2020 15:37:09 +0000</pubDate>
      <link>https://dev.to/karaluton/reflecting-on-one-year-of-remote-work-1nkp</link>
      <guid>https://dev.to/karaluton/reflecting-on-one-year-of-remote-work-1nkp</guid>
      <description>&lt;p&gt;When I was first presented with the opportunity to work remotely I was ecstatic. What could be better than no commute and working from the comfort of my own home?! And while both of those things are great perks, learning to love the remote life took some time. &lt;/p&gt;

&lt;p&gt;To be completely honest, there was a point where I didn't enjoy working remotely. I'm naturally an introvert but I still enjoy socializing with others. I missed having those in-person interactions that I would get in an office. But now, one year later, I'm extremely happy working remotely and I'm reflecting on what has made it easier for myself. Hopefully, these tips can help someone else who is joining the work from home movement.&lt;/p&gt;

&lt;h2&gt;
  
  
  Have a dedicated office space
&lt;/h2&gt;

&lt;p&gt;You may be tempted to work from your couch or even your bed when you first start to work from home but it isn't the best idea. You need to separate your workspace from your home space. I have my desk in our very underutilized guest room. I hardly ever go in this space on the weekends so I have that clear separation of work time and relaxing time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stick to a schedule
&lt;/h2&gt;

&lt;p&gt;As a type A personality who loves routines, sticking to a schedule has made me love the remote life more. I like to have some downtime in the mornings so I wake up a few hours before I need to start working, jump in the shower, eat breakfast and get ready for the day. I act the same way I would as when I would go into the office each day but I wear much comfier clothes now. &lt;/p&gt;

&lt;p&gt;I also am sure to take a lunch break away from my desk. Being at home, it's super tempting to eat at your desk and work through lunch but it's important to take that time for yourself.&lt;/p&gt;

&lt;h2&gt;
  
  
  Get out of your office once in a while
&lt;/h2&gt;

&lt;p&gt;Something that has really impacted my opinion on working from home is that I now try to get out of my home office at least once a week. I enjoy checking out coffee shops and working from there for the day. I usually invite any friends that also work remotely or I send a message on my local Slack group to see if anyone wants to join me. While I do miss my giant monitor at home, it's nice to change up the scenery every once in a while and get out into the "real world".&lt;/p&gt;

&lt;h2&gt;
  
  
  Participate in team offsite trips
&lt;/h2&gt;

&lt;p&gt;My team is highly distributed so while the majority of my team works remotely as I do, others work in various offices. My team gets together a few times a year in one location. These offsite trips are absolutely a necessity in my opinion. The difference they make is huge and I really suggest to have an offsite if you work on a remote team. &lt;/p&gt;

&lt;p&gt;I felt so much better after my first offsite, which happened to be one week after I joined the team. It made the people I worked with actually feel like real humans and not just a photo.&lt;/p&gt;




&lt;p&gt;I'd love to hear any advice you have if you also work from home. Leave a comment below!&lt;/p&gt;

&lt;p&gt;Be sure to follow me on &lt;a href="https://www.twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>remote</category>
      <category>webdev</category>
      <category>career</category>
    </item>
    <item>
      <title>Aliases: Making the command line your friend</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Mon, 11 Nov 2019 17:54:00 +0000</pubDate>
      <link>https://dev.to/karaluton/aliases-making-the-command-line-your-friend-23mm</link>
      <guid>https://dev.to/karaluton/aliases-making-the-command-line-your-friend-23mm</guid>
      <description>&lt;p&gt;How many times a day do you write &lt;code&gt;git add&lt;/code&gt;, &lt;code&gt;git commit -m&lt;/code&gt; and &lt;code&gt;git push&lt;/code&gt; in your terminal? Tons! Wouldn't it be nice if there was a faster way to write out the commands you use every day? Well, there is and it's aliases.&lt;/p&gt;

&lt;p&gt;I'll be going over using aliases with Zsh which is now the default shell for Macs using Catalina. Zsh is an extended version of Bash but it has a few additional features and has support for plugins and themes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Making an Alias
&lt;/h2&gt;

&lt;p&gt;You'll need to open your Zsh configuration file (&lt;code&gt;.zshrc&lt;/code&gt;) and add the following syntax at the bottom of the file to make your alias:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alias [custom-alias]=["command"]&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;I use &lt;a href="https://emberjs.com/"&gt;Ember&lt;/a&gt; at work so I'm constantly writing out the full command to run my tests. Instead of having to write &lt;code&gt;ember test --server --launch=false&lt;/code&gt; every time I've set up the following alias:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alias ets="ember test --server --launch=false"&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now, whenever I want to run my tests I use the command &lt;code&gt;ets&lt;/code&gt; and have saved myself a little bit of time typing!&lt;/p&gt;

&lt;h2&gt;
  
  
  Oh My Zsh
&lt;/h2&gt;

&lt;p&gt;Another advantage of using Zsh as your shell is that you can install &lt;a href="https://github.com/robbyrussell/oh-my-zsh"&gt;Oh My Zsh&lt;/a&gt; which is a framework for managing your Zsh configuration. &lt;/p&gt;

&lt;p&gt;You can install Oh My Zsh via curl:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Besides having awesome plugins and themes, Oh My Zsh also includes a &lt;em&gt;ton&lt;/em&gt; of git aliases. You can see which ones are available by running &lt;code&gt;alias&lt;/code&gt;. There are a ton of preconfigured aliases and all you have to do is add them to your &lt;code&gt;.zshrc&lt;/code&gt; configuration file.&lt;/p&gt;




&lt;p&gt;What's your favorite Git alias? I'd love to know in the comments below!&lt;/p&gt;

&lt;p&gt;Be sure to follow me on &lt;a href="https://www.twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>productivity</category>
      <category>git</category>
    </item>
    <item>
      <title>Beginner Python Resources Recommended by the Tech Community</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Thu, 11 Jul 2019 21:17:49 +0000</pubDate>
      <link>https://dev.to/karaluton/beginner-python-resources-recommended-by-the-community-27of</link>
      <guid>https://dev.to/karaluton/beginner-python-resources-recommended-by-the-community-27of</guid>
      <description>&lt;p&gt;Besides the occasional dive into PHP, I've only ever worked with JavaScript. I went to a bootcamp for front end engineering and work as a UI engineer so I've never really had the need to look into any other languages. Lately, I've been interested in learning more about Python so I sent out the following tweet and received some great resources about where to begin! &lt;/p&gt;

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

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



&lt;/p&gt;

&lt;p&gt;Here are some of the beginner-friendly Python resources that were recommended to me.&lt;/p&gt;

&lt;h2&gt;
  
  
  Free College Courses
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.edx.org/course/introduction-to-computer-science-and-programming-using-python-2"&gt;edX's Introduction to Computer Science and Programming Using Python&lt;/a&gt;&lt;br&gt;
This is a 14-16 hour/week course that lasts 9 weeks and is provided by MIT. The course is free but you can pay $75 for graded exams and assignments as well as a certificate.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.cs.cmu.edu/~112/schedule.html"&gt;Carnegie Mellon University's Fundamentals of Programming&lt;/a&gt;&lt;br&gt;
By the end of the course you'll be able to read, write, design and debug Python code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Online Resources
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.udemy.com/the-modern-python3-bootcamp/"&gt;The Modern Python 3 Bootcamp&lt;/a&gt;&lt;br&gt;
The course includes 29.5 hours of videos as well as downloadable resources, over 121 articles and 135 coding exercises. Udemy courses regularly go on sale so keep an eye on this one if you're interested in taking it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://realpython.com/"&gt;Real Python&lt;/a&gt;&lt;br&gt;
Various tutorials that allow you to learn Python from the ground up.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=JJmcL1N2KQs"&gt;Python Crash Course by Traversy Media&lt;/a&gt;&lt;br&gt;
Covers Python basics in an hour and a half.&lt;/p&gt;

&lt;h2&gt;
  
  
  Books
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.amazon.com/Learn-Python-Hard-Way-Introduction/dp/0321884914"&gt;Learn Python the Hard Way by Zed Shaw&lt;/a&gt;&lt;br&gt;
You'll work through 52 coding exercises when reading through this book. It also includes a DVD with 5+ hours of teaching.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.amazon.com/Automate-Boring-Stuff-Python-Programming-ebook/dp/B00WJ049VU"&gt;Automate the Boring Stuff with Python by Al Sweigart&lt;/a&gt;&lt;br&gt;
You'll learn how to write programs that take minutes to complete what normally would take hours by hand. No prior coding experience is necessary before reading!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.amazon.com/Dive-into-Python-Mark-Pilgrim/dp/1430224150"&gt;Dive Into Python 3 by Mark Pilgrim&lt;/a&gt;&lt;br&gt;
Each chapter starts with a real code sample which is broken down and explained.&lt;/p&gt;

&lt;h2&gt;
  
  
  Streams
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.twitch.tv/clarkio"&gt;Learning Python from Scratch with Brian Clark and Cecil Phillip&lt;/a&gt;&lt;br&gt;
Brian and Cecil stream every Wednesday starting around 11 am ET where they document their journey learning Python.&lt;/p&gt;




&lt;p&gt;Have another great beginner-friendly Python resource? I'd love if you left it in the comments below!&lt;/p&gt;

&lt;p&gt;Be sure to follow me on &lt;a href="https://twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>python</category>
    </item>
    <item>
      <title>JavaScript 101: Arrow Functions</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Fri, 21 Jun 2019 14:05:44 +0000</pubDate>
      <link>https://dev.to/karaluton/javascript-101-arrow-functions-jje</link>
      <guid>https://dev.to/karaluton/javascript-101-arrow-functions-jje</guid>
      <description>&lt;p&gt;Arrow functions - they're the more concise version of regular functions and they've been gaining popularity since they were first introduced in ES6. Not only is the syntax much cleaner but they also provide implicit returns which we'll dive into.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Hold up! If you haven't read the first part in this series, &lt;a href="https://dev.to/karaluton/javascript-101-breaking-down-functions-4p34"&gt;JavaScript 101: Breaking Down Functions&lt;/a&gt;, then make sure to check that out.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let's start with how the arrow function's syntax is different from regular functions.&lt;/p&gt;

&lt;p&gt;Here we have a regular function:&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;function&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we wanted to use an arrow function, it would look like this:&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;const&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are some key differences with arrow functions. We've dropped having to declare the function using the &lt;code&gt;function&lt;/code&gt; keyword. Our parameters are a bit different than before as well. They now come after an equal sign and before the fat arrow (&lt;code&gt;=&amp;gt;&lt;/code&gt;). &lt;/p&gt;

&lt;p&gt;You may have also noticed that we're now declaring our arrow function as a variable. That's because arrow functions are &lt;em&gt;anonymous functions&lt;/em&gt; or functions that are declared without a name. You don't have to assign them to a variable but doing so allows you trace them more easily when you have an error.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;🌟 &lt;strong&gt;Quick tip:&lt;/strong&gt; If you only have one parameter the parentheses are optional. If you don't have any parameters then you'll need to use empty parentheses.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here's our example with multiple parameters:&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;const&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt; &lt;span class="o"&gt;=&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="nx"&gt;emoji&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;emoji&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; Hello &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And our example with no parameters:&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;const&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that we've covered the syntax of arrow functions let's talk about another big benefit - implicit returns! This will make your code even shorter than before. Let's take the example we've been using and switch to a return instead of a console.log.&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;const&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because we're only returning a single line of code we can use the arrow function's ability to do an implicit return and rewrite our function like so:&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;const&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When utilizing implicit returns, you're able to drop the &lt;code&gt;return&lt;/code&gt; keyword as well as the curly brackets. This makes for really nice one-line functions.&lt;/p&gt;

&lt;p&gt;Implicit returns aren't the only big difference between arrow functions and regular functions. Another big one is how they handle the &lt;code&gt;this&lt;/code&gt; keyword. &lt;/p&gt;

&lt;p&gt;In regular functions, the &lt;code&gt;this&lt;/code&gt; keyword is bound depending on the context in which it was called. However, inside of arrow functions, &lt;code&gt;this&lt;/code&gt; is lexically bound meaning that it's static and determined by the scope that it's in. &lt;/p&gt;

&lt;p&gt;This is still something that I'm trying to grasp myself but &lt;a href="http://www.javascriptkit.com/javatutors/javascriptarrowfunctions2.shtml"&gt;JavaScript Kit&lt;/a&gt; has a great explanation if you're wanting to dive in more.&lt;/p&gt;




&lt;p&gt;Be sure to follow me on &lt;a href="https://twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>explainlikeimfive</category>
    </item>
    <item>
      <title>Did you transition to tech from another career?</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Fri, 14 Jun 2019 15:16:09 +0000</pubDate>
      <link>https://dev.to/karaluton/did-you-transition-to-tech-from-another-career-f99</link>
      <guid>https://dev.to/karaluton/did-you-transition-to-tech-from-another-career-f99</guid>
      <description>&lt;p&gt;I'd love to hear if you've transitioned to tech from another career and why you decided to make the switch! &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🌟Your answer &lt;em&gt;may&lt;/em&gt; be included in my &lt;a href="https://undergroundjs.com/"&gt;UndergroundJS&lt;/a&gt; keynote talk in August! 🌟&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>career</category>
    </item>
    <item>
      <title>JavaScript 101: Breaking Down Functions</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Mon, 10 Jun 2019 15:28:12 +0000</pubDate>
      <link>https://dev.to/karaluton/javascript-101-breaking-down-functions-4p34</link>
      <guid>https://dev.to/karaluton/javascript-101-breaking-down-functions-4p34</guid>
      <description>&lt;p&gt;Functions are at the core of what we do in JavaScript so it's essential that we understand what they do and how they work. But what exactly are functions? A JavaScript function is a block of code that performs a specific task and is executed when something calls it. Think of it like a recipe that's giving you the ingredients (parameters) and the directions (function body) for what you need to do.&lt;/p&gt;

&lt;h2&gt;
  
  
  Defining a function
&lt;/h2&gt;

&lt;p&gt;Here's a function broken down into what you'll need: the name, parameter(s) and the function body.&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;function&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;parameter&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="c1"&gt;// function body&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first step in defining your function is giving your function a name. Your function name can include letters, numbers, underscores and dollar signs. For example, your function could be named &lt;code&gt;helloWorld&lt;/code&gt;, &lt;code&gt;helloWorld1&lt;/code&gt;, &lt;code&gt;hello_world&lt;/code&gt; or &lt;code&gt;$helloWorld&lt;/code&gt;.&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;function&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="c1"&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, you need to define your function's parameters. Function parameters go inside the function's parentheses and are separated by commas.&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;function&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&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="c1"&gt;// code to be executed&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here's  an example of a function with multiple parameters.&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;function&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&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="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="c1"&gt;// code to be executed&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Quick tip! You may have heard the terms parameters and arguments used in the same way. They are very similar but should not be used to describe the same thing. &lt;em&gt;Parameters&lt;/em&gt; are used when defining a function (what goes inside the parentheses) while &lt;em&gt;arguments&lt;/em&gt; are the values the function receives from each parameter when the function is executed.&lt;/p&gt;

&lt;p&gt;So if you define a variable such as &lt;code&gt;const param1 = 'Hello World';&lt;/code&gt; and then define your function &lt;code&gt;function helloWorld(param1) {}&lt;/code&gt;. What's inside the parentheses is your parameter while the &lt;code&gt;param1&lt;/code&gt; variable that you defined as 'Hello World' is your argument.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Finally, the code to be executed will be placed inside the curly brackets. All together everything looks like this:&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;function&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Invoking a function
&lt;/h2&gt;

&lt;p&gt;Great! We have defined our function but how do we get it to run? You can invoke (or run) a function by referencing the function name followed by parentheses. Let's invoke the function we defined earlier.&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;helloWorld&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Kara&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Hello Kara&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here I'm passing in 'Kara' as our argument and invoking our function. Then &lt;code&gt;Hello Kara&lt;/code&gt; is logged to the console! &lt;/p&gt;

&lt;p&gt;And there you have it! You now know how to define and invoke your function. Just remember, that all functions will &lt;strong&gt;always&lt;/strong&gt; return a value. If there is no function body then your function will return as undefined.&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;function&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt; &lt;span class="c1"&gt;// define your function&lt;/span&gt;

&lt;span class="nx"&gt;helloWorld&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// invoke your function&lt;/span&gt;

&lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Be sure to follow me on &lt;a href="https://twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>explainlikeimfive</category>
    </item>
    <item>
      <title>ELI5: Git Rebase vs. Merge</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Thu, 09 May 2019 21:13:18 +0000</pubDate>
      <link>https://dev.to/karaluton/explain-like-i-m-five-git-rebase-vs-merging-1k69</link>
      <guid>https://dev.to/karaluton/explain-like-i-m-five-git-rebase-vs-merging-1k69</guid>
      <description>&lt;p&gt;Up until now, I had only merged branches into one another but recently I discovered another option -- rebasing! Rebasing and merging are essentially doing the same thing so what exactly goes on behind the scenes for each?&lt;/p&gt;

&lt;h3&gt;
  
  
  Merge
&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxvx0hlfogc6gmj7hp8w.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxvx0hlfogc6gmj7hp8w.png" alt="Example of Git Merging"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Git merge combines multiple commits into one history. It will look at the two branches you want to combine and finds a common commit between them. Next, it takes the content of the feature or source branch and integrates it with the target (in our example, master) branch by creating an entirely new commit. This new commit holds the history of both of your branches. Because of that, you'll see all of the commits in chronological order.&lt;/p&gt;

&lt;h3&gt;
  
  
  Rebase
&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fujwrhgcyq01bmnimeguh.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fujwrhgcyq01bmnimeguh.png" alt="Example of Git Rebase"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Rebasing is a bit different. Instead of merging the history of your two branches together from one base commit, you're actually making it seem like you created your branch from a different commit than you originally did. This allows you to keep a linear project history. This makes it a lot easier in the future to revert a change if you have a bug because you won't have to dig through to where the commit was made in the timeline. &lt;/p&gt;

&lt;p&gt;So, which do you prefer? Rebase or merge? I'd love to hear in the comments below! &lt;/p&gt;




&lt;p&gt;Be sure to follow me on &lt;a href="https://twitter.com/karaluton" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; for lots of tweets about tech, and if I'm being honest, lots of tweets about dogs too. &lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>explainlikeimfive</category>
      <category>git</category>
    </item>
    <item>
      <title>How To Answer The Dreaded "Tell Me About Yourself" Interview Question</title>
      <dc:creator>Kara Luton</dc:creator>
      <pubDate>Mon, 25 Mar 2019 00:14:30 +0000</pubDate>
      <link>https://dev.to/karaluton/how-to-answer-the-dreaded-tell-me-about-yourself-interview-question-43ge</link>
      <guid>https://dev.to/karaluton/how-to-answer-the-dreaded-tell-me-about-yourself-interview-question-43ge</guid>
      <description>&lt;p&gt;So, you’ve landed an interview with a company you’ve been dreaming about working at. You sit down and after some small chat the interviewer says “tell me a little bit about yourself.”&lt;/p&gt;

&lt;p&gt;This common question results in the first impression at your interview, but is often the most overlooked. In my experience from being on both sides of the interview, I believe that by crafting a unique and memorable answer to this one question, you can land the job. Here’s how.&lt;/p&gt;

&lt;h2&gt;
  
  
  Don’t recount your resume
&lt;/h2&gt;

&lt;p&gt;A big mistake I see people make is using this question to go over their résumé.&lt;/p&gt;

&lt;p&gt;Don’t do this! Your interviewer has already looked over your résumé and probably has it sitting in front of them during the interview. They don’t need you to go over it again.&lt;/p&gt;

&lt;h2&gt;
  
  
  Practice and prepare answers to any obvious questions your interviewer may have
&lt;/h2&gt;

&lt;p&gt;You wouldn’t show up for a talk you’re giving at a conference without practicing over and over again, right? Make sure you don’t show up for an interview without doing the same.&lt;/p&gt;

&lt;p&gt;Sit down a few days before and think of what questions an interviewer may have for you after looking at your résumé. Use this time to go ahead and answer those questions.&lt;/p&gt;

&lt;p&gt;For example, I’m a coding bootcamp graduate who used to work in music publicity. A potential employer looking at my résumé may wonder why I wanted to transition from publicity to tech and they’d probably ask about the process I went through.&lt;/p&gt;

&lt;p&gt;And so, that’s one of the main things I address in my answer, because I know that will be the biggest question and could cause the most hesitation when it comes to a potential employer choosing me.&lt;/p&gt;

&lt;p&gt;Take a look at your own résumé as if you’ve never looked at it before. Figure out what those questions would be for you and be sure those are your main points in your answer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Find your quirk
&lt;/h2&gt;

&lt;p&gt;For the next portion of your answer, find something that will make you stand out. You want your interview to be memorable and this is a great way to accomplish that.&lt;/p&gt;

&lt;p&gt;Have you started your own meetup group? Do you volunteer consistently at a charity? Are you super passionate about a certain sport? Find your quirk. Make sure to mention it and tie it in to why you’d be a great choice for the position.&lt;/p&gt;

&lt;p&gt;I personally have mentioned that while I was at The Iron Yard’s front-end bootcamp, I co-founded the Nashville &lt;a href="https://www.hiretechladies.com"&gt;Tech Ladies&lt;/a&gt; chapter where I organize quarterly professional development meetups for women in all areas of tech. Sometimes I’ll even mention how I grew up doing ballet. I’ll describe how ballet has taught me many things, like how to pay attention to the little details, that I am now able to translate into my career.&lt;/p&gt;

&lt;p&gt;Pick something that is uniquely you, and it will make a lasting impression.&lt;/p&gt;

&lt;h2&gt;
  
  
  Explain why you applied for the position
&lt;/h2&gt;

&lt;p&gt;Lastly, round out the question with why you want the position and why you are excited about it. You applied to the position for a reason — so tell the interviewer why you did it. They saw something in you and this is a great moment to let them know why you think it’s a good fit.&lt;/p&gt;




&lt;p&gt;What are your tips for answering this common interview question? Comment below! Be sure to follow me on &lt;a href="https://twitter.com/karaluton"&gt;Twitter&lt;/a&gt; for lots of tweets about tech, and if I'm being honest, lots of tweets about dogs too.&lt;/p&gt;

</description>
      <category>career</category>
      <category>interview</category>
    </item>
  </channel>
</rss>
