teleren/devto huggingface dataset:
Overcome procrastination like a hero
Tags: programming, code, software, developer
Published: 2021-02-02 00:32:26

So it's Friday morning and you're struggling to meet up with the deadline set by your project manager. You know it's a task that could have been done earlier and in convenience but you couldn't help but keep scrolling through the latest threads on Twitter and watching cat videos on Pinterest (cute!). Honestly, it's something we all go through and though it might seem unsurmountable, it is rather easy to surmount.

Procrastination is the act of putting off important tasks for less rewarding and easier tasks. It is often mistaken for laziness but it is way different from laziness. 

The battle against procrastination is a never-ending one so I'll share a few hacks I use to `trick` myself into completing tasks on time. 

## Acknowledge your habit of procrastination

You have to, first and foremost acknowledge the fact you are a procrastinator (I know, it hurts). This puts you in the position of knowing your flaw and actually putting in work against it. As with all problems, identifying it is the first and most important step.

## Focus on starting, not finishing

The more we dwell on finishing a particular task, the more we dread getting on it. A workaround for this is to focus on starting the task, forget about finishing up the task, just get on it and start something no matter how minute it may seem. You'll might be surprised to wind up with the task done in no time.

## Keep Yourself a To-do list

This list should be comprehensive and have a breakdown of the larger tasks into smaller chunks. This'll take your mind off the task as a whole and lets you do your thing getting things done.

## Hold yourself accountable

"Yes, we are back on your case, you won't get discharged till you hold yourself accountable". Put yourself in the spotlight and tell yourself you can get it done. It is always harder the first few tries but as you hold yourself more and more accountable for getting these tasks to the finish line, you realize the habit of getting things done is actually dope (dope!).

## Tackle the hardest tasks at your peak time

So you've started working on that feature you've been putting off for weeks but you're feeling like taking a nap to continue later? 
Don't!
Truth is, you're just looking for an excuse to leave the task for a later time which might be another four weeks from now. No matter how hard it may seem, persisting might just be what you need to get it done. 
Some tasks might be really hard to get done at that point in time, so setting a reminder or alarm to come back to that task is a good solution.

## Reward Yourself

Yay!, so you set a target for yourself and reached a milestone, what's next?. Go get yourself that ice-cream you've been meaning to for a while. Getting tasks done and doing it on time is a huge achievement and you need to pat yourself on the back and shout out a nicely done hero!.

Congrats!, you're winning the fight against procrastination and getting more productive hours in, be careful not to let the villain back in though, who knows what havoc he'll wreck.
Apache Kafka Introduction for beginners in 6 mins
Tags: apachekafka, tutorial, beginners, devops
Published: 2021-02-02 00:06:32

In this tutorial you will learn about **Apache Kafka**, an **open-source distributed event streaming platform**.
We will talk about what Kafka is and what problems it solves.
Apache Kafka was designed to solve mainly 2 problems, the data integration problem and the real-time processing problem.
To understand what this actually means, I will also explain what was the 'typical' approach before Kafka and
why Apache Kafka can be considered the central nervous system for data.


###**Table Of Contents**
+ Apache Kafka's Origins
+ Why Apache Kafka: Data Integration
+ Integration with Small Numbers of Systems
+ More Systems introduce Complexity
+ Decoupling Data Streams and Systems
+ Typical approach: Batch Processing
+ Why Apache Kafka: Real Time Processing
+ Stream Data Platform
+ Apache Kafka: the central nervous system for data

<hr /> **Watch the full video here 🤓:** {% youtube N3ZfuIQCNtA %} <hr />

**Like, share and follow me 🤓**

[YouTube](https://www.youtube.com/c/AngeloCesaro)
[Twitter](https://twitter.com/angelocesaro)
Import Default Export
Tags: javascript, webdev, modules
Published: 2021-02-03 19:46:57

---
title: Import Default Export
published: true
date: 2021-02-02 00:00:00 UTC
tags: 
canonical_url: https://chan.dev/posts/import-default-export/
---

There can only be one `default` export.

```js
export default function Highlander() {}
```

A JavaScript module is allowed any number of named exports. But default exports are in short supply. You get one and only one.

```js
export default function Highlander() {}
export default function OtherHighlander() {}
// SyntaxError: Identifier '.default' has already been declared
```

This limit on defaults empowers a sugary syntax on the import side.

```js
import Highlander from "./highlander.js";
```

We can assign the default export to any variable name, without fuss.

```diff
- import Highlander from "./highlander.js";
+ import LiterallyAnything from "./highlander.js";
```

## So, what should be the default? [#](#so%2C-what-should-be-the-default%3F)

[In my last post](https://chan.dev/posts/import-all-named-exports-into-one-variable), I demonstrated how I use named exports to expose UI components that are designed to work together.

```js
export List …;
export ListItem …;
export Controller …;
```

With this structure, `default` becomes a natural place to expose a, default composition of those components for drop-in use.

```js
export List …;
export ListItem …;
export Controller …;
export default function EmailList() {
  return (
    <Controller>
      <List
        renderItem={item => <ListItem item={item} />}
      />
    </Controller>
  )
}
```

Now, anywhere I want the default composition, I maximally renamable import.

```js
// ./app.js
import EmailList from "./email.js";
export default function App() {
  return (
    <main>
      <EmailList />
    </main>
  );
}
```

## A note on exporting functions [#](#a-note-on-exporting-functions)

Because default exports aren't referenced by the provided name, there's a tendency to leave off of functions names.

"It's cleaner!"

Unfortunately, leaving the name off will impact your developer experience. DevTools will treat these references as anonymous functions.

So, I recommend adding keeping a descriptive name.

## My take [#](#my-take)

I love default exports — when used as intended.

A lot of folks in frontend recommend using _only_ default exports and mandating one-component-per-file. This feels contrary to the design of JavaScript modules. And the practice has the secondary effect of requiring bespoke file structures to communicate components relationships and private components — something modules already do well.

Use named exports and defaults — together — as intended.

## Go pro [#](#go-pro)

This is part of a course I'm creating on modules at [lunch.dev](https://www.lunch.dev/).  
When live, members get access to this and other courses on React.

<script src="https://cdn.podia.com/embeds.js" async="async"></script>[Join lunch.dev for videos](https://www.lunch.dev/member)
How to get the current scroll state value of the window using JavaScript?
Tags: javascript
Published: 2021-02-02 00:00:00

---
  title: How to get the current scroll state value of the window using JavaScript?
  published: true
  tags: JavaScript
  date: Tue Feb 02 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-current-scroll-state-value-of-window-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-01d08643019a02712ce9c3966d532be8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-current-scroll-state-value-of-window-javascript)
  
To get the current scroll state value, you can use the `pageXOffset` and `pageYOffset` properties in the global `window` object in JavaScript.

```js
// Current Scroll state value from top
const scrollValuefromTop = window.pageYOffset;

// Current Scroll state value from left
const scrollValuefromLeft = window.pageXOffset;
```

- The `pageYOffset` will give the scroll value state which is from the top of the page.
- And the `pageXOffset` will the scroll value state which is from the left of the page.

See this example live in [JSBin](https://jsbin.com/tarecesiri/2/edit?js,console).

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

---
Performing a GROUP BY on data in bash
Tags: bash, shelltricks, dataengineering
Published: 2021-02-18 11:09:52

---
title: Performing a GROUP BY on data in bash
published: true
date: 2021-02-02 00:00:00 UTC
tags: bash,shelltricks,dataengineering
canonical_url: https://rmoff.net/2021/02/02/performing-a-group-by-on-data-in-bash/
---

_One of the fun things about working with data over the years is learning how to use the tools of the day—but also learning to fall back on the tools that are always there for you - and one of those is bash and its wonderful library of shell tools._

I’ve been playing around with a new data source recently, and needed to understand more about its structure. Within a single stream there were multiple message types.

{% twitter 1355097951094366209 %}

Each message has its [own schema](https://gpsd.gitlab.io/gpsd/AIVDM.html#_ais_payload_interpretation), and a common `type` field. I wanted to know what the most common message types were. Courtesy of [StackOverflow](https://stackoverflow.com/a/380832/350613) this was pretty easy.

My data happened to be in a Kafka topic, **but because of the beauty of unix pipelines the source could be anywhere that can emit to `stdout`**. Here I used `kafkacat` to take a sample of the most recent ten thousand messages on the topic:

```shell
$ kafkacat -b localhost:9092 -t ais -C -c 10000 -o-10000 | \
  jq '.type' | \
  sort | \
  uniq -c | \
  awk '{ print $2, $1 }' | \
  sort -n

1 6162
3 1565
4 393
5 1643
8 61
9 1
12 1
18 165
21 3
27 6
```

- `kafkacat` specifies the broker details (`-b`), source topic (`-t`), act as a consumer (`-C`) and then how many messages to consume (`-c 10000`) and from which offset (`-o-10000`).

- `jq` extracts just the value of the `type` field

- `sort` orders all of the `type` values into order (a pre-requisite for `uniq`)

- `uniq -c` outputs the number of occurrences of each line

- The remaining commands are optional

  - `awk` changes round the columns from `<count>,<item>` to `<item>,<count>`

  - The final `sort` arranges the list in numeric order
Importance Of First Impressions Online with Matthew Brannelly
Tags: consultingprogram, onlineimpression, matthewbrannelly, initialenquiries
Published: 2021-02-01 23:48:58

According to Matthew Brannelly first impression online plays very important role. When marketing your professional firm, it is essential to have a very clear message which is communicated in the strongest possible fashion that will guarantee you have a VOICE in the marketplace so that your firm makes a great first impression – otherwise the potential client may move away from your website very quickly.  Your Voice in the market is what gets you heard above the noise of the crowd.
Answer this question about meetings for the chance to appear on the DevDiscuss podcast!
Tags: discuss, podcast
Published: 2021-02-01 23:37:09

---
title: Answer this question about meetings for the chance to appear on the DevDiscuss podcast!
published: true
tags: discuss, podcast
---

The [DevDiscuss Podcast](https://dev.to/devdiscuss) begins with an interview and ends with commentary from listeners — and we like to feature the actual _voices_ from our community!

In order to round out an upcoming episode about effective meetings, we'd like to know...

> ### **“What do you think are the best ways to make meetings better and more efficient?”** 
  
For your chance to appear on an upcoming episode, answer the question above by:

- Calling our Google Voice at +1 (929)500-1513 and leave a message 📞

- Sending a voice memo to pod@dev.to 🎙

- OR, leaving a comment here (we'll read your response aloud for you) 🗣

_Please send in your recordings by Wednesday, February 3rd at Midnight, ET (9 PM PT, 5 AM UTC)_

_**Voice recordings will be given priority placement**_ 😉 

---

Don't forget to check out the most recent season of DevDiscuss [here](https://dev.to/devdiscuss)
How to Build a Car Racing Game in AR in 15 Minutes or Less
Tags: tutorial, unity3d, augmentedreality, gamedev
Published: 2021-02-01 23:13:22

How to Build a Car Racing Game in AR in 15 Minutes or Less
Are you looking to create a car racing game in your living room using augmented reality just like the upcoming [Mario Kart] (https://www.youtube.com/watch?v=___uxqYhUDU&ab_channel=TheGamer) AR game for Nintendo Switch? Try this Car racing AR demo app build with echoAR, Unity and AR Foundation. The full demo can also be found on echoAR's [GitHub] (https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Car-Racing).

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

## **Register**
If you don't have an echoAR API key yet, make sure to register for FREE at [echoAR] (https://console.echoar.xyz/#/auth/register).

## **Setup**
* [Add the 3D model] (https://docs.echoar.xyz/quickstart/add-a-3d-model) from the [models] (https://github.com/echoARxyz/Car-Racing-Demo-echoAR/tree/master/Models) folder to the console.
* [Add the metadata] (https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) found in the [metadata] (https://github.com/echoARxyz/Car-Racing-Demo-echoAR/tree/master/metadata) folder.

## **Run**

* [Build and run the AR application] (https://docs.echoar.xyz/unity/adding-ar-capabilities#4-build-and-run-the-ar-application).

## **Real-time updates**
Add/remove/edit models in the console and notice that the interactive models in the AR scene changes automatically.

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

## **Learn more**
Refer to our [documentation] (https://docs.echoar.xyz/unity/) to learn more about how to use Unity, AR Foundation, and echoAR.

## **Support**

Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack] (https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

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

> *echoAR (http://www.echoAR.xyz; Techstars '19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p6vc0rbsk8m2t97ml636.png)
How to Handle Puppeteer’s waitFor Deprecation
Tags: puppeteer
Published: 2021-05-27 19:23:45

---
title: How to Handle Puppeteer’s waitFor Deprecation
published: true
date: 2021-02-01 23:05:00 UTC
tags: Puppeteer
canonical_url: https://javascriptwebscrapingguy.com/how-to-handle-puppeteers-waitfor-deprecation/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-handle-puppeteers-waitfor-deprecation
---

Puppeteer has deprecated waitFor! But it’s not as terrible as you think.

<iframe title="How to handle Puppeteer's waitFor deprecation" width="640" height="360" src="https://www.youtube.com/embed/g_LpODTOc8g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

There it is! Looking good!

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [How to Handle Puppeteer’s waitFor Deprecation](https://javascriptwebscrapingguy.com/how-to-handle-puppeteers-waitfor-deprecation/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
CSRF tokens for SPAs - Possible?
Tags: security
Published: 2021-02-01 22:54:11

In the previous post, we discussed CORS, CSRF tokens, SameSite, clickjacking and JSON hijacking. With all that preparation, we can finally answer the question if CSRF tokens can be used in a SPA, or not?.

If you paid good attention to the previous article, you might already know the answer. Yes! But there are some things we have to be careful of. Also, how would you set it up?

---

## Setup

This article assumes you already have a backend that provides a CSRF token solution.

There is actually more than one way to set this up, depending on what your backend's CSRF token solution offers, I will introduce two approaches.

### Approach 1: A cookie

1. The client initializes CSRF protection by calling an endpoint on the API server that sets a cookie with httpOnly set to false holding the CSRF token
2. For subsequent API requests, the client grabs the cookie from `document.cookie`, and passes it to the request (usually in the header under "X-CSRF-TOKEN")
3. With each API request, the API server updates the cookie with a fresh token.

For the API server to place a cookie that the client can read, the SPA and the API server have to be on the same domain.

### Approach 2: An API endpoint

1. The backend needs to provide an API endpoint (e.g. `/csrf`) that returns a CSRF token
2. The client calls this endpoint to get their token
3. The CSRF token is then passed into each subsequent API request similar to approach 1

This approach works also if SPA and API are on a different domain.

#### 🤔 When should the client get a new CSRF token?

There are a few options:
- Grab a new token each time before making a request by calling "/csrf" again
- Make the backend return a new token as part of every API response, and make the client use it for the next request

#### 🤔 How is the CSRF token endpoint secured?

1. The API server **must** have CORS set to allow only trusted sites like the SPA. This is to prevent third-party AJAX requests from getting hold of a CSRF token that works for you.
2. The endpoint's response must not be JSON hijackable. `{ token: 'xxx' }` will do.

#### 🤔 Can an attacker not just call the "/csrf" endpoint from a server, where CORS doesn't apply?

This question was actually covered in my previous article, not for API endpoints, but for grabbing a CSRF token from a form in the HTML.

But it's the same story: CSRF tokens are typically bound to the user's session, so **your** CSRF tokens won't work for **me**.

---

Finally, depending on the solution you pick, and your backend setup, you might have to add logic to handle token expiry. For example, by redirecting to the login page when receiving a 401 or 419 status.

Next time, let's see how auth cookies should be secured.
Day 299 : Rain
Tags: hiphop, code, coding, lifelongdev
Published: 2021-02-01 22:51:43

_liner notes_:
- Saturday : Got up early to finish up working on the radio show. Finished it up and watched an episode of "WandaVision". It's getting really good. Then had the show and had really good time as usual. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of Cicely Tyson smiling with her arms spread wide with the words Jan 30th 2020 GameStopped](https://dev-to-uploads.s3.amazonaws.com/i/quh4minaa0eunhlh6m3y.jpg)

- Sunday : Pretty productive day. Finished up the post radio promotional work and set up email blasts. Got the audio player on https://myslides.page reworked so it wouldn't skip any time timestamps. Did my laundry. Watched an episode of a new show on BBC called "The Watch". I need to catch up on episodes. Ended the night with a meeting with some friends to see what they've got planned and see how I can help. Got to demo the dashboard for https://otech.events. They seemed to like it.

- Professional : Got to do the live stream show at work today. Got to demo an application I was building at work and https://myslides.page . We worked through some errors in an application we were building on the stream. Really good show. Got to talk to a bunch of people in the chat. After that, worked on some updates of a page to add some more functionality to a tool. Ran into a couple of snags I need to figure out.

- Personal : Got woken up early in the morning by some heavy rain and wind. It was pretty loud. Can't wait till I get to build out the inside of my van and add sound dampening. Checked on my order and it still says processing. It's been like 2 weeks! haha

![A huge striped mountain in Old Paria, UT, USA at sunset.](https://dev-to-uploads.s3.amazonaws.com/i/cyfx63n1273nia6uwhrv.jpg)

Left from my folks place, got some Wendy's and made my way to the park. About to take a walk around the park and stretch my legs. After that, going to fix some glitches I ran into at work. Then will probably watch another episode of "The Watch" and design out a project I've been working on.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube oNWFeA5_bnY %}
MongoDB - Aggregation Framework - series #01
Tags: javascript, mongodb
Published: 2021-02-01 22:45:31

Let me demonstrate a few simple database queries on MongoDB using their Aggregation Pipeline Framework:


```js
lpromise(
  mgArr(dbEnum.nlp, collEnum.terms,
    matchRegex("pronounc", /zh/),
    sortAsc("hw"),
    projectIncludeNoId("hw", "pronounc"),
  )
);
```

```js
/*
partial output:
  { hw: 'akathisia', pronounc: '=(a ku THEE zhu)' },
  { hw: 'ambrosia', pronounc: '=(am BROO zhu)' },
  { hw: 'amnesia', pronounc: '=(am NEE zhu)' },
  { hw: 'anesthesia', pronounc: '=(an is thee zhu)' },
*/
```

## Notes:

* The above example query retrieves every word that has a "zh" sound in its pronunciation.

* The above is a functional abstraction around the stages.
This is the same query using the raw stage syntax (which is in a JavaScript object format):
```js
lpromise(
  mgArr(dbEnum.nlpdb, collEnum.terms_defs,
    { $match: { pronounc: /zh/ } },
    { $sort: { hw: 1 } },
    { $project: { _id: 0, hw: 1, pronounc: 1 } },
  )
);
```

* The pipeline of a Mongo aggregation pipeline is an array of query stages.

* A stage is a JavaScript object containing stage keywords that start with a "$".
This example above contains three stages: $match, $sort, $project.

* The utility func, "mgArr" is a wrapper func that makes a call to the Mongo database. The "mg" is short for Mongo, and the "Arr" indicates the datatype it returns. The only other type we can return is obj, thus "mgObj" is the other util func.

* The mgArr takes as arguments the (1) db name and (2) collection name and (3) the spread out set of 1 or more stages that comprise the actual database query.

* I "spread" it so we don't have to use the array square brackets "[]" every time

* $match is like "filter" or "where"

* $project is how you limit what fields to return (to project) back to the caller.
0 means to skip this field (_id is the PK and always returns by default)
1 means to return that field

* the lpromise is a utility func that logs the promise returned from the db.


## What's next?

If anything is unclear let me know.

I'll be posting more examples and the utility funcs themselves over the coming days.
CSS Logical Properties
Tags: css, webdev, tutorial
Published: 2021-02-01 22:27:12

Part 4 of the 21 CSS tips for 2021 Series

[Subscribe To The Channel!](http://www.youtube.com/FollowAndrew?sub_confirmation=1)

{% youtube 0dD6cXcdvN8 %}
Watch the Video Tutorial on YouTube for a visual explanation!