teleren/devto huggingface dataset:
Getting started with HTML Forms
Tags: html, css
Published: 2021-05-17 03:59:07

When I first started my coding journey, one of the things that I’ve noticed is that forms are everywhere, and it’s useful to get in the habit of creating forms, whether you’re a frontend or backend engineer.

Here are several steps to create a simple login form with HTML and CSS

###Start with the HTML file

Inside the body tag, enter a div tag with a class name, then the form. 

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Form</title>
</head>
<body>
   <div class="container">
       <h2>Login</h2>
        <form>
        </form>
   </div>
</body>
```

In the form tag, implement the inputs for the email and password.
```html
<form> 
<input type="email" class="input-box" placeholder="enter your email" required>
      <input type="password" class="input-box" placeholder="enter your password" required>
</form>
```
## CSS
Create a universal selector with a 0 margin and padding. 

```css
* {
   margin: 0;
   padding: 0;
}
```
Enter the class attribute, ***.container*** as shown in the code below with the additional properties. 

```css
.container {
   width: 100%;
   height: 100vh;
   font-family: sans-serif;
   background: rgb(255, 255, 255);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}
```
And there you have it. 


Photo by Andrea Piacquadio from Pexels
HTML : Centering a div of unknown height and width
Tags: html, css, programming, webdev
Published: 2021-05-17 03:46:02

Let's create a div with some dummy content as -
```html
<div class="content">This works with any content</div>
```

Now let's apply some css to allow this content to be in center:
```
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
```

> I know approx 10-15 ways to center html content, if you're interest then please comment below, I'll write an article on this topic as well.

{% stackblitz web-platform-83ufnu %}

<a href="https://www.buymeacoffee.com/rkycom" 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>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
A web-manjaro-ui written in Vue3!
Tags: vue, typescript, linux
Published: 2021-05-17 03:41:37

> Hi guys,I have build a project recently: A simulating **Manjaro Linux DE**,hope you like it(I just beg some stars XD)

* website: https://manjaro.halberd.cn
* github: https://github.com/yunyuyuan/vue3-manjaro-ui
Increase your coding speed 10X with Emmet
Tags: webdev, codenewbie, beginners, css
Published: 2021-05-17 03:35:27

Hi there, welcome to this tutorial. Today, I will be discussing how you can improve your coding speed with a popular plugin called [Emmet](https://emmet.io/).

[Emmet](https://emmet.io/) is a plugin for many popular text editors that greatly improve HTML and CSS workflow.

So let's jump right into how to increase your coding speed with [Emmet](https://emmet.io/).

##Different Emmet Shortcuts that can increase your coding speed

####Child >
When you type :
```
nav>ul>li
```
Emmet converts it to 
```
<nav>
    <ul>
        <li></li>
    </ul>
</nav>
```
">" is used when you need to nest elements within one another

####Sibling +
When you type:
```
header+main+footer
```
Emmets converts it to 
```
<header></header>
<main></main>
<footer></footer>
```
"+" can be used when you need write some elements next to each other

####Multiplication
When you type:
```
ul>li*5
```
Emmet converts it to
```
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```
"*" is used when you need some elements to occur more than once.

####Item numbering: $
When you type
```
ul>li.item$*5
```
Emmet converts it to
```
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
```
When "$" is used, Emmet automatically numbers the elements. Also "." means class, just like in CSS styling.

Thank you for reading thus far.
Would love to know more about the power of Emmet.
[Click Here](https://docs.emmet.io/cheat-sheet/)
Difference Between Methods and Constructors (Java).
Published: 2021-05-17 02:58:43

When you study first time about constructor it almost feels like this is completely equal to Method but no its not. You might be thinking what is the need to use constructor, we use constructor to initialize some value. when we use 𝗽𝗿𝗶𝘃𝗮𝘁𝗲 𝗶𝗻𝘁 𝗮;
in the class the defalut value of a is 0. But lets say if we want the default value of '𝗮' should be 5 then we can achieve that thorugh costructors.

now you might be thinking how will we identify which one is Method and which one is constructor, for that you have to see the name of constructor or method if that is equal to the name of class then it is a constructor else its a method.

also constructor is used to give default value and method is used to do some kind of operations like add();
Host files and static pages from your Terminal.
Tags: python, showdev, cli, bash
Published: 2021-05-17 02:32:12

Hello Everyone, Yesterday I created a web API to host the non-binary files and CLI client for that API. It can host your HTML, JSON, XML, and many non-binary files. All hosted files are encrypted and compressed. 

{% github yogeshwaran01/Instant-Host no-readme %}

## Installation

```bash
$ git clone https://github.com/yogeshwaran01/Instant-Host

$ cd Instant-Host

$ python3 setup.py install
```

## Usage 

Usage of Instanthost is very simple

### Host new page

![Demo](https://raw.githubusercontent.com/yogeshwaran01/Instant-Host/master/assets/demo.gif)

```bash

$ instanthost ~/path/to/file

```

Output is like this

```
✌️  Hosted Successfully ✨

created_at: 05/16/2021, 16:39:56

hosted_at: http://instant-host.herokuapp.com/render/U4uhdM4

mimetype: application/xml

private_key: U4uhdM4bnovt

public_key: U4uhdM4

tiny_url: https://tinyurl.com/yehcy54n
```

### Editing the existing page

You can change the data in the file without causing any issues to link with the secret private key. Store your private key for editing content. 

```bash
$ instanthost ~/path/to/new/file --edit --key <your-private-key>
```

Output is 

```
✌️  Hosted Successfully ✨

hosted_at: http://instant-host.herokuapp.com/render/U4uhdM4

mimetype: application/xml

private_key: U4uhdM4bnovt

public_key: U4uhdM4

updated_at: 05/16/2021, 16:43:34

tiny_url: https://tinyurl.com/yehcy54n
```

Like this, you can host all non-binary type file from your terminal

you can host your simple static web page, blog post and etc ...
Javascript Chapter 3 - Knowing Variables in JavaScript
Tags: javascript, beginners, tutorial
Published: 2021-05-17 01:34:44

Not only in PHP we can find variables called variables, but also JavaScript has variables. The use of variables in javascript is the same as the use of variables in other programming languages. Namely for temporary data storage.

## HOW TO WRITE VARIABLES JAVASCRIPT
What must be considered in writing javascript is, all writing variables in javascript must not contain spaces, must pay attention to writing upper and lowercase letters. For more details, consider the following points.

An important point in writing javascript variables
- Writing variable names can use letters, numbers, underscores, and dollar signs
- Writing variable names must begin with a letter
- Writing javascript variable names must pay attention to uppercase (case sensitive)
- Variable names cannot contain spaces
- Writing javascript variables begins with the syntax "var"

## HOW TO MAKE A JAVASCRIPT VARIABLES
Well, first we prepare the html file, here I named it index.html

![index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofzt7ys1ktamj1joh95z.png)

![result index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3qwdzsacm9e517obmaz.png)

As we saw in the syntax above. I created two variables which I named "nama" and "alamat". Don't forget to put a semicolon or semicolon (;) at the end of the variable line as this is a definition of javascript.

```javascript
var nama = "Nurroin's Blog";
var alamat = "Probolinggo";
```
And then I output the contents of the variable into the nama and alamat elements

```javascript
document.getElementById("nama").innerHTML = nama;
document.getElementById("alamat").innerHTML = alamat;
```

**Note :** ``document.getElementById()`` useful for specifying element by id in accordance with the function parameter. innerHTML to implement HTML syntax.

## CONCLUSION
Variant is a place to store temporary data and the contents of this variable can be retrieved. There are several important points that we should know when using variables in javascript. That is case sensitive, we must pay attention to the upper and lower case letters that we make, we must not precede variable names with letters, etc. as I explained above.
Dark Theme for DBeaver 
Tags: database, editor, theme, dbeaver
Published: 2021-05-17 00:52:30

> Hi there, I'm a newbie here - First ever attempt at blogging, please do provide me your feedback on this post. Thanks.

Theme - *Darkest Dark Theme with DevStyle*

1. Open Help from the DBeaver main menu then click on *Install New Software*

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt7ansfrjhg59zqdo4yi.png)
 
2. Paste site URL(http://www.genuitec.com/updates/devstyle/ci/
 )  for the theme plugin into **Work with** field and click on Add
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqinap3siqsgs8vecg88.png)

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

Enter name as desired.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb4e5kklz074jttjg74k.png)

3. Click on *Select All* followed by the *Next* button.

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

4.Review and Accept extension license before installation.

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

5.Click on Finish and restart Dbeaver

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

After Dbeaver restarts, you would be able to select themes from the list provided from the dropdown. I'm using the *Dark Blue* theme.

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

> You can also change the themes from *Window -> Preferences -> DevStyle*

Do let me know if this worked for you. 
Cheers :P
Solidity programming language
Published: 2021-05-17 00:02:12

If you read my last blog post. In this blog post I would like to make it clear how interested I am into Defi. I have been learning solidity programming language and discovering how this programming language works. 
what I understand about it is that its contracts and that it's a object oriented language for implementing smart contracts. Smart contracts govern the state with the Ethereum.
The programming language is used heavily  amongst smart contracts on Ethereum. It is heavily used with Defi and is worth learning if you are trying to get involved in this space. I started off just curious about Cryptocurrency, but once learning that I can build my own platform made me really want to learn about the programming language. 
This space is still fairly knew, but if you get in now I think you will be exposed to something that is going to change how we save and store our money. Using the blockchain allows your funds to be decentralized and not under the control of the government. This means that you have more control of your funds and can gain more interest on the money that you are saving. The interest rates beats the standard bank system.
I am still learning, but I will keep you updated on my journey!

Happy coding!
LeetCode 719. Find K-th Smallest Pair Distance (javascript solution)

Tags: algorithms, javascript
Published: 2021-05-16 23:23:44

###Description:
Given an integer array, return the k-th smallest distance among all the pairs. The distance of a pair (A, B) is defined as the absolute difference between A and B.

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

```javascript
// Binary search + sliding window
var smallestDistancePair = function(nums, k) {
    nums.sort((a,b) => a-b);
    let lo = 0;
    let hi = nums[nums.length - 1] - nums[0];
    
    while (lo < hi) {
        let mi = lo + Math.floor((hi-lo) / 2);
        // Sliding window
        let count = 0, left = 0;
        for (let right = 1; right < nums.length; ++right) {
            // Keep moving left pointer until we reach a difference between two pointers that is less than mi
            while (nums[right] - nums[left] > mi) left++;
            // Add the amount of pairs in the window to the count
            count += right - left;
        }
        //count = number of pairs with distance <= mi
        if (count >= k) hi = mi;
        else lo = mi + 1;
    }
    return lo;
};
```
Using Power Automate to Start, Stop and Restart Azure App Service
Tags: development, azureappservice, flow, powerautomate
Published: 2022-06-15 17:23:52

---
title: Using Power Automate to Start, Stop and Restart Azure App Service
published: true
date: 2021-05-16 22:18:00 UTC
tags: Development,AzureAppService,flow,PowerAutomate
canonical_url: https://barretblake.dev/2021/05/using-power-automate-to-start-stop-and-restart-azure-app-service/?utm_source=rss&utm_medium=rss&utm_campaign=using-power-automate-to-start-stop-and-restart-azure-app-service
---

There are any number of reasons why you might want to start or stop your Azure App Service based on other factors. And while there are a number of ways to accomplish this, this time we're going to cover how to do it in Power Automate with the press of a single button.

The post [Using Power Automate to Start, Stop and Restart Azure App Service](https://barretblake.dev/2021/05/using-power-automate-to-start-stop-and-restart-azure-app-service/) first appeared on [Barret Codes](https://barretblake.dev).
Creating a Blog Feed on my React Portfolio
Tags: api, blog, react
Published: 2021-05-16 21:59:44

####Another day, another blog! 

In this blog, I will talk about how I displayed my blogs from my [dev.to](https://dev.to/tolentinoel) to my React portfolio website!

The inspiration for writing this blog is from [Ms. Natalie De Weerd's blog](https://dev.to/nataliedeweerd/how-to-use-the-dev-to-api-5gl3) in using the `dev.to` API with PHP to make a blog feed. So, credits to Ms.Natalie for sharing her [blog](https://dev.to/nataliedeweerd/how-to-use-the-dev-to-api-5gl3) on utilizing `dev.to` API!

But if you're here to see it in React, you can first read the docs using the API [here](https://dev.to/api).


###API endpoint###
Next, the endpoint that we're going to use is this;
https://dev.to/api/articles?username=tolentinoel

If you click that endpoint, you can see a JSON object with 12 of my articles in an array! Neat right? *(You can just switch out the username at the end of the endpoint with your username)*

###Import React component
Now we have the endpoint working, we would need to fetch that data to be on our code and manipulate it to our liking. In my case, I wanted my blogs to be in a card component using react-bootstrap.

There are so many ways to display our data, but since I wanted it to be in cards, I imported the Card component from [React-Bootstrap](https://react-bootstrap.github.io/components/cards/)
```JavaScript
import Card from 'react-bootstrap/Card'
```
Then we fetch the data and set it as our state.

```JavaScript  
componentDidMount(){
        fetch('https://dev.to/api/articles?username=tolentinoel')
        .then(res => res.json())
        .then(data => {
            this.setState({ blogs: data })
        })
    }
```
Once the state is set, we can now iterate through each article and create a card component in the DOM per blog.

![Card component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1s8tj92nbxq7f8fc5qp.png)

I have tried having it displayed all of my blogs, but since I wanted more of a snippet of my most recent ones, I decided to use *slice* and only show the 4 recent ones (As you can see on the first line of code above).

And after a few CSS adjustments, here's a preview of my finished product!

<img src="https://media.giphy.com/media/kuhoZ7d95NkmJHRTmV/giphy.gif" />

Want to see it live? Here's my portfolio! [Ellaine.dev](http://ellaine.dev/)

I hope this was easy to follow and gave you an insight into using `dev.to` API to your React app!
How do you optimizing recursive functions
Tags: recursive, functions, python, bigo
Published: 2021-05-16 21:34:22

## Let's remember
Recursive functions, a common topic when you are studying your career, like informatic engineer o related careers, but it's even more common learn only the fundamental: 

> A recursive function is when the function call itself for reduce a big problem to another each more small until reaching a base case. 

A classic example is calculate the factorial of a positive number:

```python

def factorial(n):    

    if n == 0:
        return 1
    
    return n * factorial(n - 1)

print(factorial(4))

```
### The bad
The compiler needs to stack each recursive function called in the call stack, until find the base case. Then, return to resolve each **pending operation** that left in the call stack:

```plain

# call stack simulation:
factorial(4)
  4 * factorial(3)
    3 * factorial(2)
      2 * factorial(1)
        1 * factorial(0)
          return 1
		    1 * 1 -> return 1
	    2 * 1 -> return 2
    3 * 2 -> return 6
  4 * 6 -> return 24

>>> 24

```
The above implementation could be easy to overflow the call stack with big numbers.

## Tail recursion
This is the part that ommited in many case when are talking about recursion. Exist a way to optimizing the recursive functions and the tip is: **Not leave pending operations** when your call the function on mode recursive. 

Now, let's optimice the above example:

```python

def factorial(n, acum=1):
    
    if n == 0:
        return acum

    return factorial(n - 1, acum * n)

print(factorial(4))

# >>> 24

```
### What changed?
The new `acum` variable help as an accumulator for the calculation of the factorial. Next, compare the return statement of the functions:
- Not optimized example: `return n * factorial(n - 1)`
- Optimized example: `return factorial(n - 1, acum * n)`

> You need to find a way for not leave pending operations if you want tail recursion.

With the recursive funtion optimized, the compiler doesn't need to stack each recursive function called, only change the value of the entry parameters function and execute until the base case is true:

```plain

# call stack simulation:
factorial(4, 1)
factorial(3, 4)
factorial(2, 12)
factorial(1, 24)
factorial(0, 24)
return 24
>>> 24

```
There is no more fear that the call stack overflowed.

### Support for tail recursion
Unfortunately, not all programming language support tail recursion in your compiler/interpreter. [Python is one of them](http://neopythonic.blogspot.com/2009/04/tail-recursion-elimination.html), but there are some [libraries](https://pypi.org/project/tail-recursive/) that help to simulate this behavior with decorators. 

[This article](https://en.wikipedia.org/wiki/Tail_call) on Wikipedia list some programing languages that support tail recursion.

Anyway, it's fun to see how we can improve the algorithmic complexity of a program and I hope you enjoyed it too.

Thanks!

Follow me on [Twitter](https://twitter.com/victorhtorres).
Useful JavaScript Links
Tags: javascript
Published: 2021-05-16 21:25:38

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

It is a project I am trying to list the repos that have received thousands of stars on Github and deemed useful by the JavaScript community.

It's a gihub repo that I think might be useful for people who are resource-hungry while running JavaScript, or people who are not aware of these good resources.

I think it can be a good content for those who want to find topics such as Repos, Books, YouTube Playlists, Best Practices, Style Guides, Design Patterns, Tests, Concepts, Project Guidelines under one roof.

I hope it will be useful for many people to practice learning javascript.

You can add links that you think are missing by opening PR, I would be very happy about that.

I would be glad if you add the issues I am missing or the points you see incorrectly as a comment.


Source Code : https://github.com/cihat/javascript
URL: https://cihat.github.io/javascript/
First step towards Blazor goodness
Tags: blazor
Published: 2021-05-16 14:22:45

As a learning activity, I wanted to work with Microsoft framework called Blazor (combination of two technologies, Browser and Razor). Blazor is based on W3C standard called "WebAssembly".

>As per W3C, "WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications"

Looking at the formal description from W3C above, one can list following characteristics of wasm

* It is a binary instruction format for a virtual machine. Similar to single physical machine hosting multiple virtual machines(VMs), multiple wasm software modules can be hosted in single browser
* wasm is a portable target indicating any wasm module can run on multiple browsers (like chrome, firefox, edge) on multiple OSs without any modifications/recompilations
* wasm is target for compilation of high-level languages like C/C++/Rust, indicating developers can use any high-level language for development as long as it produces software module adhering to wasm binary instruction format
* wasm software modules can be run at client and server and this opens up possibilities for code sharing

Following are major features of Microsoft provided blazor framework.

* Component model for UI development using razor based syntax
* Routing, Forms and validations
* Dependency injection
* Javascript interop for exchanging data+messages from javascript to DOTNET and vice versa
* NET standard 2.0 compliant namespaces, APIs and services that allow code sharing between client and server
* Server-side rendering for SEO and quick first page load
* Mono based runtime to run software modules developed using DOTNET framework
* Ability to run on older (non-WebAssembly) browsers via asm.js

For details about Microsoft version of wasm and blazor, you can follow below articles and websites

* [blazor-university](https://blazor-university.com/): All things blazor
* [Blazor server -vs- client comparison](https://www.programmingwithwolfgang.com/blazor-server-vs-blazor-webassembly/): Comparison between client side and server side blazor in simple language

I will discuss more details about blazor in future articles
Bitcoin source code guided tour, really helpful if you're studying blockchain tech
Tags: blockchain, bitcoin, cryptocurrency, learn
Published: 2021-05-16 20:49:00

Very good series that takes you into a good guided tour inside the bitcoin source code, the tour is hosted by a crypto coin engineer Oscar. Share it if you find it useful.

Link
https://www.youtube.com/watch?v=duAcEElZpNk&t=305s