teleren/devto huggingface dataset:
Launching GitHub Confirm It!
Tags: showdev, javascript, github, product
Published: 2020-07-05 11:04:46

---
title: Launching GitHub Confirm It! 
published: true
description: Quickly add a repository name to confirm actions on GitHub with just a single click. 
tags: #showdev #javascript #github #product 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vzbeh8k5y7okwk5be4n1.png
---

## 🧞‍♂️ Idea

Whenever we have to perform any action in from the Danger Zone section of GitHub repository options, such as:

- Change Visibility
- Transfer Ownership
- Archive Repository
- Delete Repository

It asks to write `username/repository-name`. It's tedious to write it every time you perform any of these actions or want to quickly get done with it. That's why I created this extension, which lets you quickly type that thing for you and perform the action. Just a single click away.

## 🎯 GitHub Confirm It

GitHub Confirm It is a Chrome extension that allows you to quickly add a repository name to confirm actions on GitHub with just a single click. It helps you stay productive by saving your time and helping you focus on what matters. Secure and Open Source.

## 🔆 Getting Started

Below are the quick steps to get up and running with this extension.

### 👨‍💻 Installation

Download it from [Chrome Store](https://saqib.dev/gci-chrome). It will add a button inside your input box to quickly insert the text.

### 🎯 In Action

Go to the Settings of your repository, under the Danger Zone heading, click on any action. You'll notice the small insert text icon in your input. Click on it to insert the text. A quick GIF for you:

[![Insert text using GitHub Confirm It](https://dev-to-uploads.s3.amazonaws.com/i/2ft52ln4atplyvmiof3p.gif)](https://saqib.dev/gci)

## 📋 Permissions

Only requires `content_script` permission which only runs on the settings page of your repository.

## 🔥 ProducHunt

It's on ProductHunt as well. Go checkout! 


<a href="https://www.producthunt.com/posts/github-confirm-it?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-github-confirm-it" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=213028&theme=dark" alt="GitHub Confirm It! - Quickly add repository name to confirm actions on GitHub. | Product Hunt Embed" style="width: 250px; height: 54px;" width="250px" height="54px" /></a>


## 👋 Say Hi

Let's connect. Say Hi on Twitter [@saqibameen](https://twitter.com/saqibameen). Don't forget to Star 🌟the [repo](https://saqib.dev/gci) and spread the word!
SQL vs NoSQL: Explained with Examples
Tags: sql, mysql, tutorial, codenewbie
Published: 2020-07-05 10:54:15

{% youtube BomGJbql15w %}

In this video, I tried to make you understand SQL vs NoSQL. Here we discuss 3 key differences of SQL vs NoSQL.
1. Schemas
2. Relations
3. Scaling

Follow on:
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Credit card number check
Tags: javascript, algorithms, tutorial
Published: 2020-07-05 10:47:24

For people building an e-commerce website, a payment portal from scratch, here's some thing which you'll find useful! No plugins required!


This is the **luhn algorithm** or **luhn formula** that checks if the credit card number is valid or not. You'll find this built-in validator in almost all payment processing platforms, like _Stripe_, _Paypal_ to name a few.


### The Algorithm
1. Starting from the second last digit, moving left double the value of every second digit.
2. If the doubled result is greater than 9, subtract 9 from the doubled result
3. Find sum all the digits
4. Take the modulo 10 of the sum and if it equates to 0, then the number is valid according to the algorithm.

### An Example
Take 79927398713 as an example, walkthrough of the algorithm is as follows:
|7|9|9|2|7|3|9|8|7|1|3|
1. |7|**18**|9|**4**|7|**6**|9|**16**|7|**2**|3|
2. |7|**9**|9|4|7|6|9|**7**|7|2|3|
3. Sum of all digits = 70
4. 70%10 = 0 Therefore, valid number.


Here's a javascript implementation depicting use of map and reduce. You can try in your favourite language as well!
```js
function luhn(no){
    no = no.toString();
    arr = no.split('').map(x=>parseInt(x));
    arr.reverse();
    rArr = rArr.map(function(x,index){
    if(index%2!=0){
        if(x*2 >= 10) x = x*2 - 9;
        else x = x*2; 
        }
        return x;
    });
    sum = rArr.reduce((accu,curr)=>accu+curr);
    if(sum%10==0) return true;

    return false; 
}
```

If you wish to know more about this algorithm, you can read more about this [here](https://en.wikipedia.org/wiki/Luhn_algorithm).
How To Change SVG's Color in React.
Tags: react, svg, color, change
Published: 2020-07-05 10:21:23

---
title: How To Change SVG's Color in React.
published: true
description: Update SVG fill and stroke without the need of creating a react component for each image.
tags: react,SVG,color,change
//cover_image: https://direct_url_to_image.jpg
---

A few days ago I saw a question in [StackOverflow](https://stackoverflow.com/questions/54519654/how-do-i-add-color-to-my-svg-image-in-react/62532186) about how to change an SVG image's color. So I want to share a small tip to do it [without the need of creating a component for each image that you have](https://stackoverflow.com/questions/54519654/how-do-i-add-color-to-my-svg-image-in-react/62532186#62532186).

As the [official docs](https://create-react-app.dev/docs/adding-images-fonts-and-files/) say you can import an SVG icon as a react component just like this:
```react
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);
```
let's work with this SVG image as an example of our `logo.svg`
```html
<path fill="#FFFFFF" stroke="#000000" stroke-width="2" d="M32.508,5.037C31.959,4.582,28.962,1.96,28.4,1.5a3.257,3.257,0,0,0-2.05-.5H8.447a3.263,3.263,0,0,0-2.05.5c-.56.462-3.557,3.086-4.106,3.54a2.216,2.216,0,0,0-.863,2.119c.147.98,3.516,24.286,3.6,24.841a1.228,1.228,0,0,0,1.206,1H28.562a1.228,1.228,0,0,0,1.206-1c.087-.553,3.457-23.861,3.605-24.841A2.22,2.22,0,0,0,32.508,5.037ZM17.4,20.508c-6.043,0-7.336-8.171-7.6-9.854h3.418c.513,2.455,1.682,6.656,4.186,6.656s3.674-4.2,4.186-6.656H25C24.735,12.337,23.442,20.508,17.4,20.508ZM4.693,6.344,8.1,2.778H26.7l3.4,3.566Z" transform="translate(-0.397)" />
```
We want to change the `fill` and `stroke` properties directly from the `App ` component. **The tip** is to change the `fill`'s and `stroke`'s value to `current` so the color will be applied from the `App` component. just like this:
```html
<path fill="current" stroke="current" stroke-width="2" d="M32.508,5.037C31.959,4.582,28.962,1.96,28.4,1.5a3.257,3.257,0,0,0-2.05-.5H8.447a3.263,3.263,0,0,0-2.05.5c-.56.462-3.557,3.086-4.106,3.54a2.216,2.216,0,0,0-.863,2.119c.147.98,3.516,24.286,3.6,24.841a1.228,1.228,0,0,0,1.206,1H28.562a1.228,1.228,0,0,0,1.206-1c.087-.553,3.457-23.861,3.605-24.841A2.22,2.22,0,0,0,32.508,5.037ZM17.4,20.508c-6.043,0-7.336-8.171-7.6-9.854h3.418c.513,2.455,1.682,6.656,4.186,6.656s3.674-4.2,4.186-6.656H25C24.735,12.337,23.442,20.508,17.4,20.508ZM4.693,6.344,8.1,2.778H26.7l3.4,3.566Z" transform="translate(-0.397)" />
```
Then you can pass your colors from the `App` component like this:
```react
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill="red" stroke="green" />
  </div>
);
```
This is my first post here! I hope you find this small tip useful.
Image Slider Toggle Button with HTML CSS & JavaScript
Tags: html, css, javascript, imageslider
Published: 2020-07-05 10:19:32

Image sliders typically show one big image at a time with a little snippet of texts, each linked to a page. The images get automatically or manually forward, allowing you to click on whichever image that piqued your interest to go to a linked page to read more.

Today in this blog, I'll share with you this program (Image Slider Toggle Button). These sliders are based in JavaScript that means to slide these images forward and backward on button click is only possible with JavaScript. Those bottom five buttons are used to slide images forward and backward one by one. And that left side and right side toggle buttons are used to show the previous and next image.

You can download the source code files through the given link. In the source files, there you also get the background images of this program. <a href="https://www.codingnepalweb.com/2020/05/image-slider-toggle-button-with-javascript.html">Click here to download source code files.</a>
Building a Code Editor for the Web - Introduction
Tags: webdev, html, css, javascript
Published: 2020-07-05 10:19:15

In this video series, we're going to look at how to create our own simple code editor for the web or in the browser. 

You'll see the process and tools we can use to make something like this as we replicate the code editor on the MDN Web Documentation as the goal.

If you'd like to see more of my videos, [head over to Youtube!](https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg) A follow/sub comes a long way to show support

Expect more content for this project so stay tuned! 🔥🔥

Follow and connect with me on:
----------------------------------
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive
Email Validation Check in HTML CSS & JavaScript
Tags: javascript, emailvalidation, html, css
Published: 2020-07-05 10:17:37

Email Validation is a procedure that verifies if an email address is deliverable and valid. So now it's time to create Fully Validated Email Field in JavaScript.

Today in this blog, I'll share with you this program (Email Validation Check). At first, on the webpage, there are two containers. On the first container, I have entered an invalid email address so there is shown a tooltip with a warning message and with the red border. And, in the second container, I have entered a valid email address so there is shown the submit button and with the green border. As you know, red color indicates an error and green color indicates success.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/05/email-validation-check-in-html-css-javascript.html">Click here to download source code files.</a>
Heart Shape Preloader in HTML & CSS
Tags: preloader, loader, html, css
Published: 2020-07-05 10:14:58

A preloader (also known as the loader) is an animation indicating the progress of a page-load in the background. Preloaders convince users that the website is running on loading the page. This can help enhance user experience and reduce the overall bounce rate.

Today in this blog, I'll share you an Animated Heart Shape Preloader. This loader rotates 720deg infinitely. While this loader is active you can see there are two shapes of the loader, one shape is a round shape and another one is a heart shape. This loader changes or animates a round shape to heart shape smoothly while it's rotating.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/06/heart-shape-preloader-in-html-css.html">Click here to download source code files.</a>
CSS3 - 3D Layered Hover Effect on Social Media Buttons
Tags: css, csseffect, cssanimatio, socialmediabutton
Published: 2020-07-05 10:13:52

These social media links and buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A social media share link is a URL that when clicked populates a fixed message and image that can be shared on social media.

Today in this blog I'll share with you this program about Social Media Buttons with 3D Layered Hover Effects. At first, on the webpage, these buttons are in the initial stage where there is no 3D Layered effect and icon names are also hidden at first. But when you hover on the particular social icon then that icon rotates and visible the layers of icons that visualize 3D Effect as well as texts, are also visible with sliding down.

You can also download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/06/css3-3d-layered-hover-effect-on-social-media-button.html">Click here to download source code files.</a>
A mediocre application store using Flask and Electron.
Tags: python, flask, node
Published: 2020-07-05 10:13:31

Hey everyone!
I'm new around here and thought I would share my latest project (I would most certainly call it anything but a full on "project", its more of a composition of technologies I have been studying in preparation of the upcoming school year).

IXGraphite is a simple GUI wrapper for apt based on Flask and Electron.js, with possibly the worst implementation possible. 

Any reviews or help is much appreciated! 

https://github.com/HUSKI3/IXGraphine
3D Flip Card on Hover using HTML & CSS
Tags: css, html, card, cssanimation
Published: 2020-07-05 10:12:35

What is a card, accurately? Well, they come in all sorts of shapes and sizes, but common cards will include information such as a title, a user name, a picture, and several icons. Sometimes there might be a brief volume of text, for example, a product summary.

Today in this blog I'll share with you this program (3D Flip Card on Hover using HTML & CSS). At first, this card in the initial stage where there is no 3D animation or effect but when you hover on this card it rotates 180deg with 3D visualization. In this card, there are two faces (front and back face). At first, there are shown a front face but when you hover on it then it rotates with 3D visualization and shown back face.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/06/3d-flip-card-on-hover-using-html-css.html">Click here to download source code files.</a>
Running an Unity WebGL game within Docker
Tags: docker, webgl, unity3d, game
Published: 2020-07-05 10:10:38

So whilst learning on how to make Unity games, I got curious of what would be a good way to test, share and get feedback on.

There are various websites that will host the games for you but I like the idea of making a game that’s Open for people to contribute to, learn from and ultimately play.

So this is where I went down the path of looking into using Docker to host a WebGL game. After searching the web I came across a few others that looked to do something similar.

So to start, I've built and exported the Unity game and kept a simple file structure.

```
.
├── Dockerfile
├── docker-compose.yaml
├── webgl
└── webgl.conf
```

This allowed me to easily copy necessary files with a single `COPY` within the Dockerfile.

To host game within Docker and keeping things simple, I've used Nginx as the base image as the HTML files only needed served. 

But the default configuration needed to be updated to point to the copied files. This resulted in the following for the Nginx configuration, just using the `index.html` created by Unity and update the location root to where the files were copied to.

{% gist https://gist.github.com/tomowatt/e287ed5bf1047fbaffb8f5c588eaef66 file=webgl.conf %}

Next part is the Dockerfile itself, putting all the pieces together to host the WebGL game.

{% gist https://gist.github.com/tomowatt/e287ed5bf1047fbaffb8f5c588eaef66 file=Dockerfile %}

Finally, using Docker Compose, I can finally launch the Docker image and play the game within a browser with a single `docker-compose -d up`

{% gist https://gist.github.com/tomowatt/e287ed5bf1047fbaffb8f5c588eaef66 file=docker-compose.yaml %}

All the code can be found here: {% github tomowatt/unity-docker-example %}

Hope this helps anyone who is curious about doing a similar thing and I'll hope to improve this as I learn more about Unity, WebGL and Docker.

---
2022 Update: Add linked code examples via gists and embedded repository, updated Dockerfile code
Animated Profile Card UI Design with Hover Animation in HTML CSS & JavaScript
Tags: html, css, profilecard, card
Published: 2020-07-05 10:03:59

What is a card, exactly? Well, they come in all sorts of shapes and sizes, but common cards will include information or content such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example, product or client description.

Today in this video, I'll share with you this program (Profile Card UI Design with Hover Animation). At first, on the webpage, there is only an image with a round border-color. But when you hover on that card, then the height and width of the card smoothly expand and show the contents of the card. I have also added transition-delay on social media buttons so the buttons will appear one by one.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/06/animated-profile-card-ui-design.html">Click here to download source code files.</a>

####You might like this:
<a href="https://www.codingnepalweb.com/2020/10/responsive-testimonials-section.html" target="_blank">Responsive Testimonials Section</a>
<a href="https://www.codingnepalweb.com/2020/08/responsive-owl-carousel-slider-using-jquery.html" target="_blank">Responsive Owl-carousel Slider</a>
<a href="https://www.codingnepalweb.com/2020/07/animated-slider-blog-card-using-html-css.html" target="_blank">Animated Blog UI Card with Slider</a>
<a href="https://www.codingnepalweb.com/2020/08/3d-flip-card-on-hover-using-only-html-css.html" target="_blank">Pure CSS Card with 3D Flip on Hover</a>
Which Programming language to Learn?
Tags: programmingintroduction, opinion, thoughts, programming
Published: 2020-07-05 10:01:25

I have recently come across many programming question in the various discussion sites ( Facebook groups, Reddits, etc...) in which people ask questions such as these ones:

- should I learn Python or C++;
- should I learn Java or Python?
- should I learn C++ or Rust?

While these questions seem to be beneficial, they actually miss one key aspect that is the most important one and individualistically determined: the **field of interest**.

## So what is the field of Interest?

The field of interest is simply the area that a programmer/ developer wants to focus. Examples include AI (Artificial Intelligence), Data Science, Web development, Software Engineering, Cybersecurity, etc...
This is the most relevant aspect because depending on the area, certain languages are best suited, while others are not. Someone in AI may be of interest studying R for statistical analysis, but for cybersecurity R may not be necessary.

So, now that I have explained briefly this, let me answer how a first programming language should be treated.

## So what should I learn in a first programming language?
It is best for begineers that the first language is taken generally by focusing on programming principles. In other words:

- data types, class building
- conditions/ loops/ logic
- arrays
- storing information on some files, variables
- developing a gui with Object-oriented principles
- language difficulties
- **how to transfer all previous information into a new language
(language design)**

## So, how to transfer a language learned information into a new one?

First, to tranfer the knowledge it is important to read the docs and check what is similar to the first language, then for the main differences it may be a good option to do some hands-on programming related and understand the key differences between the first and the second language codes.

Second, do projects in both languages. Try to answer the following:

- How is the design of a language project related to the other language? 
- What hierarchy of code does the language support? 
- How GUIs differ between the languages?

## Learn to write the minimum code possible

While this is not a requirement, sometimes a language gives users shortcuts on how to implement a particular code, how to minimize the program lines and how to make sure that the code works still properly.

Challenge yourself and try to minimize the lines of code.

Consider other factors (this is only a starting point questions) : 
- if you need to use form information will the code still validate correctly or are there bugs? If yes, are they critical? If no, are there side effects due to the new code, for example if a class has been changed how does this impact the other classes and main code?

##### NOTE TO CONSIDER
This is only an opinion, a thought-oriented discussion on such questions. If you feel, I missed key aspects or key ideas on a first language to learn, please write it in the comments, and I will edit it in the blog post.
Password Strength Meter using HTML CSS & JavaScript
Tags: javascript, passwordstrengthmeter, html, css
Published: 2020-07-05 10:01:12

A password strength meter shows how repellent a given password might be to password cracking attempts like brute force and dictionary attacks. Meters have rules they use to select points for password hardening measures such as including a full combination of symbols, numbers, uppercase, and lowercase letters.

In this program (Password Strength Meter or Indicator), at first, on the webpage, there is a white container with a title and a password input field. And when you enter some characters on this password field then the indicator or meter and an information text are shown on the bottom of an input field. There are three meters or indicators with different colors which indicates different info. There is also shown a password show or hide button.

You can also download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/07/password-strength-meter-using-html-css.html">Click here to download source code files.</a>

####You might like this:
<a href="https://www.codingnepalweb.com/2020/05/email-validation-check-in-html-css-javascript.html" target="_blank">Email Validation Check</a>
<a href="https://www.codingnepalweb.com/2020/06/random-password-generator-javascript.html" target="_blank">Random Password Generator</a>
<a href="https://www.codingnepalweb.com/2020/07/confirm-password-check-in-html-css.html" target="_blank">Confirm Password Checker</a>
<a href="https://www.codingnepalweb.com/2020/08/password-show-or-hide-toggle-using-javascript.html" target="_blank">Password Show Hide Toggle Button</a>
Button Ripple Effect in HTML CSS & JavaScript
Tags: button, rippleeffect, htmlbutton, cssbutton
Published: 2020-07-05 09:59:31

Ripple effect provides an immediate visual confirmation at the point of contact when the users interact with UI elements. And a button is any graphic or text box that lets your visitors interact with your website. The interaction is commonly an action that you want your visitors to take.

In this program (Button Ripple Effect), at first, on the webpage, there are two gradient buttons with different background-color. Generally, gradient means a mix of two or more colors. And when you click on the particular button there is shown a ripple effect and it expands smoothly as you can see in the image. This ripple effect is dynamic that means this ripple starts expanding from the point where you clicked.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/07/button-ripple-effect-in-html-css.html">Click here to download source code files.</a>