teleren/devto huggingface dataset:
Jumping in and out of your editor too much?
Tags: bash, vim, linux, devops
Published: 2020-06-12 14:35:39

Quick post! Hopefully useful as it's been for me.

Have you ever been caught in the loop of **editing a file** in vim (or any other editor), and then **testing your changes** quickly from the command line, and doing it over and over for dozens of times?

I have, many times. Sometimes you don't even need to do that. For example, vim allows you to invoke a command line tool with `:!program-name`.

Still, sometimes one falls into that vicious *edit-run-edit* cycle without thinking too much. If that's your case, here's a simple tip you can try. *Note: you need to be on the console for this to work*.

When you're done with your changes, save the file and then use `CTRL + Z` to suspend the editor process and drop to the command line, where you will have your command waiting for you already.

Run the command, and then use `fg` to return to the editor process exactly as you left it.

The edit-run cycle will be a lot faster.

`fg` (foreground) and `bg` (background) are useful commands to "control the flow" of the processes you launch from the command line.
HTML Basics Part I
Tags: html, webdev, beginners
Published: 2020-06-12 14:33:13

Hyper Text Markup Language or HTML is the skeleton of any web page. It is incredibly easy to get started and an important first step of learning to make a website. 

# The Basics
HTML consists of an elements that tell a Web browser how to structure a website. In this article we are going to cover four basic elements to build a page quickly.

### DOCTYPE & HTML 
An element begins with the < and ends with > character. The first element to an HTML page consist of the an element is declaration that tells the file what to expect. Now using HTML files without declaring DOCTYPE may work but may result in the browser being forced into quirks mode. 

```
Quirks mode is a technique used by some web browsers for the sake
of maintaining backward compatibility designed for old web browsers.
src: https://en.wikipedia.org/wiki/Quirks_mode
```

The html tag is the start of the document and will contain all HTML tags with the exception of doctype. Here you should also display the language of the web page.

 To start your document with DOCTYPE and an html element type the following.

```
<!DOCTYPE html> 
<html lang="eng">
</html>
```

This declaration will let the browser know that the document is HTML5.

### Head
The next common element known as head is used to house metadata for the website. Common things to place in head include page title, style, character, and scripts. 

```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
</html>
```

### Body 
Last of the elements we are covering today is body. In this element tag is going to consist of everything that appears on your webpage. Here you would place text, images, and more. 

```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
 </body>
</html>
```

Now that we have built our basic file let's add on more element tag to display text. We are going to add the paragraph tag in the body element. We will discuss further on what the paragraph element is in later articles.


```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <p>Hello World</p>
 </body>
</html>
```

Now when we open this file in the web browser we will see the text "Hello World" being displayed. 

Follow and like for more articles on web dev basics.
How to configure a local Git repository to use a specific SSH key
Tags: git
Published: 2020-06-12 14:28:04

---
title: How to configure a local Git repository to use a specific SSH key
published: true
description: "Handling multiple Git projects from the same machine using different identities."
tags: git
cover_image: https://web3coach-public.s3.eu-central-1.amazonaws.com/blog/devto/ssh_auth_repo.png
---

Sounds familiar?

```
git push origin master

fatal: Could not read from remote repository.
Please make sure you have the correct access rights
```

When you work on multiple projects from the same machine, you often need to use a different SSH key per repository.

For example you may have two repositories:
- github.com/work/work-repo-1 [work SSH key]
- github.com/personal/personal-repo-1 [personal SSH key]

If you don't want to mess around with the global SSH config stored by default in `~/.ssh/config`, you can configure the local one, located as a hidden folder inside your cloned repository path.

Open the local repository's git config file:
```
cd $HOME/your-projects/github.com/work/work-repo-1
vim .git/config
```

You will see settings like:

```yaml
[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
        precomposeunicode = true

[remote "origin"]
        url = git@github.com:web3coach/web.git
        fetch = +refs/heads/*:refs/remotes/origin/*
```

## Individualize the settings
### Configure your user

Configure your user's name, email by modifying the `user` group settings. This is important because this name and email will appear in your project's git commit history. 

```yaml
[user]
        name = Lukas Lukac
        email = lukas@web3.coach
```

### Configure your auth permissions
Git uses SSH for permissions authentication. Specify what SSH key you want to use by defining the `sshCommand` setting inside the `core` group:
```yaml
[core]
        sshCommand = "ssh -i ~/.ssh/id_rsa_web3coach"
```

All together:
```yaml
[user]
        name = Lukas Lukac
        email = lukas@web3.coach

[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
        precomposeunicode = true

        sshCommand = "ssh -i ~/.ssh/id_rsa_web3coach"

[remote "origin"]
        url = git@github.com:web3coach/web.git
        fetch = +refs/heads/*:refs/remotes/origin/*
```

### Alternative

Prefix your git command with an ENV variable on the fly:
```
GIT_SSH_COMMAND='ssh -i ~/.ssh/id_rsa_web3coach' git push origin master
```

Thank you for reading.

---

If you like this tutorial, follow me on Twitter where I share my blockchain programming journey: https://twitter.com/Web3Coach
Help to design angular components structure efficietly
Tags: angular, help, component, design
Published: 2020-06-12 14:27:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wi01vjbvsp3hgcku4qta.png)

can you suggest solution of problem as shown in image..
more details here in this post https://stackoverflow.com/questions/62345750/how-to-design-angular-responsive-component-with-only-css
Could Documentation Screenshots Be Part of the Build Process?
Tags: discuss, documentation
Published: 2020-06-12 14:13:16

I was listening to an episode of [Codepen Radio](https://blog.codepen.io/radio/) where part of the discussion was how hard it is to keep videos and screenshots in the docs up to date.

So I started wondering. End-to-end tests always go through the same steps to test whether your product works. Could taking screenshots be part of that process? This way, the screenshots always represent the latest version of the app, and if an e2e test breaks, you know you may also need to update the docs about that part of the app.
What Are Methods?
Tags: ruby, beginners, computerscience
Published: 2020-06-12 14:07:43

#So What Is A Ruby Method?
A method is a concept found in almost all programming languages. Methods are very similar to functions. 

#Function vs Method
Functions are blocks of code that are interpreted once the function name has been called using the (), which in most languages is the call object/thing(I don't really know what the proper name for it is). A method is the exact same thing as a function except that they're tied to a class or module. 

>What does that mean?

It means that they only exist inside specific classes and modules. Sometimes a method of the same name is used for different data types(map is a good example for Hashes and Arrays), but internally the code for array.map and hash.map is different.

>How and why?

The answer to why is because the data types are different, therefore structured differently, so to get the same outcome for both separate logic must be used. How?, well that's simple, since data types are technically classes you just have to define a function inside of the class and voila!, you're class has a method. This mean that all instances of that class can access the method(assuming that it uses instance variables). Here's a visual:
```Ruby
class Array
  #A bunch of methods above it
  def to_set
    set = {}
    for i in Array
      #some code that adds i to the set
      return set
    end
  end
  #some methods after it
end

#using the method
arr = [1,2,3,3,3] #=> indirectly creating an instance of the Array class
arr = arr.to_set #=> the . tells ruby that you're accessing the class method to_set
#even though we defined to_set like we do a function, since it #was defined inside a class, it's a method
#since our variable is now a set with the same values the output would be
#=> {1,2,3}(remember, sets can't have duplicates)
```
#That's That Folks
Hope you learned something!
June 12th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-06-12 14:07:37

It's that time of the week again.

So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Homer Simpson studying](https://media.giphy.com/media/IPbS5R4fSUl5S/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-k04 %}

<center>

![Bender from Futurama dancing](https://media.giphy.com/media/mIZ9rPeMKefm0/giphy.gif)

</center>
Day 2: Operators
Tags: beginners, python, programming
Published: 2020-06-12 14:06:44

Hey there,
Currently I'm on Day 2 of [HackerRank's 30 days of code](https://www.hackerrank.com/domains/tutorials/30-days-of-code)  challenge and usually after getting the introduction to programming and learning about the various datatypes, the next step is usually to familiarize oneself with operators.
Operators are symbols that are used to work on various operands(the variables or values). They are three basic types of operators:
1. **Unary** ( used with 1 operand)
2. **Binary** ( used with 2 operands) 
3. **Ternary** (used with 3 operands)
 
The next branch breaks down the operators on the basis of functionality:

 **Arithmetic Operators**: used to perform mathematical operations:
1. (**+**) Addition
2. (**-**) Subtraction
3. (*) Multiplication
4. (**/**) Division; This gives the result as a float if a float value is used)
5. (**%**) Remainder/Modulus
6. (**//**) Integer Division; This gives the result as an integer if a float value is used)

**Conditional Operators**: used to compare two conditions:
1. (**>**) Greater than
2. (**<**) Less than
3. (**>=**) Greater than or equal to 
4. (**<=**) Less than or equal to
5. (**==**) Equal

**Logical Operators**: used to compare multiple conditions at the same time:
1. (**and**) 
2. (**or**) 

Today's task was to find a meal's total cost given the meal price, tip percent and tax percent and my solution was:
```python
 def solve(meal_cost, tip_percent, tax_percent):
   
    tip = meal_cost * (tip_percent/100)
    tax = meal_cost * (tax_percent/100)

    total_meal = meal_cost + tip + tax
    print(round(total_meal))

# Calling the function: solve(12.00, 20, 8)
#Sample Input
#12.00
#20
#8

#Sample Output
#15
```
React understanding for Beginers
Tags: react, javascript, webdev
Published: 2020-06-12 13:47:50

Its been a long time I am thinking to write something about react what I know. 

React is javascipt library for building user interfaces. It was developed by facebook in 2011. Currently it is one of the most popular javascipt library for building user interfaces. Nowadays, React is dominating this place for a long.

We can say that components are the heart of React applications. Component is a piece of user interface. Simple react application or complex react application, whatever it is, using a number of components to create the final product. It is helping the developer for the coming changes in the future.
Every React application has an `App` component which refered to as the root component. This component will represent the entire application and it contains all other child components. So every react application is a tree of components.
consider an example


Component is implemented as Javascript class or function. After the introduction of react Hooks everyone is mostly using the Functional components.

### class component

```jsx
class classComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>; // React element
  }
}
```

### functional component
```jsx
function functionalComponent(props) {
  return <h1>Hello, {props.name}</h1>; // React element
}
```

The class component contains state and render method mainly. State is that we want to display when the component is renderd and the render method is describing how the UI looks like. The output of the render method is a react element which is a simple javascript object that maps to a DOM element it is not a real DOM element. It is just a plain javascript object that represents the DOM element in the memory. The representation of DOM element in the memory is refered to as `Virtual DOM`. When we change a state of component, then it will get a new React element. Thn react will compare this element and its children with the previous one and figures out what is changed and then it will update the part of the real DOM to keep it in sync with the virtual DOM. So we do not need to attach any evend handlers to DOM elements. 
In case of functional component, using ``return`` instead of ``render`` method. It will return also a React element. There is no state. React 16.8 introduced Hooks. So in functional componets using hooks which can be called to create and maintain state. 

If functional component is the first choice then the code will be shorter and easier to read.

As I mentioned earlier React is a library. Because of that need to use seperate libraries like Redux for state management and react-router for routing and etc. But it is not a big deal and it will not affect the performance of application development.  
React is react to state change.

will continue ...
dbExpress Drivers Now Support RAD Studio 10.4 Sydney
Tags: data, sql, delphi, database
Published: 2020-06-12 13:36:38

---
title: dbExpress Drivers Now Support RAD Studio 10.4 Sydney
published: true
description: Devart rolled out the updated versions of dbExpress drivers with support for the newly released RAD Studio 10.4 Sydney.
tags: Data, Sql, Delphi, Database
---
*Devart rolled out the updated versions of dbExpress drivers with support for the newly released RAD Studio 10.4 Sydney.*

Devart, a recognized vendor of database management software, ALM solutions and data providers, released updated versions of its dbExpress drivers. The Czech vendor stays on top of software development, thus the new drivers got support for RAD Studio 10.4 Sydney.

The recent update of [dbExpress drivers](https://www.devart.com/dbx/) include:

- **Support for RAD Studio 10.4 Sydney** — applies to dbExpress Drivers for Oracle, SQL Server, InterBase and Firebird, MySQL, PostgreSQL, and SQLite.
- **Support for JSON data type** — another improvement in dbExpress Driver for MySQL.

Devart dbExpress Driver is a lightweight, cross-platform interface for accessing data from SQL database servers in Delphi and C++ applications. The key benefits of Devart cross-platform dbExpress technology are direct access to database servers using native libraries and data type mapping between database and Delphi data types.

For more information about Devart dbExpress Driver, please visit — https://blog.devart.com/dbexpress-drivers-with-support-for-rad-studio-10-4.html 

**About Devart**

Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration and backup solutions. The company also implements Web and Mobile development projects.
For additional information about Devart, visit https://www.devart.com/
Portfolio using Jekyll
Published: 2020-06-12 13:27:57

Hello dev.to community!. I wanted to learn something new, so I started learning Jekyll which is a static site generator. I also thought to make some side projects using this. So I built my portfolio using Jekyll.

This is the link of my portfolio: https://yatharth1706.github.io/

Once take a look at this portfolio, and let me know what more things i can add or improve in my Portfolio. It would mean a lot to me!!

Thank you!!
🚀10 Trending projects on GitHub for web developers - 12th June 2020
Tags: javascript, github, webdev, typescript
Published: 2020-06-12 13:25:17

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. SpaceX-API

Open Source REST API for rocket, core, capsule, pad, and launch data

{% github r-spacex/SpaceX-API %}

---

### 2. Vanilla Web Projects

Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

{% github bradtraversy/vanillawebprojects %}

---

### 3. React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

{% github typescript-cheatsheets/react-typescript-cheatsheet %}

---

### 4. The Super Tiny Compiler

This is an ultra-simplified example of all the major pieces of a modern compiler written in easy to read JavaScript.

{% github jamiebuilds/the-super-tiny-compiler %}

---

### 5. AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 4 

{% github ColorlibHQ/AdminLTE %}

---

### 6. The Algorithms - JavaScript

A repository for All algorithms implemented in Javascript (for educational purposes only)

{% github TheAlgorithms/Javascript %}

---

### 7. GrapeJS

Free and Open source Web Builder Framework. Next generation tool for building templates without coding 

{% github artf/grapesjs %}

---

### 8. Cloudmapper

CloudMapper helps you analyze your Amazon Web Services (AWS) environments.

{% github duo-labs/cloudmapper %}

---


### 9. Eclipse Theia

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript. 

{% github eclipse-theia/theia %}

---

### 10. A Single Div

CSS drawings with only one HTML element. 

{% github lynnandtonic/a-single-div %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
City Builder Devlog | Birthday
Tags: youtube, game, city, builder
Published: 2020-06-12 13:21:00

Hey!
This is my 8th part in my dev log series
Come, Watch and leave a Like and Subscribe :)

{% youtube q9FTOKEILuE %}

> Like this post?
> Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
Gem to truncate HTML strings efficiently ...
Tags: rails
Published: 2020-06-12 13:20:53

Generally we use truncate view helper to truncate the text.

But it has an issue that it truncate the html tag as well and in worst case, a partial html tag gets truncated.

For example:

```ruby
truncate("The Rails philosophy includes two major guiding principles: <strong>Don't Repeat Yourself:</strong>", length: 7
0)
```
It gives output as
```ruby
"The Rails philosophy includes two major guiding principles: &lt;strong..."
```
It is not the desired output we want. Reason is it breaks the html tags.

`truncato` gem comes as a rescue for handling this one. This Gem performs well while comparing to other Gems in truncating the html content, which is additional advantage of using this one.

This is how truncato gives output
```ruby
Truncato.truncate("The Rails philosophy includes two major guiding principles: <strong>Don't Repeat Yourself:</strong>", max_len
gth: 70)
```

```ruby
"The Rails philosophy includes two major guiding principles: <strong>Do...</strong>"
```
The HTML tag is smartly retained here even though it truncate the text with in it.
How to set up Master-Slave replication in MySQL?
Tags: mysql, webdev, tutorial, codenewbie
Published: 2020-06-12 13:17:24

{% youtube e8hFVe8ljJg %}

In this video, We will understand how to setup master-slave replication in MySQL on the Ubuntu server. Mysql Replication is a process to replicate the data automatically from one Mysql database server to one or multiple Mysql database servers.

00:00 Welcome
00:53 Configure MySQL Master Database
10:53 Configure MySQL Slave Database


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/

Please do Like, Share, Comment, and Subscribe!
#discuss Which is the best online LIVE course out there for learning DATA STRUCTURES & ALGORITHMS?
Tags: discuss, help
Published: 2020-06-12 13:11:08

I wanted to dedicate this month to learning **Data Structures and Algorithms**. Sadly, I can't find the right course for it. 
I searched for some courses in *Udemy* and *Udacity* but I did not find anthing satisfying.

Does anyone have any recommedations for this one?

I would be happy if you could tell me which course you took for learning *DSA*.
Use colorful avatar improve user experience 
Tags: javascript, tricks, html
Published: 2020-06-12 12:54:02

---
title: Use colorful avatar improve user experience 
published: true
description: We can use default name alphabet to holding avatar if user not setting.
tags: Javascript, Tricks, HTML
---

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

I develop **Vue** component to show user avatar, below screenshoot show component is.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19k3c1hbdmawkkapae0v.png)

As you can see has two circle avatar one show **M** alphabet and other shown **image**.

```html
// show first alphabet from mixbo 
<Avatar name="mixbo"/> 

// show image with src url
<Avatar src="https://dev-to-uploads.s3.amazonaws.com/i/gwajd7xyh139ppnw49ra.jpg" />
```

I think it helpful when show user avatar but user not upload avatar, it's good experience isn't it? 

Also you can use default avatar image when user not upload avatar.

The different alphabet  avatar  to default avatar is more personal and colorful.

Show you how to calculate the first alphabet with different background color

```javascript
const colors = [
  '#414656',
  '#F6C100',
  '#BD66CC',
  '#FF4B4B',
  '#00B8D4',
  '#2F70FF',
  '#3BB46E',
  '#00838f',
  '#0091EA',
  '#FF6D00',
  '#9a6157',
  '#333333',
]
avatarAlphabetBGColor = (name) => {
  const idx = name.charCodeAt(0) % colors.length
  return colors[idx]
}
avatarAlphabetBGColor("mixbo") // "#F6C100"
```

`avatarAlphabetBGColor` caculate the first name aplhabet and get the background color from pre-define const `colors`. so same aplhabet will return same background color. 

```java
avatarAlphabetBGColor("mixbo") // "#F6C100"
avatarAlphabetBGColor("mile") // "#F6C100"
avatarAlphabetBGColor("ihavecoke") // "#FF6D00"
```

That all the magical hope it can help you :)