teleren/devto huggingface dataset:
Build a React component that displays the current Bitcoin price
Tags: react, tutorial, webdev
Published: 2020-07-27 03:30:26

[CodePen Demo](https://codepen.io/michaelburrows/pen/qBbwyvM) | [Original Article](https://www.michaelburrows.xyz/react-component-bitcoin-price/) 

Learn how to build a React component that fetches the current Bitcoin price from an API.

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

To complete this tutorial we’ll be working with the following files:

```
├ BitcoinPrice.js
├ BitcoinPrice.css
├ bitcoin-logo.png
```

You can download a free Bitcoin logo to use from [icons8.com](https://icons8.com/icons/set/bitcoin).

Let’s start by setting up the imports in our BitcoinPrice.js file:

```javascript
import React, { Component } from "react";
import logo from './bitcoin-logo.png';
import "./BitcoinPrice.css";
```

After the imports we’ll create a React class based component with the following methods:

```javascript
class BitcoinPrice extends Component {
    constructor() {      
      // STEP 1 
    }
    
    componentDidMount() {
      // STEP 2
    }
  
    render() {
      // STEP 3
    }
  }
  
export default BitcoinPrice;
```

##STEP 1

Inside the `constructor()` we’ll define the default state for “loading” and “price”:

```javascript
super();
this.state = {
  loading: false,
  price: {}
};
```

##STEP 2

Inside `componentDidMount()` we’ll being using the vanilla JavaScript `fetch()` method.

The API used here (https://blockchain.info/ticker) is free and no access token is required:

```javascript
this.setState({ loading: true });
fetch("https://blockchain.info/ticker")
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("NETWORK RESPONSE ERROR");
    }
  })
  .then((data) => {
    console.log(data);
    this.setState({
      price: data.USD,
      loading: false,
    })
  })
  .catch((error) => this.setState({ error, loading: false }));
```

If the `fetch()` was successful you should see the following in the browser console:

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

The data contains the Bitcoin price for a number of different currencies, in this example we’ll be using USD.

##STEP 3

Inside the `render()` method add the following:

```javascript
const { loading , price } = this.state;
const output = loading ? "LOADING..." : "$"+price.last;
return (
  <div className="btc">
    <img className="btc-logo" src={logo} alt="Bitcoin" />
    <span className="btc-price">{output}</span>
  </div>
);
```

`const output` checks if loading is true and displays “LOADING…”, otherwise it’ll display the Bitcoin price.

To complete the component add the following CSS to the BitcoinPrice.css file:

```css
.btc {
  background-color: darkcyan;    
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}
.btc-logo {
  height: 25px;
  margin-right: 5px;
}
.btc-price {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: sans-serif;
}
```

Thanks for reading, and I really hope you enjoyed this tutorial.
Eligent navigation menu with just pure HTML CSS 💦
Tags: codepen, html, css, uiweekly
Published: 2020-07-27 03:23:44

Hi coding people 👋 Hope you all doing well 🌼🌱🌲

In this Dev post, you will learn how to make a beautiful 💋👄 navigation menu with just HTML and CSS you don't need to know any of the Javascript code.

So check this codepen 🧉 in which you will see the entire code and you can freely play around with this code to understand it very well. 🍭

{% codepen https://codepen.io/atulcodex/pen/MWKPNWN %}
อวสาน Library Lazy Load เพราะมันกำลังจะกลายเป็น Native
Tags: webperf
Published: 2020-07-27 03:20:22

ที่ผ่านมา สาย Optimize หรือ คนทำเว็บที่มีรูปเยอะๆ ก็มักที่จะใช้เทคนิค Lazy load กันทั้งนั้น ซึ่งต่างคนต่างก็จะมี Lib ที่ตัวเองถนัดต่างกันออกไป ตัวที่น่าจะฮิตที่สุดก็คงไม่พ้น ตัวนี้
{% github verlok/vanilla-lazyload %}

ซึงทุกคนก็คงรู้ว่า การใส่ Lib JS เข้าไป ถึงแม้จะทำให้ รูปโหลดเร็วขึ้น แต่เราก็ต้องแลกกับการมี Lib หนึ่งตัว ติดอยู่ใน Code ของเรา แต่เรื่องนี้มันกำลังจะจบลงในอีกไม่นานนี้ครับ เพราะว่า lazyload ที่เป็น native กำลังจะ Support ทุก Browser แล้ว!!!!!!
![Current Browser Support](https://caniuse.bitsofco.de/image/loading-lazy-attr.png)

ตอนนี้ก็เหลือแค่ Safari เอา Feature นี้ออกจาก Experimental เท่านี้ เราก็จะใช้ LazyLoad ได้โดยไม่ต้องใช้ Lib อะไรแล้ว ส่วนใครที่สงสัยว่ามันใช้ยังไง วิธีก็ง่ายมากๆครับ เพียงแค่ เขียน Attribute loading=”lazy” ไว้ใน tag image หรือ Iframe ก็สามารถใช้งาน lazyload ได้เลย
```
<img src="https://example.org/image.jpg" width=”300” height=”200” loading=”lazy”>
<iframe src="https://example.org/" width=”300” height=”200” loading=”lazy”>
```
มีอยู่นิดเดียวที่ต้องรู้ก็คือ Image ที่จะใส่ Lazy load ต้องกำหนด ขนาดให้มันนะครับ ไม่อย่างนั้น Lazyload จะไม่ทำงานครับ

แล้วพอ feature นี้มันกลายเป็น Native เวลาที่ Browser Optimize อะไรก็จะส่งผลให้ Feature นี้ ทำงานได้ดีขึ้นไปอีกโดยที่เราไม่จำเป็นต้องไปปรับแต่งอะไรอย่างเช่น Chrome ที่มี Feature นี้มานานมากๆแล้ว ก็ได้ Optimize Feature นี้ไปบางส่วนแล้วเหมือนกัน
{% twitter 1284020009350701057 %}

ก็เอาว่าใครยังไม่เคยลองใช้ก็ไปใช้ดูครับ ของดีๆที่ใช้ง่ายๆ
Standardized way to sort a JSON array?
Tags: javascript, discuss, json
Published: 2020-07-27 02:48:24

I know it can be very simple in Python.

```python
sorted(arr)
# or sorted(arr, key=key_getter_fn)
```

But what about JavaScript where JSON originated, or other programming languages (especially static-typed ones)?

If you don't know yet, in JavaScript, [`Array.prototype.sort` sorts lexicographically if compare function is not defined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).

```javascript
var array1 = [1, 30, 4, 21, 100000, '3', '5', undefined, null, undefined];
array1.sort();
console.log(array1);
// output:
[1, 100000, 21, '3', 30, 4, '5', null, undefined, undefined]
```

Of course, I can write a few lines of code, or import a JavaScript file, but how standard is it?

{% gist https://gist.github.com/patarapolw/493c4e9e64d144533a6dad805ed7c3bf file=sort.ts %}

The usage is as simple as

```javascript
var array1 = [1, 30, 4, 21, 100000, '3', '5', undefined, null, undefined]
sorted(array1)
console.log(array1)
// output:
[null, 1, 4, 21, 30, 100000, '3', '5', undefined, undefined]
```

Why isn't one in the standard library, really?
Codecademy Data Science Course Part III
Tags: sql, python, datascience, database
Published: 2020-07-27 02:31:45

# Another Part of the Course Down...
Hello and welcome to part 3 of this series of posts on the Codecademy Data Science course. This post will talk about two of the modules that I was able to complete. Both modules are still a part of the SQL course. One is project based, the other falls in the Intermediate SQL section.

## Queries Projects and Applications
This module is all about completing SQL projects. They give real-world exercises that pertain to actual on the job tasks you would be asked to accomplish. For example one of the tasks is to help the finance department identify potentially risky transactions before they are processed. I enjoyed this section a lot. As I have noticed with what I also do on a day to day basis these days at work these projects are on par with requests you will get asked weekly or even sometimes daily. It was a lot of fun going through these project based exercises. They aren't necessarily step by step but they also don't give you a whole list of tasks at once and expect you to figure it out. Just like you will be doing in the real world the projects are broken down into smaller tasks that by the end make up the full task you would be asked to do. 

## Aggregate Functions
This is the intermediate portion of the SQL section. For those of you new to SQL coming from a programming background with any language from Python to C you should be used to functions. In SQL you won't necessarily be writing custom functions as you will more likely be using the built in *aggregate* functions. These are *COUNT()*, *AVG()*, and *SUM()* to name a few. You will also be using more advanced concepts like *GROUP BY* and *HAVING* clauses with your queries. This section is really awesome as it helps break these concepts down and gets you using them right away. You get to see the full power of these functions and how they can make your queries that much stronger when looking for exact data. 

A side note for those of you that either don't know or, were like me at one point, thought that SQL wasn't a real language this section will teach you that functions exist in SQL and they do make your life easier just like they do in other "real" languages. If you are new to programming in general starting your programming journey with SQL will make it a bit easier to transition to a language like Python as it reads like plain English but also helps with the logical side of programming.

# Conclusion
I know this was again a bit short but I don't want these to drag on and on. Hope you enjoyed the read and as I've said before the SQL course on Codecademy is free and I highly recommend it for anyone starting their programming journey for the first time or that wants to get into Data Science as you are going to need to know how to query data in a database as well as read data. Enjoy!
How does database indexing work?
Tags: explainlikeimfive, database, computerscience
Published: 2020-07-27 02:04:40

Especially for non-equality comparisons; and sorting.

If it is equality; maybe it is like a sorted hashtable? Not that I know much about how hashtable work...

But what about `more than`, `less than`, `string startsWith`, `string endsWith`, `string contains`, `string case-insensitive operations`? What are possible ways to optimize this (probably on write)?
Java 10 에서 var 재대로 사용하기 2탄
Tags: java, korean, var
Published: 2020-07-27 01:51:33

내가 [예전 포스트](//dev.to/composite/java-10-var-3o67) 에서 `var` 문을 재대로 다루는 방법을 공유했었다.

만약에 이게 다라고 생각했으면, 굳이 `var` 문을 쓸 필요가 없을 것이다.
자, 내가 또 제시할 것이 생겼다. 이정도면 `var` 문 쓸 때 매력이 생길 것이다.

## 제네릭

자바 7에서부터 제네릭 선언 시 간결하게 선언하는 다이아몬드 연산자가 생겼다.

```java
List<String> strList = new ArrayList<>();
```

그렇다면 이걸 `var` 로 줄이면?

```java
var strList = new ArrayList<String>();
```

그렇다. 안타깝게도 var 는 제네릭 타입을 추론할 수 없기 때문에 다이아몬드를 못 쓰고 명시적으로 제네릭을 선언해 줘야 한다.
물론 글자 수는 좀 작아지지만, 그래도 딱히 매력이 없다.
하지만, 제네릭 타입이 명확한 메소드를 제공한다면 이야기는 달라진다.
스프링을 많이 썼다면 JSON을 다루는 Jackson도 다루어 봤을 것이다.
여기서 `var`에 진가가 드러난다.

```java
var mapper = new ObjectMapper();
var myData = mapper.readValue(jsonString, mapper.getTypeFactory().collectionType(List.class, String.class));
```

이렇게 하면 `myData`의 타입 추론 결과는 바로 `List<String>` 이 되시겠다.
사실 제네릭 속 제네릭은 자바의 개같은 객체 소멸(Type Erasure) 때문에 정의와 선언이 엄청나게 까다롭다. 특히 `Collection` 계열이나 `Map` 을 많이 쓸 때 제네릭 때문에 의도한 코드가 이상하게 동작하지 않거나 컴파일 오류를 뱉거나 하는 등의 막히는 일도 일상다반사.
그래서 몇몇 라이브러리는 이런 불편함을 해소시켜줄 제네릭 헬퍼를 제공하는데, 그나마 가장 많이 쓰는 Jackson 을 예로 든 것이다.

하지만 안타깝게도 이런 식은 안 된다.

```java
var emptyList = Collections.emptyList();
```

제네릭 타입이 모호하기 때문이다. 물론 런타임에서는 이게 무슨 의미냐 싶겠지만 컴파일러는 안타깝게도 받아주지 않는다. 그래서 아래처럼 해야 한다.

```java
var emptyList = Collections.<String>emptyList();
// 아래와 같다
List<String> emptyList = Collections.emptyList();
```

## `return` 변수

물론 `int` 나 `String` 같은 간단한 타입이라면 기존 방식이 오히려 명확하겠지만, 복잡한 클래스나 제네릭이 들어갈 때 `return` 값이 확실하다면, `var`를 쓰는 게 유리하다. 예를 들면,

```java
public ConcurrentMap<String, Person> getPersonMap() {
  var result = new ConcurrentHashMap<String, Person>();
  // ... 이것저것 처리
  return result;
}
```

타이핑이 간결하면서도 사람이 그나마 타입 추론이 쉽기 때문이다. `return` 만 알 수 있으면 되기 때문이다. 간단하다.


이래도 매력이 없는가? 사실 취향이다. 기존 방식 써도 상관 없다.
나는 강요하지 않았고, 강요할 생각도 없다.
하지만 `var` 문에 대해 접근할 생각이 조금이라도 있다면,
그걸 내가 도움을 주기 위해 이렇게 하는 것 뿐이다.

그럼 즐거운 모던 자바를 즐기기 바란다.
끗.
Async Who?
Tags: javascript
Published: 2020-07-27 01:33:43

In my journey so far, I realized one of my favorite things javascript does is the async/await function. Learning how functions are called by order really helped solidify the concept for me. 

But you may ask, what is the difference? When do I use a regular function and when do I use an async? - The answer lies in what you want to do and what you are working with.

In a synchronous function, javascript implements and reads your code in the order it is writte (that is why Scope is so important!) In async, this tells javascript, "hey do not run this yet, I need more data wait for data to come back to implement the rest."

This is very useful when calling APIs. When you are requesting data from an API, although it seems to come quickly, we do not really know when exactly the API's data will come to you since it is not a data set that you own. 

In an async await, you tell the function to wait. In API use-case you tell it to wait until you receive a response and convert it to Json so it is usable.
What're your strategies to upgrade a React app that's in production?
Tags: react, agile, help
Published: 2020-07-27 01:06:14

I moved to a new company as a full-time frontend dev, the company has a React app that works as a dashboard where their users can create/manage automated financial-workflows, now, the current codebase is "IMO" pretty messy, think of the following:

1. Some parts of the app were written in JS and others are written in TS.
2. There're no unit tests what so ever!
3. I'm not sure if this one is common but the backend guys are contributing to the frontend app.
4. There's no unified code style across the codebase, every one is applying their style.
5. The app is using multiple solutions for the same problem, for instance, they're using `styled-components`, `antd`, and `mat-ui` all at the same time.

that was to give you a hint about what the codebase looks like.

What I'm asking is this, if you're in my position, what would be your strategies/plans to deal with this situation?
[Music] Reminisce ft. Fireboy – Ogaranya
Published: 2020-07-27 00:47:56

Download Reminisce ft. Fireboy DML – Ogaranya Mp3
The Nigerian veteran rapper, Reminisce comes out with a new jam off his studio body of work project  entitled “Vibes & Insha Allah (EP)“.

The multi award Winning Nigerian Rapper, who is also known as Baba Afusa and Oja Daddy comes through with this brand new impressive single titled “Ogaranya”  featuring Fireboy DML.

However, this new project titled “Vibes & Insha Allah (EP) which is scheduled for release on the 29th of this month has its production assistance from the likes of Sars, TMXO, Kriz Beatz among others.

Moreover, the newly anticipated EP is compiled with just 6 tracks which features the likes of Tiwa Savage, Fireboy DML, Mo & Fatimah Safaru.
The Citation of Matters Called Ideas
Tags: writing, philosophy, culture, career
Published: 2020-07-27 00:39:20

---
title: The Citation of Matters Called Ideas
published: true
description: Citation is one of the best understood branches of rent-seeking.
tags: writing, philosophy, culture, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/05vitcksfztpjfhmtod6.png
---
Citation. What is citation? How does it travel? Why do we see the distant footnote in Marx before we hear its thunder? Why does a paper seem to sound many tomes when it is analyzed? Such questions as these baffled the wisest people for centuries. Today, however, the science of citation is one of the best understood of all the many branches of rent-seeking. The mystery has disappeared.

Every kind of citation has its beginning in an influence we discover. That influence may be a published dissertation or a conversation we overhear or a barking dog. Whatever it is, some part of it vibrates within the mind while we contemplate it. The influence disturbs our inert thoughts in such a way that *ideas* are produced. These ideas travel out in all directions, expanding in balloon-like fashion from the source of the idea. If the ideas happen to reach our limbs, they set up derivative objects which we observe as influence.

Ideas, then, depend on three things. There must be a vibrating influence to set up the ideas, an artifact created to capture the ideas, and someone's mind to receive them. Ideas can travel through a vacuum, though that won't stop people from trying to tax that travel.

There is an old catch question concerning the definition of *citation*: If a citation falls in an unread margin, does its presence make any idea? The answer, of course, depends on how we define *idea*. If we think of it as the ink in the margin that may hypothetically be followed up upon by a real reader after it has been indexed by citation metric services, the answer is yes. Wherever there is the potential influence, there are ideas. But if we think of ideas as a sensation of the mind, the answer must be no. The two definitions are equally correct, and scientists insist on the one that makes their metrics go up (sometimes with their bank accounts) and never the one which might change the world.
Qualities of an agile development team
Tags: agile, development, teamwork
Published: 2020-09-03 04:56:34

---
title: Qualities of an agile development team
published: true
date: 2020-07-27 00:00:00 UTC
tags: Agile,Development,Teamwork
canonical_url: https://www.loginradius.com/engineering/blog/agile-development-team/
---

Agile is becoming another SDLC methodology but in reality, it is beyond normal project management. With time It’s been accessorized a lot and leaving behind the basic building blocks and the important entity the Agile Development Teams.

   
[Read On](https://www.loginradius.com/engineering/blog/agile-development-team/)
TIL How to cache Kotlin Android view binding extensions
Tags: android, kotlin
Published: 2020-08-03 00:37:12

---
title: TIL How to cache Kotlin Android view binding extensions
published: true
date: 2020-07-27 00:00:00 UTC
tags: 
  - Android
  - Kotlin
canonical_url: https://tigeroakes.com/posts/til-kotlin-android-ext-cache/
cover_image: https://tigeroakes.com/posts/til-kotlin-android-ext-cache/slide.png
---

In Android projects written with Kotlin, you can replace `findViewById<ViewType>(R.id.view_id)` calls by simply writing `view_id`. The [Kotlin Android Extensions](https://plugins.gradle.org/plugin/org.jetbrains.kotlin.android.extensions) plugin adds this extension property automatically to Activities, Fragments, Views, and classes with the `LayoutContainer` interface.

However, views don’t cache the extension property. Using `view.view_id` is equivalent to calling `findViewById` every time and looking up the view over and over again. This is an easy mistake to make in fragments, where you can get the root view.

```kotlin
import kotlinx.android.synthetic.main.fragment_main.view.*

class MainFragment : Fragment(R.layout.fragment_main) {

  fun bindUi() {
    view.learn_button.setOnClickListener { ... }
    view.connect_button.setOnClickListener { ... }
  }
}
```

Prefer the extension property on Activities, Fragments, and classes with the `LayoutContainer` interface as those are cached. You can identify which version you use based on the import statement.

```kotlin
import kotlinx.android.synthetic.main.fragment_main.*

class MainFragment : Fragment(R.layout.fragment_main) {

  fun bindUi() {
    learn_button.setOnClickListener { ... }
    connect_button.setOnClickListener { ... }
  }
}
```
What on Earth Is Static Regeneration?
Tags: nextjs, react, javascript, jamstack
Published: 2020-07-28 17:53:17

---
title: What on Earth Is Static Regeneration?
published: true
date: 2020-07-27 00:00:00 UTC
tags: nextjs,react,javascript,jamstack
canonical_url: https://jessesibley.com/what-on-earth-is-static-regeneration
---

An overview of the new 'Incremental Static Generation' feature in Next.js
Leetcode - Pascal's Triangle (with JavaScript)
Published: 2020-07-26 23:44:06

Today I am going to show how to solve the Pascal's Triangle algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6l249hno8ouwgymfivv0.png)

Before solving the problem, we should understand how Pascal's Triangle works:
- Pascal's Triangle starts with "1" at the top, then continues placing numbers below it in a triangular pattern. 
- Each number is the sum of the two numbers directly above it. 
- The first and last row elements are always 1.

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

Now let’s start to solve the problem

1) First I wrote the base case. If a user requests zero rows, they get zero rows.

```javascript
var generate = function(numRows) {
    var triangle = [];
    
//First base case
    if(numRows == 0) { 
        return triangle
    }
}
```

2) Next, I iterate numRows times using **for** loop to build Pascal's Triangle. Then I add the second base case -> the first row of the triangle and the first element of all rows are always 1.

```javascript
var generate = function(numRows) {
    var triangle = [];
    
//First base case
    if(numRows == 0) { 
        return triangle
    }

    for (var i = 0; i < numRows; i++) {
        
        triangle[i] = [];
 //Second base case
        triangle[i][0] = 1;
    }
}
```
3) While I iterate the rows, I also use the second loop to build the elements of each row. Each triangle element (other than the first and last of each row)  is equal to the sum of the elements above-and-to-the-left and above-and-to-the-right.

```javascript
var generate = function(numRows) {
    var triangle = [];
    
//First base case
    if(numRows == 0) { 
        return triangle
    }

    for (var i = 0; i < numRows; i++) {
        
        triangle[i] = [];
//Second base case
        triangle[i][0] = 1;
        
        for (var j = 1; j < i; j++) {
            triangle[i][j] = triangle[i-1][j-1] + triangle[i-1][j]
        }
//The last element of all rows are always 1.
        triangle[i][i] = 1;
    }
    
    return triangle;
}
```
CSS Flexbox Simulator
Tags: css, webdev, beginners
Published: 2020-07-26 23:28:46

This post is not about the main concepts of CSS Flexbox. There are a lot of excelent posts that do it, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I want to share a Flexbox Simulator that I've done. 
It is very simple and you can understand quickly how to build your CSS Flexbox Container according to your needs.

The main idea is to modify the flexbox-container inputs and see how the flexbox-items react.

https://juliansci.github.io/css-flexbox-simulator/

Hope you enjoy it!
Limit lines of a block element HTML
Published: 2020-07-26 23:20:08

.text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;    
    max-height: 32px;     
    -webkit-line-clamp: 2; /* Write the number of 
                              lines you want to be 
                              displayed */
    -webkit-box-orient: vertical;
}