teleren/devto huggingface dataset:
11 VS Code Features & Tricks You Should Know as a Developer
Tags: javascript, vscode
Published: 2021-05-17 06:20:42

**1. Fonts With Ligatures**

Fonts with ligatures make code more clean and handy when working with big projects, you can make your editor experience much better with exceptional fonts in conjunction with ligatures. There are several fonts available that support ligatures, but you can simply stick with the classic Fira Code.

To enable ligatures in VS Code you just have to add *“editorLigatures”: true* in VS Code settings file.

**2. Rainbow Indent**

This VS Code extension colorizes the indention in front of your text alternating four special colors on every step if you write code in JavaScript and Python then this feature is quite useful for neat-looking code.

**3. Tag Wrapping**

If you are tired of typing things repeatedly then you should understand emmet, emmet allows you to write an abbreviated code and get the returned corresponding tags quickly. The latest version of emmet has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

*To use tag wrapping:*

Select text.
Open command palette.
Execute Emmet: Wrap with Abbreviation.
Enter a tag div (or an abbreviation).
Then hit Enter.

**4. Turbo Console.log()**

Instead of typing console.log repeatedly, you should preserve your time when you simply need to output some things fast. Turbo Console Log is an awesome extension in VS Code that solves this problem, it enables the logging of any variable on the line below with an automatic prefixing following the code structure.

**5. Multi Cursor Editing**

One of the most helpful features in VS Code that I personally love, with multi cursor editing you can edit multiple lines within a quick. There are several methods for multi cursor editing as given below:

*ALT-CLICK: If you want to insert multiple cursors through a document that aren’t on consecutive lines, you have to just simply hold ALT and click on each line.*

*CTRL-U: Just in case you clicked the wrong line and don’t want to go all over again with selecting lines, then just press CTRL+U to undo the last cursor operation.*

*SHIFT-ALT with Arrow Keys: If you selected a word and want to include the quotes or anything that surrounds near it, just simply use the SHIT+ALT with the arrow keys to expand your selection area.*

*SHIFT-ALT-Drag: Using this key combination allows you to create a rectangular selection.*

Read More at: https://javascript.plainenglish.io/11-vs-code-features-tricks-you-should-know-as-a-developer-47e5ec0c362b
Build Cloud-Native Web Hosting on Alibaba Cloud in 15 minutes - Part 2: auto scaling setup and demo
Tags: wordpress, cloudskills, cloudnative, database
Published: 2021-05-17 06:02:48

When hosting web applications and databases on the same server, how do you handle the ever-growing traffic? Online scaling may be an option, but what if one server can no longer handle that much traffic? How do you scale horizontally? How do you address consistency issues?

What you need is to split your database server off to it’s own droplet, and you will have the chance to see the magic of auto scaling which has absolutely no impact on your websites.

See the magic of auto-resiliency by yourself in 15 mins to bright your day!
[Watch Now(15 mins) >](https://www.youtube.com/watch?v=POQ_nxjnIYM)

🔥Free Resources For Foundation Build🔥: Register to apply for Free ECS, networking, storage, database and other resources.
[Get Now >](http://45dwz.com/NdmJK)
vs-form: A schema-based form generator component for React
Tags: react, javascript, typescript
Published: 2021-05-17 05:49:31

Do you write a lot of repetitive Code or do you think your code could be more straigthforward? It’s time to look at [vs-form](https://www.vs-form.com/), a Form-Generator for React to easily build UI, especially Forms with the help of a schema.

You can try it out with our [Online-Designer](https://www.designer.vs-form.com/)!

**Why use vs-form ?**

vs-form allows you to to define Forms in a declarative way with the help of a schema.
It radically improves your poductivity and gives a lot of advantages:

- EASY TO USE
One key-point of vs-form is it’s ease of use.

- WRITE LESS CODE
Since Components in vs-form are just Javascript-objects, they are easier to handle than dealing with HTML or JSX.

- EXTENDABLE
It’s easy to extend the schema with your own Custom Components.

- USING TAILWINDCSS
vs-form uses the popular TailwindCSS 2.0 Library for styling.
We even enhanced Tailwind with categorized CSS Classes!

- FLEXIBLE NESTING OF COMPONENTS
Components in vs-form can be nested without limitation.

- RESPONSIVE LAYOUT
vs-form provides an easy to use responsive Grid-System just like the Bootstrap grid system.

- BUILT-IN DATATABLES
Edit an array of components.
- TYPESCRIPT AND INTELLISENSE SUPPORT
- SMALL FOOTPRINT
The package is small in size and does so without third-party packages.
We have also some ready-made packages like Date-Inputs you can install from npm.
First Python Project
Tags: python, programming, devjournal
Published: 2021-05-17 05:43:48

Hello World!!

Let's start making the first Python project on your machine!

Step 1) Open PyCharm Editor. You can see the introductory screen for PyCharm, click on “Create New Project”.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbbvuq4i6ggi30n5pg53.png)
 

Step 2) You will need to select a location.

You can select the location where you want the project to be created.

Next, click the “Create” Button.

Step 3) Now Go up to the “File” menu and select “New”. Next, select “Python File”.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vskqi4rzasi4pduzcw4w.png)

Step 4) A new pop-up will appear. Now type the name of the file you want (Here we give “HelloWorld!”) and hit “OK”.
 

Step 5) Now type a simple program - print (‘Hello World!’).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnrfl78soylm2dxg7z0b.png)

Now Go up to the “Run” menu and select “Run” to run your program.

There you have it!!! Your first program in Python! Simple right? Now imagine the world of things you can do with just this information and the things you can build.
The Magic Of The Brain Dump
Published: 2021-05-17 05:33:53

David Allen, the author of the book “Getting Things Done”, argues that our brains were not made to keep a bunch of tasks in them. They are very poor at holding them, organizing them, and reminding us when something is due. They are notorious for doing exactly the opposite.

How many times have you reached home and then remembered that you could have gotten milk or pens or veggies at the grocery store you just passed on your way from work! Damn it!

The other day, I saw my friend coming out of it, spoke to him for a bit, and then moved on.

How many times has your brain reminded you of tasks you could have done, should do tomorrow in the middle of the night? What’s the point of that?

It only serves to stress us out.

And a founder of a bootstrapped SAAS company(Proxies API), I know a thing or two about stress.

When I find myself overwhelmed with too many things, I know that it is time for the “Brain Dump” invented by David Allen.

Here is the idea:

Your brain is not the place to hold your tasks, projects, schedule, and things you need to remind.

But the brain won’t stop till it knows that you got the tasks somewhere safe.

So knowing this, pull out a paper or a laptop or a phone, make sure it’s something your brain trusts as being safe and something that will not be lost or destroyed.

Then set time aside for at least an hour.

Now write everything that your brain says you have to do. Write down tasks, projects, ideas, vague ambitions, calls you have to do, things you had to look up anything that comes to mind.

The order doesn’t matter. Don’t reject any tasks or ideas, don’t process them as well, don’t organize them at this moment, don’t even worry about spelling, let your brain work at its full speed, don’t miss anything, don’t get distracted, don’t wait for it to stop. Encourage your mind to come up with more. And write everything down. Write till there is nothing left and then wait some more. It will start the stream again. So give it a bonus time. It might happen after you have finished the session over the next few days. Please write all of it down.

If you do this right and thoroughly, you will find that a sense of relief and lightness will come over you. You are free. The brain will stop reminding you repeatedly of the same thing over and over at the wrong times. It knows the data is safe. It’s like it's got an assistant now. Now it’s free to take up one task at a time and go deep. Overwhelm will be a thing of the past.

But this is not the end, the brain dump has to be processed. The whole philosophy is called GTD or Getting Things Done, and to learn from about how to handle the brain dump data to tasks, projects, actions, and increase your productivity study his system here.

The author is the founder of Proxies API, a proxy rotation API service.
Installig the VSCODE  and apt-get on Amazon workspace
Published: 2021-05-17 05:30:35

Hi everyone I am trying  to install the vscode on amazon workspace which holds the os as Amazon Linux release 2 (Karoo) whenever I try to install the code.deb file or like that and try to access that using sudo apt-get it says that we command not found or even when i try with dpkg package to access the file still it says the same command not found.  please do let me know if anything or documentation or anything on this can help
What Makes WBTC (White Bitcoin) Unique?
Tags: wbtc, wbtccryptocurrency, wbtcprice
Published: 2021-05-17 05:13:23

WBTC (White Bitcoins) act as an alternative to the traditional Bitcoin. Since the WBTC (White Bitcoins) are a comparatively new introduction to the cryptocurrencies market, these WBTC not only have all the features of Bitcoins but also addresses the limitation of the traditional Bitcoins.
The major features that make WBTC (White Bitcoins) unique include.
1. The investment price is quite low in comparison with traditional Bitcoins, which allows even small investors to purchase and earn profit in cryptocurrency.  This also means that one can buy more units of [WBTC (White Bitcoins)](https://www.whitebitcoin.io/) at a limited value, giving the investors a margin to easily sell and buy a few WBTC (White Bitcoins) which is quite impossible for Bitcoins as one Bitcoin holds a huge trillion-dollar value on the exchange platform.
2. Another important point to consider before investing in any cryptocurrency is its transaction fees and the allotment time. WBTC (White Bitcoins) not only has low transaction fees in comparison to Bitcoins but also, the time to buy and get WBTC allocated to your wallet is also a quick process. This makes WBTC (White Bitcoins) a popular choice among investors
3. WBTC (White Bitcoins) also has an affiliate program due to which most of the WBTC investors usually hold their investment, making the supply of WBTC and thus raising the demand. This further creates stability and ensure the prices will not reduce even in the long run.      
4. With the latest updates on the VIP affiliate app, it is more convenient to buy WBTC (White Bitcoins) as now one can directly buy WBTC in VIP affiliate app for any other cryptocurrencies like Bitcoin instead of adding the fiat currency in the wallet and then buying WBTC (White Bitcoin). This new feature will not only further reduce transaction time and transaction fees but also lead rise in the demand for WBTC (White Bitcoin).

Hence the launch of WBTC has brought so much to the table. It has opened up many opportunities for the traders of Bitcoins and has put the walls down between White Bitcoin and Bitcoins.
Get Azure Certifications for free
Tags: azure, cloudskills, microsoft
Published: 2021-05-17 05:07:35

You can read more here.
https://blog.anishansari.com.np/get-azure-certifications-for-free

<a href="https://www.buymeacoffee.com/anishansari" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Monkeying with circles in CSS
Tags: codepen, css, html
Published: 2021-05-17 04:59:58

---
title: Monkeying with circles in CSS
published: true
description: Monkeying around with CSS: drawing a monkey with CSS using only circles and no HTML elements (apart from the body).
tags: codepen,css,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7p08qeor6emua0nu9qs.jpg
---

Monkeying around with CSS: a drawing of a monkey done with CSS **using only circles and no HTML elements** (apart from the body). Demo on [Codepen](https://codepen.io/alvaromontoro/full/ExWKjBj):

{% codepen https://codepen.io/alvaromontoro/pen/ExWKjBj %}

----

Funny thing: on Chrome, for smaller screens, the `border-radius` is _lost_, and the monkey looks all squared:

![Screenshot of a squared monkey, some parts are not connected correctly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i351ymutkpd6cv60yv3i.png)
Using The CSS3 Box-Sizing Property🌈🌈
Tags: css, webdev, codequality
Published: 2021-05-17 04:50:09

# Box-Sizing

Approximately all **HTML** elements can be characterized as boxes, ranging from the `<a>` tag to the `<textarea>` tag and all of these elements has **5** modifiable dimensions:
- Width
- Height
- Padding
- Border
- Margin

The **Box-Sizing** property was introduced to specify how these dimensions can be calculated and modified to give desired results.
This **Box-Sizing** property has two values:
1. Content-Box
2. Border-Box

*Without setting the value, the default value to the* **Box-Sizing** *property is* **content-box**

## Content-Box
Before CSS3, **content-box** was known as the ***W3C Box Model***. When the value of **Box-Sizing** is set to content-box, the addition of the width, height, padding, and border of that element becomes the total size of the element.
**i.e** 
After specifying the width and height on an element, the padding and border of that element are applied subsequently.

> **Element Width** = Left padding + Right padding + Left border + Right border + Width

> **Element Height** = Top padding + Bottom padding + Top border + Bottom border + Height

*example:*

```css
.box1{
   width: 500px,
   height: 300px,
   border: 10px solid red,
   padding: 30px,
   box-sizing: content-box
}
``` 
In the example above, the width of the element is no longer **500** but **580** and the height is no longer **300** but **380**.


![macaulay1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621175452144/tXnwq4_wW.png)

*📌 the diagram above shows the increase in width and height of the element.*

***

## Border-Box
In this box model, a totally different calculation is carried out.
When the width and height of an element is specified, the padding and border are mechanically included in the elements total width and height.
**i.e** The borders and padding are considered as part of the width and height rather than being an add-on that increases the elements size.
> **Element Width** = Width specified

> **Element Height** = Height specified

*example:*

```css
.box2{
   width: 500px,
   height: 300px,
   border: 10px solid red,
   padding: 30px,
   box-sizing: border-box
}
``` 
In the example above, the the width of the element still remains **500** and the height still remains **300**. The padding and border are considered as part of the width and height.

![macaulay2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621175502719/DLZb6luFd.png)

*📌 the diagram above illustrates how the border and padding becomes part of the width and height of the element without increasing the size of the element.*

***

# That's It ❕❕
If you have any feedback, opinion, or comment to the discussion in this article, please let me know in the comment section. I'm always happy for a discussion.

**Thanks** and See you next time 🤝🤝.

[Twitter](https://twitter.com/mccauley_json).
LeetCode 538. Convert BST to Greater Tree
(javascript solution)
Tags: algorithms, javascript
Published: 2021-05-17 04:36:18

###Description:
Given the root of a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original BST is changed to the original key plus sum of all keys greater than the original key in BST.

As a reminder, a binary search tree is a tree that satisfies these constraints:

The left subtree of a node contains only nodes with keys less than the node's key.
The right subtree of a node contains only nodes with keys greater than the node's key.
Both the left and right subtrees must also be binary search trees.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
var convertBST = function(root) {
    // Keep track of the total during the traversal of the tree
    let sum = 0
    // Traverse right, middle, left and continually add to the sum
    function trans(root) {
        if(root === null) return 0;
        trans(root.right)
        root.val+=sum
        sum = root.val
        trans(root.left)
    }
    // Traverse the tree
    trans(root)
    return root
};
```
Python Script to get the Docker Containers status
Tags: docker, python, devops
Published: 2021-05-17 04:18:53

### Used docker-py SDK

#### Installed using pip command

```
pip install docker-py
```

###### **Python Script**

```
import os
import datetime
from docker import Client

cli = Client(base_url='unix://var/run/docker.sock')
containers = cli.containers()
for container in range(len(containers)):
 for key in containers[container]:
    print(containers[container][key])
```

####### Output 
```
b8c2a832a4f107b86981d3b346d5627e0554312465fde358f1072b61cc940961
['/etcd']
quay.io/coreos/etcd:v2.2.1
sha256:142eb4c815648ddd1146ce61f85ee577fce794a54489873134b2d9714f396ac6
/etcd -name etcd0 -advertise-client-urls http://localhost:2379,http://localhost:4001 -listen-client-urls http://0.0.0.0:2379,http://0.0.0.0:4001 -initial-advertise-peer-urls http://localhost:2380 -listen-peer-urls http://0.0.0.0:2380 -initial-cluster-token etcd-cluster-1 -initial-cluster etcd0=http://localhost:2380 -initial-cluster-state new
1618796211
[{'IP': '0.0.0.0', 'PrivatePort': 2379, 'PublicPort': 2379, 'Type': 'tcp'}, {'IP': '0.0.0.0', 'PrivatePort': 2380, 'PublicPort': 2380, 'Type': 'tcp'}, {'IP': '0.0.0.0', 'PrivatePort': 4001, 'PublicPort': 4001, 'Type': 'tcp'}, {'PrivatePort': 7001, 'Type': 'tcp'}]
{}
running
Up 4 days
{'NetworkMode': 'default'}
{'Networks': {'bridge': {'IPAMConfig': None, 'Links': None, 'Aliases': None, 'NetworkID': '6e5820ead0cfa5c34baee87737f99e5b2b05601d02435760631a914815e0fcb8', 'EndpointID': 'efe94e05a72f0197f891bb49ec6b4882d8da72fc10819cdc38831bbf145001df', 'Gateway': '172.17.0.1', 'IPAddress': '172.17.0.2', 'IPPrefixLen': 16, 'IPv6Gateway': '', 'GlobalIPv6Address': '', 'GlobalIPv6PrefixLen': 0, 'MacAddress': '02:42:ac:11:00:02', 'DriverOpts': None}}}
[{'Type': 'bind', 'Source': '/usr/share/ca-certificates', 'Destination': '/etc/ssl/certs', 'Mode': '', 'RW': True, 'Propagation': 'rprivate'}]
```
Getting Started with Django (Part 1)
Published: 2021-05-17 04:16:52

**Django** is a free and open-source high-level Python web framework. As Django itself claims as “The web framework for perfectionists with deadlines.” is absolutely right. I have been using Django for around 1 and a half years, and I find it very useful in web development.

###How to get started with Django?

```First of all, the prerequisite to get started with django is one must know programming and Python programming language. It will be very useful if one has done some project on the python programming language. The next thing, it is good to know about the database, HTTP methods, Html / CSS.```


If you have the above-mentioned knowledge then it will be quite easy to understand web development and using django for web development.

Now let’s do some work.

To install django in your local machine we use “ pip ”. If you are using a Linux OS then “ pip3 “ is used to install any python packages. pip3 means use the package installer for python3. And if you are in windows, then only “pip” will be enough.

Before installing django on local machine, I highly recommend installing python package named virtualenv. “ virtualenv “ creates a separate virtual environment for the project and saves from the trouble of package version difference errors. Just install virtualenv with pip install virtualenv

2. Create a virtual environment for the project. Here “ venv ” means the name of a virtual environment. One can use any name. Also activate the virtual environment.
```
    virtualenv venv

    cd venv/scripts/

    activate
```
3. Install django in the activated virtual environment
```
    pip install django
```
4. Now just type these commands. And you will have your first django project run successfully
```
    cd ../..

    django-admin startproject projectname .

    python manage.py startapp core

    python manage.py makemigrations

    python manage.py migrate

    python manage.py createsuperuser

    python manage.py runserver
```
Here **cd../..**. is used to change the directory to move backward on the file system.

**django-admin** is the command-line utility command to startproject named projectname. And projectname could be any of your choices.

**python manage.py startapp core** command is to use python as an interpreter for manage.py and startapp named core. Similarly, the app name could be any of your choices.

Then **makemigrations** command makes a script to perform on the database. 
**migrate** command executes the script made by makemigrations command.

You could also **create a superuser using createsuperuser** command to access the admin section of the website.

And finally, the **runserver** command runs the local server built-in django. After that enter *[http://localhost:8000/](http://localhost:8000/)* and you can see your website running perfectly.
We look into the CRUD concepts using a ORM i wrote called snok
Published: 2021-05-17 03:59:39

---
title: We look into the CRUD concepts using a ORM i wrote called snok
published: true
description: The CRUD concept is pretty integral to the state-management concepts and an ORM is a good way to store information. ORM stands for Object-Relation Mapping and the CRUD concept is the function Create Read Update Delete. Using my ORM Snok we will look at the concepts and talk about the pros and cons of using tools for data management.
tags:
cover_image: https://i.ytimg.com/vi/T69v3Uiz4vQ/maxresdefault.jpg
---

{% youtube T69v3Uiz4vQ %}

The CRUD concept is pretty integral to the state-management concepts and an ORM is a good way to store information. ORM stands for Object-Relation Mapping and the CRUD concept is the function Create Read Update Delete. Using my ORM Snok we will look at the concepts and talk about the pros and cons of using tools for data management.