DEV Community: Shubham Singh Chahar

Creating GISTs from a GITHUB Repo on the go

Shubham Singh Chahar — Thu, 16 Jul 2020 03:41:21 +0000

Github provides you with the functionality to make and embed a gist anywhere on the internet, but there's something missing, what if we want to share a gist of code from existing repo without the need of creating a new gist for it?

TLDR;

Hello there,

For anyone who works with documenting or creating how-tos and tutorials on software development, we know how hard it is to include a chunk of code in between.

There are few options that we can consider -

We can include a code block in between and write down all the code we need to display.
We could create a gist on GitHub, but creating and managing gists is tedious.

But then, we have the code in a repository most of the time, after all, one of the principle we developers adhere to is DRY (Don't repeat yourself).

This is where git-repo-gist comes in, as the name suggests, this utility allows you to create a gist out of any file from a GitHub repository.

Features

Two modes available
- Script and Iframe
Supported Languages (I suppose all the popular languages are supported but the list below is for sure)
- typescript
- javascript
- dart
- json
- php

How to use it

There are few simple steps to get gist out of code -

Get the uri to the raw file, for eg https://raw.githubusercontent.com/thefallenmerc/git-repo-gist/master/app.js
extract the part starting from your username till end, (everything after https://raw.githubusercontent.com/), we get thefallenmerc/git-repo-gist/master/app.js
Append this to our base url with any of the option available in between, the solution is hosted at https://git-repo-gist.herokuapp.com/, thus we get https://git-repo-gist.herokuapp.com/<option>/thefallenmerc/git-repo-gist/master/app.js, where option can have the following value -
- gist: gives back and actual gist script
- framed: gives back an iframe with the gist in it

Link to Git Repo Gist - Git Repo Gist

thefallenmerc / git-repo-gist

Github Repo Gist

This project imitates the Gist functionality provided by github but with a little twist, it works for repository source files.

View Demo · Report Bug · Request Feature

Index

Github Repo Gist

This is where this code comes in.

How to use it

There are few simple steps to get gist out of code -

Get the uri to the raw file, for eg https://raw.githubusercontent.com/thefallenmerc/git-repo-gist/master/app.js
extract the part starting from your username till end, (everything after https://raw.githubusercontent.com/), we get thefallenmerc/git-repo-gist/master/app.js
Append this to our base url with any of the option available in between…

View on GitHub

Internationalization in React without any external package

Shubham Singh Chahar — Sun, 19 Apr 2020 06:05:23 +0000

Internationalization is the process of making an application multi-locale, an application that supports more than one language.

There is already a popular package for it react-intl. But to understand the concept and make our grasp on React as well as javascript, we will try to implement it without any external library.

To follow this tutorial, you need to have knowledge of some of the concepts like Higher Order Function and ContextAPI. If you struggle there, I suggest you to get a hold on them for better understanding, or you can just follow this tutorial, we will get things working anyway.

Features

Localization based on JSON translation files
Persistant choice

Our solution will be easy, simple and efficient. So lets dive right into it.

Project overview

components - this directory contains all the components for our app
_contexts - this directory contains all the contexts related logic
_locales - this directory contains all the JSON translation files
index.js - the starting point of our app

Let's try to understand the workflow here, we will create a Locale context that will manage the locale of our app and wrap the app in it.
We will then use a special function that is provided by the context wherever we will feel a need to make the content multilingual.

We will pass the string to be handled in the special function which will return the translated string.

That's it.

Locale

Let's have a look at the translation json files at first, the content of hi.locale.json is -

{
  "hello": "नमस्कार"
}

as you can see, this file contains only one translation, i.e. for hello. so whenever our app's current mode is set to language Hindi, all hello wrapped in the special function would be turned to नमस्कार.

To add more translations we just have to add more key-value pairs.

Context

This directory contains the logic for contexts, it contains only one file locale.context.js, let's have a look at its content.

import React, { Component } from 'react';

export const LocaleContext = React.createContext(null);

const withLocale = Component => props => (
    <LocaleContext.Consumer>
        {
            state => <Component {...props} lang={state} />
        }
    </LocaleContext.Consumer>
);

export { withLocale };

This file contains two exports, first one is the LocaleContext and the second one is a Higher Order Component that wraps any given component in a LocaleContext.Consumer, so that we can use a special handle function to handle the string conversion.

Components

This directory contains all the components (only two) that are used in our app.

Home Component
Locale Component

Locale Component

Let's start with the locale component -

import React from "react";
import { LocaleContext } from "../_contexts/locale.context";
import en from "../_locales/en.locale";
import hi from "../_locales/hi.locale";
import ta from "../_locales/ta.locale";

const translations = {
  en,
  hi,
  ta
};

class Locale extends React.Component {
  constructor(props) {
    super(props);
    // get saved langcode from localstorage
    let langCode = localStorage.getItem("langCode") || "en";

    // validate the langcode with available languages
    if (!Object.keys(translations).includes(langCode)) {
      langCode = "en";
    }

    this.state = {
      current: langCode
    };
    this.handle = this.handle.bind(this);
  }

  handle(s) {
    return translations[this.state.current][s.toLowerCase()] || s;
  }

  render() {
    return (
      <LocaleContext.Provider
        value={{
          current: this.state.current,
          handle: this.handle
        }}
      >
        <div className="LocaleSelector">
          <select
            defaultValue={this.state.current}
            onChange={event => {
              const langCode = event.target.value;
              this.setState({ current: langCode }, () => {
                localStorage.setItem("langCode", langCode);
              });
            }}
          >
            {Object.keys(translations).map(lang => (
              <option key={lang} value={lang}>
                {lang.toUpperCase()}
              </option>
            ))}
          </select>
        </div>
        {this.props.children}
      </LocaleContext.Provider>
    );
  }
}

export { Locale };

Let's start understanding what is happening here, in this component, we start off by importing react, and then the locale-files.

Next, we create a translations object, this object is has a key role in whole process, the keys in this object are lang code and values are the relative locale JSONs, which now are loaded as object themselves.

Next is the locale component itself, in the constructor, we are loading last saved preference from localstorage, if none found we set it as en for default.

The next line is a validation check, incase some language is set to current from localstorage, for eg hindi, but our application now is not supporting hindi, this check just makes "en" as current langCode incase the last language choice in now invalid.

After constructor, there is a method defined named handle, this is the special function that we were talking about, the handle takes in a string, finds if the translation of the string is available in currently selected language and then return the translation, or the string itself if the translation is not available.

Next comes that render method, we initialize the LocaleContext.Provider and pass it an object as value.

{
     current: this.state.current,
     handle: this.handle
}

The current key holds the currently selected langcode.

The handle method is also passed so that any consumer can use it to translate.

Next we have the locale select drop down -


        <div className="LocaleSelector">
          <select
            defaultValue={this.state.current}
            onChange={event => {
              const langCode = event.target.value;
              this.setState({ current: langCode }, () => {
                localStorage.setItem("langCode", langCode);
              });
            }}
          >
            {Object.keys(translations).map(lang => (
              <option key={lang} value={lang}>
                {lang.toUpperCase()}
              </option>
            ))}
          </select>
        </div>

The options for select tag are populated by the translations object, it also has an onChange handler which sets the currently selected langCode to state and also updates its value in localstorage for latter use.

Just below it is -

        {this.props.children}

This line of code is necessary to render the children of our LocaleProvider, we will see what this is about when we react index.js.

HomeComponent

This is the actual component that will make the use of our internationalization -

import React from 'react';
import {withLocale} from '../_contexts/locale.context';

function HomeComponent({ lang }) {
  return (
    <div className="Home">{lang.handle('hello')}</div>
  );
}

export const Home = withLocale(HomeComponent);

Here, we import React, then the Higher Order Component withLocale.

We declare HomeComponent with takes in prop containing lang object, this lang object is the value of LocaleContext that will be provided by withLocale function.

Inside HomeComponent we are using the special handle function with handles the translation and passing it hello, remember hello is a key in our localization files.

at the last line we are export HomeComponent wrapped in withLocale, any component that would like to access the handle function must be wrapped in withLocale or the LocaleContext.Consumer itself.

index.js

The index.js is the files that joins all functionality together.

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import { Locale } from './_components/locale.component';
import { Home } from './_components/home.component';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Locale>
          <Home />
        </Locale>
      </div>
    );
  }
}

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

We initialize the app in here, Provide Locale component with child Home, Home will replace {this.props.children} in Locale component.

And that's pretty much it.

Thanks for reading.

A Fast deploying Realtime Firebase + React-based blog

Shubham Singh Chahar — Thu, 16 Apr 2020 14:18:42 +0000

The Problem

TLDR;

Hey guys,

Being a full-stack developer is a tedious task, won't you agree?

For every web-app I make, I have got to manage the frontend as well as the backend.

I mean come on, this much work? The mobile app guys don't have to deal with two different
projects at a time,

let alone two different technologies. Lucky folks.

But what do they say, with great power comes great responsibility. Many times we are just confused even on things like what tech stack to use.

I was also tangled in questions like this when I started my search for a more efficient and sustainable development method.

That's when I was reminded of Firebase by Sonu Sharma, of course, why did I not think of it.

I went through the documentation and learned the basics, got my hands on a few practice projects before I got confident about it.

So here I am with a solution to all of our problems, Over the last few weeks, I have been investing quite a few hours in it.

The Solution

Comes in the TFM-BLOG,

It removes the overhead of server handling and APIs from you.
Configuring it is pretty easy and straight forward too.

Almost no programming experience is required. Everything is handled by the developers already. Just plug and play.

TFM-BLOG aims to be a simple, minimalistic, yet powerful blogging platform.

Estimated deployment time - 10 Minutes

Features

Firebase Authentication.
Serverless.
Markdown based.
Firestore for database.
Cloudinary for CDN (Optional).
Realtime updates.
Minimal sleek UI.

The Steps

Visit The Github repo to use the template.
Customize your repository
Clone the newly created repo to your local machine
Run npm install on the newly created directory to install the npm dependencies. (This step needs npm installed on your system, please refer to this link)
look for a file .env.sample in the created directory and make two duplicates of it namely, .env.development and .env.production.
Now head on to the firebase console, (hope you are signed in) and create a new project.
Insert the project name, and click on continue, click continue new on the following screen as well.
Select analytics account if opted for google analytics on the previous screen and click continue.
It will take a few seconds to set up all the things necessary, click on Continue when ready.
Once you are at firebase dashboard of the newly created project, click on authentication tab in sidebar (can change with newer firebase UI updates) and then click on Set up sign-in methods
On the next screen, click on pencil icon next to the Email, and then click on save after enabling the relative checkboxes.
Switch to the Users tab, click on add, fill in the credentials and click on add user to save the user.
Make a note of the new user's uid as we will need it to fetch the list of blog posts by us.
Now time to get the configuration to connect firebase to our blog, click on the cog icon in the sidebar and head on to settings
Click on the code icon (its the icon for web-app) and it will redirect you to a page where you will add a new web app to firebase.
Fill in the form, add a nickname, check the also set up firebase hosting (this is crucial), click on register app, click on next, we don't need the scripts right now, also click next until the setup is complete.

I will guide you through the remaining steps, so you don't have to worry about missing anything.
Now this step includes integrating firebase in the that we created previously back in step 3. Go to the repo directory, open up bash or cmd and run the following command, it installs firebase-tools globally, so you don't have to run it next time you are creating an app following this tutorial -
```
    npm install -g firebase-tools
```
Once done, run the following and follow steps to log in to firebase, most probably it would be web-based authentication -
```
    firebase login
```
After the login is successful, run the following command -
```
    firebase init
```
Type y when asked to confirm
When asked Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
use up/down arrow to navigate, space to select Hosting
On the next prompt select 'Use an existing project', it will then prompt you with all the available project, select your desired (in our case it is 'my-awesome-tfm-blog (my-awesome-tfm-blog)')
Now it will prompt what directory to use as public, it is the build directory of your react app by default, so input build and press enter.
Now it asks whether our app is SPA, which it most definitely is, so press 'y' and followed by enter.
Firebase is now initialized in our project. Time to configure the APP_KEYS and other credentials.
Remember we made two files '.env.development' and '.env.development' in step 5? The development file is used in the development environment and production in production as the name suggests, we will now populate data in these files, mostly you will use the same credentials in both.
Head over to console once again you will still be on the settings page, if not, click on cog icon in the sidebar and then go to project settings.
Scroll down to the bottom, your app will now be listed there.
Under the section 'Firebase SDK snippet', click on the radio that says config and you will snippet of JS code -
Switch back to local and open .env.development in any text editor, what you will see is an env file with various variables that have blank value prepended with 'REACT_APP'
Fill all the values from the firebase console to relevant variable in the env file, the string can be surrounded in double-quotes, also do not add a comma at the end.
After filling most of the values you might notice that REACT_APP_NAME and REACT_APP_DEFAULT_USER_ID are two value you cannot find relevant data for,

Let's fill them up too...

REACT_APP_NAME will take the value that you want to be displayed on the navbar of your blog.

REACT_APP_DEFAULT_USER_ID will take the uid value of the user that we created in step 3, to get the uid, go to the console, select authentication and then users tab, from there just copy the uid and insert it in the app. Make sure your both env files look like this -
Time to build and deploy the app. Run the following command on the terminal to build the project
```
    npm run build --prod
```
Run the following command to deploy the project
```
    firebase deploy
```
Both of these commands will result in the following output, stating that the deployment is successful! Cheers!
Before heading over to the URL provided as the output of the last step, for me it is https://my-awesome-tfm-blog.firebaseapp.com, let us complete the last task.
Let us set up the realtime database 'firestore' provided by firebase. Head to the console, select 'database' from the sidebar and click on create database button.
It will prompt you to set up, rules, for the sake of simplicity, let us choose test mode, for now, we will learn more about rules in another tutorial.
On the next screen select any of the locations you prefer and finish the setup. Firestore is now configured.
Now we can head over to the URL that we got in step 33 after deploying the app. For me, it was https://my-awesome-tfm-blog.firebaseapp.com, we can see the deployed app now, but it feels empty.
To know how to create a blog post and about other features of the blog head over to TFM-BLOG Getting Started

Making Speech to text converter using the HTML5 WebSpeech API

Shubham Singh Chahar — Wed, 15 Apr 2020 16:50:43 +0000

Hello guys,

So I was working on this project that is a web-port of a Native App.
Basically the client wants to provide the user with an audio clip that is played for him with the text underneath it.

Then the user has to repeat the sentence, our app will output what the user said on the screen so that the user can evaluate his grip over the language.

To perform this task, I had to do some research upon which I found out that there is actually a Web Speech API support available for browsers.

The Web Speech API, is currently only supported by the chromium-based browser like Chrome version 25 and up, also it is currently only available in nightly builds of Mozilla Firefox. This is due to the fact that Web Speech API currently utilizes Google's text to speech tech.

Here is the basic example of how you can use Web Speech API yourself.

This little piece of code will start the listener, the browser might ask for microphone request, you have to accept it.

Then just speak anything and when you are done. You will see some output on the console.

So let me break it down for you -

Tag #1 initializes webkitSpeechRecognition, which is what makes the Text-To-Speech come to life.

Tag #2 attaches an event handler for when the process of recognition is complete and provides us with a SpeechRecognitionEvent object.

Tag #3 starts the speech recognition engine, the browser will now start listening to you.

The response object can be used to fetch the recognized text. If you navigate it, you will find that response.results contains a list of all the results that were a similar match.

You can fetch the return result from response.results[0][0].transcript and the degree of accuracy by response.results[0][0].confidence.

Also you can use variety of handler callbacks like speechstart, speechend but more on that later.

If the pen doesn't work here, please visit the link given below.

See the Pen Make text to speech converter ssing the HTML5 WebSpeech API by Shubham Singh Chahar (@shubhamsinghchahar) on CodePen.