teleren/devto huggingface dataset:
Automate your git push to remote server
Tags: git, react, productivity, tutorial
Published: 2022-03-17 17:12:09

Step by step deployment of my github repo to my server.

I have a [ReactJS app setup](https://dev.to/inimist/deploying-reactjs-app-on-ubuntu-2004-lts-on-amazon-ec2-instance-b87) as a git repo. Every-time I update and push to my currently working `dev` branch I have to ssh/login to my server and pull it to reflect changes to server. 

In addition I have to restart my app by running PM2 restart "myapp". Sometimes I have to run `yarn install` as well, when I have added or removed a package in my app.

I wish I could automate all this process of pushing, pulling, yarn install and finally restart my app. Is there a way? It seems like. Let's try to set it up.

## 1. Create the Bare Repo

#### Login to your server

`ssh arvind@devarticles.in`

#### Setup a bare repository

`git init --bare /path/to/My_React_App.git`

#### create a `post-receive` hook

nano /path/to/My_React_App.git/hooks/post-receive

And enter into it, this:

```
#!/bin/sh

# Check out the files
git --work-tree=/path/to/My_React_App --git-dir=/path/to/My_React_App.git/hooks/post-receive checkout -f dev
```

Note: In my example I am pushing my local `dev` branch to remote `dev` branch. You may omit passing branch name if you are working on your default branch, i.e. main or master, whatever is set in your config.

#### Important Step:
Make this file executable by setting:

`chmod +x /path/to/My_React_App.git/hooks/post-receive`

#### Run this within your own local repo:

`git remote add Development 'ubuntu@<IP-ADDRESS>:My_React_App.git'`

**Note:** if you use ssh key to login to server use the following to set up your key in Git configuration

`GIT_SSH_COMMAND='ssh -i /Users/arvind/mykey.pem' git submodule update --init`

And then make the **push**:

`git push --set-upstream Development dev`

If everything works fine you should be able see your local app changes on your server.

### Running Tasks After Git Hook Push

As I mentioned earlier I was working on a reactapp for which I wanted to setup this post-receive hook. Hence after every successful push I wanted to run some specific commands inside my app folder, the following ones to be specific:

`yarn install
pm2 restart "myapp"`

Thankfully this is as easy to automate running these commands as adding these two or rather three lines of code into our /path/to/ICOV3_React_Admin.git/hooks/post-receive file. That is edit post-receive file to add:

`cd /path/to/My_React_App
yarn install
pm2 restart "myapp"`

**Note**: I assume that I had run pm2 command with same name to run this app first time, from my app folder. That is:

`pm2 start yarn --name "myapp" -- start`
Difference between UI and UX ?
Tags: uiux, uiweekly, userinterface, userexperience
Published: 2022-03-17 17:08:55

**UI [USER INTERFACE] :-**
UI design refers to the aesthetic elements by which people interact with a product, such as buttons, icons, menu bars, typography, colors, and more. User experience (UX) design refers to the experience a user has when interacting with a product.

**UX [USER Experience] :-**
UX design is the process design teams use to create products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

WANT TO KNOW MORE
Follow @rohitmore07
Many more intersecting things are coming
SOCIALS
LinkeIn :- linkedin.com/in/rohit-more-8264a0230/
Behance :- behance.net/rohitmore07
TERMINAL komandalari | Part 5
Tags: beginners, uzbek, terminal, cpp
Published: 2022-03-17 16:58:39

1. 
-
` g++ main.cpp -o dastur && ./dastur `
- **main.cpp** nomli faylni kompilatsiya qiladi va birdan ishga tushiradi 

2.
-
` alias run='g++ main.cpp -o dastur && ./dastur' `
- yuqoridagi komanda uchun **run** degan taxallus beradi
- endi shu papkadagi main.cpp faylni kompilatsiya qilib birdan ishga tushirish uchun ` run ` komandasi kifoya qiladi.
bbPress: How to find mappings of attachments to their respective posts
Tags: bbpress, mysql, help
Published: 2022-03-17 16:54:58

Hi all,

For those familiar with the bbPress plugin, and the bbPress database tables: Where would one find out the corresponding post ID for attachments?

For example: I have an attachment whose file name is **fc8ec159-0de0-4c9f-8df9-020264de58d7.jpg** , but I do not know what post this corresponds with. Where would I find the corresponding **post_id** for this file?

Thank you!
Always "waste" time studying your calls.
Tags: code, codenewbie, beginners, webdev
Published: 2022-03-17 16:14:44

Before even going in on coding, you should first learn what it is that is being asked of your code.
When you do this, you will have a bigger picture of what it is that is being required of you.
For example, I'm currently undergoing a project that fundamentally is going to update the whole company internal system in order to have it working correctly, as the current version is legacy code, there isn't much to update, instead of creating a-new.

This means we need to learn how the whole system works and operates so nothing is left out. and as a bonus, you will already have a picture of how it could become and maybe even implemented in a new better easier way to use and maintain.

Also, Clean-Code is best. 'nuff said.
Creating Contextual Video Overlays with TomScottPlus
Tags: showcase, analysis, research, hackathon
Published: 2022-03-17 16:50:14

---
title: Creating Contextual Video Overlays with TomScottPlus
published: true
date: 03/17/2022
description: How the team behind TomScottPlus used Deepgram to analyze YouTube videos in real-time and provide an overlay with Wikipedia links to read. Read more here.
tags: showcase, analysis, research, hackathon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqq7qji9m7nyzjyahdsn.jpg
canonical_url: https://developers.deepgram.com/blog/2022/03/contextual-video-overlay-tomscottplus/
---

The team behind TomScottPlus used Deepgram to analyze YouTube videos in real-time and provide an contextual overlays with Wikipedia links to read. I sat down with Gwendolen Sellers, Harry Langford, [Maxwell Pettett](https://github.com/StolenCheese), and Tim McGilly to ask them about their project.

[Tom is an English YouTuber](https://www.youtube.com/TomScottGo) who mostly makes videos about geography, history, science, technology, and linguistics. His style is 'talk to camera' as he explains various nerdy topics, sometimes with cutaways to other experts explaining a concept.

{% embed https://www.youtube.com/watch?v=cdPymLgfXSY %}

The team took their inspiration from Tom's YouTube experience, where he shares interesting facts that inspire watchers to learn more. As they talked about learning through YouTube videos, they all agreed that it was cumbersome to learn more about topics mentioned in the videos. They found themselves often pausing videos, opening a browser tab, and searching for a mentioned topic for further reading. That's how the idea for TomScottPlus was born. TomScottPlus is a Chrome extension that aims to make this as seamless as possible by providing clickable overlay for videos with contextual Wikipedia article links in a video overlay as topics are mentioned in the video.

![A frame from a playing video with Tom speaking. On the left side is a purple pane with a link to Wikipedia article "Coins of the pound sterling" with a short page summary underneath.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gohq96fh3pxu1xlfnju7.jpg) 

When a YouTube video is visited, the Chrome extension sends a request to a Python application which downloads the audio and gets a high-quality transcript using the [Deepgram Python SDK](https://developers.deepgram.com/sdks-tools/) and our [utterances](https://developers.deepgram.com/documentation/features/utterances/) feature.

The Python application then performed basic Natural Language Processing to look for contextually-relevant words and look for matching data points on Wikipedia (which took several API requests making this quite computationally expensive even with batching). Data points were filtered based on relevance and returned to the Chrome extension, which would display data over the video.

You can check out the code for this [project on GitHub](https://github.com/StolenCheese/hackathon2022).
What is Github?
Tags: beginners, programming, codenewbie, github
Published: 2022-03-17 16:48:43

 

GitHub is a cloud-based service that helps developers store and manage their code. To understand GitHub fully, you need to understand Version Control and Git

What Is Version Control?
Version control helps developers manage and keep track of changes to a software project’s code. As a software project grows, version control becomes essential. 

If a developer is to work on a specific part of a software project’s codebase, it wouldn’t be safe to have them directly edit the source code.

Instead, version control allows developers work safely through branching. With branching, a developer duplicates part of the source code, which is called the repository. The developer can then safely make changes to that part of the code without affecting the rest of the project.

All of these changes are tracked and can be reverted if the need arises.

What Is Git?
Git is a free and open source distributed version control system, which means that the entire codebase and history is available to every developer, allowing for easy branching.

GitHub is a Git repository hosting service. It offers the distributed version control and source code management(SCM) functionality of Git. While Git is a command line tool, GitHub provides a Web-based graphical interface. Github also provides access control and several collaboration features, such as a bug tracking, wikis and basic task management tools for every project.

One of the most important features of GitHub is “forking” which is copying a repository from one user’s account to another. This lets you  take a project that you don’t have write access to and modify it under your own account. After making changes, you can send a notification called a “pull request” to the original owner. That user can then merge the changes found in your repository with the original repository.

These three features – fork, pull request and merge – make GitHub a very powerful tool.

Github  makes it a lot easier for individuals and teams to use Git for version control and collaboration.

To get started with GitHub:
•<a href="https://github.com/join">Sign up</a> for a free GitHub account
•Follow the <a href="https://guides.github.com/activities/hello-world/"> GitHub Hello World guide</a> to understand the most popular actions you can carry out.
Lesson 02 | Operators
Tags: methsymbol, assignmentoperators, comparingvalue, logicaloperators
Published: 2022-03-17 16:45:01

## Mathmatical Symbols in C
C is able to perform basic mathematical operations on variables and values using the following symbols:

- Addition: `+`
- Subtraction: `-`
- Division: `/`
- Multiplication: `*`
- Incrementing: `++`
- Decrementing: `--`
- Modulo: `%`

## Assignment Operations in C
C can assign values to variables and perform basic mathematical operations using shorthand operators:

- Assignment: `=`
- Addition then assignment: `+=`
- Subtraction then assignment: `-=`
- Multiplication then assignment: `*=`
- Division then assignment: `/=`
- Modulo then assignment: `%=`

## Comparing values in C
C can compare two values and/or variables against each other to return true or false. The operators are as follows:

- Do both sides have the same value? `==`
- Do the two sides have different values? `!=`
- Is the left side a lower value than the right side? `<`
- Is the left side a lower or equal value to the right side? `<=`
- Is the left side a greater value than the right side? `>`
- Is the left side a greater or equal value to the right side? `>=`

## Logical Operators in C
C can perform logical operations using the following operators:

- and: `&&` (Are both sides true?)
- or: `||` (Is at least one side true?)
- not: `!` (True becomes false and false becomes true.)
Day-46 Training At Ryaz
Tags: webdev, beginners, tutorial, mongodb
Published: 2022-03-17 16:34:13

Date:17/03/2022
Day:Thursday

Today,I started at about 10:30 am as I was down with db connection but when I satarted it today it was showing errors firstly it was having errors as we cannot add or insert in the respective db sofas I tried many of things but it does not worked so, I decided to make the new data base and various collections inside it so, i created the new database named as node app and created the collection as cources  softer this I created the new connection but I was again stuck with errors like cannot connect to db and various errors like I got error as I am not having the ip connected or live with the white list of ip's so, 
I was having no idea of it so, I had a call with my mentor so,we tried many of changes but still were not successful so, by trying various attempts so, once I got the error as some problem with password of data base so, my mentor suggested to use password without @ i.e special symbol so, after all this I got connected to db and I was able to see my declared data in my collection cources. so, i was succesful to make cources module now I am left with the user module.so,this way my day ended up.
mbsync, SASL and Gmail
Tags: mail, sasl, cli
Published: 2022-03-17 16:43:44

---
title: mbsync, SASL and Gmail
published: true
date: 2022-03-17 16:30:06 UTC
tags: mail,sasl,cli
canonical_url: https://www.solarwinter.net/sasl-error-on-gmail-login/
---

Slightly more esoteric than usual; I'm posting this for my benefit as much as anyone else's!

I was just trying to set up [mbsync](https://isync.sourceforge.io) to work with Gmail. I'd got most of the config copied from [another provider](https://fastmail.com/), but kept getting an error about an invalid parameter:

```
Error performing SASL authentication step: SASL(-7): invalid parameter supplied: Parameter Error in /System/Volumes/Data/SWE/macOS/BuildRoots/533514bb11/Library/Caches/com.apple.xbs/Sources/passwordserver_saslplugins/passwordserver_saslplugins-194/plain_clienttoken.c near line 195
```

I eventually figured out (from reading [Jakub Kadlčík's clear post](https://frostyx.cz/posts/synchronize-your-2fa-gmail-with-mbsync)) that you need to tell mbsync which authentication method it should use - for some reason it doesn't correctly autodetect. I added in the `AuthMechs` line:

```
AuthMechs LOGIN
```

Now it's able to log in fine.
Code Snippet: Name CSS Split Chunks using MiniCssExtractPlugin
Tags: javascript, webpack, react
Published: 2022-03-17 16:18:20

> React: 17.0.2
> Webpack: 5.67.0
> Webpack CLI: 4.9.1
> mini-css-extract-plugin 2.5.3

## Snippet

```
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  ...
  output: {
    optimization: {
      ...
      minimizer: [
        new MiniCssExtractPlugin({
          chunkFilename: (pathData) => {
            return `${pathData.chunk.id}.[contenthash].css`;
          },
        }),
      ],
    },
  },
  ...
};
```

## Objective

Bust the cache for CSS files that are emitted on build using Webpack 5 with [Split Chunks](https://webpack.js.org/plugins/split-chunks-plugin/).

## Set up

1. `import` one or more CSS files inside a React component.
1. A single CSS file for that chunk is emitted on build.
1. This file will be requested when the component is imported downstream.
1. When it is requested over HTTP the file is most likely cached and will need to be busted upon new releases.

## Solution

Configure MiniCssExtractPlugin, using the snippet above, by assigning a naming function to the chunkFilename attribute on the webpack config file.

The `[contenthash]` placeholder produces the md4-hash of the output file content (e.g. [contenthash].js -> 4ea6ff1de66c537eb9b2.js). [See more](https://webpack.js.org/concepts/under-the-hood/#output).
Diagnosis API tutorial
Published: 2022-03-17 16:16:34

What is Diagnosis API?
SmrtX provides an API (Application Programming Interface) for patient preliminary medical diagnosis that can help you implement an intelligent symptom checker and Lab Test analyzer for your healthcare medical application.
When you incorporate Diagnosis API within your healthcare web-application it will have the same functionalities like presented in DDxHub Diagnosis System. This is an alive example of implementation. By testing the DDxHub Diagnosis System you can see how global companies, as well as startups, have used it to enhance their business and support surrounding their patients and healthcare organizations.
Read more: http://smrtx.com/ApiDoc_index.html
When you transmit to our web service a basic patient health data (such as Blood test results and symptoms), our AI inference engine will analyze the data and provide you with a list of the most likely health conditions. We get this according to the complex statistical algorithms we use to make medical diagnosis.
Decorators in Python
Tags: python, advancepython, programming, beginners
Published: 2022-03-17 15:41:04

let’s understand what is decorators in python and how it work …

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4vavnwurcc4psime3vo.png)

- Decorators are evolved from the concept of closures.
- A decorator function is a higher order function that takes a function as an argument and returns the inner function.
- A decorator is capable of adding extra functionality to an existing function, without altering it.
- The decorator function is prefixed with @ symbol and written above the function definition.

Consider the below three examples:

I. First one shows the creation of closure function wish using the higher order function outer.
II. The second one shows the creation of decorator function outer, which is used to decorate function sayHello. This is achieved with a small change to Example1.
III. Third one displays decorating the sayHello function with decorator function, outer, using @ symbol.

Example 1:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gza5horumbr5g1lqpud.png)

- wish is the closure function obtained by calling an outer function with the argument sayHello.
- When wish function is called, inner function gets executed.

**Output**
Accessing : sayHello
Hello!

Example 2:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilpoqrr5elkhfc2uz3i2.png)

**Output**
Accessing : sayHello

- The function returned by outer is assigned to sayHello i.e the function name passed as argument to outer.
- This makes outer a decorator to sayHello.
In Python, decorating a function can also be achieved by writing decorator function name, prefixed with @ symbol, just above the function to be decorated.
- Hence,sayHello = outer(sayHello) expression is same as @outer.

Example 3:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp4mwv7ui3bybxkbuphr.png)

**Output**
Accessing : sayHello 

**Conclusion**
The intent of this article is to give you enough information about python decorators through examples.
🎬Claymorphism Login Form | HTML & CSS
Tags: webdev, tutorial, css, html
Published: 2022-03-17 16:06:19

**Create a Claymorphism Login Form using HTML  & CSS, step-by-step from scratch.**

***

{% youtube JwO54kIV1uI %}

***

###Source Code:

**HTML**

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Claymorphism Login Form</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>

<div class="container">

  <form action="#">
    <h3>Login In</h3>

    <div class="inputBox">
      <label for="user">Username:</label>
      <div class="box">
        <div class="icon">
          <i class="fa-solid fa-user"></i>
        </div>
        <input type="text" id="user" name="user">
      </div>
    </div>

    <div class="inputBox">
      <label for="password">Password:</label>
      <div class="box">
        <div class="icon">
          <i class="fa-solid fa-lock"></i>
        </div>
        <input type="password" id="password" name="password">
      </div>
    </div>

   <label> <input type="checkbox">Remember me</label>
    <button class="submit">Log in</button><br>
    <a href="#" class="forgot">Forget Password?</a>
  </form>
</div>

</body>
</html>
```
How to fetch images from an API
Tags: javascript, beginners, webdev, tutorial
Published: 2022-03-17 16:00:46

## Making a website that displays random cat images


> API's are really helpful in performing designed function built around sharing data and executing pre-defined processes

We can quickly fetch images from an API for our website . In our case we will be fetching cat images from a popular public API and will display it on a website

API I'll be using : [docs.catapi.com](https://docs.thecatapi.com)
Get your API Key from - [thecatapi.com](https://thecatapi.com)


Load `api.thecatapi.com/v1/images/search`
Get the first Array object of the JSON response
Load it’s .url


```javascript
function fetchPics(){
    let catsImgDiv = document.querySelector(".catsImgDiv")
    catsImgDiv.innerHTML='';
    fetch("https://api.thecatapi.com/v1/images/search") .then(
    (response)=>
     response.json()
    )
}
```

To use this in a website we add :

A button which fetches a new image when it's clicked
An empty div to show the image
in the .html file

```html
<button class="btn btn-primary my-4 generate_btn">Generate</button>
<div class="catsImgDiv"></div>
```

Final JavaScript iteration :

```javascript
function fetchPics(){
    let catsImgDiv = document.querySelector(".catsImgDiv")
    catsImgDiv.innerHTML='';
    fetch("https://api.thecatapi.com/v1/images/search") .then(
    (response)=>
     response.json()
    )
    .then ((data) => {
        let catsImgUrl=data[0].url;
        let catImgEl = document.createElement("img")
        catImgEl.setAttribute('src',`${catsImgUrl}`)
        catImgEl.classList.add("showcase")
        let catsImgDiv = document.querySelector(".catsImgDiv")
        catsImgDiv.appendChild(catImgEl);
    })
    .catch (err=>console.log(err))
}
```

You can also look up on how to setup a website with github pages here : [Github Pages](https://pages.github.com)

Website : [Live](https://satvik.ninja/cat-pics)
Github : [Github](https://github.com/satvikDesktop/cat-pics)