DEV Community: Linda

How to test your API with Hoppscotch

Linda — Wed, 30 Jun 2021 15:31:46 +0000

In this article, I will show you how to interact with APIs by making requests while showing you some of the cool features of Hoppscotch.

Introduction to Hoppscotch

Hoppscotch is an online open-source API request builder built by Liyas Thomas and contributors that helps you create requests faster, saving precious time on development. It is lightweight, effective, and efficient,

Hoppscotch is a totally free open-source project.

Hoppscotch has a low processing demand because it can run simply on the browser.

Hoppscotch is supported by a wide range of browsers and devices, plus it can be installed as a PWA (Progressive Web App), making it even accessible.

Hoppscotch offers multiple features though, in this article, we shall focus on using it as a testing tool for APIs.

What is an API?

API is the acronym for Application Programming Interface, a software intermediary that allows two applications to talk to each other. It is often a set of functions that allows applications to access data and interact with external software components, operating systems, or microservices.

A great analog used to describe APIs and what they do is a restaurant. In this analogy, the following roles are assigned:

API: acts as the waiter that serves you.
Order: acts as the API Request, where data to be fetched or action to be triggered is specified.
Chef: acts as whatever external component you are trying to interact with, also provides the API.
Meal: data gotten from the external Component.

When you step into a restaurant, you inform the waiter (API) of your order (API request), and the waiter communicates your order to the Chef (external component). After a hopefully short period of time, the waiter returns with your meal (Data).

The same way a chef provides you with a waiter is the same way companies provide you with an API to communicate how you want to use their services & the data you need from them.

Now that you have a good idea of what APIs are and what they do, let’s dive into the basics of API using Hoppscotch.

Introduction to API Basics

You can read the rest of the article on Aviyel

Introduction to HTTP Cookies

Linda — Sun, 09 May 2021 15:29:12 +0000

I heard the british use biscuits instead of cookies...weird.

Okay, let's focus.

What are Cookies

Cookies, more properly called HTTP cookies, are small bits of data stored as text files on a browser. Cookies associate bits of data to a specific user.

Cookies are mainly used for three purposes:

Session management

Logins, shopping carts, game scores, or anything else the server should remember.

Personalization

User preferences, themes, and other settings.

For example, a user's preferences such as language and preferred theme could be saved for future sessions.

Tracking

Recording and analyzing user behavior.

When a user visits a shopping website and searches for an item, the item gets saved in their browser history. Cookies can read browsing history so similar are shown to the user next time they visit.

Types of Cookies

Session cookies

Session cookies, also known as 'temporary cookies', help websites recognise users and the information provided when they navigate through a website. Session cookies only retain information about a user's activities for as long as they are on the website. Once the web browser is closed, the cookies are deleted.

Permanent cookies

Permanent cookies are also known as 'persistent cookies'. They remain in operation even after the web browser has closed. For example they can remember login details and passwords so web users don't need to re-enter them every time they use a site.

Third-party cookies

Third-party cookies are installed by third-parties with the aim of collecting certain information from web users to carry out research into, for example, behaviour, demographics or spending habits. They are commonly used by advertisers who want to ensure that products and services are marketed towards the right target audience.

Flash cookies

Flash cookies are also known as 'super cookies'. They are independent from the web browser. They are designed to be permanently stored on a user's computer. These types of cookies remain on a user's device even after all cookies have been deleted from their web browser.

Zombie cookies

Zombie cookies are a type of flash cookie that are automatically re-created after a user has deleted them. This means they are difficult to detect or manage. They are often used in online games to prevent users from cheating, but have also been used to install malicious software onto a user's device.

Secure Cookies

Only HTTPS websites can set secure cookies, i.e., cookies with encrypted data. Mostly, the checkout or payment pages of e-commerce websites have secure cookies to facilitate safer transactions. Similarly, online banking websites are required to use secure cookies for security reasons.

Creating Cookies with Vanilla JavaScript

NOTE: For the code below to work, your browser has to have local cookies support turned on.

JavaScript can create, read, and delete cookies with the document.cookie property.

With JavaScript, a cookie can be created like this:

document.cookie = "name=Linda Ojo";

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed:

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC";

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC; path=/";

Handling Cookies using just vanilla JavaScript can get tedious real quick that's why I prefer using the JavaScript Cookie Package

Handling Cookies with JavaScript Cookie Package

JavaScript Cookie is a simple lightweight JavaScript API for handling cookies. It works on all browsers, accepts any character, heavily tested and requires no dependency. Awesome!

Installation

Run the command below in your root folder to install js-cookies.

npm install js-cookie --save

Cookie Attributes

Expire: define when the cookie will be removed. Value can be a Number which will be interpreted as days from time of creation or a Date instance.

Path: a String indicating the path where the cookie is visible.

Domain: a String indicating a valid domain where the cookie should be visible. The cookie will also be visible to all subdomains.

Secure: Either true or false, indicating if the cookie transmission requires a secure protocol (https).

Create a cookie

We can create a cookie that valid across the entire website by providing the name and the value as shown below.

import Cookies from 'js-cookie';

Cookies.set('name', 'value');

We can specify how long it takes for a cookie to expire by passing an object that contains the number of days before expiration as the third argument in the Cookie.set method. The cookie that's created below expires after 7 days. By default, a cookie is removed when the user closes the browser.

import Cookies from 'js-cookie';

Cookies.set('name', 'value', { expires: 7 });

Next,We can create an secure expiring cookie that's only valid to the path of the current page. The path is add to the previous Object which contains the expiration date.

Cookies.set('name', 'value', { expires: 7, path: '', secure: true });

Read cookie

The point of creating cookies is so we can use them later. We can access already existing cookies using the Cookie.get method. Let's create and read a real cookie called 'theme'.

import Cookies from 'js-cookie';

Cookies.set('theme', 'dark');
Cookies.get('theme') // => 'dark'

You can also update a cookie by overriding it's value

Cookies.set('theme', 'light');

Now the theme cookie has a value of 'light'.

We can get all cookies present at once by calling Cookies.get method without passing in any arguments as shown below.


Cookies.get(); // => { theme: 'light' }

Delete cookie

You can delete cookies that are globally accessible running the Cookie.remove method with just the first argument which is value

Cookies.remove('theme');

Note:cwhen deleting a cookie and you're not relying on the default attributes, you must pass the exact same path and domain attributes that were used to set the cookie.
let's set and delete a cookie valid to the path of the current page as an example.

Cookies.set('direction', 'north', { path: '' });
Cookies.remove('direction'); // fail!
Cookies.remove('direction', { path: '' }); // removed!

That's all folks. Read more of my articles

Beginner's Introduction to Axios

Linda — Mon, 29 Mar 2021 20:27:13 +0000

Making HTTP requests to fetch/save data is a common task for any client-side JavaScript application. Axios is a JavaScript library that's used to perform HTTP requests. It works in both Browser and Node.js platforms.

It supports all modern browsers, including support for IE8 and higher.

Adding Axios to your project

You can add Axios to your project using any of the methods listed below.

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Making a "GET" request

Let's query the DummyAPI to retrieve a list of users, using axios.get().

import axios from 'axios';

const response = axios.get('https://dummyapi.io/data/api/user?limit=10')
const users = response.data

Since Axios always returns the query in an object data, we can rewrite the code above as using destructuring

import axios from 'axios';

const {data} = axios.get('https://dummyapi.io/data/api/user?limit=10')
const users = data;

Making a "POST" request

A POST request is used to add new data on the Backend. A POST request is similar to a GET request, but instead of axios.get, you use axios.post.

A POST Request also accepts a second argument which is an Object containing the data that is to be added.

Let's add a new user below.

import axios from 'axios';

let newUser = {
    name: 'John',
    email: 'john@gmail.com'
    Gender: Male,
}

addUser (user) => {
    axios.post('https://dummyapi.io/data/api/user/', user)
}

addUser(newUser);

This is a quick introduction for beginners. Axios enables you to do so much more. You can read about more advanced Axios methods in this Article by Faraz Kelhini

How to use Media Queries in HTML, CSS and JavaScript

Linda — Mon, 22 Mar 2021 21:08:20 +0000

This was originally posted at lindaojo.com

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?) resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.

Media Queries in HTML

We can use media queries to determine what <link> to use in the <head> of an HTML file as shown below.

<html>
  <head>
    <link rel="stylesheet" href="all.css" media="all" />
    <!-- Use for screens that have a width of at least 50rem -->
    <link rel="stylesheet" href="small.css" media="(min-width: 50rem)" />
    <!-- Use for screens that have a width of at least 80rem -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 80rem)" />
</html>

We can use media queries on the <style> element too.

<style media="all and (min-width: 800px)">
  h1 {
    font-size: 2rem;
    color: green;
  }
</style>

Media queries can also be placed within the <picture> element. How? By specifying them on the <source> element which lets us pass multiply image options.

<picture>
  <!-- Use image in landscape mode -->
  <source srcset="alligator.png" media="(orientation: landscape)">
  <!-- Use image in portrait mode -->
  <source srcset="girrafe.png" media="(orientation: portrait)">
</picture>

Media Queries in CSS

This is the most common environment for writing media queries.

The @media rule is used in media queries to apply different styles for different media types/devices.

@media only screen and (min-device-width: 500px) and (max-device-width: 8000px) {
  .container {
    display: hidden;
  }
}

Media Queries in JavaScript

You can add media queries to your JavaScript by using the window.matchMedia() method.

For instance, if we want to change the background color of the <body> to red when the screen width exceeds 600px, we can do that by first creating a constant using "window.matchMedia()" as shown below.

// Create a media condition that targets viewports at least 768px wide
const mediaQueryCondition = window.matchMedia( '( min-width: 600px )' )

if ( mediaQueryCondition.matches ) {
    document.body.style.cssText = `
        background-color: red;
    `
}

That's it folks! You can now add media queries anywhere you want in the whole wild world.

See you next week!

Tips on Preparing a Great Developer Resume

Linda — Tue, 16 Mar 2021 10:08:06 +0000

If you are just starting out on your job search and have been wondering about how to prepare a great resume, then you will love these tips! Remember, the goal of your resume is to sell yourself enough to get a meeting with a recruiter.

Tailor your resume to the role

Research the role you are applying for and focus all your points around the criteria listed.

Different companies have different needs. Tailoring your resume to reflect that you meet the required needs not only improves your chance of getting a callback but also shows you have a genuine interest in working at that company.

You should use the job description as a guide by mirroring keywords and requirements in your resume.

For instance, if the major tool for the available role is mentioned, you should reference projects built with that tool.

Optimise for readability

On average, most single-page resumes would be scanned through within a minute. It's important to ensure that one can read through your resume within a minute with ease and leave with a good understanding of who you are.

A great way to improve readability is by having a simple layout that lets you communicate effectively.

Canva has great templates which you can use to create beautiful resumes.

Relevant things first, Relevant things only

You have the task of making a good impression within a short period of time. Every point should signal to the recruiter that you are a good fit for the team.

You should only write things on your resume that would improve your chances by sharing useful information with the recruiter. You should not write skills on your resume that are not relevant to the present role you are applying to.

You can have multiple resumes that contain different sets of skills if you are applying to different roles at once. For instance, you should not use the same resume to apply for a Technical Writer and Frontend Developer role.

Use numbers and results

Using numbers and outlining the impact you had in past roles does a better job at communicating your relevance to a team instead of listing vague responsibilities.

For instance, instead of saying:

" Built complex software features, while working directly with the product owner."

You should state a major feature you built and the effect it had on the company profits or user experience e.t.c.

E.g
"Implemented a new payment feature with a team of UI designers and product managers which lead to a 11% increase in monthly revenue."

Don't Quantify your skills

Simply list the skills that you possess and let the recruiter be the judge of your proficiency. Don't cut yourself short by quantifying for skills e.g

❌ JavaScript - 60%

❌ HTML - 70%

❌ Angular - 60%

❌ React - 70%

Please don't do this 👆🏾. Not only does it reduce readability it could also reduce your chances.

Be honest

You should never lie on your resume. If you are going to get that role, you want to get it the right way.

You shouldn't lie about your years of experience, skills, or interests. Honesty saves everyone's time.

Be confident

Be confident in your skills no matter what level you are on. The presence or absence of confidence can be sensed through your resume. You have to believe in yourself

Pay attention to details

Make sure to proofread your resume and also bring on a second set of eyes.
Having multiple grammatical errors in your resume does not speak well of you and could indicate that you don't pay attention to details.

You would be required to communicate effectively in any job role. Having good writing skills is always a plus.

Always save your resume as a PDF file

Can you imagine doing all this work and it shows up all scrambled up on the recruiter's screen? To avoid this, always have your resume with the pdf format. That way you can be sure the recruiter would be viewing your resume exactly how you designed it.

That's all folks, If this was helpful, share it!

4 Handy tools for Frontend Developers

Linda — Mon, 08 Mar 2021 15:38:57 +0000

Front-end developers link together the world of design and technology, packaging up the utility of the back end in an inviting way for users to interact with. Doing this requires different skills and to be honest it can get difficult real quick.

Today, I share 4 useful tools and websites that make my work a lot easier on some days.

Grid Generator by Sarah Drasner

CSS Grid Layout is a layout system available in CSS. It is a 2-dimensional system, that handles both columns and rows. grid systems can get complicated especially when dealing with multiple boxes of different sizes.

CSS Grid Generator is a great handy tool cause it lets you set up a Grid system for even complex layouts with ease.

Automatically generate the code for different Grid styles with ease. Thank you Sarah!

Animate.css

Animate.css is a small and easy-to-use CSS animation library. It contains ready-to-use, cross-browser animations for use in your web projects. Animate.css can be installed as a package or a CDN. You could also copy the styles of a specific animate from the website and use them directly in your project.

GreenSock Animations Platform (GSAP)

If you want to have more control of your animations, you can definitely consider GSAP. It can animate DOM elements, CSS, SVG, CSS, canvas and so much more.

Edidiong Asikpo wrote a great article on How to use the GSAP ScrollTrigger plugin in React. Get a close look at a practical use of GSAP for your next project.

Squoosh

Compressing a website’s image files is one of the quickest and easiest ways to make that site load faster for users.
Squoosh is my "go to" when compressing and converting images. It also has a CLI that allows you to compress many images at once.

You can read more about improving a website's performance, How to Improve Lighthouse Score - Performance

That's all folks, Feel free to let me know what your favourite frontend handy tools are. See you next week!

Read more of my articles

Detailed Explanation of CSS Position Property

Linda — Mon, 01 Mar 2021 13:11:54 +0000

There are two important types of properties you need to know about when positioning elements on a screen. The first one, position:, specifies the type of positioning method to be used for an element (i.e. static, relative, absolute or fixed).

The second is a set of properties (top:, bottom:, right:, left:), used to specify the offset for the element. Top, bottom, right & left are calculated differently based on the positioning method used, and are ignored for position: static.

The position property in CSS defines how an element will be positioned on a page. The top, right, bottom, and left properties determine the final location of positioned elements.

Static Positioning

A static positioned element is always positioned according to the normal flow of the page. HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, right, and z-index properties. In the example below, the green box "B" has a static position.



.static {
  position: static;
  /* This is often not needed since HTML elements have a static position by default */
}

Relative Positioning

This acts similar to static positioning except that you can position it relative to itself using top, right, bottom, left.

Relative positioning tells the element to move relative to where it would have landed if it just had the default static positioning. If you give an element relative positioning and tell it to have a top of 40px, it moves down 40px from where it otherwise would have been.



.relative {
  position: relative;
  top: 40px;
  left: 30px;
}

The CSS above changes the position of Box-B as shown below.

Absolute Positioning

Absolute positioning tells the browser that the element being positioned should be removed from the normal flow of the document and will be placed in an exact location on the page based on the values specified in top, bottom, left & right. it won't affect how the elements before it or after it in the HTML are positioned on the Web page.

Absolute elements will by default head to the top-left of their closest parent that has a non-static position.



.absolute {
  position: absolute;
  top: 10px;
  right: 0px;
}

Fixed Positioning

Fixed elements are positioned relative to the entire HTML element.

Fixed positioning is similar to absolute positioning, but, fixed positioning anchors an element to the browser window. If you scroll up and down, the fixed element stays put even as other elements scroll past.



.fixed {
  position: fixed;
  top: 20px;
  right: 30px;
}

Sticky Positioning

Sticky position is a combination of both Relative and Fixed position into one. it starts out as relative but once it scrolls out of the page it becomes fixed position.

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.



.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 20px;
  right: 30px;
}

Here is a codepen that includes the other positions including Sticky. Scroll down to see the Sticky position in action.

That's all folks, See you next week!

Introduction to Vue Watchers

Linda — Mon, 22 Feb 2021 13:36:47 +0000

In this article, we will be discussing watchers, one of the core concepts in Vue.js.

Watchers, just as the name implies are used to watch out for changes in a property previously defined in the data object. It is triggered whenever the value of that property changes.

Let's create a watcher for an "answer" property below. The watcher must have the same name as the property being observed.

export default {
  data() {
    return {
      answer: ''
    }
  },
  watch: {
    answer: function() {
      console.log(this.answer)
    }
  },
}

The Watcher above will log the "answer" property to the console anytime its value changes.

We can also access the old property value and new property value in a Watcher by adding two optional parameters as shown below.

export default {
  data() {
    return {
      answer: ''
    }
  },
  watch: {
    answer: function(oldAnswer, newAnswer) {
      console.log(`The answer has been changed from ${oldAnswer} to ${newAnswer}`)
    }
  },

}

If we want to monitor the changes of items within an array or the properties of an object we use "deep". Let's watch out for changes in the "person" Object below.

export default {
  data() {
    return {
      person: {
          name: 'Linda',
          gender: 'Female',
          signedIn: false
      }
    }
  },
  watch: {
    person: {
      deep: true, // Vue now watches for changes within the person Object
      handler() {
        if (this.person.isSignedIn) this.records++
      }
    }
  },

}

As a practical example, I have created a simple "App" where we use a Watcher to monitor the number of times a user has signed.

That's all folks, See you next week!

How to Set Up Pagination in Gridsome

Linda — Mon, 15 Feb 2021 22:06:28 +0000

What is Gridsome

Gridsome is a modern website development framework for creating fast and secure websites that can be deployed anywhere. Static HTML files are generated to create SEO-friendly markup that hydrates into a Vue.js-powered SPA once loaded in the browser. Gridsome has also made it easier than ever before to set up pagination 😄

Steps to set up Gridsome Pagination

I am assuming that you already have a Gridsome blog that fetches blog posts and you are adding pagination as a new feature. In that case, these are the steps to follow.

- Setup Pagination in GraphQL query

- Import Gridsome's Pager component

- Add necessary styling

Setup Pagination in GraphQL query

Data collection is handled by the GraphQL query in Gridsome. We can use the @paginate directive in the GraphQL query to add automatic pagination for a collection.

The query will receive a $page: Int variable you can use to load sources for a specific page.

query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
      }
    }
  }
}

In the example above, each page will contain 10 blog posts.

Import Gridsome's Pager component

Gridsome has a built-in Pager component which can be imported for easy pagination. Import and add the Pager component from Gridsome.

import { Pager } from 'gridsome';

export default {
  components: {
    Pager
  }
 }

Though the Pager component can accept multiple properties, the only required properties are "total number of Pages" and "current Page". These properties can be found in "pageInfo" which we pass into the Pager component.

<Pager :info="$page.allBlogPost.pageInfo" />

Add Custom Styles

We can style the pagination container using normal CSS classes but need to use the :linkClass property to style the links.

Template

<Pager :info="$page.allBlogPost.pageInfo"
       class="pager-container"
       linkClass="pager-container__link"  />

Styles

<style scoped lang="scss">
  .pager-container {
    display: inline-block;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    color: black;

    &__link {
      text-align: center;
      padding: 0.6rem 1.2rem;
      color: white;
      text-decoration: none;
    }
  }

  .active {
    background-color:  rgb(44, 201, 180);
  }
</style>

That's all folk. I have been writing consistently for 4 months 🎉😄

You might also enjoy my article on How to add Code snippets to Gridsome

Read more of my articles

Conditional Rendering in Vue

Linda — Mon, 08 Feb 2021 22:06:45 +0000

Conditional rendering is a term to describe the ability to render different user interface (UI) markup depending on if a condition is true or false.

Conditional Rendering can be implemented in Vue using the directives below

💚 v-if

💚 v-else

💚 v-else-if

💚 v-show

v-if

The "v-if" directive can used to conditionally render an element including other elements that may be within it. The block will only be rendered if the directive’s expression returns a truthy value.

Example

<h1 v-if="showGreeting">Welcome Home!</h1>

Because "v-if" is a directive, it has to be attached to a single element. But what if we want to toggle more than one element?

You can also add conditional rendering to a group of elements by wrapping them in a "" element as shown below

<template v-if="Chores"> 🙃
    <h1>Chores</h1>
    <ul>
        <li>Wash the cat</li>
        <l1>Do the dishes</li>
    <ul>
</template>

"" element serves as an invisible wrapper and will not be displayed in the final rendered result.

v-else

The "v-else" directive can only be used immediately after the "v-if" directive. They follow the pattern of a typical if-else statement.

The content within the "v-else" element will be rendered if the condition set in the "v-if" element is not met.

<template v-if="Chores"> 🙃
    <h1>Chores</h1>
    <ul>
        <li>Wash the cat</li>
        <l1>Do the dishes</li>
    <ul>
</template>
<h1 v-else> Watch television</h1> 😀

v-else-if

The "v-else" element gives you only one other option to render if "v-if" element's condition is not met.

"v-else-if" serves as an else-if block for "v-if". It can also be chained multiple times so it enable you to have more than one option to render.

<template v-if="Chores"> 🙃
    <h1>Chores</h1>
    <ul>
        <li>Wash the cat</li>
        <l1>Do the dishes</li>
    <ul>
</template>
<h1 v-else-if="Homework"> Do homework</h1>
<h1 v-else> Watch television</h1> 😀

v-show

"v-show" is very similar to "v-if"

The difference is that an element with "v-show" will always be rendered and remain in the DOM; "v-show" only toggles the display CSS property of the element.

"v-show" does not work in the "template" element nor does it work with "v-else".

"v-if" has higher toggle costs while "v-show" has higher initial render costs. So use "v-show" if you need to toggle something very often, and prefer "v-if" if the condition is unlikely to change at runtime.

You could support my work by sharing this article, thanks!

Read more of my articles

Simple Explanation of Async-Await in Javascript

Linda — Mon, 01 Feb 2021 12:05:11 +0000

This was orginally posted at lindaojo.com

To fully appreciate the use of Async-Await you must first understand that by default, JavaScript is synchronous.

Synchronous Functions

In synchronous functions, operations run simultaneously and you can't specify pausing or waiting points.

Example

function solveC() {
    const A = 1;

    const B = 2;

    const C = A + B;

    console.log(C);
}

solveC(); // 3

But if for some reason there is a delay in getting the value 'B', JavaScript will execute other lines of code that aren't delayed. This could bring up unexpected results.

In the example below, 'B' is delayed using a promise. Let's check out what the results will be.

function solveC() {
    const getB = () => {
      const executor = (resolve, _reject) => {
        setTimeout(() => resolve(2), 100);
      };
      return new Promise(executor); 
    }
    const A = 1;

    const B = getB();

    const C = A + B;

    console.log(C);
}

solveC(); // "1[object Promise]"

JavaScript logs the result before the promise above is fulfilled;

What do we do to get the right result even if B is delayed? How do we ask Javascript to pause and wait for 'B'.

The answer is we make the function asynchronous. This is where "async-await" comes in.

Note: there are other ways to write asynchronous code. You could use Callback functions and promises.

Asynchronous Functions using Async-Await

To make a function Asynchronous we declare the function using the "Async" keyword.
The word “async” before a function means the function will always returns a promise.

The async function below...

async function One() {
  return 1;
}

is the same as the normal function below that returns a promise.

function One() {
  return Promise.resolve(1);
}

We can ask JavaScript to wait for a promise to be fulfilled by using the "await" keyword. It has to be noted that it only makes the async function block wait and not the whole program execution.

The code block below shows how we solve our earlier problem with the use of async-await.

async function solveC() {
    const getB = () => {
      const executor = (resolve, _reject) => {
        setTimeout(() => resolve(2), 100);
      };
      return new Promise(executor); 
    }
    const A = 1;

    const B = await getB(); //waits for promise to be resolved

    const C = A + B;

    console.log(C);
}

solveC(); // 3

Note: the "await" keyword can only be used within "async" functions.

That's it! Hope this was helpful cause I kept it light for beginners. If you want to read a more advanced explanation of async-await, I recommend this article by Ashay Mandwarya

Updated: Made a few corrections, thank you @peerreynders .

Read more of my articles

How to add Social Media Sharing Links to a Vue Website

Linda — Mon, 25 Jan 2021 09:24:47 +0000

This article was originally published on lindaojo.com

In the article, I share a step by step guide on how to add sharing links to your Vue website. This will enable your users to share your website page on social media with just a click of a button, literally.

We are using the Vue Social Sharing package to add sharing links. This package supports sharing on over 20 networks including all the favourites like Twitter, Facebook, WhatsApp, email and much more. You can check out other supported networks. Let's dive in!

Install Vue Social Sharing package

Install Vue Social Sharing package by running the command below in your terminal.



npm install --save vue-social-sharing

Set up Vue Social Sharing package

You can set up the package in main.js file as shown below



import VueSocialSharing from 'vue-social-sharing'

Vue.use(VueSocialSharing);

or import using a script tag in your index.html file


 html
<script src="/dist/vue-social-sharing.js"></script>

Add Social Media sharing links using the Share Network Component

The Vue social sharing package lets you add social sharing links to multiple networks with ease, right within your template. Here are a few examples.

Note: the 'network' and 'url' are the only required properties.

Facebook Example



<template>
    <button>
        <ShareNetwork
            network="facebook"
            url="https://lindaojo.com/blog/awesome-article"
            title="Awesome Article"
            description="This is an awesome article for awesome readers"
            hashtags="Frontend, Programming">
            <span>Share on Facebook</span>
        </ShareNetwork>
    </button>
</template>

Twitter Example



<template>
    <button>
        <ShareNetwork
            network="twitter"
            url="https://lindaojo.com/blog/another-awesome-article"
            title="Another Awesome Article"
            description="This is another awesome article for awesome readers"
            twitter-user="LindaOjo_">
            <span>Share on Twitter</span>
        </ShareNetwork>
    </button>
</template>

Now you can share your website on Twitter, Facebook, and much more 🎉.

Extending the network list

If the package does not support a network you desire by default, you can extend or override the list of available networks in your main.js file as shown below



    Vue.use(VueSocialSharing, {
        networks: {
            newNetwork: 'https://newnetwork.com/share?url=@url&title=@title'
        }
    })

Customise your sharing links on popular social media platforms (Optional)

Customising your share links makes it stand out hence increasing the likelihood of it being engaged with.

For instance, a link to my website on Twitter looks like this:

You can customise your share links by adding the right meta tags to the head section of your index.html.

Below are the meta tags I used to customise my share links.



<head>
    <!-- Facebook, Whatsapp -->
    <meta property="og:site_name" content="Linda Ojo">
    <meta property="og:title" content="Linda Ojo's Personal website and Blog">
    <meta property="og:description" content="Articles on frontend development written by Linda Ojo, Frontend Developer">
    <meta property="og:image" content="logo.png">
    <meta property="og:url" content="https//www.lindaojo.com">

     <!-- Twitter -->
    <meta name="twitter:title" content="Linda Ojo's Personal website and Blog">
    <meta name="twitter:description" content="Articles on frontend development written by Linda Ojo, Frontend Developer">
    <meta name="twitter:image" content="logo.png">
    <meta property="twitter:url" content="https//www.lindaojo.com">
    <meta name="twitter:card" content="summary">
</head>

You could support my work by sharing this article, thanks!

Read more of my articles