teleren/devto huggingface dataset:
Google Profile Card : Add me to Search
Tags: newfeature, google, googleprofilecard, india
Published: 2020-08-12 16:08:12

# Google Profile Cards :star: :

> _"A new way to showcase yourself in the online world by a normal Google Search."_ 

Recently google lanuched its new feature of **"peoples card"** which let users like us to create a virtual profile card where users can highlight their existing websites or social media profiles to public their identity on the web. 

This will pop-up as a search result when you will do a normal Google Mobile Search of your name. 

___


## Important Things :bulb: :

- This is only a **testing feature** for now which is currently only available in **India**. 
- The new people cards feature is only for **mobile users**. This means that you need to log in to your Google Account on your mobile device to create your public profile. 
- Each individual with a specific Google account can only create a **single people's card** and has to have **authenticated** their account with a phone number before they can create the card.

# Make your own People's-Card :open_hands: :  

Its very simple to set up your own profile card. Just follow the below 4 steps to get started - 

1. On your mobile device sign into your Google Account and search for **“add me to search”** on your Google App. 
![add me to search](https://lh5.googleusercontent.com/ThPnIawBVMRfS_Z9HzmRlgAkBgLkG7VYZrG_FyV7W9tRhX9BldUOL1mQAvMLgxMw2aoaNB_ZwL-TAA=w1366-h657-rw "add me to search")
2. You will see something like above :point_up:
Then click on the **"Get Started"**. 
3. After this Google will offer you a form to fill your details. The only mandatory fields for now are name, occupation, location, and an _**“about”**_ bio. Apart from this you can also add your education, work, other social media handles and even your email and phone number.
![Enter details](https://lh5.googleusercontent.com/2cgqp5qxiK6PxUFaX-et7s0GaMOgGwdUPuyPHgaNvEyXvUo8vZRLNMcCzxSs_vpRd83L8cV0gBSsLQ=w1366-h657-rw "Enter details")
4. Lastly just click on **preview** and then **save**.
So there you go - your very own Goole Profile Card is ready. 
![My card](https://dev-to-uploads.s3.amazonaws.com/i/zmhvrc82c7pjicf5wgxd.png)

___ 

## Things to remember :exclamation: : 

- This is a testing feature so the system isn't very efficient but still works right now. You might not be able to see your card instantly appear on search results but it will come eventually. 

- Further there is also a _**big**_ potential of online abuse and spam here because you are giving your personal details to appear on a search result. So beware of what information you are filling in the details form.
#30DaysOfCJS: Conversational Semantics for the Web
Tags: community, web, html, a11y
Published: 2020-08-12 15:53:08

---
title: #30DaysOfCJS: Conversational Semantics for the Web
published: true
description: #30DaysOfCJS Day 11, Conversational Semantics for the Web
tags: community, web, html, a11y
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qedxojvh8e8hlx416y0f.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 11 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Conversational Semantics for the Web // Aaron Gustafson // CascadiaJS 2018**

If you'd like to watch the talk, here is the Youtube link.
{% youtube gZiysmuwwMA%}

Further readings:
- [Why, How, and When to Use Semantic HTML and ARIA](https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/)
- [Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/semantics)
Must-know programming quotes
Tags: discuss, motivation, programming
Published: 2020-08-12 15:51:16

#####here is list of quotes by famous pioneers in field of computer programming 🔥
> ***Premature optimization is the root of all evil*** 😈
*Donald Knuth* 
___ 
> ***Talk is cheap, show me the code***😶
*Linus Torvalds*
___
> ***Code never lies, comments sometimes do.*** 🙉
*Ron Jaffries*
___
> ***Code is like humor when you have to explain it, it's bad***
*Cory House*
___
> ***Truth can only be found in one place : The Code***
*Robert C. Martin*
___
> ***First solve the problem then write the code***
*John Johnson*
___
> ***Think twice, code once***
*Waseem Latif*
___
Add your favourite quote ⬇⬇
insertAdjacentHTML vs innerHTML
Tags: javascript, tutorial, html
Published: 2020-08-12 15:50:45

I was building a module the other day that could be imported and used from anywhere on the site. While building the module, I ran into the issue of needing to add HTML without altering the existing HTML and corrupting the DOM. That's when I found out about insertAdjacentHTML.

Here's a quick breakdown on how insertAdjacentHTML and innerHTML works.

###`innerHTML`
Using innerHTML is the quickest way to modify HTML. You can use it to replace the contents of an element. 

Here's the syntax:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dnihdkfzcx6thwucakzo.png)

Let's break down `element.innerHTML += "content";`
The browser does the following:
1. Gets the value of `innerHTML` by serializing `element`'s descendents.
2. Appends `"content"` to the string.
3. Removes the children of `element`.
4. Parses the new string that contains the serialization of the old descendants, along with the new markup.

Using `innerHTML` means that any JavaScript references to the descendants of `element` will be removed.

When you use `insertAdjacentHTML`, adding additional content will not corrupt the existing JS references and the existing nodes are not altered.

###`insertAdjacentHTML`
`insertAdjacentHTML` is a method that takes two string arguments. The first being the insertion point relative to the node that `insertAdjacentHTML` is invoked on: `beforebegin`, `afterbegin`, `beforeend`, or `afterend`. The second argument is a string containing the HTML markup you want to add.

Here is a visualization of the position names:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r9vjnn663g75mn0c4n4q.png)

The `insertAdjacentHTML` method does not reparse the element it is invoked on, so it does not corrupt the element. Since `insertAdjacentHTML` does not continuously serialize and reparse elements, it is much faster than `innerHTML`, where appending gets slower each time there is more content.
Best Python Programming Course [Free]
Published: 2020-08-12 15:47:39

If you are learning Python programming and tired of wandering and struggling to find the best resources to learn to code. I have selected a few free online courses to learn python. Here it goes:

- [Corey Schafer Python series](https://www.youtube.com/playlist?list=PL-osiE80TeTskrapNbzXhwoFUiLCjGgY7)
- [30 Days of Python by Coding-entrepreneur] (https://www.youtube.com/playlist?list=PLEsfXFp6DpzQjDBvhNy5YbaBx9j-ZsUe6)
- [Python Course by Mosh](https://www.youtube.com/watch?v=_uQrJ0TkZlc) (Best for absolute beginners)
- [Python Series by Codebasics](https://www.youtube.com/playlist?list=PLeo1K3hjS3usILfyvQlvUBokXkHPSve6S)
- [Python by Programming-Knowledge](https://www.youtube.com/watch?v=bZ6NL59FMoc&list=PLS1QulWo1RIYEMepIBinxplXsx9v0zCSf&index=2&t=0s)
- [MIT Introduction to Computer Science and Programming Using Python](https://www.edx.org/course/introduction-to-computer-science-and-programming-7)
- [The complete Python course by Tech with Tim](https://www.youtube.com/watch?v=sxTmJE4k0ho)
- [Python for research, edx] (https://www.edx.org/course/using-python-for-research)
- [Learn Python](https://www.learnpython.org/)
- [30 Days of Python by teclado](https://www.youtube.com/playlist?list=PLrC-HcVNfULbAlA-YrfwAyN9D7n5gdtvp)



Hope you find it useful. Happy Coding!
#Python #coding #100DaysOfCode
Build Laravel 6 SPA + GraphQL API
Tags: laravel, graphql, vue
Published: 2020-08-12 15:45:32

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0bzhb4vibuinj5jld62g.gif)

## Installation and configuration

``` bash
composer require nuwave/lighthouse laravel/passport joselfonseca/lighthouse-graphql-passport-auth

```
I dealt with impostor syndrome, so I've published my first package.
Tags: laravel, career, productivity, impostorsyndrome
Published: 2020-08-12 15:43:34

Yes, after 5 years of coding, working in many project as a backend dev, devops and few more time as a frontend. I finally face the impostor syndrome that affect me and I published my first **public** package: [hypnodev/larapal](https://github.com/hypnodev/larapal).

In this five years I made hundred of repository in my github and gitlab account, built some libraries, snippet and project, pushed code but after some days I was going back to delete repo because thought that all of this was not up to par with all the rest of the online projects.

But today, was the great day for me, I've pick one of my libraries, I gave a fix to it, commented out all the needed, then I make a new public repository on GitHub, I want to packagist and linked repo. 


> The magic was done.


In less than 5 minutes everything was online, published, accessible from all over the world. My library was accessible world-wide, this gave me a little bit of anxiety. But after some minutes that I realized that, it was ok.

For some time I was already working on this problem, I started contributing to a small Laravel project, I started working totally remotely on different projects as a freelance, collaborating with different international teams and with totally different skills from mine.

So this is my suggest for all people are thinking that their work isn't ready for make it public or that the problem they had was just something that happened to them. 
Indeed, if you think your work is not ready for the public, it is paradoxically better, since publishing it will help you ask for help, so the first issues will arrive and you can finish your work.

> Tackle the impostor syndrome with a roadmap. Step by step.

In the end, yep, I've published my package for Laravel that help you to easy integrate PayPal subscription and checkout with just two methods `chargeWithPaypal` and `subscribeWithPaypal`.

Take a look and all kind of issues are welcome, of course!

{% github hypnodev/larapal %}
RESTful API
Tags: rest, restful, api
Published: 2020-08-12 15:35:57

It is not hard to find the definitions of REST, API, CRUD, and HTTP methods separately. However, knowing these definitions does not give you the answer to what RESTful API is.

I did some research, and the simplest definition I can find is as follows:

"A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data." - [Margaret Rouse](https://searchapparchitecture.techtarget.com/definition/RESTful-API)

I think the reason why it is hard to come up with a precise and concise explanation for RESTful API is that it is difficult to explain REST in a few sentences, and therefore it is even more difficult to explain RESTful API in a few sentences.

RESTful API sounds simple but the architecture contains more components than it sounds!
docker learning
Tags: docker, tips, dockerization
Published: 2020-08-12 15:23:08

---
title: docker learning
published: true
description: 
tags: docker, tips, dockerization
//cover_image: https://direct_url_to_image.jpg
---
Recently I started working on a project which includes both NodeJS and Python application. We planned to Deodorization build process for our project. During Deodorization I faced multiple issues which I eventually solved. I thought of writing a post on my docker experience to help others. Below are the some of my observations/issues I found during my journey
1. Using multiple FROM in docker file
2. Speed up docker docker builder by NOT copy all files at the same time
3. Using RUN stead of CMD
4. Use docker exec to run commands on docker container
5. Showing docker containers (running docker images)
6. Connect to the docker container
`docker exec -it CONTAINERID /bin/bash`
7. How to access host application from docker container
8. Expose Port numbers

Refer [chanduthedev](http://www.chanduthedev.com/2020/08/my-docker-learnings.html) for more details.

Happy Learning!!!
Bubble Sort Implementation in Python
Tags: python, algorithms, computerscience, codenewbie
Published: 2020-08-12 15:15:19

Bubble sort is one of the simplest algorithms to start learning Data structures and algorithms. It's a comparison-based algorithm in which adjacent elements are compared and swapped in order. This algorithm is suitable for small dataset. 

It's not a very widely used sorting algorithm but is more often used as a teaching tool to introduce the concept of sorting.

***Time Complexity: O(n2)***

![Bubble Sort Implementation in Python](https://dev-to-uploads.s3.amazonaws.com/i/lypi0m5ahb27tk3qhwbc.jpg)

### How does Bubble Sort work?

- compare the first and the second element. If the first element is greater than the second element, they are swapped.

- Now, Compare second and third elements. Swap them to get them in order.

- Repeat the process until the last element.

- In each iteration, the comparison takes place up to the last unsorted element.

- The array is sorted when all the unsorted elements are placed at their correct positions.

<div class="container text-center my-3">
<img src="https://media.giphy.com/media/G4Fbv0dS9RvJS/giphy.gif" class="img-fluid border border-white text-center" alt="gif image for math problems">
</div>

### Bubble Sort Implementation in Python

```python
class BubbleSort:
    """ BubbleSort Algorithm Implementation in Python 3.0+

        arr: Unordered list
        output: Return list in ascending order.
        time complexity: O(n2)
        
        Example : 
        >>> sort = BubbleSort()
        >>> sort([4,2,6,5,9,8])
        [2, 4, 5, 6, 8, 9]"""

    def __init__(self):
        print("Bubble Sort Algorithm is Initialized")

    def __call__(self, arr):
        n = len(arr)
        for i in range(n):
            already_sorted = True
            for j in range(n - i - 1):
                if arr[j] > arr[j + 1]:
                    arr[j], arr[j + 1] = arr[j + 1], arr[j]
                    already_sorted = False
            if already_sorted:
                break
        return arr

sort = BubbleSort()
print(sort([10,9, 5, 11, 2]))
```
Nodejs Online Training
Published: 2020-08-12 14:47:55

NodeJS is a very powerful platform built on Chrome’s JavaScript. It is an open-source and supports the different platforms. It helps in developing Web Server Application. It is an event-driven server-side. This runs using the V8 engine developed by Google. It helps in building an HTTP server. This interacts with the database also. It is used for easily building, fast and scalable network applications. Nareshit Node JS online training will help you develop the skills required to build JavaScript applications using Node.js.

Signup and attend NodeJS Online Training classes by experts It will allow you to gain knowledge of the fundamental concepts of Node.js and offers a hands-on experience of creating HTTP servers, buffers, flows, events, multiprocessing, etc. We have real-time experts who will teach with a full explanation of each topic of Node JS online training.

What are the Course Objectives?
•	Design NodeJS framework.
•	Learn asynchronous programming.
•	Build HTTP server with node.js using HTTP APIs.
•	Understand file system in Node.Js
•	Learn how to express node.js contacts with Mongo DB.
•	Build Chat application.
•	Understand developing the Web application

Special offer on Nodejs online training new batches started
Limited seats available hurry up!!
Website - https://nareshit.com/nodejs-online-training/
Register Here -> https://goo.gl/HIB0wL
Call: +91-8179191999 | Online@nareshit.com
Welcome Thread - v86
Tags: welcome
Published: 2020-08-12 14:45:43

---
title: Welcome Thread - v86
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![daft punk drummin](https://media.giphy.com/media/JZiwKQEGz7G6I/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
TypeScript with ESLint no-explicit-any
Tags: typescript, webdev, node, deno
Published: 2020-08-12 14:43:17

> This rule doesn't allow `any` types to be defined. It aims to keep TypeScript maximally useful. TypeScript has a compiler flag for `--noImplicitAny` that will prevent an `any` type from being implied by the compiler, but doesn't prevent `any` from being explicitly used.

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-explicit-any.md

The solution to this is not one, but two.

## VSCode + ESLint should be able to check `no-explicit-any` on editing

That is, if you use Node.js. [There is also one for Deno](https://github.com/denoland/deno_lint).

## If you have to cast to `any`, consider `unknown` first; otherwise, use a validation library

I prefer [zod](https://github.com/vriad/zod).

{% github https://github.com/vriad/zod no-readme %}

```ts
import * as z from 'zod'

// @ts-ignore
const apiKey = z.string().parse(payload.apiKey)
```

## TypeScript has no runtime check, and type system (in IDE only) is not always fine-grained enough

- Always consider a validation library, or defensive programming
- [Hegel, or Babel with Flow + tcomb, might even work better than TypeScript.](https://dev.to/patarapolw/comment/12l81) (Also, without having to use `*.ts` extension.)

{% post https://dev.to/bytebodger/better-typescript-with-javascript-4ke5 %}
Terraform + GCP + MicroK8s
Tags: terraform, gcp, microk8s
Published: 2020-08-12 14:23:43

MicroK8s allows you to specify the amount of join and the token that will be used, then it opens up the opportunity for some interesting things, just imagine easily provisioning in Terraform an infrastructure with a simple multi-node cluster?

I showed in a previous post on #Linkedin the configuration "#MicroK8s+#K9S+#Octant": https://www.linkedin.com/posts/andersongama_microk8sk9soctant-sudo-apt-y-install-activity-6697607973889425408-9Gm-

Based on that thought up there you would define the "cloud-init"/"user_data" of "control-ship" that during provisioning will have the IP "10.158.0.2" that it should have the following token "868f88ee477f893de65c99d906e767dcaf59ce10fe30795ef9b2d11af4faefa" that was generated with a:

```bash
$ date | sha256sum | cut -f 1 -d -
```


Just out of curiosity if you were going to do it manually it would be:

```bash
$ sudo microk8s add-node --token-ttl 999 --token `date | sha256sum | cut -f 1 -d -`
```


For the "cargo-ship" nodes to be created only after the "control-ship" in the provisioning of instances, just put "depends_on = [aws_instance.control_instance]" if it is AWS and "depends_on = [google_compute_instance.control_instance]" if it is GCP.

For the control-ship:

```yaml
#cloud-config
#control-ship
runcmd:
 - sudo echo "DEBIAN_FRONTEND=noninteractive" >> /etc/environment
 - sudo source /etc/environment && source /etc/environment
 - sudo apt update --fix-missing
 - sudo apt -y snap snapd
 - sudo snap refresh
 - sudo snap install microk8s --classic
 - sudo microk8s status --wait-ready
 - sudo microk8s add-node --token-ttl 999 --token 868f88ee477f893de65c99d906e767dcaf59ce10fe30795ef9b2d11af4faefa
```


For cargo-ship:

```yaml
#cloud-config
#cargo-ship
runcmd:
 - sudo echo "DEBIAN_FRONTEND=noninteractive" >> /etc/environment
 - sudo source /etc/environment && source /etc/environment
 - sudo apt update --fix-missing
 - sudo apt -y snap snapd
 - sudo snap refresh
 - sudo snap install microk8s --classic
 - sudo microk8s status --wait-ready
 - sudo microk8s join 10.158.0.2:25000/868f88ee477f893de65c99d906e767dcaf59ce10fe30795ef9b2d11af4faefa
```


Note: If you found it interesting, you can take the template for #GCP "https://github.com/smashse/iac-public/tree/master/IAC/GCP/template_terraform_gcp_microk8s" and execute it inside the folder:

```bash
$ sed -i "s/template/desiredname/g" *.*
```

Instructions for setting up your environment with GCP on Linux: https://github.com/smashse/iac-public/tree/master/IAC/GCP
What are some examples of open-source projects with great READMEs?
Tags: discuss, webdev, opensource, codenewbie
Published: 2020-08-12 14:21:40

Hey DEV Community👋🏽 

**What are some examples of open-source projects that have great READMEs?** Specifically, projects that:

- Describe what the project is
- Provide installation instructions and other documentation
- Include instructions for contributing to the project 

(Other criteria are outlined in this blog post, ["How to Write a Great README"](https://dbader.org/blog/write-a-great-readme-for-your-github-project))

**In addition to providing examples, what do you think makes these READMEs effective?** Share your thoughts in the comments!
Where do you cross-post?
Tags: discuss
Published: 2020-08-12 14:17:16

---
title: Where do you cross-post?
published: true
description: Do you cross-post anywhere other than DEV?
tags: discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jv4knpd2ejwloxv54uuw.png
---

## Do you cross-post/share anywhere other than DEV?

* Personal Site?
* Hashnode
* Medium
* LinkedIn Article (not post)

Share your experience, and whether cross-posting to anywhere else has helped build your community and drive meaningful engagement.

## My current Process

I currently post all articles to my personal site [waylonwalker.com](https://waylonwalker.com), and they show up in my DEV dashboard as a draft. I fix the missing cover image, and language from code blocks and post when ready.

Some posts stop here.

## Flagship posts get shared heavily

* Twitter
* DEV
* LinkedIn
* Newsletter

For flagship posts, I make sure that I share it to Twitter and LinkedIn.  

My Twitter account is small beans so it drives very little engagement, that's hardly worth the effort.  The same core friends that I have on Twitter also are connected on LinkedIn anyways.

For LinkedIn, I make sure that I summarize the article in 800-1300 characters, as I anticipate most people just read the summary on LinkedIn and move on without clicking the article.

I also attempt to keep up a monthly newsletter where I share all of my articles.

## Discuss

Share with us if you have found benefit from cross-posting or sharing your articles somewhere else.
What is the difference between state, province and city?
Tags: discuss, help
Published: 2020-08-12 14:12:49

I try to understand difference between province, state and city(town). Also Is city and town same mean ? And How can I associate with them according to countries all the world?
Ex: Country: US, State: Alabama, City: Troy
Country: Turkey, Province, City or State: Ankara. Which is correct for Ankara?