teleren/devto huggingface dataset:
Rossetta Code
Tags: webdev, productivity
Published: 2020-05-03 09:09:19

In the past 2 weeks I have successfully (stumbled across) used this website to port parts of algorithms that I understand I will need but don't have the time to figure them out, (its not all good but it gives you some idea). Rossetta code contains lots of implementations of the same stuff in various languages. I use the Lua examples as they tend to port reasonably well to JavaScript.

(... apart from Lua is 1 indexed, .. means + and words replace oporators and braces,  so you have to know the language a little.)

check it out.
https://rosettacode.org/wiki/Category:Programming_Tasks
Understanding Blocks in Ruby
Tags: ruby, tutorial, beginners, rails
Published: 2020-05-03 09:05:55

One of Ruby's defining features is a block. A block can either be surrounded by `{` `}` or `do` `end`.

```ruby
# Use { } for single line commands
3.times { puts "Hello"}

# Use do end for multi line commands
3.times do
  puts "Hello"
end
```

The key to understanding blocks is the `yield` keyword. We use the `yield` keyword in our method definition to defer to the block of code that was passed in.

Let's take a closer look by implementing our own version of the `times` method.

```ruby
def my_times
  yield
  yield
  yield
end
```

We can call this method with a block and it will execute the block three times.

```ruby
my_times { puts "Hello" }
```

We can do better. Let's define a `my_times` method for all instances of `Integer`.

```ruby
class Integer
  def my_times
    i = 0
    while i < self
      yield
      i += 1
    end
  end
end

```

Now we can call our `my_times` method on an instance of `Integer` just like the original `times` method.

```ruby
3.times { puts "Hello" }
3.my_times { puts "Hello" }
```

We can pass in arguments to a block as well. We might have seen this with the `each` method:

```ruby
[1, 2, 3].each { |x| puts x }
```

We can write our own `my_each` method like the following:

```ruby
class Array
  def my_each
    i = 0
    while i < self.length
      yield(self[i])
      i += 1
    end
    self
  end
end
```

```ruby
[1, 2, 3].each { |x| puts x }
[1, 2, 3].my_each { |x| puts x }
```
My personal portfolio site. Some feeback / tips?
Tags: javascript, webdev, career
Published: 2020-05-03 09:02:23

I have recently created by web portfolio, it is not responsive suitable for desktops ,can any one review it and help me to prefect it,so that I can use it for my job interviews.
[Web portfolio link](https://sridhar02.netlify.app)


Thanks in advance
Understanding Kubernetes: part 17 – Useful tools - part 3
Tags: kubernetes, devops, docker, beginners
Published: 2020-05-03 08:30:40

---
title: Understanding Kubernetes: part 17 – Useful tools - part 3
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7nbkqdj2mm67idyygp2z.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with some useful tools to know.
In this third part we will see: Kustomize.

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

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
How JavaScript Works: Web APIs, Callback Queue, and Event Loop
Published: 2020-05-03 07:52:41

Hello everyone 👋, I hope you are doing great.

> So, In the previous article, we learned about **Google's V8 Engine**, **Heap Memory**, and **Call Stack**. {% post https://dev.to/bipinrajbhar/how-javascript-works-under-the-hood-an-overview-of-javascript-engine-heap-and-call-stack-1j5o %}

In this article, we will learn about **Web APIs**, **Callback Queue**, and **Event Loop**.

##🌐 Web APIs
The Web APIs are provided by the web browser that gives additional functionality to the V8 engine.

The Web API calls are added to the Web API Container from the Call Stack. These Web API calls remain inside the Web API Container until an action is triggered. The action could be a **click event** or **HTTP request**, or **a timer finishes its set time**. Once an action is triggered, a callback function is added to the Callback Queue.

##🧑‍🤝‍🧑 Callback Queue
The Callback Queue is a [FIFO](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) data structure.

The Callback Queue stores all the callback functions in the order in which they are added.

##♻️ Event Loop 
What happens when you have function calls that take a large amount of time to execute in the Call Stack?

For example
* Executing a for loop from 1 to 10B
* Making a network request
* Doing image processing

Let's take an example.
{% gist https://gist.github.com/bipinrajbhar/afdae6e392acb8a6d88deaafbc49d57f %}

Synchronous Code Visualization
![blocking](https://res.cloudinary.com/dqhskqqa6/image/upload/v1588414062/V8%20Engine/odkqyfqb5aashbygheme.gif)

You may ask why this is a problem? The problem is when the Call Stack has a function to execute, the browser cannot do anything else because it is blocked.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1588488812/V8%20Engine/qhfnqhtxbv72sc0ymzda.gif)

The solution is an asynchronous callback, promises, and async / await.

Let's take an example.

{% gist https://gist.github.com/bipinrajbhar/6f5c278862b8c017616f7b72df86e2f5.js %}

Asynchronous Code Visualization
![blocking](https://res.cloudinary.com/dqhskqqa6/image/upload/v1588414062/V8%20Engine/dyloryy5xtyv24pdvkjh.gif)


> **The Event Loop has only one simple job to do. It looks at the Call Stack and Callback Queue, if the Call Stack is empty, it pushes the first callback function of the Callback Queue to the Call Stack.**.

I hope now you have a **good** understanding of how JavaScript works.

In the next article, we will learn how V8 compiles our JavaScript code.

##📚 Resources
[What the heck is the event loop anyway? | Philip Roberts | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=967s)

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/Bipin_1598) if you’d like to be notified about new articles and resources.
37: Why do we need a Database
Published: 2020-05-03 06:48:41

A database is a collection of data, usually stored in electronic form. A database is typically designed so that it is easy to store and access information.

--- 
###**The various reasons a database is important are:**

* Manages large amounts of data
A database stores and manages a large amount of data on a daily basis. This would not be possible using any other tool such as a spreadsheet as they would simply not work.

* Accurate
A database is pretty accurate as it has all sorts of build in constraints, checks etc. This means that the information available in a database is guaranteed to be correct in most cases.

* Easy to update data
In a database, it is easy to update data using various Data Manipulation languages (DML) available. One of these languages is SQL.

* Security of data
Databases have various methods to ensure security of data. There are user logins required before accessing a database and various access specifiers. These allow only authorised users to access the database.

* Data integrity
This is ensured in databases by using various constraints for data. Data integrity in databases makes sure that the data is accurate and consistent in a database.

* Easy to research data
It is very easy to access and research data in a database. This is done using Data Query Languages (DQL) which allow searching of any data in the database and performing computations on it. 

[LEARN DATABASE](https://www.tutorialspoint.com/Why-do-we-need-a-Database)
36: Daily Challenges 
Tags: challenge
Published: 2020-05-03 06:25:22


I am a traveler, my travel-spirit built who I am, and, since I discovered the beauty of mathematics and programming, I keep challenging to make myself think like a computer. JavaScript is changing, then, I was thinking it might not be a good idea to learn to code by myself, I value that programming is learning how to cooperate with other people, too. And, I am ready to open my idea and solve problems together. In order to step down the new marathon, there should be prepared. Whether I succeed or not, I want to try my best, and, make a decision at that time. I think it is worth to challenge something you love once in your lifetime and have no regret. 

--- 
*Studying Programming completely changed my life, Following what I love was right for me, and it makes love myself, as I am, Because, Algorithm is a mirror of myself, I don't have to be perfect, I have to be myself while solving problems, Isn't that really cool?*

--- 

##**My solution is focusing on 'Dailly Challenges' next to 100days.** 

1. Breaking the fear of making my logic
2. To specify how I approach and get close to computational thinking
3. Encode to solve algorithm problems
4. Am I going to be ready to study lovely data structures? YES
Javascript Variables in a nutshell
Tags: javascript, webdev, tutorial, showdev
Published: 2020-05-03 06:10:48

Initialization of variable is very easy we simple declare `var` keyword followed by the variable name.

### Example
```javascript
var name="Rakesh";
```
Variable created with the name `name` it has **Rakesh** as data stored in the variable `name`. Similarly, we'll be looking at some more examples.
```javascript
var student_name="Lohit";
var roll_no=10;
var total_marks=126.5;
```
We can also declare multiple variables in a single line we just need to separate them using comma and end with a semicolon.
```javascript
var student_name="Lohit", roll_no=10, total_marks=126.5;
```
Variable declare with no initial value has to value `undefined`. ![Javascript variable is undefined](http://thecodelearners.com/wp-content/uploads/2020/04/variable-undefined-300x169.jpg)

> Javascript variable is undefined

The `undefined` in a reserve-word, in javascript, that means the variable is declared but the value is not defined.

Naming Conventions of Variable
------------------------------

*   Variable must not have any special characters except underscore.
*   If a variable name is long then underscored is used to separate the words.
*   Example : `student_name`, `permanent_address` etc.
*   Empty spaces between names are not allowed.

New Standard of Variable declarations or EcmaScript Variable declarations
-------------------------------------------------------------------------

EcmaScript also called as ES in short sets the standard for javascript. Time to time it will introduce new concepts to Javascript. Till now we know that through `var` we can define variables. But there are also types of variables such as Global, local and constants variables. EcmaScript has introduced `let` and `const` keyword through which we can also declare variables.

Declare using `let`
-------------------

Variable declared using `let` keyword specifies block-level scope or local variables. These can be accessed inside a function block which outputs an error if called outside of their scope.
```javascript
let car="volvo";
car="BMW";
```
We have initialised `car="volvo"` and updating the value of the variable `car="BMW"`.

Declare using `const`
---------------------

Variables declared using `const` cannot be updated like regular variables. They are constants and variable must be declared and initialised once. If not then `Uncaught SyntaxError: Missing initializer in const declaration` the error will be given.
```javascript
const y
VM1085:1 Uncaught SyntaxError: Missing initializer in const declaration //error
const x = 10; //this is correct way
```
I’ve included a whole chapter on [using variables in javascript](http://thecodelearners.com/javascript-variables/).
Use react hook in HOC with passed params
Tags: react, javascript
Published: 2020-05-03 06:01:48

I am trying to create HOC and use custom react hook inside. Also in order to use hook I need to pass paras to HOC, but I get error for use hook only in function body. My HOC is:

    export const withUseAxisTranslate = (props) => {
      const [t] = useAxisTranslate(props.namespace);
      return (WrappedComponent) => (moreProps) => <WrappedComponent {...moreProps} t={t} />;
    };
My call to it is:

    compose(
      withWidth(),
      withUseAxisTranslate({ namespace: 'header' }),
    )(MyComponent);
    
The error I got is: 

Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I have no idea why I get this error since I do not use classes here
Thanks for help
The HTML5 Full-Screen API
Tags: html, video
Published: 2020-05-06 17:27:11

---
title: The HTML5 Full-Screen API
published: true
date: 2020-05-03 06:00:23 UTC
tags: html5, video
canonical_url: https://www.ma-no.org/en/programacion/the-html5-full-screen-api
---

The Fullscreen API allows a DOM element (and its descendants) to be represented in full screen. What it allows is to visualize the page by removing any element of the browser (menus, tabs,...). With this we can put from the document itself to full screen, video elements, images,...Fullscreen API methodsThe first thing we need to know is the methods that allow us to handle the Fullscreen API.

[Read full article](https://www.ma-no.org/en/programacion/the-html5-full-screen-api)
Subtle Differences
Published: 2020-05-03 05:31:35

In the United States people say "hello", in France people might say "bonjour".  Programming languages seem to have the same nuance.  Just as different languages might have the same way of saying "hello", programming
languages have different ways of achieving the same results.

For example, in Ruby to declare an array one can easily give the instruction
```
name_of_my_array = []
```
In C++ things are a little different.  C++ has an array, but the size must be declared at the time of declaration, as well as the variable type.  So if you wanted to create an array with five locations of integers, it would be done like so:
```
int name_of_my_array [5];
``` 
The same little differences can be found in Ruby and R.  In Ruby, as with many popular languages, assignment is done with an equals sign.
```
name_of_my_variable = "string"
```
Where as in R, assignment can be done with an arrow.
```
name of my variable <- "string"
```
With learning new languages there's a sense of security in the knowledge that while you may have to learn new ways of doing something, the things you do always seem the same.
Quick list / feed scraping in the dev console
Published: 2020-05-03 05:01:27

![Scraping list data in the dev console](https://media.giphy.com/media/WRdUx1XYa0i4UPxLxa/giphy.gif)

```javascript
// function to create array of elements from an xpath
let xeval = (s, each = e => e) => { 
  const iter = document.evaluate(s, document, null, XPathResult.ANY_TYPE, null );
  const elems = []
  while(elem = iter.iterateNext()) {
    elems.push(each(elem))
  }
  return elems
}
```

I was recently helping someone scrape app reviews and came across this tip. This will work to scrape any list / feed of elements.  

### The Problem  
A lot of sites generate class names on page load, so you can't always use class names / id's to pull page data. The solution is to use [XPATH](https://developer.mozilla.org/en-US/docs/Web/XPath). I was surprised by how easy this is!

+ Scroll down the page a bit and choose an element you want to scrape

+ Inspect the element and copy it's XPath

`right click element in dev window -> copy -> XPath / full XPath` 

+ it will look like:
    `'.../div/div[10]/div/div[2]/div[1]/div[1]/span'`
 
+ by deleting '[10]' all like elements will be selected 

+ use the XPath to select the page elements

And that's it! 

Here's the code  
 
{% gist https://gist.github.com/swkidd/c708735b30f50f09fc4703271972c52f %}
Binary Search Tree
Tags: javascript
Published: 2020-05-03 04:07:21

To understand what a binary search tree is, we should first go over the tree data structure. 

Tree is a hierarchical or nonlinear data structure. It is a collection of elements, called nodes, that are linked to each other. Each node has two pieces of information: 1. the data value itself and 2. a pointer that references other nodes.

Each tree has a root node, which can have zero or more child nodes. The child nodes make the root node a parent node. Each of those child nodes could have their own child nodes and so on.  It is therefore possible for a node to be both a child and a parent at the same time. Two child nodes that are next to each other are called siblings. Any node that does not have a child is a leaf. 

![tree](https://www.tutorialspoint.com/data_structures_algorithms/images/binary_tree.jpg)

A binary tree is a type of tree where each node has a maximum of 2 children.

A binary search tree is a type of a binary tree that naturally stays sorted because it follows this rule:

- Every left child always be less than its parent
- Every right child always be greater than its parent

![BST](https://raw.githubusercontent.com/Urfan196/MyFIles/master/BST.png?token=AMQWY7ATGTGPCFWRZE5HLX26VZA4W)

BST is balanced when its left and right subtrees have roughly the same amount of nodes. Otherwise it will be unbalanced.

If the left and right side of a BST have exactly the same number of nodes, then it is a perfect tree, which is actually quite rare. 

![Balanced vs Unbalanced](https://raw.githubusercontent.com/Urfan196/MyFIles/master/2..png?token=AMQWY7FFNRSAFPMCGMF455K6VZBBO)

```javascript
class Node {
  constructor(value) {
    this.value = value
    this.left = null
    this.right = null
  }
}

class BST {
  constructor(value) {
    this.root = new Node(value)
    this.count = 1
  }

  size() {
    return this.count
  }

  insert(value) {
    this.count++

    let newNode = new Node(value)

    const searchTree = node => {
      // if value < node.value, go left
      if (value < node.value) {
        // if no left child, append new node
        if (!node.left) {
          node.left = newNode
        } 
        // if left child, look left again
        else {
          searchTree(node.left)
        }
      }
      // if value > node.value, go right
      else if (value > node.value) {
        // if no right child, append new node
        if (!node.right) {
          node.right = newNode
        }
        // if right child, look right again
        else {
          searchTree(node.right)
        }
      }
    }

    searchTree(this.root)
  }
}
```
macOSでRISC-V版FedoraをQEMUで起動する
Tags: riscv, linux, qemu, macos
Published: 2020-05-03 03:25:29

macOS上のQEMUでRISC-V版Fedoraを動かしてみた。ビルド済みバイナリは下記から取得できるものを使用。
- [https://fedorapeople.org/groups/risc-v/disk-images/](https://fedorapeople.org/groups/risc-v/disk-images/)

# 実施環境

- macOS Catalina 10.15.4
- brew導入済み

# 手順

HomebrewでQEMUを導入する。

```sh
$ brew install qemu
```

ワークスペースに移動し、Linuxカーネル、ブートローダ、Fedoraディスクイメージをダウンロードする。

```sh
$ cd ~/workspace
$ mkdir risc-v-fedora
$ wget https://fedorapeople.org/groups/risc-v/disk-images/vmlinux
$ wget https://fedorapeople.org/groups/risc-v/disk-images/bbl
$ wget https://fedorapeople.org/groups/risc-v/disk-images/stage4-disk.img.xz
$ xzdec -d stage4-disk.img.xz > stage4-disk.img
```

以下のコマンドでQEMUを起動する。

```sh
$ qemu-system-riscv64   \
    -nographic \
    -machine virt \
    -kernel bbl \
    -object rng-random,filename=/dev/urandom,id=rng0 \
    -device virtio-rng-device,rng=rng0 \
    -append "console=ttyS0 ro root=/dev/vda" \
    -device virtio-blk-device,drive=hd0 \
    -drive file=./stage4-disk.img,format=raw,id=hd0 \
    -device virtio-net-device,netdev=usernet \
    -netdev user,id=usernet,hostfwd=tcp::10000-:22
```

ユーザ名は`root`、パスワードは`riscv`でログインする。

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

ホストのmacOSからSSHで接続もできる。

```
$ ssh -p 10000 root@localhost
```
DNSレコードの種類
Tags: dns, network
Published: 2020-05-03 03:22:46

DNSレコードとは、DNSを動作させるための設定情報のこと。DNSサーバは、ドメイン名とIPアドレスの対応表である「ゾーンファイル」を保持しており、このファイルに記載されている1行ごとの詳細情報をDNSレコードと呼ぶ。
このゾーンファイル設定では、「レコードタイプ」と呼ぶ情報の種類に応じてDNSレコードを記述する。レコードタイプのうち、Vercelで購入したドメインに対して`now dns ls`実行時に表示されるものを次に示す。

- A(Address)レコード
  - ホスト名に対応するIPアドレスを定義する
  - 例えば、独自ドメインでGitHub Pagesを公開する際に使用する
- CNAMEレコード
  - ドメインやホスト名の別の名義を定義する
  - 例えば、www付きドメインからwww無しドメインに転送する際に使用する
- TXTレコード
  - ホスト名に関連付けるテキスト情報を定義する
  - 例えば、Google Search Consoleにドメインプロパティとしてドメインを登録する際に使用する
- MXレコード
  - メールの転送先(メールサーバ)のホスト名を定義する
- CAA(Certification Authority Authorization)レコード
  - SSL/TLSサーバ証明書を発行できる認証局(CA)を指定する
How do you plan your career path?
Tags: discuss, career, growth, advice
Published: 2020-05-03 03:10:44

---
title: How do you plan your career path?
published: true
description: What advice would you offer to developers on career planning?
tags: discuss, career, growth, advice
---

As developers, we can theoretically transition into other technical roles, as well as non-technical (or less technical) roles as jobs evolve with the companies we support. Over time, we can choose to specialize - and the more segmented the tech industry becomes, the more it seems to encourage specialization. For those of us who have many interests, specialization can be difficult to consider.

Questions for discussion:
* How do you define your career path?
* What do you look for in a career?
* How do you choose between many different things that interest you?
* What advice would you offer to developers exploring paths to follow?