teleren/devto huggingface dataset:
Amazing Button Animation Using HTML & JS
Tags: html, webdev, css, javascript
Published: 2021-06-22 14:56:54

Hello Guys,

Today I created an Amazing Button Animation Using HTML & JS. In this button animation, I am using only HTML CSS and Js for animation.

#####Card Fill Hover Effect :
{% post https://dev.to/nikhil27b/amazing-card-fill-hover-using-html-css-20i %}

This is a simple HTML I am using for buttons. For animation effect I am using `span` tag for design button and with using JavaScript and button click only use of setTimeout function this function is only for add innerHTML `<div class="loading-1">Sending</div>` to animate the button.

I hope to find this useful in a post like and save this post also comments about your thoughts and new ideas for a post. For more content follow me on Instagram [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/rNygqEj %}

{% instagram CQTooauBwo2 %}
Get Descriptions on Bash, HTML, & CSS snippets in your browser
Published: 2021-06-22 14:54:54

*Online resources play an enormous role in solving problems related to our code. Studies clock developers as using up to 20% of development time looking at or for code examples (think: documentation, forum based bug-fixes, task centric blogs, etc)[[1](https://dl.acm.org/doi/10.1145/1518701.1518944),[2](https://dl.acm.org/doi/10.1145/2581377),[3](https://link.springer.com/article/10.1007/s10664-015-9421-5)].*

Myself and 3 others built a browser extension for bringing IDE/Editor features to your browser. We supplement snippets on the web as you browse so you can consume the code more easily and get back to writing your own code, faster.

Previously only Bash, we've just finished the work to detect then supplement CSS, HTML, and JavaScript code snippets! Now you can see consistent syntax highlighting across all Bash, CSS, HTML, and JS snippets and get descriptions on mouse over for:
- Bash: Commands, Sub-commands, Options
- HTML: Element, (Attributes will be in later this week)
- CSS: Properties

Interact with the snippets on our [website](https://kmdr.sh/) to get a feel for how snippets appear with the Kmdr browser extension installed. If you'd like to kick the tires, [give Kmdr a whirl (for free) here](https://chrome.google.com/webstore/detail/kmdr/lbigelojleemicaaaogihjnabfndkdii) then please let me know what you think!

--------
Kmdr in action: Checkout the GIFs below (they are monsters so may take a while to load).

**Bash:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sewkpbgi92rbngsfas5f.gif)

**CSS:** 
![CSSglow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bygim72p7n76pq9mkik2.gif)

**HTML:**
![HTMLexample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grqaosagcovycrpze9z0.gif)
Onboarding a new developer.
Tags: teamwork, productivity, process, career
Published: 2021-06-22 14:47:48



---
title: Onboarding a new developer.
published: true
description: 
tags: teamwork, productivity, process, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti4pq6789fmf5wmt0rjq.jpg
---

## A good on-boarding can 

- help feel the developer welcomed in the team
- provide the developer an overview about how the teams work, best practices, team culture etc...
- help him find his way around his first project. 
  _It's hard to imagine someone new, will be able to figure out everything on his own._
- give faces to names.
  _A face to face engagement is good opportunity for the team to meet the new guy and vice-versa._

## What is it about?

- Culture communication and etiquette
- Coding standards
- Internal system and processes
- People and contacts

## How to do it?
- Mentoring
- Documentation
- Meetings, lunch
- Pair Programming


## Onboarding Checklist
Here is what this checklist may look like.

### Before Start day 
- Setup Access. SCM, CI/CD, Slack, JIRA etc ...

### First day
- Intro Team

### First week
- Up to speed into ongoing projects.
- Knowledge sharing.
- Team lunch

### First month
- ... and so on

_The above is a template to exemplify the idea, You should make your own itinerary that works best for your organisation/team_

Although it might take time and effort from the team to prepare this, it is a superb investment in your next star "employee of the month". First impressions matter.

Further reading:
- [Atlassian employee onboarding ](https://www.atlassian.com/teams/hr/guide/employee-onboarding) (_super detailed_)
- [Something targetted for remote developers](https://arc.dev/blog/remote-developer-onboarding-experience-7z0iu5fu3h)
Replace FTP with the SCP command in the terminal
Tags: linux, terminal, 100daysofcode
Published: 2021-06-22 14:45:47

SCP comes in handy to copy files to a remote server from a computer or vice versa. You can also copy server files to another server.

All you need is your server’s IP address and user credentials to start copying. Here are some common SCP commands use cases.

## Copy file from your computer to a remote server

```shell
scp file.zip user@hostip:/home/directory
```
This command will copy file.zip in your terminals present working directory to the home directory of the server.

##Copy file from a remote server to your computer
```shell
scp user@hostip:/home/directory/file.zip ~/Downloads
```
You are copying file.zip from the server’s home directory to your local downloads folder.

## SCP between two remote hosts from your computer

Another use case of the SCP command is during site migration to a new server. Zip your site’s root directory and copy it to the new server.

Provide login credentials and file paths of both servers to SCP in your computer’s terminal.
```shell
scp user@remotehost1:/home/file.zip user@remotehost2:/home
```

## SCP Options

### Mention transfer port
Add `-p` flag to add port of remote host
```shell
scp -p 1122 file.zip user@hostip:/home/directory
```
### Use file compression
Add a `-C` flag to enable the gzip compression in SSH transfer
```shell
scp -C localfile.zip user@hostip:/home/directory
```
### More SCP Options
`-v` Verbose SCP operation
`-p <port>` Mention remote host port
`-P` Save the file’s modification and access times
`-r` Copy recursively
`-c <cipher>` Specify the cipher for data encryption

So if you are still using an FTP client, use the SCP command in the terminal for a secure transfer.
Google Meet with images in chat !
Published: 2021-06-22 14:41:05

With the frequent use of Google Meet for online meetings and classes, the use of images can make your experience more fun and with this situation came the idea of ​​creating an extension for chrome.

![Gif Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q9454imm8lvvs6u7kj7.gif)

[Repository](https://github.com/eduardosouzv/meet-image-viewer)

In the repository you have how to install the extension and how to contribute, feel free to explore it
My Top 5 Tweets related to Frontend Development
Tags: javascript, react, webdev
Published: 2021-06-22 14:37:15

###1/5 - Disable pull to refresh using CSS
{% twitter 1400393758575710211 %}

###2/5 - Hide HTML element natively
{% twitter 1406666397116112897 %}

###3/5 -  CSS inset shorthand property for top/right/bottom/left
{% twitter 1402863094142021632 %}

###4/5 - Detect internet speed using Javascript
{% twitter 1403395076575797258 %}

###5/5 - Prevent user from pasting into input fields
{% twitter 1407009069060136961 %}


I post very frequently on twitter related to frontend tips.
Support my content by following on 
[Twitter - https://twitter.com/frontend_jsx](https://twitter.com/frontend_jsx)
[Instagram - https://www.instagram.com/frontend.jsx/](https://www.instagram.com/frontend.jsx/)
Javascript Questions
Tags: javascript, beginners, interview, intermediate
Published: 2021-06-22 14:33:46

What's the output?

let c = { greeting: 'Hey!' };
let d;

d = c;
c.greeting = 'Hello';
console.log(d.greeting);

A: Hello
B: Hey!
C: undefined
D: ReferenceError
E: TypeError

Answer: A

In JavaScript, all objects interact by reference when setting them equal to each other.

First, variable c holds a value to an object. Later, we assign d with the same reference that c has to the object.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wla17c2fu02lsck8w1hi.jpg)

When you change one object, you change all of them.
How to ace zsh's villain on vscode
Tags: zsh, vscode, todayilearned
Published: 2021-06-22 14:11:54

It's another graceful coding day, but all of a sudden the zsh's villain attacks on vscode and pops up a toast message with the temorous error: 
### The terminal process failed to launch: Path to shell executable "zsh" is not a file of a symlink 😱 
![villain gif](https://media2.giphy.com/media/8cGKbAB9FSrpaWyne6/giphy.gif?cid=ecf05e47gvyg36iv05fkbhaoaes84ivhthlkh6hszfm592k8&rid=giphy.gif&ct=g)
And zsh never works again on vscode's integrated terminal 😢
###But don't fear my lil locust, everything has a happy ending!
![happy final]
(https://media1.giphy.com/media/l4APnl2MUUK3rSBvXa/giphy.gif?cid=ecf05e47s56e95z2s5f728nzqgha2q6tbocgmfz4mh07e9rh&rid=giphy.gif&ct=g)
To solve this error you just need to open your user settings with `CTRL + SHIFT + P` and search for `Open User Settings` then search for `Terminal Settings` after that click on `Edit in settings.json` and finnaly add these lines into your `json` 

```json
"terminal.integrated.profiles.linux": {
    "bash": {
      "path": "bash"
    },
    "zsh": {
      "path": "/usr/bin/zsh"
    }
  },
"terminal.integrated.defaultProfile.linux": "zsh",
``` 
If you don't know your zsh path, just open your terminal `CTRL + T` and execute this command `which zsh` then you will see your zsh's path.

![cheers](https://media3.giphy.com/media/X6SPa7Q4BIc7K/giphy.gif?cid=ecf05e47oc5l4ba2vwozgbv1ua8zz7jeseh6ijmpbuuwp0lo&rid=giphy.gif&ct=g)
4 tools all developers should use
Tags: vscode, linux, git, github
Published: 2021-06-22 13:53:47

Developers are always looking for simpler ways to do more advanced things in less time, and one of the many ways that they can achieve this is by using a selection of tools to supplement their workflow. The aim of this article is to cover some of the major tools that people use, and to give you an insight into what they can do to make your life easier.

And to seal the deal, all the tools I’ll be mentioning are completely free to use, which is an incredible price for what you’re getting from them.

**Git / Version Control**

Git is the most well-known version control tool out there. It allows you to store your code on a server (thereby reducing data-loss risks), collaborate with other developers and share your code online. Another huge plus to Git is that it allows you to go and look at other people’s public repositories, and see how they solved certain problems. This can then help you solve the problem in your application, and it can save you lots of time and effort.

Git is open-source itself and it comes with a huge selection of extensions that allow you to modify the functionality of the system in a huge range of different ways.

The fact that Git allows you to go back and review previous versions of your code, see how it’s changed and keep track of issues as well as provide you with lots of automation tools makes it quite clear that Git, or a Git alternative is a must-have for nearly every project.

Whilst you could install a system like Gitea on a VPS and then run your own Git server, there is a selection of different services out there that provide Git repository hosting as a service. These services often come with lots of extras too, and usually a very generous free tier. The most notable Git host out there is definitely GitHub, but it is closely rivalled by GitLab among other solutions.

Want to read more? You can find the full article on my blog: https://www.saluki.tech/2021/06/18/4-tools-all-developers-should-use/
Python ed i primi esempi di codice
Tags: python, vscode, coding, andreacarratta
Published: 2021-06-22 13:40:51


🐍 #Python ed  i primi esempi di codice



🤔 Vi ricordate il post di sabato?



Il post a cui mi riferisco e' quello dove raccontavo di avere fatto i primi esperimenti in  Python  e di essermi divertito. 



💥 Quello che non vi ho raccontato e' come  ho affrontato questo percorso sfruttando #vscode per studiare.



Per questo motivo ho scritto un post a tema sul mio blog dove racconto il tutto. 



💡 Spero di avere fatto un post utile/ gradito a tutti i #developer che vorranno intraprendere questo percorso anche solo a titolo di studio e/o curiosità personale come il sottoscritto.  



Inoltre se vi siete persi il post "originale" lo troverete sempre al seguente link.



🔗 [Dai Andrea, escimi il link! Si si, tranquillo. Lo troverai nei commenti!](https://links.devandreacarratta.it/4inW)



✍️Hai avuto esperienze simili? Racconta! Sono proprio curioso!



#coding #andreacarratta
Have you worked on a GitHub project with “Code Owners”?
Tags: github, codequality, discuss, watercooler
Published: 2021-06-22 13:11:40

Hey there! I’m curious to hear from people who have worked on GitHub projects with “Code Owners” where a PR cannot be merged unless an owner approves of it. 

What are the advantages/disadvantages of it?

Has it affected your culture positively or negatively?

If you were to start a new project would you use this feature right away?

## Context!
I am working on a few private projects that have “Code Owners” and it’s not clear to me what benefit we get out  of it. Maybe we’re using the feature incorrectly.
VB.Net Gotcha: Always assign variables when declaring them
Tags: programming, vb
Published: 2021-06-22 13:12:49

---
title: VB.Net Gotcha: Always assign variables when declaring them
published: true
date: 2021-06-22 13:04:54 UTC
tags: programming,vb
canonical_url: https://siderite.dev/blog/vbnet-gotcha-always-assign-variables-when-declarin/
---

Original post at: https://siderite.dev/blog/vbnet-gotcha-always-assign-variables-when-declarin

Tell me, what will this Visual Basic .NET code display?

```
For x as Integer = 1 to 2
  Dim b as Boolean
  Console.WriteLine("b is " & b)
  b = true
Next
```

 Even if you never coded in Visual Basic it's a relatively easy code to translate to something like C#:

```
for (var x = 1; x <= 2; x++)
{
	bool b;
	Console.WriteLine("b is " + b);
	b = true;
}
```

Now what will the code display? Let's start with this one. This code will not compile and instead you will get: _Use of unassigned local variable 'b'._

But what about the VB one? Even with Option Strict ON it will not even warn you. And the output will be: _False, True_. What?!

In conclusion, VB.Net will let you declare variables without assigning any value to them, but their value will be inconsistent. **Always set the variables you declare.**
Online Marketing In A Nutshell
Tags: digitalmarketing, seo, onlinebusiness
Published: 2021-06-22 12:59:45

Online is a place where people throw darts into the darkness hoping to hit a bullseye someday.

People tend to think that big traffic can cause good business without considering the type of people who visit the site.
This is the worst sort of Marketing Online.

No matter how revolutionary your product or service is, unless it is backed by a well-thought-out Digital Marketing strategy, it is as good as being non-existent.

You have got to be as sure as any of the conventional brick and mortar businesses.

When trying to establish an online business, the biggest challenge is breaking the great wall of non-presence.

When you set up your online shop, you don’t know them and they don’t know you.

You need to make your presence felt; you need to set up an identity for yourself that tells your visitors that you are not an unemployed weirdo trying to dupe visitors from your dark and unheated basement.

There should be an appearance of authenticity on your website.

How can you do that?

Wait for the next part.
What I did last week
Tags: 100daysofcode, devjournal, webdev, codenewbie
Published: 2021-06-22 12:56:42

**Last week:**
- I created in my github two repositories of exercises(beginner to intermediate), one of JavaScript and the other of  Vue.js Framework. Basically are exercises that I have been doing in my code journey, and decided to do it again. I have been adding each day after I finish doing by myself and give my solution. 
Feel free to check out and make a fork and pull request of **'dev' branch** with your solutions.    


      JavaScript Exercises: [link](https://github.com/RS-coding/JavaScript-Exercises/tree/dev) | Vue Exercises: [link](https://github.com/RS-coding/VueExercises/tree/dev)  
  

   
- I am doing to do app in JavaScript again for the 1000x time to practice with different new solutions  from 0 and by myself only.(soon will share)

- Learning Vue.Js chapter Animations  of the udemy course "Vue - The Complete Guide (w/ Router, Vuex, Composition API)" by Maximilian Schwarzmüller.

- Doing JavaScript30 exercises of Wes Bos (soon will do a git repository for this)

**struggles:**
- I feel the need to practice more,
because when I do  more complicated projects I struggle a bit and need help. 


**accomplishments and straights:**
- everyday I small exercises of JavaScript and I can do it by myself only consulting google to find methods or stuff to do the thing I want to do.
- I feel improvements in my code everyday and more confident to do some things by my own. not 100% but it is a start

**Goals for this week 21 to 27 June**

- practice everyday small tasks/exercises -JavaScript 
- practice everyday small tasks/exercises - Vue
- continuing the To Do App in JavaScript and finish 
- continuing study Vue.js Course
- practice everyday JavaScript30  exercises
- reviewing one subject random or that I feel need remember of JS
Event Delegation in JS
Tags: javascript, bubbling, eventdelegation
Published: 2021-06-22 12:52:14

Event delegation is a concept to handle events in JS in more performant way. It uses the concept of event bubbling to achieve the same. Event capturing concept can also be used but event bubbling is the preferred approach.

Suppose there is list of items, i.e. `li`s inside an `ul`and clicking on each `li` some action is expected to occur. So the common approach is to add event listener to each `li` in the list.

### HTML

```HTML
<ul id='list'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>
```

### Without event delegation

```JS
const items = document.querySelectorAll('#list li');
const handleClick = () => {
  // do something here ...
};

// listener added to each li
items.forEach(item => {
  item.addEventListener('click', handleClick)
});
```
In this approach the number of event handlers attached are same as the number of `li`s present in the list, which will consume more JS memory.
So to solve this issue we can use the `Event delegation` approach here. 

### With event delegation

```JS
const list = document.querySelector('#list');

const handleClick = (event) => {
  if (event.target.tagName === 'LI') {
    // do something here
  }
};

// listener added to ul
list.addEventListener('click', handleClick);
```
In the above sample code, only one event handler is being added to the parent `ul#list`. Now in the handler if the  `target.tagName` is a `LI` then the required task is performed. Thus the number of handlers are reduced to **one**, which consumes less JS memory.

For more info about [event bubbling](https://javascript.info/bubbling-and-capturing#bubbling)
How to confige Elasticsearch in our local system
Published: 2021-06-22 12:37:04

In this tutorials we have learn how to config a Elastic search in our local system. Our original Post <a href="https://codingspoint.com/how-to-config-elastic-search-in-our-local-system/"> Here </a>

follow this step and easily configer an Elastic Search.

1) Step 1 — Installing Java :

-Before installing OpenJDK with APT, update the list of available packages for installation on your Ubuntu Droplet by running the command:

$ sudo apt-get update

-After that, you can install OpenJDK with the command:

$ sudo apt-get install openjdk-7-jre

-To verify your JRE is installed and can be used, run the command:

$ java -version


2) Step 2 — Downloading and Installing Elasticsearch :

$ wget https://download.elastic.co/elasticsearch/elasticsearch/elasticsearch-1.7.2.deb

-Then install it in the usual Ubuntu way with the dpkg command like this:

$ sudo dpkg -i elasticsearch-1.7.2.deb

-To make sure Elasticsearch starts and stops automatically with the Droplet, add its init script to the default runlevels with the command:

$ sudo update-rc.d elasticsearch defaults

Step 3 — Configuring Elastic :
Laravel Query Builder Where Exists Example

-To start editing the main elasticsearch.yml configuration file:

$ sudo nano /etc/elasticsearch/elasticsearch.yml

-Remove the # character at the beginning of the lines for node.name and cluster.name to uncomment them, and then change their values.

node.name: "My First Node"

cluster.name: mycluster1

-Once you make all the changes, please save and exit the file. Now you can start Elasticsearch for the first time with the command:

$ sudo service elasticsearch start

Step 4 — Securing Elastic :

-Elasticsearch has no built-in security and can be controlled by anyone who can access the HTTP API. So, the first security tweak is to prevent public access. To remove public access edit the file elasticsearch.yml:

$ sudo nano /etc/elasticsearch/elasticsearch.yml

-Find the line that contains network.bind_host, uncomment it by removing the # character at the beginning of the line, and change the value to localhost so it looks like this:

network.bind_host: localhost

-To disable custom expressions, add the following line is at the end of the /etc/elasticsearch/elasticsearch.yml file:

script.disable_dynamic: true

Step 5 — Testing :

$ curl -X GET 'http://localhost:9200' or run http://localhost:9200 in any browser.

You should see the following response:

{

"status" : 200,

"name" : "Harry Leland",

"cluster_name" : "elasticsearch",

"version" : {

"number" : "1.7.2",

"build_hash" : "e43676b1385b8125d647f593f7202acbd816e8ec",

"build_timestamp" : "2015-09-14T09:49:53Z",

"build_snapshot" : false,

"lucene_version" : "4.10.4" 

},

"tagline" : "You Know, for Search" 

}