DEV Community: Ishan Sharma

UI Design for Developers

Ishan Sharma — Mon, 05 Dec 2022 12:29:46 +0000

Originally posted on, my personal blog

As a developer,

Why should you even care about design?

Design is a crucial part of any digital product. Designers are responsible for the look and feel of an application, which is what makes it stand out from other similar applications.

Generally, The design process can be long and complicated but I feel that as a developer it's important for us to understand the principles of design because believe it or not it can actually have a significant impact on the way you think and approach a problem.

Especially, if you're a front-end developer, even the most basic concepts used in design tools such as layering, skew, scale and methodologies such as atomic design methodology, user journey maps etc. can help you to come up with creative solutions to your day-to-day challenges and these design patterns can help shape your code.

Hmm, okay. It's might be helpful. But,

Why should I learn design?

Apart from the few which I listed above. There could be countless reasons as to why you as a developer might want to learn design such as :

It could help you to work more effectively with designers and may significantly reduce the back-and-forth.
Some small teams might not have a designer and sometimes you may want to craft your personal projects, but not necessarily have the resources & time to hire a designer.
It can help you to become more detail-oriented.
and the list can go on and on...

However, I'd like to share my own journey on how & why I started with design. For this, we have to do some time travel and take a trip down the memory lane.

It was February, 2015

After getting frustrated over subscription paywalls of Connectify Hotspot that filled up my monitor, I decided to build something of my own, which could help me in creating wifi hotspots from my desktop computer.

Few weeks later, I built a relatively simple desktop app for my own use case and decided to upload it on the internet for free. It crossed 25k+ downloads in less than 2 days ofc, which was the cool part ✨ xD

However, the sad part was that this is how it looked 👇🏻

Yep. I still can't that this was something that I 'designed' back then. Notice those gigantic buttons with 10px border blue. What's a color palette? I didn't even look up any hex codes! I just wrote 'blue', 'red' and that's it.

However, If you think that that was bad..

Look at this one, which I had initially built (but thank god, I never published it).

But, what's wrong with this design?

I mean, it does what it's supposed to, right?

That's exactly what I thought back then 😅.

Well, first and foremost apart from the fact that it straightaway looks ugly, There are three main issues, which might've crossed your mind.

For starters, THE FONT. Instead of using 'Comic Sans MS', I should've gone for a more readable, accessible sans-serif font.
THE COLOR SCHEME. There's no defined color palette or anything of that sort in the product. There are so many bold colors used throughout the app. Especially in the primary buttons, apart from the text, there's no real distinction between the two.
CONTRAST: You may notice that in some of the parts (for example: the buttons), it's very difficult to read the text on a dark background i.e. it lacks contrast.

However, while learning how to design most of us tend to focus too much on just the aesthetics of designs, how they look. However, If it's not usable, even the most aesthetically pleasing design is useless.

This is another key aspect to consider, design is not just about how a product looks, but how intuitive and easy it is to use. Designs should be predictable enough that users are able to intuitively understand how to use them.

For example, If you pay close attention to the Password Input Field in the design above, Once a user has typed a password, there's no way for him or her to go ahead and retrieve the password.

I encountered this particular thing a lot in my day-to-day use and I always had to go ahead and entirely reset my hotspot password and then update it on all of my other devices. Which was not a functional issue of course, but for a user, it was just, frustrating.

Fast forward to today,

It has been 7 years since I made those mistakes..

I eventually learnt all of these things and developed a sense of design, not by reading books/articles or any theoretical concepts. But, it was just an intution that got developed over the years, after visiting thousands of websites.

Every single interaction on any new webpage that I visited helped me to re-iterate on my understanding of user interfaces & user experience. Similarly, every single time when an interaction within an app felt unnatural or whenever I felt annoyed while using any particular app, I always questioned that why was that the case?

Later on, when I actually read some theory and concepts like Visual Hierarchy, Contrast Ratios, Thumb Zone Rule, Consistency, White spacing etc., all of those things that I had observed and the intution that I had developed over the years all started making sense to me and helped me answer why some things were done in the way there were.

All of this helped me to not only improve my applications and products ofc, but they helped me in ways I didn't imagine at first. Some of them being:

1. Unicorn Developer 🦄

I first heard this term in one of Filip Hracek's talks. It's commonly used to refer to people who can do both design & development. It sounds cool, no? Unicorns have always been portrayed as these magical creatures, be it cartoon shows or Harry Potter films. It certainly feel cool to be called one :)

2. Boosts Creativity

The reason I started with HTML & CSS was because it gave me this huge empty canvas which I could use to create and share my art with anyone in the world. Learning how to design, helps you unlock a super power that helps you to not just create but actually invision those art concepts.

And as I mentioned before, it can have a significant impact on the way you think and approach a problem even in code as well.

3. Effective Communcation

Once you develop a basic understanding of design, it actually helps you to respect and sometimes even question the principles behind why designers make the decisions they do, and this same thing will help you in replicating those designs with pixel-perfection. Nothing can be more frustrating for a designer than to hand over a design for a product feature, only to find that their design was changed significantly by the developer coding it.

4. Understand User Persona

The cool part about design is that instead of just making you focus on what are you building, it forces you to think about why are you building it? This ideology helps you to deeply understand the user behaviour and what they want. Apart from giving you that motivation, that you're making a change in someone's life.

In some cases, it could help you to handle all those edge cases in your code which might've gotten overlooked and hence helping you in squashing those bugs before they even get to see the light of day.

5. Enjoy your work more

Learning how to design helps in building products that have a perfect balance between the creative and logical aspects and one thing that I've noticed is that now I enjoy my work even more! It also gives you the ability to engage in productive conversations with designers, product managers and other stakeholders by speaking their language.

And when you find out that maybe a particular error state was missing in a particular design, you don't have to annoy others. You can just go ahead and solve it immediately without relying on someone else to spoon-fed you and finish your work without any delays.

If all of the things listed above, weren't cool enough. Then think about this,

Once you gain the ability to do both design & development, It gives you this awesome superpower to build whatever you can dream! It's kind of like being a one-man army.

You can single-handedly, think, design, develop and publish any app/service out there which you want. Isn't that incredible?

Okayyy Ishan,

I am convinced. But how do I get started with all this?

Wohoo, So, you've finally decided to take this up. Yay, congrats! 🎉 (virtual pat on the back)

There are tons and tons of resources out there. One of my personal favourites is Gary Simon's youtube channel, DesignCourse. He has a bunch of tutorials on how to use tools like figma, creative challenges, design concepts and how to actually implement them in web.

One advice that I'd give is to learn the basic terminology and initial design concepts first, and then work your way up from there. You can start reading books on design theories, however at the same time, don't get bogged down by theory only.

Once you feel that you're comfortable enough to evaluate a design decision on the basis of specific principles, you can move on. For example, just by looking at a navbar, if you're able to say things like, "The items are too close in size, the logo seems misaligned", you're ready to put these skills in practice:)

I've compiled down a list of some fundamentals which would help you to get started.

Few Fundamentals

which may come in handy..

Design Tools

The first design tool that I ever used was not really a design tool at all. It was just my chrome browser :)

At that point, since I was most comfortable with writing HTML and CSS code. I used to just straight away open my text editor and code it away, then I'd often play around with different layouts, color palettes etc.

This worked surprisingly well for a while! However, As you can imagine that it quite often this process involved a lot of extra efforts since I had to write code in order to actually visualize what I was thinking and then had to completely get rid of it and start from scratch if I wanted to pivot to something else.

That's when I decided to explore tools like Adobe XD and Figma. These are dedicated design tools with easy to use drag & drop things and have lots of other handy things such as layers, design systems etc. which helps designers to craft these designs easily.

Most importantly, these tools allow you to actually build prototypes as well which you can use to pitch a concept or visualize and entire end-to-end user flow.

Typography

Remember the odd looking 'Comic Sans MS' font that we saw earlier in my app? Yep, that was bad and things like those could've been avoided only if I had better understanding of typography back then.

Firstly, different fonts and typefaces have their own features and can make or break the experience. Hence, you should always choose one that better suits your design theme and style. For example, if you're looking for a font for a cartoon/illustrated website then perhaps a bold, fat and rounded font might better suit your needs.

In order to further enhance the user's experince, this typography can be combined with two other key fundamentals of design:

Visual Hierarchy

The relationship between different type elements in a design is vital to making that design more usable. A website with a great visual hierarchy will also help users find their information fast.

You can play manipulate different properties of fonts, their weights, size, style (italic or underlined) to create a better visual hierarchy. Headings, sub-headings, titles etc. are some of the examples.

White Space

The next principle you can follow is to balance the amount of space and element on the webpage.

Again, adding too much white space may make the UI look boring for users to use and navigate around. On the other hand, not having enough white space is actually worse, since it creates a cluttered and crowded interface, making it hard for users to find the information they need.

Hence, maintaining a balance between these two states is very important.

Colors

Colors play a significant role in any product's design. Different colors can be used to induce different emotions in a user's mind, even slight changes in shades can completely shift the visual impact.

One of the design fundamentals is Color Theory, which is a very vast topic and deserves an entire blog of it's own. However, we'll discuss a few basic things to know about colors.

The below image represents what we call, a Color Wheel.

On the basis of this, colors can be classified into various groups with regards to their tones.

Analogous Colors

Analogous means similar and is the name for a group of colours that lie immediately adjacent to each other on the colour wheel. Each of the three colours has one colour in common.

For example: In the above wheel, red-orange, orange-yellow and yellow-green are analogous colors.

Warm Colors

Warm colours are mostly made of Red, Orange and Yellow. They are called warm because they remind us of warm things like the sun or fire.

These colors tend to depict emotions of warmth, security(orange), joyful (yellow), however at the same time danger(red). It should be used carefully. Remember the two giant red buttons in my app, that we saw earlier?

Cool Colors

Cool colours are made mostly of Green, Blue and Violet. They are called cool because they remind us of cool things like a cool forest, a cold lake, sky, air or ice.

Cool colours tend to be psychologically soothing and can actually make people feel cooler because they can slightly lower the blood circulation and thereby decrease body temperature.

Neutral Colors

Neutral Colours are colours that are neither warm nor cool. They are the result of mixing two complementary colours (e.g Red and Green). These are all types of Brown. Black, White and Grey are are also neutral colours.

With enough consideration and thoughtfulness, Combinations of these colors, can be put throughout the product to induce different emotions in a user.

For example: Signing up for an app is a positive action hence cool colors such as blue, green can be used. Whereas, deleting an existing account is a destructive action, hence warmer colors such as red is used to depict 'danger'.

Contrast ratios

Perhaps the most important thing to consider while using any combinations of these colors to be vary of contrast, or perceived “luminance”. It is the difference in brightness between two colors.

There are plugins in tools such as Figma which can help in determining the contrast ratio i.e. a ratio of the luminance of two colors.

When working on the web, we must always hit at least WCAG (i.e. Web Content Accessibility Guidelines) AA color contrast guidelines, which states that we should maintain

A contrast ratio of at least 4.5:1 for regular text elements
A contrast ratio of at least 3:1 for large text elements
A contrast ratio of at least 3:1 for graphical objects and UI components

Conclusion

If you're a developer who's interested in learning more about design, or someone who had no clue about design up until this point. I hope that this was helpful to you in one way or the other or at least motivated you to explore more about design :)

At the end, what matters the most is that you should enjoy what you do :) Get out there and be a unicorn! 🦄

Oh btw, If you are already a unicorn developer or you're on your journey to become one, do share your codepen / dribbble shots for sure. Here's mine!

#GithubWrapped - DO Submission

Ishan Sharma — Sun, 10 Jan 2021 18:44:39 +0000

Background

2020 has been a challenging year for all of us.

As the year is ending, I thought to take a look back at all the contributions you as an individual made to the open-source community, during these unprecedented times.

Also since, Spotify has #SpotifyWrapped, Snapchat has #lookback,

Why not something for us, devs!?

That's exactly what motivated me to create this.

What I built

Presenting #GitHubWrapped !

To take a look back at all the contributions you as an individual
made to the open-source community, during these unprecedented times.

How does it work?

Once you navigate to githubwrapped.tech, you'll be prompted to enter your github username after which you can get your own personalized report.

UPDATE !

Over the last few weeks, we've crossed over 2,200 Tweets with the #GitHubWrapped hashtag and over half a million site visits in less than 6 days from the launch.

Category Submission:

Program for the People

App Link

githubwrapped.tech

Screenshots

Reports

Each github user can generate a year in review report similar to this.

Yearly reports contains your stats from the beginning of this year including number of commits, stars etc.

You can also save your report as an image using the 'Save Report' button and share it with the community or keep it as a memorandum :)

Tweet Bot

The celebrations don't end here! We also made our own cute octo-bot on twitter @GitHubWrapped.

#GitHubWrapped

@githubwrapped

Heya, #techtwitter and #coders !

Ever wondered why @Spotify has #SpotifyWrapped, while @Snapchat has #lookback. Why not @github ?

Presenting, #GithubWrapped 🎉 Take a look at all the contributions you made in 2020!

githubwrapped.tech

#100DaysOfCode #Code #YearInReview

07:56 AM - 26 Dec 2020

Octobot stays awake all day/night to like & retweet all your tweets that use the hashtag #GitHubWrapped.

You can use the 'Share on Twitter' button right on the web app, to share your year in review!

Link to Source Code

In case you'd like to take a look at how I did it, here's a link to the github repository

ishandeveloper / github-wrapped

Take a look back at all the contributions you as an individual made to the open-source community

Generate your report

Why do I exist?

2020 has been a challenging year for all of us.

As the year is ending, we thought to take a look back at all the contributions you as an individual made to the open-source community, during these unprecedented times.

Also, since Spotify, Snapchat and other mass platforms have their own way of year wrap up, why not us?

githubwrapped.tech

Reports

This web app deployed at githubwrapped.tech will help you to generate yearly reports that contains your stats from the beginning of this year.

Including number of commits, stars etc.

You can also save your report as an image using the 'Save Report' button and share it with the community or keep it as a memorandum :)

Project Structure

This project uses React.Js and the contents are bundled using webpack.

The contents in this project follow the following structure.

├───api
├───public
│   └───assets
└───src

…

View on GitHub

Permissive License

MIT

How I built it

I used Digital Ocean's App Platform to

Host the web app, along with the backend API
Host a node.js twitter bot that likes & retweets all #GithubWrapped tweets

Made with 💚 for the community :)

What Is a Virtual Machine?

Ishan Sharma — Tue, 06 Oct 2020 16:05:06 +0000

Hey, Devinas!

Actually, I'll be giving a talk soon enough to teach my peers the basics of Cloud Computing.

What Cloud is? What happens on the server side when you enter a URL in the address bar and hit 'enter' key? How load balancers work? Pros and Cons of cloud etc.

Between those topics, one that I'm planning to give a brief intro about is 'What is a Virtual Machine?'

I do know what a virtual machine is, how it just runs another instance of an OS on the same hardware, and how a hypervisor manages all the resources etc.

But, I'm unable to come with an easy analogy or some real-life example using which I could be able to teach them out.

Any Ideas/Suggestions ?

P.S. Also, if you'd like to join the talk and discuss a few things about cloud, feel free to registeryourself here. I'd love to learn together with you :)

Class Attendee Action

Ishan Sharma — Thu, 17 Sep 2020 15:39:27 +0000

My Workflow

I have made a GitHub Action named 'Class Attendee' for helping me to get over those boring 'OOPS' classes hosted by my university on Google Meet.

With ease:

Set a scheduled time for your classes.
Manage your time and learn concepts at your own pace
Make sure that you're never short on your college attendance.

P.S. OOPS or any other university course is an important part of the curriculum and you should never skip it. My only intention with this action is to be able to understand and grasp these concepts by actually implementing them on my own, a practice which I'm not able to follow while attending my University Classes.

Submission Category:

Wacky Wildcards

SECRETS

Make sure to add 3 secrets in your project, by going to

Project Settings > Secrets > New Secret.

The Format for these 3 secrets is as below :

USER_EMAIL : Contains Your Google Account Email Address
USER_PASSWORD : Contains Your Google Account Password
MEET_LINK : The Link for the Google Meet you'd like to join.

Yaml File or Link to Code

Example Workflow file

An example workflow to set up your class attender action quickly.

name: Class Attender

on:
  # Set the time here
  schedule:
    - cron: "0 11 * * *" # 11 AM Every Morning

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        python-version: [3.7]

    steps:
      - uses: actions/checkout@v2
      - name: Set up Python ${{ matrix.python-version }}
        uses: actions/setup-python@v2
        with:
          python-version: ${{ matrix.python-version }}

      - name: Setup Chromedriver
        uses: nanasess/setup-chromedriver@master
      - run: |
          export DISPLAY=:99
          chromedriver --url-base=/wd/hub &
          sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 &

      - name: Install dependencies
        run: |
          python -m pip install --upgrade pip
          pip install selenium pyvirtualdisplay pause

      - name: RUN
        run: |
          python ./script.py ${{ secrets.USER_EMAIL }} ${{ secrets.USER_PASSWORD }} ${{ secrets.MEET_LINK }}

ishandeveloper / Class-Attendee-Action

This repository is dedicated to a GitHub Action for running a cron job, every morning at 11 AM to attend my super boring OOPS Classes.

Class Attendee Action

This repository is dedicated to a GitHub Action for running a cron job, every morning at 11 AM to attend my super boring OOPS Classes.

THIS REPOSITORY WAS CREATED AS A PART OF ACTIONS HACKATHON HOSTED BY DEV.TO AND GITHUB, VIEW THE SUBMISSION HERE

SECRETS

Make sure to add 3 secrets in your project, by going to

Project Settings > Secrets > New Secret.

The Format for these 3 secrets is as below :

    # Contains Your Google Account Email Address
    USER_EMAIL
    # Contains Your Google Account Password
    USER_PASSWORD
    # Add the Link for the Google Meet you'd like to join.
    MEET_LINK

Usage

Example Workflow file

An example workflow to set up your class attender action quickly.

name: Class Attender
on:
  # Set the time here
  schedule:
    - cron: "0 11 * * *" # 11 AM Every Morning

jobs:

…

View on GitHub

Additional Resources / Info

This action uses following open-source actions under the hood to set up things easily.

nanasess / setup-chromedriver

ChromeDriver for use in GitHub Actions

setup-chromedriver

This action sets up a ChromeDriver for use in actions

OS/Platform support

ubuntu-latest, ubuntu-20.04 or ubuntu-18.04
macos-latest, macos-10.15
windows-latest, windows-2019

Usage

See action.yml

for ubuntu-latest, macos-latest

steps:
- uses: actions/checkout@v2
- uses: nanasess/setup-chromedriver@v1
  with:
    # Optional: do not specify to match Chrome's version
    chromedriver-version: '88.0.4324.96'
- run: |
    export DISPLAY=:99
    chromedriver --url-base=/wd/hub &
    sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional

for windows-latest

steps:
- uses: actions/checkout@v2
- uses: nanasess/setup-chromedriver@v1
  with:
    # Optional: do not specify to match Chrome's version
    chromedriver-version: '88.0.4324.96'
- run: chromedriver --url-base=/wd/hub &

View on GitHub

Made with ♥ by ishandeveloper

Intro To React [For Beginners]

Ishan Sharma — Sun, 13 Sep 2020 19:59:13 +0000

Okay, so if you're somewhat a beginner in web development, you must've heard people telling you that, "You should learn react" or vue or angular, etc.

So, what exactly is it? Should you learn it? If yes, then How to get started? We'll be discussing answers to all these questions above.

NOTE : This post expects you to have some good knowledge about html, css and javascript, especially some important concepts of ES6 or further patch version.

If you don't feel comfortable with these currently. Then, I am of the opinion that you should first know all these, before jumping on to libraries like React. If you'd like to just quickly freshen up your minds and recall important concepts of ES6, you can read my other post.

A Quick Dive Into ES6

Ishan Sharma ・ Jul 6 '20

#javascript #beginners #webdev #discuss

What I'll be covering in this article?

Before we start, I'd like to point out that I won't be able to cover, every single thing that is out there to know about react, that's just not practically possible. I'll be covering all the basics and some important concepts that can help you to get started with react. But some of the advanced concepts such as redux etc. are beyond the scope of this article.

Further in this article, we'll be creating a react app, similar to this. In which we'll just pass a username into the card component, and it'll fetch the data from dev.to API to create a profile card.

P.S. In focus @ben @graciegregory

Okay, with all that aside. Let's jump ahead to learn.

What is React?

and why is everyone so obsessed over it?

React is a JavaScript library built by Facebook. It is used for building front-end user interfaces. The main feature of react is that it makes your UI more modular, by enabling you to divide your interface in smaller components. This model of thinking fits user interfaces well.

React has literally changed the way we think about web applications and user interface development and made it possible to build and manage large-scale web applications such as Facebook, Netflix and many more in a more-efficient and modular way.

How does it work?

Instead of jumping directly, into just learning react, we should first have at least an idea about how it actually works under the hood.

To keep it brief and simple, In layman terms, what react does is that instead of manipulating the web browser's DOM directly, It creates this Virtual DOM in memory, where it does all these manipulations.

It then examines what changes have been made in the Virtual DOM and then applies those changes in the browser's DOM.

Let's discuss about some important concepts.

A. Components

Components are the most fundamental building blocks of a react application. In React, a single web page can be divided into small blocks that represent a different part of the screen. Consider the layout below for an example.

Here every colored box that you can see, represents a different component.
Each individual component is independent of one another and responsible both for it's visual appearances and its interactions.

In layman terms, a component is basically just a file that contains all the html, styling and js logic in one group.

B. JSX

Since React uses JavaScript, you might be wondering, how we'll be able to create and render elements on the screen. For creating a basic element through vanilla javascript, we usually use

var header = document.createElement("h1");
header.innerHTML = "Hello World !";

Although this approach is totally okay and we can still use this one in React, but you can imagine, how cluttered our code would look?

Just to give you can example, let's try creating an unordered list, consisting of three elements, in the casual way.

const List = () => {
  const alphabets = ["a", "b", "c"];

  return React.createElement(
    "div",
    null,
    React.createElement("h2", null, "Alphabets"),
    React.createElement(
      "ul",
      null,
      alphabets.map((item) => {
        return React.createElement(
        "li",
         { className: "alphabet" },
         item
        );
      })
    )
  );
};

Looks scary for accomplishing such a simple task, right? Now, Let's try achieving the same in the JSX way.

const List = () => {
  const alphabets = ["a", "b", "c"];

  return(
    <div>
      <h2>Alphabets</h2>
      <ul>
        {alphabets.map(item=>
          <li className="alphabet">item</li>
        )}
      </ul>
    </div>
  )
}

Noticed the difference? So much less boilerplate and somewhat more elegant code. That's JSX.

At first sight, you might be thinking, this looks like HTML. You are not alone, every new React developer thinks the same at first. I also thought the same.

But, the funny thing is, it's not HTML. It is just a syntax extension to JavaScript, or you can say some sugar syntax for defining components and their positioning inside the markup. If you'd like to learn more in depth about JSX, refer to React docs, here.

I believe in learning by doing approach, that's why for the rest of this tutorial we'll be exploring react by working on a very basic react project.

C. Component State

If you try to read the react documentation to figure out what state is, it can be quite difficult to grasp at first. This is why usually many of the beginner tutorials out there, tend not to cover this concept. But in my opinion, it's not that complicated and super simple to grasp and I believe it's a very important concept to learn for everyone who's trying to learn react.

You can imagine state of a component as the output of that component on the basis of some particular data, or a variable let's suppose. For example, In case of an hour clock, the output of the component must change after every single hour let's say from 1 AM to 2 AM. So, the output of that clock component at 1 AM, can be referred to as a state of that component.

Or another example, In case someone tries to visit your website and you want to display a login page to the visitor, in case they aren't logged in and display a dashboard instead, when they are logged in. Here the boolean condition whether a user is logged in or not can be referred to as state of that component.

It's important to remember that whenever the state of a component changes, the component will re-render itself. For example, once a user has logged in we'd want to take him to the dashboard, instead of the login page.

We'll be seeing this in action, while we're working on our project.

1. Setting up our react project.

For testing purposes, we can quickly get set up with React by just including three scripts in our index.html file.

a. Using Global Scripts

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

If you'd like to go with that approach, you can absolutely do that and still be able to follow along in this tutorial. But, In production environments, we prefer to use a few build tools since React tends to utilize some functionalities which won't work by default in browser.

For this tutorial, I'll be going with the latter approach, and actually setting up a production react environment.

But, If you've decided to go with the previous one, just please create an 'app.js' file in the same directory and make sure that your 'index.html' file looks similar to this.

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <body>

    <div id="root"></div>

    <script type="text/babel" src="./app.js"></script>
  </body>
</html>

b. Using Build Tools

For those, who're going the previous approach can skip this part but for those who'd like to set up a react environment can follow along.

Ensure that you've node.js installed on your system.
You can check this by running node -v in your terminal.

If you get an output with a version number xx.xx.x . Then, you're good to go!

But, if you get some error like command not recognized, then please download and install node.js installer package from here.
Create a new react project
Once you're set up with node. Open your terminal and cd into your desired directory.
Now, you can run this command to install create-react-app globally on your system using npm (node package manager).
```
npm install -g create-react-app
```
It may take a few seconds, depending upon your internet connection.

Now, we can finally create our react project. It's pretty simple. You can just run.
```
npx create-react-app todo
```
This may take a while. Once that's done, you can just cd into the app folder and run the app locally using
```
cd todo
npm start
```
It'll open up a browser window, and you should be able to see something like this

Congratulations, you've just created created your first react project! 🎊

We'll go through everything that's happening in the code and folder structure in just a minute, but first let's clear up some unwanted clutter.

To speed things up, you can download these starter files from here and copy replace the src folder. If you've done this, then you can just run npm start, skip the latter part and jump to Understanding the project structure.

If you'd still prefer to do things manually instead,

Inside the 'src' folder, you must be able to see a lot of files. Let's start by cleaning these.
Let's delete the all other files in src folder, till you're left with just these 3, 'App.js', 'index.js', 'index.css'.

You must be getting an error in your terminal. Let's fix this.

Open the 'index.js' file and remove all deleted imports, and serviceworker code. Till you're left with something similar to this

  import React from "react";
  import ReactDOM from "react-dom";

  import "./index.css";
  import App from "./App";

  ReactDOM.render(<App />, document.getElementById("root"));

Still facing an error? Let's open up the 'App.js' file.

Remove the import logo and app.css lines and replace the return statement with a h1 header. Your 'App.js' file should look like this

  import React from "react";

  function App() {
    return <h1>Hello World</h1>;
  }

  export default App;

Finally, open the index.css file, select all and delete its content.

Make sure that you're still running the npm start command. Now you should be able to see 'Hello World' in your browser window.

2. Understanding the project structure.

Let's open up our project folder in explorer or finder and you'll notice the first thing that we have is

'node_modules'. 'node_modules' simply contain all the different packages that we've installed using npm. We don't ever touch this folder very often, and you can ignore it.

A tip to keep in mind is that, we never commit node_modules folder in version control, as they can be generated on the host machine by running npm install.

'public' contains our index.html file, icon and a manifest file(which you can just ignore for now).
'package.json' This file holds some scripts and name of some packages, that basically start our react project. It's just a file created by the npm.
'src' most of our work is going to be in this folder.

Let's open the App.js.

Here in our App.js file, 'App' is a component. This particular implemenation is called functional component. We write a function exactly similar to how we define a function in vanilla javascript.

function App(){}

How it differs from vanilla javascript is that instead of returning a value, it returns a component, like

function App(){
  return (
    <h1>Hello World</h1>
  )
}

We can also write the same in a single line, using arrow functions.

const App = ()=> <h1>Hello World</h1>

Now, because we want to use this component in other pages, we need to export it by using

export default App

Let's jump back to our 'index.js' file and see how this component is being used.
You can see in the index.js file, what happens is we're again importing react, along with ReactDOM.

Then, we're using a method ReactDOM.render method to render our 'App' Component, followed by a comma and document.getElementById('root').

Okay, so what's happening here? What happens is, that when we use ReactDOM.render method, we ask it to render the App Component, by injecting it inside the element having an id of 'root'. What react does is it takes all our javascript code and generates the desired html from that.

You can verify this by opening the index.html file in the public folder. You must be able to see this

<div id="root"></div>

in the body tag.

3. Creating Dev Cards

Let's break down our initial idea of the app, showcasing three users into components. We can easily observe that the layout of these profile cards is quite similar in all three cases, except for the data enclosed in-between.

Let's first focus on building an html layout for this component. For the sake of simplicity, I've already included all the css required for this project in index.css in the starter files.

In case, you didn't download the starter files and went for the manual approach, just copy-paste the css from below into your index.css file.

  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css");

  * {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
  }
  :root {
    --main-color: #eee;
    --dark-color: #2c3e50;
    --text-color: #7f7f7f;
  }
  .wrapper {
    min-height: 100vh;
    background: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .card {
    width: 300px;
    height: 450px;
    background: white;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 0px 5px #233942;
  }

  .card img {
    background: var(--main-color);
    margin-top: 30px;
    border-radius: 50%;
    position: absolute;
    width: 150px;
    height: 150px;
    padding: 0.15rem;
    border: 0.2rem solid black;
  }
  .user-image {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
  }
  .user-image:before {
    content: "";
    height: 125px;
    width: 100%;

    background: var(--dark-color);
  }
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .user-info .name {
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
  }
  .user-info .handle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
  }
  .user-info .summary {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-color);
  }
  .location {
    text-align: center;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-color);
    padding: 2.5rem 0;
  }

  .location::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f3c5";
    padding: 0 0.2rem;
  }

Inside the src folder, let's create a new file card.js. Here, we'll be creating our card component.

Let's start by importing react and writing boilerplate function for our card.

  import React from "react";

  function Card() {
    return(
      <h1>This is a Card</h1>
    )
  }

  export default Card;

Let's save the changes and open our browser to see the results. Wait, it's not showing up? That's because we haven't imported this in our App component.

To fix this, let' open our App.js file and replace the <h1>Hello World</h1> with

  import React from "react";
  import Card from "./card";

  function App(){
    return (
      <div class="wrapper">
        <Card />
      </div>
    );
  }

  export default App;

Now you should be able to see, something like this in your browser

Although, this works, but if you open up your console (Ctrl/Cmd + Shift + J - Chrome, Ctrl/Cmd + Shift + K - FireFox). You must see a warning similar to this

** Why are we getting this warning message? **

This is because if you look closely in the App function, the div that we're returning has a class of wrapper. Although, this is the exact way how we define a class in html, but remember I mentioned earlier, this is not html but JSX ?

Because, JavaScript already has a class keyword used for a constructor, that's why we can't use class here, to fix this React came up with className. We can fix this by replacing our class with className like this

  import React from "react";
  import Card from "./card";

  function App(){
    return (
      <div className="wrapper">
        <Card />
      </div>
    );
  }

  export default App;

Once you do that, any warnings in the console would get resolved.

With that aside, let's jump back to our card.js file and build our html layout. I've already created a layout with the same classes that were used in our css to speed things up a little bit.

    function Card() {
      return (
        <div className="card">
          <div className="user-image">
            <img src="user.png" alt="User Profile"></img>
          </div>

          <div className="user-info">
            <div className="name">John Doe</div>
            <div className="handle">@johndoe</div>
            <div className="summary">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
          </div>
          <div className="location">New York</div>
        </div>
    );
  }

Once you save the changes, you should be able to see something like this in your browser.

Congratulations for making this far! Our app is finally taking it's shape. But this is all just static data, right? We want to showcase actual user data instead, on the basis of username.

For that we can use the built in Fetch API method in javascript to retrieve dev.to user's data from this endpoint : https://dev.to/api/users/by_username?url=bob . Replacing bob with your username. This endpoint sends a json data with the below structure, that we can then parse and display in our component.

  {
    "type_of": "user",
    "id": 1234,
    "username": "bob",
    "name": "bob",
    "summary": "Hello, world",
    "twitter_username": "bob",
    "github_username": "bob",
    "website_url": null,
    "location": "New York",
    "joined_at": "Jan 1, 2017",
    "profile_image": "https://res.cloudinary.com/...jpeg"
  }

The simplest way to use fetch API in javascript is to use it like this

  let username="ishandeveloper"; // You can write your username here

  fetch(`https://dev.to/api/users/by_username?url=${username}`)
    .then((res) => res.json())
    .then((data) => data);

But, how can we use this in our react app and we want to make sure to call this fetch method, only when a component is mounted/injected in the app tree. To do this, we'll have to use something called hooks.

Hooks are basically just some functions, that let us to fire up a callback, in certain events of our component. You can read more on that here.

For our goal, we'll be using the useState and useEffect hook.

a. useState() hook allows one to declare a state variable inside a function.

b. useEffect() hook allows functional components to manipulate DOM elements by executing a callback before each render.

Before we use any of them, we should import them from the react module, by replacing the import React from 'react' with

  import React, {useState, useEffect} from 'react';

So, let's write our function for fetching the data from API. We'll use useEffect hook to call a function that fetches the data.

We can simply do this by writing a callback function like this, before the return statement inside the functional component.

  let user={};

  useEffect(() => {

    async function fetchData() {
      let username="ishandeveloper"; // You can write your username here

      // Retrieves json data from DEV API
      let dev_data = await fetch(`https://dev.to/api/users/by_username?url=${username}`)
                      .then((res) => res.json())
                      .then((data) => data);

      user=dev_data;  // Sets the user data
    }

    fetchData();  // Calls the above function
  }, [] );

In the above code, we're passing a callback function in the useEffect hook, and creating another async function fetchData() inside that callback and calling that async function. This is because, using async directly in the useEffect function is not permitted.

You may also notice that we're passing an empty array ([]) as a second parameter to the useEffect. Why is that? That is because, by default the

useEffect callback is run every time when a component is either mounted or updated.

So, what's the issue then? Here's the catch. Using this approach, we get stuck in kind of a nastly loop. Because we're fetching the data when the component is mounted and then updating the data, on updating the data the component again re-renders, firing the useEffect callback, and hence we're stuck in a forever loop.

To fix this, we pass an array as a second argument, to avoid activating it on component updates. You can read more on this in the docs, by scrolling down to the last highlighted note here.

Although, it may seem like everything should work as expected, but the above code won't re-render the component, that is because we're not changing the state of the component. We need to explicitly tell react that the state of a component is changed. To achieve this, we we'll need to use the useState hook.

We can use it to store our user data like this

  const [user, setUser] = useState({});

Let's break this down

inside the useState method, we can add the initial value of the user variable, that we'd like to store, it can be an object, array, boolean, string, number anything.

The useState method, returns an array of two things, first is the value of the variable itself and second is a callback function that can be used to change the value of that variable.

So, instead of using user=dev_data in our above code, we'd call the setUser method inside the useEffect to update the user data. With these two changes, our above code would become

  const [user, setUser] = useState({});

  useEffect(() => {

    async function fetchData() {
      let username="ishandeveloper"; // You can write your username here

      // Retrieves json data from DEV API
      let dev_data = await fetch(`https://dev.to/api/users/by_username?url=${username}`)
                      .then((res) => res.json())
                      .then((data) => data);

      setUser(dev_data);  // Sets the user data
    }

    fetchData();  // Calls the above function
  }, [] );

Perfect, we're almost done! 🎊

Now that we have the data, let's pass it into our JSX code. In JSX, whenever we want to use JavaScript code inside the html looking tags, we enclose that javascript code with curly brackets {}.

On the basis of properties sent by the API Endpoint (mentioned above), here's how we can format that data in our jsx code.

  return (
    <div className="card">
      <div className="user-image">
        <img src={user.profile_image} alt="User Profile"></img>
      </div>

      <div className="user-info">
        <div className="name">{user.name}</div>
        <div className="handle">@{user.username}</div>
        <div className="summary">{user.summary}</div>
      </div>

      <div className="location">{user.location}</div>
    </div>
  );

With this, your entire code in card.js should look like this

  import React, {useState, useEffect} from 'react';

  function Card() {

    const [user, setUser] = useState({});

    useEffect(() => {

      async function fetchData() {
        let username="ishandeveloper"; // You can write your username here

        let dev_data = await fetch(`https://dev.to/api/users/by_username?url=${username}`)
                        .then((res) => res.json())
                        .then((data) => data);
        setUser(dev_data);  
    }
      fetchData();  
  }, [] );



  return (
    <div className="card">
      <div className="user-image">
        <img src={user.profile_image} alt="User Profile"></img>
      </div>

      <div className="user-info">
        <div className="name">{user.name}</div>
        <div className="handle">@{user.username}</div>
        <div className="summary">{user.summary}</div>
      </div>

      <div className="location">{user.location}</div>
    </div>
  );
}

export default Card;

With this done, you should be able to see something similar to this in your browser.

Congratulations and be proud of yourself for making this far! You really deserve a pat on the back 🤙

But we're not done yet.

4. Re-Using Components

This is what I consider to be one of the best things about React. Remember? Our initial goal was to create something similar to this.

In the above visualization, we've three cards showcasing three different profiles instead of one. So, how can we do that? It's pretty simple actually.

Let's open our App.js file. Here's how it looks like currently, right?

import React from "react";
import Card from "./card";

function App(){
  return (
    <div class="wrapper">
      <Card />
    </div>
  );
}

export default App;

You can observe that we've written a <Card /> tag here to create a Card Component. We can just duplicate this, twice to get 3 instances of this card Component.

Additionally we can also pass custom properties in this tag markup, these are called props, let's pass the usernames of different DEV users as username attribute.

import React from "react";
import Card from "./card";

function App(){
  return (
    <div class="wrapper">
      <Card username="ben"/>
      <Card username="ishandeveloper"/>
      <Card username="graciegregory"/>
    </div>
  );
}

export default App;

Hit save, and let's see the changes in our browser.

Wait, Something's weird.

Don't all of these look the same?

Yes, they do. Because although we've passed a username attribute in our cards, we're not using it.

Let's fix this. Open up card.js file in your editor.

The first thing that we'll need to do is accept those username props in our functional component.

Let's do that by adding a props parameter in the function. So that our function becomes like this

function Card(props) {
  ...........
}

Now we'll need to replace our hard-coded username with this username prop. It's pretty easy, just replace the let username="ishandeveloper" with let username=props.username

useEffect(() => {

    async function fetchData() {
      let username=props.username;
      ...........

Hit save, and that's it. You've successfully completed the whole project! 🎊

Here's the whole source code for card.js

in case you need it

import React, {useState, useEffect} from 'react';

function Card(props) {

  const [user, setUser] = useState({});

  useEffect(() => {

    async function fetchData() {
      let username=props.username; // You can write your username here

      let dev_data = await fetch(`https://dev.to/api/users/by_username?url=${username}`)
                      .then((res) => res.json())
                      .then((data) => data);
      setUser(dev_data);  
  }
    fetchData();  
}, [] );



return (
  <div className="card">
    <div className="user-image">
      <img src={user.profile_image} alt="User Profile"></img>
    </div>

    <div className="user-info">
      <div className="name">{user.name}</div>
      <div className="handle">@{user.username}</div>
      <div className="summary">{user.summary}</div>
    </div>

    <div className="location">{user.location}</div>
  </div>
);
}

export default Card;

If you'd like to download the project files, or see a live demo of the project, you can visit this repository.

ishandeveloper / Intro-To-React

This repository contains the starter files and final project files for the Intro To React article published by me on Dev.to and Personal Blog.

This repository contains the starter files and final project files for the Intro To React article published by me on Dev.to and Personal Blog

Built in React.js with ❤️

View Live Demo

devcards.ishandeveloper.com

Setup

Clone the repository

git clone https://github.com/ishandeveloper/Intro-To-React.git

Move to the desired folder

cd \Intro-To-React

To install the dependencies, simply write

npm install

To run the app, simply write

npm start

Learn More

You can learn more in the Create React App documentation.

Made with ♥ by ishandeveloper

View on GitHub

This was all about this tutorial, I hope this helped you to grasp onto some of the basic and most important aspects of react that can help you to get started easily.

We can discuss more on somewhat advanced topics such as Redux, Context API etc. in futher articles. I hope you enjoyed this one and any feedback we'd be highly appreciated.

This post is a part of my 'Intro' series, in which I'll be giving a beginner-friendly introduction to some of the most fascinating technologies, tools and frameworks.

If you're interested, I'm sure, you'd love to read this one

Intro To Linux [For Beginners]

Ishan Sharma ・ Jul 9 '20

#linux #beginners #productivity #bash

That's all for now, catch you guys in the next one 👋🏻.

Originally published on my personal blog.

Flutter APK Generator Action

Ishan Sharma — Thu, 10 Sep 2020 21:11:42 +0000

My Workflow

I have made a GitHub Action named 'APK Generator' for flutter projects to help in generating a new apk and pushing it to the repository, whenever changes are made in master branch.

With ease:

Generate new release apk's whenever changes are pushed
distribute and test your apps quickly among all collaborators
keep a track of every apk release version.

Submission Category:

Maintainer Must-Haves , DIY Deployments

Yaml File or Link to Code

An example workflow to set up your flutter apk generator action quickly.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Setting up Flutter SDK
        uses: subosito/flutter-action@v1
        with:
          channel: stable

      - name: Fetch Packages
        run: flutter pub get

      - name: Build APK
        run: flutter build apk

      - name: Copy APK To Parent Directory
        run: cp ./build/app/outputs/flutter-apk/app-release.apk ./app.apk

      - name: Commit APK
        run: git add ./app.apk

      - name: Configure Github
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "yourusername"
          git commit -m "Generated APK" -a

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

ishandeveloper / flutter-action-example

GitHub Action for generating a new apk and pushing it to the repository, whenever changes are made in master branch.

Flutter APK Generator Action

This repository is dedicated to a GitHub Action for generating a new apk and pushing it to the repository, whenever changes are made in master branch.

With ease:

Generate new release apk's whenever changes are pushed
distribute and test your apps quickly among all collaborators
keep a track of every apk release version.

THIS REPOSITORY WAS CREATED AS A PART OF ACTIONS HACKATHON HOSTED BY DEV.TO AND GITHUB

Usage

Example Workflow file

An example workflow to set up your flutter apk generator action quickly.

jobs
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Setting up Flutter SDK
        uses: subosito/flutter-action@v1
        with:
          channel: stable

      - name: Fetch Packages
        run: flutter pub get

      - name: Build APK
        run: flutter build apk

      - name: Copy APK To Parent Directory
        run: cp ./build/app/outputs/flutter-apk/app-release.apk ./app.apk

      -

…

View on GitHub

Additional Resources / Info

This action uses following two open-source actions under the hood to set up things easily.

ad-m / github-push-action

GitHub actions to push back to repository eg. updated code

GitHub Action for GitHub Push

The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

With ease:

update new code placed in the repository, e.g. by running a linter on it,
track changes in script results using Git as archive,
publish page using GitHub-Pages,
mirror changes to a separate repository.

Usage

Example Workflow file

An example workflow to authenticate with GitHub Platform and to push the changes to a specified reference, e.g. an already available branch:

jobs
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
        fetch-depth: 0 # otherwise, there would be errors pushing refs to the destination repository.
    - name: Create local changes
      run: |
        ...
    - name: Commit files
      run: |
        git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"

…

View on GitHub

subosito / flutter-action

Flutter environment for use in GitHub Actions. It works on Linux, Windows, and macOS.

flutter-action

Flutter environment for use in GitHub Actions. It works on Linux, Windows, and macOS.

Usage

Use specific version and channel:

steps
- uses: actions/checkout@v3
- uses: subosito/flutter-action@v2
  with:
    flutter-version: '3.0.5'
    channel: 'stable'
- run: flutter --version

Use latest release for particular channel:

steps:
- uses: actions/checkout@v3
- uses: subosito/flutter-action@v2
  with:
    channel: 'stable' # or: 'beta', 'dev' or 'master'
- run: flutter --version

Use latest release for particular version and/or channel:

steps:
- uses: actions/checkout@v3
- uses: subosito/flutter-action@v2
  with:
    flutter-version: '1.22.x' # or, you can use 1.22
    channel: 'dev'
- run: flutter --version

Use particular version on any channel:

steps
- uses: actions/checkout@v3
- uses: subosito/flutter-action@v2
  with:
    flutter-version: '2.x'
    channel: 'any

…

View on GitHub

Made with ♥ by ishandeveloper

Shared Preferences with Flutter

Ishan Sharma — Sun, 23 Aug 2020 20:10:33 +0000

Originally Published On My Personal Blog.
I have been playing with Flutter for almost 7 months now, and I'm enjoying every second of it. The main factor that I love about Flutter is that it enables you to be more creative and bring out that artist in you. As I have mentioned earlier in one of my articles, "Programming is all about embracing that artist in you 🎨".

The first tools that allowed me to get a sense of the same were 'HTML & CSS', they gave me the possibility of having this large empty canvas on the web and paint it in whichever way I want, while also giving me the ability to share it with anyone.

For those of you, who don't know what Flutter is, here's a brief introduction

What Is Flutter?

Flutter is a UI toolkit by Google and the open-source community which allows you to build beautiful, natively compiled applications for mobile, web, and desktop while maintaining a single codebase.

NOTE: If you haven't started out with Flutter yet and are planning to do the same, then this article will not be much beneficial to you

If you'd like to get started with flutter, refer to flutter's official documentation. It's one of the best documentation, I've ever read.

For those of you, who do know their way around, Let's jump right in.

What is Shared Preferences?

When you're working on some client apps, you'll often come across situations, where you need to store some data in the persistent storage of devices. For example, let's say you're using some OAuth client for one of your login methods, for that you'll need to store the access token on the client's device so that the client does not have to sign in again on relaunching the app.

Shared Preferences is one of the ways to do it. It provides a way of reading and storing such data in a key-value pair.

Please keep in mind that, by default the Flutter SDK does not come with any support for Shared Preferences. Luckily, The Flutter Team has built a package that helps to achieve the same, 'shared_preferences'.

Under the hood, it uses NSUserDefaults on iOS and SharedPreferences on Android to do it's magic.

Let's see a quick sample on how to work with the same.

Adding shared_preferences in pubspec.yaml
```
dependencies:
  shared_preferences: ^0.5.10
```
At the time of writing this article, the latest version of the package is 0.5.10. You can surely use whichever is latest.

Once you're done with above, just run flutter pub get in your terminal to get the packages.

Import the package in your dart file

  import 'package:shared_preferences/shared_preferences.dart';

Using the package

Now, that we've everything set up, let's dive into using it.

Here's is the typical usage of how we can use SharedPreferences to set & get any key-value pair.

var sp = await SharedPreferences.getInstance();
sdp.setString('key', 'value');
var saved_val = sp.getString('key');

But, this can add up to a lot of boilerplate add junk up your project code pretty quickly, plus it's not so easier to maintain a projec with code like this, and can occur to unnecessary debugging.

So, instead of using this and writing so much boilerplate code every time, we can create a helper service that will handle everything related to Shared Preferences.

import 'package:shared_preferences/shared_preferences.dart';

class StorageService{

  static StorageService _service;   

  static SharedPreferences _pref;

  static Future<StorageService> createInstance() async{
    if(_service==null){
      /* If service is not initialized */
      var _= StorageService._();    //Creates a local instance of service

      /* Creates an instance of Shared Preferences*/
      await _._getInstance();

      _service = _;
    }

    /* If service is already created return that */
    return _service;
  }

  void _getInstance() async {
    _pref = await _pref.getInstance();
  }

  /* This method accepts a key and returns, it's value*/
  static dynamic getValueFromKey(String key){
    if(_pref==null) return null;
    return _pref.get(key);
  }

  /* This method sets a String and returns true, if set succesfully*/
  static bool setValueAndKey(String key, String value){
    if(_pref==null) return null;
    return _pref.setString(key, value);
  }

}

and just like that, we're done with creating a service for our Shared Preferences.

It's actually a good practice to create an instance of this service, before we run our app. Doing this is pretty simple and straight-forward.

In our main.dart file, Let's convert our main function to async

void main() async{
  runApp(myApp);
  /*Just make sure to add this line*/
  await StorageService.createInstance();
}

and that's it. With all that set-up, we can easily use our service to store or read data from the storage.

To set a String in persistent storage, we can use :

StorageService.setValueAndKey("access_token", "771jkh21y3ubnm21behd21");

To retrieve the same, we can use :

StorageService.getValueFromKey("access_token");

When To Use Shared Preferences?

Now that you've got a basic crux of how easy it is to use Shared Preferences in flutter, the real question arises is how to decide when to use shared_preferences or sqflite or others.

It all comes down to your problem statement, on what you're looking for. If you're planning to store just some access_token or todo list tasks or maybe user's app preferences such as dark theme etc. Basically, If you're planning to store small values, then Shared Preferences is the optimal solution. We don't usually use sqflite for storing small values, because then you'll have to write a lengthy boilerplate and supporting classes.

But, please keep in mind that Shared Preferences should not be used as a solution for storing complex relational data on a device.

Let us discuss in the comments, what's your preferred way of storing data in persistent storage in Flutter or React-Native or any other ;)

That’s all for now, catch you guys in the next one 👋🏻.

WINAMP - Flutter CodePen Challenge

Ishan Sharma — Fri, 10 Jul 2020 11:36:13 +0000

As you might know, the Flutter CodePen challenge is currently ongoing for this month of July.

For those who don't know,

The Flutter CodePen challenge is a month-long challenge in July to build user experiences with CodePen’s new Flutter editor.

You can read more about it here.

QUICK SHOWCASE:

Note : The GIF might take some time to load.

This was my first Pen that I've ever created (I have forked a few before) on my own. It's a tribute to the WinAMP Music Player.

I originally made this as a part of the #Hack20 Flutter Hackathon. This project of mine was chosen as one of the Top 5 submissions this year.

Few Hacks

I have used a bunch of hacks towards building this project. Mainly, as currently there is no native support for playing audio files in flutter web, I used dart:js package to actually call the custom JavaScript functions using Dart.

All Thanks to this amazing post here.

A Brief Look At The Widget Tree

I have tried to make it as modular as possible by using a lot of widgets, and would be honest the code is somewhat messy, because I had to create all this in less than 8 hours.

 MaterialApp             
 └── LayoutBuilder
   └── UI
     └── Scaffold
       └── Navbar
       └── Main (Column)
         └── Row
           └── SidebarText
           └── MusicInfoWidget
           └── TrackName
           └── MiniScrollControls
           └── MonoStereoButtons
         └── Row
           └── Column 
             └── Seekbar
             └── Controls

Inspiration Behind This

Almost a decade ago, most of us used Winamp for listening to music on our PC devices. It was one of the first music player apps, that was compatible with most modern file types mp3, mp4, avi etc and it featured a wide variety of amazing skins, along with a radio and a browser.

This is just a small attempt to recreate that same experience using @flutter .

CodePen

Here's the actual codepen. If any bottom overflow occurs, please switch to full view.

Keep Fluttering 💜

Catch you guys in the next one. 🤙🏻

Intro To Linux [For Beginners]

Ishan Sharma — Thu, 09 Jul 2020 14:38:53 +0000

One of the most important tools for a programmer is the Operating System, it runs your whole device and it's important to choose the one that suits you the best!

In this post, I'll be sharing why Linux could be the best choice for your 'Developer' workflow.

Have never heard about Linux ? Don't worry, I'll explain everything. But first, allow me to share a quick fact with you, whether you know it or not,

YOU USE LINUX EVERYDAY.

Yes, you read that correct. Over 850,000 Android Phones running Linux are activated every single day. Meaning, about 100 devices came online, since you started reading this article 😉. Nearly 700,000 Televisions running Linux are sold every day. 8 out of 10 Financial Trades are powered by Linux. 9 out of 10 World's Supercomputers run Linux. Most of the websites you visit (Even this!) are powered by Linux. Hell, even most of the Satellites in the space, are powered by Linux!

That's the sheer scale, versatility & power of Linux!

and that is also one of the most important reasons that you should learn to use Linux, using Linux you'll be able to command such a huge variety of devices.

Let's get started.

What Is Linux?

Linux is actually a kernel.

The Linux kernel is the main component of a Linux operating system (OS) and is the core interface between a computer’s hardware and its processes. It communicates between the two, managing resources as efficiently as possible.

The Linux kernel is world's largest open source project in the computing history! It's available here.

Many Operating systems are based on this including Ubuntu, Kubuntu, Debian, Fedora, PopOS, Kali Linux etc. These are called Linux distributions.

When someone says to you that they use linux, what they actually mean is that they use some distribution of Linux.

I hope this is insightful and encourages someone else to make the jump into Linux for doing development work, I have enjoyed the OS so much that I'm actually taking courses on Linux administration and working on becoming a power user. Something I never felt inspired to do on Windows.

What's So Special About Linux?

Open source.
Flexibility
It's Free.
High Security.
Highly Customizable.

1. Open Source

Linux is great for the open-source benefits, which encompass not only the freedom of the software but also that a lot of the open-source projects do not track and sell user data like closed-source projects have been known to do. The customization of Linux is a second-tier factor, but still super imperative for users like you and I. I love to be able to use different shells, the package management solutions, the wide array of software to choose from, and the community support offered by the service. With Windows 10, so many trackers come on the system now, I would say privacy is a big win for Linux right now.

2. Flexibility

Linux is flexible. Linux is used in a lot of different types of computers. From smart toasters and refrigerators, IOT devices, internet routers, Android smartphones to satellites in the space. You can install Linux on your laptop or desktop today and be up and running with little set up! This flexibility is possible because a Linux operating system is designed to be the sum of many different tools that do one job and do it well. You could piece together a version of Linux that works for your device and is optimized for your needs.

3. It's Free

Linux is free. Free in multiple ways, you don't need to pay to use Linux and you're free to view, edit, and distribute the source code. When you buy a computer with Windows or mac-OS, the cost of creating and maintaining these operating systems is included in the price.

4. High Security

Linux is an open operating system, the codes which can be read by everyone. So there are far better chances that when thousands of contributors are collaborating over the same software, it is less probable for any bug or security loopholes to exist, even if they do, they'll usually be fixed in a short amount of time. Also, the ground up design of the Linux distributions is made to be redundant, users have a lower access rights, and, theoretically, even if a virus gets installed, the virus can only access local files and folders, and the system will remain safe.

5. Customization

If you know your way around the Linux system and you can customize every single corner of it, the whole project code is open-source, therefore you can modify the code to customize the OS and even distribute it as a distribution of your own.

So, Which one should I choose?

There are hundreds of Linux distributions to choose from.\

As the kernel is open source, it allows basically anyone to use it and build their own custom operating system. According to Wikipedia, there are over 600 Linux Distributions, you can check the facts here.

But for the general usage, Ubuntu, Fedora, Debian are much popular. For penetration testing, Kali Linux is a popular choice and also CentOS for enterprise grade.

Each of these distributions have their own strengths & weaknesses, so before switching to a distribution, do check out some sources about which one to choose. If you're absolute beginner, my personal recommendation would be using Ubuntu.

Basic Linux Commands

Now that you know what Linux is, why you should consider using it and once you've chosen a Distribution, it's time to dig into the actual OS.

Let's see some basic commands in Linux.

NOTE : Linux commands are case sensitive hence you need to be careful about what you are typing.

1. ls command

It refers to List directory contents. If you know windows you
would know that the command dir is used to list the contents in
a directory. In Linux, the ls command is used to list out files
and directories.

ls -l helps to paginate the output so you can view page by
page. Otherwise the listing scrolls down rapidly.

  ls -l filename|foldername

2. cd command

It helps to change the current directory. In linux, forward slash is used to denote the contents of a directory.

  cd /etc/

3. grep command

It is used to find text in a file. The grep command searches through many files at a time to find a piece of text you are looking for.

The below command will find all of the words in the linux.txt file that matched the word ‘ishandeveloper’.

  grep 'ishandeveloper' linux.txt

It's syntax is : grep PATTERN [FILE].

4. sudo/su command

There are some commands that need elevated rights to run on a Linux system. So you run them as a System Administrator which normal users cannot do.

su command changes the shell to be used as a super user and until you use the exit command you can continue to be the super user

sudo – if you just need to run something as a super user once, you can use the sudo command instead.

  sudo shutdown 5

5. pwd command

To identify the directory you are working in you can use the pwd command.
It displays the current working directory path and is useful when directory changes are often

pwd

6. touch command

It is used to create a new empty file in the existing directory.

  touch old.txt

It's syntax is : touch [FileName].

You'll notice that a new file 'old.txt' will be created in the current directory.

7. mv move command

It is used to move a file or rename a file.

  mv old.txt new.txt

8. cp copy command

It is used to make a copy of an existing file, with a new name in the same directory or similar name in another directory.

  cp new.txt newest.txt

It's syntax is : cp [SOURCEFILE] [DESTINATIONFILE].

9. rm command

This command is used to remove files in a directory or the directory itself. A directory cannot be removed if it is not empty.

  rm file.txt
  rm -r directory

rm –r removes all the contents in a directory and the directory as well.

It's syntax is : rm [name of the file]

10. mkdir command

It is used to create a new directory/folder in the current location

  mkdir newFolder

It's syntax is : mkdir [directory name]

11. chmod command [Thanks to @kailyons]
It is used to change the mode of a file system object. Files can have r – read, w- write and x-execute permissions.

It is fairly easy to change the permissions of a file for a quick edit. All you need to do is chmod +/-<permission_char>

To gain executable permissions for a script file you can use :

   chmod +x script.sh

To remove those permissions for a script file you can use :

   chmod -x script.sh

You can refer to this, to learn more about the permission codes in Linux.

12. apt –get command
apt -get is actually a very powerful and free front-end package manager. It is used to install new software packages, remove available software packages, upgrade existing software packages as well as upgrade the entire operating system. Here, apt – stands for advanced packaging tool.

  sudo apt-get update

The above command will update all the packages currently installed on your system.

Linux doesn’t end here. There are several other amazing features including ssh or others, which just can't be covered in a single post. You can learn more about it by reading articles, documentation or explore them on your own by using Linux in your daily life.

That's all for now, catch you guys in the next one 👋🏻.

Originally Published on my Personal Blog.

A Quick Dive Into ES6

Ishan Sharma — Mon, 06 Jul 2020 17:58:46 +0000

ECMAScript 2015 or ES2015 is a significant update to JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. Therefore, ES2015 is often called ES6.

What we'll be covering today

Const, let and var
Default Arguments
Arrow Functions
Template literals
Map, Reduce and Filter
Array and Object Destructuring
Iterables and Loopings
Rest and Spread Operator
Object Literals
Classes in ES6s
Promises
Async and Await
"new" and "this" keyword

1. Const, let and var

1.1 CONST

Const defines a constant variable which can't be changed throught the code.
Declaring a variable with const is similar to let when it comes to Block Scope.

For example

const x = 100;

/* 
    Re-Initializing The Variable.
    This will throw an error, as CONST variable can't be changed 
*/
x = 200;

/*
    Here 'y' variable is defined in a block. 
    It can't be accessed outside the scope of this block.

    The output of this block would be : 
    1
*/
{
  const y = 1;
  console.log(y);
}

/*
    Will throw an error, CONST y is undefined
*/
console.log(y);

1.2 LET

"let" defines a variable which can be changed anywhere throught the code.
It can be re-initialised but not re-declared in the same scope.
It has a block scope.

let x = 100;

/* 
    Re-Initializing The Variable.
    This will update the value of x to 200 
*/
x = 200;

/* 
    Re-Initializing The Variable in different scopes.
*/

{
  let x = 200;
}
/*  
Will display 100 as output
*/
console.log(x);

1.3 Var

Var keyword is an old method for declaring variables in javascript.
Value of variables declared with var can be changed at any point, during runtime.
Var has only a global scope.
MDN recommends to not to use var keyword after release of let and const in ES6.

var x = 10;

for (var i = 0; i < 5; i++) {
  var x = 20;
  console.log(x); //Returns 20
}

console.log(x); // Returns 20

2. Default Arguments

Default argument or default parameter allows you to set a default value for your function parameter/argument if no value is passed for the same.

Default Argument with ES5

function product(x, y) {
  return x * y;
}
/*
    Let's just call the function without passing any argument
    Output would be : NaN
*/
product();

Handling Default Argument with ES5

function product(x, y) {
  const x = typeof x !== "undefined" ? x : 1;
  const y = typeof y !== "undefined" ? y : 1;
  return x * y;
}
/*
    Since we're handling 
*/
product();

In a case when no parameter is passed, we have to explicitly handle the error by setting default values of a & b. This doesn't look like a good way of handling default arguments.

Handling Default Argument with ES6

function add(a = 5, b = 10) {
  return a + b;
}

add(); // a=5, b=10, sum = 15;

add(2, 3); // a=2, b=3, sum = 5;

add(4); // a=4, b=10, sum=14 ;

Default value of A and B will be only used when no parameter is passed.

3. Arrow Functions

An arrow function is a syntactically compact alternative to a regular function expression without its own binding to this, super,

Regular Functions (ES5)

function multiply(x, y) {
  return x * y;
}

multiply(10, 4);

Arrow Functions (ES6)

// Example 1
const multiply = (x, y) => {
  return x * y;
};

multiply(10, 4);

4. Template Literals

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces. The expressions in the placeholders and the text between the backticks (``) get passed to a function. They are used to concatenate the parts into a single string.

Let's see an example on formatting strings in ES5.

`js
# STRING FORMATTING (WITHOUT ES6)

function welcome(name){
    const greetings = 'Hello, ' + name + ' What''s up?';
    return greetings;
}

greet('Ishan');

/*
Will display output as :
Hello, Ishan What's up?
*/
`

`js
# STRING FORMATTING (WITH ES6)

function welcome(name){
    const greetings = `Hello, ${name} What's up?`;
    return greetings;
}

greet('Ishan');

/*
Will display output as :
Hello, Ishan What's up?
*/

You might be able to clearly reciprocate the main benefits of the latter approach.

RECAP

Template Literals are enclosed by back tick(``) instead of single or double quote.
Placeholders can be inserted between template literals. These are indicated by the dollar sign and curly braces.

5. Map, Reduce and Filter

Map, reduce, and filter are all array methods which were introduced in ES6. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

Map Method

The map() method is used for creating a new array from an existing one, while passing each element of the array to a function.

For example: Let's say we have a people array that contains multiple persons as object. But, we just need the age of each person.

How can we do that? Here's one

const people = [
  { name: "Ishan", age: 19, profession: "Developer" },
  { name: "Rohit", age: 20, profession: "Student" },
  { name: "Bhavesh", age: 18, profession: "Enterprenuer" },
];

const ages = people.map((person) => person.username);

console.log(ages); // [ 19, 20, 18 ]

Filter Method

Filter method take a function parameter which applies on each array element, then whichever element satisfies the parameter condition returns in the new array.

For example: Let's consider that in the above people example, I only want to filter those users, who have an age of greater than 18 years.

const people = [
  { name: "Ishan", age: 19, profession: "Developer" },
  { name: "Rohit", age: 20, profession: "Student" },
  { name: "Bhavesh", age: 18, profession: "Enterprenuer" },
];

const aboveEighteen = people.filter((person) => person.age > 18);

console.log(aboveEighteen);
/* [{ name: "Ishan", age: 19, profession: "Developer" },
    { name: "Rohit", age: 20, profession: "Student" } ] */

Reduce Method

The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

For example : Let's say we just want to find the sum of all numbers in an array

const numbers = [1, 2, 3, 4, 5, 6, 7];

// Here prevSum will contain the total sum, upto the previous iterated number.
const sum = numbers.reduce(function (prevSum, num) {
  return prevSum + num;
}, 0);
// Here '0' indicates the initial value of sum, before reducer function is exectued.

console.log(sum); // 28

6. Array and Object Destructuring

Destructuring in JavaScript is a simplified method of extracting multiple properties from an array by taking the structure and deconstructing it down into its own constituent parts. It helps in improving the readability and performance of our code.

Destructuring in ES5


//  Object Destructuring
  var person = {
    name : 'Ishan',
    age : 19',
    profession : 'Developer'
  }

  const name = person.name; // Deepak
  const age = person.age; // dipakkr
  const profession = person.profession // 12345

// Array Destructuring

  const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"];

  const day1 = days[0];
  const day2 = days[1];
  const day3 = days[2];

Destructuring in ES6

//  Object Destructuring
  var person = {
    name : 'Ishan',
    age : 19',
    profession : 'Developer'
  }

  const { name, age, profession } = person;

  console.log(name);
  console.log(age);
  console.log(profession);

// Array Destructing

  const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"];

  const [day1, day2, day3] = days;

  console.log(day1); // Monday
  console.log(day2); // Tuesday
  console.log(day3); // Wednesday

7. Iterables and Iterators

ES6 introduced a new way to interact with JavaScript data structures — iteration. Here is the list of interable data types in JavaScript.

Iterable	Description
Array	We can access each individual element by iterating over an array.
Map	We can iterate over the key-value pair in a list/array.
Strings	Strings are both iterable & array like, so we can access each character
Sets	Collections of values that we can iterate through elements

Please note that plain objects are not iterable.

for...of is a new feature in ES6 that can be helpful in accessing the interables element more easily. The for...of statement simply creates a loop iterating over iterable objects. For example,

Iterating using for...of

const array = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20];

for (var item of array) {
  console.log(item);
}

Iterating without using for...of

const array = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20];

for (var item in array) {
  console.log(array[item]);
}

As clearly depicted above, in the latter case we can access interable elements directly with for...of method more easily.

8. Spread and Rest Operator

Spread and Rest Operators are denoted by ... three dots. These three dots can either be used as Rest Parameter or Spread Operator.

Rest Parameter

It simply collects all the remaning arguments into an array and pass them one by one. Hence, allowing a function to be called with any number of arguments, no matter how it is defined.

Without Using Rest Parameter

// Function to print sum of numbers.

function addition() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum = sum + arguments[i];
  }
  return sum;
}

console.log(addition(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

Here arguments is a special array-like object that contains all arguments by their index.

Using Rest Paramter

function addition(...numbers) {
  let sum = 0;
  for (let i of numbers) {
    sum += i;
  }
  return sum;
}

console.log(addition(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

Spread Operator

Using the spread operator, we can expand array/object/string into a single list or other element.
Spread operator is exactly the reverse of Rest operator, instead of collecting arguments into an array, it expands an array's elements.

For example

/*
  Let's say we want to find the maximum number in two arrays using the
  inbuilt Math.max() function

  Note that Math.max() function expects a list of numeric arguments, not a single array.
*/

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert(Math.max(...arr1, ...arr2)); // 8

9. Object Literals

Object literals are used to create an object in javascript.

Object can be initialised by directly using the variable name. See Example 1 below.
Object's method in ES5 require function statement. This is no longer required in ES6, you can directly return statement. See Example 2 below.
Object literals key in ES6 can be dynamic. Any Express can be used to create a key.

Let's see object literals in action, through an example.

Object Literals with ES6

const username = "ishandeveloper";
const name = "Ishan";
const password = "SecretNuclearLaunchCode";
const githubID = "https://github.com/ishandeveloper";

const person = {
  username,
  name,
  password,
  githubID,
};

console.log(person.username);
console.log(person.githubID);

10. Classes in ES6

Classes support prototype-based inheritance, constructors, super calls, instance and static methods

There are two ways to define classes in JavaScript.

Class Declaration
Class Expression

Class Declaration

In order to define class using-declaration method you need to use class keyword followed by className. The class name must start with Capital letter.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Class Expression

Class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body.

let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

console.log(Rectangle.name);

11. Promises

For supporting asynchronous programming, JavaScript uses a callback. However, the callback implementation has a major problem which is called as Callback hell. Promises come to rescue to solve the problem of callback hell.

Promises are a pattern that greatly simplifies asynchronous programming by making the code look synchronous and avoid problems associated with callbacks.

A Promise has three states.

pending: Initial state, neither fulfilled nor rejected.
fulfilled: It means that the operation completed successfully.
rejected: It means that the operation failed.

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve("Success ! "), 2000);
});

promise
  .then(function (result) {
    console.log(result);
  })
  .catch(function (error) {
    console.log(error);
  });

/*
  Result
  Success !
*/

DISCLAIMER : Some of the examples and explanations above are inspired from different sources, and rephrased to some extent in my own words, that help me understand the concepts better, all the credit belongs to the respective authors.

Originally published on my personal blog.

Google Foobar 2020

Ishan Sharma — Wed, 24 Jun 2020 04:19:22 +0000

Recently, a few weeks ago, I was browsing on the internet and searching for some C++ related concepts and got prompted with a link to the foobar challenge by google. This challenge acts as a recruiting tool for google. This Google foobar site allows access to questions only for people with a invite.

In this post, I'll write about the challenge, the problems that were posed for me in the challenge and my approach.

The Google Foobar challenge consisted of 5 Levels.

Level 1 consisted of a single question.           [48 hours/question]

Level 2 consisted of two questions.                [72 hours/question]

Level 3 consisted of three questions.             [96 hours/question]

Level 4 consisted of two questions.                [15 days/question]

Lastly, Level 5 consisted of one question.     [24 days/question]

Please Note : The Code Solutions In This Post Are Written Entirely In Python.

Level 1

- Problem a : 'The cake is not a lie!'

Commander Lambda has had an incredibly successful week: she completed the first test run of her LAMBCHOP doomsday device, she captured six key members of the Bunny Rebellion, and she beat her personal high score in Tetris. To celebrate, she's ordered cake for everyone - even the lowliest of minions! But competition among minions is fierce, and if you don't cut exactly equal slices of cake for everyone, you'll get in big trouble.

The cake is round, and decorated with M&Ms in a circle around the edge. But while the rest of the cake is uniform, the M&Ms are not: there are multiple colors, and every minion must get exactly the same sequence of M&Ms. Commander Lambda hates waste and will not tolerate any leftovers, so you also want to make sure you can serve the entire cake.

To help you best cut the cake, you have turned the sequence of colors of the M&Ms on the cake into a string: each possible letter (between a and z) corresponds to a unique color, and the sequence of M&Ms is given clockwise (the decorations form a circle around the outer edge of the cake).

Write a function called solution(s) that, given a non-empty string less than 200 characters in length describing the sequence of M&Ms, returns the maximum number of equal parts that can be cut from the cake without leaving any leftovers.

Languages
- To provide a Python solution, edit solution.py
- To provide a Java solution, edit Solution.java

● Test Cases

Your code should pass the following test cases. Note that it may
also be run against hidden test cases not shown here.

Python Cases

  Input:
  solution.solution("abcabcabcabc")
  Output:4

  Input:
  solution.solution("abccbaabccba")
  Output: 2

Java Cases

  Solution.solution("abcabcabcabc")
  Output: 4

  Input:
  Solution.solution("abccbaabccba")
  Output: 2

Approach

To solve this, The first thing I did was to visualize the problem, so as to get a better understanding. I just imagined watching a round cake from top view and assigned few letters (a,b,c,d) to different sections of it in a repeating pattern.

Now that we have visualized it. We can easily infer that, basically all we have to do is to look for repeating sub-strings in the string.

Of course, We need to keep important things in mind before we begin actually writing the code, The function would need to return 0 if the cake could not be cut without leftovers or if the string was empty. We need to identify possible M&M patterns from the input string. The pattern surely could not be longer than half the length of the string. We need to check to see if there were remainders when chopping the string with the possible patterns and discard those results.

def substring_check(length, sub_str):
    for i in range(0, length-1):
        if(sub_str[i] == sub_str[i+1]):
            if(i == length-2):
                return length
            else:
                continue
        else:
            return 1

def solution(s):
    parts = 1   #Initially, Let's just assume that cake can be divided into just one piece

    for i in range(1, len(s)):
        sub_str = []
        if(len(s) % i == 0):
            for j in range(0, len(s), i):
                sub_str.append(s[j:j+i])
            parts = substring_check(len(sub_str), sub_str)
            if(parts != 1):
                return parts
    return parts

and Voila! just like that we have completed the first Level of Foobar Challenge!

Level 2

- Problem a : 'Lovely Lucky Lambs'

Being a henchman isn't all drudgery. Occasionally, when Commander Lambda is feeling generous, she'll hand out Lucky LAMBs (Lambda's All-purpose Money Bucks). Henchmen can use Lucky LAMBs to buy things like a second pair of socks, a pillow for their bunks, or even a third daily meal!

However, actually passing out LAMBs isn't easy. Each henchman squad has a strict seniority ranking which must be respected - or else the henchmen will revolt and you'll all get demoted back to minions again!

There are 4 key rules which you must follow in order to avoid a revolt:

The most junior henchman (with the least seniority) gets exactly 1 LAMB. (There will always be at least 1 henchman on a team.)
A henchman will revolt if the person who ranks immediately above them gets more than double the number of LAMBs they do.
A henchman will revolt if the amount of LAMBs given to their next two subordinates combined is more than the number of LAMBs they get. (Note that the two most junior henchmen won't have two subordinates, so this rule doesn't apply to them. The 2nd most junior henchman would require at least as many LAMBs as the most junior henchman.)
You can always find more henchmen to pay - the Commander has plenty of employees. If there are enough LAMBs left over such that another henchman could be added as the most senior while obeying the other rules, you must always add and pay that henchman.

Note that you may not be able to hand out all the LAMBs. A single LAMB cannot be subdivided. That is, all henchmen must get a positive integer number of LAMBs.

Write a function called solution(total_lambs), where total_lambs is the integer number of LAMBs in the handout you are trying to divide. It should return an integer which represents the difference between the minimum and maximum number of henchmen who can share the LAMBs (that is, being as generous as possible to those you pay and as stingy as possible, respectively) while still obeying all of the above rules to avoid a revolt. For instance, if you had 10 LAMBs and were as generous as possible, you could only pay 3 henchmen (1, 2, and 4 LAMBs, in order of ascending seniority), whereas if you were as stingy as possible, you could pay 4 henchmen (1, 1, 2, and 3 LAMBs). Therefore, solution(10) should return 4-3 = 1.

To keep things interesting, Commander Lambda varies the sizes of the Lucky LAMB payouts. You can expect total_lambs to always be a positive integer less than 1 billion (10 ^ 9).

Languages
- To provide a Python solution, edit solution.py
- To provide a Java solution, edit Solution.java

● Test Cases

Your code should pass the following test cases. Note that it may
also be run against hidden test cases not shown here.

Python Cases

  Input:
  solution.solution(143)
  Output:3

  Input:
  solution.solution(10)
  Output: 1

Java Cases

  Solution.solution(143)
  Output: 3

  Input:
  Solution.solution(10)
  Output: 1

Approach

At first glance, this question seems a bit tricky. Basically, they are asking the difference between no. of Fibonacci numbers whose sum is less than total_lambs and no. of powers of 2 whose sum is less than total_lambs (* a catch in the rule number 4).

Once we grasp the hold of the question, coming up with the solution is pretty easy.

def solution(total_lambs):
    # Your code here
    maxlist=[]
    i=0
    henchmen=0
    while i<= total_lambs:
        currentvalue=2**i
        maxlist.append(currentvalue)
        henchmen=henchmen + currentvalue
        if henchmen > total_lambs:
            break
        i=i+1

    lambs=[1,1]
    fibhenchmen=2
    y=2
    while y<= total_lambs:
        value=lambs[y-1] + lambs[y-2]
        lambs.append(value)
        fibhenchmen=fibhenchmen + int(lambs[y])
        if fibhenchmen > total_lambs:
            break
        y=y+1

    answer = len(lambs) - len(maxlist)

    return abs(answer)

- Problem b : 'Hey! I already did that.'

Commander Lambda uses an automated algorithm to assign minions randomly to tasks, in order to keep her minions on their toes. But you've noticed a flaw in the algorithm - it eventually loops back on itself, so that instead of assigning new minions as it iterates, it gets stuck in a cycle of values so that the same minions end up doing the same tasks over and over again. You think proving this to Commander Lambda will help you make a case for your next promotion.

You have worked out that the algorithm has the following process:

Start with a random minion ID n, which is a nonnegative integer of length k in base b
Define x and y as integers of length k. x has the digits of n in descending order, and y has the digits of n in ascending order
Define z = x - y. Add leading zeros to z to maintain length k if necessary
Assign n = z to get the next minion ID, and go back to step 2

For example, given minion ID n = 1211, k = 4, b = 10, then x = 2111, y = 1112 and z = 2111 - 1112 = 0999. Then the next minion ID will be n = 0999 and the algorithm iterates again: x = 9990, y = 0999 and z = 9990 - 0999 = 8991, and so on.

Depending on the values of n, k (derived from n), and b, at some point the algorithm reaches a cycle, such as by reaching a constant value. For example, starting with n = 210022, k = 6, b = 3, the algorithm will reach the cycle of values [210111, 122221, 102212] and it will stay in this cycle no matter how many times it continues iterating. Starting with n = 1211, the routine will reach the integer 6174, and since 7641 - 1467 is 6174, it will stay as that value no matter how many times it iterates.

Given a minion ID as a string n representing a nonnegative integer of length k in base b, where 2 <= k <= 9 and 2 <= b <= 10, write a function solution(n, b) which returns the length of the ending cycle of the algorithm above starting with n. For instance, in the example above, solution(210022, 3) would return 3, since iterating on 102212 would return to 210111 when done in base 3. If the algorithm reaches a constant, such as 0, then the length is 1.

Languages
- To provide a Python solution, edit solution.py
- To provide a Java solution, edit Solution.java

● Test Cases

Your code should pass the following test cases. Note that it may also be run against hidden test cases not shown here.

Python Cases

  Input  : solution.solution('210022', 3)
  Output : 3

  Input  : solution.solution('1211', 10)
  Output : 1

Java Cases

  Input  : Solution.solution('210022', 3)
  Output : 3

  Input  : Solution.solution('1211', 10)
  Output : 1

Approach

This seemed quite difficult to grasp when I first read the question, I just got puzzled with all that 'mumble-jumble'. So, I read the problem again, for a few times & then just started coding my way to achieve the desired results, as stated by the algorithm process above.

Please note that the functions 'dTob' & 'bTod' actually represent decimal to binary and binary to decimal conversions respectively.

def dTob(d, b):
    digits = []
    while d > 0:
        digits.insert(0, str(d % b))
        d  = d / b
    return ''.join(digits)

def bTod(b, c):
  n = 0
  for d in str(b):
    n = c * n + int(d)
  return n

def negative(x, y, b):
  if b==10:
    return int(x) - int(y)

  dx=bTod(x,b)
  dy=bTod(y,b)
  dz=dx-dy
  return dTob(dz, b)

def solution(n, b):
    arr=[]
    while True:
        i = "".join(sorted(str(n), reverse=True))
        j = "".join(sorted(str(n)))
        k = negative(i,j,b)

        k2 = len(str(k))
        i2 = len(str(i))

        if (k2) != i2:
            k = k * pow(10 ,(i2-k2))

        for index, item in enumerate(arr):
          if item == k:
            return index + 1
        arr = [k] + arr
        n = k

With the above problems out of the way, we can actually proceed to much more interesting challenges.

Level 3

- Problem a : 'Fuel Injection Perfection'

Commander Lambda has asked for your help to refine the automatic quantum antimatter fuel injection system for her LAMBCHOP doomsday device. It's a great chance for you to get a closer look at the LAMBCHOP - and maybe sneak in a bit of sabotage while you're at it - so you took the job gladly.

Quantum antimatter fuel comes in small pellets, which is convenient since the many moving parts of the LAMBCHOP each need to be fed fuel one pellet at a time. However, minions dump pellets in bulk into the fuel intake. You need to figure out the most efficient way to sort and shift the pellets down to a single pellet at a time.

The fuel control mechanisms have three operations:

Add one fuel pellet
Remove one fuel pellet
Divide the entire group of fuel pellets by 2 (due to the destructive energy released when a quantum antimatter pellet is cut in half, the safety controls will only allow this to happen if there is an even number of pellets)

Write a function called solution(n) which takes a positive integer as a string and returns the minimum number of operations needed to transform the number of pellets to 1. The fuel intake control panel can only display a number up to 309 digits long, so there won't ever be more pellets than you can express in that many digits.

For example:

solution(4) returns 2: 4 -> 2 -> 1

solution(15) returns 5: 15 -> 16 -> 8 -> 4 -> 2 -> 1

Languages
- To provide a Python solution, edit solution.py
- To provide a Java solution, edit Solution.java

● Test Cases

Your code should pass the following test cases. Note that it may also be run against hidden test cases not shown here.

Python Cases

Input  : solution.solution('15')
Output : 5

Input  : solution.solution('4')
Output : 2

Java Cases

Input  : Solution.solution('15')
Output : 5

Input  : Solution.solution('4')
Output : 2

Approach

I believe this problem statement is quite easy to grasp and doesn't need much explanation, basically we have an input number and we have to change that number to 1, by performing any of the three operations defined above.

We have to return the minimum possible number of operations required to achieve the same.

def solution(n):

  n=int(n)
  steps=0

  while(n!=1):
      # IF EVEN, I CAN DIVIDE IT BY 2
      if(n%2==0):
          n=n/2
      # ELSE IF NOT EVEN, I NEED TO EITHER ADD OR DELETE ONE
      # FUEL PALLETE, WHICHEVER EASIER
      elif((n==3) or (n%4==1)):
          n-=1
      else:
          n+=1

      #INCREASE THE NO. OF STEPS
      steps=steps+1

  return steps

- Problem b : 'Bomb, Baby!'

You're so close to destroying the LAMBCHOP doomsday device you can taste it! But in order to do so, you need to deploy special self-replicating bombs designed for you by the brightest scientists on Bunny Planet. There are two types: Mach bombs (M) and Facula bombs (F). The bombs, once released into the LAMBCHOP's inner workings, will automatically deploy to all the strategic points you've identified and destroy them at the same time.

But there's a few catches. First, the bombs self-replicate via one of two distinct processes:
Every Mach bomb retrieves a sync unit from a Facula bomb; for every Mach bomb, a Facula bomb is created;
Every Facula bomb spontaneously creates a Mach bomb.

For example, if you had 3 Mach bombs and 2 Facula bombs, they could either produce 3 Mach bombs and 5 Facula bombs, or 5 Mach bombs and 2 Facula bombs. The replication process can be changed each cycle.

Second, you need to ensure that you have exactly the right number of Mach and Facula bombs to destroy the LAMBCHOP device. Too few, and the device might survive. Too many, and you might overload the mass capacitors and create a singularity at the heart of the space station - not good!

And finally, you were only able to smuggle one of each type of bomb - one Mach, one Facula - aboard the ship when you arrived, so that's all you have to start with. (Thus it may be impossible to deploy the bombs to destroy the LAMBCHOP, but that's not going to stop you from trying!)

You need to know how many replication cycles (generations) it will take to generate the correct amount of bombs to destroy the LAMBCHOP. Write a function solution(M, F) where M and F are the number of Mach and Facula bombs needed. Return the fewest number of generations (as a string) that need to pass before you'll have the exact number of bombs necessary to destroy the LAMBCHOP, or the string "impossible" if this can't be done! M and F will be string representations of positive integers no larger than 10^50. For example, if M = "2" and F = "1", one generation would need to pass, so the solution would be "1". However, if M = "2" and F = "4", it would not be possible.

Languages
- To provide a Python solution, edit solution.py
- To provide a Java solution, edit Solution.java

● Test Cases

Your code should pass the following test cases. Note that it may also be run against hidden test cases not shown here.

Python Cases

Input  : solution.solution('2', '1')
Output : 1

Input  : solution.solution('4','7')
Output : 4

Java Cases

Input  : Solution.solution('2', '1')
Output : 1

Input  : Solution.solution('4','7')
Output : 4

Approach

From the first look, what I can infer is that I basically have to find the number of subtractions that are required to find the Greatest Common Divisor of M & F.

def solution(x, y):

    x, y = int(x), int(y)
    # 'x' is for Mach Bombs
    # 'y' is for Facula Bombs

    cycles = 0
    # Counts the number of replication cycles

    while (x != 1 and y != 1):

        # If number of Mach bombs and Facula bombs are same
        # Then, It is impossible to replicate to the desired
        # Total number of bombs

        if x % y == 0:
            return "impossible"

        else:
            # cycles = cycles + 1
            # ABOVE ASSIGNMENT, CAUSES TWO TEST CASES TO FAIL
            # FOR EXAMPLE FOR 7/3 : 2 CYCLES ARE CONSUMED
            cycles = cycles+int(max(x, y)/min(x, y))

            x, y = max(x, y) % min(x, y), min(x, y)

    return str(cycles+max(x, y)-1)

- Problem c : 'Queue To Do'

You're almost ready to make your move to destroy the LAMBCHOP doomsday device, but the security checkpoints that guard the underlying systems of the LAMBCHOP are going to be a problem. You were able to take one down without tripping any alarms, which is great! Except that as Commander Lambda's assistant, you've learned that the checkpoints are about to come under automated review, which means that your sabotage will be discovered and your cover blown - unless you can trick the automated review system.

To trick the system, you'll need to write a program to return the same security checksum that the guards would have after they would have checked all the workers through. Fortunately, Commander Lambda's desire for efficiency won't allow for hours-long lines, so the checkpoint guards have found ways to quicken the pass-through rate. Instead of checking each and every worker coming through, the guards instead go over everyone in line while noting their security IDs, then allow the line to fill back up. Once they've done that they go over the line again, this time leaving off the last worker. They continue doing this, leaving off one more worker from the line each time but recording the security IDs of those they do check, until they skip the entire line, at which point they XOR the IDs of all the workers they noted into a checksum and then take off for lunch. Fortunately, the workers' orderly nature causes them to always line up in numerical order without any gaps.

For example, if the first worker in line has ID 0 and the security checkpoint line holds three workers, the process would look like this:

0	1	2	/
3	4	/	5
6	/	7	8

where the guards' XOR (^) checksum is 0^1^2^3^4^6 == 2.

Likewise, if the first worker has ID 17 and the checkpoint holds four workers, the process would look like:

17	18	19	20	/
21	22	23	/	24
25	26	/	27	28
29	/	30	31	32

which produces the checksum 17^18^19^20^21^22^23^25^26^29 == 14.

All worker IDs (including the first worker) are between 0 and 2000000000 inclusive, and the checkpoint line will always be at least 1 worker long.

With this information, write a function solution(start, length) that will cover for the missing security checkpoint by outputting the same checksum the guards would normally submit before lunch. You have just enough time to find out the ID of the first worker to be checked (start) and the length of the line (length) before the automatic review occurs, so your program must generate the proper checksum with just those two values.

Languages
- To provide a Python solution, edit solution.py
- To provide a Java solution, edit Solution.java

● Test Cases

Your code should pass the following test cases. Note that it may also be run against hidden test cases not shown here.

Python Cases

Input  : solution.solution(0, 3)
Output : 2

Input  : solution.solution(17, 4)
Output : 14

Java Cases

Input  : Solution.solution(0, 3)
Output : 2

Input  : Solution.solution(17, 4)
Output : 14

Approach

From the first look, what I can infer is that I basically have to find the number of subtractions that are required to find the Greatest Common Divisor of M & F.

def solution(x, y):

    x, y = int(x), int(y)
    # 'x' is for Mach Bombs
    # 'y' is for Facula Bombs

    cycles = 0
    # Counts the number of replication cycles

    while (x != 1 and y != 1):

        # If number of Mach bombs and Facula bombs are same
        # Then, It is impossible to replicate to the desired
        # Total number of bombs

        if x % y == 0:
            return "impossible"

        else:
            # cycles = cycles + 1
            # ABOVE ASSIGNMENT, CAUSES TWO TEST CASES TO FAIL
            # FOR EXAMPLE FOR 7/3 : 2 CYCLES ARE CONSUMED
            cycles = cycles+int(max(x, y)/min(x, y))

            x, y = max(x, y) % min(x, y), min(x, y)

    return str(cycles+max(x, y)-1)

and with that out of the way, we have finally now succesfully completed Level 3 of the Foobar Challenge.

Let's get some rest and we'll move to much more interesting & 'mind-boggling' challenges in Level 4 & 5, afterwards.

To be updated...

Originally published on my personal blog.

Building a WikiPedia Search Engine App with JS

Ishan Sharma — Wed, 17 Jun 2020 17:40:49 +0000

I honestly believe that the best way to learn any new technology, programming language, is by building something in that language and putting our knowledge to some practical use.

I receive plenty of messages and queries from some of my dearest friends and juniors asking how to start development, and how to put together the skills they've learnt to actually create something.

While, there are many tutorials on the internet, but most of them are not so beginner friendly, they tend to make a lot of assumptions on the reader's part.

I hope to do my fair duty towards my friends and juniors by writing tutorials on this blog to help grasp several concepts in development and get some apps on their portfolio.

So, without further ado, Let's Jump right, in!

What We're Gonna Build

I will take you through how to build a Wikipedia Search App with JavaScript. This project was listed in one of the challenges at FreeCodeCamp.

You can actually view a live version of the finished project in your browser at,

wikisearch.ishandeveloper.com

This is the practical working of the app, from a user-perspective:

User can search for Wikipedia articles in a search box and view the results in the app itself.
User can visit a random Wikipedia article using the random button.

Pre-Requisites

Knowledge of basics of HTML, CSS & JavsScript is required as this tutorial is intended for beginners who want to learn how to create simple web apps using JavaScript.

If you've never built any app before, don't worry! We'll get through this, together!

If you get stuck at any point in this tutorial, you can always refer to the project source code available on GitHub.

Let's Get Started

I have already created a repository with the starter files for this project, you can download them, here or from the Github Repository.

These starter files contain the basic markups and stylings for this tutorial. We're gonna concentrate only on seeing how the JavaScript works.

Just to ensure that we're all on the same page, before we start

Download the Starter Files, from above.
Open the project in your preferred code editor (I prefer VSCode).
Open index.html in your browser (or live-server, if you know that sort of thing).
In your code editor, open 'main.js' file.

In your browser, you should be able to see, a search bar 🔍 like this :

Once that's done. Let's proceed to add functionality to our app.
For the sake of easiness, I'm actually splitting this section into three parts, each part targetting a different objective.

1. Redirecting user to a random article.
2. Sending/Recieving search query data from Wikipedia API .
3. Displaying the search query results on our page.

Let's start with the first one, as it is the easiest to implement.

1. Redirecting user to a random article.

Remember? One of the functionalities we wanted to add initially was, 'User can visit a random Wikipedia article using the random button'.

It is fairly easy to do so. In the startup files, I have already created a button, which is actually just an icon enclosed within a link, which I styled to look like a button.

<a href="" class="icon random-ico">
  <i class="fas fa-random"></i>
</a>

To achieve this, we can use :

https://en.wikipedia.org/wiki/Special:Random

This is a special link, you can try opening it in your browser and you'll be redirected to a random wikipedia article each time. Here's how it can be implemented.

<a
  href="https://en.wikipedia.org/wiki/Special:Random"
  target="_blank"
  rel="noopener noreferrer"
  class="icon random-ico"
>
  <i class="fas fa-random"></i>
</a>

Now, you should be able to click on the random button, which takes you to a random wikipedia article.Voila! Just like that, our first task is complete!

Here's a quick breakdown of the above code,

href attribute refers to the url of the page we're redirecting to.
target="_blank" helps to ensure that the link always opens in a new tab.
rel="noopener noreferrer" is actually here to help fix a security vulnerability with 'target=_blank', you can read more on that, here.

2. Sending/Recieving search query data from Wikipedia API .

Okay, so the first task here would be to actually retrieve the data entered into the search bar by the user. Let's do that.

// Grab a reference to form element and store it
const form = document.querySelector(".search-form");
// Add an event listener to form submit event
form.addEventListener("submit", handleSubmit);

Here's a breakdown:

querySelector() : It returns the first Element within the document that matches the specified selector, more on MDN docs.
addEventListener : It takes two arguments: the DOM event we want to listen for and and the function that will run when the event is triggered (in this case, 'submit' is the DOM event & 'handleSubmit' is the function), more on MDN docs.

Now, let's move ahead and create handleSubmit() function.

function handleSubmit(e) {
  e.preventDefault();
}

Here's a breakdown:

You may have noticed 'e' as the parameter which is the event that triggered the execution of the function.
e.preventDefault() : By default, the browser has a tendency to refresh the page, whenever a form is submitted. To prevent this, we're using 'preventDefault()' method, more on MDN docs.

Our page doesn't reload on form submission, but our function doesn't do anything, right? Let's fix this.

function handleSubmit(e) {
  e.preventDefault();
  let query = document.querySelector(".search-input").value;
  query = query.trim();
  console.log(query);
}

You can press Ctrl+Shift+J / Cmd+Opt+J to open console in chrome and should see an output, once you submit a query in the search bar.

With this, almost half of the job for this step is done! Now, all we have to do is to send the search query to the Wikipedia API and fetch the results.

I have already specified the relevant URL parameters, that we'll be using for this tutorial.

https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&origin=*&srlimit=25&utf8=&format=json&srsearch=SEARCH_QUERY

I'll break this down, quickly:

&origin=* : It helps us to bypass CORS restrictions, refer here for more.
&srlimit=25 : It helps to specify how many total pages to return (25 in this case), refer here for more.
&format=json : It helps to specify that we are expecting a JSON response refer here for more.
&srsearch= : It will contain user's search query refer here for more.

You can refer to this page for more details.

Moving on, we need to make an actual request to Wikipedia and retrieve the results from there. So, let's replace 'console.log(query);' with 'getResults(query);'.

The handleSubmit function should now look like this :

function handleSubmit(e) {
  e.preventDefault();
  let query = document.querySelector(".search-input").value;
  query = query.trim();
  getResults(query);
}

Now, let's create this getResults() function and fetch the search results. We'll be using template literals to add user's search query parameter into the API URL, mentioned above.

function getResults(query) {
  const url = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&origin=*&srlimit=25&utf8=&format=json&srsearch=${query}`;

  fetch(url)
    .then((res) => res.json())
    .then((data) => console.log(data))
    .catch((e) => console.log(`ERROR : ${e}`));
}

Let's break this down:

Here we're using back ticks ( ` ) for storing the api url in a variable, for more on template literals, refer to MDN docs.
fetch() : This is an inbuilt method, it takes the url as a parameter specifies that we are expecting a JSON response from Wikipedia & returns a Promise Object. more on MDN docs
The first .then() expression returns another Promise so we call a second .then() on that to handle the JSON data and log it to the console.
.catch() : is used to catch any errors, that may occur, it'll log an error message to the console if something goes wrong.

Try typing into the input field and submit the form. The raw JSON data will be logged to the console. And with this, we have successfully completed Step 2.

3. Displaying the search query results on our page.

This is the final step of the tutorial, we have recieved the input, we have got the results, now all we need to do is to display those results.

If you take a closer look at the RAW JSON data, logged to the console in the previous step. You'll see that the data object consists of several keys.

The key named 'search' is the only one useful to us for now. We can access it using data.query.search.

Now that we have the search results, let's first modify the getResults function to display results.

function getResults(query) {
  const url = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&origin=*&srlimit=25&utf8=&format=json&srsearch=${query}`;

  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      putResults(data.query.search);
    })
    .catch((e) => console.log(`ERROR : ${e}`));
}

Now, let's create a new function'putResults()' to which will recieve the search data and add display them on our web page.

function putResults(sResults) {
  // Refer to `.results` section
  const searchResults = document.querySelector(".results");
  searchResults.innerHTML = "";
  // Loop over each result
  sResults.forEach((result) => {
    //Generate a wikipedia page url for each result
    const url = encodeURI(`https://en.wikipedia.org/wiki/${result.title}`);

    //Insert a result item as a child one by one into the parent conainter
    searchResults.insertAdjacentHTML(
      "beforeend",
      `<div class="result">
      <h3 class="result-title">
        <a href="proxy.php?url=${url}" target="_blank" rel="noopener">${result.title}</a>
      </h3>
      <span class="result-snippet">${result.snippet}</span><br>
      <a href="proxy.php?url=${url}" class="result-link" target="_blank" rel="noopener">${url}</a>
    </div>`
    );
  });
}

And that's it! Is it? Wait! Don't just leave yet. Let's see what is actually happening in the code above.

Here's a quick breakdown :

encodeURI() : Please note that URLs Cannot Contain Spaces. Therefore, this method is necessary as it helps to convert unformatted text (with whitespaces), into encoded text.
- For example: If I pass a search query for 'Linus Torvalds' as a paramter, encodeURI function will return 'Linus%20Torvalds'. For more, refer to MDN docs.
sResults.forEach() : This method is used to iterate over each item of an array, Please Note that instead of using array.forEach, we can also use array.map(). For more, refer to MDN docs.
insertAdjacentHTML : It takes two arguments: The position where we want to append the element and a string containing the HTML to insert on the page. For more info, refer to MDN docs.

Here's The Complete Code

In case, you need it.

const form = document.querySelector(".search-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(e) {
  e.preventDefault();
  let query = document.querySelector(".search-input").value;
  query = query.trim();
  getResults(query);
}

function getResults(query) {
  const url = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&origin=*&srlimit=25&utf8=&format=json&srsearch=${query}`;

  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      putResults(data.query.search);
    })
    .catch((e) => console.log(`ERROR : ${e}`));
}

function putResults(sResults) {
  const searchResults = document.querySelector(".results");
  searchResults.innerHTML = "";
  sResults.forEach((result) => {
    const url = encodeURI(`https://en.wikipedia.org/wiki/${result.title}`);

    searchResults.insertAdjacentHTML(
      "beforeend",
      `<div class="result">
      <h3 class="result-title">
        <a href="proxy.php?url=${url}" target="_blank" rel="noopener">${result.title}</a>
      </h3>
      <span class="result-snippet">${result.snippet}</span><br>
      <a href="proxy.php?url=${url}" class="result-link" target="_blank" rel="noopener">${url}</a>
    </div>`
    );
  });
}

With that, we've reached the end of this tutorial. I hope you enjoyed it 😄

This was just to give you a brief look into putting together everything you might've learnt about web development into an actual project.

If you want to improve this project,

Here are some ideas

Show a progress indicator while the request is processing.
Add search suggestions in the search bar, when the user is typing.
Display results on more than one page.

Originally posted on my personal blog

If you'd like to see more quick tutorials such as this, do let me know in the discussions below!