Forem: daily.dev

Upcoming TED-like events for developers

Nimrod Kramer — Sun, 16 May 2021 16:07:44 +0000

The Monthly Dev: World-Class Talks by Expert Developers

The Monthly Dev is a series of online events brought to you with love by daily.dev. It's a place for software engineers to gather and hear world-class talks, once a month.

Upcoming Events 🦄

The Monthly Dev 5 (May 2021) - RSVP Below 🚀

Redux, Career advise for devs, and freeCodeCamp

Mark Erikson - Redux maintainer
Emma Twersky - DevRel at Google
Quincy Larson - Founder of freeCodeCamp.org

➜ RSVP to the event

The Monthly Dev 6 (June 2021) - RSVP Below 🚀

An event in collaboration with Microsoft Reactor and GitHub

➜ RSVP to the event

The Monthly Dev 7 (July 2021) - RSVP Below 🚀

Developer Experience, AWS Amplify, and React Query

Inian Parameshwaran - Engineering at Supabase
Tanner Linsley - Co-Founder at Nozzle and OSS fanatic (React Query)
Ali Spittel - Leading Developer Advocacy at AWS Amplify

➜ RSVP to the event

See you there!

Creating a Killer GitHub Profile README Part 2

Braydon Coyer — Mon, 01 Feb 2021 13:59:52 +0000

Welcome to part 2 of this article series where I show you how to create a killer GitHub profile!

If you haven't read part 1, click here and follow along before reading this article.

In the previous article, I documented my process for building out my README.template.md file.

I added sections for an intro, latest blog posts, pinned repositories, GitHub stats, skills and a skeleton section for an Office quote.

In this second article and final issue in this series, I will add the dynamic content injection and will get you familiar with GitHub Action workflows!

Prepping for the Magic

Now that the README.template.md file is complete, I started working on the fun part — the dynamic injection.

There are two main portions of the file that need dynamic content injection — the blog section and The Office quote section.

Listing recent blog articles is the easy part — that functionality was built for me (see the linked tutorial in the previous article) and I just needed to hook up the workflow.

The Office quote, however, required a little more effort because I needed to create the functionality myself. For something simple like making an API request, I decided to create a simple node script to handle the operation.

At the root of my repository, I created a new file called index.js.

The index.js File

There are four steps this file needs to complete:

Create a variable to reference the README.template.md file
Make the request to The Office API
Look through the README.template.md content and replace the static patterns ({office_quote} & {office_character}) with the dynamic result of the API request
Create/replace the contents of the README.md file with the updated README.template.md reference variable.

Thinking about these responsibilities, I imported the required dependencies in the index.js file.

require("isomorphic-unfetch");
const { promises: fs } = require("fs");
const path = require("path");

To complete step one, I declared an async function called main , grabbed a reference to the template file and placed it in variable named readmeTemplate.

async function main() {
    const readmeTemplate = (
        await fs.readFile(path.join(process.cwd(), "./README.template.md"))
    ).toString("utf-8");
}
main();

The next step is to make the API request. Below the readmeTemplate variable, I created a request to The Office API and assigned the result to a variable called office_quote.

const office_quote = await (
    await fetch("https://officeapi.dev/api/quotes/random")
).json();

The third step is to replace the patterns in the template file with the dynamic content retrieved from The Office API.

const readme = readmeTemplate
        .replace("{office_quote}", office_quote.data.content)
        .replace("{office_character}", `- ${office_quote.data.character.firstname} ${office_quote.data.character.lastname}`)

Finally, I create/replace the contents of the README.md file with the readmeTemplate variable.

await fs.writeFile("README.md", readme);

At this point I could run node . at the root of my repository and the index.js file worked its magic. Opening the README.md file, I saw the dynamic quote at the bottom of the file.

If you want to reference my full index.js file, click HERE.

Creating the Workflow

The index.js file, by itself, isn't very helpful because I need to run the file every time I want the quote to update. How do I have the file run automatically? GitHub Actions.

Setting up a GitHub Action workflow is easy if I have the correct file-structure; I don’t need to do anything on GitHub’s website to get it working.

I created the following directories and file at the root of my repository:

- root
  - .github
      workflows
        dynamic-injection-workflow.yml

Next, I opened the dynamic-injection-workflow.yml file, named the workflow and added some instruction on when the workflow should run. I scheduled a cron job to run this workflow every hour so new blog posts are fetched frequently and visitors get a new Office quote with regular cadence.

name: Dynamic README injection
on:
  schedule: # Run workflow automatically
    # This will make it run every hour
    - cron: "0 * * * *"
    # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly

Now that I have basic structure in the workflow, I need to define jobs for the workflow to run.

The order of these jobs matter (more on that in a second), so I created the first job to get an Office quote.

name: Dynamic README injection
on:
  schedule: # Run workflow automatically
    # This will make it run every hour
    - cron: "0 * * * *"
    # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
jobs:
  get-office-quotes:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Let the magic happen
        uses: actions/setup-node@v1
        with:
          node-version: 14.6.0

      - run: yarn

      - run: node .

      - name: Add to git repo
        run: |
          git config pull.rebase false
          git pull
          git add .
          git config --global user.name "Your Name"
          git config --global user.email "Your E-Mail"
          git commit -m "[Automated] README updated with new Office quote!"
      - name: Push
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

Notice that the job runs node . at the root of the project, causing the index.js file to execute, fetch the quote, and take everything in the README.template.md file and copy it over to the README.md file. This, in and of itself, isn't enough for the updated information to show up on my profile. I need to commit and push the changes to my repository, which is why I added he Add to git repo step.

Now that the README.md file contains an Office quote and everything else in the README.template.md file, I can run the final job to fetch my updated blog posts (Remember, the README.md file now contains the static blog post pattern we created in the previous article).

name: Dynamic README injection
on:
  schedule: # Run workflow automatically
    # This will make it run every hour
    - cron: "0 * * * *"

  workflow_dispatch:
jobs:
  get-office-quotes:
    # job steps
        ...

  update-readme-with-blog:
    needs: get-office-quotes
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # Replace this URL with your rss feed URL/s
          feed_list: "https://braydoncoyer.hashnode.dev/rss.xml"

Because of the way that Gautam Krishna R's GitHub action works, this job must run after I inject an Office quote — if it doesn't, it will write over the content in the README.md file and delete the quote. Thankfully, GitHub Actions has a needs property that I added to the workflow so that it only activates after the get-office-quotes workflow has completed its steps.

The dynamic-injection-workflow.yml file is now complete. I committed my changes and pushed them to my GitHub profile repository.

GitHub recognized that I added a workflow and I can see it listed under Actions > All workflows.

To manually run the workflow and to test to see if it was working, I clicked on the 'Run workflow' dropdown button and then had the workflow run on the main branch. (Remember, the cron job will run this automatically every hour.)

After the workflow successfully completed both jobs, I went back to my profile to see the final result!

Conclusion

There we go! You should now have all of the tools required to make a killer GitHub profile README!

Don't forget that your profile on GitHub is like your portfolio -- use it as a platform to highlight what makes you unique as a developer!

When you've finished created your own GitHub profile README, send me a link in the comments below! I'd love to check it out!

Thanks for reading!

Daily delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Creating a Killer GitHub Profile README Part 1

Braydon Coyer — Tue, 19 Jan 2021 17:19:15 +0000

README's. You know, those markdown files that get created when you generate a new project or create a GitHub repository. Perhaps you're a developer who updates the README file for each project you work on. Or maybe you're a developer who leaves the boilerplate content inside.

As of July 2020, GitHub now allows developers to create a profile-level repository and use the README to add some personality to their page.

I've known about this for a few months now but only recently dove in. And, well... I may have gone a bit overboard.

Check out my GitHub profile here.

Many developers, I believe, inject a bunch of 'cool' widgets and badges in their profile instead of realizing that their GitHub profile is very much like a portfolio — it should highlight what makes you unique.

There are many articles and tutorials on the web (some linked throughout this article) that show you how to add basic information to your README.md file — images, badges and statistics. But I wanted something a bit more personal; I wanted a unique profile that accomplished a few things:

Provided a route for visitors to find my other social outlets
Highlighted my most recently published articles
Displayed pinned repositories in a visual-appeasing fashion
Allowed visitors to see some of my GitHub statistics
Listed some of my skills for those interested or for future employers
End the experience with something a bit more fun; a quote from an API I built.

I encourage you to make your own list — what do you want on your profile? How is it going to highlight what makes you unique?

In this two-part article series, I will walk through, step by step, how I created my profile so that you can make your own README.md file stand out from the crowd.

Understanding Limitations

If you're new to markdown files in general, it's important to have a high-level idea of what we'll be doing. After all, you can't provide solutions without understanding limitations.

I knew that I wanted basic content and information in my README — things like images, headings, badges that redirect users when clicked and even graphs and widgets that display GitHub statistics. Tutorials are scattered across the internet and make implementing these things relatively easy.

But I also knew I wanted my README to be dynamic; I wanted it to automatically fetch my most recent blog posts and to display a quote from The Office API that I built. This is where things get tricky. Markdown files can't make API requests on their own, so how would I inject content dynamically?

GitHub Actions. These built-in repository pipelines allow developers to automate tasks and workflows and is what I used to fetch blog posts and request a random quote from my API. These workflows can trigger files or functions to obtain information and inject the content into my README. I assigned a cron job to run the workflow every hour so my profile is always up-to-date with new articles and visitors get a fresh quote each time they visit my profile.

There's a few 'gotchas' with this implementation that we'll discuss in the next article, but I hope this gives you a high-level overview of how we'll approach the problem.

Create Your Profile Repository

Go to GitHub and create a new repository that has the same name as your GitHub username. My username is braydoncoyer, so I created a repository with the name braydoncoyer. If you’ve done this correctly, GitHub will display a secret message (pictured below).

I set the repository access to private until I was ready for the world to see it, but feel free to make it public if you want.

I also initialized the repository with README.md and .gitignore files.

NOTE: The screenshot below is giving me an error because I've already created a profile-level repository. You shouldn't see this error. Also, if you didn't know, GitHub recently shipped dark mode.

Once I created the repository, I cloned it down and opened it in my favorite editor.

Create a README Template

Although I initialized the repository with a README.md file, I quickly found out that I needed to edit my content in a separate file and use it as a template — a skeleton of static content that will be used to construct the final README.md file. There are several reasons for this, but here are two of the most important:

Eventually, the GitHub Actions workflow will trigger files that will use the template, inject the dynamic content and then take the entire template and paste it in the README file.
If you're editing the README.md file directly, you're going to have LOTS of merge conflicts after the dynamic injection performs its magic.

With that said, at the root level of my repository, I created a new file called README.template.md. This is the file I will be editing manually.

Banner Image

I decided I wanted visitors to be greeted with a nice banner image that directed visitors to my portfolio when it was clicked.

I opened Illustrator, created a 1500x500 document and designed the banner image according to my personal style.

Back in my repository, I created a new root-level directory named assets , placed the image in the folder and consumed it in the README.template.md file.

[![Braydon's GitHub Banner](./assets/GitHubHeader.png)](https://braydoncoyer.dev)

Social Badges

One of my goals with my GitHub profile README is to direct visitors to my other social networks (Twitter, LinkedIn and CodePen, specifically).

To do that, I made sure I had social badges listed at the top of the profile so that it's one of the first things visitors see.

To create these badges, I used shields.io and edited the badge text, badge color and destination URL.

I thought it would also be fun to keep a track of my profile visits, so I created a badge and listed it next to the social badges.

To create your own visits badge, copy the 'Visits Badge' markdown content below and change the repository destination in the URL (everything after '/visits/').

[![Visits Badge](https://badges.pufler.dev/visits/braydoncoyer/braydoncoyer)](https:braydoncoyer.dev)
[![Twitter Badge](https://img.shields.io/badge/Twitter-Profile-informational?style=flat&logo=twitter&logoColor=white&color=1CA2F1)](https://twitter.com/BraydonCoyer)
[![LinkedIn Badge](https://img.shields.io/badge/LinkedIn-Profile-informational?style=flat&logo=linkedin&logoColor=white&color=0D76A8)](https://www.linkedin.com/in/braydon-coyer/)
[![CodePen Badge](https://img.shields.io/badge/CodePen-Profile-informational?style=flat&logo=codepen&logoColor=white&color=black)](https://codepen.io/braydoncoyer)

The Introduction Section

Believe it or not, the banner image and social badges don't take up that space. Now that visitors have an optional route to see my other social networks, they need to know a little about me.

I only wrote a small blurb for the introduction. If visitors want to know more about me, they can find that information on my portfolio website or LinkedIn profile. Don't make the mistake of overwhelming visitors with too much information.

At the end of the introduction, I present the visitor with a call-to-action to visit my portfolio website — again, I don't want to overwhelm the visitor, but rather give just enough information about me and provide a way for them to read more if they desire.

Latest Blog Posts

Next, I want visitors to see my most recent blog posts. This needs to be dynamic and updated with regular cadence. The hard work will eventually be delegated to a separate file that the GitHub Action workflow will run, but in order for that file to know where to inject the content, it requires a certain pattern in the template.

For now, I put the following under the blog post section:

<!-- BLOG-POST-LIST:START -->

<!-- BLOG-POST-LIST:END -->

To inject my blog feed into the README.md file, I followed Darsh Shah's article How to Add Your Recently Published Articles to Your GitHub Profile README using GitHub Actions 🤖

Pinned Repositories & GitHub Stats

Along with my most recent blog posts, I wanted to shift the spotlight to a few of my other repositories and display some statistics. To accomplish this, I used Anurag Hazra‘s GitHub ReadMe Stats - The content you retrieve from his API can be wrapped in an <img> tag and styled in various ways. The documentation is easy to follow; I encourage you to check it out!

<!-- Pinned Repositories -- >

<a href="https://github.com/braydoncoyer/tailwindcss-v2-dark-mode-template">
  <img align="center" style="margin:1rem 0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=tailwindcss-v2-dark-mode-template&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<br>

<a href="https://github.com/braydoncoyer/ng-limeade">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=ng-limeade&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<a href="https://github.com/braydoncoyer/officeapi">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=officeapi&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<!-- GitHub Stats -- >

<a href="https://github.com/braydoncoyer">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/top-langs/?username=braydoncoyer&hide=html,css&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<a href="https://github.com/braydoncoyer">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api?username=braydoncoyer&show_icons=true&line_height=27&count_private=true&title_color=ffffff&text_color=c9cacc&icon_color=4AB097&bg_color=1A2B34" alt="Braydon's GitHub Stats" />
</a>

Skills

Next, I needed a way to show visitors my skills as a full-stack web developer. I didn't want to put my skills in an unordered list; it would take up a lot of space on the page and the unordered list doesn't provide much of a stylish flare.

Instead, I used badges from shield.io and displayed the badges inline on the page, using the same background color as the banner image to keep design consistency throughout the profile.

Because I wanted to list a lot of skills, I decided to have some core-skills displayed by default, and optionally show more skills using a <details> tag.

[](https://img.shields.io/badge/Code-Angular-informational?style=flat&logo=angular&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Code-Ionic-informational?style=flat&logo=ionic&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Code-React-informational?style=flat&logo=react&logoColor=white&color=4AB197)
...

<details>
<summary>More Skills</summary>

[](https://img.shields.io/badge/Style-CSS-informational?style=flat&logo=css3&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Tailwind-informational?style=flat&logo=Tailwind-CSS&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Sass-informational?style=flat&logo=Sass&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Stylus-informational?style=flat&logo=Stylus&logoColor=white&color=4AB197)
...
</details>

To see the full list of badges I used in the README.template.md file, click HERE.

The Office Quote

Before visitors leave my profile I wanted to end their experience with something unique and with a personal touch. Very much like the blog post section, a GitHub Action workflow will run a script that will look for a pattern in the README.template.md and inject a random quote.

I put the following pattern in the Office quote section:

<p>{office_quote}</p>

<p>{office_character}</p>

Check back at the top of the hour for a new quote!

With that, the static content is complete and satisfies the goals I listed for my profile.

Conclusion

In the next article, I’ll show you how I created my GitHub Action workflow and injected the dynamic content into the README.md file!

Thanks for reading! If you liked this article and want more content like this, subscribe to my newsletter and make sure to follow me on Twitter!

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Train a Neural Network to Count, with Javascript & Dannjs

Matias Vazquez-Levi — Thu, 14 Jan 2021 15:38:08 +0000

Counting is pretty intuitive for us humans, not as much for neural networks. This is why you are here, learning to build your first neural network with Dannjs. Using some machine learning concepts, we are going to build a neural network in JavaScript that learns to count number after number. Dannjs is a new open-source library that allows for the simple implementation of neural networks in your projects.

Making a neural network yourself is a good way to familiarise yourself with the concept itself. This is also relatively simple to do. The library we will use, Dannjs, makes it even easier to have clean and simple code.

Prerequisites:

Nodejs
Dannjs
Some abstract knowledge about Neural Networks

Let’s understand the basics of binary numbers first.

To teach our Neural Network to count, we will translate our well-known integers into binary data (4-bits). Each bit is going to correspond to one input/output neuron in the neural network.

Ideally, we want to train our network to output the next number we feed it. For example, If we feed the network [0,0,0,1] we want it to output [0,0,1,0]. Since there are only 4 spaces for boolean information, our model will only count up to 15, which is equal to 1111 in binary. You could try adding more inputs and outputs to your model. In this case, your dataset would have to be bigger to accommodate 5 bits of information.

Project Setup

First off, we’re going to install Dannjs locally in our project directory.

npm i dannjs

We would now need to require the node module we installed in our main js file.

const Dannjs = require('dannjs');
const Dann = Dannjs.dann;

Creating the Neural Network

This is how we would create the neural network. We are giving it 4 input neurons for the 4 bits of binary data to input. We are also going to give it 4 output neurons for the 4 bits of binary data the model is going to have to output.

const countingNN = new Dann(4,4);

We now need to add some hidden layers. I’ve found that 16 neurons worked well enough. You could experiment with this value later. A hidden layer is basically a neuron layer that can perform computations. The name ‘hidden’ comes from the fact that you do not need to see the values of each neuron, unlike the input/output layers. You can learn more about hidden layers & the basics surrounding it here. We are also going to set the activation function to 'leakyReLU' , activation functions are also explained in the link above.

const countingNN = new Dann(4,4);
countingNN.addHiddenLayer(16,'leakyReLU');
countingNN.lr = 0.01;

Technically, we have finished the creation of our model by now. We could test it right away with the Dann.log(); command or by feeding the model some 4-bit data.

countingNN.log();
countingNN.feedForward([0,0,1,0],{log:true});

The log function displays information about the model we just created. We also specify in the feedForward options that we want to log the predictions of the model.

Dann NeuralNetwork:
  Layers:
    Input Layer:   4
    hidden Layer: 16  (leakyReLU)
    output Layer: 4  (sigmoid)
  Other Values:
    Learning rate: 0.01
    Loss Function: mse
    Latest Loss: 0

Prediction:  [0.5398676880698,0.6730987170697,0.6748741672290,0.6377646387674]

We can see that this gives us some random predictions. Obviously, this was going to happen because we never trained the model… In order to train our model, we need some sort of dataset telling the neural network what to output according to what input is given.

Setting up the Dataset

To train the model, we’re going to need a dataset. Here is a lightweight js dataset for 4-bits binary counting. It basically looks like this:

const dataset4bit = [

    //...
    {
        input:[1,0,1,0],
        target:[1,0,1,1]
    },
    //  {
    //      input:[1,0,1,1],
    //      target:[1,1,0,0]
    //  },
    {
        input:[1,1,0,0],
        target:[1,1,0,1]
    },

    //...
];

You can access the dataset here

We can see that this dataset contains one number x in 4-bit binary, as the input value and the number x+1 in 4-bit binary as the target value. I commented out the element [1,0,1,1] so we can have a test sample the neural network has never seen. To access the data, we can copy the code included in the GitHub gist above and save it in binaryCountData.js in the same directory as our project. We can then require the file:

const dataset = require('./binaryCountData.js').dataset;

We can now access the data this way:

dataset[i].input
dataset[i].target

Now that we have access to the dataset let’s apply it by calling Dann.backpropagate(); for each data point in our dataset array. This will tune the weights of the model according to the data you give it.

for (data of dataset) {
    countingNN.backpropagate(data.input,data.target);
}

This counts as 1 epoch. We iterated through every element in our dataset once. Sadly, 1 epoch is not enough for a Neural Network to train properly. We would need to perform multiple epochs in order to achieve satisfying results. Let's also add a Dann.feedForward(); to test what the model outputs after training.

const epoch = 100000;
for (let e=0; e < epoch;e++) {
    for (data of dataset) {
        countingNN.backpropagate(data.input,data.target);
    }
}

countingNN.feedForward([1,0,1,1],{log:true});

And after training 100 000 epochs, it outputs:

Prediction:  [0.999884854,0.9699951248,0.020084607062,0.008207215405]

We made it! We can see that it guesses pretty close to [1,1,0,0], which is a good answer.
This is what the final js code should look like:

const Dannjs = require('dannjs');
const Dann = Dannjs.dann;
const dataset = require('./binaryCountData.js').dataset4bit;

const countingNN = new Dann(4,4);
countingNN.addHiddenLayer(16,'leakyReLU');

countingNN.lr = 0.01;

countingNN.feedForward([1,0,1,1],{log:true});
const epoch = 100000;
for (let e=0; e < epoch;e++) {
    for (data of dataset) {
        countingNN.backpropagate(data.input,data.target);
    }
}
countingNN.feedForward([1,0,1,1],{log:true});

In this tutorial, we trained a neural network to count binary integers. We learned how binary numbers worked in order to digitalize them into our neural network. We then learned how to use Dannjs, the new neural network library that just came out, without any prerequisite ML knowledge. Feel free to tweak all the settings you want, experiment, play around, you’ll eventually get a grasp of what affects what. The only source of knowledge is experience.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

🔥 What's Hot in Web Development? — Weekly Picks #162

Ido Shamun — Wed, 13 Jan 2021 13:26:16 +0000

Every week we gather the best articles on daily.dev.
This week is highly focused on React but not only. You can find in this list awesome cheatsheets. Are you looking for a new job? We got you covered with a post about the current hiring trends. And much more. Shout out to all the authors. 👏

So, let's get it started.

How to Learn React in 2021: The 7 Skills You Need To Know

⚛️ An opinionated list of steps towards learning react. It focuses mainly on learning the fundamentals of both the browser and react.

How to Learn React in 2021: The 7 Skills You Need To Know

FlexBox Cheat Sheets in 2021 || CSS 2021

🧘‍♀️ A CSS flexbox guide with all the different properties explained with beautiful cartoons.

FlexBox Cheat Sheets in 2021 || CSS 2021

My Guide to the 8 Best Dev Tools in 2021

👨‍💻 A list of dev-tools grouped by categories that include frontend, business logic, data, and source control.

My Guide to the 8 Best Dev Tools in 2021

Smart Developers Don't Code

🐫 A well-written introduction to Apache Camel and CamelK. They will help you build quickly enterprise integrations on top of Kubernetes and JVM.

Smart Developers Don't Code

Coolest 25+ Web Design Trends In 2021, that'll rock the world

🔥 If you are into web design, check out this comprehensive list of design trends. You might find it useful.

Coolest 25+ Web Design Trends In 2021, that'll rock the world

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

The React Cheatsheet for 2021 (+ Real-World Examples)

📝 A handbook for react beginners with all the relevant information divided into categories.

The React Cheatsheet for 2021 (+ Real-World Examples)

5 JavaScript Tools to Look Out For in 2021

👀 Although it sounds clickbaity, I found this list very useful. It includes Rollup.js, Snowpack, Rome, esbuild, Waypoint, and some bonus tools.

5 JavaScript Tools to Look Out For in 2021

Intro to React Server Side Rendering

🤖 Usually, when we want to develop a react SSR application we will use Next.js. But have you wondered how to build an SSR application from scratch? Check out this excellent article.

Intro to React Server Side Rendering

The most valuable software developer skills to get hired now

👨‍💼 A review of the current trends in hiring. It covers the request and demand for different skills and programming languages.

The most valuable software developer skills to get hired now

5 reasons to start using TailwindCSS

🎨 If you're searching for a new CSS framework, read this article. It will surely motivate you to try out TailwindCSS.

5 reasons to start using TailwindCSS

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

Why we started The Monthly Dev

Nimrod Kramer — Mon, 11 Jan 2021 07:07:35 +0000

Short background

Last week we launched a new series of online events by daily.dev called The Monthly Dev.

That might seem a bit strange for some people. We already got some curious questions from our community about this initiative like:

Why would a developer tool like daily.dev that is completely automated start running online events?
How does The Monthly Dev is integrated into the daily.dev strategy?
What do you expect to achieve from The Monthly Dev?

All are great questions, and therefore I decided to write about them :)

TL;DR

We took some inspiration from TED. We thought, what if we can make "TED for developers"? That would be super cool and refreshing! We wanted to bring a monthly series of online events but with a different vibe.

Our mission

The amount of content that is being created every day is insane. We think that by now, it has already gotten out of control. daily.dev aims to make it super easy and simple for developers to stay updated on the latest programming news. That's why we wake up energized every morning. ⭐️

Consistency is key

We believe that besides having a tool like daily.dev to help you stay updated consistently, we should encourage other consistent behaviors. Staying updated can be done on a daily, weekly, monthly, and even yearly basis. All are different resolutions for the same habit that can make us better at what we do.

As of today, we mostly focus on staying updated daily. That is still our main focus at daily.dev. However, we want to explore a new area of monthly updates. That's is why we started The Month Dev.

What's unique about The Monthly Dev?

For a while, we observed what kind of online events are being held worldwide. We wondered what's missing and how can we take it to the next level? We still don't have the final answer, but we saw that there's a lack of consistency once again.

There are many events out there, but:

Not many of them are worth the while. Either poorly organized or not professional enough. Good events are hard to spot.
It's hard to know in advance if an event is going to be good or not. By the time we realized the answer, it's already too late.
In many cases, the best events are biased and over-promotional. Usually, those events are organized by some of the tech giants who want to push their tech to the market.

Therefore, we wanted to see if we can create a recurring event that would be great, non-biased, and consistent. That way, developers would finally have a monthly thing they can trust to provide them with the inspiration they want without caring about all the hassle mentioned above.

The Monthly Dev's DNA

We took some inspiration from TED. We thought, what if we can make "TED for developers"? That would be super cool and refreshing! We wanted to bring a monthly series of online events but with a different vibe.

Although we still look at it as an experiment, we decided on several guidelines for our events:

It will feature only world-class speakers that come with massive credentials
It will be free
It will be open to everyone. No matter if you're using daily.dev or not
It will be fun and full of surprises

See you there?

Our first event will be held on January 26, 10 AM PST. It will be live-streamed so that you can watch it from your favorite streaming platform.

It's entirely free for everyone, but we do appreciate it if you can RSVP in advance 🌈 It would help us make better preparations for the event. 🤗

Here's the link to RSVP: https://www.eventbrite.com/e/the-monthly-dev-1-by-dailydev-registration-133820993193

🔥 What's Hot in Web Development? — Weekly Picks #161

Ido Shamun — Wed, 06 Jan 2021 13:25:46 +0000

🌟 This week we have many excellent walkthroughs. Short articles that aim to give you enough knowledge to solve a specific task. But that's not all, check out this awesome list.
As always, all posts were ranked by daily.dev community. Shout out to all the authors. 👏

So, let's get it started.

Design v18

😱 CSS-Tricks features a new design! Chris shares the story of the redesign including all the nitty-gritty.

Design v18

How to Design a Web Application - A Guideline on Software Architecture

👷‍♂️ A comprehensive review of software architecture patterns and when to use them.

How to Design a Web Application - A Guideline on Software Architecture

How I built my own productivity app

🚀 The author explains what it takes to build your own product at a high level. It's a short article.

How I built my own productivity app

A list of actually useful Nocode tools and I am not talking about site builders

🙅‍♀️ No-code or low-code platforms can be very useful even for developers. Usually, you will have to sacrifice flexibility for agility. Here's a curated list of brilliant tools.

A list of actually useful Nocode tools and I am not talking about site builders

Creating Browser Notification in JavaScript

💬 Here's a quick walkthrough for implementing browser notifications. It covers not only displaying the notifications but other aspects such as asking for permissions.

Creating Browser Notification in JavaScript

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Make Your Own Tools

⚙️ It's Chris's second article this week! Chris motivates us to spend some time on building internal tooling. He also gives some examples.

Make Your Own Tools

Rules of Micro-Frontends

👮‍♂️ An opinionated list of guidelines to build micro-frontends. The list covers aspects such as deployment, testing, code management, and more.

Rules of Micro-Frontends

How to Make a Side Navigation Bar in ReactJS

🧭 A tutorial for creating a sidebar using React from scratch! This includes even the create-react-app step.

How to Make a Side Navigation Bar in ReactJS

A Practical Introduction To Dependency Injection

💉 The first part of a series that provides a practical introduction to Dependency Injection.

A Practical Introduction To Dependency Injection

How to Verify Users in Express.js

🤖 Email verification is a necessary step in almost every login system. This article walks you through implementing an email verification system using Node.js and MongoDB.

How to Verify Users in Express.js

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

Web Vitals Optimizations: Advanced Dynamic Import Patterns

Ido Shamun — Tue, 05 Jan 2021 15:36:00 +0000

Web performance is a crucial part of the user experience of our web application. It has a direct impact on the conversion rate. Walmart found that for every 1-second improvement in page load time, conversions increased by 2% (see source). And if that's not enough, search engines favor fast websites. They rank them higher than slow websites. So improving your web application's performance can increase both the conversion rate and the organic customer acquisition rate.

Web Vitals

Web Vitals (coined by the Chrome team) are a set of metrics to measure the performance of a website. Optimizing for these metrics ensures your visitors will enjoy a much better experience.
Core Web Vitals are a subset of the aforementioned Web Vitals that is relevant to any web page. The subset focuses on three performance aspects, loading, interactivity, and visual stability. In this article, we will focus on improving two of them, loading and interactivity. They're represented by these two metrics, Largest Contentful Paint (LCP) and First Input Delay (FID). There are many strategies to improve these metrics, but we'll focus on reducing the bundle size.

Bundle size

The page bundle size significantly affects both LCP and FID. Both server-side-rendered applications and single-page-applications can end-up with bloated JavaScript bundles. The bigger the bundle, the more time it takes to download the bundle, parse the code into actionable machine commands, and eventually evaluate it. As long as the main thread is focused on any of these, it cannot do anything else, which increases LCP and FID. Addy Osmani wrote an extensive article about the cost of JavaScript if you fancy going deeper.
Even if we apply best practices such as tree shaking and code splitting in our project, the bundle can become huge. So what should we do? Dynamic import and loading prioritization!

Dynamic import

Not many know, but there are two forms of import we can use, static and dynamic. A static import is a well-known form and is our default choice. It looks like import defaultExport from "module-name"; and it tells the bundler (e.g., Webpack) that this module is mandatory to run our code. The bundler will bundle the module code with our code into a single JavaScript file. The more modules we statically import, the bigger the bundle will be. But obviously, not all imports are the same. Some are required to run our code immediately, and some can be lazy-loaded until a certain event occurs. So why do we have to load all this JavaScript at once? We don't. We can use dynamic import. Dynamic import looks like a regular function call and returns a promise that resolves to the imported module, import("module-name").then((module) => ...);. Using dynamic import, we tell the bundler to create a separate bundle for this module and load it in runtime. This makes sure the imported module will not be bundled in our main bundle, keeping the main bundle small and efficient. React lazy and Next.js dynamic utilize dynamic import to lazy-load React components easily. They are both a function that receives a function as an argument and returns a React component. The function argument must return a promise that resolves into a React component by itself. Here's an example: const DynamicComponent = dynamic(() => import('./component')). Of course, both React lazy and Next.js dynamic provide you a way to handle errors and show a fallback element while the component is loading (out of scope). So now we have two levels of import. The first is a static import, which bundles the module into our bundle. The second is a dynamic import, which imports the module as soon as requested as a separate bundle. This should boost our performance, but we can take it even further and load some JavaScript bundles only after the page is completely loaded.

Import after page load

In this section, we will see how we can use React lazy and Next.js dynamic to create a new function that imports a component only after the page is loaded. For simplicity's sake, I'll show how to implement it with Next.js, but the same concept can be easily applied to React lazy or even other frameworks such as Vue.

Let's first create a function that returns a promise that resolves once the page is loaded. A page loading process consists of three phases, loading, interactive, and completed. The function receives an argument that states at what phase we should load the resource. We use the readystatechange event to listen to changes in the loading process.

export default function onPageLoad(
  readyState: DocumentReadyState = 'interactive',
): Promise<void> {
  return new Promise((resolve) => {
    if (
      document.readyState === readyState ||
      document.readyState === 'complete'
    ) {
      return resolve();
    }

    const callback = (event: ProgressEvent<Document>) => {
      if (
        event.target.readyState === readyState ||
        document.readyState === 'complete'
      ) {
        document.removeEventListener('readystatechange', callback);
        return resolve();
      }
    };
    document.addEventListener('readystatechange', callback);
  });
}

Our onPageLoad function first returns a promise as planned. In the promise, we check for the current ready state of the document. It's an important edge case that we have to deal with; otherwise, the promise might never resolve. If the page is already loaded, we resolve the promise. Second, we create a callback function for the event listener and subscribe to the readystatechange event. In the callback, we check the new ready state of the document. If it equals the requested state or if the document is completely loaded, we can resolve the promise and unsubscribe.

This was the heavy lifting, and now the only thing that remained to do is to create our new dynamic function that will load the component on page load.

import dynamic from 'next/dynamic';
import onPageLoad from './onPageLoad';

export default function dynamicPageLoad<P>(
  loader: () => LoaderComponent<P>,
  readyState: DocumentReadyState = 'interactive',
): React.ComponentType<P> {
  return dynamic<P>(() => onPageLoad(readyState).then(loader), { ssr: false });
}

Like Next.js dynamic function, we receive a loader function that returns a promise with a React component and an optional ready state to prioritize the loading. In the function, we use the good-old dynamic function, but before providing the loader function, we chain it to the onPageLoad function that we created earlier. This makes sure the import statement will not be called before the page is loaded. The second parameter to the dynamic function disabled evaluating this expression in the server. This is required because we use the document object, which is available only to the client.

We can use our function to make sure our components will be imported after the page load as follows:
const DynamicComponent = dynamicPageLoad(() => import('./component')).

Now, a lot of JavaScript code can be downloaded, parsed, and evaluated only after our page is loaded. It makes sure the main thread will have more time for critical resources, thus improving our LCP and FID metrics.

Conclusion

Good web performance can improve our conversion rate and SEO. One of the ways to improve performance is to reduce the initial bundle size. By utilizing dynamic import, we can lazy-load JavaScript modules, which shrinks the initial bundle size. We also learned how to prioritize dynamic imports by loading some of the modules only after the page is loaded using our custom dynamic function.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

The Monthly Dev: World-Class talks free for everyone

Nimrod Kramer — Mon, 04 Jan 2021 08:27:46 +0000

After long weeks of hard work, we're excited to introduce you to our new series of monthly events. We call it The Monthly Dev 🌈

What's The Monthly Dev?

The Monthly Dev (TMD) is a series of online events brought to you by daily.dev. TMD is where we bring world-class speakers to empower the developers' community, once a month. Our events will cover hot topics that developers love such as:

Web performance
New libraries and frameworks
Job interviews
And more...

Here's a link to the first event.

Expert speakers

We aim to bring world-class speakers to empower our developers' community. The events are open and entirely free.

A RedwoodJS Getting Started Guide

Talk by David S. Price - Co-Founder at RedwoodJS

RedwoodJS is a full-stack, edge-ready framework built on React and GraphQL. Out of the box, it comes with code generators, first-class serverless deploy support, and tight integration between the frontend and backend. In this presentation, David will discuss the design and architecture choices that make Redwood so powerful. He'll then demo several features that highlight Redwood's delightful user experience. By the end, you'll have both the knowledge and inspiration to start your journey with Redwood.

Navigating the Technical Interview

Talk by Sam Saccone - Staff Software Engineer at Google

Technical interviews are fraught with ambiguity and unknowns, join Sam as he shares his learnings and recommendations on how to handle these unknowns and successfully tackle the tech interview process.

RxJS & Reactive Programming Fundamentals

Talk by Ben Lesh - Software Engineer at Citadel & Author of RxJS

RxJS is one of the hottest libraries in web development today. We will walk through understanding reactive programming, the components of RxJS, common operators and Observables, and how to create an Observable from scratch.

Schedule

The event will be live-streamed on January 26, 10 AM PST.

Opening Remarks by Ido Shamun (Co-Founder, CTO at daily.dev)
A RedwoodJS Getting Started Guide by David S. Price (Co-Founder at RedwoodJS)
Navigating the Technical Interview by Sam Saccone (Staff Software Engineer at Google)
RxJS & Reactive Programming Fundamentals by Ben Lesh (Software Engineer at Citadel & Author of RxJS)
Cool surprise

The event will be held in English.

See you there!

Here's the link again, in case you've missed it:
https://www.eventbrite.com/e/the-monthly-dev-1-by-dailydev-registration-133820993193

🔥 What's Hot in Web Development? — Weekly Picks #160

Ido Shamun — Wed, 30 Dec 2020 13:00:00 +0000

Every week we publish the top 10 popular posts on daily.dev.

Shout out to all the authors 👏

Thanos.js Tutorial – Restore Balance to your Project

🧤 Would you like to randomly delete half of your files? If so, give Thanos.js a go.

Thanos.js Tutorial – Restore Balance to your Project

We rendered a million web pages to find out what makes the web slow

🤯 The author rendered 1M pages and tracked every possible metric and information such as errors, protocols, libraries, and performance metrics. He crunched the numbers and share the insights in this article. By the way, it's also available on Kaggle.

We rendered a million web pages to find out what makes the web slow

React Server Components

🔥 The React team has recently previewed a new concept called React Server Components. Everyone seems super excited about it. Read Addy Osmani's introduction.

React Server Components

Public APIs - Find a public API for your next project

🕵️‍♀️ The title already says it all. If you look for an API this is the place.

Public APIs - Find a public API for your next project

2 months of Learning React.js and The project I worked on

👨‍🎓 The author shares his takeaways from learning React. He did some online courses and went over freeCodeCamp. Check out what he has to say.

2 months of Learning React.js and The project I worked on

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

My Advice to New Programmers After Coding for the Last 3 Years

🐣 This is a guest post on our blog that got a lot of attention from the community. Fahad shares some insights for codenewbies.

My Advice to New Programmers After Coding for the Last 3 Years

HTML tags every frontend developer should know

🤓 Semantic HTML is important for the accessibility and readability of your code. Knowing as many HTML elements as possible, otherwise, we will fall back to our default choice div.

HTML tags every frontend developer should know

Continuous Performance Analysis with Lighthouse CI and GitHub Actions

🚀 An excellent walkthrough to set up a performance analysis for every commit. This makes it so much easier to find performance bottlenecks.

Continuous Performance Analysis with Lighthouse CI and GitHub Actions

React Best Practices with Kent Dodds (Repeat)

🥇 Kent shares his React best practices in a podcast. There's also a transcript for those of you, like me, who don't like podcasts.

React Best Practices with Kent Dodds (Repeat)

Build a Chat Room With Node.js and Socket.io

💬 Learn about WebSocket and how to build a real-time application that includes a server and a client.

Build a Chat Room With Node.js and Socket.io

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

How to Add Preloader to Image in Flutter

0xAirdropfarmer — Thu, 24 Dec 2020 13:05:24 +0000

Flutter is a cross-platform mobile application development framework that offers a widget-based mechanism to implement the pixel-perfect UI. Creating a state of the art apps with beautiful UI is a challenge for every mobile app developer. And, Flutter has made it easier and simple. However, with great UI comes the value of user experience as well. It is necessary to have a sustainable user experience along with a great UI. Hence, this tutorial will help learn a small aspect of optimizing the user experience by showing the loading effect (termed as pre-loaders, placeholders) before the actual data loads.

The preloaders become necessary for the user to experience the data is still loading or being fetched from the server. Until the actual data is fetched from the server and displayed on the screen, the pre-loaders will help users understand what actually is going on. The displaying of preloaders indicates that the actual data has still not loaded due to some reasons such as slow network, app errors, etc. Thus, optimizing the overall user experience. Hence, the pre-loaders are necessary for any mobile applications as well as websites. And here, we are going to learn just that on how to add image pre-loaders before the actual image loads in a Flutter app.

Create new Flutter project

First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other flutter app development related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:

flutter create imagePreloader

After the project has been set up, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:

flutter run

After successfully build, we will get the following result on the emulator screen:

Creating Home Screen

Since we have our flutter app up and running in the emulator, we can now move to create screens. For that, we need to create a directory called ./screens inside the ./lib directory of our project. Inside the ./screens directory, we need to create a new dart file called Home.dart.

In the Home.dart, we are going to create a stateful widget to show the image as well as the preloaders. But first, we are going to show a simple App bar by returning a Scaffold widget as shown in the code snippet below:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:ui';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            backgroundColor: Colors.white,
            centerTitle: true,
            title: Text(
              "Image",
              style: TextStyle(color: Colors.black87, fontFamily: 'Overpass', fontSize: 20),
            ),
            elevation: 0.0
        ),
        backgroundColor: Colors.white,
        body: Container()
    );
  }
}

Here, we have added an App bar using AppBar widget in the Scaffold widget. The body property returns an empty Container widget.

Now, we need to import the Home.dart file in main.dart and replace the default widget with HomePage widget as shown in the code snippet below:

import 'package:flutter/material.dart';
import 'package:imagePreloader/screens/Home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

Hence, we will get the result as shown in the screenshot below:

Adding Image Container to Home Screen

Now, we are going to display an image on the Home screen. For that, we need to fetch a mock image from pexels or from anywhere. Then, we need to add the URL path of the image to a List called imagesPath.

Note that, we can directly use this URL but we are pushing the URL from imagesPath to a new List called imagesList because we want to show the Pre-loaders before the image loads on the screen.

The initializations are provided in the code snippet below:

List imagesPath = [
    "https://images.pexels.com/photos/2440061/pexels-photo-2440061.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  ];

 List imagesList = new List();

Now, we need to create a function to load the image URL from the imagesPath list to imagesList list. Remember that we are doing this as an alternative to fetching images from the server. Since we are not using a server to fetch the image, we have to devise the logic to load the image URL manually from the code itself.

The implementation of getImages function is provided in the code snippet below:

getImages() {
  imagesList.add(imagesPath[0]);
}

Now, we need to call the getImages function inside the initState method:

@override
void initState() {
  super.initState();
  getImages();
}

This initState method executes before our main build function executes once we enter the Home screen.

Now, we are going to create a image view container in the Scaffold widget body. For that, we can use the code from the following code snippet:

body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
          child: Container(
            margin: EdgeInsets.only(right : 0),
            width: 500,
            height: 350,
            decoration: BoxDecoration(
              color: Colors.black26,
              borderRadius: BorderRadius.circular(16),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.network(
                  imagesList[0],
                  fit: BoxFit.cover,
              ),
            ),
          )
        )
      ),
    );

Here, we have placed the SingleChildScrollView widget as a primary parent widget so that the whole body section is scrollable. Then, we have a Padding widget to apply some paddings which have Container as a child widget. The Container widget is configured with some unique properties which provide child widgets as a ClipRRect widget. The ChipRRect allows us to clip the edges of its child widget. As its child widget, we have used Image.network widget to display the image.

The result is displayed in the screenshot below:

Here, we have got an image on the screen. Now, it is time to add Pre-loaders.

Adding Shimmering Image Pre-loader

In order to add the image Pre-loader, we are going to make use of the shimmer package. This package provides an easy way to apply the shimmer effect in the Flutter app. It makes the Pre-loader implementation easy as well as optimizes the user experience.

First, we need to install the shimmer package. For that, we need to add the shimmer package to pubspec.yaml file as shown in the code snippet below:

dependencies:
  flutter:
    sdk: flutter

  shimmer: 1.1.1

Now, we need to import the package to the Home.dart as shown in the code snippet below:

import 'package:shimmer/shimmer.dart';

Now, we are going to implement the shimmer preloading effect using the Shimmer widget provided by the shimmer package. But first, we need to make some configurations so as to show the shimmers perfectly. So, we need to define some constants as shown in the code snippet below:

bool _loading = false;
int offset = 0;
int time = 800;

Here, the _loading Boolean variable is for the conditional rendering of the Image and Pre-loaders. The offset and time value is configured to the Shimmer widget to set the time interval till which the pre-loaders need to load. The implementation is provided in the code snippet below:

body: (_loading)?
        Container(
          color: Colors.white,
          child: SafeArea(
            child: ListView.builder(
              padding: EdgeInsets.all(5),
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                offset += 5;
                time = 800 + offset;
                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                  child: Shimmer.fromColors(
                    highlightColor: Colors.white,
                    baseColor: Colors.grey[500],
                    child: Container(
                      margin: EdgeInsets.only(right : 0),
                      height: 350,
                      width: 270,
                      decoration: BoxDecoration(
                        color: Colors.black26,
                        borderRadius: BorderRadius.circular(16),
                      ),
                    ),
                    period: Duration(milliseconds: time),
                  )
                );
              },
            ),
          )
        ):
         SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
            child: Container(
              margin: EdgeInsets.only(right : 0),
              width: 500,
              height: 350,
              decoration: BoxDecoration(
                color: Colors.black26,
                borderRadius: BorderRadius.circular(16),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Image.network(
                    imagesList[0],
                    fit: BoxFit.cover,
                ),
              ),
            )
          )
        ),
    );

Here, we show the Pre-loader template in contrast to the Image template using the _loading value as conditional rendering. We have used the Shimmer widget inside the ListView so as to show multiple loaders which can be controlled by setting the itemCount property. We have used the fromColors extension provided by the Shimmer widget with configured highlightColor and baseColor properties. We have placed a Container widget similar to Container in Image template as a child of Shimmer in order to display the shimmering effect.

Now, the above template will create a shimmering pre-loader effect. But, we still need to implement the logic to show the pre-loaders. For that, we are going to use the Timer function. The Timer function will help to delay the loading of the image onto the screen and show the pre-loaders until then. First, we need to import the package that provides the Timer function:

import 'dart:async';

Now in getImages function, we use the Timer to delay the loading of the image and show the shimmer pre-loaders instead.

In an actual app, we fetch the data from server in which the fetching may take time. Till then, we show some loading effect which improves the overall user experience.

Since we are not pulling data from the server, we need to manually configure the delay. Hence, the implementation is provided in the code snippet below:

getImages() {
    setState(() {
      _loading = true;
    });
    Timer(Duration(seconds: 5), () => {
      imagesList.add(imagesPath[0]),
      setState(() {
        _loading = false;
      })
    });
  }

Now, the final result with shimmering effect Pre-loaders is shown in the demo below:

We can notice a shimmering loading effect just before the image loads on the screen. Likewise, we can display the shimmer effect from any widget element structure of the screens as the child of the Shimmer widget uses the Flutter widgets itself. Hence, it is flexible enough to be shaped into anything.

Finally, we have implemented the image Pre-loader in a Flutter app.

Conclusion

As we talk about the importance of pre-loaders in optimizing the user experience, we can see the effect it has on the overall app UI and its usage from the demo above. It makes the overall user experience convenient. These types of pre-loaders are used in every app nowadays. So, users expect pre-loaders to happen. It creates a greater impact in terms of visual and understanding of what is going on. Pre-loaders taking a long time can interpret into problems in internet connectivity or some other type of app errors. This makes the user aware of what actually is happening. Hence, it is an important element to have knowledge of for a developer.

Now, the challenge is to create the preloaders for different widget elements. Here, we implemented the preloaders for the image element which was simple. But, the pre-loaders using the shimmer package can be shaped into anything as it uses the Flutter widgets itself as a child.

For more inspirations for beautifully designed pre-loaders, check out some amazing Flutter apps that have them integrated intuitively.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

🔥 What's Hot in Web Development? — Weekly Picks #159

Ido Shamun — Wed, 23 Dec 2020 13:06:55 +0000

Every week we publish the top 10 popular posts on daily.dev.

Shout out to all the authors 👏

Develop a Food Delivery Application: (It’s Features, Cost, and Functionality)

🍔 This is not a technical article but rather explains what it takes to develop a food delivery application and also shows a comprehensive market analysis.

Develop a Food Delivery Application: (It’s Features, Cost, and Functionality)

100 Days of Code – A Complete Guide For Beginners and Experienced

🐣 When they say "complete" they really mean it. This article presents two roadmaps. One for beginners and the other for experienced. It's very focused and includes all the references you need to get it going.

100 Days of Code – A Complete Guide For Beginners and Experienced

Typescript Mistakes To Avoid

🚫 This is a fine list of TypeScript patterns to avoid. Even if you're an experienced developer, I recommend checking out this article.

Typescript Mistakes To Avoid

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

🤪 Unique scrolling effects can create unforgettable user experiences. This article will get you started with Locomotive Scroll and teach you how to create these unique experiences.

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

How I Easily Code For 8+ Hours Without Feeling Tired (My Productivity System)

🥱 Coding for a long time can be tiresome. Nick developed a method to stay sharp during the long days.

How I Easily Code For 8+ Hours Without Feeling Tired (My Productivity System)

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Cyberpunk 2077 Inspired Menu in CSS only! Video Tutorial!

👨‍🎤 Cyberpunk 2077 is so hyped right now. This hype made its way to web development with this awesome menu implementation.

Cyberpunk 2077 Inspired Menu in CSS only! Video Tutorial!

Centering in CSS

🖼 There are so many ways to center elements using CSS. This article compares them according to five criteria. It's like a stress test for centering techniques.

Centering in CSS

Python in Visual Studio Code – December 2020 Release

🐍 A new release to VS Code Python support! They closed 13 issues and explain them in detail in this post.

Python in Visual Studio Code – December 2020 Release

5 Common Mistakes Developers Do that Affect Page Load Time

🚀 Delivering your application fast improves the user experience and conversion rate. These 5 tips will give you a kickstart to what you should optimize.

5 Common Mistakes Developers Do that Affect Page Load Time

5 Big Lies Junior Programmers Are Told

💬 The tech industry is full of myths. This article busts five of them.

5 Big Lies Junior Programmers Are Told

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.