I’m Gaël, a 25-year-old software engineer who’s been working in a startup environment in Southeast Asia for a few years. 🌏

Working remotely has its perks, and while hopping from one exotic location to another, I’ve been nurturing a little dream: to kick-start my journey as a solopreneur.

I genuinely love my job—there’s a certain thrill in startup life that I think everyone should experience at least once. Sure, it’s a rollercoaster of highs and lows, but it's where I've learned the ropes of product development and caught the bug for making things people love (and will hopefully pay for!). I often think of coding as adult LEGO—endless possibilities and just plain fun. 🤓

After two years of nomadic life, I chose to plant my feet firmly on the ground to strike a better work-life balance and finally carve out time for my side projects.

But here’s the kicker: settling down didn’t magically make time appear. Between the 9-5 grind and weekend exhaustion, I struggled to find the energy and belief needed to start something of my own.

Choosing the Right Tools for the Journey

Embarking on this solopreneur journey, I decided to harness the tools and technologies I was already familiar with: HTML, CSS, Tailwind, JavaScript, along with React and Next.js for creating websites.

This choice was not just about comfort but was also about applying best practices in web development that I've learned over a few years of experience.

In the following sections, I'll explain why I chose these particular technologies. I'll also provide guidance on how you can select the most suitable tools for your own projects, balancing learning curves, productivity, and project requirements.

Expect to find practical tips and lessons from my hands-on experience, which you can apply to enhance your coding skills or streamline your development process.

Realizing the Need for Change

Until recently, my daily routine was disordered. I juggled work with late-night phone scrolling sessions until 1-2 AM, only waking just in time for a hurried breakfast before starting my day.

Frequent use of food delivery apps led to overeating and unhealthy habits, which, despite my overall good life, I knew wasn’t sustainable.

I was trapped in a cycle, fearing that cutting back on my late nights would reduce my life to just work, work, and work. 💻

Then, something clicked a month ago. Motivated by all the recommendations I've seen about going to the gym, I contacted a personal trainer and started my first few sessions. Initially skeptical about lifting weights, I was surprised by the surge in energy it brought me.

"Talking to my therapist today" - @levelsio on X (Twitter)

This burst of energy triggered a chain reaction: I began paying more attention to my diet, choosing healthier, lighter meals. Sleep, too, became a priority. Influenced by the insights from "Why We Sleep" I transformed my sleep routine, targeting eight hours a night. This shift turned my mornings from a rush into a peaceful, productive time. 😴

Now, a month later, these practices have almost become natural. Waking up earlier, I feel more energized, and I've discovered precious time in the morning before work.

How Improved Health Boosts Coding Productivity

For those on a coding journey or balancing work with learning new skills, I cannot stress enough the importance of good sleep and regular exercise. These aren’t just lifestyle choices – they are essential tools for enhancing your cognitive function and focus.

After integrating better sleep and exercise into my routine, I noticed a significant improvement in my coding productivity. I was able to learn faster, stay focused for more extended periods, and tackle complex problems with more clarity. It felt like unlocking a cheat code for my brain!

Coding is an exciting yet demanding journey. With the additional energy gained from these changes, you'll be more equipped to face the challenges and joys of learning how to code.

Taking the First Step: BooksByMood

The concept for BooksByMood had been developing in my mind for months, inspired by Mood2Movie, an app developed by Marc Lou.

The idea of finding books based on your mood captivated me, and I envisioned a platform with my own twist on design and suggestions. This marked the beginning of my indie project journey with BooksByMood. 📚

Getting started on this new journey was daunting. My Twitter feed was full of stories of polished apps and good earnings, which heightened my stress and anxiety about starting. At that time, I didn't fully realize that we all have to start somewhere, and even the well-known people out there started at the beginning one day.

To manage my expectations and focus, I established clear, achievable goals:

• To create a straightforward website centered around a single, compelling feature.
• To keep the website free, ensuring accessibility and user engagement (IMO, also easier to get started with–particularly as a 1st project).
• To dedicate a week to learning promotion techniques, aiming to drive traffic to the site.

These goals weren’t just milestones – they were my commitment to myself to prove that I could bring an idea to fruition and attract visitors. 🎯

How I Chose My Technical Stack

As mentioned earlier, I utilized technologies I was proficient in: HTML, CSS, JavaScript, along with Tailwind for styling and Next.js for the framework. I chose this stack for its familiarity and efficiency.

I specifically opted for Next.js due to its convenient features:

• server-side rendering and static site generation, leading to improved website performance
• the file-based routing system
• various optimizations such as website navigation using the <Link> component or the <Image> component
• it's great for SEO
• overall it helps craft a better user experience

This stack allowed me to rapidly prototype and deploy, enhancing the site's performance without additional effort.

Takeaways: Stick to technologies you know well when validating an idea quickly. This approach helps you move faster and focus on the project's core value. That's why you can find many solopreneurs online using the same technologies for years (for example, Pieter Levels is using HTML, CSS, JS (with JQuery) and PHP for years).

App Development Process and Challenges

The journey of developing BooksByMood was iterative, starting with a basic, barely functional version.

I encountered several challenges, such as sourcing reliable book data and crafting a user-friendly interface. Overcoming these obstacles required research, trial and error, and continuous iteration.

Challenge 1: Finding Reliable Books Data

Finding a dependable source for book data was unexpectedly challenging.

I initially wanted to use some APIs. Unfortunately, Goodreads closed its API on December 8th, 2020. OpenLibrary was not bad, but the data needed to be more consistent. Google Books API was alright, but I would have also curated manually in the end, and sometimes some info could have been better.

This made me realize that it's hard to find a good books API out there (probably due to Amazon owning Goodreads and making sure it's hard for competitors to have good data as they do).

There was one thing I knew: it'd be complex to satisfy everyone with the recommendations, but I could do my best. My best was to ensure that what was recommended was well rated by the community (for example, it had a good rating on Goodreads).

You may wonder what will happen in the future, if the website is growing? In that case, it'll definitely need improvement. But, for a first release, it does the trick!

Takeaways: When facing a challenge on a new project, always take your time to consider all options and find the right balance between shipping fast, quality and reliability.

As an example, I'm 95% sure that curating books manually in JSON files with the help of AI has been a great choice. It resulted in shipping in a reasonable time, only showing books liked by the community, and controlling the data (for example, cover, title, description, tags, authors, and so on).

Challenge 2: Designing a user-friendly interface

As a full stack developer who's been working on the backend for a while, designing an appealing front end was my second major hurdle. Ensuring the site was not only functional but also aesthetically pleasing was crucial for user engagement.

I'm still in the process of learning about design, and it's far from perfect. But I discovered Dribbble and it's been a great place to get inspiration. Also, I've been using Excalidraw to sketch an initial layout version showing how I'd like to organize the information.

Takeaways: For non-designers, drawing inspiration from design-focused platforms like Dribbble can be incredibly helpful. Combining this with UI component libraries, like DaisyUI, can significantly enhance the design process, making it more effective.

Initial sketch of BooksByMood on Excalidraw (shared for my 1st day of #buildinpublic)

1st version of BooksByMood

Releasing the App

With the extra time my new morning routine afforded me, I devoted 1-2 hours each weekday and additional weekend time to developing BooksByMood. After a week of focused effort, I opted for a soft launch: I added the project on Twitter by updating my bio link.

The following day marked the beginning of more assertive promotion across various platforms, including Twitter, Reddit, and HackerNews. ✍️

Takeaways: Feel free to release your project everywhere you can. It can sound scary, but you never know what will happen. Doing that will help you in many ways, such as starting to attract visitors, getting feedback, getting backlinks, and so on. There's nothing to lose!

BooksByMood Homepage

Learning and Growing: Early Lessons from the Journey

Personal and Business Lessons

It might sound a bit cliché, but these points have genuinely resonated with me:

• Believe in Yourself: Doubt was a constant companion, but taking the leap showed me the importance of faith in my ability to turn an idea into reality.
• Ship That Idea: After all, there could be only positives in doing so. Releasing a product, no matter how small, is a victory in itself.
• Building Publicly Is Rewarding: Engaging with the Indie Hackers community has been a blast. Their support and encouragement have been pivotal, making the process not just about building a product but also about being part of an inspiring collective.
• Believe in the Internet’s Magic: Sharing my project on HackerNews was a leap into the unknown. To my astonishment, we hit the first page, and the influx of visitors exceeded my expectations. Indeed, the internet can work wonders, turning small actions into significant impacts.

Technical lessons

On the technical front, the project has been a rich source of learning:

• Choosing the Right Stack: Leveraging familiar technologies like Next.js and React facilitated a smoother development process and quicker iterations. This really underscored the importance of choosing the right tools for the job. I've said it many times in this article: Use what you know. Don't try to overthink using the latest shiny technology. I'd advise you to focus on your product, not how it's being built.
• Data Handling and AI Utilization: The challenge of sourcing reliable book data forced me to consider solutions, including using AI for content curation. This experience highlighted the need for flexibility and creativity in problem-solving. Sometimes, in tech, you'll not find exactly what you want, and you'll have to evaluate potential tradeoffs to find alternatives.
• Design for the User: As a backend-focused developer, delving into front-end design was challenging. But prioritizing user experience and employing design resources like Dribbble for inspiration proved crucial in creating an engaging interface. Also, don't be too worried about your design. Your first version will probably be "ugly," but over time and iterations, you'll start having something visually pleasing. Everything takes time!
• Iterative Development: Start with a minimal viable product with only one focused feature. It's tempting for a developer to add many features, such as a dark mode, a user account, fancy filters, and so on, but that's unnecessary. Instead, use your technical skills to make that one feature work perfectly.

To wrap up this reflection, I can’t emphasize enough the satisfaction of crafting a project, releasing it, and seeing people using it. It’s an amazing experience that I recommend to everyone. If you’ve been sitting on an idea, stop overthinking and start building it now. 🚧

Looking Ahead: The Road to Indie Hacking

I plan to stay committed to the indie hacking path for the upcoming months, balancing it alongside my 9-5 job.

A vast landscape of knowledge awaits me, especially in areas like design and marketing, where my experience is limited. Objectively, I know it's not gonna be easy. Yet, the idea of acquiring new skills is exciting. 🎨

The Indie Hackers community has been a goldmine of insights, with members generously sharing their tips and success stories. This collective wisdom, along with a wealth of books and resources, will continue to guide and inspire my journey. 🔖

In the coming months, my focus is on continuous learning and building. I aim to diversify my projects, incorporating paid features to explore different business models and market needs.

Regarding the tech stack, I plan to stick with my current tools, which are versatile enough to meet most of my needs. While I'm open to integrating new libraries like NextAuth for streamlined authentication processes, my primary focus will be learning marketing. Understanding and getting better at marketing is crucial for any indie hacker, as it's often required to transform a side project into something bigger.

Whether it leads to success or failure, every step forward is one step toward. I'm excited to see where this path will take me and to share the journey's story with you all.

Takeaways: Your journey should be one of continuous iteration and exploration. While developing your project, never underestimate the power of marketing—it's essential for gaining traction and turning your ideas into reality. To realize your full potential, embrace both the technical and business sides.

Conclusion: An Invitation to Join the Journey

As this chapter of my journey unfolds, I invite you to come along. I'd love to navigate the ups and downs of indie hacking together.

Join me on Twitter where I share real-time updates, insights, and milestones of this journey, all in the hope of inspiring some of you to embark on your own adventures. 👀

Explore BooksByMood

Curious about what I’ve been working on? Check out BooksByMood, my first indie project that helps you find books based on your mood. 👇

Using scripts, we can extract the data we need from a website for various purposes, such as creating databases, doing some analytics, and even more.

Disclaimer: Be careful when doing web scraping. Always make sure you're scraping sites that allow it, and performing this activity within ethical and legal limits.

JavaScript and Node.js offers various libraries that make web scraping easier. For simple data extraction, you can use Axios to fetch an API responses or a website HTML.

But if you're looking to do more advanced tasks including automations, you'll need libraries such as Puppeteer, Cheerio, or Nightmare (don't worry the name is nightmare, but it's not that bad to use 😆).

I'll introduce the basics of web scraping in JavaScript and Node.js using Puppeteer in this article. I structured the writing to show you some basics of fetching information on a website and clicking a button (for example, moving to the next page).

At the end of this introduction, I'll recommend ways to practice and learn more by improving the project we just created.

Prerequisites

Before diving in and scraping our first page together using JavaScript, Node.js, and the HTML DOM, I'd recommend having a basic understanding of these technologies. It'll improve your learning and understanding of the topic.

Let's dive in! 🤿

How to Initialize Your First Puppeteer Scraper

New project...new folder! First, create the first-puppeteer-scraper-example folder on your computer. It'll contain the code of our future scraper.

mkdir first-puppeteer-scraper-example

Now, it's time to initialize your Node.js repository with a package.json file. It's helpful to add information to the repository and NPM packages, such as the Puppeteer library.

npm init -y

After typing this command, you should find this package.json file in your repository tree.

{
  "name": "first-puppeteer-scraper-example",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^19.6.2"
  },
  "type": "module",
  "devDependencies": {},
  "description": ""
}

Before proceeding, we must ensure the project is configured to handle ES6 features. To do so, you can add the "types": "module" instruction at the end of the configuration.

{
  "name": "first-puppeteer-scraper-example",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^19.6.2"
  },
  "type": "module",
  "description": "",
  "types": "module"
}

The last step of our scraper initialization is to install the Puppeteer library. Here's how:

npm install puppeteer

Wow! We're there – we're ready to scrape our first website together. 🤩

How to Scrape Your First Piece of Data

In this article, we'll use the ToScrape website as our learning platform. This online sandbox provides two projects specifically designed for web scraping, making it a great starting point to learn the basics such as data extraction and page navigation.

For this beginner's introduction, we'll specifically focus on the Quotes to Scrape website.

How to Initialize the Script

In the project repository root, you can create an index.js file. This will be our application entry point.

To keep it simple, our script consists of one function in charge of getting the website's quotes (getQuotes).

In the function's body, we will need to follow different steps:

• Start a Puppeteer session with puppeteer.launch (it'll instantiate a browser variable that we'll use for manipulating the browser)
• Open a new page/tab with browser.newPage (it'll instantiate a page variable that we'll use for manipulating the page)
• Change the URL of our new page to http://quotes.toscrape.com/ with page.goto

Here's the commented version of the initial script:

import puppeteer from "puppeteer";

const getQuotes = async () => {
  // Start a Puppeteer session with:
  // - a visible browser (`headless: false` - easier to debug because you'll see the browser in action)
  // - no default viewport (`defaultViewport: null` - website page will in full width and height)
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  // Open a new page
  const page = await browser.newPage();

  // On this new page:
  // - open the "http://quotes.toscrape.com/" website
  // - wait until the dom content is loaded (HTML is ready)
  await page.goto("http://quotes.toscrape.com/", {
    waitUntil: "domcontentloaded",
  });
};

// Start the scraping
getQuotes();

What do you think of running our scraper and seeing the output? Let's do it with the command below:

node index.js

After doing this, you should have a brand new browser application started with a new page and the website Quotes to Scrape loaded onto it. Magic, isn't it? 🪄

Quotes to Scrape homepage loaded by our initial script

Note: For this first iteration, we're not closing the browser. This means you will need to close the browser to stop the running application.

How to Fetch the First Quote

Whenever you want to scrape a website, you'll have to play with the HTML DOM. What I recommend is to inspect the page and start navigating the different elements to find what you need.

In our case, we'll follow the baby step principle and start fetching the first quote, author, and text.

After browsing the page HTML, we can notice a quote is encapsulated in a <div> element with a class name quote (class="quote"). This is important information because the scraping works with CSS selectors (for example, .quote).

Browser inspector with the first quote <div> selected

An example of how each quote is rendered in the HTML

Now that we have this knowledge, we can return to our getQuotes function and improve our code to select the first quote and extract its data.

We will need to add the following after the page.goto instruction:

• Extract data from our page HTML with page.evaluate (it'll execute the function passed as a parameter in the page context and returns the result)
• Get the quote HTML node with document.querySelector (it'll fetch the first <div> with the classname quote and returns it)
• Get the quote text and author from the previously extracted quote HTML node with quote.querySelector (it'll extract the elements with the classname text and author under <div class="quote"> and returns them)

Here's the updated version with detailed comments:

import puppeteer from "puppeteer";

const getQuotes = async () => {
  // Start a Puppeteer session with:
  // - a visible browser (`headless: false` - easier to debug because you'll see the browser in action)
  // - no default viewport (`defaultViewport: null` - website page will in full width and height)
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  // Open a new page
  const page = await browser.newPage();

  // On this new page:
  // - open the "http://quotes.toscrape.com/" website
  // - wait until the dom content is loaded (HTML is ready)
  await page.goto("http://quotes.toscrape.com/", {
    waitUntil: "domcontentloaded",
  });

  // Get page data
  const quotes = await page.evaluate(() => {
    // Fetch the first element with class "quote"
    const quote = document.querySelector(".quote");

    // Fetch the sub-elements from the previously fetched quote element
    // Get the displayed text and return it (`.innerText`)
    const text = quote.querySelector(".text").innerText;
    const author = quote.querySelector(".author").innerText;

    return { text, author };
  });

  // Display the quotes
  console.log(quotes);

  // Close the browser
  await browser.close();
};

// Start the scraping
getQuotes();

Something interesting to point out is that the function name for selecting an element is the same as in the browser inspect. Here's an example:

After running the document.querySelector instruction in the browser inspector, we have the first quote as an output (like on Puppeteer)

Let's run our script one more time and see what we have as an output:

{
  text: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
  author: 'Albert Einstein'
}

We did it! Our first scraped element is here, right in the terminal. Now, let's expand it and fetch all the current page quotes. 🔥

How to Fetch All Current Page Quotes

Now that we know how to fetch one quote, let's trick our code a bit to get all the quotes and extract their data one by one.

Previously we used document.getQuerySelector to select the first matching element (the first quote). To be able to fetch all quotes, we will need the document.querySelectorAll function instead.

We'll need to follow these steps to make it work:

• Replace document.getQuerySelector with document.querySelectorAll (it'll fetch all <div> elements with the classname quote and return them)
• Convert the fetched elements to a list with Array.from(quoteList) (it'll ensure the list of quotes is iterable)
• Move our previous code to get the quote text and author inside the loop and return the result (it'll extract the elements with the classname text and author under <div class="quote"> for each quote)

Here's the code update:

import puppeteer from "puppeteer";

const getQuotes = async () => {
  // Start a Puppeteer session with:
  // - a visible browser (`headless: false` - easier to debug because you'll see the browser in action)
  // - no default viewport (`defaultViewport: null` - website page will be in full width and height)
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  // Open a new page
  const page = await browser.newPage();

  // On this new page:
  // - open the "http://quotes.toscrape.com/" website
  // - wait until the dom content is loaded (HTML is ready)
  await page.goto("http://quotes.toscrape.com/", {
    waitUntil: "domcontentloaded",
  });

  // Get page data
  const quotes = await page.evaluate(() => {
    // Fetch the first element with class "quote"
    // Get the displayed text and returns it
    const quoteList = document.querySelectorAll(".quote");

    // Convert the quoteList to an iterable array
    // For each quote fetch the text and author
    return Array.from(quoteList).map((quote) => {
      // Fetch the sub-elements from the previously fetched quote element
      // Get the displayed text and return it (`.innerText`)
      const text = quote.querySelector(".text").innerText;
      const author = quote.querySelector(".author").innerText;

      return { text, author };
    });
  });

  // Display the quotes
  console.log(quotes);

  // Close the browser
  await browser.close();
};

// Start the scraping
getQuotes();

As an end result, if we run our script one more time, we should have a list of quotes as an output. Each element of this list should have a text and an author property.

[
  {
    text: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    text: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    text: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    text: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    text: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  },
  {
    text: '“Try not to become a man of success. Rather become a man of value.”',
    author: 'Albert Einstein'
  },
  {
    text: '“It is better to be hated for what you are than to be loved for what you are not.”',
    author: 'André Gide'
  },
  {
    text: "“I have not failed. I've just found 10,000 ways that won't work.”",
    author: 'Thomas A. Edison'
  },
  {
    text: "“A woman is like a tea bag; you never know how strong it is until it's in hot water.”",
    author: 'Eleanor Roosevelt'
  },
  {
    text: '“A day without sunshine is like, you know, night.”',
    author: 'Steve Martin'
  }
]

Good job! All the quotes from the first page are now scraped by our script. 👏

How to Move to the Next Page

Our script is now able to fetch all the quotes for one page. What would be interesting is clicking on the "Next page" at the page bottom and doing the same on the second page.

"Next" button at the Quotes to Scrape page bottom

Back to our browser inspect, and let's find how we can target this element using CSS selectors.

As we can notice, the next button is placed under an unordered list <ul> with a pager classname (<ul class="pager">). This list has an element <li> with a next classname (<li class="next">). Finally, there is a link anchor <a> that links to the second page (<a href="/page/2/">).

In CSS, if we want to target this specific link there are different ways to do that. We can do:

• .next > a: but, it's risky because if there is an other element with .next as a parent element containing a link, it'll click on it.
• .pager > .next > a: safer, because we make sure the link should be inside the .pager parent element under the .next element. There is a low risk of having this hierarchy more than once.

An example of how the "Next" button is rendered in the HTML

To click this button, at the end of our script after the console.log(quotes);, you can add the following: await page.click(".pager > .next > a");.

Since we're now closing the browser page with await browser.close(); after all instructions are done, you need to comment on this instruction to see the second page opened in the scraper browser.

It's temporary and for testing purposes, but the end of our getQuotes function should look like this:

  // Display the quotes
  console.log(quotes);

  // Click on the "Next page" button
  await page.click(".pager > .next > a");

  // Close the browser
  // await browser.close();

After this, if you run our scraper again, after processing all instructions, your browser should stop on the second page:

Quotes to Scrape second page loaded after clicking the "Next" button

It’s Your Time! Here’s What You Can Do Next:

Congrats on reaching the end of this introduction to scraping with Puppeteer! 👏

Now it's your turn to improve the scraper and make it get more data from the Quotes to Scrape website. Here's a list of potential improvements you can make:

• Navigate between all pages using the "Next" button and fetch the quotes on all the pages.
• Fetch the quote's tags (each quote has a list of tags).
• Scrape the author's about page (by clicking on the author's name on each quote).
• Categorize the quotes by tags or authors (it's not 100% related to the scraping itself, but that can be a good improvement).

Feel free to be creative and do any other things you see fit 🚀

Scraper Code Is Available on GitHub

Check out the latest version of our scraper on GitHub! You're free to save, fork, or utilize it as you see fit.

=> First Puppeteer Scraper (example)

Successful Scraping Start: Thanks for reading the article!

I hope this article gave you a valuable introduction to web scraping using JavaScript and Puppeteer. Writing this was a pleasure, and I hope you found it informative and enjoyable.

Join me on Twitter for more content like this. I regularly share content to help you grow your web development skills and would love to have you join the conversation. Let's learn, grow, and inspire each other along the way!

In this reference guide, I'll be sharing a variety of different playlists, radio stations, and videos that you can listen to while coding. Whether you're a beginner or an experienced programmer, you will find something to listen to.

So put on your headphones and get to work!

Coding music on Spotify

One of my favorite ways to listen to music while working is through Spotify. If you're not familiar with Spotify, it's a music streaming service that you can use for free (with ads) or for a monthly fee (no ads).

I like using Spotify because it has a huge selection of songs and albums, and you can create your own playlists. Plus, if you have the paid version, you can download songs and listen to them offline.

If you're looking for some good coding music, here are a few Spotify playlists:

• Lofi Beats
• Electronic Music for Coding: Fast Programming Instrumentals for Concentration
• Coding Mode
• Lofi Hip Hop Music - Beats to Relax/Study by Lofi Girl
• Deep Focus
• Electronic Focus
• House Focus

Music for programming on YouTube

YouTube is another great resource for finding music to listen to while programming. In fact, there are entire channels dedicated to that kind of music.

Here are a few productivity/programming/concentration music channels on YouTube:

• Chill Music Lab
• Filfar
• Lofi Ghostie
• Lofi Geek
• Lofi Girl
• Greenred Productions
• Productivity Music by Evan Carmichael
• Fluidified

There are also many 24/7 coding music lives. Let me share with you some YouTube queries to find them:

• 24/7 coding
• 24/7 lofi
• Programming music
• Coffee music
• Focus music

Music for coding on TwitchTV

TwitchTV is a live streaming video platform where you can watch people play video games, listen to music, and more. There is a lot of great content that you can watch and listen to while coding.

Here are a few music channels on TwitchTV:

• LeekBeats
• KuboMusic
• SixtySevenRadio
• SpinninRecords

On this platform, some streamers like to create virtual offices. Most of the time, they are streaming in the "Just Chatting" or "Software and Game Development" sections. You can launch their streaming in the background, work with them and listen to good music.

It can be motivating when you're working alone at home and need to have the feeling of working with someone. Some of these streamers are even doing Pomodoro Sessions that you can follow to get your code done and improve your focus.

Web radio broadcasting music for developers

If you're looking for something a little more low-key, you can try listening to radio dedicated for developers. There are a few stations that play nothing but programming music.

Here are a few of them:

• Code radio by freeCodeCamp
• musicForProgramming();
• X-Team Radio
• Lofi Cafe

Wrapping up

Thank you for reading this article. I hope these links will be helpful and motivate you in your day-to-day developer work. Keep coding, and keep hustling.

I regularly deliver content about web development, personal growth as a developer, and my journey as an aspiring digital nomad and remote software engineer. If you don't want to miss them, I invite you to follow me on Twitter.

Indeed, a bit more than two years ago, I started my first full-time job as a Software Engineer. And at the same time, I began my first remote experience.

Nowadays, I'm 23 years old, living in Europe, working for a company based in Singapore, and planning to start a digital nomad life in Asia.

Based on my experience, I've put together 15 working from home tips to help you stay productive. I categorized these tips into 5 categories that you'll discover just below.

Just keep in mind that these tips are based on my personal experience, readings, and documentation. Everyone is different, and some of them may not work with your needs and goals.

Tip #1 – Build a strong work-life balance

One of the most impactful categories you need to take care of is your work-life balance.

Yes, you read about this in all remote-work articles, but what does it mean?

When you work remotely, it's easy to cut yourself out from your life. Your work can start overwhelming you because you feel like you're only doing that.

Even if you're passionate about what you are doing, it's essential to know how to step away from it to relax and stay productive in the long run.

Here are some tips to achieve a work-life balance.

1. Take breaks and go outside

It seems simple, right? Remote work doesn't mean staying at home all day. I highly recommend taking breaks and going outside to refresh your mind and leave your workplace.

What about eating outside during your lunchtime or even going for a walk in the afternoon?

2. Take up a sport or activity that takes your mind off things

To avoid feeling burnout from your job, take a step back and practice a relaxing and mind-changing activity.

Many people like to play a sport, while others prefer simply making time for other activities or hobbies that are different from what they do at work.

3. Split your computer

One of the most challenging parts of working from home is differentiating your work time from your non-work time.

If you're using the same computer for your work and your side-projects/chill time, this tip is for you.

Split your browser configuration

Nowadays, most browsers allow you to create profiles. I recommend that you make two profiles, one for your work and one for non-work time.

This allows you to disconnect easier when you're outside of work. At the same time, it helps organize your bookmarks and sessions (for example: if you're using the same tools between your work and your side-projects).

Create another session on your computer

This isn't something that I do personally. But, I read a lot about people using two different sessions.

It sounds like the "ultimate" solution if you want to keep these two spaces independent.

4. Don't setup work notifications on your phone

This tip can be controversial depending on what you're doing as a remote worker. But, still, I think it's something essential if you want to keep a work-life balance.

I don't like to have work applications or notifications on my phone for many reasons. Remote work means asynchronous life. Your co-workers can work at different hours than you. If you want to avoid waking up with work notifications or receiving messages while you're outside with friends, this is something you should avoid.

Note: If your work requires setting up some applications, there are many ways to remove the notifications after a defined hour. That can be an alternative.

5. Work from a co-working space

Another piece of advice that I've heard a lot is to work remotely from outside your home. Well, it's a bit controversial with this article title, but it's a genius way to keep a work-life balance if you can afford it and feel comfortable working in a public space.

If you're not feeling productive at home, even after reading and trying many things, working from a co-working space can help you.

Nowadays, co-working spaces are everywhere. If you can, try one of them out to see if it works for you.

Tip #2 – Create your own working environment

Now that we've talked about the importance of keeping a work-life balance, let's dig a bit more into your workspace and how you can improve it.

1. Choose or create a workspace that stimulates you

While working remotely, you have the freedom to create a workspace where you feel good. Be imaginative and bring what stimulates you around your desk. It can be plants, books, or anything that you like.

If you're a digital nomad or a frequent traveler, you can select a coffee shop, a co-working space, or a flat that inspires you.

A nice place to work is always a good source of motivation.

2. Separate your workspace from your sleeping one

I know that's not possible for everyone, but try as much as possible to separate your workspace from your bedroom.

If you wake up and work in the same place as you sleep, you will certainly have the feeling that you're always doing the same thing. It's not motivating to stay in the same room all day. When you reach your bed, you will still be in your "working" room.

3. Declutter your desk

Many articles and guides about productivity share this tip, but decluttering your desk and keeping it clean and minimal can help free your mind and help you focus more.

Again, it's a matter of personal opinion, but I like to keep my remote working space clean and simple to focus only on what matters.

Tip #3 – Socialize at work

Social aspects are essential as a remote worker. They help you stay motivated and avoid this inner feeling of working alone (even if you're not).

1. Schedule virtual time with your colleagues

Remote work doesn't mean staying away from your colleagues. Even if it can seem socially distancing at times, one essential point is to keep socializing.

Don't be shy – ask your colleagues for a 15-30 minutes coffee meeting to get to know them better.

If you're not working as a freelancer on alone on your project, there are many online events and communities that allow you to talk with like-minded people and share a coffee with them.

2. Try to schedule a social meeting each week in your company

If you're leading a remote company or working at one, this point is for you. Don't hesitate to schedule or ask for a social meeting each week. For example, it can be an hour where everyone meets up online and plays an online game together. The possibilities are endless.

Let me give you feedback on my experience. I'm working at Cococart. We create a product that allows you to create a simple, beautiful store in minutes. We're a remote worldwide company: all the team is spread worldwide, and some are frequent travelers.

Each week, we do one "Campfire" – an hour and a half meeting where we meet each other, talk about our highlights and lowlights of the week, give kudos to our co-workers, and play a game together. It can seem like a short time but trust me, it really helps build up significant team motivation and spirit.

One of the most awkward parts of working remotely is to feel alone. This point is only one example, but feel free to socialize using your preferred way.

Tip #4 – Become a time-management expert

To improve your productivity as a remote worker, time also matters. Make sure you're using yours wisely.

1. Try to have a set work schedule

I don't want to say that you shouldn't work hard or count your hours. I work a lot and don't always follow this rule.

I want to share that it's better to have at least a vague idea of when you start your day and finish it. It can be a good thing for your work-life balance, staying focused, and getting your work in the dedicated timeframe.

But as with all the tips I'm sharing in this article, it's a matter of personal opinion. I often shift my work schedule depending on a meeting or if I want to work more one day, and so on. Remote work gives you more flexibility and freedom. So it would be sad to not benefit from it! Just do what's best for you.

2. Schedule your tasks

This advice applies to many topics, but you will probably work more efficiently and achieve your goals easier if you schedule your day.

As a remote worker, it can be a good motivation factor. An organized day with focused work results in more time for yourself, lets you start working on something new at your job, or anything that you like.

Tip #5 – Learn to deep focus

Practicing some deep focus sessions is your ally if you want to skyrocket your productivity. Let me give you three tips that can help with it.

1. Listen to focus songs

Using focus/chill music can help you stay productive and enter into a deep focus. It's often an excellent way to hack your productivity.

Here are some examples of websites where you can listen to that kind of music for free:

• freeCodeCamp radio
• LofiGirl on YouTube
• Cafe Music BGM channel on YouTube

2. Use the "Do not disturb" option on your phone

Nowadays, we always receive notifications on our phones. Most modern devices have a "Do not disturb" feature that allows you to disable notifications when entering "Work" mode.

If you don't have this option, tons of applications like Forest in the store allow you to "restrict" your phone and enter focus mode.

3. Limit distractions

A bit related to the last tip, limiting distractions helps you stay focused. Review your environment and try to remove or push away all objects that annoy you while working.

Here are some examples: put away your phone, close YouTube videos while working, switch off the TV, and so on.

Wrapping up

Thank you for reading this article. I hope it provided you with insightful tips to improve your remote work life or even start working remotely.

I regularly deliver content about web development, personal growth as a developer, and my journey as an aspiring digital nomad and remote software engineer. If you don't want to miss them, I invite you to follow me on Twitter.

In it, I will show you why you should share your coding expertise by looking at five extraordinary benefits.

I have always enjoyed sharing content online and helping others. But today, as a software engineer, I can tell you that it helps me even more.

Recently, I started asking myself about the benefits of doing sharing knowledge. That's how I found five reasons that will motivate you to start today.

Let’s discover them!

You'll gain a deeper understanding of what you’re learning

One of the main benefits of sharing what you know is that you will deep dive into the subjects you want to share with everyone.

This means that you will repeat your learning process in order to best write your technical content. By doing so, you strengthen your knowledge of the subject, and you may even learn something new.

For example, when I'm creating new content, I like to read similar resources before I start writing. This helps me to understand the concept better and write something more accurate and useful.

Then when I publish my content, sometimes I receive feedback that gives me better ways of solving my issue.

This happens to me often when I'm sharing articles about JavaScript, and it's super useful in my own learning process.

You’ll help others

Always remember that you're not alone! Many developers encounter the same issue as you and will benefit from your specific way of explaining that issue.

In the beginning, you might feel like you're writing only for yourself. But one day people will start finding your content and they'll learn from and enjoy it.

I recommend using an open publishing platform like Hashnode, Dev.to, or Twitter if you want to get started. These have significant developer communities built around them. People there will support you and give you feedback on your content. It can be an excellent motivation to start!

And once you've done some writing, you can apply to publications like freeCodeCamp's and share your knowledge with the large community they've built as well.

One side note: even if there is plenty of content about a particular topic, please write your own article about it. There is considerable potential that your article will complete or complement what's already out there. Everyone explains things and brings value in their own way.

You’ll have fun and discover new opportunities

Creating content takes time, but it's a fun way to learn. You will improve your skills while building an audience of people with the same interests as you.

I've seen a lot of great stories from developers sharing content on Twitter. The good thing is that the Tech community is generally supportive, and everyone helps each other.

Also, building an audience, or at least sharing content online, can bring you new opportunities. For example, it can help you find and apply for a new job, create a side-project, and even more.

You’ll create a piece of knowledge for your future self

Sharing your knowledge is like writing documentation for your work. It helps others – but it also helps you! You can refer later to what you documented and shared if you can't remember how you solved a bug or issue.

As an example, I like to take notes whenever I repetitively search for something on Google. And I know that others are probably searching for the same thing.

So later, I often write an article about that search. It allows me to refer to my content when I need a reminder.

It’s very gratifying when you find your article on Google, and at the same time it helps you and others.

You should give it a try :)

You’ll be more motivated

Last but not least – creating content will help you stay motivated. Sharing your journey as a developer can help you feel like you're making progress in your learning.

I think this is the case because:

• you will have concrete pieces of content based on what you learned, tested, and built (it helps to keep track of your progress)
• you will help others and have their support
• you will have fun (enjoying the process = motivation)

Ready to start?

Hopefully, this article can motivate you to start sharing your knowledge. Start today by sharing your learning journey with the community.

I have primarily written up these benefits based on my experience. I'm pretty sure you can find even more. In any case, you'll have a lot of fun getting started.

If you're interested, follow me on Twitter 🐦! I'll help you to improve your skills as a web developer.

Yes, this library will help you build and manage your Node.js database – and it's compatible with TypeScript! It will generate all the types of your entities automatically.

The schema definition is easy to read by humans – no more headache there. You will see how that works in the coming sections.

Also, the ORM works well with Next.js, GraphQL, Nest.Js, Express.js, Apollo, and Hapi.

To summarize, Prisma is a modern ORM that plays nice with all the trending tech stacks.

That is why I decided to try it and to replace my previous database management library: TypeORM.

"Prisma helps app developers build faster and make fewer errors with an open source ORM for PostgreSQL, MySQL and SQLite." – Prisma homepage

Let's build a simple Twitter database using Node, Prisma, and SQLite

Time to practice. I will show you how to build your first Node.js database using Prisma. To keep this introduction accessible, we will use Node with SQLite.

SQLite is a self-contained database engine. This means that you don't need to configure a database on your computer. The project will run by itself if you follow the steps of this tutorial.

If, in the future, you want to use Prisma with a PostgreSQL database, here is a tutorial on creating a PostgreSQL database using Docker-Compose.

Prerequisites

• Node.js (12.2 or higher)

Before getting started, take the time to double-check if you have version 12.2 or higher of Node.js. If you don't, just update your Node before starting the next section.

Note: If you want to check your Node.js version, you can type: node -v in a terminal. The output will be the version.

• Basic SQL knowledge

Even though I'm taking a simple approach to this new library, I recommend that you have basic SQL knowledge to fully understand the tutorial.

Note: You don't need to be an expert! Only the basics like creating a table and making some requests are essential here.

How to Set Up a Basic Twitter Project

First, you need to create a new folder for this project and move into it:

$ mkdir minimalistic-twitter
$ cd minimalistic-twitter

Then, we will install all the mandatory dependencies such as TypeScript and Prisma.

$ npm init -y
$ npm install prisma typescript ts-node @types/node --save-dev
$ npm install @prisma/client

From now, you should see a node_modules folder and a package.json file in your repository.

Before moving on to the Prisma initialization, the last configuration step is to create a configuration for TypeScript at the repository root.

To do so, you can create a tsconfig.json and paste the following configuration:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["esnext"],
    "esModuleInterop": true
  }
}

There we go! It's time to use Prisma in our project. In the minimalistic-twitter folder, you can use the following command to prompt the Prisma help output.

$ npx prisma

Now, the last step before building our minimalistic Twitter app is to initialize the database configuration.

We will use the init command but with a --datasource-provider parameter to set the database type. Otherwise, by default, init will create a PostgreSQL database.

$ npx prisma init --datasource-provider sqlite

When the command finishes executing, you should find in your repository a .env file and a prisma folder with a schema.prisma file inside of it.

The schema.prisma file contains all the instructions to connect to your database. Later it will also include the instructions to generate your database tables.

The .env file contains all the environment variable that your project needs to run. For Prisma, the only variable is DATABASE_URL. Its value is set to ./dev.db .

The dev.db file will be the self-contained database file.

Project tree after the project initialization

If you have the same output, congrats, it means that your project is ready! 🎉

How to Build Our First Model – User

Our basic Twitter database will consist of two main entities:

• A user entity with the user information and its tweets
• A tweet entity with the tweet content and its author

First, we'll focus on user entity creation. Each of them has:

• an id
• a unique email (two users can't have the same email)
• a username
• a list of tweets

With Prisma, if we want to define a new schema (model), we need to do it in the schema.prisma file.

To define an entity, we will use the model instruction as below. You can reproduce it after the database connection instruction in your schema.prisma file.

// After the database connection

model User {
  // We set an `id` variable
  // With an `Int` type (number)
  // Then, we set the Prisma decorators:
  // - @id (because it's an ID)
  // - @default(autoincrement()) (default value is auto-incremented)
  id Int @id @default(autoincrement())

  // We set an `email` variable
  // With a `String` type
  // Then, we set the Prisma decorator:
  // - @unique (because we want the user to be unique
  // based on the email - two users can't have the same)
  email String @unique

  // We set a `username` variable
  // With a `String` type
  username String

  // We set a `tweets` variable
  // With a `Tweet[]` type (one-to-many relationship)
  // Because each user can have between
  // 0 and an infinite number of tweets
  tweets Tweet[]
}

As you might notice, we don't have the Tweet model yet. It will be our next step.

How to Build Our Second Model – Tweet

Now that we have users, we need tweets. Let's follow the same process as before, but this time for the Tweet entity.

Each of them has:

• an id
• a creation date
• a text
• an userId (tweet's author)

Below, you will find the entity. You can reproduce it after the User model declaration in your schema.prisma file.

// After the database connection

// After the User model

model Tweet {
  // We set an `id` variable
  // With an `Int` type (number)
  // Then, we set the Prisma decorators:
  // - @id (because it's an ID)
  // - @default(autoincrement()) (default value is auto-incremented)
  id Int @id @default(autoincrement())

  // Save the tweet creation time
  createdAt DateTime @default(now())

  // We set a `text` variable
  // With a `String` type
  text String

  // We set a `userId` variable
  // With an `Int` type (number)
  // It will link the `id` of the `User` model
  userId Int

  // We set a `user` variable
  // With a `User` type (many-to-one relationship)
  // Because each tweet has an author
  // This author is a `User`
  // We link the `User` to a `Tweet` based on:
  // - the `userId` in the `Tweet` model
  // - the `id` in the `User` model
  user User @relation(fields: [userId], references: [id])
}

How to Generate our First Database Migration

The first thing we need to do before using our database is to generate it. To do so, we will use another command of the Prisma CLI. This command will allow us to create migrations.

If we have a look at the documentation about the migrate command, we'll see the following:

"Prisma Migrate is an imperative database schema migration tool that enables you to: Keep your database schema in sync with your Prisma schema as it evolves _and m_aintain existing data in your database." – Prisma migrate documentation

The idea here is to save our first database implementation. You can do it by typing the command below in your terminal:

npx prisma migrate dev --name initialize

Note: You can enter the name of your choice after the --name parameter. Keep in mind that the migration name is helpful to remember the changes you made.

If your migration command is successful, it means that all the instructions in schema.prisma are correct. ✅

Your project tree should now be similar to the image below (except for the migration hash).

Project tree after the migration generation

Note: In the migration.sql file, you will find the SQL queries to generate your database.

Your database is ready! 🚀 It's time to try it, add some users, and let them tweet.

How to Test our Node JS SQLite Project

So, will the users now be able to tweet? Let's try to run some queries on our database. We'll create an index.ts file at the repository root, and we'll write some instructions into it.

First, we need to import and initialize the database connection. Based on the Prisma Quickstart documentation, we create a prisma variable to interact with the database and a function to write our test code:

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function main() {}

main()
  .catch((e) => {
    throw e;
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

We're ready to fill the main function with some instructions.

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function main() {
  // We create a new user
  const newUser = await prisma.user.create({
    data: {
      email: "hello@herewecode.io",
      username: "gaelgthomas", // <- it's also my Twitter username 😄
    },
  });

  console.log("New User:");
  console.log(newUser);

  // We create a new tweet and we link it to our new user
  const firstTweet = await prisma.tweet.create({
    data: {
      text: "Hello world!",
      userId: newUser.id,
    },
  });

  console.log("First tweet:");
  console.log(firstTweet);

  // We fetch the new user again (by its unique email address)
  // and we ask to fetch its tweets at the same time
  const newUserWithTweets = await prisma.user.findUnique({
    where: {
      email: "hello@herewecode.io",
    },
    include: { tweets: true },
  });

  console.log("User object with Tweets:");
  console.dir(newUserWithTweets);
}

main()
  .catch((e) => {
    throw e;
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

Note: If you want to discover the different instructions you can use, a good Prisma documentation page is the CRUD one.

Time to run the index.ts file.

Before doing it, open your package.json file and search for the scripts section. You will need to add a command to start the project using ts-node.

If you want, you can replace your scripts section with the following code:

"scripts": {
  "dev": "ts-node ./index.ts",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Then, in your terminal, you can type the command below and read the output to see if everything is working well:

$ npm run dev

Note: In the command above, we run the dev script from our package.json.

NPM test output using Prisma

It's working! You got your first user and tweet. 👏 Now that you've set up your first database using Prisma, you can add some features to it. Here are some ideas:

• add more information in the User entity (birthday, address, biography, and so on)
• add a like system (each tweet can have likes, each user can have a liked tweet list)

The Code is available on Github – Node JS with Prisma and SQLite

If you want to get the complete code, you can find it on my GitHub.

-> GitHub: Prisma SQLite example

Thanks for reading until the end!

I hope you will use Prisma in one of your next projects. 🎉

I'm starting to tweet more consistently. If you want to get more tips and resources about web programming -> Find me on my Twitter 🐦

But a few weeks ago, while I was preparing some JavaScript tips to start my YouTube journey, I wrote this list of time-saving tips. I hope they help you as they've helped me.

In this article, I'm going to share with you 5 useful JavaScript tips (are you ready to dive in? 😀).

And now, guess what? Some of these tips are on my YouTube channel📹! (here is the playlist.

Object Destructuring

Destructuring is a feature that was introduced in ES6. It's one of the features you will use daily once you know how.

It helps you deal with three main issues:

• Repetition. Every time you want to extract one object property and create a new variable, you create a new line.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

// Wow... should we display
// John's password like that?

const firstName = user.firstName;
const lastName = user.lastName;
const password = user.password;

• Accessibility. Each time you want to access an object property, you should write the path to it. (example: user.firstName, user.family.sister, and so on).
• Usage. As an example, when you create a new function, and you are only working with one property of an object.

Now that you've seen what these three issues with objects are, how do you think you can solve them?

How to Solve the Repetition Issue

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const { firstName, lastName, password } = user;

console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123'

Destructuring is the process of extracting a property from an object by its key. By taking an existing key in your object, then placing it between two brackets ({ firstName }) you tell JavaScript:

"Hey JavaScript, I want to create a variable with the same name as my property. I want to create a variable firstName for the firstName property of my object."

Note: If you want to destructure an object, you should always use an existing key. Otherwise, it will not work.

How to Solve the Accessibility Issue

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
  family: {
    sister: {
      firstName: "Maria",
    },
  },
};

// We access to the nested object `sister`
// and we extract the `firstName` property
const { firstName } = user.family.sister;

console.log(firstName);
// Output: 'Maria'

When you work with nested objects, it can become quite repetitive and wastes a lot of time accessing the same property many times.

Using destructuring, in one line only, you can reduce the property path to one variable.

How to Solve the Usage Issue

Now that you know how to destructure an object, let me show you how to extract properties directly in your function parameter definition.

If you know React, you're probably already familiar with it.

function getUserFirstName({ firstName }) {
  return firstName;
}

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

console.log(getUserFirstName(user));
// Output: 'John'

In the above example, we have a getUserFirstName function, and we know that it will only use one property of our object, firstName.

Rather than passing the whole object or creating a new variable, we can destructure the object's function parameters.

How to Merge Objects in ES6

In programming, you often have to tackle issues with data structures. Thanks to the spread operator introduced in ES6, object and array manipulations are more straightforward.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

Let's imagine that we have two objects:

• User. An object defining general information about the user.
• UserJob. An object defining job information of the user.

We want to create one object that only contains the properties of these two objects.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

const myNewUserObject = {
  ...user,
  ...userJob,
};

console.log(myNewUserObject);
// Output:
//{
//  firstName: 'John',
//  lastName: 'Doe',
//  password: '123',
//  jobName: 'Developer',
//  jobCountry: 'France',
//  jobTimePerWeekInHour: '35'
//}

Using the spread operator (...), we can extract all the properties of one object to another.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const myNewUserObject = {
  ...user,
  // We extract:
  // - firstName
  // - lastName
  // - password
  // and send them to
  // a new object `{}`
};

How to Merge Arrays

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Like objects, the spread operator (...) extracts all the elements from one array to another.

const girlNames = ["Jessica", "Emma", "Amandine"];

const newNewArray = [
  ...girlNames,
  // We extract:
  // - 'Jessica'
  // - 'Emma'
  // - 'Amandine'
  // and send them to
  // a new array `[]`
];

How to Remove Array Duplicates

Because arrays are lists, you can have many items of the same value. If you want to remove duplicates in your array, you can follow one of the examples below.

One of them will be only one line thanks to ES6, but I let the "old" example in there so you can compare.

How to remove array duplicates "the old way"

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithFilter = animals.filter(
  // Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl']
  (animal, index, array) => array.indexOf(animal) == index
);

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

In the above example, we want to clean the animals array by removing all duplicates.

We can do that by using the function filter with indexOf inside it.

The filter function takes all elements of the animals array (animals.filter). Then for each occurrence it provides:

• the current value (example: duck)
• the index (example: 0)
• the initial array (example: the animals array => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

We will apply indexOf on the original array for each occurrence and give as a parameter the animal variable (the current value).

indexOf will return the first index of the current value (example: for 'owl' the index is 0).

Then inside of the filter, we compare the value of indexOf to the current index. If it's the same, we return true otherwise false.

filter will create a new array with only the elements where the returned value was true.

So, in our case: ['owl', 'frog', 'canary', 'duck', 'goose'].

How to remove array duplicates "the new way"

Well, the "old way" is interesting to understand, but it's long and a bit hard. So let's check out the new way now:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithSet = [...new Set(animals)];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Let's separate out the different steps:

// 1
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

// 2
const animalsSet = new Set(animals);

console.log(animalsSet);
// Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' }

// 3
const uniqueAnimalsWithSet = [...animalsSet];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

We have an animals array, and we convert it into a Set, which is a special type of object in ES6.

The thing that's different about it is that it lets you create a collection of unique values.

Note: Set is a collection of unique values, but it's not an Array.

Once we have our Set object with unique values, we need to convert it back to an array.

To do that, we use the spread operators to destructure it and send all the properties to a new Array.

Because the Set object has unique properties, our new array will also have unique values only.

How to Use Ternary Operators

Have you already heard about a way to write small conditions in only one line?

If not, it's time to remove a lot of your if and else blocks and convert them to small ternary operations.

Let's look at an example with console.log to start. The idea is to check the value of a variable and conditionally display an output.

const colour = "blue";

if (colour === "blue") {
  console.log(`It's blue!`);
} else {
  console.log(`It's not blue!`);
}

This example is a typical case where you can use the ternary operator to reduce these 5 if and else lines to only one!

One line to rule them all!

const colour = "blue";

colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else]

Ternary operators replace if and else for small conditions.

Note: It's not recommended to create complex conditions with ternary operators because it can reduce readability.

Below is another example that uses ternary operators, but this time in the return of a function.

function sayHelloToAnne(name) {
  return name === "Anne" ? "Hello, Anne!" : "It's not Anne!";
}

console.log(sayHelloToAnne("Anne"));
// Output: 'Hello, Anne!'

console.log(sayHelloToAnne("Gael"));
// Output: "It's not Anne!"

Want to Contribute? Here's How.

You are welcome to contribute to this GitHub repository. Any contribution is appreciated, and it will help each of us improve our JavaScript skills. GitHub: JavaScript Awesome Tips

Conclusion

I hope you learned some new things about JavaScript while reading this post.

If you want more content like this, you can follow me on Twitter where I tweet about web development, self-improvement, and my journey as a full stack developer!

In the last part of this series, I shared with you how to write a good commit message.

I gave you an overview of the benefits of writing a good commit, and I mentioned the possibility of generating a changelog.

In this article, you will learn what a changelog is along with two ways to generate it – a simple one and a sophisticated one.

What is a changelog?

A changelog is a file that shares a chronologically ordered list of the changes you've made on your project. It’s often organized by the version with the date followed by a list of added, improved, and removed features.

Globally, there are two ways to write a changelog:

• the usual way: create a text file and start to enumerate all your changes with a specific date
• the developer choice (alias the lazy option): auto-generate your changelog from your commit messages. I have good news for you – this is what you’re going to learn in this article!

“A changelog is a log or record of all notable changes made to a project. The project is often a website or software project, and the changelog usually includes records of changes such as bug fixes, new features, etc.” – Wikipedia

Why is it essential?

I think, even now, you are asking yourself why it is essential and why you should take the time to create it.

A changelog is a kind of summary of all your changes. It should be easy to understand both by the users using your project and the developers working on it.

In a world where everything is evolving quickly, a user needs to know if the website/software they are using is changing. You might be surprised, but people love to read blog posts or an update page on your website.

For a developer, for example, if the project is big, it can be interesting to know how the software they're working on is evolving.

Or if you are working on an open-source project, you can find a "CHANGELOG.md" file in the GitHub repository. This file aims to inform contributors of the latest updates on the project.

CHANGELOG.md of the Angular.js GitHub repository

Where do we find them?

Changelogs are everywhere! Okay, they often have different styles and locations, but they're literally on every project.

I created a short list with a few places where you can find a changelog.

• A blog post. A changelog can be delivered under an article sharing the last features point by point.
• A "CHANGELOG.md" file in a GitHub repository.
• A Changelog section on your favourite website/software. Here's one example with the task management tool TickTick.
• In "What's new" on the Android and the IOS store.

TickTick "What's new" section on Android

TickTick "What's new" section on iOS

Changelog auto-generation

In this part, we're going to generate our first changelog together.

By doing this task, you will understand why it can be useful to commit by following some rules.

An excellent and explicit commit doesn't need to be modified and can be directly added to the changelog.

If you are interested in generating a necessary file without any personalisation or beautification, I recommend the first way; otherwise, the second one is better.

Note: Some websites such as Keep A Changelog explain that you shouldn't make a changelog only by copying and pasting your git commits (refer to the simple way). Indeed, I recommend trying to avoid this way if you are working on a professional product.

However, nowadays, there are some advanced generators that allow you to change your git logs into changelogs (refer to the sophisticated way).

How to generate a changelog (the simple way)

By using this first way, you don't need any prerequisites. All you need is to type a few commands inside your Git repository.

As a simple reminder, when you type "git log", a list of all your commits is displayed.

$ git log

// Output
commit f6986f8e52c1f889c8649ec75c5abac003102999 (HEAD -> master, origin/master, origin/HEAD)
Author: Sam Katakouzinos <sam.katakouzinos@gmail.com>
Date:   Tue Mar 10 11:41:18 2020 +1100

    docs(developers): commit message format typo

    Any line of the commit message cannot be longer *than* 100 characters!

    Closes #17006

commit ff963de73ab8913bce27a1e75ac01f53e8ece1d9
Author: Chives <chivesrs@gmail.com>
Date:   Thu Feb 6 19:05:57 2020 -0500

    docs($aria): get the docs working for the service

    Closes #16945

commit 2b28c540ad7ebf4a9c3a6f108a9cb5b673d3712d
Author: comet <hjung524@gmail.com>
Date:   Mon Jan 27 19:49:55 2020 -0600

    docs(*): fix spelling errors

    Closes #16942

This command can take a few parameters. We are going to use them to change the output and get an improved one to generate our changelog.

By typing the following command, you will have an output with one commit per line.

$ git log --oneline --decorate

// Output
f6986f8e5 (HEAD -> master, origin/master, origin/HEAD) docs(developers): commit message format typo
ff963de73 docs($aria): get the docs working for the service
2b28c540a docs(*): fix spelling errors
68701efb9 chore(*): fix serving of URI-encoded files on code.angularjs.org
c8a6e8450 chore(package): fix scripts for latest Node 10.x on Windows
0cd592f49 docs(angular.errorHandlingConfig): fix typo (wether --> whether)
a4daf1f76 docs(angular.copy): fix `getter`/`setter` formatting
be6a6d80e chore(*): update copyright year to 2020
36f17c926 docs: add mention to changelog
ff5f782b2 docs: add mention to changelog
27460db1d docs: release notes for 1.7.9
add78e620 fix(angular.merge): do not merge __proto__ property

It’s better, but let’s see what we can do with the following one.

$ git log --pretty=”%s”

// Output
docs(developers): commit message format typo
docs($aria): get the docs working for the service
docs(*): fix spelling errors
chore(*): fix serving of URI-encoded files on code.angularjs.org
chore(package): fix scripts for latest Node 10.x on Windows
docs(angular.errorHandlingConfig): fix typo (wether --> whether)
docs(angular.copy): fix `getter`/`setter` formatting
chore(*): update copyright year to 2020
docs: add mention to changelog
docs: add mention to changelog
docs: release notes for 1.7.9
fix(angular.merge): do not merge __proto__ property

With this one, you can print the list of commits with the style you want.

The “%s” corresponds to the commit title itself. You can modify the string to style your commit as you like.

In our case, we want to create a list.

$ git log --pretty="- %s"

// Output
- docs(developers): commit message format typo
- docs($aria): get the docs working for the service
- docs(*): fix spelling errors
- chore(*): fix serving of URI-encoded files on code.angularjs.org
- chore(package): fix scripts for latest Node 10.x on Windows
- docs(angular.errorHandlingConfig): fix typo (wether --> whether)
- docs(angular.copy): fix `getter`/`setter` formatting
- chore(*): update copyright year to 2020
- docs: add mention to changelog
- docs: add mention to changelog
- docs: release notes for 1.7.9
- fix(angular.merge): do not merge __proto__ property

You did it! You created a simple changelog.

Note: If you want to go further, and save your changelog faster: instead of copying and pasting the result into a file, redirect it to your terminal by typing “git log --pretty="- %s" > CHANGELOG.md”

How to generate a changelog (the sophisticated way)

Prerequisites

We are now going to explore a sophisticated way to generate a changelog. The idea behind the process stays the same, but this time we’re going to use other tools to help us.

Do you remember when in the last part of this series I wrote about the Git guidelines?

Note: Git guidelines are a set of rules to write your commits better. These guidelines help you add some structure to your commits.

When you are using a guideline for your project, you can use tools to generate a changelog. Most of the time, these tools are better because they allow you to create a markdown formatted changelog.

In this example, we’re going to use a simple generator which works with most of the guidelines. Its name is “generate-changelog”, and it’s available on NPM (the Node Package Manager).

This tool is going to create a stylised changelog, but it’s not the one with the most features. I decided to use it because it’s an excellent example for a beginner. If you want to go further, please refer to the list of changelog tools below:

Here are a few tools you can use:

• Github Changelog Generator
• Git Chglog
• Auto Changelog
• Conventional Changelog

Note: Before installing the tool, you need to have NPM installed on your computer. If you don't have it, I invite you to follow the official website (it will help you to install Node and NPM).

To install the package on your computer, type the following command in your terminal.

$ npm install generate-changelog -g

Once you do that, it’s installed!

How to use it

To make this package work, you need to follow the guidelines for using this pattern – “type(category): description [flags]”. In this example, I will use the Angular.js GitHub repository.

Now you can type the generate command in your terminal inside your GitHub repository.

$ changelog generate

A “CHANGELOG.md” file will be automatically created and filled with your logs in a markdown format.

You can find an example of the output (with a markdown reader such as GitHub) below.

Auto-generated changelog with the generate-changelog tool

Conclusion

I hope you liked this guide and now understand how to create a changelog for your project. I think it’s a good way to demonstrate why you should write good commit messages.

Feel free to try other changelog generators and send me the result!

If you have any questions or feedback, please let me know.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

After a few weeks away from writing, I’m coming back today with a follow-up to one of my most searched posts on Google.

When I started to write, one year ago, I created an article on how to start and create your first repository with Git.

This article helps many people each week. So I decided to write this post on how to write a good commit message so you can take your Git skills to the next level.

What is a good commit message?

As a short reminder, a commit message is the short text you left when you saved your work on Git. This message aims to identify your work.

The idea is that just bu reading it, anyone will be able to clearly understand what you did in this part of your work.

A good commit example

Below, you can find the last commits to the Angular.js project on GitHub. As you can see, messages are clear, and we can better understand which work has been done in different parts.

For example, on July 24, 2019, “gkalpak” upgraded “SauceConnect” and switched to the last version of Safari (the web browser).

Git commits history on the Angular.js project on GitHub

Why is everyone not committing the same way?

Unfortunately, there's not a universal way to write commits. Each project and each company define specific rules for their needs.

But don’t worry – you will often find similar ways of writing a message.

To find out what those are, I highly recommend that you read the rules before starting at a company or working on an open-source project.

I will give you more details on these guidelines later in this article.

Why it is essential to write your commit well

I created a short list of the advantages of using a good commit message.

Better collaboration

If you are working at a company, or on an open-source project, it’s essential to follow the rules for better cooperation. If you write something understandable, following the rules of the project, other developers will be able to work more efficiently. They won't have to ask you questions about your work.

Note: If you are working on a personal project, I highly recommend that you also follow specific rules. It will improve your productivity, and if you need help from another developer, it will be easier for them to start working on your project.

Better understanding

You need to create clear and understandable messages. This will help you and your collaborator work on a project together. Below, you can find an example of a git commit history with only unclear messages. As you will see, it’s difficult to understand what was going on.

BONUS - A changelog generation

I’ll tell you a small secret: if you write good messages, you will be able to generate a changelog directly from your commit messages.

Here are a few tools to do it:

• Github Changelog Generator
• Git Chglog
• Auto Changelog
• Conventional Changelog.

I'll write an upcoming article on this topic, too. If you want to be updated, you can follow me on Twitter. I post every update there.

Bad git commits example from Jason McCreary

Note: If you want to have more example of bad commits and have fun at the same time, a Twitter account named "gitlost" is tweeting every day with the funny and unfiltered commits.

Example of auto-generated Git changelog

OK, now let's get into more detail and look at what it really takes to write a good commit message.

How to write a commit message

If you want to write a good commit message, you need to follow some rules. I created a checklist below. Every time you want to commit, take the time to refer to this list.

• Always check your grammar. It's never pleasant to read a message full of errors. To do this, I recommend you to use a grammar tool. If you are writing in English, you can use Grammarly, Reverso, or GrammarCheck. These tools are not perfect, but they will remove most of your errors.
• One commit, one change. Try to commit often. It is ideal to have each change in a different commit. It will be easier for you to go back to your previous work.
• Be clear. When you are writing a commit, try to be as transparent as possible. I recommend that you use simple English and get straight to the point.
• Detail what you did. Take the time to reread your code to write what you did. In case you need to add a lot of detail, use the description part of the commit.

The git commit command

I want to share more details on the 'git commit' command. If you are not using a git software, you should know that you can create detailed commits by typing this command:

$ git commit -m "Title" -m "Description"

It's the same as before, but with a second part for the description. So, "-m 'title' " lets you write the short title of the commit, and "-m 'description' " lets you write the description if you need to give more details.

Use git guidelines

If you want to have a clear git commit history, you should follow some guidelines. In my case, I chose this simple one from Udacity.

There are a lot of others, like Conventional Commits, and Angular Guideline. A commit guideline will help you give structure to your commits.

For example, adding a tag to clarify what you did: "git commit -m 'fix: correctly delete all user information when the button delete account is triggered'".

Conclusion

I hope that you liked this guide on how to commit to Git! If you have any questions or feedback, feel free to ask.

If you have any other tips on how to make good commits, please let me know.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

I've recently asked on the Instagram of HereWeCode the following question: "What small tutorials do you want to see on the account?". One of the followers answered "How to make coding interesting?". I was surprised because I'd never asked this myself.

After a few hours of searching, I wanted share with you different ways to make programming more fun.

Why coding is exciting

In my opinion, IT in general is exciting. We live in a world where computers are one of the most important things.

As we speak, programming is not a skill that everyone has. Being able to develop your own project is this world gives you a chance. Everything is possible thanks to Information Technology, and we live in a key period where there are not enough developers to satisfy the need.

Coding is a creative skill, and it's exciting to be a part of a project. Although mobile apps and websites are everywhere, I talked with a lot of people who don't know how they work.

My speech so far may seem a bit over-sold and over-played, but it's the reason why coding is exciting for me.

It's one of the reasons why I take so much pleasure in creating educational content.

How to make it more fun

After thinking about it, although programming is now a passion for me, I remembered that it hasn't always been fun for me.

Mostly when I started, I would get stuck for days on a problem. Sometimes I would completely lose hope and say: "This is not for me. I tried everything, and it still does not work. I'm not that good."

If that's the case with you, I can tell you – everybody's been there.

This situation can also happen for many other reasons. For example, when you are bored with a language or a framework because you've used it too much.

Anyway, don't worry too much about it. Here, I've listed a few tips to give you a dose of fun when you need it.

Practice

Writing code is like playing golf. When you start, it's not fun. You need to learn everything: which driver to use for hitting the ball in such a way, how to position yourself, and so on. The pleasure will come as you go along, begin to understand things, and start to have fun with them.

Don't just read code, run it

Following along with lessons by simply reading the code can be a significant problem when people start programming.

When you are learning how to code, you should try to write and run it by yourself. Take the time to do it – you will understand it better, and you will have fun trying to modify the code to create your programs.

Here's another example: when you are searching for a code on GitHub, why not try it out? It can be fun to understand someone else's work and be able to integrate it into your project.

Add a dose of fun to your projects or apprenticeships

When you are bored with one technology or if you want to increase your knowledge, you can learn a new library, framework, or language. This can be an interesting process and can help you to try new things and have fun doing them.

However, I don't recommend that you only learn from and follow along with a course. If you do so, after a few days you will be bored. Every day or with every new chapter, create small projects to encourage yourself, and let your creativity run free.

Try to find some fun projects to work on. For example, imagine you are learning the basics of JavaScript. Even if these skills are the most important, learning them won't be enjoyable. Once you know how to get user inputs and print in the console, why not trying to create a simple "chatbot" that answers user questions?

Chatbot example

When I was doing my search to answer this question, I found this story from a Quora user, and I liked it. It's an excellent example of how to put fun into your apprenticeships.

"Another thing - the worst is learning a new thing - it is usually very challenging, and your progress is much slower than you wish it were. To make that fun, I typically trick my brain.

For example, when I was learning about assembly language, and we had a project to program a tiny hardware display - well first, it was very dull. You had to study the hardware manual, it had inputs and outputs, and all you could achieve was a few letters to appear on the screen.

But I challenged myself to master that thing, and to do that, I came up with my own "special exercise". Instead of merely writing 10101 on display, I came up with the idea to write something more stupid, more childish. Something like - ——CALL -ME - NOW -XXXX — flashing and moving over the screen - this was WAY more advanced than the actual task we had been assigned in class. I just used this stupid thing to motivate myself to learn everything I could about assembly languages, and boy, this worked out well! :)"

— Marcus Biel

Always challenge yourself

When you are a developer, you always need to learn new things to stay up to date. Everything is evolving quickly, and you can't be left behind. Boredom or lack of fun occurs when you no longer feel like you are growing or learning.

To counteract this feeling, you can try to achieve goals that you have not yet met.

For example, if you have never participated in an open-source project, you can search on GitHub and contribute for the first time.

Your sense of satisfaction will be increased when you succeed in having your work accepted within the project. Perhaps you will help dozens, even hundreds of people, by fixing a previously unresolved problem.

You can also participate in coding competitions or use coding websites such as HackerRank, CodingGame, or Project Euler to challenge yourself.

Create a personal project from scratch

It can be frustrating to be a developer when you're only working on a small part of a project for your company.

Maybe you have always dreamed about a project, but you've never taken the time to work on it. Why not try to code it? You will see – it's fun to start the project of your dreams. It's also a worthy goal to make your programming habit stick.

If you don't have any ideas, try to find a theme you like, for example:

• If you like video games, you can try to create a game.
• If you are into education, why not create tutorials around code?
• If you love hardware and electronics, why not build an Arduino or a raspberry pi?

"Programming is like writing - in the main subject matters much more than the writing itself." — lifeisstillgood

Define a goal

This point always returns in all of my productivity articles. You must define goals.

Without goals, it's challenging to feel comfortable and enjoy what you are doing as a developer.

Find a mentor

A mentor can be motivating if you don't find coding fun anymore.

A mentor can give you a goal to follow and teach you the best practices. They can also help you improve your programming skills and stimulate your professional career.

Perhaps you are wondering how to ask your "hero" to become your mentor.

Well, just send a message and them to be your mentor.

Yeah yeah, it's that simple. Maybe, they will be pleased to know that you value their skills enough to mentor you. In most cases, they will be delighted to accompany you in your development.

Sleep more

When you are in a downward spiral, programming becomes less fun. Sometimes it can be difficult for you to move forward and thrive in your work.

Go to bed earlier for a few nights or sleep later in the morning for a few days, and everything should improve dramatically.

Show your work

What's worse than being a developer and losing all hope because you're alone in your basement? It's a bit of a cliché but, believe me, when you work alone for a long time on a project and never show it to anyone, it becomes less fun right away.

This tip is close to the previous ones. Once you share your work, people will make suggestions or ask questions. It's going to be challenging for you and will help you set new goals.

Conclusion

I tried to round up some essential tips to help you have fun while programming. If you have any other advice or suggestions to make it more fun, feel free to leave a comment or send me a message.

Why do you think programming is exciting? How do you make programming more fun?

Feel free to share this article if you liked it.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

A few days ago, I started to read The Power Of Habit by Charles Duhigg. This book made me think a lot about why some people struggle with programming daily. I think it's because of the habit process. Most people don't know how habits work and need concrete examples.

In this article, I'm going to explain what a habit is and give you some advice to help you create a daily programming habit.

What is a habit?

Before starting, it's essential to define what a habit is and how you form one.

If we check the definition of the word "habit" on Google, we find this:

"Habits are routines of behavior that are repeated regularly and tend to occur subconsciously" ― Wikipedia

"a behavior pattern acquired by frequent repetition or physiologic exposure that shows itself in regularity or increased facility of performance" ― Meriam-Webster Dictionary

"a recurrent, often unconscious pattern of behavior that is acquired through frequent repetition" ― The Free Dictionary

"something that you do often or regularly, often without thinking about it" ― MacMillan Dictionary

As you can see, a habit is an automatic process in your life. Take brushing your teeth, for example.

It's interesting to define the components of a habit to understand how it works.

Each habit includes three components: a cue, a routine, and a reward.

The Habit Loop

What is the cue?

The cue is an event in your life that triggers a habit. Every time you do something automatically, it was started by a cue.

Most of the time, a cue is defined by time, an emotional state, a location, or an action.

For example, if I'm working and suddenly smell coffee from my colleague's direction, my habit "Taking a coffee break" is triggered.

What is the routine?

The routine is what you are doing while the habit process is running. You can define whatever you want it to be in this part. As I said previously, it can be, "I'm going to take a coffee break."

What is the reward?

The reward is the final element of the process. In other words, what this routine has done for you. For the coffee break example, the reward is "Thanks to the caffeine, I feel less tired, and I am more dynamic."

The more positive and pleasant the reward is for yourself, the more your brain will save the habit.

"This process within our brains is a three-step loop. First, there is a cue, a trigger that tells your brain to go into automatic mode and which habit to use. Then there is the routine, which can be physical or mental or emotional. Finally, there is a reward, which helps your brain figure out if this particular loop is worth remembering for the future. Over time, this loop—cue, routine, reward; cue, routine, reward—becomes more and more automatic. The cue and reward become intertwined until a powerful sense of anticipation and craving emerges. Eventually, whether in a chilly MIT laboratory or your driveway, a habit is born." ― Charles Duhigg, The Power of Habit: Why We Do What We Do in Life and Business

A little exercise

Here's something you can do: take one of your daily habits and try to define the cue, the routine, and the reward. Once you do, you're ready to read the next part on how to create your daily programming habit.

How to make programming a daily habit

All you have to do to make programming a daily activity is to create a routine.

You are free to define what you want for each part of this exercise, but I will give you a few tips to help you.

For the cue, you can try to define something based on time:

• Every morning right after I wake up
• When I come back from my job
• During my lunch break
• [Insert a time-based cue]

Routine will be our most straightforward element to define. You can just say, "I want to code for 30 minutes," "I'm going to learn [Insert a skill] for 30 minutes," or many more.

Finally, one of the most critical parts will be the reward. As I recommended in the first part of my first productivity article, you need to establish goals for yourself. It's going to help you define a reward. Every time you practice your habit, you are closer to your goal.

Try to determine a long term goal, and inside of that, a lot of small goals.

For example, you can say:

• I'm getting closer to my goals for the week.
• I'm getting a little closer to my final goal.
• If I code right after waking up, I'll make myself breakfast as a reward.
• [Insert a reward]

A challenge that can help you

One of the best ways to get into a habit is to follow a 100DaysOfX challenge. This challenge is designed to help you create a pattern and commit to it every day by sharing what you did on Twitter, Instagram, or your blog.

The reason I'm telling you about this challenge is that it became famous on Twitter with the 100DaysOfCode.

I strongly recommend that you read the rules on the site and get started. You'll see, at first, it may seem big and impossible, but you'll find it fun to do.

Besides, you will most certainly get support on Twitter, which will motivate you.

"Are you passionate about self-improvement? Eager to change your habits, have tried to do so many times, but had difficulties changing them? Life always seems to get in the way, there is not enough support, and you feel like you're alone in it? Find yourself thinking, "What's the use of all this self-improvement if I always seem to go back to where I started from?" ― 100DaysOfX

If I recommend this challenge to you, it's because I'm doing it. I'm thrilled with the results, and I'm only starting.

For my part, I'm doing the 100DaysOfReading challenge. I always wanted to start reading but I never took the time to do it. Thanks to this challenge, I'm on day 17, and already finished one and a half books.

My habit loop:

• Every day before lunch or before sleeping (the cue).
• I read 20 pages or more (the routine).
• I am approaching my long-term goal of reading daily. I am close to my short-term goal of finishing the book. It makes me happy because I have always wanted to read daily (the reward).
• I publish a quote from the book I'm reading with some explanations and motivational text on my Twitter (the commitment).

Here are some tips that can help you to create your programming habit.

Plan your tasks

To work every day and achieve my monthly goals, I plan all my tasks the evening before. I put on paper what I want to make, and every time I do it, I'll scratch it off my list. I recommend that you do this with your daily programming habit because it's going to motivate you and satisfy you a lot when you finish all your goals.

If you need more structure in your work, define what you are going to do, how, when, and why.

For example, I'm going to create a landing page for my website (what I'm going to do). I will use Vue.JS to build it (how). I will do it between 8am and 10am (when). It's going to help me better understand Vue.JS and help me to start getting my visitor's email addresses.

Code your dream project

What could be better than coding daily while working on the project of your dreams? If you need motivation, it's an excellent way to program every day. Don't be afraid to take the initiative. Doing it a little bit every day will motivate you even more and give you results in a short time.

Find the field you want to work in

The world of programming is vast – web, software, AI, embedded, and much more.

One of the significant difficulties is to define what you want to do as a programmer.

It's not easy for everyone, but choosing a topic and sticking to it can be a good motivation factor to practice daily.

For example, if you choose web programming, just focus on that. Even though it's still a big topic, you removed software, AI, embedded, and everything else. That's a good start.

To go further, you can choose between the front-end and back-end.

I'm telling you all this because often, when you start, you get demotivated fast because there are too many things, and you can't focus on a specific theme.

A good environment

Something that can motivate you in your daily programming habit is a pleasant working environment. I do not recommend working in your bed. You're going get tired easily.

Try to work at a desk or a table and do whatever you need to feel comfortable in that space. It will make you want to work more efficiently.

Further reading

If you are interested to know more about the habit process, I invite you to read The Power of Habit by Charles Duhigg. This book helped me a lot while writing this article, and a lot of the examples I gave you were inspired by it.

I've also heard about Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones by James Clear. This book offers a framework to improve your daily habits. The author tries to provide practical guidance on how to make changes.

Conclusion

Do you plan to make programming a daily habit? Are you going to commit to 100DaysOfCode?

Feel free to share this article if you liked it.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

Are you interested in mobile application development?

If your answer is yes, you are reading the right article! Maybe you don't know about Flutter yet, but don't worry – I wrote an article about what flutter is and why you should learn it this year.

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, this allows you to create a native mobile application with only one code. It means that you can use one programming language and one codebase to create two different apps (IOS and Android). – What is Flutter and Why You Should Learn It in 2020

In this post, I share with you two types of content, free or paid. I tried to find excellent resources to support every type of learner (videos, courses, books, tutorials, and so on).

Before we start, I also wrote an article about whether you should you learn to code with paid or free content - and why? If you don't know what type of content is the best for you, I recommend that you read that article before reading this one.

So let's get started. I tried to explain each resource with a small paragraph. All information came from the description of the associated website. As you can imagine, I haven't tried all these methods. If you need more details, I invite you to visit the linked website.

Free content

Videos/Courses

• Dart Programming Tutorial - Full Course

A freeCodeCamp full course on Dart.

Learn the Dart programming language in this complete tutorial for beginners. Dart is a strictly typed programming language that is used in the Flutter framework to develop cross-platform mobile apps. – Dart Programming Tutorial - Full Course

• Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps)

A freeCodeCamp full tutorial for beginners. This tutorial was one of my references when I started Flutter. It is an excellent introduction and helps you understand the first concepts that will be useful for you.

Learn Flutter, Google’s groundbreaking multi-platform mobile development framework, to create apps for Android and iOS. In this course, Nick Manning from Flutter Crash Course teaches you how to get up and running with Flutter quickly and effectively. Nick has been a Flutter engineer since 2017 and has boiled down this real-world know-how into a clear-cut, realistic, and step-by-step crash course. – Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps)

• Flutter Crash Course

A Traversy Media crash course on Flutter.

In this crash course we will look at Flutter for building native mobile apps. We will look at what Flutter is, how to get setup, built in widgets, stateless and stateful widgets, routing and more. – Traversy Media

• Flutter Tutorial for Beginners

A Youtube playlist on Flutter for beginners created by The Net Ninja.

You will discover how to use Flutter (and Dart) to create Android and IOS apps from scratch. You will learn all about widgets, packages, assets & asynchronous code to create a World Time app, as well as two other mini-apps to put your Flutter skills to good use! – Flutter Tutorial for Beginners

• Flutter & Firebase App Build

A Youtube playlist on Flutter and Firebase created by The Net Ninja. When I wanted to use Firebase in my first application, I first took this course. It was comprehensive and gave me a good understanding of how to integrate this tool with Flutter.

You will learn how to create a Flutter application from scratch, using Firebase Firestore (a real-time database) and Firebase Authentication. This playlist is for developers who already know Flutter. – Flutter & Firebase App Build

• Reso Coder

A Youtube channel dedicated to Flutter. Reso Coder created a lot of tutorials to explain how the framework works. Several tools you can use with Flutter are explained so that you can integrate them into your project. There are even lessons on code architecture for Flutter.

Flutter is changing the app development scene. Don't be left behind! Learn how to develop for cross-platform mobile & web. Learn from carefully crafted project driven lessons and immediately apply what you've learned in your own apps. – Reso Coder

• FilledStacks

A Youtube channel dedicated to Flutter. You will discover many tutorials on Flutter such as Firebase, UI, architecture and so on. There are mobile and web Flutter lessons as well.

Learn to build high quality production ready mobile apps using Flutter. – FilledStacks

• Code With Andrea

Tutorials about learning Flutter. Regular videos covering all things Flutter, including state management, layouts, testing, and more. This channel will help you to become a better Flutter developer. – Code With Andrea

Google Codelabs

You can also learn Flutter with the Google Codelabs website. The website provides a guided, tutorial-based, hands-on coding experience. I have just discovered this site. You can even use it outside of Flutter. It references all the Google technologies with many tutorials to help you use them.

Most codelabs will step you through the process of building a small application or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, Project Tango, and Google APIs on iOS. – Google Codelabs

Documentation

Something I love about Flutter is the documentation. It’s complete and can be helpful when you are learning or developing an application.

The documentation goes through many topics, such as:

• How to start with Flutter
• All the available widgets
• The API docs (libraries docs)
• A cookbook with a lot of tutorials
• Some examples of apps
• The Flutter Youtube channel

Books

• Flutter Succinctly

By searching through the Flutter documentation, I found this book. The author creates a fully functional app, which allows you to get a clear understanding of the framework. This book is accessible whether or not you have mobile development experience.

• Flutter Tutorials Handbook

This cookbook contains recipes that demonstrate how to solve common problems while writing Flutter apps. Each method is standalone and can be used as a reference to help you build up an application. It can be used in addition to the Flutter documentation. Many examples are listed there.

HereWeCode

I plan to create tutorials on Flutter soon. To stay up-to-date, you can follow the Youtube channel and Twitter. Feel free to let me know what topics and tutorials you want to see.

Paid content

Courses

• The Complete 2020 Flutter Development Bootcamp with Dart

This Flutter Bootcamp is officially created in collaboration with the Google Flutter team. You will learn from scratch and create a few applications. The course includes 27+ hours of video tutorials and projects. Even if you have zero programming experience, you can start it. – The Complete 2020 Flutter Development Bootcamp with Dart

• Learn Flutter & Dart to Build iOS & Android Apps [2020]

A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps. The basic programming language will help but is not a must-have. With this course, you will learn Flutter not only in theory but with the build of a complete realistic app. The app is going to use features like Google Maps, the device camera, animations, and more. – Learn Flutter & Dart to Build iOS & Android Apps [2020]

• Dart and Flutter: The Complete Developer's Guide

Everything you need to know for building mobile apps with Flutter and Dart, including RxDart and Animations! Previous programming experience with Javascript, Java, Python, or similar is required. In this course, you will understand how to design, create animations, and architecture an application with Flutter. This course appears to be more advanced than others; you will learn skills such as using offline storage, optimizing network requests, using advanced design patterns, and so on. – Dart and Flutter: The Complete Developer's Guide

• Flutter & Firebase: Build a Complete App for IOS & Android

In this course you will build a complete, real-world application for iOS and Android, by using Dart, Flutter and Firebase. This course starts from the basics, and includes a full introduction to Dart and Flutter. As you make progress, the course will introduce more advanced topics, with special emphasis on writing production-ready code, so that you can learn how to build robust applications that scale. Important concepts are explained with clear diagrams. So by the end of this course you will be a competent Flutter developer. – Flutter & Firebase: Build a Complete App for iOS & Android

? Books

• Learn Google Flutter Fast: 65 Example Apps

A complete book about Flutter. Learn Google Flutter by example with 65 example mini-apps. You will learn how to create everything from the most basic application to an advanced one with complex architecture. At the end of the book, the author explains to you how to publish your app on app stores.

• Beginning Flutter: A Hands-On Guide to App Development 1st Edition

This is an excellent introduction to Flutter so you can quickly get started and understand the fundamental principles. If you prefer to learn through books, don't hesitate!

Beginning Flutter: A Hands-On Guide to App Development is an essential resource for both experienced and novice developers interested in getting started with Flutter. It's an introduction to Flutter, step by step. This book is written by Marco L. Napoli, the CEO of Pixolini Inc. and an experienced mobile, web, and desktop app developer. He has a strong proven record in developing visually elegant and simple to use systems. – Beginning Flutter: A Hands-On Guide to App Development 1st Edition

Conclusion

Do you know other resources to learn Flutter? Send me a message on Twitter and I'll add them.

Feel free to share this article if you liked it.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

What Should You Choose - Paid or Free Content?

This question is widespread, and everyone has asked it at one point.

I've thought about it for a long time and have reviewed my habits to understand why someone would be more interested in paid rather than free content.

Most of the time paid content is qualified by:

• All-in-one content. You pay to get all the information in the same place (for example, on Udemy).
• More detail. When I pay for a book or a course, I expect a bunch of information from the creator. I want to really understand why and how to use something.
• A warranty on knowledge. You are guaranteed to know all the basic necessary information on a subject when you finish a course. Indeed, when I take a "Learn Flutter and Firebase with concrete examples" course, I know I will see all the critical concepts surrounding these two technologies. I'll also be able to develop a small application using these technologies. Sometimes, when I use YouTube for this kind of search, I don't get all the necessary details, and I need to find another video.
• Time savings. You don't have to search for other online resources. You can focus only on the course.
• Quality. Usually when you pay for content, the sound quality and recording are much better.
• Community support. People pay for content to support a creator, or to contribute to the development of a community. If you buy a course on a new technology, you encourage the creator to develop more resources on the technology.

My recommendations to learners

All types of content are great. I personally use both free and paid content at the same time.

I think certain types of people are more likely to choose one type of content over another.

If you choose primarily paid content:

• You are a beginner, and you know what you want to learn.
• You are a beginner, and you don't want to waste time searching for content or looking at many tutorials and videos to find a solution to your problem. DISCLAIMER: Being able to search for a solution to a problem in programming is a crucial concept. It will happen–one day you're going to have to look for content to solve a specific problem. If you use paid content, be sure you know how to search for potential errors yourself.
• You are a beginner, and you don’t know how to search for the right resources.
• You want to learn a subject quickly and globally to accomplish a task (for example, I watched a course on Instagram to launch HereWeCode on the social network) .
• You don't have a lot of time (for example, you need to learn a new technology for your company in one week).
• You like to read books and understand all the details of the technology.

If you choose primarily free content:

• You are a beginner, and you have a lot of time. In my opinion, this is the best way to learn how to code. For example, this works great if it's as a hobby or if you know you have 1-2 years to retrain yourself and find work. Nothing is better than taking your time to learn programming. I took almost 3 years to be comfortable in computer development and I still have a lot to learn. You'll feel like you're taking a long time, but I guarantee it's worth it. Searching, testing, failing, retrying and so on is the key to success.
• You have been a developer for some time, and you know how to search efficiently on Google.

Note that these profiles are only examples of people who may be inclined to pay for content or search for it for free. It's up to you to do what you want. I just hope this helps people decide what kind of content they should use.

A Case Study: My Own Learning Path

To show you that this subject is complex and very personal, I will tell you what I did.

I have been coding for more than three years. It's my hobby, and I like to share my knowledge to help people to learn how to code. These reasons pushed me to create HereWeCode.

Period with only free content

The goal of this period: Learn programming and critical concepts to be able to switch quickly from one language to another.

When I started to code three years ago, I was in a school with a project pedagogy. I learned development with online resources such as StackOverflow, YouTube, freeCodeCamp, and blogs.

This period was hard for me, but it was also exciting. It was an essential part of my life as a developer. By learning with free content, I was forced to search a lot and understand where I could easily find answers to my questions. Nowadays, I'm able to explore everything efficiently on the internet.

It may not seem like it, but searching on the internet is not easy for everyone. I can tell you because I'm teaching students on a French platform, and most of the time, the beginners don't know how to find the answer to fix an error.

Period with free and paid content

For one year now I've been using both types of content. And it just depends on my goals with each technology.

I like to use paid courses on Udemy when I want to learn quickly and have a showcase of that new technology.

For example, my Instagram course allowed me to understand a new social network, define a strategy, and deploy a professional account in a few weeks. I reached my goal with this course, which was to share a new type of content as soon as possible.

When I want to learn technology deeply, I like to read books. Most of the time, there are books with lots of details you can't find in any other content.

I still use free content daily to answer a question, find a code example, understand a specific concept in a few minutes, and so on.

Bonus: The Seemingly PAID but Actually FREE content

In my opinion, there is another type of content which I call "paid but free" content.

This is the name I've given to a platform offering free content with a premium paid quality.

There are very few of them, and the most famous is freeCodeCamp.

It's quite incredible to imagine that so many hours of training are free. You can even get certified!

I know people who have changed their lives thanks to freeCodeCamp, and all for free.

I'm writing this last paragraph to give thanks for the work done by the whole team and the contributors to the platform.

If you want to do a kind act and help develop free content, you can support freeCodeCamp.

"When you donate to freeCodeCamp, you help people learn new skills and provide for their families. You also help us create new resources for you to use to expand your technology skills." - freeCodeCamp's Donate Page

Conclusion

This topic is not easy to answer, and it's the first time I've discussed something like this. I'll be honest with you: I was scared when I hit the publish button. It's quite an engaging topic, and I'll be waiting for your opinions.

I think nowadays there are so many ways to learn new things. This diversity comes from the need to satisfy all different types of learners.

It's like when you were in school – some people learned by reading, others by drawing, reading aloud, answering quizzes, and so on.

Choose the content that best suits your situation and goals.

What type of content do you use? Do you sometimes switch between paid and free content? If so, why?

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

And no - fast.io didn't pay me or freeCodeCamp to create this article. We don't have any relationship with them. I'm just writing about this because I found their tool to be really exciting and useful for quickly hosting static websites for free.

Note: The information in this tutorial is now outdated, but this article stays here for posterity. Here are some helpful articles you may like on a similar topic.

What is Fast.io?

Fast.io is a solution created by Mediafire to simplify how the web works. In a few words, their goal is to make your life easier by making the web more accessible and manageable.

It was launched at the end of 2019, so I'm sharing it with you now.

How it works

When you use Fast.io, you will be able to connect to your cloud (Google Drive, DropBox, etc.), choose a website name, and deploy your content all in a few clicks.

If your content is ready, only 3 minutes are required to put your content online and make it accessible to everyone.

Once your website is online, you can configure it, add a custom domain name, and connect Google Analytics so you know how many people you are reaching.

I haven't mentioned this yet, but the service automatically updates your website once you modify the source files. For example, if you are using Google Drive to share your content, once you change something in your HTML page, it will be updated.

Fast.io - How it works

Available storage providers

Here's a list of available storage providers if I were to publish my website today:

• GitHub
• Dropbox
• Google Drive
• Box
• Mediafire
• OneDrive

As you can imagine, this list is going to grow as new services are added. But even now, you have many possibilities to host your static website.

Competitors

There are already a number of different companies who allow you to quickly get a static website online. The most famous solutions are GitHub Pages, Heroku, and Netlify.

I'm not necessarily saying that Fast.io is the best one, but I like how simple it is to deploy a basic website.

Quick note: if you want to deploy something more complex – like a Python Flask website – you can't do it with Fast.io. In this case, I highly recommend using Heroku.

As I told you, I'm going to be transparent with you. Fast.io an excellent service for certain tasks.

What is a static website?

Before showing you how to deploy your website, I think it's essential to define what a static website is and what the differences are from a dynamic site.

A static website contains web pages with fixed content. The content of your page is in HTML, and all users see the same thing.

For example, you can use this type of site when you want to do a landing page for your website (a basic page with information about your product).

The main difference between that and a dynamic website is, of course… the dynamic part!

A dynamic website uses a server technology to build the page when a user requests the website.

For example, you can use this type of site for your blog. Every time you add a new article to your database, the website will display it.

It’s time to deploy your website

Are you ready to share your page with everyone? Let’s do it!

In this part, I will show you how to put your website online in a few clicks. I’m going to use a basic HTML page, but once you understand how Fast.io works you are free to modify everything.

1) Create a index.html file

You need to create an index.html file with your HTML code inside. I recommend that you to start with something simple because you can always update it later.

Save the file on your computer.

<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
  </head>
  <body>
    <h1>My Static Website</h1>
    <p>
      Hello, I'm online, and everyone can see me!
    </p>
  </body>
</html>

2) Open the Fast.io homepage

Fast.io homepage

All you need to do to start with Fast.io is open the website. Once you've done that, click on "Sign up now - it's free!".

3) Configure Google Drive

Fast.io - Storage provider

This page appears after step 2 and allows you to select a storage provider. Select "Google Drive".

If you want to create a website with another provider, you can do that later by adding it through your account page.

Fast.io - Connect Google Drive

Fast.io needs access to your Google Drive account to work. They will create a "Fast.io" folder to contains your website(s). Click on "Connect Google Drive Now".

Fast.io - Select your Google account

You need to select your Google account to link it with Fast.io.

Fast.io - Allow Fast.io to access Google Drive

You need to allow Fast.io to access your Google account to link it correctly.

Fast.io - Create your account

Your account is now ready, so just choose a password and then click on "Create Account".

Fast.io - Welcome page

When your account is ready, a "Welcome to Fast!" page will appear. Click on "Let's begin!".

4) Create your website

Fast.io - Dashboard

You are ready to create your website and share it with everyone! Click on "Add New Site".

Fast.io - Choose a website name

Choose your website name and type it in the input box. When you've finished, click on "Next".

Fast.io - Choose a website type

Fast.io allows you to create three website types: a File Sharing website, a Web Page, or a Files Browser website.

In our case, we will select "Web Pages" because we want to host an HTML web page.

If later you want to create a website to share some documents, you have to go back to your dashboard, create a new one, and select File Downloads.

Fast.io - Choose a storage provider for your website

Once you clicked on "Web Pages", you need to select your storage provider. Click on "Google Drive".

Fast.io - Choose your website URL

Choose your website URL and type it in the input box. When you've finished, click on "Create Site".

Fast.io - Successfully created website

You did it! Your website is online and available at the URL you chose. In my case, you can find my site on mygoogledrivewebsite.imfast.io

5) Upload your index.html

If you open your website, you may notice an error because you didn't upload your index.html file on your Google Drive.

Here are two ways to do that:

• Open your Google Drive and search for the Fast.io folder, then the folder of your website (in my case, "mygoogledrivewebsite.imfast.io").
• On the step 4 success page, click on "See your Google Drive".

Fast.io - Google Drive before upload

Once you've done that, right-click with your mouse and select "Upload files". A new window will open, find your "index.html" file - select it.

Fast.io - Google Drive after upload

Wait for a little bit before the change appears on your website.

6) Celebrate!

Fast.io - Website demo

Spread the word to all your friends! Your website is live and everyone can see it!

? Share it on Twitter by clicking here! ?

7) Bonus

If you are curious and want to configure everything, you can go back to your dashboard and click on your website.

You will be able to link your website to Google Analytics (visitors statistics), change your domain name (for example, mywebsite.com), and a lot more!

Conclusion

What do you think of this new service? Did you find it fast and easy?

Feel free to share this article if you liked it.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

###

What is Flutter?

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

Flutter consists of two important parts:

• An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
• A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.

To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.

Dart focuses on front-end development, and you can use it to create mobile and web applications.

If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript.

“Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.” - Google, flutter.dev

Why you should learn Flutter?

I selected some of the reasons why I like Flutter and why I want to use it next year. I will give you details and my feedback below.

Companies using Flutter

Simple to learn and use

Flutter is a modern framework, and you can feel it! It’s way simpler to create mobile applications with it. If you have used Java, Swift, or React Native, you'll notice how Flutter is different.

I personally never liked mobile application development before I started using Flutter.

What I love about Flutter is that you can create a real native application without a bunch of code.

Quick compilation: maximum productivity

Thanks to Flutter, you can change your code and see the results in real-time. It’s called Hot-Reload. It only takes a short amount of time after you save to update the application itself.

Significant modifications force you to reload the app. But if you do work like design, for example, and change the size of an element, it’s in real-time!

Ideal for startup MVPs

If you want to show your product to investors as soon as possible, Flutter is a good choice.

Here are my top 4 reasons to use it for your MVP:

• It’s cheaper to develop a mobile application with Flutter because you don’t need to create and maintain two mobile apps (one for iOS and one for Android).
• One developer is all you need to create your MVP.
• It’s performant – you won't notice the difference between a native application and a Flutter app.
• It’s beautiful – you can easily use widgets provided by Flutter and personalize it to create a valuable UI for your customers (you can find examples of applications made with Flutter below).

Flutter App Example - ToDo List

Good documentation

It’s important for new technology to have good documentation. But it’s not always the case that it has it!

You can learn a lot from Flutter's documentation, and everything is very detailed with easy examples for basic use cases. Each time I’ve had a problem with one of my widgets in my code, I have been able to check the documentation and the answer was there.

Flutter Documentation Architecture

A growing community

Flutter has a robust community, and it’s only the beginning!

As you may know, I love to share my knowledge and useful content on programming on my website. I need to know I’m working on a technology full of potential with a lot of backers.

When I started using Flutter, the first thing I did was search for communities, and to my surprise… there are a considerable number of places to exchange info on Flutter.

I will give you some examples of places I love to check daily. Feel free to send me a message on Twitter with your suggestions.

• Flutter Awesome: An awesome list that curates the best Flutter libraries and tools. This website publishes daily content with lots of examples, application templates, advice, and so on.
• Awesome Flutter: A GitHub repository (linked to Flutter Awesome) with a list of articles, videos, components, utilities, and so on.
• It’s all widgets!: An open list of apps built with Flutter.
• Flutter Community: A Medium publication where you can find articles, tutorials, and much more.

Supported by Android Studio and VS Code

Flutter is available on different IDEs. The two main code editors for developing with this technology are Android Studio (IntelliJ) and VS Code.

Android Studio is a complete software with everything already integrated. You have to download Flutter and Dart plugins to start.

VS Code is a lightweight tool, and everything is configurable through plugins from the marketplace.

I use Android Studio because I don’t need to configure a lot of things to work.

You are free to choose your preferred IDE!

Bonus

Freelance

If you want to start doing some freelance work, you should think about using Flutter.

In 2020, I believe that this technology is going to explode. And that means a lot of people are going to search for developers who know how to use it.

The biggest platform for freelancers in France, called Malt, recently published the tech trends of this year. Flutter has grown by +303% on this platform between 2018 and 2019.

Flutter statistics - Malt

Conclusion

Well, what do you think of Flutter? Will you start learning it next year?

I hope that this introduction has interested and motivated you. Feel free to share this article if you liked it.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a full stack developer!

###