DEV Community: Ashutosh Kumar Singh

Introducing Your Forms: The Ultimate Form Builder for Notion (Beta)

Ashutosh Kumar Singh — Sun, 11 Feb 2024 14:58:38 +0000

I'm thrilled to announce the beta launch of Your Forms, a revolutionary Form Builder designed with Notion users in mind. Your Forms is set to transform how you capture and manage data, offering an unparalleled user experience through its intuitive interface and powerful features. Whether gathering insights, conducting surveys, or just collecting information, Your Forms simplifies the process, allowing you to focus on what matters most, all without needing a credit card to start.

Create custom forms and surveys with Your Forms, seamlessly integrated with your Notion database. Ideal for both personal and professional use.

yourforms.io

Key Features of Your Forms

No Credit Card Required: Begin building your forms immediately without any financial commitment.
Unlimited Forms: Create as many forms as you need, giving you unlimited possibilities to capture the data you require.
14 Day Free Trial: Take advantage of all premium features with a two-week free trial, available to all users.
30+ Themes: Customize your forms with a selection of over thirty themes, ensuring they align with your style or brand.
Embeddable Forms: Seamlessly integrate forms into your website, blog, or directly within Notion.
Instant Notifications: Get alerts in real-time whenever someone responds to your forms.
Multi-Page Forms & Custom Logic: Design complex, dynamic forms with multiple pages and conditional logic for a tailored experience.
Real Time Preview: See your forms come to life as you build them, making sure they look exactly as you envisioned.
Multi-Language Support: Engage a wider audience by creating forms in various languages.

How to Get Started

Creating a form with Your Forms is simple and requires no coding:

Sign Up and Connect to Notion: Simply create your account and link your Notion workspace.
Create a Form: Choose to create a new database or import an existing one from Notion.
Share Your Form: Embed your form on your site or share the link directly to start gathering responses.

Your Forms in Action

Checkout the demo at https://sour-avenue-cd7.notion.site/Your-Forms-Demo-6ea34b34028b4034878c76e3f66a240d

PDF2Notion: From PDF to Notion, Seamlessly

Ashutosh Kumar Singh — Sat, 28 Oct 2023 10:06:25 +0000

PDF2Notion

Introducing PDF2Notion — the ultimate tool to transfer your PDF content directly into Notion. Whether you’re looking to shift your notes, documents, or any textual content, PDF2Notion ensures a smooth transition.

How Does It Work?

Step 1: Connect your Notion account.

Begin by securely linking your Notion account to PDF2Notion. This will ensure your content flows into the right space.

Step 2: Upload a PDF.

Choose the PDF document you’d like to move to Notion. Whether it’s lengthy articles, detailed reports, or concise notes, PDF2Notion is equipped to handle it all.

Step 3: Choose a Notion page.

After uploading, you’ll be prompted to select a specific Notion page where you’d like your content to reside. Choose your desired page, and watch your content integrate seamlessly.

Beta Phase

Please note that PDF2Notion is currently in its beta phase. As of now, we exclusively support text extraction from PDFs. Each PDF has a character limit of 5,000,000. However, we’re continually working to improve and enhance your experience. Features like extracting images and tables from PDFs will be available soon.

Feedback & Bug Reporting

We’re dedicated to providing you with a flawless experience. If you come across any glitches or issues, please don’t hesitate to reach out. Report any bugs directly to ash@denedut.com. Your feedback is invaluable in helping us perfect PDF2Notion.

Reports from Git

Ashutosh Kumar Singh — Wed, 04 Oct 2023 08:29:46 +0000

Photo by Clément Hélardot on Unsplash

Original Post — https://kyledo.medium.com/automating-standups-using-gpt4-and-github-apis-63ad5ec01129

I run two fully remote businesses: a dev agency, and a Twitter SaaS. So I juggle client meetings, stand-ups, performance reviews, and fundraising. I tried to hire a VA to delegate some work, but the good ones were too expensive for me.

So I tried a different route. I made a bot that fetches Github commit history and uses GPT4 to generate a report. And it worked! The bot checks our Git commits and makes a daily report. Now we save 90% of the time we used to spend preparing for our daily and weekly meetings.

Here is the demo.

There are extra benefits too.

No Misses : the bot catches all our work.
Focus on Real Work : We see what we really get done.

The best part? Less stress. No more wondering what we did all day or what got fixed last week. The reports aren’t perfect, but the bot runs by itself. For a small team like ours, that’s a big deal.

I think GitReport could replace standup apps like Geekbot. So I’m making it into a product. More Git features are coming, like tracking issues and pull requests.

P.S. We’re offering an early bird discount of 50% off for the first 200 sign-ups. If you want to try it, sign up here.

How to build an ECommerce App with React

Ashutosh Kumar Singh — Thu, 01 Jul 2021 17:05:16 +0000

In this tutorial, we will build an E-commerce App with React using ButterCMS and Snipcart. We will use Chakra UI, a modular and accessible component library, to style the app.
Finally, we will deploy our ecommerce app with Stormkit, a serverless deployment service for JavaScript apps similar to Vercel or Netlify.

If you want to jump right into the code, check out the GitHub Repo here.

And here's a link to the deployed version: https://yakscythe-49dgnn.stormkit.dev/.

Prerequisites

Knowledge of HTML, CSS & JavaScript
Basic knowledge of React
Node & NPM installed on the local development machine.
Any code editor of your choice.
React Dev Tools (optional)
A Butter CMS Account
A Snipcart Account (free forever in test mode)
A Stormkit Account

What is ButterCMS

ButterCMS is a SaaS start-up that delivers value to Developers and Marketers through a headless, API-based CMS (Content Management System) and blogging platform. Butter is a developer-friendly CMS that enables developers to build modern apps while also providing their marketing teams with the tools needed to make website content updates.

What is Snipcart

Snipcart is HTML based fully customizable shopping cart that you can integrate with any web stack in few simple steps and start accepting international payments in minutes. With Snipcart's management dashboard, you can track abandoned carts, sales, orders, customers, and more.

Snipcart works perfectly with Headless CMS like Butter and speeds up your development process, provides better security, and functionality to your ecommerce app.

What is Stormkit

Stormkit is a serverless hosting and deployment service for JavaScript applications. It enables you to focus on developing your application instead of wasting time by automating deployments, logs, hosting, scaling, TLS certificates and much more with state of the art best practices and features like multiple environments, staged rollouts, remote Config and snippets. This makes Stormkit something like a low-code frontend infrastructure service for developers.

How to Setup and Install React

In this tutorial, you will use Create React App template to quickly create the initial React app. Run the following command in the terminal.

npx create-react-app react-ecommerce-butter
cd react-ecommerce-butter
npm start

The last command, npm start, will start the React development server on your system's port 3000. Head over to http://localhost:3000/ in your browser to view your React app.

You can stop the development server by hitting CTRL+C in the terminal.

In this tutorial, you will use Chakra UI to style your ecommerce app. Run the following command to install Chakra UI.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 react-icons

Update src/index.js to wrap your react app with the ChakraProvider component.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider } from "@chakra-ui/react";

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

reportWebVitals();

Create a .env file to store ButterCMS and Snipcart API keys securely as environment variables. Run the following command to create the .env file.

touch .env

The next step is to create a free ButterCMS account. After creating an account, head over to https://buttercms.com/settings/ and copy the Read API Token.

Navigate to https://app.snipcart.com/register in your browser and create a free Snipcart account if you haven't already.

After creating the Snipcart account, head over to account settings and copy the PUBLIC TEST API KEY under Credentials.

Paste both Butter CMS API Key and Snipcart Public Test API Key in the .env file as shown below.

REACT_APP_BUTTER_ECOMMERCE=''
REACT_APP_SNIPCART_KEY=''

How To Create Products on Butter

In this section, you will create the products for your ecommerce app on Butter. In this tutorial, you will create an ecommerce platform named Cookie Jar, where customers can buy different varieties of cookies. Hence, the products for this ecommerce platform will be cookies.

Navigate to your Butter Dashboard and then create a new collection named cookies with the following fields.

id - Type: Number - isRequired
name - Type: Short Text - isRequired
description - Type: Long Text - isRequired
price - Type: Number - isRequired
image - Type: Media - isRequired

You can create an ecommerce app on any product like shoes, sports stuff, craft, etc. You can add additional fields like ratings, reviews, stock, etc., to your ecommerce app, but these are the bare minimum required for any ecommerce app.

You can add the fields by dragging and dropping the corresponding field types.

After adding the fields, click on the Create Collection button, name the collection cookies, and hit Save as a Collection.

You will also need to add some dummy data to the cookies collection. You can either copy the dummy data from https://yakscythe-49dgnn.stormkit.dev/ or add your favorite cookies.

Make sure to hit Publish after adding the cookies, aka products. You can come back and add more products or edit them whenever you want.

Here is how your cookies collection will look after adding products to it.

How To Fetch and Display Products

In this section, you will fetch the data from Butter CMS and display them as products on your ecommerce app.

You will use the buttercms library to fetch data from ButterCMS. Run the following command in your project's root directory to install buttercms.

npm i buttercms

Update App.js file with the following code.

import { useState, useEffect } from "react";
import Butter from "buttercms";

const butter = Butter(process.env.REACT_APP_BUTTER_ECOMMERCE);

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await butter.content.retrieve(["cookies"], {
        order: "name",
      });
      const { data } = await res.data;
      const allProducts = data.cookies;
      setProducts(allProducts);
    }
    fetchData();
  }, []);
  return (
    <div>
      {products.map((product) => (
        <div>
          <img src={product.image} alt={`${product.name}`} />
          {product.name}
          {product.price}
          {product.description}
        </div>
      ))}
    </div>
  );
}

export default App;

In the above code, you start by creating an instance of Butter using your ButterCMS API key stored in .env file and accessed using process.env.REACT_APP_BUTTER_ECOMMERCE.

Then you create a state named products to store the data fetched from ButterCMS using the useState() hook. Hooks are functions that use React features like defining a state without writing a class.

You fetch the collection named cookies using butter's .retrieve() method inside the React's useEffect() hook.

You then access the response from ButterCMS and store it inside the products state using the setProducts() method. Here is how the state products look like.

[
  {
    "meta": {
      "id": 125151
    },
    "id": "1",
    "name": "Biscotti Cookies",
    "price": 40,
    "description": "Biscotti actually means “twice baked” and the cookie is indeed baked twice, resulting in its hard and crunchy texture.",
    "image": "https://cdn.buttercms.com/UqbFGAJLTGqtYqF2UajV"
  },
  {
    "meta": {
      "id": 113778
    },
    "id": "2",
    "name": "Chocolate Chip Cookies",
    "price": 30,
    "description": "Chocolate chip cookies are the perennial classic and longtime fan favorite. ",
    "image": "https://cdn.buttercms.com/Xe1zfNvRCiOOI4LPuoVb"
  }
]

To display the product's data, you iterate over the products state using the .map() method and display the data on the page using curly brackets {}.

{
  products.map((product) => (
    <div>
      <img src={product.image} alt={`${product.name}`} />
      {product.name}
      {product.price}
      {product.description}
    </div>
  ))
}

Head over to http://localhost:3000/. Here is how your ecommerce app will look like.

Though your app needs styling, but you are getting all the required data from ButterCMS successfully. Now, you will use Chakra UI to style the app. Update App.js with Chakra UI components to style your ecommerce app.

import {
  Container,
  Text,
  Divider,
  Box,
  Image,
  Button,
  SimpleGrid,
  Flex,
} from "@chakra-ui/react";
import { FiShoppingCart, FiShoppingBag } from "react-icons/fi";
import { useState, useEffect } from "react";
import Butter from "buttercms";

const butter = Butter(process.env.REACT_APP_BUTTER_ECOMMERCE);

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await butter.content.retrieve(["cookies"], {
        order: "name",
      });
      const { data } = await res.data;
      const allProducts = data.cookies;
      setProducts(allProducts);
    }
    fetchData();
  }, []);

  return (
    <Container maxW="container.xl" h="100vh" >
      <Flex justifyContent="space-between" alignContent="center">
        <Text
          as="a"
          href="/"
          fontSize="2rem"
          color="gray.900"
          fontFamily="Robo"
          my="5px"
        >
          Cookie Jar
        </Text>
        <Button
          my="5px"
          colorScheme="green"
          variant="ghost"
          leftIcon={<FiShoppingBag size="24px" />}
          size="lg"
          p={2}
        >
          View Cart
        </Button>
      </Flex>
      <Divider />
      <Box mt={4}>
        <SimpleGrid
          minChildWidth="300px"
          align="center"
          justify="center"
          spacing="40px"
          mb={32}
        >
          {products.map((product) => (
            <Box
              bg="white"
              maxW="sm"
              borderWidth="1px"
              rounded="lg"
              shadow="lg"
              _hover={{ shadow: "dark-lg" }}
              key={product.id}
            >
              <Image
                h="350px"
                fit="cover"
                src={product.image}
                alt={`Picture of ${product.name}`}
                roundedTop="lg"
              />

              <Box p="6">
                <Flex
                  mt="1"
                  justifyContent="space-between"
                  alignContent="center"
                >
                  <Text
                    fontSize="2xl"
                    fontWeight="semibold"
                    as="h4"
                    textTransform="uppercase"
                    lineHeight="tight"
                    fontFamily="Roboto"
                  >
                    {product.name}
                  </Text>
                  <Text
                    as="h4"
                    fontSize="2xl"
                    fontWeight="bold"
                    color="teal.600"
                  >
                    ${product.price}
                  </Text>
                </Flex>

                <Text
                  mt={2}
                  color="gray.500"
                  display={{ base: "none", md: "flex" }}
                >
                  {product.description}
                </Text>

                <Button
                  leftIcon={<FiShoppingCart size="24px" />}
                  size="lg"
                  mt={4}
                  isFullWidth
                  colorScheme="blue"
                  variant="outline"
                  alignSelf={"center"}

                >
                  Add to Cart
                </Button>
              </Box>
            </Box>
          ))}
        </SimpleGrid>
      </Box>
    </Container>
  );
}

export default App;

In the above code, you import different Chakra UI components like Container, Flex, etc., and use them to style your app. Except for styling, the code used to fetch and display the data on the app remains the same.

In this tutorial, we will not discuss how these components are used in-depth; you can refer to official Chakra UI docs to learn more about these components.

Here is how your app will look.

You have created two buttons in the above code, View Cart, which shows users their cart, and Add to Cart, which adds the product to the cart. These buttons don't work yet; you will integrate them with Snipcart in the next section.

How To Integrate Snipcart With React App

In this section, you will configure and integrate Snipcart with your ecommerce app.

Update public/index.html file and add the following code inside the <Head> tag.

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.css"/>

Now, add the following code in public/index.html before closing <Body> tag.

<script
  async
  src="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.js"
></script>
<div
  id="snipcart"
  data-config-modal-style="side"
  data-api-key="%REACT_APP_SNIPCART_KEY%"
  hidden
></div>

The Snipcart API Key stored in .env file is being accessed in the above code using %REACT_APP_SNIPCART_KEY%.

Update Add to Cart button in src/App.js like this.

<Button
  leftIcon={<FiShoppingCart size="24px" />}
  size="lg"
  mt={4}
  isFullWidth
  colorScheme="blue"
  variant="outline"
  alignSelf={"center"}
  className="snipcart-add-item"
  data-item-id={product.id}
  data-item-image={product.image}
  data-item-name={product.name}
  data-item-url="/"
  data-item-description={product.description}
  data-item-price={product.price}
>
  Add to Cart
</Button>

In the above code, you pass the data required by Snipcart, like the product's name, id, description, etc.

Here is the Add to Cart button in action.

Finally, update the View Cart button like with className="snipcart-checkout".

<Button
  my="5px"
  colorScheme="green"
  variant="ghost"
  leftIcon={<FiShoppingBag size="24px" />}
  size="lg"
  p={2}
  className="snipcart-checkout"
>
  View Cart
</Button>

This button will show the current items in the cart to the user.

Run the following commands in the terminal to commit your code.

git add .
git commit -m"Finished building the React Ecommerce app"

How to Deploy your Ecommerce App with Stormkit

In this section, you will deploy the ecommerce app with the free tier of Stormkit.

The first step is to push your code to a GitHub repository. Create an account on https://github.com/ if you haven't already.

Navigate to https://github.com/new and create a new GitHub repo with react-ecommerce-butter as the repo name. You can skip other fields for now. Finally, click on the Create repository button.

On the next page, you will be provided with the code to push your code to GitHub. Copy the commands from the second section, i.e., ...or push an existing repository from the command line section.

The commands will be similar to this but will contain your GitHub username.

git remote add origin https://github.com/lelouchB/react-ecommerce-butter.git
git branch -M main
git push -u origin main

The last command will push your code to GitHub. Head over to https://app.stormkit.io/auth and login using GitHub OAuth.

Click on the GitHub icon under Where can we find your codebase?

You will be asked to connect your repositories with Stormkit. You can choose to connect all your repositories or select only the react-ecommerce-butter repo.

Select the react-ecommerce-butter repository and proceed further.

You will be redirected to your Stormkit dashboard, where your newly connected app would appear. Select the app you want to deploy.

On your app dashboard, you will be provided with a default production environment. You can create as many environments as you want. In this tutorial, we will deploy using the default production environment.

Before deploying, you will need to set the environment variables in your production environment; else your deployment will fail.

Click on the production environment.

Now, click on the Edit button or the pencil icon to edit the environment configurations.

A modal will appear with current environment configurations.

Scroll to the bottom of the modal; you will see the Build configuration and Environment variables sections.

Under Build configuration, type build under Public folder field and add npm run build command under Build command field.

Under Environment variables, add REACT_APP_BUTTER_ECOMMERCE and REACT_APP_SNIPCART_KEY environment variables with their values and click on the Update environment button.

Finally, click on the Deploy now button to deploy your app.

A modal will appear to select the environment, select the production environment and click on Deploy now.

The Deploy now will trigger the deployment process, which you can see live on your dashboard.

After the deployment process completes, you will be provided with a preview URL of your deployed website.

If the preview looks good, you can publish it to production by going to the Deployments tab and clicking on the triple dots across the latest commit, i.e., Finished building the React Ecommerce app.

A modal will appear, deselect the sync sliders option and then scroll the bar to 100%, i.e., to the end. Finally, click on Publish to production button to publish the app.

Congratulations, your ecommerce app has been deployed. You can see the deployed version of this project here.

Conclusion

In this tutorial, we learned how to build an Ecommerce App with React.js using ButterCMS and Snipcart. Finally, we deployed our ecommerce app with Stormkit. You can follow this tutorial and create your own version of this project.

Here are a few ideas to get you started:

Style the app using other UI libraries like React Bootstrap, Material UI, etc.
Integrate a Payment Gateway like Stripe.
Add Authentication Portal with Auth0.

Here are some additional resources that can be helpful:

Happy coding!

Power your Vue.js apps with a CMS

Ashutosh Kumar Singh — Thu, 01 Apr 2021 03:09:05 +0000

In this article, we explore how to build a CMS-powered blog with Vue.js. Our content will be stored in Sanity's Content Lake and will be editable in the Sanity Studio. We'll start by installing Vue.js CLI and setting up a Vue.js project using the CLI. We will then integrate Sanity, our content management system, with the Vue.js app. Then we will write the query to fetch remote data in Vue.js and setup dynamic routes with Vue Router.

What is Vue.js ?

Vue.js is an open-source model–view–view model frontend JavaScript framework for building user interfaces and single-page applications.

With its easy learning curve and great documentation, Vue.js is one of the most popular and used web frameworks according to the 2020 StackOverflow Developer Survey.

Prerequisites

If you want to jump right into the code, you can check out the GitHub Repo and the deployed version of the blog:

Before we get started, you should have:

Knowledge of HTML, CSS, and JavaScript
Basic knowledge of Vue.js
Node and NPM installed on your local dev machine
Vue Dev Tools (optional)

How to setup and install Vue.js

In this tutorial, we will use the official Vue CLI to initialize your project. The CLI is the best way to scaffold Vue Single Page Applications (SPAs), and it provides batteries-included build setups for a modern frontend workflow.

Run the following command in the terminal to install the Vue CLI globally.

npm install -g @vue/cli

Next, we'll scaffold our application.

vue create vue-sanity-blog

Select Default (Vue 3 Preview) ([Vue 3] babel, eslint) when prompted to choose the preset.

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

We will use Vue Router, the official router for Vue.js, for creating dynamic routes to the posts in this tutorial. Run the following command to install the Vue Router plugin.

vue add router

When prompted for the history mode, type Yes and hit Enter.

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

Run the following command in the project's root directory to start the development server.

npm run serve

Then we can open our app in the browser at http:localhost:8080.

You can stop your development server now by hitting Ctrl + C in the terminal.

How to set up Sanity

Sanity Studio is an open-source headless CMS built with React that connects to Sanity's real-time datastore. Sanity's datastore treats your content as data that's fully accessible via a robust API, that we'll use to integrate with Vue.

To start a new project with Sanity, we'll install the Sanity CLI globally.

npm install -g @sanity/cli

The next step is to create a new project using the CLI. Run the following command inside your project's root directory (vue-sanity-blog).

sanity init

If this is your first time creating a project using the CLI, you may also need to log into your Sanity account or create a new Sanity account in the browser first.

After this, you will be prompted to create a new project, hit Enter. Name your project vue-sanity-studio and choose the default dataset configuration.

Confirm your project's output path and choose Blog (schema) as the project template.

It is recommended to rename the folder vuesanitystudio to studio on your local machine.

You will also need to update the browserslist in the Vue.js project's package.json. Replace not dead with not ie <= 8.

"browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]

To start the Sanity Studio, run the following commands in the terminal after renaming the folder.

cd studio
sanity start

After compiling, the studio will open on http://localhost:3333. To start, the studio will have sections for posts, authors, and categories but no data.

Before adding any content to the studio, let's modify the default blog schema to include the post description in the content.

Sometimes a title alone cannot express the core of the article entirely, having a good description or excerpt gives an insight about the post to the reader.

To update the studio/schemas/post.js file to include the description field, we need to add the following code after the slug field. You can see the entire code of studio/schemas/post.js here.

{
      name: "excerpt",
      title: "Description",
      type: "string",
      options: {
        maxLength: 200,
      },
},

To add our first post, we can click on the edit icon next to the project's name in our dashboard.

On the next prompt, choose Post, and an untitled page will appear with the fields for the post as defined in the schema we just edited.

Create a sample blog article and author for our code to fetch.

How to connect Sanity with Vue.js App

We need to install few dependencies to connect Vue.js app to Sanity.

Run the following command in your project's root directory to install the Sanity Client and other packages you will need in the future.

npm install @sanity/client @sanity/image-url sanity-blocks-vue-component

@sanity/client — Sanity Client is the official JavaScript client by Sanity and can be used both in node.js and modern browsers.
sanity-blocks-vue-component — Vue component for rendering block content from Sanity. You can learn more about this in the official docs here.
@sanity/image-url — A helper library to generates image URLs and perform helpful image transformations through Sanity asset pipeline. You learn more about this in the official docs here.

Once these packages are installed, we'll create a new file named client.js inside the src directory.

Add the following code to the client.js file.

import sanityClient from "@sanity/client";

export default sanityClient({
  projectId: "Your Project ID Here", // find this at manage.sanity.io or in your sanity.json
  dataset: "production", // this is from those question during 'sanity init'
  useCdn: true,
  apiVersion: "2021-03-25"
});

This code configures the Sanity client with information about the specific project we're accessing.

You will also need to add the port where the Vue.js development server is running to the CORS origins of your Sanity project.

Head over to https://www.sanity.io/teams and click on your Sanity project. On your project's dashboard, click on Settings → API settings and then add http://localhost:8080/ to the CORS origins field.

You can also use the Sanity CLI to add the CORS origins to your project. Run the following command in the studio folder of your project. You can read more about this here.

sanity cors add http://localhost:8080

How to Display the Posts on the Homepage

Next, we need to fetch the data from Sanity and display the posts on our Vue.js app. For this, we need a function named fetchData and inside this function, fetch the data using the client we just configured, and then map over the response containing posts returned by Sanity.

Modify src/Views/Home.vue like this.

<template>
  <div class="home">
    <h1>Welcome to your Vue + Sanity Blog</h1>
    <div class="posts">
      <div class="loading" v-if="loading">Loading...</div>
      <div v-if="error" class="error">
        {{ error }}
      </div>
      <div class="container">
        <div v-for="post in posts" class="post-item" :key="post._id">
          <router-link :to="`/blog/${post.slug.current}`">
            <h2>{{ post.title }}</h2>
          </router-link>
          <p>{{post.excerpt}}</p>
          <hr />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sanity from "../client";

const query = `*[_type == "post"]{
  _id,
  title,
  slug,
  excerpt
}[0...50]`;

export default {
  name: "Home",
  data() {
    return {
      loading: true,
      posts: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.error = this.post = null;
      this.loading = true;
      sanity.fetch(query).then(
        (posts) => {
          this.loading = false;
          this.posts = posts;
        },
        (error) => {
          this.error = error;
        }
      );
    },
  },
};
</script>

<style scoped>
.home h1{
    text-align: center;

}
.container {
  margin: 0 auto;
  max-width: 42em;
  width: 100%;
}
.post-item {
  box-sizing: border-box;
}
</style>

Let's break down the above code piece by piece.

First, we need to import the client from the file we created in the last step.

import sanity from "../client";

In this tutorial, you will use Sanity's GROQ API to query your data. GROQ, Graph-Relational Object Queries, is Sanity's open-source query language. You can learn more about GROQ here.

The following GROQ query is used to fetch the _id, title, slug, and excerpt of posts from Sanity's backend. You can have thousands of posts but it doesn't make sense to display all of them on the homepage, hence the result is slice using [0...50]. This means that only the first 50 posts will be fetched.

*[_type == "post"]{
  _id,
  title,
  slug,
  excerpt
}[0...50]

To execute the query, we'll create a fetchData function inside the methods object to request the data using sanity.fetch() and pass the query variable in it.

The fetched content is stored in the posts array using this.posts=posts.

 fetchData() {
      this.error = this.post = null;
      this.loading = true;
      sanity.fetch(query).then(
        (posts) => {
          this.loading = false;
          this.posts = posts;
        },
        (error) => {
          this.error = error;
        }
      );
    },
  },

Inside the template, we map over the posts array using the v-for directive to display posts on the page. The v-for directive renders a list of items based on an array. You can read more about this directive here.

So that Vue's virtual DOM can differentiate between the different VNodes, we'll provide the :key attribute a value of our post's ID.

<div v-for="post in posts" class="post-item" :key="post._id">
  <router-link :to="`/blog/${post.slug.current}`">
    <h2>{{ post.title }}</h2>
  </router-link>
  <p>{{post.excerpt}}</p>
  <hr />
</div>

The <router-link> component enables user navigation in a router-enabled app. The slug of the post is passed to its to prop. You can read more about this component here.

<router-link :to="`/blog/${post.slug.current}`">
  <h2>{{ post.title }}</h2>
</router-link>

Restart the development server using the npm run serve command and navigate to http://localhost:8080/ in your browser.

Here is how the app will look.

We now have blog posts populating the homepage, but if you click on the post we created, it will take you to an empty page. This is because we have not yet created the routes for this post.

How to create dynamic routes for posts

To create a dynamic route, we'll create a new file named SinglePost.vue in the src/components directory.

Add the following code to SinglePost.vue.

<template>
  <div>
    <div class="loading" v-if="loading">Loading...</div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h1>{{ post.title }}</h1>
      <img v-if="post.image" :src="imageUrlFor(post.image).width(480)" />

      <h6>By: {{ post.name }}</h6>
      <SanityBlocks :blocks="blocks" />
    </div>
  </div>
</template>

<script>
import { SanityBlocks } from "sanity-blocks-vue-component";
import sanity from "../client";
import imageUrlBuilder from "@sanity/image-url";

const imageBuilder = imageUrlBuilder(sanity);

const query = `*[slug.current == $slug] {
  _id,
  title,
  slug,
  body, 
 "image": mainImage{
  asset->{
  _id,
  url
}
},
"name":author->name,
"authorImage":author->image
}[0]
`;

export default {
  name: "SinglePost",
  components: { SanityBlocks },
  data() {
    return {
      loading: true,
      post: [],
      blocks: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    imageUrlFor(source) {
      return imageBuilder.image(source);
    },
    fetchData() {
      this.error = this.post = null;
      this.loading = true;

      sanity.fetch(query, { slug: this.$route.params.slug }).then(
        (post) => {
          this.loading = false;
          this.post = post;
          this.blocks = post.body;
        },
        (error) => {
          this.error = error;
        }
      );
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 42em;
}
h1 {
  text-align: center;
}
h6 {
  color: #aaa;
  padding: 1em;
}
</style>

In the above code, we use imageUrlBuilder from @sanity/image-url to generate image URLs for our images. To do this, we create a method called imageUrlFor() and use it inside template. We can chain additional methods onto this template tag to do things like specify width, height, or a crop. You can read more about imageUrlBuilder here.

<img v-if="post.image" :src="imageUrlFor(post.image).width(480)" />

To fetch the data for a specific post we'll use its unique slug which is accessed using this.$route.params.slug. This is the route object present in Vue Router which represents the state of the current active route. You can read more about Vue Router route object here.

sanity.fetch(query, { slug: this.$route.params.slug }).then(
  (post) => {
    this.loading = false;
    this.post = post;
    this.blocks = post.body;
  },
  (error) => {
    this.error = error;
  }
);

Another thing to notice here is SanityBlocks component from sanity-blocks-vue-component package which renders an array of block content to Vue Components or Vue Nodes which is stored in blocks, passed inside the blocks prop of the component.

<SanityBlocks :blocks="blocks" />

We also need to define this route in router/index.js file.

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/blog/:slug",
    name: "SinglePost",
    component: () => import("../components/SinglePost.vue"),
  },
];

In Vue Router, we create a dynamic segment. This is denoted by a colon : as seen in the above code, /blog/:slug. Once this route is saved, you can navigate from the homepage to the blog post.

How to add styles to the app

Our app works great but doesn't look as good as it could so update src/App.vue like this to include the global styles for your Vue app.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-height: 100vh;
  padding: 1em 2em;
  width: 100%;
  margin-bottom: 8em;
}

#nav {
  text-align: center;

  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Avenir, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em 0;
}

h1 {
  font-family: Roboto, serif;
  font-size: 4em;
  margin: 0 0 1em 0;
}

h2 {
  margin: 1.6em 0 0 0;
  font-size: 1.8em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.4em;
}

h5 {
  font-size: 1.3em;
}

h6 {
  font-size: 1.2em;
}

p,
ul,
ol {
  font-size: 1.3rem;
  line-height: 1.75em;
  margin: 1.2em 0;
}

a {
  color: inherit;
  transition: color linear 0.15s;
}

a:hover {
  color: #42b983;
}

img {
  max-width: 100%;
}

hr {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
rgba(66, 185, 131, 1),    rgba(0, 0, 0, 0)
  );
  border: 0;
  height: 2px;
  margin: 40px auto;
}

blockquote {
  border-left: 4px solid #cccccc;
  font-size: 1.4em;
  font-style: italic;
  margin: 2rem 0;
  padding-left: 2rem;
  padding-right: 2rem;
}

.content h1 {
  font-size: 3em;
  margin: 1em 0;
}

@media (max-width: 1020px) {
  h1 {
    font-size: 3em;
  }

  .content h1 {
    font-size: 2.4em;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  p,
  ul,
  ol {
    font-size: 1.2rem;
    margin: 1em 0;
  }
}
</style>

These are some basic styling for your app. You can experiment with different Vue.js UI component libraries like Element, Vuetify, BootstrapVue, etc. to style your app.

Conclusion

In this article, we built a Vue.js app to function as a blog. We set up Sanity Studio as a headless CMS to power our Vue app. You can follow this tutorial and create your own unique version of this project with additional features and functionalities.

Here are a few ideas to get you started:

Add Author routes and link them to the blog posts.
Add an SEO component to the posts
Add Filter, Sort, and Search functionality.
Style the app using UI libraries like Vuetify, BootstrapVue, etc.

Here are some additional resources that can be helpful.

Happy coding!

How to Guide: Using Sapper with TakeShape

Ashutosh Kumar Singh — Wed, 27 Jan 2021 19:13:03 +0000

In this article, we will discuss how to use TakeShape with Sapper, an application framework powered by Svelte.

If you want to jump right into the code, check out the GitHub Repo here.

And here's a link to the deployed version: https://sapper-takeshape-example.vercel.app/

Prerequisites

Knowledge of HTML, CSS, JavaScript
Basics of Svelte and GraphQL
Node/NPM installed on your local dev machine
Any code editor of your choice

What is Svelte?

Svelte is a tool for building fast web applications, similar to JavaScript frameworks like React and Vue, svelte aims to make building slick interactive user interfaces easy. But there's a crucial difference.

According to official docs:

Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the framework's abstractions' performance cost, and you don't incur a penalty when your app first loads.

What is Sapper?

Sapper is a framework built on top of Svelte and has taken inspiration from Next.js. Sapper helps you create SEO optimized Progressive Web Apps (PWAs) with file system based routing, similar to Next.js.

How to Setup and Install a Sapper project

This tutorial uses sapper-template to quickly set up the initial Sapper project, which is also the preferred way to initialize a Sapper project.

In your project's root directory, run the following commands in the terminal.

npx degit "sveltejs/sapper-template#webpack" sapper-takeshape-example
cd sapper-takeshape-example
npm install
npm run dev

The last command npm run dev will start the development server on port 3000. Head over to http://localhost:3000/.

Here is how your app will look.

How to Generate TakeShape API Keys

If haven't already, create a free developer account on TakeShape.

Create a new project and configure it as shown below.

Give a name to your project; this tutorial uses a project named sapper-takeshape-example.

Now, click on Create Project.

On your TakeShape dashboard, head over to the Post tab. You will see the sample blog posts present in this project.

The next step is to generate API keys to authenticate your Sapper project with TakeShape. Click on the triple dots present next to your project's name on the dashboard.

In the drop-down menu, click on API Keys.

Click on New API Key.

Name this API key, and since you will only use this on the client-side to read the blog posts, you can set Permissions to Read. Click on Create API Key.

Copy the API key to a secure location; remember you will only see them once.

**Note:* These credentials belong to a deleted project; hence I have not hidden them throughout this tutorial to give you a better understanding of the process and steps. You should never disclose your private API keys to anyone.*

On the API Keys page, you will also see your TakeShape project id, i.e., the value between /project/ and /v3/graphql in your API endpoint; copy this project id.

In your project's root directory, run the following command to create a new file named .env to securely store this API key.

touch .env

In your .env file, add the environment variables.

# .env
TAKESHAPE_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
TAKESHAPE_PROJECT="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

To access these environment variables, you need to install the dotenv package, which loads environment variables from the .env file.

Run the following command in the terminal to install the dotenv package in your project.

npm install dotenv

Now you also need to configure Sapper to use these environment variables. Modify your src/server.js file like this.

require("dotenv").config();

import sirv from "sirv";
import polka from "polka";
import compression from "compression";
import * as sapper from "@sapper/server";

const {PORT, NODE_ENV} = process.env;

const dev = NODE_ENV === "development";

polka() // You can also use Express
    .use(
        compression({threshold: 0}),
        sirv("static", {dev}),
        sapper.middleware()
    )
    .listen(PORT, (err) => {
        if (err) console.log("error", err);
    });

In the above code, you have imported the dotenv package at the top of the server.js file.

require("dotenv").config();

Restart your development server by closing it using Ctrl + C and starting it again using npm run dev.

How to Display Posts on the Blog Page

With your development server still running, head over to http://localhost:3000/blog. You will see a page similar to this, which lists all the posts with their links.

These are the sample blog posts that come with the sapper-template and are present in src/routes/blog/_posts.js. You need to update this /blog route to show posts fetched from TakeShape.

Every post in the posts array has a title and a slug, shown on the blog page. You need to create a similar GraphQL query that fetches the title and slug of each post.

On your TakeShape dashboard, click on API Explorer.

Here is how this API Explorer will look.

Copy and Paste the following GraphQL query in the left tab.

query AllPosts {
  allPosts: getPostList {
    items {
      _id
      title
      slug
    }
  }
}

Run this query; you will see an output similar to this.

In Sapper, Page is a Svelte component written in .svelte files. Server routes are modules written in .js files that export functions corresponding to HTTP methods like get, post, etc. Each function receives HTTP request and response objects as arguments, plus a next function.

The index.json.js file under routes/blog directory is a server route, which currently fetches data from the posts array in the _posts.js file. You need to update this server route to fetch posts from TakeShape.

You will need to install the node-fetch package to make the API requests. Run the following command in the terminal to install node-fetch.

npm install node-fetch

Update src/routes/blog/index.json.js file like this and restart your development server.

const fetch = require("node-fetch");

export async function get(req, res) {
    const {TAKESHAPE_API_KEY, TAKESHAPE_PROJECT} = process.env;

    const data = await fetch(
        `https://api.takeshape.io/project/${TAKESHAPE_PROJECT}/v3/graphql`,
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${TAKESHAPE_API_KEY}`,
            },
            body: JSON.stringify({
                query: `
                      query AllPosts {
                          allPosts: getPostList {
                              items {
                              _id
                              title
                              slug
                              }
                          }
                      }
    `,
            }),
        }
    );
    const response = await data.json();
    const posts = await JSON.stringify(response.data.allPosts.items);

    res.writeHead(200, {
        "Content-Type": "application/json",
    });

    res.end(posts)
}

In the above code, you first import the node-fetch package.

const fetch = require("node-fetch");

Then inside the get function, you extract the environment variables from process.env.

const { TAKESHAPE_API_KEY, TAKESHAPE_PROJECT } = process.env;

Now, you make the POST request to TakeShape using the fetch method.

const data = await fetch(
    `https://api.takeshape.io/project/${TAKESHAPE_PROJECT}/v3/graphql`,
    {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${TAKESHAPE_API_KEY}`,
        },
        body: JSON.stringify({
            query: `
                      query AllPosts {
                          allPosts: getPostList {
                              items {
                              _id
                              title
                              slug
                              }
                          }
                      }
    `,
        }),
    }
);

You pass the TakeShape API key under Authorization in headers. The GraphQL query inside the body is the same as discussed above in the API Explorer.

Finally, you return the posts in the response using res.end(posts).

const response = await data.json();
const posts = await JSON.stringify(response.data.allPosts.items);

res.writeHead(200, {
    "Content-Type": "application/json",
});

res.end(posts);

In Sapper, Page component have a optional preload function that runs before the component is created. As the name suggests this function, preloads the data that the page depends upon.

Preload is the Sapper equivalent to getInitialProps in Next.js or asyncData in Nuxt.js. You can read more about Preloading here.

Open src/routes/blog/index.svelte file in your code editor. Since index.json route is inside blog directory, it can also be referenced as blog.json.

You fetch data from blog.json route using this.fetch. This method is quite similar to fetch API with some additional features like requesting data based on user's session. You can read more about this.fetch here.

<script context="module">
export function preload() {
    return this.fetch(`blog.json`)
        .then((r) => r.json()).then((posts) => {
            return {posts};
        });
}
</script>

In Svelte, you can iterate over any array or array like value using an #each block as shown here. Here (post._id) is the key that uniquely identifies each post. You can read more about #each block here.

<ul>
 {#each posts as post (post._id)}
     <li><a rel="prefetch" href="blog/{post.slug}">{post.title}</a></li>
 {/each}
</ul>

You don't need to make any other change in index.svelte file except for adding a key in the #each block like shown above.

Navigate to http://localhost:3000/blog in your browser; you will notice that posts have been updated.

You can now delete the _posts.js file in the routes/blog directory.

Since the individual post routes don't exist yet so these links will result in a 404 error, you will create them in the next section.

How to Create Dynamic Routes for Posts

In Sapper, you can create dynamic routes by adding brackets to a page name, ([param]), where the param is the dynamic parameter that is the slug of the article.

You will notice that a file named [slug].svelte already exists in the src/routes/blog directory.

You need to update the server route used in this file so when a user clicks on a post, the data corresponding to that post is fetched and is displayed with the blog/[slug] route.

Update blog/[slug].json.js file like this.

const fetch = require("node-fetch");

export async function get(req, res, next) {
    const {slug} = req.params;

    const {TAKESHAPE_API_KEY, TAKESHAPE_PROJECT} = process.env;
    const data = await fetch(
        `https://api.takeshape.io/project/${TAKESHAPE_PROJECT}/v3/graphql`,
        {
            method: "post",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${TAKESHAPE_API_KEY}`,
            },
            body: JSON.stringify({
                query: `
          query PostBySlug($slug: String) {
            post: getPostList(where: {slug: {eq: $slug}}) {
            items {
              _id
              title
              deck
              bodyHtml
            }
            }
          }`,
                variables: {
                    slug: slug,
                },
            }),
        }
    );

    const response = await data.json();
    const post = JSON.stringify(response.data.post.items[0]);

    res.writeHead(200, {
        "Content-Type": "application/json",
    });

    res.end(post);
}

The above code is quite similar to the server route code discussed in the last section, with few key differences.

This route fetches individual post data based on the slug provided, which is accessed via req.params.

  const { slug } = req.params;

The GraphQL query in the above code fetches post matching the slug using where: { slug: { eq: $slug } }. In the query, bodyHtml corresponds to the HTML body of the post and deck is the short excerpt of the post.

query PostBySlug($slug: String) {
  post: getPostList(where: { slug: { eq: $slug } }) {
    items {
      _id
      title
      deck
      bodyHtml
    }
  }
}

The slug is made available to the GraphQL query via variables.

variables: {
  slug: slug,
},

Update blog/[slug].svelte file like this.

<script context="module">
export async function preload({params}) {
    const res = await this.fetch(`blog/${params.slug}.json`);
    const data = await res.json();

    if (res.status === 200) {
        return {post: data};
    } else {
        this.error(res.status, data.message);
    }
}
</script>

<script>
    export let post;
</script>

<style>
    .content :global(h2) {
        font-size: 1.4em;
        font-weight: 500;
    }

    .content :global(pre) {
        background-color: #f9f9f9;
        box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
        padding: 0.5em;
        border-radius: 2px;
        overflow-x: auto;
    }

    .content :global(pre) :global(code) {
        background-color: transparent;
        padding: 0;
    }

    .content :global(ul) {
        line-height: 1.5;
    }

    .content :global(li) {
        margin: 0 0 0.5em 0;
    }
</style>

<svelte:head>
    <title>{post.title}</title>
    <meta name="Description" content={post.deck}>
</svelte:head>

<h1>{post.title}</h1>

<div class="content">
    {@html post.bodyHtml}
</div>

The preload function takes two arguments, page and session. Here page is an object equivalent to { host, path, params, query } and session is used to pass data such as environment variables from the server.

In the above preload function, you access the page object's params property and pass the slug of the page to the server route.

If you console.log() the page object, you will see all the data available via the page object. Here is how this will look like.

{
  host: 'localhost:3000',
  path: '/blog/jump-aboard-new-treasure-island-edition',
  query: {},
  params: { slug: 'jump-aboard-new-treasure-island-edition' }
}

The post is returned based on the status code of the response. this.error is a method in Sapper for handling errors and invalid routes. You can read more about it here.

    if (res.status === 200) {
            return { post: data };
        } else {
            this.error(res.status, data.message);
        }

You only need to update post.body to post.bodyHtml in the div with class="content" in [slug].svelte file like.

<div class="content">
    {@html post.bodyHtml}
</div>

In Svelte, you can render HTML directly into a component using the @html tag like shown above. You can read more about this tag here.

And its done.

Try clicking on any of the posts on /blog route or head over to http://localhost:3000/blog/jump-aboard-new-treasure-island-edition. You will see a page similar to this.

You can view the finished website here and the code for the project here.

Conclusion

In this article, you learned how to use TakeShape with Sapper, an application framework powered by Svelte. We saw how simple it is to integrate TakeShape with Sapper.

We also discussed how to use API Explorer in TakeShape and how to use the preload function in Sapper.

With just a few simple modifications and updates in your Sapper project, you can easily achieve a perfect Lighthouse score. Amazing, Right!

Here are some additional resources that can be helpful.

Happy coding!

Final Space API

Ashutosh Kumar Singh — Tue, 06 Oct 2020 06:54:01 +0000

Hey Everyone
This Hacktoberfest, I am maintaining Final Space API, a RESTful public API based on the show Final Space.

There are some great issues up for grabs, also you can create your own issues.

There are many beginner-friendly and non-coding issues, yes you heard it right, you don't need to code to contribute to the project. You can contribute in many different ways.

Here is one such issue : Contribute data to Character endpoint #18

Repo - https://github.com/lelouchB/final-space-api
Live - https://finalspaceapi.com/

Looking forward to your contributions. :)

An Introduction to Sets in JavaScript

Ashutosh Kumar Singh — Wed, 14 Aug 2019 17:11:03 +0000

Using sets to deal with unique elements in a dataset

Photo by JOSHUA COLEMAN on Unsplash

Sets are a new object type included in ES6 that allow the creation of collections of unique values. The values in a set can be either simple primitives like strings and integers or more complex object types like object literals or arrays. Think of sets as an array with no repeated elements.

There are many instances where we have an array containing many elements that we want to convert to a unique array. While it can be done by brute force on the array, checking elements, using loops, distinct callback method, etc., the best method is using set().

Syntax:

new Set([_iterable_]);

Let’s first see an example

It is clear from the example that by making a new set from an array and using the spread operator, you can make a set into an array.

Set Methods

Now let's look at some basic set methods, you may not need them but it best to be familiar with them in order to optimize your code:

add
size
has
forEach
delete
clear

It’s pretty much straight forward, the add method adds elements, the delete method deletes them, the has method has the same functionality as includes in arrays, and the clear method empties the set.

As we saw in the syntax, the set method takes an iterable as an argument, so a string can also be used as an argument.

Now let’s look at the practical examples of the set method:

Conclusion

In the end, I want to conclude that sets should be used when dealing with distinct or unique elements in a dataset. Arrays should be the preferred choice first and foremost as they have enough methods and functions for dealing with almost every question.

A Brief Introduction to Closures and Lexical Scoping in JavaScript

Ashutosh Kumar Singh — Thu, 01 Aug 2019 17:46:46 +0000

“Writing in ECMAScript language without understanding closure is like writing Java without understanding classes” — Douglas Crockford, father of JSON

Photo by Caspar Camille Rubin on Unsplash

In this piece, we are going to discuss closures and lexical scoping in JavaScript. Understanding closures leads to a better understanding of programming itself. If you are planning on becoming a professional programmer, questions regarding closures and their applications are widely asked during technical interviews and can be really helpful to you.

If you are a JavaScript Developer, chances are you already using closures and just don't know it. There are so many complex examples out there that just confuse you when you try to learn closures, so I’ll be using the simplest examples I could find and by the end of this piece, you should have a basic understanding of what closures are. Let's get started.

Lexical Scoping

Before we can discuss closures, we should have a basic understanding of the scope and lexical scope. JavaScript has lexical scoping with function scope, which means each function creates a new scope.

What is function scope?

Basically, in JavaScript, there is Global Scope and Local Scope.

Global Scope : There is only one Global Scope in a Javascript Document i.e. area outside all the functions and how you can identify a global scope is that the variable defined in the global scope can be accessed anywhere in the code.

Local Scope : Variables declared inside functions are local to the function and is bound to the corresponding local scope. Those variables cannot be accessed outside the functions.

Let's see an example:

The variable iHaveGlobalScope is declared in the global scope and therefore can be accessed even from within the function localScope(), but when I try to console log the variable iHaveLocalScope outside the function or outside the local scope, it throws a Reference Error at runtime.

The local scope can be further divided into function scope and block scope. The concept of block scope was introduced in ES6 together with the new ways to declare variables — const and let.

Function Scope and Block Scope

Whenever you declare a variable inside a function, the variable is bound within the function and you can’t access it outside the function. var is the keyword to define a variable for function-scope accessibility.

Now, you might ask, if it gives an error even if you use let or const, why is only var associated with function scope? The thing is, let and const are used to define block scope, and before ES6, JavaScript didn't have block scope or let and const.

A block scope is the area within if, switch conditions or for and while loops. Simply put , whenever you see {curly brackets}, it is a block.

Let's see an example:

Now you might expect that none of the log commands should work but as you can see that is not the case with var, variables defined with var inside if, switch conditions or for and while loops can be accessed globally and are part of global scope and hence it is better practice to use let and const with them.

Lexical Scope

Finally, we have reached the true purpose of this post. Well, I could have skipped the long discussion of scope but personally, I don’t think you can understand lexical scope without knowing the key components revolving around it.

Again, a point to remember: Javascript has lexical scoping with functions scope.

In simple words, it means the children scope has access to the variables defined in the parent scope. For instance, If I were to define a function and declare a variable inside it and inside the very same function, define another function, then I should be able to use that variable inside the inner function because of lexical scoping. Let's see an example:

It can be seen from the example, the variables declared in outerFunction() are accessed by innerfunction(), this is lexical scoping.

The scope of variables is defined by their position in the code. In order to resolve variables, JavaScript starts at the innermost scope and searches outwards until it finds the variable it was looking for. In the above example, Javascript first searches for variables inside innerFunction() and when it doesn’t find it, it goes outside i.e outerFunction()

Lexical scoping is better because we can easily figure out the value of a variable from the code, whereas in dynamic scoping, the meaning of a variable can change at runtime, which makes it complex to understand.

So, we have successfully understood what lexical scoping is, now let’s look at closures where lexical scoping is actually used.

Closures

According to the Mozilla Development Network(MDN) :

“A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.”

First, let's look at a simple example to start:

The main point to think here is outerFunction() returns innerFunction() , so the newFunction() is in fact innerFunction(), but we didn’t return variable1. Still, it is a part of newFunction(), so where does the value of variable1 comes from if outerFunction() is already returned i.e. finished executing.

This accessing of a variable outside the immediate scope will give rise to a closure.

Since variable1 was part of the lexical environment that created innerFunction(), innerFunction() will have access to it.

Let's look at another example:

Just FYI, this is a widely used example for closure and you may find it many tutorials, here we have defined the function add() with a parameter x which returns another function with parameter y, which returns the sum of x and y.

Now we create new functions addFive() and addTen(), by passing arguments inside add() function, these addTen() and addFive() are actually closures, and although they have the same function body definition, they store different lexical environments. In addFive() lexical environment, x is five, while in the lexical environment for addTen(), x is ten.

Closures are a very important part of programming, not only in JavaScript but in all programming languages. They have so many practical applications like object data privacy, event handlers and callback functions, and other functional programming patterns.

I hope by now you have a basic understanding of scope in JavaScript, we have covered a brief introduction to lexical scoping and closures in this post. in next post, we will discuss the closures in detail and its actual use like data privacy, call(), bind(), apply(), event handlers, etc. through various examples.

Beginners Guide to Cloud Computing ☁️

Ashutosh Kumar Singh — Wed, 24 Jul 2019 13:59:25 +0000

When we talk about technological advancements in the last 3 to 5 years names like Artificial Intelligence, Chatbots, Augmented Reality, Machine Learning, etc. comes to our mind, but what this list is missing is “Cloud Computing” , even today there are many people, even some developers who have no idea what this actually means and how its changing the traditional way of computing, also there is still a wide misconception that cloud is another name for drive, storing data over the internet, well storage is a part of cloud computing but its more than that, so much more than that . When you actually understand what it is and how it has changed the way business is done and has enabled many people to reach goals and try new things that they’ve never done before in a way that they have never thought before, then you will acknowledge why every major IT company whether its Google, Amazon, Microsoft, Alibaba, IBM is investing in cloud computing and have released their own cloud computing services like Google Cloud, AWS, Alibaba Cloud, IBM Cloud, Azure to name a few.

We will discuss

What is cloud computing?
Why its better than traditional means?
Do you as a developer need to know Cloud Computing?
What is the future in Cloud Computing?

What is Cloud Computing?

Well in the simplest way, computing is the delivery of computing services like storage, servers, databases, networking, software, analytics, intelligence over the internet, “cloud” to offer faster innovation, flexible resources, and scale economies.

A cloud allows users to access application, information, and data of all sorts on an online level rather than by use of actual hardware or devices

You are probably using cloud computing right now, even if you don’t realize it. If you use an online service to send an email, edit documents, watch movies or TV, listen to music, play games or store pictures and other files, it is likely that cloud computing is making it all possible behind the scenes. The first cloud computing services are barely a decade old, but already a variety of organizations — from tiny startups to global corporations, government agencies to non-profits — are embracing the technology for all sorts of reasons.

Why is it better?

Cloud computing is a big shift from the traditional way of using IT resources and services. Here are seven common reasons organizations are turning to cloud computing services:

Cost
Speed
Global Scale
Productivity
Reliability
Performance
Security

Let's understand it through an example,

Consider you are a developer and you have finished developing your software, now you think the difficult part is over or is it, now you have to just launch your application over a wide range of customers, provide continuous delivery, manage databases, examine the analytics,strengthen your security,improve performance, productivity and when the demand increases, increase your computing power.

In a traditional way, you would have bought or rent a server, hire different professional experts to, manage servers, databases, analytics, security, spend a lot of money on infrastructure, new hardware when the demand increases and so many other expenses,

this is where cloud computing comes in, with cloud computing ,you can do all of that and more and with the option of pay as you go meaning you have to pay for the services that you want, cloud computing offers elastic instances, storage, databases, all of which can be increased just with a mouse click that is why its flexible, there is no hardware cost, you don't have to hire people to manage anything ,its so simple you can do and that too from anywhere in the world, they provide real-time analytics, free security against attacks, testing and almost 100% reliability meaning your application is always live and backups to quickly restore the services in any case of mishap,these were the few examples of how cloud computing makes deploying your application so much easier and cost-efficient ,it doesn't matter which cloud service you are using ,the cost is always less than traditional means.

Also depending on your requirements, several model types and services have evolved to provide a solution. There are three different ways to deploy cloud services: on a public cloud, private cloud or hybrid cloud.

Now, most cloud computing services fall into four broad categories: infrastructure as a service (IaaS), platform as a service (PaaS), serverless and software as a service (SaaS). These are sometimes called the cloud computing stack because they build on top of one another. Knowing what they are and how they are different makes it easier to accomplish your business goals.

But we will not get into that just yet.

Do you as a developer need Cloud Computing?

You are a developer or just started learning to code, you think why do I need or why do I care about Cloud Computing, I am XYZ programmer, my field has no need for Cloud Computing, well you could not have been more wrong,you need to build your applications, test, generate actual user analytics, fix bugs, and all this is going to be done on Cloud in the near future even the DevOps are a major part of Cloud Services.

Let's say you are working as an individual or working in a big IT firm, the days when every company had their individual servers are long gone ,now every organization is shifting to cloud whether is public, private or hybrid cloud ,now the applications you build, the software you produce in short your program has to be in accordance to the cloud, keeping in mind the guidelines of how a program on cloud behave, and how you can improve its performance, productivity, and speed.

In the coming decade, all the organizations would have shifted to one or another cloud services and its important to know as a developer to keep up the advancements, innovation is happening every day, no one thought that data scientist would have been an actual promising career ,AI is no more the things in comic books and science fictions ,Cloud Computing will be everywhere in the next 5–10 years.

What is the future in Cloud Computing?

With cloud computing and the technology behind it, there are many potential opportunities and capabilities. Cloud computing has opened a whole new world of jobs, services, platforms, applications, and much more. There are thousands of possibilities beginning to form as the future of cloud computing starts to really take off. Cloud Computing has created so many new job opportunities like cloud architect, cloud software engineer, cloud security engineer, cloud systems engineer, cloud network engineer to name a few.

Its a fact that Google, Amazon, Microsoft, IBM, Alibaba, etc are the heart and core of the IT industry, and all of them have launched their own Cloud Service,Google has Google Cloud,Amazon has Amazon Web Services, Microsoft has Azure, the reason to which is all these companies know the future lies in cloud computing .

Let's look at 7 Well-Known Companies that have moved to Cloud

Netflix
Xerox
Pinterest
Instagram
Etsy
Apple
MediaMath

If not all, every developer or aspiring developer has heard of one or two of these companies and they all are now using Cloud Computing, these are the like the dream companies of many developers.

So, If you are a developer or still a beginner and want to explore a whole new area of technology, Cloud Computing is the way to go, In the coming years every organization would have moved to cloud or launched their own cloud, which will create need of so many individuals who are expert in their field.

In the next post, we will take a deep dive into what Cloud Computing comprises of and what are its major components, we will learn about ECS, SLB, RDS, serverless computing platforms like AWS Lambda, etc.

3 JavaScript Array Methods Every Developer Should Know

Ashutosh Kumar Singh — Sun, 21 Jul 2019 10:33:12 +0000

Photo by Caspar Camille Rubin on Unsplash

In this article, we will discuss:

join()
split()
sort()

Why should every JavaScript developer know these methods? Arrays are important elements you’ll need in your code. These methods can help make your code more elegant and presentable.

You can make your project run without these methods but for that, you will have to write unnecessary lines of code, of which there was no use in the first place.

So, let’s get started. We will first see some basic methods like join() and split(), and then we will move to sort().

1. Join()

Think of a scenario where the users input some values in the array and later wants to see it as a message (string).

This is where the join() method comes in, it converts elements of an array into a string.

toString() is also used to convert a string into an array but with join() we can use a separator argument, so it’s better practice to use join().

The syntax is very simple, you just use:

array.join(separator)

Here, the separator is optional for the argument you pass, to define how you want the elements in the array to separate. It can be a space, a dot, a comma, a word, etc.

If no argument is passed, its elements are separated by a comma.

Let’s see it in action

A few examples for you above. The important thing I want to talk about is string8 and string2.

In string2, there’s nothing between the quotation marks while there is a space between them in string8.

You can put any amount of spaces between them and the result will change accordingly.

2. Split()

So, we have seen that we can convert elements in an array to a string.

What about converting a string into elements of an array? That’s what the split() method does.

split() can come in very handy in situations where you have to take an input message and see if it contains a specific word or not. You can easily do so by converting it to an array and using the includes() method. We’ll talk about that soon.

You can also do many other functions once the string is converted into an array. Technically, split() is a string method but I will discuss it here.

First, let us look at its syntax:

string.split(separator, limit)

Separator specifies the character or words used to split the string. If it’s left blank then the whole string will convert into a single element in the array.
Limit is an optional argument and is rarely used. It is an integer that specifies the number of splits. Items after the split limit will not be included in the array

Let’s see some examples.

I will use the examples from the join() method above and try to reverse it into a string with split().

Now, let’s see the above example one-by-one.

array1, string1: Split into an array wherever there was a comma.
arrayWithLimit : I have specified a limit so the resulting array has only four starting elements, which was the limit.
arrayWithoutSeperator: I’ve already discussed that, if no separator is given, the whole string converts into a single element of the array.
array2: As the quotation in the argument was empty, split() separated each character, including white spaces, commas, and any other character if there was any.
array4: You will see all the ‘and’ was missing from the string and the string that was left out became a single element of the array. If there was even a single alphabet in the argument, the result would be a single element with a string missing the specified element. Try it out yourself. So, be careful when using words or strings as a separator.
array3, array5, array, array7, array8: The same string is seen as a result after splitting in all of the above, which is correct as we just undo what join() did with respective characters.

Practice: create a function with join(), split(), and reverse()

You could now practice creating a function with join(), split(), and reverse() to check if the user input string is a palindrome.

If you aren’t familiar with the reverse() method, it just reverses the elements of an array.

Here is an example:

This concludes our split() method. Try the practice problem and share the GitHub repository to your code in the comments.

3. Sort()

As the name suggests, the sort() method sorts the elements of an array.

By default, the sort() function sorts values as strings.

Now, a problem arises when you sort numbers.

Because, if I were to sort numbers, let’s say 100 and 25, 100 will come before 25, as 1 of 100 comes before 2 of 25.

It can be fixed using a compare function, where a function is passed to syntax: function(a, b){return a — b}

( I have used an arrow function instead of traditional function declarations as given in the syntax above.)

Let’s understand this compare function. It should return a negative, zero, or positive value, depending on the arguments — whether a is larger or b.

When the sort() function compares two values, it sends the values to the compare function and sorts the values according to the returned (negative, zero, positive) value.

If the result is negative, a is sorted before b.
If the result is positive, b is sorted before a.
If the result is 0, no changes are made with the sort order of the two values.
The compare function compares all the values in the array, two values at a time (a,b)
When comparing 25 and 100, the sort() method calls the compare function (25, 100).
The function calculates 25–100 (a,b) and as the result is negative (-75), the sort function will sort 25 as a value lower than 100.

Conclusion

This brings us to the end of this discussion.

We have successfully covered join(), split(), and sort().

In my next post, I will discuss the map() and filter() functions and why they are important to a programmer.

Thanks for reading!

3 Different ways to combine arrays in Javascript

Ashutosh Kumar Singh — Fri, 19 Jul 2019 14:42:48 +0000

https://medium.com/@lelouchb/3-different-ways-to-combine-arrays-in-javascript-b273c9225e0d?source=friends_link&sk=39bc1e5fa60fb5306e395d28431668c5