teleren/devto huggingface dataset:
Sort Carbon's DataTable with a backend API
Tags: carbon, react
Published: 2021-08-24 12:27:48

[Carbon's DataTable](https://react.carbondesignsystem.com/?path=/docs/components-datatable-sorting--usage) supports client-side sorting out of the box. If you need to call a web service to sort your data, it gets a little hackier. This is how I solved it:


First add the `isSortable` property to `DataTable`:

```jsx
<DataTable
  isSortable
  {...rest}
>
```

Then add the following properties to `TableHeader`:

```jsx
<TableHeader
  onClick={() => {
    /** Retrieve data from server */
  })}
  isSortHeader={Boolean}
  sortDirection={'ASC' | 'DESC'}
  >
  {header}
</TableHeader>
```

Please note I use 3 undocumented features of Carbon here:

1. The `onClick` handler is used to override the default behavior (client-side sorting) and can be used to retrieve server data.
2. The `sortDirection` property is used to display the correct arrow on the sorted column header.
3. `isSortHeader` indicates that the current column is the one that is sorted.

*As these properties are not documented they might change at any time without warning.*


## Bonus: Make sortable part of the Carbon headers object


Carbon uses a header object to generate table headers, example:

```js
const headers = [
  {
    key: 'name',
    header: 'Name',
  },
  {
    key: 'status',
    header: 'Status',
  },
];
```

We can extend this object to indicate whether a certain column is sortable:

```js
const headers = [
  {
    key: 'name',
    header: 'Name',
  },
  {
    key: 'status',
    header: 'Status',
    sort: 'sortByStatus',
  },
];
```

You can now use the `sort` key to determine if the column is sortable, and once clicked, which field the server should sort on. You'll end up with something like this:

```jsx
{ headers.map( header => (
    <TableHeader
    {...getHeaderProps({
      header,
      isSortable: Boolean(header.sort),
    })}
    onClick={header.sort ? handleSort : undefined}
    isSortHeader={Boolean(header.sort)}
    sortDirection={getSortDirection(orderBy, header.sort)}
    >
    {header.header}
  </TableHeader>
))}
```

### Typescript

The headers object now gives a TypeScript error, because the `sort` doesn't exist. This can be solved as follows:

```ts
import { DataTableHeader } from 'carbon-components-react';

export interface DataTableHeader extends DataTableHeader {
  sort?: string;
}
```
Live lo-fi streams to listen to while coding
Published: 2021-08-24 19:12:55

Looking for lo-fi beats to work, relax, or study to? Here are 8 lie lo-fi streams to play in the background and help you focus while coding.

####1. lofi hip hop radio - beats to relax/study to by Lofi Girl
<a href="http://www.youtube.com/watch?feature=player_embedded&v=5qap5aO4i9A
" target="_blank"><img src="http://img.youtube.com/vi/5qap5aO4i9A/0.jpg"  alt="lofi hip hop radio - beats to relax/study to by Lofi Girl" width="240" height="180" border="10" /></a>

####2. Chillhop Radio - jazzy & lofi hip hop beats 🐾 by Chillhop music
<a href="http://www.youtube.com/watch?feature=player_embedded&v=5yx6BWlEVcY
" target="_blank"><img src="http://img.youtube.com/vi/5yx6BWlEVcY/0.jpg"  alt="Chillhop Radio - jazzy & lofi hip hop beats 🐾 by Chillhop music" /></a>

####3. ＣＨＩＬＬ　ＲＡＤＩＯ ２４／７ by the bootleg boy
<a href="http://www.youtube.com/watch?feature=player_embedded&v=21qNxnCS8WU
" target="_blank"><img src="http://img.youtube.com/vi/21qNxnCS8WU/0.jpg"  alt="ＣＨＩＬＬ　ＲＡＤＩＯ ２４／７ by the bootleg boy" width="240" height="180" border="10" /></a>

####4. coffee shop radio // 24/7 lofi hip-hop beats by STEEZYASFUCK
<a href="http://www.youtube.com/watch?feature=player_embedded&v=-5KAN9_CzSA
" target="_blank"><img src="http://img.youtube.com/vi/-5KAN9_CzSA/0.jpg"  alt="coffee shop radio // 24/7 lofi hip-hop beats by STEEZYASFUCK" width="240" height="180" border="10" /></a>

####5. chill lofi beats to code/relax to by Joma Tech
<a href="http://www.youtube.com/watch?feature=player_embedded&v=bmVKaAV_7-A
" target="_blank"><img src="http://img.youtube.com/vi/bmVKaAV_7-A/0.jpg"  alt="chill lofi beats to code/relax to by Joma Tech" width="240" height="180" border="10" /></a>

####6. lofi hip hop radio - beats to sleep/chill to by Lofi Girl
<a href="http://www.youtube.com/watch?feature=player_embedded&v=DWcJFNfaw9c
" target="_blank"><img src="http://img.youtube.com/vi/DWcJFNfaw9c/0.jpg"  alt="lofi hip hop radio - beats to sleep/chill to by Lofi Girl" width="240" height="180" border="10" /></a>

####7. ✨ star wars ~ lofi beats to relax/study to by Closed on Sunday    
<a href="http://www.youtube.com/watch?feature=player_embedded&v=o33l32ZrIy8
" target="_blank"><img src="http://img.youtube.com/vi/o33l32ZrIy8/0.jpg"  alt="lofi hip hop radio - beats to sleep/chill to by Lofi Girl" width="240" height="180" border="10" /></a>

####8. 24/7 bedroom lofi for midnight sleep, relaxing, chillout [ lofi / lofi hip hop / chillhop ] by tone by Gridge
<a href="http://www.youtube.com/watch?feature=player_embedded&v=pCuy6U-RVFk
" target="_blank"><img src="http://img.youtube.com/vi/pCuy6U-RVFk/0.jpg"  alt="lofi hip hop radio - beats to sleep/chill to by Lofi Girl" width="240" height="180" border="10" /></a>

Check out my website focusli.com to stream 30 [live music stations to help you study/relax](https://www.focusli.com/).
LOFI 🎵
Classic 🎹
Jazz 🎷
Techno 🎛️
Meditation 🧘
Frotnend Mentor - 3 Column Preview Card Component
Published: 2021-08-24 19:09:07

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51w9hdboghxakfqe0puv.png)

3 Column Preview Card Component design from the website Frontend Mentor.

https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-

You can see my finished version here:

[Github repo](https://github.com/Aituos/FM--3-Column-Preview-Card-Component) | [Live version](https://aituos.github.io/FM--3-Column-Preview-Card-Component/)

This was an easy challenge that didn't take long to complete. Sorry for the short post but I don't really think I've learned anything from it :joy:

Well, maybe I could've set up variables for the colors, or create classes for more elements (like the paragraphs), which is something I'd definitely do in a bigger project... but for something this small and quick I just didn't bother.
How To Clone a Project From GitHub (windows)

Tags: github, git, codenewbie, 100daysofcode
Published: 2021-08-24 19:02:32

https://www.youtube.com/watch?v=-N1FUl3ndLQ&t=69s

In this video, we learn how to clone a project from GitHub onto our local machine.

•Fitness
•Code
•Philosophy 
(And Much More!)

Blog - http://www.aaronwagerblog.com/
Instagram https://www.instagram.com/aaronwager7/ | aaronwager7
Twitter - https://twitter.com/aaronwager7 | aaronwager7
CSS fundamentals
Published: 2021-06-30 16:23:43

CSS is my favorite programming blackhole to find myself in. It's easy to get lost for hours in the backend of a project that by the end of the day leaves you feeling tired and mentally drained. CSS is something I could easily 
sit and mess around with all day and still be excited about. I think it has to do with the fact there is an immediate result to see and can make your projects feel real and ready to launch even if there isn’t a single line written in the
backend. I love the fact I can create the smallest color, font, layout, or margins/padding changes on something simple like a button and create a completely different feel for the user. 
 
 On one of my first experiences with using CSS was in a coding workshop that I had a challenge to showcase what I had learned over the course. Things like linking sites, rendering photos, hover functions and more HTML and CSS. When working on this challenge I was definitely more focused on  making sure I was executing the functionalities rather than using CSS properties to my full advantage. Since my time at Flatiron and actually learning the full benefits of CSS, looking back on that project I realized there were so many advantages that I could have implicated.
 
Rather than just using CSS as a styling option for font sizes and colors, which I did at the time, I've learned about using classes to render less code in my HTML and making it lightweight and easier to maintain and update. The accessibility of CSS gives more consistency in design elements like formatting and layout. Going forward in other projects I try to use CSS to my full advantage in the presentation and structure of my projects.
Manage Node applications using PM2
Tags: node, webdev, pm2
Published: 2021-08-24 19:01:20

#### What is PM2?
PM2 is a daemon process manager that helps micro service developers in node manage and keep applications online. Using PM2 is straightforward, it offers a simple and intuitive CLI. it is installable via NPM.

#### What it can do for us?
Using PM2 we can start, restart, stop, delete an node application. That means we can manage the application lifecycle of node applications using PM2. Feel free to read [my blog](https://www.cloudnativemaster.com/post/pm2-and-its-uses-in-node-js-application) for details with example.
How This Book Made Me A Millionaire | Deep Work Book Review

Tags: books, codenewbie, webdev
Published: 2021-08-24 18:58:31

In this video, I discuss how this book Deep Work By Cal Newport made me a millionaire

https://www.youtube.com/watch?v=JGrfIaC_2aw
YouTube | Aaron Wager 

•Fitness
•Code
•Philosophy 
(And Much More!)

Blog - http://www.aaronwagerblog.com/
Instagram https://www.instagram.com/aaronwager7/ | aaronwager7
Twitter - https://twitter.com/aaronwager7 | aaronwager7
Accessing Firebase services
Tags: firebase, beginners, webdev, programming
Published: 2021-08-24 18:45:00

Firebase API follows a straightforward approach. 
By invoking these methods will get you access to each Firebase service.

![Firebase API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbnv108sxdv2nhha8d9o.png)

### Syntax to access Firebase Firestore

```
firebase.firestore()
```

### Syntax to access Firebase Authentication

```
firebase.auth()
```

### Syntax to access Firebase Storage

```
firebase.storage()
```

### Firebase hosting commands
Firebase Hosting uses a command-line interface instead of methods on the Firebase object. Run the following commands:

#### Initialize a Firebase project

```
firebase init 
```

#### deploy a Firebase project

```
firebase deploy 
```


Feel free to share if you found this useful 😃.
Basic: Using Async and Await with Axios
Tags: frontend, axios, async, await
Published: 2021-08-24 18:16:07

Axios is a promise based HTTP client for the browser and Node.js. Axios makes it easy to send asynchronous HTTP request to REST endpoints and execute CRUD operations. It is used in Javascript or with a framework such as Vue.

## Get
```js
const getResponse = async () => {
     try {
          const response = await axios.get('url')
     } catch(err) {
          console.log('err')
     }
}
```

## Post
```js
const createPost = async () => {
     const payload = {
          userid: 42,
          firstName: 'John',
          lastName: 'Doe'
     }

     try {
          // axios automatically serializes the payload to JSON.
          // no need to JSON.stringify({ userid: 42, ...})
          const res = await axios.post('url', payload)
     } catch(error) {
          console.log(error)
     }
}
```
"Support for password authentication was removed on August 13, 2021. Please use a personal access token instead."
Tags: github, git, security, programming
Published: 2021-08-24 18:02:52

Recently, everyone is getting this message from Github.

So, Github has removed the support for password authentication and now we have to use **Personal Access Token (PAT)** in place of passwords to authenticate ourselves.

![Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5eeaw99iggyjtzdwxnew.png)

**Let's see how this works and move on to our lives!**
* Go to your settings
![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj9qbf302toyv6rhgi6a.png)

* Select Developer Settings
![Developer Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gclgfjj7zkwb7dbrgen.png)

* Select Personal Access Token and click on Generate new token
![Genrate new token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7n41hfbebi41cji93p9.png)

* Select expiration duration and scopes for the token.
![Create Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nld1gv6q4z30l8jpupi7.png)

* Once token is created make sure to copy your token to somewhere safe because you won't be able to see it again.
If you lost it, you will have to create a new one.
![Token Created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbrm4qdwbkwgykgkxrj3.png)

* Now, you can use your PAT in place of your password and your code will be pushed.
![Code pushed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwsfs42s6iqyftbe8k0y.png)


> If you don't want to enter your PAT every time, you can save your git credentials in cache.
```
git config --global credential.helper cache
```

That's it, now we can get back to our bugs peacefully!
Firebase core services
Tags: firebase, beginners, webdev, programming
Published: 2021-08-24 18:01:00

## Firestore database

![Firestore database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qliisl5vchs8xas8j4v3.png)

Firestore is an excellent choice these days as almost every app needs persistent data. Following are the benefits of firestore:
- Realtime
- NoSQL
- Security

### Realtime
Realtime means that for every change made in the database, the connected users updates with these changes. This feature saves you a lot of time when you are developing applications. It provides clear logic and reduces your code length.

### NoSQL
Firestore is a NoSQL document database. There has been a surf of popularity for NoSQL databases. A lot of developers find them more comfortable to use.

### Security
Firestore provides a set of security rules with which you can easily create restrictions for who can read, write, update, or delete data from your database.


## Hosting 

![Hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w96xl0bl2gmvynbh1ba.png)

Firebase Hosting is an easy to use service even for beginners. Following are some impressive reasons to use this service:
- SSL for Every Site
- Fast Servers
- Deploy From CLI

### SSL for Every Site
The SSL certificate is automatically provisioned and configured for each site deployed.

### Cached on SSDs
Sites deployed to Firebase Hosting are cached on SSD’s(Solid State Drive) for a low latency reliable experience.

### Deploy From CLI
Deploying your app to the web from a local directory only takes one command.



## Storage 

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

We love to share photos, videos, and gifs. Firebase storage enables your users to store and share these files through your app. Some of the features of the Firebase storage service are:
- Handle Large File Sizes
- Flexible File Type

### Handle Large File Sizes
Firebase storage can scale up to petabytes.

### Flexible File Type
There are no limitations on the types of files you can upload, which means you can use this service for images, videos, PDFs, etc.


## Authentication 

![Authentication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irk835xr7su5paudhy2f.PNG)

To build an authentication system from scratch is tiresome and can get tricky. Firebase offers a solution to authentication that requires less code, less time, and better security through the following features:
- Email and Password Authentication
- OAuth authentication
    - Using an existing platform to authenticate a user is known as OAuth. Firebase utilizes Google, Facebook, Twitter, Github, and many other providers that you can use to authenticate your users.

Each Firebase service can be used on its own or together with the other services. Hence makes it easy to pick and choose the right services for your specific application.

Firebase offers various services.
So, I encourage you to take the time to explore the other services as well.

Feel free to share if you found this useful 😃.
An Introduction to Microservices pt. 4
Tags: architecture, microservices, ocelot, csharp
Published: 2021-08-24 17:44:28

## Table of Contents
1. [What are we trying to solve?](#problem)
2. [The Solution: Load Balancer](#solution)
3. [Show Me the Code](#code)
4. [Bibliography](#bibliography)

On part 3, we talked about [Service Registry and Health Checks](https://dev.to/bernas1104/an-introduction-to-microservices-pt-3-h13). Now, we're going to improve our Gateway and take advantage of the possibility of multiple instances given by the Service Registry.

## What are we trying to solve? <a name="problem"></a>
So far, we've implemented an API Gateway that receives all the requests and routes them accordingly. Also, our services/instances are registered with our Service Registry and the Gateway checks the service's location with it. But how can we make so that our Gateway uses all available instances of a service and no instance becomes overloaded?

## The Solution: Load Balancer <a name="solution"></a>
To insure that, we need to implement a Load Balancer. This pattern will leverage the requests between available instances of our services. Ocelot gives us a simple way to implement a Load Balancer. Also, it provides a few different algorithms of load balancing:

1. Round Robin - Imagine that you have three instances of a given service. The algorithm will make so that the first request is handled by instance #1, the second by instance #2, the third by instance #3, the fourth by #1 again, and so on;
2. Least Connections - Every new request is sent to the instance with the least amount of active connections;
3. Cookies Sticky Sessions - Uses a cookie to direct all request to a specific instance.

**IMPORTANT**: Keep in mind that other load balancing solutions might have different algorithms.

## Show Me the Code <a name="code"></a>
To implement our Load Balancer, Ocelot makes it very easy. All we need to do is add a new property to our 'ocelot.json' file. This property needs to be added on a route per route basis:

```json
{
  "Routes": [
    {
      // ...
      "LoadBalancerOptions": {
        "Type": "RoundRobin"
      }
    },
    {
      // ...
    }
  ],
  // ..
}
```

That's it! Our API Gateway can now balance the load between all of our services instances!

On the next article, we'll talk about the [Messaging pattern](https://dev.to/bernas1104/an-introduction-to-microservices-pt-5-4j7i) pattern. Until next time.

## Bibliography <a name="bibliography"></a>
1. Ocelot: Load Balancer - https://ocelot.readthedocs.io/en/latest/features/loadbalancer.html#configuration
Java catch calls function again and again
Tags: exception
Published: 2021-08-24 17:06:14

I used simple try catch block, while raising exception my catch block calls the function n number of time. Can anyone help on this?pls help on below code.

int var;
void myfunction(class object)
{
try
{
//Code
}
catch(Exception e)
{
myfunction(object);
}
}
Assign value to multiple variables at once in Javascript
Tags: javascript, tips, html, codenewbie
Published: 2021-08-24 16:50:52

The **destructuring assignment** syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
```
    let [a,b,c] = [1,2,3];

    console.log(a,b,c);
```
Output:

![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b8yxsbyhx8e3c9634r9.PNG)
My Blog:- https://beginners-developer.blogspot.com/
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Why you should aim to be at a company with a lot of users
Tags: career, productivity, javascript
Published: 2021-08-24 16:45:58

This is something I wish I did earlier on..

First I worked at a small startup, I don’t think anyone used what we built…and it was horrible.

My next few jobs were working at B2B enterprise software companies where not daily active users used the product.
My current job has LOTS of users, and I’m one of them. And I’m happy and it has done a lot for my career for credibility.

Why is this important?

1. From a technical perspective its important to be in a company where “oh shit” protocol is in place and you know how to fix a problem that could be potentially costing the business hundreds of thousands of dollars

2. When you are networking or going into an interview, if they have used your product your credibility goes through the roof and they want to work with you.

Its ok not to be at a company like this, but strive to get there one day. 

It will help your career development and the problems you get to solve will most likely be more fun.

Want more? Come join our Facebook group to help you get your first job as a software engineer, career development, and so much more!

https://www.facebook.com/groups/310120400851953

- Scott
What is Firebase?
Tags: firebase, beginners, webdev, programming
Published: 2021-08-24 16:38:00

[Originally posted here!](https://aswinbarath.github.io/What-is-Firebase/)

Let us first understand how is a full-stack application built.
A full-stack application consists of a front-end component and a back-end component.
A front-end component is what we see, a user interface(UI).
A back-end component communicates with the UI to send, receive, store and/or delete data.

Firebase is **Back-End as a Service (BaaS)**.
Firebase gives you all the benefits of a back-end without the complexities of creating one up from scratch.

## Benefits of Firebase

### Reduce Development Time
Let's face it. We can get impatient when we want a full-stack application as soon as possible. With Firebase, you can cut down development time.

### Security
Firebase provides built-in security. If you configure it in the right way, your app will be a solid fortress.

### High-Speed Caching
Your app deployed using Firebase hosting gets cached on solid-state drives (SSD) throughout the world. Your app loading time will become extremely fast that also helps with SEO.

### Realtime Data
Cloud Firestore database updates all connected clients in real-time. The ability to get real-time updates makes applications a lot easier to implement.



Feel free to share if you found this useful 😃.
Frontend Dev Work
Tags: work, development, frontend, javascript
Published: 2021-08-24 16:35:24

Hey Dev.to community,

I'm looking for a few developers to help me out with some work I've landed. A friend and I are starting a digital agency and need help with the total workload.

Most of the work is frontend, related to standard javascript/html/css, but could expand to other platforms and/or JS frameworks. Right now, looking for someone who is well-versed in JS and general frontend technologies. Experience with banner ads and landing pages is a huge plus!

Email me to learn more. Feel free to inquire about pay and I'll reply back to your email.

If you're interested, give me a shout!


- Eric

eric@devagency.codes
Google pay with vue
Tags: vue, googlepay, googlepaybutton
Published: 2021-08-24 16:27:26

Recently i needed to develop an vue application with google pay, showing it's button.
It was not that hard to implement but i ran through some torubles, so i created a repo with the button working if you need on https://github.com/lavesan/google-pay-vue

If this helped you, don't forget to give this post a like!