teleren/devto huggingface dataset:
How add React to one Website in 5 steps
Tags: react, javascript, html, babel
Published: 2021-02-27 17:56:44

Add fronted frameworks on existing HTML with 5 steps. This article we learn how add React in this Website without create one NPM project or WebPack.

# 1. Create html

first create simple HTML structure, in this case we create *index.html* in main directory

{% gist https://gist.github.com/DuvanMorenoCardona/e1f5050b5bd95b1b9e9e9d956c4aea82 %}

#2. Add React CDN

CDN (Content Delivery Network) refers to a geographically distributed groups of servers which work together to provide fast delivery of internet content, Allows quick transfer of assets needed for loading Internet Content including HTML pages, JavaScript files, Style-sheets, images, and videos.

Fist we add the necessary CDN to embed React into website or HTML.

{% gist https://gist.github.com/DuvanMorenoCardona/8aeb6bf9239cf7f0f5169a46b7224275 %}

**NOTE:** Is important add *crossorigin* , is important cause enables a better error handling experience.

#3. Create React Component.

We create the React component, for this we create *app.js* with next structure.

{% gist https://gist.github.com/DuvanMorenoCardona/13ec008f4844dc6b717fb9ad0478079b %}

#4. Add React Component in your HTML

Once created your React component, we need import it on HTML. once done imported your component.

{% gist https://gist.github.com/DuvanMorenoCardona/9e0ca6061302f16a13dade4d26548995 %}

#5. Add Logic into Component

The logic that we can add is consume a REST API, https://thecatapi.com/ we are call this API to show picture cats.

Add variables in component

{% gist https://gist.github.com/DuvanMorenoCardona/54563aa361555ab13acf534943a25274 %}

Create functions to GET API.

{% gist https://gist.github.com/DuvanMorenoCardona/e6c74eb6df494e912191a6076e4ee958 %}

Add structure jsx tags

{% gist https://gist.github.com/DuvanMorenoCardona/02c69e9a014114075de6289381ced174 %}

#Final project

https://duvanmorenocardona.github.io/React_on_HTML/

Github repository

{% github https://github.com/DuvanMorenoCardona/React_on_HTML %}

#Conclusion

This method we could add React in our existing projects, easy and without many changes in our project.
Share your experience with PostgreSQL
Tags: postgres, mysql, database, webdev
Published: 2021-02-27 17:23:10

PostgreSQL has been chosen as the DBMS of the year 2020. This is the third time this DBMS receive this title from db-engines.com.

Is there any one in dev.to community using PostgreSQL? It must be interesting if you could share your personal experience with PostgreSQL. 

How has this DBMS been helping you in your everyday work?
Find file under cursor in emacs
Tags: emacs, vim
Published: 2021-03-03 22:07:11

---
title: Find file under cursor in emacs
published: true
date: 2021-02-27 17:08:20 UTC
tags: emacs, vim
canonical_url: https://erick.navarro.io/til/find-file-under-cursor-in-emacs/
---

`#TIL` you can use `gf` to open a file under the current cursor position in VIM, I was reading this [post](https://thevaluable.dev/vim-advanced/) I found in Hacker News and I was wondering if `evil-mode` has this functionality as well

`evil-mode` has this key binding defined and it uses `(find-file-at-point)`, it works well for absolute paths but not for relative paths and I wanted to use it for a path like this `templates/home.html` so I wrote some `elisp` code to be able to make what I want:

```emacs-lisp
(defun my/find-file-under-cursor ()
  "Check it the filepath under cursor is an absolute path otherwise open helm and insert the filepath."
  (interactive)
  (let ((file-path (thing-at-point 'filename t)))
    (if (file-name-absolute-p file-path)
	(find-file-at-point file-path)
      (minibuffer-with-setup-hook (lambda ()
				    (insert file-path))
	(helm-ls-git-ls)))))
```

If the path under the cursor is an absolute path it will use the regular `find-file-at-point` function, otherwise it will open `helm-ls-git-ls` and insert that value into the minibuffer. I use `minibuffer-with-setup-hook` to setup a temporal function attached to `minibuffer-setup-hook` to be able to insert the file path in the minibuffer after `helm-ls-git-ls` is opened.

With all of this done we just need to replace the regular behaviour of `gf` with our custom function:

```emacs-lisp
(define-key evil-normal-state-map "gf" 'my/find-file-under-cursor)
```

Demo

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7reblarsu6mbq6105vtv.gif)

And that's it. Enjoy! 🎉
A Generic table in React with MaterialUI
Tags: typescript, webdev, react
Published: 2021-02-27 16:24:26

> **Disclaimer**
> This component is built upon an example on the MaterialUI components section, and hence some part of code may be same. This is just for someone who wants to save some time without trying to figure out all that is done in there.

# Introduction
We as react developers must have heard about MaterialUI. It's a fantastic UI library for react (not sure about react native) based on Google's material design. 

Now, for dealing with visualizing data in tabular form, it provides a **Table** component. But configuring it to your needs may look like a pain if you are in a hurry.

# A Generic Table component
Here I have a created a DataTable component on the top of the **Table** component. 

DataTable has the following features:
+ Can infer column names if directly array of rows are provided.
+ Can handle sorting at single column level.
+ Supports pagination.
+ Supports custom elements or components inside a cell.
+ Most importantly, we can always customize to our needs.

As, this is a plain React component, you can find the source below, and can improve upon it.

# Usage
### Basic usage
```
<DataTable
    columnData={[
        {
            id: 'name',
            name: 'Name',
            enableSort: true,
            align: "center"
        },
        {
            id: 'desc',
            name: 'Description',
            enableSort: true,
            align: "center"
        }
    ]}
    rows={[
       { name: 'First', desc: 'First Item' },
       { name: 'Second', desc: 'Second Item' }
    ]}
/>
```

The DataTable component takes two parameters, **_columnData_** and **_rows_**. 

The **_columnData_** is an array of configuration values for columns, _id_, _name_, enableSort_, _align_.

The **_rows_** is the array of objects or we can say it is our data to be displayed in the Table body.

The pagination is same as an example on the MaterialUI components page.

> This is open to improvement in discussions and feedback.

{% gist 
https://gist.github.com/iam-doctor-j/5cc212df8197f60736762dc815ff86e9 %}
Daily Developer Jokes - Saturday, Feb 27, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-27 16:20:24

---
title: "Daily Developer Jokes - Saturday, Feb 27, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Feb%2027%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258f2759b6.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the server say to his client who was having a bad day?

___A:___ Everything's going to be 200
 -->
Show progress when Disk Dump (dd) in macOS
Tags: macos, commandline, thai
Published: 2021-02-27 16:17:16

ปัญหาผมคือ ต้องเขียน ISO file ขนาด 1.6 GB ลงไปที่ USB Drive ก็ด้วยความเคยชินก็ใช้คำสั่ง dd `sudo dd if=ovirt-node-ng-installer-4.4.4-2021020810.el8.iso of=/dev/disk2` ที่เคยใช้อยู่เป็นประจำ แต่ก็ไม่ได้คิดอะไรมาก ส่วนใหญ่ใช้เวลาไม่นานก็เสร็จเรียบร้อย แต่พอเจอในสถานการณ์นี้ USB Drive เก่ามากแล้ว รอนานนนนนนนนนน มากกกกกกกกก โดยที่ไม่รู้ว่า คำสั่ง dd กำลังทำงานอยู่ หรือว่าหยุดทำงานไปแล้ว
ในใจก็คิดว่า ต้องมีคนมีปัญหาอย่างเราสิ แล้วเค้าแก้ยังไง สุดท้ายก็เจอว่า คำสั่งได้ผลการทำงานเหมือนกัน ชื่อว่า gdd ที่เป็นชุด คำสั่งใน coreutils จาก GNU ก็เลยต้องติดตั้ง coreutils เพิ่มด้วย brew และ ใช้คำสั่ง gdd พร้อมกับ status=progress ก็จะเห็นว่า คำสั่ง gdd เขียนไฟล์ไปแล้วเท่าไหร่ คำสั่งทำงานไปแล้วกี่วินาที และเขียนไปที่ output ด้วยความเร็วเท่าไหร่

1. ติดตั้ง coreutils ด้วยคำสั่ง brew

```zsh
❯ brew install coreutils
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 3 taps (homebrew/core, homebrew/cask and homebrew/services).
==> New Formulae

...

==> Downloading https://homebrew.bintray.com/bottles/coreutils-8.32.big_sur.bottle.2.tar.gz
==> Downloading from https://d29vzk4ow07wi7.cloudfront.net/371ec57703b3646e0113331308b6e03617c2a7f91e15e113380b605455daba20?response-content-disposition=attachment%3Bfilename%3D%22coreutils-8.32.big_sur.bottle.2.tar.gz%22&Policy=eyJTdGF
######################################################################## 100.0%
==> Pouring coreutils-8.32.big_sur.bottle.2.tar.gz
==> Caveats
Commands also provided by macOS have been installed with the prefix "g".
If you need to use these commands with their normal names, you
can add a "gnubin" directory to your PATH from your bashrc like:
  PATH="/usr/local/opt/coreutils/libexec/gnubin:$PATH"
==> Summary
🍺  /usr/local/Cellar/coreutils/8.32: 476 files, 12.5MB
```

2. ใช้คำสั่ง gdd อ่านไฟล์ ovirt-node-ng-installer-4.4.4-2021020810.el8.iso เพื่อเขียนไปที่ /dev/disk2 พร้อมทั้งแสดงสถานะขณะทำงาน

```
❯ sudo gdd if=ovirt-node-ng-installer-4.4.4-2021020810.el8.iso of=/dev/disk2 status=progress
458949120 bytes (459 MB, 438 MiB) copied, 235 s, 2.0 MB/s
```

3. หลังจากทำงานเสร็จเรียบร้อย ก็จะมีสรุปภาพรวมของการทำงาน

```
❯ sudo gdd if=ovirt-node-ng-installer-4.4.4-2021020810.el8.iso of=/dev/disk2 status=progress
1674600960 bytes (1.7 GB, 1.6 GiB) copied, 858 s, 2.0 MB/s
3274752+0 records in
3274752+0 records out
1676673024 bytes (1.7 GB, 1.6 GiB) copied, 858.97 s, 2.0 MB/s
```


####มูลค่าความสุข
Detection device type with pure CSS
Tags: webdev, css, beginners, tutorial
Published: 2021-02-27 16:03:57

```css
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}
```
ensure doesn't return value implicitly
Tags: ruby
Published: 2021-02-27 15:46:12

In Ruby, `ensure` clause ensures that the code block is executed when an exception is raised or not.

```ruby
def foo
  'foo'
ensure
  puts 'ensure'
end

foo # => 'ensure' is output
```

However, the value in ensure clause is not returned implicitly.

```ruby
def foo
  'foo'
ensure
  'ensure'
end

foo # => 'foo', not 'ensure'
```

You need to return value explicitly with `return`.

```ruby
def foo
  'foo'
ensure
  return 'ensure'
end

foo # => 'ensure'
```
Coding movie hacking tools
Tags: tools, hacking, movie, scripting
Published: 2021-02-27 15:40:42

---
title: Coding movie hacking tools
published: true
description: 
tags: tools, hacking, movie, scripting 
cover_image: https://i1.sndcdn.com/artworks-000084760075-b9d20o-t500x500.jpg
---

So I thought of creating some tools, UI, emulations and stuff which are showed when someone is hacking in a movie.

What are some of the interesting things you can think of?

And if someone is interested, I have created a [github organization](https://github.com/seireiden/) for the same. You can comment down your ideas, or add an issue on the repo and I will add you and we can collaborate and code.

tl;dr - what's something cool you want to build?
JavaScript Interview Question #26: Are these dates equal?
Tags: beginners, codenewbie, javascript, webdev
Published: 2021-02-27 14:55:15

![js-test-26](https://learn.coderslang.com/js-test-26.png)

Equal or not?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In the first two lines, we create new `Date` objects.

In line 4, we’re using the strict equality operator `===`. Remember that we’re comparing different objects!

Even if `date` and `date2` represented the same date, the check would have returned `false`.

---

**ANSWER**: The string `not so much` will be printed to the console, as `date1` and `date2` are different objects.

[Learn Full Stack JavaScript](https://js.coderslang.com)
Day 61 Of 100DaysOfCode : COUNT And CASE WHEN With Multiple Conditions
Tags: womenintech, codenewbie, 100daysofcode, beginners
Published: 2021-02-27 14:23:09

Today I completed Day 61 of #100daysofcode and #python learning. Like previous today also continue to learned from [Datacamp](https://campus.datacamp.com/courses/intermediate-sql/well-take-the-case?ex=10) about SQL properties (CASE Statements in aggregate, COUNT and CASE WHEN with multiple conditions). Tried to solve assignment from Coursera.
# SQL code
In the code we used country and match table to determine the total number of matches won by the home team in each country during the 2012/2013, 2013/2014, and 2014/2015 seasons.


```python
SELECT 
	c.name AS country,
    -- Sum the total records in each season where the home team won
	SUM(CASE WHEN m.season = '2012/2013' AND m.home_goal > m.away_goal 
        THEN 1 ELSE 0 END) AS matches_2012_2013,
	SUM(CASE WHEN m.season = '2013/2014' AND m.home_goal > m.away_goal 
        THEN 1 ELSE 0 END) AS matches_2013_2014,
	SUM(CASE WHEN m.season = '2014/2015' AND m.home_goal > m.away_goal 
        THEN 1 ELSE 0 END) AS matches_2014_2015
FROM country AS c
LEFT JOIN match AS m
ON c.id = m.country_id
-- Group by country name alias
GROUP BY country;
``` 
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 61 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* [Algorithmic Toolbox](<a href="https://t.co/RdUBj1KUUx">https://t.co/RdUBj1KUUx</a>)<br>* SQL (COUNT and CASE WHEN with multiple conditions)<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://t.co/z6Ul8aIeaK">pic.twitter.com/z6Ul8aIeaK</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1365665493017784324?ref_src=twsrc%5Etfw">February 27, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
LeetCode Longest Uncommon Subsequence I 521 FAANG Interview Preparation
Tags: cpp
Published: 2021-02-27 14:37:26

https://youtu.be/dJsUqANtB-o

 ```Everything posted here is just for the educational purpose. In this post i have shared one easy problem based on the topic that is mentioned. Let us know if you're interested in any one question we'll try to give our best.```
(Javascript) My learning journey: String and more
Tags: javascript, beginners, tutorial
Published: 2021-02-27 14:31:33

---
title: (Javascript) My learning journey: String and more
description:
published: true
tags: javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik1c8mr2sz8zi3g466dq.jpg
series: (Javascript) My learning journey
---

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.

<h2>String</h2>
```js
const name = 'Mike Taylor'
// direct character access
console.log(name[0]) // M

// Get position (zero base)
console.log(name.indexOf('T')) // 5

// Modify one element
name[0] = 'P' // Pike Taylor

// Extract (slice) part or a string (start, stop before)
console.log(name.slice(5)) // Taylor
console.log(name.slice(5, 8)) // Tay
console.log(name.slice(-2)) // or

// Convert to lower or upper case
console.log(name.toLowerCase()) // mike taylor
console.log(name.toUpperCase()) // MIKE TAYLOR

// Remove white space
const title = ' This is a title with space   '
console.log(title.trim()) // 'This is a title with space'

// Chaining string method
console.log(title.toLowerCase().trim()) // 'this is a title with space'

// replace
const name = 'Mike Taylor'
console.log(name.replace('Mike', 'Paul') // Paul Taylor

// includes?
const name = 'Mike Taylor'
console.log(name.includes('Mike')) // true

// Split
const colors = 'Red, Green, Blue')
console.log(colors.split(',')) // ['Red', 'Green', 'Blue']

// Join
const colors = ['Red', 'Green', 'Blue']
const colors_string = colors.join('-') // Red-Green-Blue

```

<h2>Short-circuit || operator</h2>
```js
// if first value truthy then return first value
// if first value falsy then return second value 
console.log('Hello' || 'Hi') // 'Hello'
console.log('' || 'Bye') // 'Bye'
console.log('' || 0 || 100) // 100

// Assignment example
const maxUser = config.maxUser || 10

```

<h2>Nullish Coalescing operator</h2>
```js
// Only assign if null or undefined
const maxUser = config.maxUser ?? 10

```

<h2>Optional chaining</h2>
```js
if (customer.creditLimit) {
  if (customer.creditLimit.dateExpire) {
    console.log(customer.creditLimit.dateExpire)
  }
}
console.log(customer.creditLimit.dateExpire) // error
// optional chaining: assign only if not undefined or null
console.log(customer.creditLimit?.dateExpire) // undefined

```
My javascript / tech / web development newsletter for 2021-02-27 is out! Javascript Core Special Edition! 💯
Tags: javascript, tech, webdev, discuss
Published: 2021-02-27 14:31:11

---
title: My javascript / tech / web development newsletter for 2021-02-27 is out! Javascript Core Special Edition! 💯
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Javascript Core Special, Aussie News, Peter Jackson’s LOTR, nerdy essays, NFTs, cool history, Spotify, EtheriumFunOver, Android, Firefox, companiesBuyBitcoin, great docs, Indie Web, Twitter features...

https://markjgsmith.substack.com/p/mark-smiths-newsletter-27-02-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Microsoft Azure For Our Startup
Tags: microsoft, microsoftazure
Published: 2021-02-27 13:03:25

My name is Deven I belong from the rural area where we struggle daily for the internet and as a CEO and Founder of a Startup we know the importance of Microsoft Azure in our project I am a FullStack Developer and a Student and Also Running a Small Startup and Microsoft Azure has a big part of our project because of Microsft Azure App Service and Database with amazing, fast, reliable, and flexible services out startup are running smoothly with 99.9% uptime. 
The way you deploy Microsoft Azure Service is better than any other and the best part of Microsoft Azure is they have so many data centre in India. so we can serve our client the best response time from MS Azure Servers.
Microsoft Azure App Service help you to deploy your app faster than every with pay as you go. they never charge you more they charge you for what you use this is the best part about Microsoft azure.
Microsft Azure Cost Management is one of the legend features on its platform. Because it helps you to manage your spending on MS Azure Service it helps you to analysis what for what you are spending and you can also set your budget limit so you will never get unexpected bills from MS Azure so you can or even MS Azure Cost Management give you alert when every you Budget limit is Up or nearby so you can track it anytime.
Microsoft Azure Load Balance help us and help our clients to run their server smoothly because of the load balancer your server will never go down or out of reach it helps to maintain our server traffic and as per our traffic, it may be high or low our load balancer also balance traffic and make sure that our server is UP for 24/7.
Microsoft Azure help our Startup to grow and as a CEO/Founder of DeveloperSpot, I think I make the best choice by choosing Microsoft Azure.
Tidak ada masalah yang tidak ada obatnya
Published: 2021-02-27 14:08:46

Tidak ada masalah yang tidak ada obatnya

Bukan hidup namanya kalo tidak bermasalah ,sebaik-baiknya hidup pasti ada masalahnya .hanya saja setiap masalah dalam hidup seseorang mempunyai tingkatan yang berbeda-beda ,seberat apapun masalahnya pasti ada jalan keluar ,bahkan sekalipun seseorang itu berputus asa .

Masalah karir ,asmara ,sosial dan sebagainya pasti akan kita jumpai dalam hidup ini .solusi adalah tergantung kita mau apa tidak .bahkan solusi ada didada kita masing-masing hanya karena kita tidak di bukakan .
Kita tidak akan pernah di bukakan selama kita menjauhi pintu ,sedangkan didalam pintu adalah berlian yang tak ternilai .
Source : https://bangheri.com
Python's removesuffix and removeprefix
Tags: python, removeprefix, removesuffix
Published: 2021-02-27 14:05:29

---
title: Python's removesuffix and removeprefix
published: true
description: 
tags: python,removeprefix,removesuffix
//cover_image: https://unsplash.com/photos/qM37iptlCNY
---
Python 3.9 added the string methods `removesuffix` and `removeprefix`. When I first saw this I wondered why, since the go-to solution for this is `strip`, `lstrip` and `rstrip`.

On diving into the documentation, I was surprised to find that `strip`, `lstrip` and `rstrip` treat the input chars as a set of characters to remove not a substring. An example will better explain this. Take for example you have the string `test_some_stuff` and you want to remove the prefix. The obvious way would be to go for `lstrip`.
```
s = 'test_some_stuff'.lstrip('test_')
```
The expected output is `some_stuff`. The actual output is `ome_stuff`. You see the *strip methods will check the string for any of the set of characters provided and remove those from the string until a non-matching character. In the example above the `s` is `some` was also removed.
The solution is to use `removeprefix` and/or `removesuffix`.
```
s = 'test_some_stuff'.removeprefix('test_')
```
Output: `some_stuff`
If you desire to dig into this more have a look at the PEP that led to these two methods getting added.
https://www.python.org/dev/peps/pep-0616/