<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: flavio ⚡️🔥</title>
    <description>The latest articles on Forem by flavio ⚡️🔥 (@flaviocopes).</description>
    <link>https://forem.com/flaviocopes</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%2F66063%2F3c03ad64-f59b-4530-8bba-707f12d7ae0e.png</url>
      <title>Forem: flavio ⚡️🔥</title>
      <link>https://forem.com/flaviocopes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/flaviocopes"/>
    <language>en</language>
    <item>
      <title>I wrote 1 blog post every day for 2 years. Here's 5 things I learned about SEO</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Tue, 18 Feb 2020 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/i-wrote-1-blog-post-every-day-for-2-years-here-s-5-things-i-learned-about-seo-4pfn</link>
      <guid>https://forem.com/flaviocopes/i-wrote-1-blog-post-every-day-for-2-years-here-s-5-things-i-learned-about-seo-4pfn</guid>
      <description>&lt;p&gt;It’s been 2 years since I started posting one blog post every day on this blog.&lt;/p&gt;

&lt;p&gt;On January 25 2018, just one day before turning 35, I started my blogging journey.&lt;/p&gt;

&lt;p&gt;In this blog post I am going to tell you 5 things I learned about SEO that you might not be familiar with.&lt;/p&gt;

&lt;h2&gt;
  
  
  SEO trick number 1: do not worry about SEO
&lt;/h2&gt;

&lt;p&gt;If you read the internet for ways to get more readers to your blog, you will find that SEO is one of the things often mentioned.&lt;/p&gt;

&lt;p&gt;Most of the time you will see people talking about keywords, and keywords tools.&lt;/p&gt;

&lt;p&gt;We like tools, so we start using them, spending days to get the maximum value out of the free ones, spending a lot of time.&lt;/p&gt;

&lt;p&gt;Right? Wrong.&lt;/p&gt;

&lt;p&gt;I have a confession to make: I never used a keyword tool. I do not currently use one, and I find that just thinking about it bores me.&lt;/p&gt;

&lt;p&gt;The last thing I want to do is to be bored, and having to treat my blog as a job.&lt;/p&gt;

&lt;p&gt;The idea of having to research keywords before writing a blog post makes my blog feel like a job. And I don’t like jobs.&lt;/p&gt;

&lt;h2&gt;
  
  
  SEO trick number 2: link building is optional
&lt;/h2&gt;

&lt;p&gt;In addition to keyword research, one thing that often comes up in SEO circles is link building.&lt;/p&gt;

&lt;p&gt;I do receive a good amount of emails asking me to link to so-and-so site, to link to a special infographic someone created about something I talked about, and it’s all kind of annoying.&lt;/p&gt;

&lt;p&gt;I am sure this is something that works, because links are still one of the key metric used by search engines, but do you really want to spend time annoying people?&lt;/p&gt;

&lt;p&gt;I never added any link by request. Not for free, not paid. And I never asked for links.&lt;/p&gt;

&lt;p&gt;And if you think, as a developer, about creating networks of sites all linked together, that’s been done and Google took measures against that. And even if you don’t get caught, it’s a dirty game.&lt;/p&gt;

&lt;p&gt;And links must come from relevant, authoritative sites in the specific niche you want to rank. You can create a kitchen recipes blog and then add links from a programming blog, but what really works is a big recipes blog linking to the small recipes blog.&lt;/p&gt;

&lt;p&gt;Initially, creating content for other sites is one way to do that. Big sites always need fresh content, and by doubling down on creating content (for your site, and for other sites) you can create the foundation for the years to come.&lt;/p&gt;

&lt;p&gt;I did that, and the good thing is that I was able to serve an existing audience with relevant content I’m passionate about. Very different than spamming people inboxes or sites with requests for links.&lt;/p&gt;

&lt;h2&gt;
  
  
  SEO trick number 3: write things that help people
&lt;/h2&gt;

&lt;p&gt;Instead of thinking about keywords and link building, I usually think about problems.&lt;/p&gt;

&lt;p&gt;What problems do people have? You can think about possible problems all day, but the best way is to have people tell you.&lt;/p&gt;

&lt;p&gt;I now ask my email subscribers what are their top problems or things they are struggling with, but you can also find this in other places. One place I like, in my space, is Twitter.&lt;/p&gt;

&lt;p&gt;Other spaces might have the same information in blog post comments, or YouTube videos comments. You just need to observe to find good ideas for your niche.&lt;/p&gt;

&lt;p&gt;Then write a post that solves that problem.&lt;/p&gt;

&lt;p&gt;One way I really like is to talk about the problems I had, and how I solved them.&lt;/p&gt;

&lt;p&gt;For example I am writing an app and I need to work with dates. I have to search some particular topic on Google, which leads me to checking out 10 sites for the correct and up to date answer. I spent 30 minutes and now I can spend 10 minutes more to write the answer in a blog post.&lt;/p&gt;

&lt;p&gt;A quick one.&lt;/p&gt;

&lt;h2&gt;
  
  
  SEO trick number 4: length does not matter. What matters is solving problems.
&lt;/h2&gt;

&lt;p&gt;What matters is solving people problems. Google and the SEO wizards call this user intent.&lt;/p&gt;

&lt;p&gt;I see that SEO people like to suggest you to write 3000+ posts to rank on Google. That’s a great tip to if their goal is to discourage you from writing more. They call it long-form content.&lt;/p&gt;

&lt;p&gt;Now, as a non-SEO person, but as a person that does things and observes what works and what doesn’t, I can definitely say that if you solve a problem for a person with a 4-lines blog post Google will thank you by sending you more people with that problem.&lt;/p&gt;

&lt;p&gt;They know using their algorithms when a person found the answer they needed. This is Google’s job. Their job is to solve people problems by providing the perfect content they are looking for.&lt;/p&gt;

&lt;p&gt;If you can provide that, Google will help you.&lt;/p&gt;

&lt;p&gt;Not every post on your blog can solve a problem, of course. That would be boring. But if you have posts that solve problems you’ll notice, as those are the ones that will get the more visitors.&lt;/p&gt;

&lt;p&gt;Not every post &lt;em&gt;must&lt;/em&gt; be small of course, and if long form content is best for you, do that.&lt;/p&gt;

&lt;h2&gt;
  
  
  SEO trick number 5: it takes a lot of time, and you must play the long game
&lt;/h2&gt;

&lt;p&gt;By observing a lot of people coming and going into my niche in the last few years, I observed a pattern that might be kind of obvious.&lt;/p&gt;

&lt;p&gt;Initially there is a lot of enthusiasm and the content quality and frequency is optimal. After some months, people start to give up. Slowly. There is never a big decision, but content starts to be less frequent, less cool, and without a fixed frequency.&lt;/p&gt;

&lt;p&gt;You don’t need to post every day, or every week, but I like blogs/sites that have a clear schedule. Like, every 2 weeks we have a post. Good for me.&lt;/p&gt;

&lt;p&gt;But 3 posts in a month and then nothing for 5 months? Not so nice. It must be me, of course, but I like things to have a regular cadence.&lt;/p&gt;

&lt;p&gt;I know it’s hard because initially you will not see any result. And I know this because I am creating new blogs on the side, about different topics, and they are very slow to rise above the near-zero levels.&lt;/p&gt;

&lt;p&gt;You are tempted to consider it a failure each other day.&lt;/p&gt;

&lt;p&gt;How do you solve this? By working on projects you are passionate about.&lt;/p&gt;

&lt;p&gt;If you write about your passion, you will never lose enthusiasm because you are creating a little corner of the internet that’s yours, you made it, you made it beautiful, and now it’s also available for everyone else, but even if no one shows up, it stands on its own.&lt;/p&gt;

&lt;p&gt;You find it beautiful. Like creating a mushroom out of wood, or carving your own spoon.&lt;/p&gt;

&lt;p&gt;And when people will discover that they find your work absolutely great, then it will be a never ending source of joy every day.&lt;/p&gt;

&lt;p&gt;Originally posted on &lt;a href="https://flaviocopes.com/blog-seo/"&gt;https://flaviocopes.com/blog-seo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>blog</category>
      <category>blogging</category>
      <category>seo</category>
    </item>
    <item>
      <title>How I prototype a Web Page using Tailwind</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Wed, 04 Dec 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/how-i-prototype-a-web-page-using-tailwind-2cg5</link>
      <guid>https://forem.com/flaviocopes/how-i-prototype-a-web-page-using-tailwind-2cg5</guid>
      <description>&lt;p&gt;Sometimes I work on single web pages for my projects.&lt;/p&gt;

&lt;p&gt;Maybe I want to redesign the blog. Maybe it’s a landing page for a new project.&lt;/p&gt;

&lt;p&gt;This is the process I use.&lt;/p&gt;

&lt;p&gt;I like to use Tailwind to build prototypes.&lt;/p&gt;

&lt;p&gt;I set up all the pipeline for &lt;a href="https://flaviocopes.com/tailwind-setup/"&gt;Tailwind&lt;/a&gt; and &lt;a href="https://flaviocopes.com/postcss/"&gt;PostCSS&lt;/a&gt; first:&lt;/p&gt;

&lt;p&gt;Create &lt;code&gt;postcss.config.js&lt;/code&gt;:&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;const&lt;/span&gt; &lt;span class="nx"&gt;purgecss&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@fullhuman/postcss-purgecss&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cssnano&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cssnano&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;tailwindcss&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;autoprefixer&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="nx"&gt;cssnano&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;preset&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;default&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="nx"&gt;purgecss&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./layouts/ **/*.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./src/** /*.vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./src/**/*.jsx&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
      &lt;span class="na"&gt;defaultExtractor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[\w&lt;/span&gt;&lt;span class="sr"&gt;-&lt;/span&gt;&lt;span class="se"&gt;/&lt;/span&gt;&lt;span class="sr"&gt;:&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;+&lt;/span&gt;&lt;span class="se"&gt;(?&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;!:&lt;/span&gt;&lt;span class="se"&gt;)&lt;/span&gt;&lt;span class="sr"&gt;/g&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="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Create &lt;code&gt;tailwind.config.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt;
  &lt;span class="na"&gt;variants&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Craete a &lt;code&gt;tailwind.css&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@tailwind&lt;/span&gt; &lt;span class="n"&gt;base&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@tailwind&lt;/span&gt; &lt;span class="n"&gt;components&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@tailwind&lt;/span&gt; &lt;span class="n"&gt;utilities&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Create a &lt;code&gt;package.json&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"main"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"index.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:css"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"postcss tailwind.css -o output.css"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"watch"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"watch 'npm run build:css' ./layouts"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"dependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"@fullhuman/postcss-purgecss"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^1.3.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"autoprefixer"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^9.7.1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"cssnano"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.1.10"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"postcss"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^7.0.21"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"tailwindcss"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^1.1.3"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"watch"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^1.0.2"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Create a &lt;code&gt;layouts/index.html&lt;/code&gt; page, and add your HTML.&lt;/p&gt;

&lt;p&gt;Start a terminal shell, go to the project folder and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run watch

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Then I make the browser automatically sync the changes every time I save the page or the CSS is regenerated, using &lt;a href="https://www.browsersync.io/"&gt;&lt;code&gt;browser-sync&lt;/code&gt;&lt;/a&gt;, a great utility you can install using &lt;code&gt;npm install -g browser-sync&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;browser-sync start &lt;span class="nt"&gt;--server&lt;/span&gt; &lt;span class="nt"&gt;--files&lt;/span&gt; &lt;span class="s2"&gt;"."&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This starts a server and also automatically opens the browser and points at the newly created local web server.&lt;/p&gt;

&lt;p&gt;Now I open VS Code and the browser side by side, and I start prototyping!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How I stopped worrying and learned to love the JavaScript ecosystem</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Sat, 28 Sep 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/how-i-stopped-worrying-and-learned-to-love-the-javascript-ecosystem-n86</link>
      <guid>https://forem.com/flaviocopes/how-i-stopped-worrying-and-learned-to-love-the-javascript-ecosystem-n86</guid>
      <description>&lt;p&gt;Until a few months ago I could not even look at JavaScript without having a feeling of anxiety.&lt;/p&gt;

&lt;p&gt;I was 100% under the so-called JavaScript Fatigue and I could not get out of it.&lt;/p&gt;

&lt;p&gt;This lasted years.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qKdH_Mtp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/sinking.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qKdH_Mtp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/sinking.jpeg" alt="Sinking"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Today, I love JavaScript and its ecosystem.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;How did this happen?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I’ve been using JavaScript in some form or another since the nineties, and I have some books on my shelf that looks very funny today, full of &lt;code&gt;document.write&lt;/code&gt; statements.&lt;/p&gt;

&lt;p&gt;JavaScript has hugely changed in the last few years. At first, I could not pick up all the things that were going on. I could not accept so many changes all at once. JavaScript was changing but I was resistant. I took so much to learn it properly, and now it’s changing under my feet.&lt;/p&gt;

&lt;p&gt;I found really &lt;em&gt;spot on&lt;/em&gt; a comment made on a blog post when it argued that “&lt;em&gt;learning modern JavaScript was tough if you haven’t been there since the beginning&lt;/em&gt;“:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I would argue being there since the beginning (yes, I’m &lt;em&gt;that&lt;/em&gt; old) makes it even tougher  -  Tim Tate&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I dived into JavaScript and Node.js seriously in 2012, and I had never experienced a language change so incredibly huge as ES6. The previous big change happened in 2009 with ES5. ES6 literally changed everything. It was such a huge revamp of JavaScript that every day you had so many things that could get into that spec but you didn’t really know if they made it, and you had to catch up as everyone on Twitter was talking about those things that maybe were the next big thing.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;var&lt;/code&gt; was left in the dust.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;function&lt;/code&gt; never exist any more.&lt;/p&gt;

&lt;p&gt;Prototype-based inheritance, which took a long time to learn properly, is gone, hidden under the 🌈 carpet of classes.&lt;/p&gt;

&lt;p&gt;This was just the surface.&lt;/p&gt;

&lt;h2&gt;
  
  
  Build all the things
&lt;/h2&gt;

&lt;p&gt;One big shift that was happening was &lt;strong&gt;building&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;We went from a very simple thing, including our JavaScript with script tags, to having build steps that compile our language to some incomprehensible huge file. At first I resisted strenuously, I got up in my tower fully armed with cannons to fight the build army.&lt;/p&gt;

&lt;p&gt;But when the Babel forces came along, I initially fought even harder but in the end I raised the white flag, and I &lt;strong&gt;joined the enemy&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I realized Babel is not some fancy library that introduces future, edge features, and when those land in the browser we’ll forget Babel. No, Babel is here to stay, for the foreseeable future.&lt;/p&gt;

&lt;p&gt;When ES2017 will fully land in the browser, Babel will allow for ES2018, ES2019 and so on. There’s no escape. Embrace the future, Babel is your friend.&lt;/p&gt;

&lt;h2&gt;
  
  
  Use the simplest alternatives
&lt;/h2&gt;

&lt;p&gt;The tooling is one of the hardest part of JavaScript nowadays. Yes, you can learn all about Webpack but when you start out, ignore everything and use ready-made solutions like &lt;a href="https://dev.to/flaviocopes/introduction-to-create-react-app-18fe-temp-slug-8528671"&gt;create-react-app&lt;/a&gt;, the React Boilerplate that hide the tiny details for you and let you focus on the code.&lt;/p&gt;

&lt;p&gt;Don’t start by setting up an environment, learn by using &lt;a href="https://dev.to/flaviocopes/glitch-a-great-platform-for-developers-53i-temp-slug-2860907"&gt;Glitch&lt;/a&gt;: there’s no simplest thing to start diving into modern JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  No more huge releases
&lt;/h2&gt;

&lt;p&gt;ES6 was so big that the ECMAScript committee decided to do smaller releases next time. This is why ES6 is also called ES2015, and was the first release with the year- we’ll have a yearly release from now on.It’s easier to catch up, will have less changes as the time to add them is limited, and it’s predictable (surrend, there will be change).&lt;/p&gt;

&lt;h2&gt;
  
  
  Ignore the buzz
&lt;/h2&gt;

&lt;p&gt;If you’re like me, you might follow a lot of people on Twitter that are always on the edge. Maybe some thought leaders that dictate what’s the next big thing. They say to use X, everyone else uses X.&lt;/p&gt;

&lt;p&gt;Maybe they like to show their snippets using the latest APIs which are not even close to be standard, but can be used with a flag in the browser.&lt;/p&gt;

&lt;p&gt;They might have a good reason. You do not. Don’t fall in the trap of the new shiny toys, focus on your work.&lt;/p&gt;

&lt;h2&gt;
  
  
  There is not a new framework every week
&lt;/h2&gt;

&lt;p&gt;There is a joke floating around that says “whatever JavaScript framework flavor of the month” or “there’s a new library every week”. That’s true, there is a gazillion people working on JavaScript and this is great, it brings innovation and evolution, the kind JavaScript experienced in the last few years, which were huge for the language ecosystem.&lt;/p&gt;

&lt;p&gt;But the thing to note is that the big things do not change much frequently.&lt;/p&gt;

&lt;p&gt;React is 6 years old.&lt;/p&gt;

&lt;p&gt;Vue is 5 years old&lt;/p&gt;

&lt;p&gt;5 years is a very long time in tech. Those are stable technologies. Learn it now, they are here to stay for long, too - not going away.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You have plenty of time to become an expert in any of those frameworks, they are not going to go away any time soon.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Accept that things come and go
&lt;/h2&gt;

&lt;p&gt;That said, anything has a lifecycle.&lt;/p&gt;

&lt;p&gt;A few years ago jQuery was used everywhere, now rarely new projects start with it.&lt;/p&gt;

&lt;p&gt;In 2013 Backbone.js was huge. Now it disappeared from the map.CoffeeScript, removed from the face of earth.&lt;/p&gt;

&lt;p&gt;Ember.js, Angular.js and Meteor rocked and stayed at the top of their popularity for a few years, now the most talked ones seem to be React, Vue and Angular (which is different from Angular.js).&lt;/p&gt;

&lt;p&gt;Each cycle for those major frameworks usually lasts quite a few years. I still have lots of Ember.js applications running just fine, there is no need to update them if they do their job, and I don’t plan to touch them.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Tech evolves and matures, then it gets used rather than talked about.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  You are not stupid for using jQuery
&lt;/h2&gt;

&lt;p&gt;Some people have a thick skin, but if you read around enough, you fill find out those that despise technology that once everyone used - since they know better, they want to inform you that you are wrong 😆&lt;/p&gt;

&lt;p&gt;Having used PHP for a long time, I got used to this, it’s normal to have people criticizing something popular. Even Go, which is amazing for its simplicity and sometimes criticized for that. You will always find someone that throws shit at something.&lt;/p&gt;

&lt;p&gt;As an example, I have to cite this tweet by Pieter Levels, which built a huge independent business with a single PHP file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0a0nJ5h---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/pieter.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0a0nJ5h---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/pieter.png" alt="Pieter"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But as a beginner you might find out someone that says you’ve chosen an old tech, that no one uses it any more, that you should use React instead.Ignore them, move them out of your mind.&lt;/p&gt;

&lt;p&gt;Remember:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If it works for you, it’s the right stack.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most of the times tech is built from giant companies with needs completely, radically different than yours, or the ones of your small team. Go with what you know and make a difference even without using leading edge technology.&lt;/p&gt;

&lt;p&gt;Now, probably you don’t need jQuery. But not in place of a framework - plain JavaScript is super fine.&lt;/p&gt;

&lt;p&gt;The other part of the spectrum is over-engineering. Don’t use a tech just to feel smarter. Know it better. And learn when to use a framework or library helps you.&lt;/p&gt;

&lt;h2&gt;
  
  
  You don’t have any obligation to know everything. Find your balance.
&lt;/h2&gt;

&lt;p&gt;While it might sound from reading your Twitter feed, &lt;strong&gt;no one knows all the things&lt;/strong&gt;. There’s no way one can learn all the stuff that’s going on in frontend development. This is a lifetime school. There’s absolutely now way to graduate.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pick tech with user-friendly documentation
&lt;/h2&gt;

&lt;p&gt;It’s not by chance that React and Vue have an amazing documentation.It’s a key part of their success.&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript will evolve again
&lt;/h2&gt;

&lt;p&gt;Last year the ECMAScript language introduced await/async and now that feature of the language is used a lot. Promise-based code looks simply bad, you feel the urge to rewrite everything.&lt;/p&gt;

&lt;p&gt;Don’t do it, and instead use new features for new code you write.The same will happen this year, with ES2018. Everyone will talk about them for a while, then we’ll get back to work and we’ll start talking about the ES2019 features.&lt;/p&gt;

&lt;p&gt;Embrace the change. It’s much better than betting on a tech that then stalls and fades into being irrelevant in a few years: &lt;strong&gt;JavaScript is here to stay&lt;/strong&gt;!&lt;/p&gt;

&lt;h2&gt;
  
  
  Learn the basic fundamentals, and pick your own journey
&lt;/h2&gt;

&lt;p&gt;Developing on the Web Platform requires a commitment to learn something new often, even just to find out what’s possible.&lt;/p&gt;

&lt;p&gt;Sometimes learning in 20% of the time the 80% of the things you will need is enough, without diving too much into the edge cases.&lt;/p&gt;

&lt;h2&gt;
  
  
  The journey has just begun
&lt;/h2&gt;

&lt;p&gt;JavaScript is still very young compared to other languages, it’s hugely popular and it was able to dramatically change in the last few years. It attracts lots of new talented developers every day, and it’s fascinating thinking about the JavaScript we’ll write in 10 or 20 years from now.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9Q0hwL3b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/road.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9Q0hwL3b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/road.jpeg" alt="Road"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>What is Imposter Syndrome</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Tue, 17 Sep 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/what-is-imposter-syndrome-3ca9</link>
      <guid>https://forem.com/flaviocopes/what-is-imposter-syndrome-3ca9</guid>
      <description>&lt;p&gt;Every person, sooner or later, is going to suffer from this thing which we label “imposter syndrome”.&lt;/p&gt;

&lt;p&gt;You might have this feeling now, but you don’t know that it has a name attached.&lt;/p&gt;

&lt;p&gt;Let me describe some situations where you might find imposter syndrome in the wild.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You are a developer, have no Computer Science degree, and you feel people that got the CS degree know a lot more than you, and you should get one too in order to be called a developer too&lt;/li&gt;
&lt;li&gt;You work on a project and you call it a little side project, not a real project, because - you know - it’s just a simple app&lt;/li&gt;
&lt;li&gt;You constantly belittle yourself, and have low confidence in your abilities&lt;/li&gt;
&lt;li&gt;You think other developers know a lot more than you do.&lt;/li&gt;
&lt;li&gt;You think some day someone will find out what you are not worth your job position, as you can’t solve the coding interview quiz #423 on a random book&lt;/li&gt;
&lt;li&gt;You think you don’t belong to the “coder’s club”&lt;/li&gt;
&lt;li&gt;You’d like to start blogging but you fear other’s opinions and even think that you can’t add anything new to the table, so you don’t even start&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I know these examples because I have people emailing me those very specific issues.&lt;/p&gt;

&lt;p&gt;Now sometimes I think the solution is to tell you&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;everyone’s winging it&lt;/li&gt;
&lt;li&gt;no one really knows what they are doing&lt;/li&gt;
&lt;li&gt;people you look up to like to show themselves as overconfident publicly, but under the hoods they’re not really like that&lt;/li&gt;
&lt;li&gt;things will always be like this&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But this is still very self-deprecating.&lt;/p&gt;

&lt;p&gt;The real response to all this thinking is to realize how far you went from when you started.&lt;/p&gt;

&lt;p&gt;Look back.&lt;/p&gt;

&lt;p&gt;There was a day when you could not even figure out how to start the computer. What code even &lt;em&gt;was&lt;/em&gt;. You didn’t know you could actually create programs and make the computer do what you want.&lt;/p&gt;

&lt;p&gt;Look at you now.&lt;/p&gt;

&lt;p&gt;You are the best version of yourself and yet you are perfectly sure that tomorrow you’ll be an even better version.&lt;/p&gt;

&lt;p&gt;You are improving. Just like your code.&lt;/p&gt;

&lt;p&gt;But you know you are not &lt;em&gt;perfect&lt;/em&gt; at your craft, and I think that this is a feeling that might never go away. After all programming is such an enormous field.&lt;/p&gt;

&lt;p&gt;And we all know that person that is very overconfident, and will deprecate others just because they don’t know that specific thing they happen to know a lot about… well, don’t be that person.&lt;/p&gt;

&lt;p&gt;Find your sweet spot.&lt;/p&gt;

&lt;p&gt;I’m sure you’ll even get better at your craft if you start believing more that &lt;em&gt;you were made for it&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;The hardest part of solving a bug is identifying that bug. The rest comes easier.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to write Unmaintainable Code</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Sat, 07 Sep 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/how-to-write-unmaintainable-code-png</link>
      <guid>https://forem.com/flaviocopes/how-to-write-unmaintainable-code-png</guid>
      <description>&lt;p&gt;In this tutorial I want to illustrate how to write unmaintainable code.&lt;/p&gt;

&lt;p&gt;By writing unmaintainable code you can make sure &lt;strong&gt;you will never get fired&lt;/strong&gt; because you’ll be the only one capable of understanding &lt;em&gt;what&lt;/em&gt; the code does, and most importantly &lt;em&gt;why&lt;/em&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Please note: this post is ironic&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ol&gt;
&lt;li&gt;Assign weird, fantasy and casual names to your variables, functions and objects. There should be no correlation between the name and what the item does or how it behaves.&lt;/li&gt;
&lt;li&gt;Prefer abbreviations and acronyms over descriptive names. One-letter variables are great.&lt;/li&gt;
&lt;li&gt;Favor reuse of variables in the code. Always use &lt;code&gt;i&lt;/code&gt; in your loops.&lt;/li&gt;
&lt;li&gt;Use your own language for names. After all, there’s no need to all use English.&lt;/li&gt;
&lt;li&gt;Same applies to comments. Feel free to write them in whatever language you speak, who cares if the next developer is from another country?&lt;/li&gt;
&lt;li&gt;As for comments, I was joking. Do not write any comments.&lt;/li&gt;
&lt;li&gt;If you really want to write comments, do not bother to update them when you change the code that they describe.&lt;/li&gt;
&lt;li&gt;Prefer global variables over getting too clever with scoping&lt;/li&gt;
&lt;li&gt;Never test your code. You are good, your code is good too.&lt;/li&gt;
&lt;li&gt;Prefer overcomplicating than being too simplistic. No one was ever fired for creating a complex and ego-fulfilling architecture that required a 3-months long useless rewrite of code that was perfectly working.&lt;/li&gt;
&lt;li&gt;Optimize whatever you can in clever ways. Computers are slow, we should avoid overheating them and help fight climate change. Rewrite your code in assembly is often a good idea.&lt;/li&gt;
&lt;li&gt;Relatively unknown languages and frameworks are always better than popular and battle tested solutions. Prefer them over the solution everyone else uses.&lt;/li&gt;
&lt;li&gt;Better yet, create your own framework.&lt;/li&gt;
&lt;li&gt;Never use 3rd party libraries&lt;/li&gt;
&lt;li&gt;Overuse 3rd party libraries&lt;/li&gt;
&lt;li&gt;Use every design pattern you read about, and try to fit it into your design even if it’s not, really&lt;/li&gt;
&lt;li&gt;Use tools built by large corporations because they know it better and your 1-person startup will surely benefit from the thousands of man hours that went into building them. Bonus points if they are very complicated to use and have their own set of clever-sounding naming conventions.&lt;/li&gt;
&lt;li&gt;Do not use version control, and do not even version the code at all. After all there’s just one right version of the program. You can easily remember all the changes you perform and most importantly &lt;em&gt;why&lt;/em&gt; a change was made. No need to track it in an external repository.&lt;/li&gt;
&lt;li&gt;Freely copy and paste code from Stack Overflow or random blogs without understanding it first&lt;/li&gt;
&lt;li&gt;Indentation does not matter. At all. Mix spaces and tabs, too.&lt;/li&gt;
&lt;li&gt;Freely overuse abstractions. Abstractions are great. Make everything reusable and overthink things like a king.&lt;/li&gt;
&lt;li&gt;Perhaps you’ll reuse this library in every project you’ll make in the next 20 years, who knows? Better think about all the possible edge cases first.&lt;/li&gt;
&lt;li&gt;Always implement every single great idea you have&lt;/li&gt;
&lt;li&gt;2000-lines functions are a great idea&lt;/li&gt;
&lt;li&gt;Assume there’s a 10x engineer watching over your shoulders while you code.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>programming</category>
    </item>
    <item>
      <title>Is JavaScript still worth learning?</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Fri, 06 Sep 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/is-javascript-still-worth-learning-51ci</link>
      <guid>https://forem.com/flaviocopes/is-javascript-still-worth-learning-51ci</guid>
      <description>&lt;p&gt;I was searching for some JavaScript related questions on Google when I noticed Google suggesting me in the “People also ask” box some questions I thought pretty funny:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fv68vqydb5aj0q0v1kioz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fv68vqydb5aj0q0v1kioz.png" alt="JavaScript still worth learning"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Those got my attention.&lt;/p&gt;

&lt;p&gt;Clicking the answer of led me to a reassuring answer, as I expected without a doubt. But I also had my own thoughts on the topic, so I though “let me write them”!&lt;/p&gt;

&lt;p&gt;Let’s get it straight: &lt;strong&gt;JavaScript is more alive than ever&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;JavaScript has never been more popular than today. And it’s never been more powerful than today.&lt;/p&gt;

&lt;p&gt;When I started learning about JS in the late 90’s, the vast majority of the developers used it to make snow rain on the website at Christmas, show alert and dialog boxes, and do all weird kinds of effects. It was kinda fun, but only the pros would use it to create things more complicated than a poll or something.&lt;/p&gt;

&lt;p&gt;When I got into JS seriously in 2012-2013, JS was much more serious. Gmail, Google Maps and other thick client applications showed us all what was possible with JavaScript. Node.js was just starting to become popular but the number of people using it in production was thin.&lt;/p&gt;

&lt;p&gt;Nowadays many people learn JavaScript as their first and only programming language. And they might never learn another one for years, because I’d say that thanks to being the only language that works inside Web browsers, JavaScript is &lt;strong&gt;the most popular and powerful language in the entire world&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If anyone tells you any different, maybe it’s because their favorite programming language is much less popular and they hope one day people stop using JS and use the one they invested so much into :)&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>How to make your first Pull Request on GitHub</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Thu, 11 Jul 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/how-to-make-your-first-pull-request-on-github-1m8g</link>
      <guid>https://forem.com/flaviocopes/how-to-make-your-first-pull-request-on-github-1m8g</guid>
      <description>&lt;p&gt;Many tutorials exist about this topic but they make things overly complicated by assuming one has to contribute &lt;strong&gt;code&lt;/strong&gt; to a project. So there’s all the Git setup before that.&lt;/p&gt;

&lt;p&gt;What if you just need to edit a file, maybe the project README to fix a typo?&lt;/p&gt;

&lt;p&gt;You don’t need to know how to code or how to use Git to do that. But once you start doing Pull Requests, you can do many more things and collaborate on projects with other people! And maybe this will push you to also contribute code later on.&lt;/p&gt;

&lt;p&gt;I assume you already have a (free) GitHub account. If you don’t, then go to &lt;a href="https://github.com" rel="noopener noreferrer"&gt;github.com&lt;/a&gt; and get one.&lt;/p&gt;

&lt;p&gt;Let me show you the process.&lt;/p&gt;

&lt;p&gt;I went to this page &lt;a href="https://web.dev/prefers-color-scheme/" rel="noopener noreferrer"&gt;https://web.dev/prefers-color-scheme/&lt;/a&gt; and I found a possible typo. This line is missing a dot at the end.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fuun02b1r3kgc97gxfk02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fuun02b1r3kgc97gxfk02.png" alt="The article I want to edit"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I’m not a grammar nazi, this is just for the sake of finding an example 😄&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I know that site is hosted on GitHub, and that exact article is hosted here: &lt;a href="https://github.com/GoogleChrome/web.dev/tree/master/src/site/content/en/blog/prefers-color-scheme" rel="noopener noreferrer"&gt;https://github.com/GoogleChrome/web.dev/tree/master/src/site/content/en/blog/prefers-color-scheme&lt;/a&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%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fdxaz17g1ed60i37923q1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fdxaz17g1ed60i37923q1.png" alt="The github folder of the article"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I open the index.md file &lt;a href="https://github.com/GoogleChrome/web.dev/blob/master/src/site/content/en/blog/prefers-color-scheme/index.md" rel="noopener noreferrer"&gt;https://github.com/GoogleChrome/web.dev/blob/master/src/site/content/en/blog/prefers-color-scheme/index.md&lt;/a&gt; directly on GitHub and I press the pencil icon in the file toolbar. Hovering it says “Fork this project and edit the file”.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff02s9rqknntatd5zvmkp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff02s9rqknntatd5zvmkp.png" alt="The index.md file"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This brings up an editor view with this information:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You’re editing a file in a project you don’t have write access to. Submitting a change to this file will write it to a new branch in your fork flaviocopes/web.dev, so you can send a pull request.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fh1p143tszyl6nuggy5kp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fh1p143tszyl6nuggy5kp.png" alt="The editor view"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I can go and add that dot, then at the form at the bottom I explain the changes I made:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmuz55imyq8yc0ifrnfej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmuz55imyq8yc0ifrnfej.png" alt="Propose file change"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I pressed the “Propose File Change” button and a compare view showed up.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2dyovnlxxuhlgpttpb8r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2dyovnlxxuhlgpttpb8r.png" alt="Compare view"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There I can review the changes I made, to make sure all is fine, and finally I can click the “Create Pull Request” button. Currently the changes have been made to &lt;em&gt;your fork&lt;/em&gt; of the project, which was made automatically by GitHub when you clicked the pencil icon.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ft4m8i6ml23ky770akmnf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ft4m8i6ml23ky770akmnf.png" alt="Open pull request"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At the top of this view you can see that I’m about to submit a PR to the &lt;code&gt;GoogleChrome/web.dev&lt;/code&gt; project from my form &lt;code&gt;flaviocopes/web.dev&lt;/code&gt;, from my branch &lt;code&gt;patch-2&lt;/code&gt; to their &lt;code&gt;master&lt;/code&gt; branch.&lt;/p&gt;

&lt;p&gt;Pressing the “Create Pull Request” button shows another form where I can write a detailed description for the Pull Request.&lt;/p&gt;

&lt;p&gt;Pull Requests can contain many different changes, so in theory you could have lots of files edited in the same PR, this is why you can add a summary.&lt;/p&gt;

&lt;p&gt;This repository has a template for the PR text, to help the team manage it. Our PR is very simple so I remove the template and just paste the content from the commit message from before.&lt;/p&gt;

&lt;p&gt;Notice the hint on the right? They tell me the project has a CONTRIBUTING.md file, which explains how to contribute and the guidelines. Pretty cool.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fslptwwupu41d59ipd5dx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fslptwwupu41d59ipd5dx.png" alt="Contributing"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Seems we need to sign a CLA (Contributor License Agreement) to complete our PR. I already signed a Google CLA in the past so this step is clear for me, but you might need to fix that. Most projects don’t really need it.&lt;/p&gt;

&lt;p&gt;I clicked “Create pull request” and the PR is now sent!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fudrwn2zk53e2zemzjwx4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fudrwn2zk53e2zemzjwx4.png" alt="Pull Request sent"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now it’s up to the project maintainers to step in and accept it, you just need to wait for an email telling you that it’s been merged, or any comments other people had.&lt;/p&gt;

&lt;p&gt;[… a couple hours passed by…]&lt;/p&gt;

&lt;p&gt;I got an email back, the PR was rejected because that dot was actually in the correct place! (I didn’t know that).&lt;/p&gt;

&lt;p&gt;But anyway here’s a thing I wanted to add: don’t be angry or upset if a PR you submit is not accepted. The maintainers of the project work on it for months or years and they know better than you about what’s better for it.&lt;/p&gt;

&lt;p&gt;Plus, especially with code, views might be very very different and a PR you think is great might not be welcome.&lt;/p&gt;

&lt;p&gt;It’s also best to ask before working on a substantial PR, to see if it’s something the project actually needs.&lt;/p&gt;

&lt;p&gt;But this is a topic on its own.&lt;/p&gt;

</description>
      <category>github</category>
      <category>git</category>
    </item>
    <item>
      <title>JavaScript Equality Operators</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Fri, 31 May 2019 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/javascript-equality-operators-4b67</link>
      <guid>https://forem.com/flaviocopes/javascript-equality-operators-4b67</guid>
      <description>&lt;p&gt;Those operators accept two values and return a boolean:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;==&lt;/code&gt; checks for equality&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;!=&lt;/code&gt; checks for inequality&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;===&lt;/code&gt; checks for strict equality&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;!==&lt;/code&gt; checks for strict inequality&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let’s talk what we mean for &lt;em&gt;strict&lt;/em&gt;. Without the strict check, the second operand is converted to the type of the first before making the comparison. Strict prevents this.&lt;/p&gt;

&lt;p&gt;Examples:&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;const&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;

&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="c1"&gt;//true&lt;/span&gt;
&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="c1"&gt;//true&lt;/span&gt;

&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="c1"&gt;//true&lt;/span&gt;
&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="c1"&gt;//true&lt;/span&gt;
&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="c1"&gt;//true&lt;/span&gt;
&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="c1"&gt;//false&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;You cannot check objects for equality: two objects are never equal to each other. The only case when a check might be true is if two variables reference the same object.&lt;/p&gt;

&lt;p&gt;Some peculiarities to be aware: &lt;code&gt;NaN&lt;/code&gt; is always different from &lt;code&gt;NaN&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kc"&gt;NaN&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="kc"&gt;NaN&lt;/span&gt; &lt;span class="c1"&gt;//false&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;code&gt;null&lt;/code&gt; and &lt;code&gt;undefined&lt;/code&gt; values are equal if compared in non-strict mode:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kc"&gt;null&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt; &lt;span class="c1"&gt;//true&lt;/span&gt;
&lt;span class="kc"&gt;null&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt; &lt;span class="c1"&gt;//false&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



</description>
      <category>javascript</category>
    </item>
    <item>
      <title>What's the best way to create authentication for a single-user Node.js app?</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Fri, 31 Aug 2018 10:28:50 +0000</pubDate>
      <link>https://forem.com/flaviocopes/whats-the-best-way-to-create-authentication-for-a-single-user-nodejs-app-3d7p</link>
      <guid>https://forem.com/flaviocopes/whats-the-best-way-to-create-authentication-for-a-single-user-nodejs-app-3d7p</guid>
      <description>&lt;p&gt;My app is not going to have more than one user.&lt;/p&gt;

&lt;p&gt;Idea: when the app first loads, if it's the first time ever it will create a token and send it to the client (JWT?). It sets &lt;code&gt;initialized&lt;/code&gt; to true in its config file.&lt;/p&gt;

&lt;p&gt;Then the client will use that token. No other client can connect.&lt;/p&gt;

&lt;p&gt;If the client loses the token, nothing can be done except setting &lt;code&gt;initialized&lt;/code&gt; back to &lt;code&gt;false&lt;/code&gt; in the app config file.&lt;/p&gt;

&lt;p&gt;Any other strategy you'd use?&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>Build an HTTP Server</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Sun, 19 Aug 2018 13:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/build-an-http-server-23jo</link>
      <guid>https://forem.com/flaviocopes/build-an-http-server-23jo</guid>
      <description>&lt;p&gt;Here is the HTTP web server we used as the Node Hello World application in the &lt;a href="https://flaviocopes.com/nodejs/"&gt;Node.js introduction&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;port&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3000&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createServer&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;statusCode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setHeader&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;port&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Server running at http://&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;hostname&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;:&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;port&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's analyze it briefly. We includes the &lt;a href="https://nodejs.org/api/http.html"&gt;&lt;code&gt;http&lt;/code&gt; module&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;We use the module to create an HTTP server.&lt;/p&gt;

&lt;p&gt;The server is set to listen on the specified port, &lt;code&gt;3000&lt;/code&gt;. When the server is ready, the &lt;code&gt;listen&lt;/code&gt; callback function is called.&lt;/p&gt;

&lt;p&gt;The callback function we pass is the one that's going to be executed upon every request that comes in. Whenever a new request is received, the &lt;a href="https://nodejs.org/api/http.html#http_event_request"&gt;&lt;code&gt;request&lt;/code&gt; event&lt;/a&gt; is called, providing two objects: a request (an &lt;a href="https://nodejs.org/api/http.html#http_class_http_incomingmessage"&gt;&lt;code&gt;http.IncomingMessage&lt;/code&gt;&lt;/a&gt; object) and a response (an &lt;a href="https://nodejs.org/api/http.html#http_class_http_serverresponse"&gt;&lt;code&gt;http.ServerResponse&lt;/code&gt;&lt;/a&gt; object).&lt;/p&gt;

&lt;p&gt;&lt;code&gt;request&lt;/code&gt; provides the request details. Through it we access the request headers and request data.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;response&lt;/code&gt; is used to populate the data we're going to return to the client.&lt;/p&gt;

&lt;p&gt;In this case with&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;statusCode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we set the statusCode property to 200, to indicate a successful response.&lt;/p&gt;

&lt;p&gt;We also set the Content-Type header:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setHeader&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and we end close the response, adding the content as an argument to &lt;code&gt;end()&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>node</category>
    </item>
    <item>
      <title>The Node Event emitter</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Sun, 19 Aug 2018 05:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/the-node-event-emitter-1108</link>
      <guid>https://forem.com/flaviocopes/the-node-event-emitter-1108</guid>
      <description>&lt;p&gt;If you worked with JavaScript in the browser, you know how much of the interaction of the user is handled through events: mouse clicks, keyboard button presses, reacting to mouse movements, and so on.&lt;/p&gt;

&lt;p&gt;On the backend side, Node offers us the option to build a similar system using the &lt;a href="https://nodejs.org/api/events.html"&gt;&lt;code&gt;events&lt;/code&gt; module&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This module in particular offers the &lt;code&gt;EventEmitter&lt;/code&gt; class, which we'll use to handle our events.&lt;/p&gt;

&lt;p&gt;You initialize that using&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;eventEmitter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;events&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;EventEmitter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This object exposes, among many others, the &lt;code&gt;on&lt;/code&gt; and &lt;code&gt;emit&lt;/code&gt; methods.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;emit&lt;/code&gt; is used to trigger an event&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;on&lt;/code&gt; is used to add a callback function that's going to be executed when the event is triggered&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example let's create a &lt;code&gt;start&lt;/code&gt; event, and as a matter of providing a sample, we react to that by just logging to the console:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;eventEmitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;started&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When we run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;eventEmitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;the event handler function is triggered, and we get the console log.&lt;/p&gt;

&lt;p&gt;You can pass arguments to the event handler by passing them as additional arguments to &lt;code&gt;emit()&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;eventEmitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`started &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;eventEmitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;23&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Multiple arguments:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;eventEmitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`started from &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; to &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;eventEmitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;start&lt;/span&gt;&lt;span class="dl"&gt;'&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;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The EventEmitter object also exposes several other methods to interact with events, like&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;once()&lt;/code&gt;: add a one-time listener&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;removeListener()&lt;/code&gt; / &lt;code&gt;off()&lt;/code&gt;: remove an event listener from an event&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;removeAllListeners()&lt;/code&gt;: remove all listeners for an event&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can read all their details on the events module page at &lt;a href="https://nodejs.org/api/events.html"&gt;https://nodejs.org/api/events.html&lt;/a&gt;&lt;/p&gt;

</description>
      <category>node</category>
    </item>
    <item>
      <title>Understanding setImmediate()</title>
      <dc:creator>flavio ⚡️🔥</dc:creator>
      <pubDate>Sat, 18 Aug 2018 13:00:00 +0000</pubDate>
      <link>https://forem.com/flaviocopes/understanding-setimmediate-4bon</link>
      <guid>https://forem.com/flaviocopes/understanding-setimmediate-4bon</guid>
      <description>&lt;p&gt;When you want to execute some piece of code asynchronously, but as soon as possible, one option is to use the &lt;code&gt;setImmediate()&lt;/code&gt; function provided by Node.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;setImmediate&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;//run something&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Any function passed as the setImmediate() argument is a callback that's executed in the next iteration of the event loop.&lt;/p&gt;

&lt;p&gt;How is &lt;code&gt;setImmediate()&lt;/code&gt; different from &lt;code&gt;setTimeout(() =&amp;gt; {}, 0)&lt;/code&gt; (passing a 0ms timeout), and from &lt;code&gt;process.nextTick()&lt;/code&gt;?&lt;/p&gt;

&lt;p&gt;A function passed to &lt;code&gt;process.nextTick()&lt;/code&gt; is going to be executed on the current iteration of the event loop, after the current operation ends. This means it will always execute before &lt;code&gt;setTimeout&lt;/code&gt; and &lt;code&gt;setImmediate&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;A &lt;code&gt;setTimeout()&lt;/code&gt; callback with a 0ms delay is very similar to &lt;code&gt;setImmediate()&lt;/code&gt;. The execution order will depend on various factors, but they will be both run in the next iteration of the event loop.&lt;/p&gt;

</description>
      <category>node</category>
    </item>
  </channel>
</rss>
