<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Carlos Roso</title>
    <description>The latest articles on DEV Community by Carlos Roso (@caroso1222).</description>
    <link>https://dev.to/caroso1222</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%2F187742%2F48fd60f8-7ccc-428e-9278-aac54807470c.jpg</url>
      <title>DEV Community: Carlos Roso</title>
      <link>https://dev.to/caroso1222</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/caroso1222"/>
    <language>en</language>
    <item>
      <title>FAQs for future Toptalers</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 23 Jul 2020 20:51:15 +0000</pubDate>
      <link>https://dev.to/caroso1222/faqs-for-future-toptalers-4oib</link>
      <guid>https://dev.to/caroso1222/faqs-for-future-toptalers-4oib</guid>
      <description>&lt;p&gt;This is not an official FAQ from &lt;a href="https://www.toptal.com/#join-only-great-devs" rel="noopener noreferrer"&gt;Toptal&lt;/a&gt;. It's all based on my personal experience. Take it with a grain of salt - very opinionated notes ahead. These are all real questions I've been asked over the years.&lt;/p&gt;




&lt;h4&gt;
  
  
  Once I get accepted, how long does it take to get a job?
&lt;/h4&gt;

&lt;p&gt;It depends on factors like your specialty, experience, time availability, and timezone. In general, for a web developer with +3 years of experience looking for full-time or part-time, I'd say you can get a gig in 2-3 weeks.&lt;/p&gt;

&lt;h4&gt;
  
  
  Can I make a living working in Toptal?
&lt;/h4&gt;

&lt;p&gt;Yes. I've been working (as talent) at Toptal for quite a few years now and it's been pretty stable. For 18 months I had a contract for 50 hrs/week paid at a very good hourly rate. I &lt;a href="https://www.youtube.com/watch?v=Z4aMF9n_sso&amp;amp;feature=youtu.be&amp;amp;t=186" rel="noopener noreferrer"&gt;married, traveled, and lived well&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  What kind of jobs can I get at Toptal?
&lt;/h4&gt;

&lt;p&gt;There are certainly more jobs for web development (both for backend and frontend) than anything else. Clients are normally looking for experts, expect to be treated as such. Jobs are mostly full-time and part-time.&lt;/p&gt;

&lt;h4&gt;
  
  
  How can I prepare for the interview?
&lt;/h4&gt;

&lt;p&gt;Assuming you're a developer, you basically need English proficiency and fluency solving algorithms. It also helps to have a minimum of 2-3 years of experience. I &lt;a href="https://carlosroso.com/cracking-the-toptal-interview" rel="noopener noreferrer"&gt;wrote a free eBook&lt;/a&gt; to help you.&lt;/p&gt;

&lt;h4&gt;
  
  
  How much does Toptal pay?
&lt;/h4&gt;

&lt;p&gt;You can set your own rate. However, it's unlikely for a client to pay you $100 USD/hour, unless you're very special. I'm under NDA so I can't disclose my rate but Toptal shows some average numbers &lt;a href="https://www.toptal.com/developers/front-end/hourly-rate" rel="noopener noreferrer"&gt;here&lt;/a&gt; and &lt;a href="https://www.toptal.com/developers/back-end/hourly-rate" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;I sent this post weeks ago to +1100 devs on my email list. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost" rel="noopener noreferrer"&gt;here&lt;/a&gt; or follow me on &lt;a href="https://twitter.com/caroso1222" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; if you want to get my tips and thoughts on career growth.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h4&gt;
  
  
  Should I learn X language to get into Toptal?
&lt;/h4&gt;

&lt;p&gt;You're good if you know some of the popular languages and frameworks. They have &lt;a href="https://www.toptal.com/developers" rel="noopener noreferrer"&gt;clients looking for&lt;/a&gt; C#, Drupal, Python, JavaScript, Java, React, SQL, Angular, iOS, Android, etc. Stick to whatever you're good at.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do they only offer short-term freelancing gigs?
&lt;/h4&gt;

&lt;p&gt;No. I worked with a client full-time for 18 months until I decided to part ways. Full-time and part-time jobs are normally expected to last between 6-24 months.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do they pay vacations?
&lt;/h4&gt;

&lt;p&gt;None of that. You work for one hour, they pay you one hour. You might get special treatment if you have a very good relationship with your client. The norm is to pause your engagement once you go on vacation.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do they pay health, retirement plan, or any other benefits?
&lt;/h4&gt;

&lt;p&gt;No. As a freelance, you need to take care of that yourself. &lt;/p&gt;

&lt;h4&gt;
  
  
  As for taxes, do they deduct something from your wage?
&lt;/h4&gt;

&lt;p&gt;No. Once you get in, you sign a form where you confirm you'll be paying taxes in your country. You will then report your earnings as an independent contractor in your country.&lt;/p&gt;

&lt;h4&gt;
  
  
  I don't have much experience, can I still get accepted?
&lt;/h4&gt;

&lt;p&gt;I don't recommend applying if you don't have at least 2-3 years of experience. It'll be a disservice for you, the client, and Toptal. Don't rush. Enjoy being a junior but train like you're an expert.&lt;/p&gt;

&lt;h4&gt;
  
  
  I'm not good at algorithms, can I pass the interview?
&lt;/h4&gt;

&lt;p&gt;No. You won't make it too far in the process if you're not fluent in solving algorithms. Check out my &lt;a href="https://carlosroso.com/cracking-the-toptal-interview" rel="noopener noreferrer"&gt;free eBook&lt;/a&gt; to prepare. Then start solving easy-level algorithms in Leetcode, Hackerrank, or Interview Cake.&lt;/p&gt;

&lt;h4&gt;
  
  
  How difficult it is to pass the interview?
&lt;/h4&gt;

&lt;p&gt;I have referred well over 190 people. Only 3 of them have passed. Now, this is not to scare you. The process is not difficult &lt;em&gt;per se&lt;/em&gt;, it just needs a good amount of preparation.&lt;/p&gt;

&lt;h4&gt;
  
  
  Are there any challenging or interesting projects at all?
&lt;/h4&gt;

&lt;p&gt;I'd say 90% of the projects are very challenging. I've worked on hard things I didn't know I was capable of like web 3D graphics, service workers manual tuning, CICD setup from scratch, you name it.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do you have to compete with fellow Toptalers to get jobs?
&lt;/h4&gt;

&lt;p&gt;Yes. Toptal recruiters find a handful of Toptalers to fulfill a position. Then the client interviews all of the Toptalers and picks whoever they want. There are plenty of projects for everybody, though.&lt;/p&gt;

&lt;h4&gt;
  
  
  I'm afraid to quit my job for Toptal. Is it stable enough?
&lt;/h4&gt;

&lt;p&gt;There's no need to quit your job. First, pass the interviews. Then, pick up an hourly or part-time job. Once you feel ready to take the plunge, do it. If Toptal doesn't work out, there are &lt;a href="https://carlosroso.com/best-platforms-to-land-top-remote-jobs-in-2020/" rel="noopener noreferrer"&gt;some more platforms&lt;/a&gt; to work on.&lt;/p&gt;

&lt;h4&gt;
  
  
  I've heard Indians or Africans never make it. Is that true?
&lt;/h4&gt;

&lt;p&gt;That can't be more misleading. I myself have interacted with very impressive developers from all over the world in Toptal including, of course, people from India and Africa.&lt;/p&gt;

&lt;h4&gt;
  
  
  I currently make $100 USD/hr. Can I make more than that in Toptal?
&lt;/h4&gt;

&lt;p&gt;You're better off doing your thing. You won't probably get that much in Toptal but maybe, if you're very special (99th percentile), you can get very &lt;a href="https://www.toptal.com/developers/back-end/hourly-rate" rel="noopener noreferrer"&gt;close&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
   Is it hard to change your rate?
&lt;/h4&gt;

&lt;p&gt;You can change your rate whenever you want. That is, you still need to go through an uncomfortable conversation with your recruiter. Stay firm and ask for what you deserve.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do you need to stick to a work schedule?
&lt;/h4&gt;

&lt;p&gt;Most likely not. It depends on the client. Just make sure to set clear expectations with the client and be responsible. Join any mandatory call and then manage the rest of your time as you please.&lt;/p&gt;




&lt;p&gt;Got any more questions? Ping me at &lt;a href="https://twitter.com/caroso1222" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or post them in the comments. I'll keep this post up-to-date as I come across more questions.&lt;/p&gt;




&lt;h1&gt;
  
  
  Prepare and ace the interview
&lt;/h1&gt;

&lt;p&gt;I wrote a &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/" rel="noopener noreferrer"&gt;FREE guide&lt;/a&gt; with a lot of &lt;strong&gt;tips and tricks to ace the Toptal interview&lt;/strong&gt;. If you're curious, you can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/" rel="noopener noreferrer"&gt;sign up here&lt;/a&gt; and get it right away.&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%2Fi%2Fl80v7dpgjapmv0l3aona.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%2Fi%2Fl80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>remote</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Lessons learned doing open source</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 16 Jul 2020 23:07:15 +0000</pubDate>
      <link>https://dev.to/caroso1222/lessons-learned-doing-open-source-1eof</link>
      <guid>https://dev.to/caroso1222/lessons-learned-doing-open-source-1eof</guid>
      <description>&lt;p&gt;I'm not popular in Github but I have a &lt;a href="https://github.com/caroso1222/notyf"&gt;repo with 1.5K stars&lt;/a&gt; and 1M hits/month. I got &lt;a href="https://github.com/caroso1222"&gt;some more&lt;/a&gt; with a few hundred stars. Here's what I've learned along the way.&lt;/p&gt;




&lt;h4&gt;
  
  
  Build good looking demos
&lt;/h4&gt;

&lt;p&gt;This may come off as superficial but it's worked wonders. I write frontend libraries where demos are critical for adoption. I put a lot of hours &lt;a href="https://dribbble.com/shots/10867744-Notyf-JavaScript-Open-Source-Library"&gt;designing&lt;/a&gt; and coding &lt;a href="https://ng-popups.carlosroso.com/"&gt;good&lt;/a&gt; &lt;a href="https://carlosroso.com/rmind/"&gt;looking&lt;/a&gt; &lt;a href="https://carlosroso.com/rmind/"&gt;demos&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  It's fine to be inconsistent
&lt;/h4&gt;

&lt;p&gt;I used to &lt;a href="https://github.com/caroso1222/notyf/issues/21"&gt;beat myself&lt;/a&gt; for being inconsistent. Not anymore. Github is &lt;a href="https://github.com/logo-quiz/logo-quiz"&gt;my lab&lt;/a&gt;, not my job. I make sure to have a stable, working version on master and move on. I come back once &lt;a href="https://github.com/caroso1222/notyf/graphs/contributors"&gt;motivation strikes again&lt;/a&gt;. I play it long term.&lt;/p&gt;

&lt;h4&gt;
  
  
  Build framework-agnostic libraries
&lt;/h4&gt;

&lt;p&gt;Building &lt;a href="https://github.com/caroso1222/ng-lib-schematics"&gt;libraries for frameworks&lt;/a&gt; is fun and it has its niche. But, if you want to have more impact, architect your libraries to be &lt;a href="https://github.com/caroso1222/notyf"&gt;framework-agnostic&lt;/a&gt; and easy to plug anywhere (see next point).&lt;/p&gt;

&lt;h4&gt;
  
  
  Write framework-specific recipes
&lt;/h4&gt;

&lt;p&gt;Whether you do backend, frontend, ML, or whatever, chances are your users are using frameworks. &lt;a href="https://github.com/caroso1222/notyf/tree/master/recipes"&gt;Write easy-to-follow recipes&lt;/a&gt; for how to plug your library into any of these abstractions. It'll boost adoption.&lt;/p&gt;

&lt;h4&gt;
  
  
  Have a clear scope
&lt;/h4&gt;

&lt;p&gt;Devs complain about clients asking too much yet we do the same on Github. You'll get a myriad of feature requests if your OSS project takes off. Communicate your scope. Learn to &lt;a href="https://github.com/caroso1222/ng-lib-schematics/pull/7"&gt;oblige&lt;/a&gt;. Learn to &lt;a href="https://github.com/caroso1222/notyf/issues/72"&gt;decline&lt;/a&gt;.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;I send posts like this to +1050 devs on my email list. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost"&gt;here&lt;/a&gt; to send you my tips and thoughts on algorithms and career growth. If email is not your thing, follow me on &lt;a href="https://twitter.com/caroso1222"&gt;Twitter&lt;/a&gt; to get &lt;a href="https://twitter.com/caroso1222/status/1279133799222251521"&gt;sneak peeks of what I'm working on&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h4&gt;
  
  
  Relaunch
&lt;/h4&gt;

&lt;p&gt;I'm not a marketer so launching is always a gamble. What I've learned, though, is you must relaunch. People might have not seen your stuff the first time. Release a new version and &lt;a href="https://medium.com/hackernoon/the-last-toast-library-youll-ever-need-8629e61b8e91"&gt;write a blog post&lt;/a&gt;. &lt;a href="https://twitter.com/caroso1222/status/1282781759105531909"&gt;Tweet about it&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Sneak in to understand usage
&lt;/h4&gt;

&lt;p&gt;Use the Github's &lt;a href="https://github.com/caroso1222/notyf/network/dependents?package_id=UGFja2FnZS0xNDQ5NDI5Nw%3D%3D"&gt;Dependency Graph&lt;/a&gt; to see who's using your packages (lots of &lt;a href="https://docs.github.com/en/github/visualizing-repository-data-with-graphs/about-the-dependency-graph#supported-package-ecosystems"&gt;supported ecosystems&lt;/a&gt;). Then visit your users' repos and analyze usage. Are they hacking it to fix a hidden bug? can you improve the API?&lt;/p&gt;

&lt;h4&gt;
  
  
  Use badges but don't oversell
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://cmustrudel.github.io/papers/icse18badges.pdf"&gt;Scientific research has shown&lt;/a&gt; that badges are positive signals for contributors and users. Adding a badge doesn't change popularity but popular projects are more likely to have badges. Use &lt;a href="https://cmustrudel.github.io/projects/badges/"&gt;assessment badges&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Use a GIF
&lt;/h4&gt;

&lt;p&gt;You have just a few seconds to convince users to try your library. Put a GIF at the top of your README to help them quickly jump in. You can use &lt;a href="https://asciinema.org/"&gt;terminal screencasts&lt;/a&gt;, &lt;a href="https://github.com/caroso1222/amazon-autocomplete/blob/master/README.md"&gt;GIF recordings&lt;/a&gt; or &lt;a href="https://github.com/sindresorhus/Gifski#screenshots"&gt;screenshot sequences&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Yes, build it again
&lt;/h4&gt;

&lt;p&gt;Unless you're a seasoned OSS developer, you need to build &lt;em&gt;yet another version&lt;/em&gt; of popular things. This will ignite your curiosity to try bolder things later. Don't try to code &lt;em&gt;the next big thing&lt;/em&gt;. Just build something. Today.&lt;/p&gt;

&lt;h4&gt;
  
  
  Redefine success
&lt;/h4&gt;

&lt;p&gt;I have &lt;a href="https://github.com/caroso1222/rmind"&gt;unpopular&lt;/a&gt; &lt;a href="https://github.com/caroso1222/node-reminders"&gt;projects&lt;/a&gt; with little to no installs. I'm proud of them, though. I learned a lot from building them. I use them myself. I'm getting better and &lt;a href="https://logoquiz.dev/"&gt;enjoying&lt;/a&gt; my projects. That's my ultimate bar for success.&lt;/p&gt;

&lt;h4&gt;
  
  
  Be aware of moniker naming rules
&lt;/h4&gt;

&lt;p&gt;Not sure about other ecosystems but NPM has &lt;a href="https://blog.npmjs.org/post/168978377570/new-package-moniker-rules?"&gt;moniker rules&lt;/a&gt; for package naming. I learned it the &lt;a href="https://carlosroso.com/how-to-check-npm-package-availability/"&gt;hard way&lt;/a&gt;. Pick a good name and make sure you can work with it. Only then start coding.&lt;/p&gt;




&lt;p&gt;This is a personal journal for things that have worked in my open source work. You might want to save it. I'll keep updating this as I come up with new findings. &lt;/p&gt;

&lt;p&gt;Do you have any advice to build good OSS projects? Let me know in the comments!&lt;/p&gt;




&lt;h5&gt;
  
  
  Shameful self-promotion
&lt;/h5&gt;

&lt;p&gt;My mission is to help devs grow by &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;posting tips to write CVs&lt;/a&gt;, &lt;a href="https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn"&gt;teaching algorithms&lt;/a&gt;, or talking about &lt;a href="https://carlosroso.com/how-i-got-into-the-most-exclusive-remote-working-platforms/"&gt;my experience&lt;/a&gt; working on &lt;a href="https://dev.to/caroso1222/best-sites-to-land-top-remote-jobs-100k-year-4n04"&gt;top remote workplaces&lt;/a&gt;. I also shared my experience transitioning to &lt;a href="https://dev.to/caroso1222/how-i-went-from-frontend-dev-to-machine-learning-engineer-6ao"&gt;Machine Learning&lt;/a&gt; and put up some &lt;a href="https://dev.to/caroso1222/are-these-lists-equal-28oj"&gt;fancy illustrations&lt;/a&gt; to explain computer science problems. I wrote an eBook to help you land a job in &lt;a href="https://www.toptal.com/#join-only-great-devs"&gt;Toptal&lt;/a&gt;. You can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;sign up here&lt;/a&gt; and get it right away.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Are these lists equal?</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 09 Jul 2020 22:22:21 +0000</pubDate>
      <link>https://dev.to/caroso1222/are-these-lists-equal-28oj</link>
      <guid>https://dev.to/caroso1222/are-these-lists-equal-28oj</guid>
      <description>&lt;p&gt;This is an entry-level algorithm to get you warmed up for tough interviews like those you get in Amazon, Google, &lt;a href="https://www.toptal.com/#join-only-great-devs" rel="noopener noreferrer"&gt;Toptal&lt;/a&gt;, and top remote work sites. It'll get you exposed to a real-life problem with time complexity analysis and data structure exploration.&lt;/p&gt;

&lt;h1&gt;
  
  
  The problem
&lt;/h1&gt;

&lt;p&gt;Given 2 unsorted lists, determine if both lists contain the exact same items. You can assume that there's no duplicate item in any of the lists.&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%2Fi%2Feqzztate2hlna72glh6k.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%2Fi%2Feqzztate2hlna72glh6k.png" alt="Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  1. Brute force makes it work
&lt;/h1&gt;

&lt;p&gt;Rule #1 to solve algorithms: Come up with a brute force solution first. &lt;strong&gt;The best solution is simply the worst one after some rework&lt;/strong&gt;. How do you normally check if an item exists in two lists? you traverse both lists and try to find the same item in both: &lt;em&gt;"For every element in list 1, loop through list 2 and try to find it"&lt;/em&gt;.&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%2Fi%2Fq2b3awj3f036e5hxj1rl.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%2Fi%2Fq2b3awj3f036e5hxj1rl.png" alt="quadratic solution"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The figure above shows the comparisons between the lists. Compare &lt;code&gt;1&lt;/code&gt; to all the items in list 2; then compare &lt;code&gt;6&lt;/code&gt;, and so on. But, what's that &lt;code&gt;n2&lt;/code&gt; weird curve at the right? Let's talk about time complexity. &lt;/p&gt;

&lt;h3&gt;
  
  
  BigO: n^2 for the nested loop
&lt;/h3&gt;

&lt;p&gt;Make sure to &lt;a href="https://carlosroso.com/4-tricks-to-instantly-boost-up-your-algorithms-game-bigo-made-super-easy/" rel="noopener noreferrer"&gt;read this quick recap on BigO complexity&lt;/a&gt; if you feel lost about this topic. For every item in list 1, you need to loop over all the items in list 2. That is, take item &lt;code&gt;1&lt;/code&gt; and visit all 5 items in list 2. Rinse and repeat for the remaining items &lt;code&gt;6&lt;/code&gt;, &lt;code&gt;2&lt;/code&gt;, &lt;code&gt;9&lt;/code&gt;, and &lt;code&gt;3&lt;/code&gt;. That results in 25 comparisons (5+5+5+5+5). A list with 10 items would result in 100 operations. That's why we say out algorithm resolves in quadratic time O(n^2).&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;I sent this post &lt;a href="https://twitter.com/caroso1222/status/1273711219703193601" rel="noopener noreferrer"&gt;weeks ago&lt;/a&gt; to +950 devs on my email list. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost" rel="noopener noreferrer"&gt;here&lt;/a&gt; to send you my tips and thoughts on algorithms and career growth. If email is not your thing, follow me on &lt;a href="https://twitter.com/caroso1222" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; to get &lt;a href="https://twitter.com/caroso1222/status/1279133799222251521" rel="noopener noreferrer"&gt;sneak peeks of what I'm working on&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  2. Sorting makes it better
&lt;/h1&gt;

&lt;p&gt;Brute force proved to be effective but not efficient (too many comparisons). Let's get clever. What if we sorted both lists and then compare items by their indices? After all, if both lists are sorted, the first items should be identical (&lt;code&gt;i=0&lt;/code&gt;), same for the second items (&lt;code&gt;i=1&lt;/code&gt;), and so on.&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%2Fi%2Finfu6mxmlxvaq6w25rmd.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%2Fi%2Finfu6mxmlxvaq6w25rmd.png" alt="solution with sorting"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can tell from the illustration, we first sort the lists, and then we make only one comparison per item. We stop when we find a mismatch on 2 items with the same index.&lt;/p&gt;

&lt;h3&gt;
  
  
  BigO: nlogn for the sorting algorithm
&lt;/h3&gt;

&lt;p&gt;As &lt;a href="https://carlosroso.com/4-tricks-to-instantly-boost-up-your-algorithms-game-bigo-made-super-easy/" rel="noopener noreferrer"&gt;previously explained&lt;/a&gt;, sorting arrays bring benefits but it also comes with a cost. The sorting cost is normally understood as O(nlogn). This complexity is better than our brute force solution, though, so we made our algorithm a bit more efficient.&lt;/p&gt;

&lt;h1&gt;
  
  
  3. Counting makes it perfect
&lt;/h1&gt;

&lt;p&gt;O(nlogn) is not "as cool" as we'd like our algorithm to be. Can we do better without sorting, and without a lot of rework? Let's think about this.&lt;/p&gt;

&lt;p&gt;If two lists contain the same elements, then I can find the same amount of &lt;code&gt;1&lt;/code&gt;s in list 1 than in list 2. If I tell you &lt;em&gt;"I have two &lt;code&gt;1&lt;/code&gt;s and three &lt;code&gt;2&lt;/code&gt;s in my list"&lt;/em&gt; you can then count the occurrences of the numbers in your lists and verify we both have the same frequencies. Can you spot the pattern now?&lt;/p&gt;

&lt;p&gt;We're changing the problem from "are these list equal?" to "verify both lists have the same frequencies for all items". &lt;strong&gt;We now have a 'counting' problem&lt;/strong&gt;: count the frequency of all items in list 1 and compare it with the frequency of all items in list 2. This is what &lt;a href="https://dev.to/caroso1222/hashmaps-like-you-ve-never-seen-them-3pnh"&gt;hashmaps&lt;/a&gt; are useful for.&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%2Fi%2Fgfdk9pk18f4ohiydfs2y.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%2Fi%2Fgfdk9pk18f4ohiydfs2y.png" alt="Hashmaps and counting"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the image above, we loop over every item and register in our "frequency" hashmap (&lt;em&gt;i. count items&lt;/em&gt;). We build a hashmap for every list. For example, we visit item &lt;code&gt;2&lt;/code&gt; in list 1 and we add a new record in our hashmap: &amp;lt;2, 1&amp;gt;. This means "item &lt;code&gt;2&lt;/code&gt; appears &lt;code&gt;1&lt;/code&gt; times in list 1".&lt;/p&gt;

&lt;p&gt;Finally, we loop over the keys in the hashmap #1 and compare the values with the same key in hashmap #2 (&lt;em&gt;ii. compare counts&lt;/em&gt;). If the key is not found in hashmap #2, then the lists are not equal.&lt;/p&gt;

&lt;p&gt;It seems like this is a lot more work, so, is this really more performant?&lt;/p&gt;

&lt;h3&gt;
  
  
  BigO: n for just one pass at the lists
&lt;/h3&gt;

&lt;p&gt;Let's count the operations:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Loop over list 1 only once. That is 5 items.&lt;/li&gt;
&lt;li&gt;Loop over list 2 only once. That is 5 items.&lt;/li&gt;
&lt;li&gt;Loop over the keys in the hashmap. That is 5 items (worst case).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This results in 15 operations. If we had 10 items, this would be 30 operations (10+10+10). Hopefully, you can see a linear correlation here: for lists of length &lt;code&gt;n&lt;/code&gt;, we do &lt;code&gt;3n&lt;/code&gt; operations. In computer science, we often simplify &lt;code&gt;O(3n)&lt;/code&gt; to &lt;code&gt;O(n)&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;We finally arrived at an algorithm with linear execution time. When you understand that &lt;code&gt;O(n^2)&lt;/code&gt; is worst than &lt;code&gt;O(nlong)&lt;/code&gt; which is worst than &lt;code&gt;O(n)&lt;/code&gt;, then you realize we have arrived at our most performant solution.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: This algorithm will also work for lists with duplicate items. Can you understand why? Explain us in the comments!&lt;/em&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Show me the code
&lt;/h1&gt;

&lt;p&gt;Let's see how our most performant solution looks like in code. I'm doing it in JavaScript just for familiarity.&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="nf"&gt;areListsEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;list2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;list2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// count items from list 1&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;map1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;list1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;map1&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;map1&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// count items from list 2&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;map2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;list2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;map2&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;map2&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// compare the counts, return false if counts dont match&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;map1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;map1&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;map2&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;areListsEqual&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;8&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 a &lt;a href="https://stackblitz.com/edit/typescript-jtgwpu" rel="noopener noreferrer"&gt;blitz&lt;/a&gt; with the working code. Can you adjust it to work with 3 lists? Send your blitz in the comments!&lt;/p&gt;




&lt;h1&gt;
  
  
  Key takeaways
&lt;/h1&gt;

&lt;p&gt;If you can only remember one thing from this post, let it be one of these:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Find brute force solutions first.&lt;/li&gt;
&lt;li&gt;Sorting is nice, but it comes at a cost.&lt;/li&gt;
&lt;li&gt;Hashmaps will land you the job.&lt;/li&gt;
&lt;/ol&gt;




&lt;h1&gt;
  
  
  I wrote an eBook to help you
&lt;/h1&gt;

&lt;p&gt;My mission is to help devs grow by &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;posting tips to write CVs&lt;/a&gt;, &lt;a href="https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn"&gt;teaching algorithms&lt;/a&gt;, or talking about &lt;a href="https://carlosroso.com/how-i-got-into-the-most-exclusive-remote-working-platforms/" rel="noopener noreferrer"&gt;my experience&lt;/a&gt; working on &lt;a href="https://dev.to/caroso1222/best-sites-to-land-top-remote-jobs-100k-year-4n04"&gt;top remote workplaces&lt;/a&gt;. I wrote an eBook to help you land a job in &lt;a href="https://www.toptal.com/#join-only-great-devs" rel="noopener noreferrer"&gt;Toptal&lt;/a&gt;. You can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/" rel="noopener noreferrer"&gt;sign up here&lt;/a&gt; and get it right away.&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%2Fi%2Fl80v7dpgjapmv0l3aona.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%2Fi%2Fl80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>How I went from Frontend Dev to Machine Learning Engineer</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 02 Jul 2020 19:47:29 +0000</pubDate>
      <link>https://dev.to/caroso1222/how-i-went-from-frontend-dev-to-machine-learning-engineer-6ao</link>
      <guid>https://dev.to/caroso1222/how-i-went-from-frontend-dev-to-machine-learning-engineer-6ao</guid>
      <description>&lt;p&gt;This is the story of how I went from zero to do real client work on Machine Learning. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;I want to keep this article short so you can grab what's useful for you and leave. But, if you're interested in the details with pictures and personal opinions, you can read the &lt;a href="https://carlosroso.com/frontend-to-machine-learning/" rel="noopener noreferrer"&gt;full story on my site&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Note: I hate overnight success stories like "how I reached X in 3 months", I don't think real progress comes like that and it's just stressful for the reader. Therefore, I'm just going to say this all happened in the span of a year or so.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  TL;DR
&lt;/h1&gt;

&lt;p&gt;Here's an overview of my journey. In the next paragraphs, I'll put useful links and a bit of my personal story.&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%2Fi%2F5y1ogoeuaak3seg90zbr.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%2Fi%2F5y1ogoeuaak3seg90zbr.png" alt="Summary of my journey learning Machine Learning"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;I respect your time so I'll summarize a lot. &lt;a href="https://carlosroso.com/frontend-to-machine-learning/" rel="noopener noreferrer"&gt;Go here&lt;/a&gt; if you want to read the full story, though.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. First book
&lt;/h2&gt;

&lt;p&gt;My wife got me this &lt;a href="https://mitpress.mit.edu/books/machine-learning" rel="noopener noreferrer"&gt;Machine Learning handbook&lt;/a&gt; from MIT. It's a pretty short overview of the topic that got me triggered to dive deeper.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. First online course
&lt;/h2&gt;

&lt;p&gt;I then enrolled in the &lt;a href="https://www.datacamp.com/tracks/data-scientist-with-python" rel="noopener noreferrer"&gt;Data Scientist with Python&lt;/a&gt; track in &lt;strong&gt;DataCamp&lt;/strong&gt;. I didn't finish the whole course, just took a few lessons until I felt I could move on alone.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Second book
&lt;/h2&gt;

&lt;p&gt;I bought a copy of the book &lt;a href="https://www.amazon.com/Hands-Machine-Learning-Scikit-Learn-TensorFlow/dp/1491962291" rel="noopener noreferrer"&gt;Hands-On Machine Learning with Scikit-Learn and TensorFlow&lt;/a&gt;. It was a terrific investment. This book is great to learn supervised and non-supervised learning with Scikit-Learn as well as deep neural networks with Tensorflow. &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%2Fi%2Fxhp5vjfuqyey24hkn4sg.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%2Fi%2Fxhp5vjfuqyey24hkn4sg.png" alt="hands-on machine learning book"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  4. First competition
&lt;/h1&gt;

&lt;p&gt;I then tried some luck at the &lt;a href="https://www.kaggle.com/c/titanic" rel="noopener noreferrer"&gt;Kaggle's Titanic Machine Learning competition&lt;/a&gt;. This is the "hello world" of Machine Learning competitions.&lt;/p&gt;

&lt;p&gt;I ended up submitting 3 attempts. I didn't get good scores but I was proud I put in the time and self-discipline to finish the challenge.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;This is the type of content I send to +850 devs on my email list. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost" rel="noopener noreferrer"&gt;here&lt;/a&gt; to get my tips and thoughts on algorithms and career growth. If email is not your thing, follow me on &lt;a href="https://twitter.com/caroso1222" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; to get &lt;a href="https://twitter.com/caroso1222/status/1273711219703193601" rel="noopener noreferrer"&gt;sneak peeks of what I'm working on&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  5. First real-world project
&lt;/h1&gt;

&lt;p&gt;I secretly built an unsolicited &lt;strong&gt;news topic classifier&lt;/strong&gt; for the company I worked for. It would analyze the content on a news article and predict its category (sports, politics, religion, etc) based on previous training.&lt;/p&gt;

&lt;p&gt;As it turned out, they didn't like it at all. I didn't feel like trash, though. &lt;strong&gt;I proved myself I could do ML professionally&lt;/strong&gt;. I moved on.&lt;/p&gt;

&lt;h1&gt;
  
  
  6. Second competition
&lt;/h1&gt;

&lt;p&gt;I went to compete on the &lt;a href="https://www.udacity.com/aws-deepracer-scholarship" rel="noopener noreferrer"&gt;AWS DeepRacer Scholarship Challenge&lt;/a&gt; which would grant access to enroll in the &lt;a href="https://www.udacity.com/course/machine-learning-engineer-nanodegree--nd009t" rel="noopener noreferrer"&gt;Machine Learning Engineer Nanodegree Program&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The competition consisted in tuning an autonomous racing car to complete a track as fast as possible&lt;/strong&gt;. The top 200 times would get the scholarship.&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%2Fi%2Fqq6b45xsvnz5mbyrhp1q.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%2Fi%2Fqq6b45xsvnz5mbyrhp1q.png" alt="AWS DeepRacer simulation"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(Self-note: next time don't take pictures with a potato). &lt;strong&gt;I ended up winning the scholarship&lt;/strong&gt; but not for my scores, my lap times were crap. I got mine either for luck or for creating &lt;a href="https://github.com/caroso1222/awesome-deepracer" rel="noopener noreferrer"&gt;this repo&lt;/a&gt; with some resources for new competitors. I didn't ask, though. I moved on.&lt;/p&gt;

&lt;h1&gt;
  
  
  7. Second online course
&lt;/h1&gt;

&lt;p&gt;I enrolled in the &lt;a href="https://www.udacity.com/course/machine-learning-engineer-nanodegree--nd009t" rel="noopener noreferrer"&gt;Machine Learning Engineer Nanodegree Program&lt;/a&gt; with the scholarship I'd won. It was basic but I learned a lot about deploying ML models to production in AWS.&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%2Fi%2F0s3c7qzkw84owwxe70zv.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%2Fi%2F0s3c7qzkw84owwxe70zv.png" alt="Udacity Diploma"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I didn't like any of the choices they offered for the final project. I then decided to find something meaningful to work on.&lt;/p&gt;

&lt;h1&gt;
  
  
  8. Second real-world project
&lt;/h1&gt;

&lt;p&gt;I reached out to my friend &lt;a href="https://twitter.com/ni500" rel="noopener noreferrer"&gt;Nicolás&lt;/a&gt; who happens to run one of the biggest crowdfunding sites in Latin America, &lt;a href="https://vaki.co/inicio" rel="noopener noreferrer"&gt;Vaki.co&lt;/a&gt;. I proposed to build a recommender system, &lt;em&gt;à la&lt;/em&gt; Netflix or Amazon. He liked the idea and we started working together.&lt;/p&gt;

&lt;p&gt;After several weeks of work, I built a hybrid recommender system that predicts recommendations based on two models: Content-Based and Collaborative Filtering. You can read the full report over &lt;a href="https://carlos-temp-public.s3.amazonaws.com/udacity-report.pdf" rel="noopener noreferrer"&gt;here&lt;/a&gt;. It's ready to be used in production but hasn't yet been implemented (out of my scope).&lt;/p&gt;




&lt;p&gt;I haven't built anything else after that. I don't want to devote myself to something I picked out of FOMO and which doesn't really spark that fire within me. &lt;strong&gt;I have added something new to my toolbox, but I won't necessarily switch paths anytime soon.&lt;/strong&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Key takeaways
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The ultimate guide to learn is non-existent. Everyone needs to find their sweet spot. &lt;strong&gt;For me it is print books, pen and paper, and practicing with real/dummy projects.&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Do your best to understand the math.&lt;/strong&gt; Tuning hyperparams or reasoning about model performance feels weird without a good foundation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;I'm not a researcher, I'm an engineer.&lt;/strong&gt; I'm ok with not understanding all the latest, complex advances in AI and ML. I'm happy to understand and use common ML tools to solve real problems. For me, Machine Learning is just a means to an end, not the end itself.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;I don't like that feedback is very slow on ML.&lt;/strong&gt; It's very frustrating for me, coming from a product background, to train a deep neural network for hours just to see garbage results and not be able to tell why.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Dive into other topics to grow your toolbox but don't deviate from your true path&lt;/strong&gt;, whatever that is. I'd rather double down on my strengths than being a jack of all trades.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Thanks for reading. Never stop learning!&lt;/p&gt;




&lt;h2&gt;
  
  
  Shameful self-promotion
&lt;/h2&gt;

&lt;p&gt;You can follow me on &lt;a href="https://twitter.com/caroso1222" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or just keep reading me here. I wrote about &lt;a href="https://dev.to/caroso1222/how-i-got-into-the-most-exclusive-remote-working-platforms-45dk"&gt;my story getting into Toptal&lt;/a&gt;, my &lt;a href="https://dev.to/caroso1222/resume-pro-tip-the-absolute-best-way-to-show-your-work-experience-2o97"&gt;recommendations&lt;/a&gt; to write a &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;good resume&lt;/a&gt;, a &lt;a href="https://dev.to/caroso1222/best-sites-to-land-top-remote-jobs-100k-year-4n04"&gt;curated list&lt;/a&gt; to find top-remote jobs, and some &lt;a href="https://dev.to/caroso1222/hashmaps-like-you-ve-never-seen-them-3pnh"&gt;more advice&lt;/a&gt; to &lt;a href="https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn"&gt;ace algorithm interviews&lt;/a&gt;. I also wrote an eBook to get into Toptal, &lt;a href="https://carlosroso.com/cracking-the-toptal-interview" rel="noopener noreferrer"&gt;check it out&lt;/a&gt; if that's your thing.&lt;/p&gt;

</description>
      <category>career</category>
      <category>machinelearning</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Hashmaps like you've never seen them</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Wed, 24 Jun 2020 18:57:51 +0000</pubDate>
      <link>https://dev.to/caroso1222/hashmaps-like-you-ve-never-seen-them-3pnh</link>
      <guid>https://dev.to/caroso1222/hashmaps-like-you-ve-never-seen-them-3pnh</guid>
      <description>&lt;p&gt;Enter hashmaps. You're using them every day, yet you might not be aware of how it works or why you're preferring them. Why do I say it's the best? not only it is your silver bullet in any coding interview, but it also gives you free performance gains in your day-to-day code.&lt;/p&gt;

&lt;h1&gt;
  
  
  Hashmaps disguised as objects or sets
&lt;/h1&gt;

&lt;p&gt;Open your last project and &lt;strong&gt;you're almost certainly using hashmaps all over the place&lt;/strong&gt;. If you're writing JavaScript, they are just plain objects &lt;code&gt;{ name: 'carlos' }&lt;/code&gt; (not strictly, see the final section). Java uses the &lt;code&gt;HashMap&lt;/code&gt; object, Python calls them dictionaries, and Go has maps. Let's see a TypeScript example, just for the sake of the illustration.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Record&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;carlos&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;28&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;leena&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;34&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;luigy&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;14&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;maria&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;54&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;So, you're familiar with the concept - you know how it looks like, but, what is it?&lt;/p&gt;

&lt;h1&gt;
  
  
  A ridiculously efficient way to read and write
&lt;/h1&gt;

&lt;p&gt;A hashmap is a data structure (i.e. a piece of code to manage data) which is absurdly efficient to store and retrieve data to/from memory. Think of it as a table with  pairs. A 'key' is how you identify a 'value'. In the previous section, the keys are 'carlos', 'leena, 'luigy', and 'maria'; the values are 28, 34, 14, and 54.&lt;/p&gt;

&lt;h1&gt;
  
  
  Hash. As for 'hash' function
&lt;/h1&gt;

&lt;p&gt;A hashmap is an array on steroids. The difference is that you don't access the array with numeric indices, but instead with objects. How come so? How do you point to something in the array if you don't have its index?&lt;/p&gt;

&lt;p&gt;Simple: if you don't have the array index, you need a way to get it from the object.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sR1U2xqJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wxl7smgzmc7fxbe85v94.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sR1U2xqJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wxl7smgzmc7fxbe85v94.png" alt="Hash illustration"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The fire is the magic. That magic is called &lt;strong&gt;the Hash Function&lt;/strong&gt;. It's a way to turn something (string, number, object) into a position within an array. Every programming language has its own esoteric way to write this function. A hashmap can be terribly inefficient or blazing fast depending on its hashing function.&lt;/p&gt;

&lt;p&gt;What does a &lt;del&gt;terrible&lt;/del&gt; hashing function look like, then?&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;I sent this post &lt;a href="https://twitter.com/caroso1222/status/1262878092672086017"&gt;weeks ago&lt;/a&gt; to +700 devs on my email list. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost"&gt;here&lt;/a&gt; to get my tips and thoughts on algorithms and career growth. If email is not your thing, follow me on &lt;a href="https://twitter.com/caroso1222"&gt;Twitter&lt;/a&gt; to get &lt;a href="https://twitter.com/caroso1222/status/1273711219703193601"&gt;sneak peeks of what I'm working on&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Counting chars
&lt;/h1&gt;

&lt;p&gt;Let's implement a terrible hashing function that only works for keys as strings. It'll map keys to an array of length 10. Here's how our hash function works:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Our hashing function h(x)&lt;/strong&gt;: Convert every character of string &lt;code&gt;x&lt;/code&gt; to its numeric position in the alphabet. Sum all these numbers. Divide it by 10 and take its reminder (&lt;em&gt;aka&lt;/em&gt; modulus %).&lt;/p&gt;

&lt;p&gt;Sounds complex, better to show an example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;h('abc') = (1+2+3) % 10 = 6 % 10 = &lt;strong&gt;6&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;h('carlos') = (3+1+18+12+15+19) % 10 = 68 % 10 = &lt;strong&gt;8&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This means that the map &lt;code&gt;{ carlos: 28 }&lt;/code&gt; will store the value &lt;code&gt;28&lt;/code&gt; in the position &lt;code&gt;8&lt;/code&gt; of its underlying array. Here's a more visual representation of the hashing function concept.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--H2yzGy8E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kkolw0o239gwjpkz3a2i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--H2yzGy8E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kkolw0o239gwjpkz3a2i.png" alt="Hash Function"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Free perf gains
&lt;/h1&gt;

&lt;p&gt;By this point, you're sold on the concept. You understand why it's so fast and how it works internally. But, why should you care? How can you apply this concept in real life?&lt;/p&gt;

&lt;p&gt;Let's work on an algorithm you might easily come across in your day-to-day job: &lt;strong&gt;Find the most common item in a list of words&lt;/strong&gt;. For example, in the list &lt;code&gt;[4,1,3,4]&lt;/code&gt; the most common element is '4'. There are many ways to solve this but we'll focus on 2 of them here:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For every element, find all its duplicates. Return the element that has most duplicates.&lt;/li&gt;
&lt;li&gt;Count the occurrences of each element. Pick the element with most appearances.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The first approach requires a nested loop (for every element &lt;code&gt;i&lt;/code&gt;, loop over all other elements &lt;code&gt;j&lt;/code&gt; to search this item); the second approach will only need a hashmap. Let's see how they compare in terms of operations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6YNxKZwK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/krtig9rnzeuk50jklepj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6YNxKZwK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/krtig9rnzeuk50jklepj.png" alt="Comparisson"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you don't understand why 21 and 9 operations, think about this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;In the first approach, you visit the first item 'carlos' and then &lt;strong&gt;visit the rest of the items to find something similar&lt;/strong&gt;. That is 6 visits. Then you visit the 2nd item 'edgar' and go through the remaining 4 items. That is 5 visits. Keep doing it until you're left with just 1 element, sum all the visits you pay to the numbers, and you're left with 21 operations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the second approach, you visit the first item 'carlos' and save it in a hashmap with value 1. Every time you find another 'carlos', you'll increment its value in the hashmap. That is, &lt;strong&gt;you need to go over each element just once&lt;/strong&gt;, making it 6 visits. The hashtable ends up with 3 items, so you'll need to go over each one of these to find out which one appeared the most (max number). That sums up to 9 operations.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  The larger the input, the better the perf
&lt;/h1&gt;

&lt;p&gt;You might think: &lt;em&gt;"that's a dumb example just to make your point, 21 vs 9 is nothing for my CPU"&lt;/em&gt;. Let's see what happens when you have an array of 10, 20, 30, ..., 100 items.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lvl0I5ou--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5o0ppkwzmok21mkcdcr2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lvl0I5ou--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5o0ppkwzmok21mkcdcr2.png" alt="BigO Comparisson"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, our algorithm performs much better when using the hashmap than when using the nested loop. &lt;strong&gt;Algorithms should be judged according to their performance when the input approaches infinity&lt;/strong&gt;. In fact, the first approach runs in quadratic time &lt;code&gt;O(n^2)&lt;/code&gt; whereas the one with the hashmap is linear &lt;code&gt;O(n)&lt;/code&gt;. That's &lt;a href="https://carlosroso.com/4-tricks-to-instantly-boost-up-your-algorithms-game-bigo-made-super-easy/"&gt;BigO notation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Knowledge is power. You have now an additional piece of power to make your code a bit more efficient with Hashmaps!&lt;/p&gt;

&lt;h1&gt;
  
  
  Keep curious
&lt;/h1&gt;

&lt;p&gt;This was just an introduction to a data structure I personally find very useful and interesting (literally the best one you can ever learn). That being said, this was just the tip of the iceberg of a huge topic. There's a lot of complexity involved when dealing with hashmaps. If you feel intrigued, I invite you to keep researching the following topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://javarevisited.blogspot.com/2016/01/how-does-java-hashmap-or-linkedhahsmap-handles.html"&gt;Collision handling&lt;/a&gt;: 'carlos' and 'mike' both map to the same array index &lt;code&gt;8&lt;/code&gt;. What happens then? how do you retrieve an element if its hash collides with another key?&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://stackoverflow.com/questions/10901752/what-is-the-significance-of-load-factor-in-hashmap"&gt;Load factor&lt;/a&gt;: What happens when the list is full? the list should grow from 10 elements to 20, how does it decide when to do it?&lt;/li&gt;
&lt;li&gt;JavaScript may not be using Hashmaps to store objects. &lt;a href="https://channel9.msdn.com/Shows/Going+Deep/Expert-to-Expert-Erik-Meijer-and-Lars-Bak-Inside-V8-A-Javascript-Virtual-Machine"&gt;How does it do it, then?&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Just to feed your curiosity, &lt;a href="https://www.youtube.com/watch?v=ncHmEUmJZf4"&gt;watch how Google built a super fast and efficient Hashmap&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Let me know on &lt;a href="https://twitter.com/caroso1222"&gt;Twitter&lt;/a&gt; if you got some value from this post and learned something new. Be more mindful about the code you write, think about performance and the stuff underneath. Hashmaps will also help you ace a lot of interviews in your career, &lt;a href="https://carlosroso.com/how-i-got-into-the-most-exclusive-remote-working-platforms/"&gt;I've been there&lt;/a&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  I wrote an e-book to help you
&lt;/h1&gt;

&lt;p&gt;My mission is to help devs grow by &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;posting tips to write CVs&lt;/a&gt;, &lt;a href="https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn"&gt;teaching algorithms&lt;/a&gt;, or talking about &lt;a href="https://carlosroso.com/how-i-got-into-the-most-exclusive-remote-working-platforms/"&gt;my experience&lt;/a&gt; working on &lt;a href="https://dev.to/caroso1222/best-sites-to-land-top-remote-jobs-100k-year-4n04"&gt;top remote workplaces&lt;/a&gt;. I wrote an ebook to help you land a job in &lt;a href="https://www.toptal.com/#join-only-great-devs"&gt;Toptal&lt;/a&gt;. If that's something you're interested in, &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;sign up here&lt;/a&gt; and get it in my next email.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>Best sites to land top remote jobs [+$100K/year]</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Fri, 19 Jun 2020 17:05:43 +0000</pubDate>
      <link>https://dev.to/caroso1222/best-sites-to-land-top-remote-jobs-100k-year-4n04</link>
      <guid>https://dev.to/caroso1222/best-sites-to-land-top-remote-jobs-100k-year-4n04</guid>
      <description>&lt;p&gt;There are 2 ways to land remote work these days: you either apply for companies directly (or via referrals), or you go to freelancing sites and land jobs there. This last kind can be classified into 2 types: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Non-vetting platforms like Upwork, Fiverr, or Freeeup where you create an account and start applying to jobs.&lt;/li&gt;
&lt;li&gt;Vetting platforms where you need to pass 3-4 tough engineering filters to start receiving job offers.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I'll talk about the second category here. Yes, you'll probably spend a lot of time in these interviews, but you'll likely get paid &lt;a href="https://dev.to/caroso1222/this-is-how-much-you-can-really-make-in-the-top-remote-working-platforms-100k-32og"&gt;3x or 4x&lt;/a&gt; compared to non-vetting platforms.&lt;/p&gt;

&lt;p&gt;I myself have worked on some of these and can honestly say &lt;a href="https://dev.to/caroso1222/how-i-got-into-the-most-exclusive-remote-working-platforms-45dk"&gt;it's changed my life&lt;/a&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  Toptal
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience required:&lt;/strong&gt; You're expected to be fluent in your tech stack. I'd say you need somewhere between 2-3 years of experience.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pros:&lt;/strong&gt; Excellent salary. Vetting for clients too. Full-time &amp;amp; part-time mainly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cons:&lt;/strong&gt; Tough and lengthy interview process.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview:&lt;/strong&gt; &lt;a href="https://www.toptal.com/top-3-percent"&gt;4 steps&lt;/a&gt;: English interview, online coding assessment, live algorithms screening, take-home project. It can be heavy on algorithms.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Salary (USD/year):&lt;/strong&gt; Frontend: &lt;a href="https://www.toptal.com/developers/front-end/hourly-rate"&gt;80k-120k&lt;/a&gt;. Backend: &lt;a href="https://www.toptal.com/developers/back-end/hourly-rate"&gt;70k-120k&lt;/a&gt;. Machine Learning: &lt;a href="https://www.toptal.com/developers/machine-learning/hourly-rate"&gt;80k-130k&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.toptal.com/#join-only-great-devs"&gt;Apply here&lt;/a&gt;&lt;/strong&gt; (&lt;em&gt;Referral link&lt;/em&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  CrossOver
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience required:&lt;/strong&gt; They have a huge variety of openings ranging from 2 years exp for junior developers to +15 years exp for high-level managers. You'll need familiarity with JavaScript, C#, C++, or Java.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pros:&lt;/strong&gt; Good salary. Only long term, full-time work.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cons:&lt;/strong&gt; They take screenshots of your machine every 10 minutes to make sure you're not on Facebook or Twitter.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview:&lt;/strong&gt; 6 steps: basic fit, psychometric (&lt;a href="https://www.criteriacorp.com/resources/ccat_prep.php"&gt;CCAT&lt;/a&gt;: basic math and logic test), language, software questions (multiple choice), 2 free-response questions, and the final interview with a hiring manager. You have 13 days to complete.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Salary (USD/year)&lt;/strong&gt; Junior: &lt;a href="https://www.crossover.com/job-software-engineer"&gt;30k&lt;/a&gt;. Mid level: &lt;a href="https://www.crossover.com/job-software-architect"&gt;60k&lt;/a&gt;. Senior: &lt;a href="https://www.crossover.com/job-chief-software-architect"&gt;100k&lt;/a&gt;. Technical Manager: &lt;a href="https://www.crossover.com/technicalproductmanager"&gt;100k&lt;/a&gt;. VP: &lt;a href="https://www.crossover.com/vpproductmanagement"&gt;200k&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://jobs.crossover.com/"&gt;Apply here&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  TripleByte
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience required:&lt;/strong&gt; 2-3 years of experience and good preparation to pass the online quiz and interview.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pros:&lt;/strong&gt; Excellent pay. Good, well-funded startups to work for. No resume or credentials needed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cons:&lt;/strong&gt; Mostly for onsite US jobs. Few offers for remote only.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview:&lt;/strong&gt; 3 attempts to pass a 35 question quiz. 2 mins per question. 2-hour Skype interview afterward. Make sure you apply to "Remote only" positions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Salary (USD/year)&lt;/strong&gt;: For remote, it can range between &lt;a href="https://triplebyte.com/company/public/triplebyte/RSqyQS2/software-engineer"&gt;100k - 190k&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://triplebyte.com/iv/JfGp6l4/cp/header"&gt;Apply here&lt;/a&gt;&lt;/strong&gt; (&lt;em&gt;Referral link&lt;/em&gt;)&lt;/li&gt;
&lt;/ul&gt;




&lt;blockquote&gt;
&lt;p&gt;I sent this post weeks ago to +550 devs on my email list. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost"&gt;here&lt;/a&gt; if you want to get my tips and thoughts on career growth.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Turing
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience required:&lt;/strong&gt; At least &lt;a href="https://welcome.turing.com/"&gt;2 years&lt;/a&gt; of industry experience as a software engineer.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pros:&lt;/strong&gt; Legit company with hires all over the world (&lt;a href="https://www.youtube.com/watch?v=g-MfqXSXoKk"&gt;Africa&lt;/a&gt;, &lt;a href="https://www.youtube.com/watch?v=xwkAfjuD9Bw"&gt;Brasil&lt;/a&gt;, &lt;a href="https://www.youtube.com/watch?v=OXTYsG0FwnQ"&gt;Pakistan&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cons:&lt;/strong&gt; Tough and lengthy interview process. Less than 1% accepted.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview:&lt;/strong&gt; Unclear number of steps. You can easily go through algorithm tests, multiple-choice quiz for a specific tech stack, live interview with a coding task, and maybe you also need to build a take-home project.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Salary (USD/year)&lt;/strong&gt;: Based on my research, you won't probably get more than 100k/yr.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://turing.com/"&gt;Apply here&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Arc
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience required:&lt;/strong&gt; You'll have it pretty difficult to pass with less than 2-3 years.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pros:&lt;/strong&gt; Full-time and hourly jobs. Great &lt;a href="https://www.trustpilot.com/review/arc.dev"&gt;online reviews&lt;/a&gt;. You can set your expected salary.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cons:&lt;/strong&gt; Lengthy interview process&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview:&lt;/strong&gt; &lt;a href="https://arc.dev/how-arc-works"&gt;4 steps&lt;/a&gt;: Background and experience check, coding algorithms challenge, 1-1 English interview assessment, and a 2.5-hour interview with a senior dev.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Salary (USD/year)&lt;/strong&gt; Mostly depends on your location and seniority. Here's a list with rough averages. Latin America: &lt;a href="https://arc.dev/remote-developer-salary?location=argentina"&gt;70k&lt;/a&gt;. Africa: &lt;a href="https://arc.dev/remote-developer-salary?location=south-africa"&gt;60k&lt;/a&gt;. Asia: &lt;a href="https://arc.dev/remote-developer-salary?location=singapore"&gt;65k&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://arc.dev/developer/apply"&gt;Apply here&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Gun.io
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience required:&lt;/strong&gt; Their vetting process is not hard - I'd say +1.5 years of experience is enough to apply.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pros:&lt;/strong&gt; Short, easy application process.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cons:&lt;/strong&gt; The site is not polished, lacks design, and feels buggy at times. Requires a reference from a previous employer. Mostly hourly, contract work, not full-time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview:&lt;/strong&gt; 3 step process: Reference check from a previous employer (this one is weird), 3 online algorithm challenge, video self-interview (just you and your camera).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Salary:&lt;/strong&gt; Mostly hourly contract work. &lt;a href="https://twitter.com/caroso1222/status/1260583747591815176"&gt;$40-$70 USD/hr&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://gunio.referralrock.com/l/1CARLOSROSO83/"&gt;Apply here&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Prepare and ace the interview
&lt;/h1&gt;

&lt;p&gt;I wrote a &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;FREE guide&lt;/a&gt; with a lot of &lt;strong&gt;tips and tricks to ace these types of tech interviews&lt;/strong&gt;. If you're curious, you can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;sign up here&lt;/a&gt; and get it in my next email.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;You might want to &lt;strong&gt;save this post&lt;/strong&gt; as I'll probably discover some more platforms in the future and update the list. Also, I normally use my &lt;a href="https://twitter.com/caroso1222"&gt;Twitter&lt;/a&gt; to post more of these platforms as I find them.&lt;/p&gt;

&lt;p&gt;PD: &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;Here's&lt;/a&gt; some advice to write your &lt;a href="https://dev.to/caroso1222/resume-pro-tip-the-absolute-best-way-to-show-your-work-experience-2o97"&gt;resume&lt;/a&gt; and &lt;a href="https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn"&gt;here's&lt;/a&gt; a short post to get you warmed up on algorithms. If you think this helps you, follow me here and stay up to date!&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Can you recommend any other similar sites?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>remote</category>
      <category>webdev</category>
    </item>
    <item>
      <title>4 tricks to boost up your algorithms game</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 11 Jun 2020 18:04:44 +0000</pubDate>
      <link>https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn</link>
      <guid>https://dev.to/caroso1222/4-tricks-to-boost-up-your-algorithms-game-9bn</guid>
      <description>&lt;p&gt;&lt;strong&gt;TL;DR.&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Associate O(1) with table lookups and math&lt;/li&gt;
&lt;li&gt;O(n) is for list traversal&lt;/li&gt;
&lt;li&gt;The weird logarithm is for sorting: O(nlogn)&lt;/li&gt;
&lt;li&gt;Connect O(n&lt;sup&gt;2&lt;/sup&gt;) with nested loops&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Whether you agree or not with whiteboard interviews and algorithmic questions, becoming good at this is yet another skill you should master at some point. And, to become good at algorithms, you should grasp the notion of BigO. Notice I wrote "grasp", not "master". There's nothing mystic about this topic. &lt;/p&gt;

&lt;p&gt;BigO is simply a notation that tells you how well or bad your algorithm performs as your input size grows. I've identified some tricks I use from time to time to solve and analyze algorithms.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;I sent this post weeks ago to +450 devs on my maillist. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost"&gt;here&lt;/a&gt; if you want to get my tips and thoughts on career growth.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  1. Associate O(1) with table lookups and math
&lt;/h2&gt;

&lt;p&gt;Means your algorithm will take roughly the same amount of time regardless of the input size. Applies normally to math operations and object lookups.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// regardless of a or b, a sum is a math operation that takes just &lt;/span&gt;
&lt;span class="c1"&gt;// one clock cycle to complete&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// no matter of how big your map is (e.g an object in JavaScript), &lt;/span&gt;
&lt;span class="c1"&gt;// a lookup will take 1 cycle to complete&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;lookup&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;You know when you access the &lt;code&gt;bar&lt;/code&gt; prop from the &lt;code&gt;foo&lt;/code&gt; object like &lt;code&gt;foo.bar&lt;/code&gt;? Well, that's an O(1) operation.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: Hashmap lookups are considered to be O(1) in theory regardless of how they solve collisions&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. O(n) is for list traversal
&lt;/h2&gt;

&lt;p&gt;Means your algorithm run time will grow linearly with the input. Take, for instance, the algorithm to find the max number of a list. Your algorithm necessarily needs to visit every element to know which number is the max. If your list grows 2x, your algorithm will roughly take twice the time to complete.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// you need to loop through all the elements to find the max.&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;findMax&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="kc"&gt;Infinity&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;obj&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;
  
  
  3. The weird logarithm is for sorting: O(nlogn)
&lt;/h2&gt;

&lt;p&gt;This one is easier than what it looks like. Don't worry about the weird logarithm over there. Logs in BigO notation normally means you're dividing something into halves, and each half is divided again into halves. But, the only thing you need to remember is this: &lt;strong&gt;O(nlogn) is mostly associated with sorting&lt;/strong&gt;. Sorting lists are not free operations, you're incurring in costs when using them. Let's see an example of a very inefficient way to get the max of a list:&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;getMax&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;O(n) is better than O(nlogn) because if you multiply 🦄 by logn, you get a bigger 🦄.&lt;/p&gt;

&lt;p&gt;Now you have good criteria to decide what's most efficient to find a max. Would you use the O(n)? or the O(nlogn) algorithm?&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Connect O(n&lt;sup&gt;2&lt;/sup&gt;) with nested loops
&lt;/h2&gt;

&lt;p&gt;Means your input size affects the algorithm like crazy (not quite as bad as others). If your input size doubles, your run time grows 4x. If your input grows 4x, your run time grows 16x. This normally takes the shape of a nested loop. Let's write a very inefficient way to find if an array has a duplicate.&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;hasDuplicates&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;el_i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;entries&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;el_j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;entries&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;el_i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;el_j&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&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;For every element in the list of size n, we're looping over the whole list of size n. That means we're visiting the elements n*n = n&lt;sup&gt;2&lt;/sup&gt; times.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Can you come up with an O(n) algorithm for this task? one that only loops through the list once? let me know in the comments&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;No need to dig into this topic if you're against learning algorithms, I can respect that. Just save this table and know that some tasks cost more than others and why.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N3KxDi8Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/eho9m3ouojmbcwh89ay9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N3KxDi8Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/eho9m3ouojmbcwh89ay9.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Others
&lt;/h2&gt;

&lt;p&gt;There are all kinds of &lt;a href="https://www.bigocheatsheet.com/"&gt;complexities and nuances&lt;/a&gt; on this topic. You're free to keep &lt;a href="https://www.youtube.com/watch?v=v4cd1O4zkGw&amp;amp;t=11s"&gt;researching&lt;/a&gt;. But, if you can grasp these 4 concepts and stick them to heart, you'll level up your algorithms game for interviews, PR reviews, or just to write better code.&lt;/p&gt;




&lt;h1&gt;
  
  
  Don't fear coding interviews
&lt;/h1&gt;

&lt;p&gt;I've used these concepts to get better at coding algorithms. I've since landed interviews (and job offers) at Amazon, &lt;a href="https://www.toptal.com/#join-only-great-devs"&gt;Toptal&lt;/a&gt; and &lt;a href="https://dev.to/caroso1222/how-i-got-into-the-most-exclusive-remote-working-platforms-45dk"&gt;a few more top remote work platforms&lt;/a&gt;. I wrote a &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;FREE guide&lt;/a&gt; with a lot of &lt;strong&gt;tips and tricks to ace remote tech interviews&lt;/strong&gt;. If you're curious, you can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;sign up here&lt;/a&gt; and get it in my next email.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;My DMs on &lt;a href="https://twitter.com/caroso1222"&gt;Twitter&lt;/a&gt; are always open to help you on your career, algorithm interviews, &lt;a href="https://dev.to/caroso1222/resume-pro-tip-the-absolute-best-way-to-show-your-work-experience-2o97"&gt;resume questions&lt;/a&gt;, or growth tips. Shoot me a message or just say hi!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>Resume Pro Tip: The absolute best way to show your work experience</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Wed, 03 Jun 2020 16:37:50 +0000</pubDate>
      <link>https://dev.to/caroso1222/resume-pro-tip-the-absolute-best-way-to-show-your-work-experience-2o97</link>
      <guid>https://dev.to/caroso1222/resume-pro-tip-the-absolute-best-way-to-show-your-work-experience-2o97</guid>
      <description>&lt;p&gt;Say you're a recruiter and you're reading the "Work experience" section of a candidate's resume.&lt;/p&gt;

&lt;p&gt;Which of the following bullets sounds like a more impressive statement for you?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Spent dozens of hours writing blog posts about Go and Kubernetes.&lt;/li&gt;
&lt;li&gt;Reached +20k visits (aggregate reading time +100 hours) in technical posts on Go and Kubernetes.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;What about this one?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Created presentations based on data for company stakeholders.&lt;/li&gt;
&lt;li&gt;Helped stakeholders take decisions worth +50k USD by analyzing big data (+2000GB) and building reports in PowerBI.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I personally find alternative #2 to be more engaging and interesting. As a recruiter, I will easily remember the girl with experience mangling +2TB of data or the dude with a ton of views on his blog. &lt;strong&gt;But, why does it work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: if you still think there's no difference, that's fine. This is just an opinionated approach that has worked for me (see the section below).&lt;/em&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;I sent this post weeks ago to +400 devs on my maillist. Join &lt;a href="https://mailchi.mp/9fbe9022e6d7/career-boost" rel="noopener noreferrer"&gt;here&lt;/a&gt; if you want to get my tips and thoughts on career growth.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Stick to these 2 rules
&lt;/h1&gt;

&lt;p&gt;Having a &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;strong resume&lt;/a&gt; helped me land interviews at Amazon, &lt;a href="https://www.toptal.com/#join-only-great-devs" rel="noopener noreferrer"&gt;Toptal&lt;/a&gt;, Crossover, and many more &lt;a href="https://carlosroso.com/how-i-got-into-the-most-exclusive-remote-working-platforms/" rel="noopener noreferrer"&gt;top remote work platforms&lt;/a&gt;. I credit most of my CV success to the way I showcase my work experience. Let's see how it works.&lt;/p&gt;

&lt;p&gt;The trick here is to follow 2 simple rules:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Use the format &lt;strong&gt;"Accomplished X by implementing Y"&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Show numbers.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;Note: Credits goes to &lt;a href="https://twitter.com/gayle" rel="noopener noreferrer"&gt;Gayle L. McDowell&lt;/a&gt; as I took inspiration from her book &lt;a href="http://www.crackingthecodinginterview.com/" rel="noopener noreferrer"&gt;Cracking the Coding Interview&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Show your accomplishments
&lt;/h2&gt;

&lt;p&gt;If you find it hard to remember two rules, then stick to this one: &lt;strong&gt;don't tell me what you did, tell me what you accomplished&lt;/strong&gt;.&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%2Fi%2Fhmoq5xg8f43w6p9vcom7.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%2Fi%2Fhmoq5xg8f43w6p9vcom7.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Writing Angular apps, PHP backends or wiring Firebase APIs are very common things in our industry. Every dev goes through that eventually. It's not what you did but rather what you achieved, what really sets you apart from the crowd. &lt;/p&gt;

&lt;h2&gt;
  
  
  2. Show numbers
&lt;/h2&gt;

&lt;p&gt;If a bullet in your work experience was a title for a blog post, would you read it? When you think about it that way, you realize how important numbers are. The use of numbers &lt;a href="https://problogger.com/use-numbers-effectively/" rel="noopener noreferrer"&gt;has proven to be highly effective&lt;/a&gt; when engaging with your audience; your audience just happens to be your recruiter.&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%2Fi%2F0qj6x2ipvo5eah7ksavt.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%2Fi%2F0qj6x2ipvo5eah7ksavt.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you don't have numbers to show on your resume you're not thinking deep enough. Remember that time when you integrated OAuth in your app? Can you recall any conversion increase? Use that number here. Did you create an architecture guide to create React apps in your company? how many discussions do you think that document helped reduce? I'd say more than 3x. Use that metric in this section.&lt;/p&gt;

&lt;p&gt;If you definitely don't have any metric, then start measuring today! Coding is just a means to an end, and that end can surely be measured.&lt;/p&gt;




&lt;h1&gt;
  
  
  Examples
&lt;/h1&gt;

&lt;p&gt;I &lt;em&gt;partnered&lt;/em&gt; with my friend and Google Dev Expert, &lt;a href="https://twitter.com/jdjuan" rel="noopener noreferrer"&gt;Juan&lt;/a&gt;, to review resumes from the community. After reviewing several of these and giving a lot of advice, I gathered a handful of examples that you can use as a guideline to improve your CV today.&lt;/p&gt;

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

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



&lt;/p&gt;

&lt;p&gt;Keep in mind these are real-life examples of real-life devs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Frontend Dev
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Helped +20 customers evaluate ideas in record time by building fast UI prototypes in Angular. This resulted in a time-to-market reduction of 400%.&lt;/li&gt;
&lt;li&gt;Improved loading time in 5x by using advanced web performance techniques for Angular (tree shaking, lazy loading, custom Webpack configuration).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Backend Dev
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Reduced deploy time 70% by implementing a CI/CD Jenkins pipeline which helped product managers validate features 2x faster.&lt;/li&gt;
&lt;li&gt;Helped customers run through data 2x faster by implementing paginated API responses in RoR and JavaScript.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Data Science, Tech lead, Dev advocate
&lt;/h2&gt;

&lt;p&gt;Read more examples in the &lt;a href="https://carlosroso.com/the-absolute-best-way-to-show-work-experience-in-your-resume/" rel="noopener noreferrer"&gt;original blog post&lt;/a&gt; on my site.&lt;/p&gt;




&lt;p&gt;I hope you got some inspiration and learned something new. Remember, when it comes to showing off work experience, &lt;strong&gt;it's not so much about what you did, but about what you accomplished&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If you liked this, you might want to get more advice on &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;what &lt;strong&gt;not&lt;/strong&gt; to do in your resume&lt;/a&gt;. You can also ping me anytime on &lt;a href="https://twitter.com/caroso1222" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;, I can take a look at your resume and give feedback (if I'm not super busy at the time).&lt;/p&gt;

&lt;p&gt;Let me know in the comments, what other strategies do you use to show your work experience? what has or hasn't worked so far?&lt;/p&gt;




&lt;h1&gt;
  
  
  Acing that tech interview
&lt;/h1&gt;

&lt;p&gt;I've used this technique to land interviews (and job offers) at Amazon, Toptal and a few more top remote work platforms. I wrote a &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/" rel="noopener noreferrer"&gt;FREE guide&lt;/a&gt; with a lot of &lt;strong&gt;tips and tricks to ace remote tech interviews&lt;/strong&gt;. If you're curious, you can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/" rel="noopener noreferrer"&gt;sign up here&lt;/a&gt; and get it in my next email.&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%2Fi%2Fl80v7dpgjapmv0l3aona.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%2Fi%2Fl80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>remote</category>
      <category>career</category>
    </item>
    <item>
      <title>You're the worst developer I know</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Fri, 29 May 2020 21:32:39 +0000</pubDate>
      <link>https://dev.to/caroso1222/you-re-the-worst-developer-i-know-4a6f</link>
      <guid>https://dev.to/caroso1222/you-re-the-worst-developer-i-know-4a6f</guid>
      <description>&lt;p&gt;You're the worst developer I know because you don't listen. You trash the juniors and don't accept feedback. You don't trust women in your team. You think you're a 10x engineer and make no effort to help grow your peers. You don't teach what you know, always gatekeeping everything to yourself.&lt;/p&gt;

&lt;p&gt;You're the worst developer I know because you criticize every open source project but you have never made anything yourself - your ego won't allow you. You think you're superior because I do frontend and you do backend. You don't take anyone seriously when you find out they don't have a CS degree.&lt;/p&gt;

&lt;p&gt;You're the worst developer I know because you never say thanks, never say please, never say hi, never say bye. You're proficient and excellent technically, but it's a nightmare to work with you. You do not reply to my questions when you don't know the answer; you'd rather google them and then come back to me as if you knew it all.&lt;/p&gt;

&lt;p&gt;You're the worst developer I know because you think you deserve better just for working ridiculously long hours. You don't have an opinion but you mainsplain every other woman on Twitter. You hold on to your past success to call everyone on their mistakes. You never accept help even when you need it.&lt;/p&gt;

&lt;p&gt;You're the worst developer I know because you trash my solutions for being too simple but you never finish your overkill proposals. You overengineer everything and call my code as not so clean. You can't say I'm right, you can't say you're wrong. You trash managers on their back, always have done so.&lt;/p&gt;

&lt;p&gt;You're the worst developer I know because you don't inspire, you're just too negative, every single time. You force-push updates to my PRs with no feedback whatsoever. You're so perfectionist we barely release anything, even when the project needs it. You're too negative, you're so defensive, you're intimidating more than welcoming.&lt;/p&gt;




&lt;p&gt;Carlos, this is for your future self. Save this, come back every now and then, and make sure you don't turn into the worst developer you know.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>#tbt give some love to your old projects</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 21 May 2020 19:04:25 +0000</pubDate>
      <link>https://dev.to/caroso1222/tbt-give-some-love-to-your-old-projects-1g9n</link>
      <guid>https://dev.to/caroso1222/tbt-give-some-love-to-your-old-projects-1g9n</guid>
      <description>&lt;p&gt;It's Thursday! let's all share an old project we're all proud of. It can be a GitHub repo, side project, whatever.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>watercooler</category>
    </item>
    <item>
      <title>Deploying frontend applications — the fun way</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Thu, 21 May 2020 11:23:34 +0000</pubDate>
      <link>https://dev.to/caroso1222/deploying-frontend-applications-the-fun-way-1fpf</link>
      <guid>https://dev.to/caroso1222/deploying-frontend-applications-the-fun-way-1fpf</guid>
      <description>&lt;p&gt;In this post, I will show you how I deploy my frontend applications using GitHub, Jenkins, Docker and &lt;a href="https://m.do.co/c/4dc4ded1ea2f"&gt;Digital Ocean&lt;/a&gt;. &lt;a href="https://stackoverflow.com/questions/49472695/how-to-run-container-in-a-remote-docker-host-with-jenkins"&gt;I had some doubts&lt;/a&gt; through my learning journey so I decided to put up what I learned on this post as a self note.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; This post is not intended for you my friend, expert, and consultant guru 15+ years exp DevOps architect; this is for those of us who are just starting to discover the beauty of CI/CD tech. This post may contain some bad practices, please take it with a grain of salt.&lt;/p&gt;




&lt;h1&gt;
  
  
  Cut the cr#p, shoot me the TL;DR
&lt;/h1&gt;

&lt;p&gt;You’re like me, you skim around and grab the bullets, you leave. Here’s the TL;DR for you:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Spin up 2 servers with Docker installed: build and production servers&lt;/li&gt;
&lt;li&gt;Install Jenkins (or any other CI) in your build server&lt;/li&gt;
&lt;li&gt;Create a job in your CI that clones, installs and builds your project &lt;strong&gt;in a docker image&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Set up webhooks in GitHub to fire the job on every push&lt;/li&gt;
&lt;li&gt;Push the docker image to your personal Docker Hub&lt;/li&gt;
&lt;li&gt;SSH into your production server&lt;/li&gt;
&lt;li&gt;Pull the image from Docker Hub and run the container&lt;/li&gt;
&lt;li&gt;Profit&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gSm-olgC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2124/1%2AT6i6rIASG-lujJuC_Ivu2w.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gSm-olgC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2124/1%2AT6i6rIASG-lujJuC_Ivu2w.jpeg" alt="Docker based continuous deployment workflow"&gt;&lt;/a&gt;&lt;em&gt;Docker based continuous deployment workflow&lt;/em&gt;&lt;/p&gt;

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




&lt;p&gt;Hopefully, I caught your attention and you want more details now. In the following paragraphs, I will outline my thought process and explain how my deployment pipeline works. I won’t go deep into technical details but will instead put up some useful links for your further research.&lt;/p&gt;

&lt;h1&gt;
  
  
  The problem
&lt;/h1&gt;

&lt;p&gt;Simple: I developed a &lt;a href="https://github.com/caroso1222/ast-viewer"&gt;TypeScript AST interactive viewer&lt;/a&gt; in Angular and I wanted to deploy it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KjOxl0Qv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1.medium.com/max/2876/1%2ApVi41c1uXwh4PYd3S0YC3g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KjOxl0Qv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1.medium.com/max/2876/1%2ApVi41c1uXwh4PYd3S0YC3g.gif" alt="[TypeScript AST Interactive Viewer](https://ast.carlosroso.com/)"&gt;&lt;/a&gt;&lt;em&gt;&lt;a href="https://ast.carlosroso.com/"&gt;TypeScript AST Interactive Viewer&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Bu… but, why not use Firebase, Google Engine, vanilla FTP, GitHub pages? you know, like “one-click deploys” duh&lt;/em&gt;, you may ask. All those tools work great, but most of them are either too expensive or just felt too magical (nothing tops “gcloud app deploy”) and &lt;strong&gt;are not that fun to learn&lt;/strong&gt;! I wanted to understand, automate, and have full control of the whole deployment process. I wanted a challenge, I wanted to learn, I wanted to have fun (hell I’m inspired).&lt;/p&gt;

&lt;h2&gt;
  
  
  What it all comes down to
&lt;/h2&gt;

&lt;p&gt;I set up my own challenge which looked like this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;I want to push code and have it deployed automatically — aka Continuous Delivery.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I want to pay a cheap hosting service&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let’s draw these non-functional requirements in a black box diagram:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---JnTDISp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2AimyfQi6O0bSnkBWmBMi6Iw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---JnTDISp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2AimyfQi6O0bSnkBWmBMi6Iw.png" alt="Problem illustration. From GitHub to Live App. Icon: magic by ✦ Shmidt Sergey ✦ from the Noun Project"&gt;&lt;/a&gt;&lt;em&gt;Problem illustration. From GitHub to Live App. Icon: magic by ✦ Shmidt Sergey ✦ from the Noun Project&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Unraveling the Magic box
&lt;/h1&gt;

&lt;p&gt;I’ll divide this chapter into three parts. Each part will reveal one small portion of my Magic box:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;From GitHub to Magic&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Developing the Magic&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;From Magic to Live App&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  1. From GitHub to Magic
&lt;/h2&gt;

&lt;p&gt;Push code, sit and relax, refresh the live app, profit. That’s all I wanted.&lt;/p&gt;

&lt;h3&gt;
  
  
  Choosing my VPS (Virtual Private Server)
&lt;/h3&gt;

&lt;p&gt;The first step was then to set up a server that could grab my code from GitHub and execute a series of commands (&lt;em&gt;npm i &amp;amp;&amp;amp; npm run build&lt;/em&gt;). Not quite sure what to do next, but I knew I had to start from there.&lt;/p&gt;

&lt;p&gt;After reading about the best VPS providers out there, I finally went with &lt;a href="https://m.do.co/c/4dc4ded1ea2f"&gt;Digital Ocean&lt;/a&gt;. &lt;strong&gt;Great tutorials&lt;/strong&gt;, easy for newcomers, decent DNS management, and good pricing — was a no-brainer.&lt;/p&gt;

&lt;h3&gt;
  
  
  CI tools everywhere
&lt;/h3&gt;

&lt;p&gt;After signing up, I knew I needed some sort of tool that let me grab the code and automate the build process — the CI tool &lt;em&gt;(Continuous Integration)&lt;/em&gt;. There are several of them out there, some of them targeted for open source projects, some primarily designed to be self-hosted, some premium, some free. I chose Jenkins mainly for its concept of Pipelines and because I had some familiarity with the tool.&lt;/p&gt;

&lt;p&gt;Reading through some tutorials, it was relatively easy to get my Jenkins instance up and running. Now I needed to tell Jenkins to grab my code whenever I git pushed. Turns out there are dozens of posts out there on how to set up a GitHub webhook pointing from your repo to your Jenkins Droplet IP. Setting this up was faster than I expected (not quite straightforward for private GitHub repos, though).&lt;/p&gt;

&lt;h3&gt;
  
  
  Let’s recap
&lt;/h3&gt;

&lt;p&gt;At this point, I have a DO droplet running Linux with a Jenkins instance pulling code from GitHub on every git push. How cool, huh? Let’s see how our Magic box starts to reveal itself:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ICOXBdm5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2A3LI8drY9sq0GHcbKZe8JCg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ICOXBdm5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2A3LI8drY9sq0GHcbKZe8JCg.png" alt="Black box diagram with Digital Ocean Droplet and Jenkins"&gt;&lt;/a&gt;&lt;em&gt;Black box diagram with Digital Ocean Droplet and Jenkins&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Useful links:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.digitalocean.com/docs/droplets/how-to/create/"&gt;How to create a Droplet in Digital Ocean&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.digitalocean.com/community/tutorials/how-to-install-jenkins-on-ubuntu-16-04"&gt;How to install Jenkins in a DO Droplet&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://jenkins.io/doc/book/pipeline/"&gt;How to set up and Jenkins pipeline&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-continuous-integration-pipelines-in-jenkins-on-ubuntu-16-04"&gt;How to integrate GitHub with Jenkins&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  2. Developing the magic
&lt;/h2&gt;

&lt;p&gt;In the next few paragraphs, I’ll develop the core of my strategy which leverages Docker and DO droplets. Let’s dive right in.&lt;/p&gt;

&lt;h3&gt;
  
  
  Dockerize all the things
&lt;/h3&gt;

&lt;p&gt;At this point, I have a &lt;em&gt;dist&lt;/em&gt; folder with an &lt;em&gt;index.html&lt;/em&gt; and its dependencies, ready to go. I know I need to spin up a webserver to serve these files over the web. Let’s then install &lt;em&gt;nginx&lt;/em&gt; (or &lt;em&gt;Apache&lt;/em&gt;) in the same server and serve the thing. I also need to install Node and a couple of global node packages. Easy peasy, let’s do that…&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;“But wait, Carlos, that hmmm… that doesn’t feel like the right thing to do — you’d end up with a ton of stuff installed on your server and managing your dependencies will be a hell later on… just saying, though” — Inner self&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Indeed, I needed a way to encapsulate the dependencies, the &lt;em&gt;dist&lt;/em&gt; artifact, and even the web server so that it wouldn’t mess up my server. Let’s use &lt;strong&gt;Docker&lt;/strong&gt;. It would let me build an image with my webserver running on a port on my server, and my server filesystem would barely notice what I just did. How cool, huh?&lt;/p&gt;

&lt;p&gt;I set up a &lt;a href="https://github.com/caroso1222/ast-viewer/blob/master/Dockerfile"&gt;Dockerfile&lt;/a&gt; for my app and edited the job in Jenkins to build a docker image and run the container with the 80 port exposed. It worked like charm. I could access my app live from &lt;em&gt;&lt;a href="http://my.server.ip"&gt;http://my.server.ip&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  On scaling and stuff
&lt;/h3&gt;

&lt;p&gt;I planned to have many applications deployed with this same schema using the same server. It wouldn’t make sense then to run Jenkins and all my containers on the same server. It just felt like I could do much better — I wanted to separate concerns. Sure I can juggle with different users, having Jenkins living in its own user, etc, but something within me really wanted to keep a machine specifically for building my applications.&lt;/p&gt;

&lt;p&gt;Based on this premise, I created another droplet (&lt;em&gt;aka server&lt;/em&gt;) with less memory (no heavy lifting, just to serve web apps) and with Docker installed as it should be able to run Docker containers. I would then run all my apps on this server. This would let me scale well because I could easily change the memory allocation on my build server while leaving my apps untouched.&lt;/p&gt;

&lt;h3&gt;
  
  
  Let’s recap
&lt;/h3&gt;

&lt;p&gt;We’ve made quite good progress. We’ve settled for Docker as our core build mechanism and we also decided to separate concerns in favor of maintainability by spinning up a separate production server in another server.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TxN4Vvpm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2A_RrbIviKsUwOb10BqXsGyA.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TxN4Vvpm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2A_RrbIviKsUwOb10BqXsGyA.png" alt="Deployment workflow with Docker and 2 DO droplets"&gt;&lt;/a&gt;&lt;em&gt;Deployment workflow with Docker and 2 DO droplets&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Useful links
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;How to Dockerize &lt;a href="https://medium.com/@tiangolo/angular-in-docker-with-nginx-supporting-environments-built-with-multi-stage-docker-builds-bb9f1724e984"&gt;Angular&lt;/a&gt;, &lt;a href="https://medium.com/ai2-blog/dockerizing-a-react-application-3563688a2378"&gt;React&lt;/a&gt; and &lt;a href="https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html"&gt;Vue&lt;/a&gt; apps.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-18-04"&gt;How to install Docker in Ubuntu&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  3. From Magic to Live App
&lt;/h2&gt;

&lt;p&gt;I wasn’t sure how to integrate my servers (build + prod). After &lt;a href="https://stackoverflow.com/questions/49472695/how-to-run-container-in-a-remote-docker-host-with-jenkins"&gt;asking for help&lt;/a&gt; and researching, I came to the conclusion that, for my particular use case, I could implement the following workflow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Build the docker image in the &lt;em&gt;Build Server&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Push the docker image to my &lt;em&gt;Docker Hub&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Log in to my prod server via SSH&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pull the image from the &lt;em&gt;Docker Hub&lt;/em&gt; and run the container&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It made sense as I didn’t have to resort to using tools like docker-machine or Kubernetes to orchestrate my servers. &lt;em&gt;It just works,&lt;/em&gt; it’s simple and it looks clean enough for me.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note on security:&lt;/em&gt; It’s recommended to disable password-based authentication on your production server and enable only &lt;a href="https://hostpresto.com/community/tutorials/how-to-enable-key-based-authentication-for-ssh-on-your-linux-server/"&gt;key based authentication from your build server&lt;/a&gt;. That is, it will be virtually impossible to log in to your prod server if not from your build server.&lt;/p&gt;

&lt;h3&gt;
  
  
  Show me some code
&lt;/h3&gt;

&lt;p&gt;A technical post is not a technical post until you show some code. Let’s see what the Jenkins pipeline looks like in the CI when integrating the whole thing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="s"&gt;/usr/&lt;/span&gt;&lt;span class="n"&gt;bin&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="n"&gt;env&lt;/span&gt; &lt;span class="n"&gt;groovy&lt;/span&gt;

&lt;span class="n"&gt;node&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kt"&gt;def&lt;/span&gt; &lt;span class="n"&gt;app&lt;/span&gt;

  &lt;span class="nf"&gt;stage&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Clone"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;git&lt;/span&gt; &lt;span class="s1"&gt;'https://github.com/caroso1222/ast-viewer.git'&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;

  &lt;span class="n"&gt;stage&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Build"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;docker&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"caroso1222/ts-ast-viewer"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;

  &lt;span class="n"&gt;stage&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Push"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;docker&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;withRegistry&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"https://registry.hub.docker.com"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"docker-hub-credentials"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
      &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;push&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"${env.BUILD_ID}"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
      &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;push&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"latest"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;

  &lt;span class="n"&gt;stage&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Deploy"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;sh&lt;/span&gt; &lt;span class="s2"&gt;"ssh root@my.server.ip \"docker stop ast_0 &amp;amp;&amp;amp; \
        docker rm ast_0 &amp;amp;&amp;amp; \
        docker pull caroso1222/ts-ast-viewer:latest &amp;amp;&amp;amp; \
        docker run -d --name=ast_0 -p 8080:80 caroso1222/ts-ast-viewer:latest\""&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;I’ve labeled some lines in the snippet, let’s go through them real quick:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Build a docker image based on the &lt;a href="https://github.com/caroso1222/ast-viewer/blob/master/Dockerfile"&gt;Dockerfile&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Push the docker image to my &lt;em&gt;Docker Hub&lt;/em&gt; account.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SSH into the production server&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pull the image from my Docker Hub&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Run the container from the image we just pulled. I run the container on port 8080, but that’s because I set up Nginx to route the traffic to several containers in the same server via subdomain &lt;em&gt;proxy_pass&lt;/em&gt; (e.g. domainA.com serves container A, domainB.com serves container B). I won’t elaborate on this technique as it falls out of the scope of this post.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As stated at the beginning of this post, this pipeline runs on every &lt;code&gt;git push&lt;/code&gt; made in master. The following image shows what happens on Jenkins for every deployment. By the way, &lt;strong&gt;I love this image as it depicts what the challenge looked like in my head before diving in.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KIG_cKL0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/3036/1%2ALNxe3JwGouNbCpyIItYX4g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KIG_cKL0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/3036/1%2ALNxe3JwGouNbCpyIItYX4g.png" alt="Stage view of the Jenkins pipeline. Each line represents a deployment triggered by a git push."&gt;&lt;/a&gt;&lt;em&gt;Stage view of the Jenkins pipeline. Each line represents a deployment triggered by a git push.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Let’s wrap up
&lt;/h3&gt;

&lt;p&gt;We finally made it. We have unraveled our black box. Every secret has been revealed and we have been able to cover each one of its components. &lt;strong&gt;Let’s take a look at what our final deployment workflow looks like now!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LC_bsCYG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2A-n1GvBiN7_luWjXLwdVVzQ.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LC_bsCYG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2A-n1GvBiN7_luWjXLwdVVzQ.png" alt="Diagram of the full deployment strategy covered in this post. A Docker image is built in the build server, goes through the Docker Hub, and finally made it to the production server."&gt;&lt;/a&gt;&lt;em&gt;Diagram of the full deployment strategy covered in this post. A Docker image is built in the build server, goes through the Docker Hub and finally made it to the production server.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Useful links
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://hostpresto.com/community/tutorials/how-to-enable-key-based-authentication-for-ssh-on-your-linux-server/"&gt;Enable Key-based authentication in Ubuntu&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://medium.freecodecamp.org/expose-vs-publish-docker-port-commands-explained-simply-434593dbc9a3"&gt;Run Docker containers and expose ports&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;There are tons of deployment strategies out there, each of them with its pros and cons, and each one relying on a different stack with its own taste. That’s the beauty of it. In this post, I covered just one of these strategies that grant me full control over my custom deployment pipeline using two servers, a CI, and Docker.&lt;/p&gt;

&lt;p&gt;It all might sound daunting if you’re not very familiar with the concepts we covered. Fear not, I say. It’s a long post mainly because it sums up a learning journey that spanned across almost 3 months, putting 1–2 hours each night grinding on these servers and reading stuff I was not very familiar with.&lt;/p&gt;

&lt;p&gt;Even if you’re a FrontEnd developer focused on browser-land, I still think it’s very valuable that you get familiar with the full stack. It will give you the tools to have a solid conversation and form an opinion when discussing DevOps stuff in your company. It’s better to say &lt;em&gt;“you guys are the experts, but this is my opinion on the matter…” *than saying “*well, that’s not my thing, you ops guys figure it out”.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I hope you got some inspiration to go ahead and implement your personal deployment pipeline and get to know all this DevOps tech — tons of fun ahead!&lt;/p&gt;




&lt;h1&gt;
  
  
  Shameless self-promotion
&lt;/h1&gt;

&lt;p&gt;I’m not an amateur SoundCloud rapper nor I’m looking for funds in Patreon. I just help devs get jobs at top remote platforms like &lt;a href="https://www.toptal.com/#join-only-great-devs"&gt;Toptal&lt;/a&gt;. I write about &lt;a href="https://dev.to/caroso1222/please-stop-doing-this-in-your-resume-2mga"&gt;career growth&lt;/a&gt;, tips for &lt;a href="https://dev.to/caroso1222/the-ultimate-8-bullet-checklist-to-ace-the-full-stack-interview-project-323m"&gt;interviewing&lt;/a&gt;, &lt;a href="https://dev.to/caroso1222/how-to-create-fancy-revealing-animations-with-these-simple-css-tricks-4gjk"&gt;fun CSS stuff&lt;/a&gt; and put up some discussions here in DEV from &lt;a href="https://dev.to/caroso1222/how-did-you-land-your-first-job-as-a-junior-hm9"&gt;time&lt;/a&gt; to &lt;a href="https://dev.to/caroso1222/should-devs-code-in-their-free-time-30ak"&gt;time&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now I'm writing a &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;FREE guide&lt;/a&gt; with a lot of &lt;strong&gt;tips and tricks to ace remote tech interviews&lt;/strong&gt;. If you're curious, you can &lt;a href="https://carlosroso.com/cracking-the-toptal-interview/"&gt;sign up on the waitlist here&lt;/a&gt; and be the first to get it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c92g3L-0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l80v7dpgjapmv0l3aona.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Find me on Twitter &lt;a href="https://twitter.com/caroso1222"&gt;@caroso1222&lt;/a&gt; and don’t forget to say hi!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>devops</category>
      <category>docker</category>
    </item>
    <item>
      <title>What do you look for in a PR review?</title>
      <dc:creator>Carlos Roso</dc:creator>
      <pubDate>Mon, 18 May 2020 21:17:47 +0000</pubDate>
      <link>https://dev.to/caroso1222/what-do-you-look-for-in-a-pr-review-21gb</link>
      <guid>https://dev.to/caroso1222/what-do-you-look-for-in-a-pr-review-21gb</guid>
      <description>&lt;p&gt;What are you strict about when reviewing code? What do you always point out in your peer reviews?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>watercooler</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
