teleren/devto huggingface dataset:
유명한 리액트 컴포넌트 라이브러리 모음
Tags: javascript, react, css
Published: 2021-08-07 04:02:01

웹개발자의 큰 고민 중 하나는 UI다. 디자인이 안되거나 쏟을 시간이 없기 때문이다. 그렇다보니 bootstrap 같은 라이브러리가 인기있는게 아닐까?

다행히 큰 기업들이 오픈 소스로 자신의 컴포넌트를 공개해놨고 어느 정도 인지도 있는 라이브러리를 기록했다.

간단한 UI만 구현돼 있는 라이브러리도 있고 드랍다운, 테이블, 모달 등 복잡한 기능을 구현한 라이브러리도 있다.​ 단순히 UI를 구현하는 용도를 넘어 디자인시스템이나 코드구현 방식을 참고하기도 좋다.
※ react-router-dom을 위한 라이브러리다.
⠀
⠀

## Ant Design
{% github https://github.com/ant-design/ant-design %}
⠀
⠀

## Base Web UI / Uber
{% github https://github.com/uber/baseweb %}
⠀
⠀

## Blueprint / Palantir
{% github https://github.com/palantir/blueprint %}
⠀
⠀

## Chakra UI
{% github https://github.com/chakra-ui/chakra-ui %}
⠀
⠀

## Carbon / IBM
{% github https://github.com/carbon-design-system/carbon %}
⠀
⠀

## ElasticUI / Elastic
{% github https://github.com/elastic/eui %}
⠀
⠀

## Evergreen / Segment
{% github https://github.com/segmentio/evergreen %}
⠀
⠀

## Fluent / Microsoft
{% github https://github.com/microsoft/fluentui %}
⠀
⠀

## material-ui
{% github https://github.com/mui-org/material-ui %}
⠀
⠀

## Garden / Zendesk
{% github https://github.com/zendeskgarden/react-components %}
⠀
⠀

## Gestalt / Pinterest
{% github https://github.com/pinterest/gestalt %}
⠀
⠀

## Grommet
{% github https://github.com/grommet/grommet %}
⠀
⠀

## Pluralsight
{% github https://github.com/pluralsight/design-system %}
⠀
⠀

## Polaris / Shopify
2018년 라이센스의 변경으로 Shopify와 관련된 앱을 만들 때 사용할 수 있다. 사용은 못해도 참고하기 좋다.
{% github https://github.com/Shopify/polaris-react %}
⠀
⠀

## Primer / Github
{% github https://github.com/primer/react %}
⠀
⠀

## Rainbow
{% github https://github.com/nexxtway/react-rainbow %}
⠀
⠀

## React95
{% github https://github.com/arturbien/React95 %}
⠀
⠀

## Ring UI / Jetbrains
{% github https://github.com/JetBrains/ring-ui %}
⠀
⠀

## Semantic
{% github https://github.com/Semantic-Org/Semantic-UI-React %}
Include HTML Inside of HTML - Just Like React Components
Tags: html, javascript, webdev, programming
Published: 2021-08-07 03:20:59

Yes, you can include HTML inside of HTML, just like a react / angular component. In this short article, I am going to walk you through, how to include HTML inside of HTML. 

### Creating files 
Go ahead and create a new HTML file and add the following simple code inside of it

```
<!-- index.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">
	<title>Include HTML inside of HTML</title>
</head>
<body>
	
</body>
</html>
```
now create a new file and name it `nav.html` ( You can name it anything since this will be the component that we will include in `index.html`). Once created you can either write your component or paste this simple navbar code

```
<!-- nav.html -->

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
```
### Adding package

Now we need to add an external NPM package to your index.html, to do that simply paste the following code in your `index.html` file. 

```html
<script src="https://unpkg.com/htmlincludejs"></script>
```

### Adding HTML inside of HTML

Once you added the script, paste the following `include` tag in your `index.html` file. 

```
<include src="./nav.html"></include>
```

Finally, this is how your `index.html` file should look like

```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">
	<script src="https://unpkg.com/htmlincludejs"></script>
	<title>Include HTML inside of HTML</title>
</head>
<body>
	<include src="./nav.html"></include>
</body>
 </html> 
```

Now open this index.html in your browser and BOOM 💥 you have a navbar in your webpage. Though we didn't add a navbar in your `index.html`,  we just include it from another `html` file but we still got navbar. Here is the full code in Codesandbox 

%[https://codesandbox.io/embed/floral-glitter-pdxvp?fontsize=14&hidenavigation=1&theme=dark]


### Conclusion

I hope you found this article helpful. If you need any help please let me know in the comment section. 

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time
Thank you Epic Games!
Published: 2021-08-07 03:14:06

Thank you Epic Games & everyone involved with showing the amazingly wonderful things video games are capable of today!

Since 1992 I've been an avid fan of video games, seeing what they've become fills my heart with joy!

Thank you Muselk for the video!

https://www.youtube.com/watch?v=BYYc14TKhTM
8 Tips & Tricks for Pandas
Tags: python, tutorial, performance, datascience
Published: 2021-08-07 02:19:54

# 1. Use pandas >= 1.0.0

- Performance boosts above this version, so upgrade your package asap

# 2. Specify the types of the columns when loading csv

- Save a lot of memory in large files

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


# 3. Specify the necessary columns when loading

- Do not load columns you don't need

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

# 4. Delete Dataframes you not longer need

- Free memory when possible

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

# 5. Read a file and process per chunks 

- Useful for large files

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppm9tsbe8kat685i2u7d.png)
 
# 6. Explicitly convert certain columns to datetime objects when loading

- This helps you to do easy transformations on datetimes columns

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

# 7. Use multi-index when possible

- Groups values and compress data, saving a lot of memory

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stikp99h3olbt8cvnrs3.png)
 
# 8. Avoid Apply method, use built in functions

- Save CPU processing time avoiding Apply()

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya0e9nccgjbxbjcuailt.png)
You're formally invited to a party on Mount Stupid.
Published: 2021-08-07 01:58:35

Wait, you're already a dev?

Then you must have a vacation home here already.

![Gotcha Mother Cusser](https://i.giphy.com/media/AKJA347aQpPdm/giphy.webp)



Anyway, you ever heard of the Dunning-Kruger effect?

It's a tem used to describe your annoying co-worker who skims the documentation of a new framework for five minutes, and then corrects you on its usage for the next week.

To be more specific:

>The Dunning–Kruger effect is a hypothetical cognitive bias stating that people with low ability at a task overestimate their ability.
[Source](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect?wprov=sfla1)

Translation: Someone who knows just enough to feel like they're an expert, but not enough to know they're really not.

Being in such a state is known as being on "Mount Stupid" and as devs, we all have vacation homes there.

"How?" you might be asking, "I'm the team lead!"

"Shut up" I respond, "This is an article, I can't hear you."

As we all know this field is fluctuating, constantly. It goes without saying that even the best of us cannot know everything at all times. Although it's important to know what we bring to the table, over-estimating our talents can be a great way to unintentionally mislead ourselves and our customers. The Dunning-Kruger Effect helps us remember to re-evaluate once in a while, ensuring what we offer is more than bluster.

So- consider this a formal invitation to my private villa on Mount Stupid. There's a pool and everything.
Basic Logging with Python
Tags: python, tutorial, logging
Published: 2021-08-07 01:38:47

I'm trying to force myself to move away from using the `print()` function as I'm pretty much using print all the time to cater for logging, and using the `logging` package instead.

This is a basic example of using logging in a basic python app:

```python
import logging

logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s [%(levelname)s] %(name)s %(message)s",
    handlers=[
        logging.StreamHandler()
    ]
)

messagestring = {'info': 'info message', 'warn': 'this is a warning', 'err': 'this is a error'}

logger = logging.getLogger('thisapp')
logger.info('message: {}'.format(messagestring['info']))
logger.warning('message: {}'.format(messagestring['warn']))
logger.error('message: {}'.format(messagestring['err']))
```

When running this example, this is the output that you will see:

```bash
$ python app.py
2021-07-19 13:07:43,647 [INFO] thisapp message: info message
2021-07-19 13:07:43,647 [WARNING] thisapp message: this is a warning
2021-07-19 13:07:43,647 [ERROR] thisapp message: this is a error
```

More more info on this package, see it's documentation:
- https://docs.python.org/3/library/logging.html

Thanks for reading, if you like my content, check out my **[website](https://ruan.dev)** or follow me at **[@ruanbekker](https://twitter.com/ruanbekker)** on Twitter.
Use the limit method to retrieve a specific number of documents from MongoDB
Tags: mongodb
Published: 2021-08-07 02:01:42

---
title: Use the limit method to retrieve a specific number of documents from MongoDB
published: true
date: 2021-08-07 01:09:00 UTC
tags: MongoDB
canonical_url: https://donaldfeury.xyz/use-the-limit-method-to-retrieve-a-specific-number-of-documents-from-mongodb/
series: "Small Bytes of MongoDB"
---

For a full overview of MongoDB and all my posts on it, check out my [overview](https://donaldfeury.xyz/introduction-to-mongodb/).

While you can [use the find method to read data back out of MongoDB](https://donaldfeury.xyz/get-all-the-documents-out-of-a-collection-in-mongodb/) and [the findOne method is a MongoDB query to pull specifically one result](https://donaldfeury.xyz/how-to-retrieve-only-one-document-from-a-mongodb-collection/), you can use the `limit` method after using `find` to retrieve a specific number of documents.

Given this dataset in a collection called `users`:

```
{
	"name": "John Doe",
	"email": "test@test.com",
	"admin": false
},
{
	"name": "Jane Doe",
	"email": "test2@test2.com",
	"admin": false
},
{
	"name": "Bob Doe",
	"email": "bob@bob.com",
	"admin": true
},
{
	"name": "Your Mom",
	"email": "koolkid@someplace.com",
	"admin": false
}

```

If you want to get only the first two documents from the `users` collection, you can chain the `limit` method after using `find` like so:

```
db.users.find().limit(2)

```

Will return the following:

```
{
	"name": "John Doe",
	"email": "test@test.com",
	"admin": false
},
{
	"name": "Jane Doe",
	"email": "test2@test2.com",
	"admin": false
}

```

The argument passed into `limit` determines the maximum number of documents the cursor from `find` will return.
Pure CSS Select 2.0
Tags: codepen, css, select, dropdown
Published: 2021-08-07 00:53:53

This is an updated version of my [Pure CSS Select](https://codepen.io/raubaca/pen/VejpQP), this time without a div wrapper.

{% codepen https://codepen.io/raubaca/pen/bGWmZje %}

Enjoy it!
11 Developer Tutorials You Should Try from July 2021
Tags: beginners, ibmcloud, tutorials
Published: 2021-08-12 22:34:00

---
title: 11 Developer Tutorials You Should Try from July 2021
published: true
date: 2021-08-07 00:19:54 UTC
tags: beginner, IBMCloud, tutorials
canonical_url: https://maxkatz.org/2021/08/06/11-developer-tutorials-you-should-try-from-july-2021/
---

I want to share developer articles, tutorial and videos from [IBM Developer](http://developer.ibm.com) North America team. These resources offer high-quality developer education so I believe you will find them valuable.

[![July tutorials](https://katzmax.files.wordpress.com/2021/08/dev-tutorials-july2021.png?w=1024)](https://katzmax.files.wordpress.com/2021/08/dev-tutorials-july2021.png)

📖[Deploy a NodeJS app to IBM Cloud Container Registry](https://dev.to/ibmdeveloper/deploy-a-nodejs-app-to-ibm-cloud-container-registry-46m2) by [Mrina Sugosh](https://twitter.com/mrinasugosh)

📖[ES6 is the Node way to go](https://dev.to/ibmdeveloper/es6-is-the-node-way-to-go-3715) by [Mrina Sugosh](https://twitter.com/mrinasugosh)

📖[ML Fundamentals in Javascript](https://dev.to/ibmdeveloper/ml-fundamentals-in-javascript-5fm5) by [Mrina Sugosh](https://twitter.com/mrinasugosh)

📖[Deploy an image from IBM Cloud Container Registry to Kubernetes](https://dev.to/ibmdeveloper/deploy-a-nodejs-app-to-kubernetes-4flg) by [Mrina Sugosh](https://twitter.com/mrinasugosh)

📖[IBM Cloud Deployment 4 Ways: IBM Cloud Paks](https://dev.to/ibmdeveloper/ibm-cloud-deployment-4-ways-ibm-cloud-paks-o2m) by [Jenna Ritten](https://twitter.com/jritten)

📖[IBM Cloud Deployment 4 Ways: IBM Cloud Foundry](https://dev.to/ibmdeveloper/ibm-cloud-deployment-4-ways-ibm-cloud-foundry-2po2) by [Jenna Ritten](https://twitter.com/jritten)

📖[IBM Cloud Deployment 4 Ways: IBM Cloud Kubernetes Service](https://dev.to/ibmdeveloper/ibm-cloud-deployment-4-ways-ibm-cloud-kubernetes-service-4if) by [Jenna Ritten](https://twitter.com/jritten)

📖[IBM Cloud Deployment 4 Ways: Red Hat OpenShift on IBM Cloud](https://dev.to/ibmdeveloper/ibm-cloud-deployment-4-ways-red-hat-openshift-on-ibm-cloud-2fce) by [Jenna Ritten](https://twitter.com/jritten)

📖[Red Hat OpenShift 1001: What is Red Hat OpenShift and Why Does it Matter?](https://dev.to/ibmdeveloper/red-hat-openshift-1001-what-is-red-hat-openshift-and-why-does-it-matter-64n) by [Bradston Henry](https://twitter.com/BradstonDev)

📖[Adding Google Auth to Kubernetes Clusters with Red Hat OpenShift and IBM AppID](https://dev.to/drnugent/adding-google-auth-to-kubernetes-clusters-with-red-hat-openshift-and-ibm-appid-1e55) by [Dave Nugent](https://twitter.com/drnugent)

📖[Deploying Scalable Java Microservices to Enterprise Kubernetes using Red Hat OpenShift](https://dev.to/drnugent/deploying-scalable-java-microservices-to-enterprise-kubernetes-using-red-hat-openshift-546b) by [Dave Nugent](https://twitter.com/drnugent)

One more thing. If you are looking to join our live online meetups, you will find weekly developer education events on our [Crowdcast channel](http://crowdcast.io/ibmdeveloper).
Noobie here. 
Tags: beginners
Published: 2021-08-07 00:14:06

Hey, y’all. 

I’m a noobie at web Development stuff. I have no formal education of it. 

I’m a Registered Emergency Nurse in Ghana, West Africa. 

I’ve always loved playing around with PCs since I got introduced to it as teenager. 
Never really doing anything specific with it, not really knowing what exactly to do with it. So just learning general stuff by myself and jumping from one program to another. 
Y’all know that feeling/state, I guess. Hehe. 
I took a short virtual course/tutorial on graphic design, and I now feel like I like web Development/the concept of it more. 
So I’m self-learning about that stuff now. 
I just stumbled on this site/community by accident tonight when there appeared a suggested article in my feed, cos I’ve been for some time now searching html/css stuff more often. 

I read a few of the articles, and I’m here now. 

Hoping to learn more about Development, and hopefully build a career out of it, instead of just exploring and solving common computer problems for friends for free. 

Any help asking this path is highly welcomed. 
Thanks
How do you eat an elephant?
Tags: continuousimprovemen, cicd, automation
Published: 2021-08-11 20:40:34

---
title: How do you eat an elephant?
published: true
date: 2021-08-07 00:00:00 UTC
tags: continuousimprovemen,cicd,automation
canonical_url: https://jhall.io/archive/2021/08/07/how-do-you-eat-an-elephant/
---

How do you eat an elephant?

One bite at a time.

How do you build a modern, automated, software delivery pipeline?

The same way.

What’s the smallest step you can take today toward improving your software delivery?

Maybe it’s running a linter for every commit.  
Maybe it’s using a consistent directory structure in your project.  
Maybe it’s improving the way the local development environment works.

It doesn’t matter what it is. Just pick something and improve it.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to run a docker container in the background or detached mode in the terminal?
Tags: resource
Published: 2021-08-07 00:00:00

---
  title: How to run a docker container in the background or detached mode in the terminal?
  published: true
  tags: Resource
  date: Sat Aug 07 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/run-docker-container-in-background-or-detached-mode-terminal
  cover_image: https://melvingeorge.me/_next/static/images/main-252ae230fd53f58591f85d8785b08a20.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/run-docker-container-in-background-or-detached-mode-terminal)
  
To run a docker container in the background or the detached mode from the terminal, you can use the `docker run` command followed by the `-d` flag (or detached flag) and followed by the name of the docker image you need to use in the terminal.

### TL;DR

```bash
# Run docker container in the background
# or detached mode in the terminal
docker run -d <YOUR_DOCKER_IMAGE_NAME>
```

For example, let's say we want to make a docker container from the `docker/getting-started` docker image and then run the docker container in the background or detached mode. So here we can use the `docker run` command like this,

```bash
# Run docker container in the background
# or detached mode in the terminal
docker run -d docker/getting-started
```

- After running the above command you may see some logs stating that it is downloading the image from the remote docker hub server since it is not in the system locally

The logs may look like this,

```bash
# Logs after running the above command
# for the first time may look like this

Unable to find image 'docker/getting-started:latest' locally
latest: Pulling from docker/getting-started
540db60ca938: Pull complete
0ae30075c5da: Pull complete
9da81141e74e: Pull complete
b2e41dd2ded0: Pull complete
7f40e809fb2d: Pull complete
758848c48411: Pull complete
23ded5c3e3fe: Pull complete
38a847d4d941: Pull complete
Digest: sha256:10555bb0c50e13fc4dd965ddb5f00e948ffa53c13ff15dcdc85b7ab65e1f240b
Status: Downloaded newer image for docker/getting-started:latest
99da43876210b14242b9ecb6ebfe62c55189789b8ef85ad2b4c4da011ec48a4f
```

This means the `docker/getting-started` image has been downloaded and the container has been started by the docker engine.

**Now since the docker container is started in the background you can use the terminal for other purposes too.**

The above log will only for the first time while downloading, running the command again after this may show only the docker container id which is started.

Now if you go to the `localhost` or `localhost:80` in your browser, you can see it opens up the container application from the `docker/getting-started` image.

If you want to try out docker commands online, see [Play with docker lab](https://labs.play-with-docker.com/) to test out the commands.

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Sharing folder and files with python http_server and ngrok to get an external url.
Tags: python, server, filesystem, web
Published: 2021-08-06 23:48:04

Python standard library comes with a in-built webserver which can be invoked for simple web client server communication. The port number can be assigned programmatically and the web server is accessed through this port. Though it is not a full featured web server which can parse many kinds of file, it can parse simple static html files and serve them by responding them with required response codes.

#### Make sure you have python installed on the machine.
#### Run below command, it will serve the current folder in web browser.
#### Go into a folder which you want to share.

if you have python 2.7 run below command.
```
python -m SimpleHTTPServer
```
if you have python 3+ then try below command.
```
python3 -m http.server
```
Output shown below.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m2ff1jcbijwvk8qg51g.png)
 
And now the best part is to share it with other than localhost.
Install ngrok. https://ngrok.com/download

Once you have the ngrok.
run below command.

```
ngrok http 8000
```

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

Paste local tunnel url/ forwarding url to the browser and url can be share with anyone and they can download the files from anywhere.

Thanks for reading. :)
Comparing strings that may or may not contain diacritics in PHP
Tags: php
Published: 2021-08-06 23:30:42

Today I ran into something that really had me scratching my head, I had to compare a string from a form against a string from the database. Clearly that's not where the issue was as it's a pretty simple thing in PHP, what had me scratching my head was that I needed to account for [diacritics](https://en.wikipedia.org/wiki/Diacritic) possibly being in 1 string but not in the other.

I spent quite some time looking online but eventually took to twitter and asked the wondrous PHP community for help
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Ok, taking a complete blank and need some <a href="https://twitter.com/hashtag/php?src=hash&amp;ref_src=twsrc%5Etfw">#php</a> help. Need to compare 2 strings that may or may not contain diacritics. Example, Seán matches Sean. Don&#39;t know why I can&#39;t figure this one out, anyone any ideas?</p>&mdash; Mark Railton (@railto) <a href="https://twitter.com/railto/status/1423661524883812355?ref_src=twsrc%5Etfw">August 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

Within minutes I had a couple of people offering suggestions and health conversation ensued. I settled on a [solution](https://twitter.com/derickr/status/1423665598832254977) by  [Derick Rethans](https://twitter.com/derickr) That uses the [Collator](http://docs.php.net/manual/en/class.collator.php) class from the `intl` extension. I took the example provided by Derick and tweaked it just a bit to suit how I wanted it, snippet of which is below

```php
$c = new Collator( 'en' );
$c->setStrength( Collator::PRIMARY );

if ($c->getSortKey($newUser['firstname']) !== $c->getSortKey($existingUser->firstname)) {
    return null;
}
```
To give a bit more context on this, Let's say we have a user called Sean. Sometimes people called Sean will spell it `Sean` but others may spell it `Seán` with the Irish diacritic `Fada`. Both of these people are called Sean and both spellings are seen as correct, however when doing a direct comparison in PHP (or any other language really) you'll end up getting a mismatch if you try using the equals operator. For the task I've been working on, it was important that we allow for the same person possibly having the Fada in their name in the database, but then maybe not entering it another time in a different form. 

Thanks to Derick, Ben and the others that posted possible solutions on the twitter thread. It really helped and thankfully I was able to move on with the task.