teleren/devto huggingface dataset:
The root cause of procrastination is lack of clarity
Tags: productivity
Published: 2020-07-07 17:05:44

A little while ago, my co-founder and I started to understand what causes us to procrastinate. I want to share what we've learned.

For us, the main cause of procrastination is lack of clarity on what needs to be done.

It's tricky, because sometimes you might feel like you know what needs to be done. But your next steps are too high-level. You're holding too much in your head at a time - and it's stressful. You don't know precisely where to start.

People used to think procrastination was a sign of poor time management and laziness. Now, psychologists understand that "procrastination is an issue with managing our emotions, not our time." [1] When the task we're putting off isn't clearly defined, it seems too difficult. It makes us "feel bad". And so "to make ourselves feel better in the moment, we start doing something else."

The best way to address this is to start breaking things down. This will make the task easier, and so there won't be an emotional burden with getting started.

Start by jotting down a list of everything you can think of that's related to your task. In this brain-dump - let ideas flow freely. Don't cut yourself off to try to write better. And don't make your list in your head! Write it down. [2]

Once you jot down your first list, scan through what you've written. Is there anything that's not specific and actionable? If so, zoom in and do another brain-dump on that task. Repeat until you only have very specific items.[3]

When you're done, you'll have a very simple next task to do. You won't be intimidated anymore and you'll be able to get started without pressure.

So, the next time you see yourself procrastinating. Ask yourself - "How completely do I understand the next task I need to do?"

[1] https://www.bbc.com/worklife/article/20200121-why-procrastination-is-about-managing-emotions-not-time

[2] See how creator Adam Stanton uses checklists to tackle big creative problems: https://www.wired.com/story/adam-savage-lists-more-lists-power-checkboxes/

[3] Specific tasks use specific verbs. Read more: https://blog.amazingmarvin.com/break-large-projects-tasks-bite-sized-tasks/

[4] More on how my team does brain-dumps: https://medium.com/better-programming/cultivate-your-can-do-attitude-10864742d76d

Image from Karim MANJRA: https://unsplash.com/@karim_manjra?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText
How to get a list of your globally installed NPM packages? The easy way.
Tags: npm, javascript, modules, web
Published: 2020-07-07 17:01:03

---
title: How to get a list of your globally installed NPM packages? The easy way.
published: true
description: Check your global npm packages
tags: npm, javascript, modules, web
cover_image: https://miro.medium.com/max/1400/1*KJLQ5QyizNp_nSmoTiNICQ.pnghttps://direct_url_to_image.jpg
---

If you have use NPM for some time you'd know that you can install packages using the `-g` flag.

At one point you would like to get a list of all you globally installed packages. You can accomplish that with `npm list -g` but that will show you an overwhelming list.

For a more user-friendly approach, I would recommend using `npm list -g --depth 0` instead.   

The inclusion of the `--depth` 0 flag means that npm will only list the packages at the top level of the tree.
FreeCodeCamp: Tribute Page
Tags: css, webdev
Published: 2020-07-07 16:49:23

I have been working on my CSS skills. Still a beginner though.

I tried this challenge from FCC: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

and somehow ,using my naive-sleep-deprive CSS, created the pen. I used FlexBox, but it can be done without it too.

{% codepen https://codepen.io/rneha725/pen/OJMQzdZ %}
Google Font Animation
Tags: codepen
Published: 2020-07-07 16:45:06

<p>Introduction to variable google fonts and animation with GSAP. Shoutout to <a href="https://codepen.io/jh3y" target="_blank">@jh3y</a> for making me curious about these font animations to build my own without the TextSplit GSAP Plugin. Enjoy! :)</p>

{% codepen https://codepen.io/spherical/pen/zYrRrVq %}
Contributing to Scikit-learn
Tags: python, machinelearning, opensource, datascience
Published: 2020-07-07 16:42:05

These two videos provide detailed guidance on how to make your first contribution to scikit-learn, the machine learning library of Python.

[Learn to Contribute to Scikit-learn](https://www.dataumbrella.org/open-source/contributing-to-scikit-learn), in less than an hour.
CSP (with A+ in mozilla observatory) + Angular2+
Tags: angular, unsafe, inline, csp
Published: 2020-07-07 16:40:57

Hello!

Has anyone gotten to publish an angular 2+ project and csp (with A + in mozilla observatory), without using the unsafe-inline alternative?

I'm trying to use the nonce alternative, but I have some doubts about it ...

1. Whose responsibility is it to generate the value of a nonce, client or server?

2. Any web server that you recommend for this case? (Currently the policy is being implemented in a lambda function of AWS from a cloud front)

3. Some way to inject or pass the nonce value to the client into the index.html to later read it from angular?. (by metatag,  I think)

Thanks for your attention.
Use HashiCorp Terraform to Manage Your Auth0 Configuration
Tags: auth0
Published: 2020-07-07 16:40:13

Learn how to use HashiCorp Terraform and the Auth0 Provider to maintain your critical infrastructure, including your Auth0 configuration, in code.
[Learn more...](https://auth0.com/blog/use-terraform-to-manage-your-auth0-configuration/?utm_source=newsletter&utm_medium=sc&utm_campaign=terraform_auth0)
Five things every developer should know about software architecture
Tags: architecture
Published: 2020-07-07 16:19:54

---
title: Five things every developer should know about software architecture
published: true
description: 
tags: #architecture
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vageoe01nsosj565s08u.png
---

Here are five things every developer should know about software architecture:

1. [Software architecture isn’t about big design up front](https://dev.to/simonbrown/software-architecture-isn-t-about-big-design-up-front-4hol)
2. [Every software team needs technical leadership](https://dev.to/simonbrown/every-software-team-needs-technical-leadership-3b71)
3. [The software architecture role is about coding, coaching, and collaboration](https://dev.to/simonbrown/the-software-architecture-role-is-about-coding-coaching-and-collaboration-4gp3)
4. [You don’t need to use UML](https://dev.to/simonbrown/you-don-t-need-to-use-uml-4kaa)
5. [A good software architecture enables agility](https://dev.to/simonbrown/a-good-software-architecture-enables-agility-3k2)

This video of my "Software Architecture for Developers" talk explores these five things in more detail.

{% youtube z1xLDzx7hgw %}

![Five Things Every Developer Should Know about Software Architecture](https://dev-to-uploads.s3.amazonaws.com/i/46g9ty1b7s4w5z8s7fwn.png)

([sketchnote created by Urs Enzle](https://www.planetgeek.ch/2017/07/05/sketchnote-software-architecture-for-developers-by-simon-brown-at-developer-week-2017/))
Job Search Week 20
Tags: makers
Published: 2020-07-07 16:16:26

I spent this week applying to different companies and typing cover letters. I managed to get all the applications done so I was happy enough with this week.

Day 1

On Monday I was still I was typing up the readme for my todo API project. I also took some time to look through some of the job posting on indeed, totaljobs and otta and pick out some of the ones that appealed to me the most.

Day 2

On Tuesday I finished up the todo API readme and debugged a problem with the tests. I had to reorder the integration tests because they wouldn't work if your database was empty. This also meant that it wouldn't delete any actual data and it does delete the test data.

Day 3

Wednesday is when I started typing the cover letters. I had already look at the companies I had chosen so it was just comparing my skills to the ones they were looking for and then I outline all my compatible skills. I also updated my portfolio on GitHub.

Day 4

On Thursday I continued to prep cover letters. I managed to get most of them done and ready send-off on Friday. More people have been getting jobs recently so it's reassuring to know that while typing cover letters.

Day 5

I spent Friday going over the cover letters and sending they off after I proofread them. Hopefully, I'll get more positive replies in the upcoming weeks.

Summary

I managed to get 20 applications out this month with more people getting jobs I'm feeling more confident getting a job sometime soon.
ASP.NET Core Series: SignalR
Tags: dotnet, aspnet, realtime, webdev
Published: 2020-07-07 16:11:36

ASP.NET Core SignalR is an open source library that makes that helps developers add real-time web functionality to their applications.

In this episode, Christos chats with our friend Brady Gaster from the ASP.NET Team. Brady gives quick overview of what we can do with SignalR as well as highlights some of the new features the team has been working on.

{% youtube E02hBQqNP5E %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


## Useful Links
<ul>
<li><a href="https://docs.microsoft.com/aspnet/core/signalr/introduction?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Introduction to <span class="s1">ASP.NET</span> Core SignalR</a></li>
<li><a href="https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-6?WT.mc_id=ondotnet-c9-cephilli" target="_blank">ASP.NET Core updates in .NET 5 Preview 6</a></li>
<li><a href="https://docs.microsoft.com/aspnet/core/tutorials/signalr-typescript-webpack?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Use ASP.NET Core SignalR with TypeScript and Webpack</a></li>
</ul>
A good software architecture enables agility
Tags: architecture, agile, leadership
Published: 2020-07-07 16:04:39

---
title: A good software architecture enables agility
published: true
description: 
tags: #architecture #agile #leadership
series: Five things every developer should know about software architecture
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vageoe01nsosj565s08u.png
---

There still exists a common misconception that "architecture" and "agile" are competing forces, there being a conflict between them. This simply isn’t the case though. On the contrary, a __good software architecture enables agility__, helping you embrace and implement change; whether from changes in requirements, business processes, mergers, etc.

What is considered a "good architecture" is still up for debate of course but, for me anyway, the core characteristics of a good architecture relate to good modularity, reached through an appropriate decomposition strategy. If you've experienced the pain of making a major change to an existing big ball of mud, where seemingly unconnected parts of the codebase break, then you'll appreciate that having a well structured codebase (good modularity) is important.

A big problem I see with teams today is that they adopt, what George Fairbanks calls in his [Just Enough Software Architecture](https://www.georgefairbanks.com/book/) book, "architecture indifferent design". In other words, teams adopt an architectural style without necessarily considering the trade-offs. This is often done because of hype, trend, fashion, and "CV-driven development".

In today's world, this is commonly manifested in teams adopting a microservices architectural style simply as a reaction to their existing monolithic codebase being considered a mess. Jokes about these same teams subsequently creating a "distributed big ball of mud" to one side, it turns out that the process of software design and decomposition is hugely important, irrespective of whether you're building a monolithic or a microservices architecture. Don't choose microservices because your monolithic codebase is a mess!

{% youtube 5OjqD-ow8GE %}

## Summary

You don't get agility or a good architecture for free. Some conscious design effort is needed, and trade-offs need to be considered. This, again, is why creating that starting point with [some up front design](https://dev.to/simonbrown/software-architecture-isn-t-about-big-design-up-front-4hol) is crucially important. A good architecture enables agility.
Share your latest website or app design
Tags: webdev, design, app, discuss
Published: 2020-07-07 15:54:37

I've been quite active designing modern app and web designs as well as UI designs. I wanted to see what the dev community has to offer regarding visual designs.

So share a link, screenshot or whatever of your latest/nicest design in the comments, and let's get inspired from each other!

Mine is this landing web page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xhr7ve4dbp66b1roiaf4.jpg)

link: <a href="https://flexrweb.com/altitude">Altitude App</a>
Warning on 3rd Party NPM Packages
Published: 2020-07-07 15:36:41

Some NPM Packages have a deeply hidden flaw. They don't keep up with the times! 

Here's an example of a failed Angular 9 migration due to a 3rd party package.

```
 Package "@ng-select/ng-select" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0 <8.0.0" (extended), would install "9.1.11").
 Package "@ng-select/ng-select" has an incompatible peer dependency to "@angular/forms" (requires ">=6.0.0 <8.0.0" (extended), would install "9.1.11").
 Package "@ng-select/ng-select" has an incompatible peer dependency to "@angular/core" (requires ">=6.0.0 <8.0.0" (extended), would install "9.1.11").
 Package "@ngtools/webpack" has an incompatible peer dependency to "typescript" (requires ">=3.4 < 3.6", would install "3.8.3").
```
Too bad we didn't think about or find this a year ago when we wanted to use it.

The only solution now, is to get rid of it or if we are lucky to

``` 
ng update --force 
``` 
This worked for us, but there were a bunch of complaints. 

JWP 2020
#JulyOT - Configure and Deploy "Intelligent Video Analytics" to IoT Edge Runtime on NVIDIA Jetson
Tags: ai, computervision, nvidia, iot
Published: 2020-07-07 15:31:43

---
title: #JulyOT - Configure and Deploy "Intelligent Video Analytics" to IoT Edge Runtime on NVIDIA Jetson
published: true
description: Erik and Paul create an Azure IoT Hub and backing storage account in Microsoft Azure, then instrument a Jetson Nano with IoT Edge and configure it with a deployment that uses these services to accommodate an intelligent video analytics solution. Part 2 of a 5 part series created for #JulyOT - more details @ http://julyot.com
tags: artificialintelligence, computervision, nvidia, iot
---
Erik and Paul create an Azure IoT Hub and backing storage account in Microsoft Azure, then instrument a Jetson Nano with IoT Edge and configure it with a deployment that uses these services to accommodate an intelligent video analytics solution.

Part 2 of a 5 part series created for #JulyOT - more details @ http://julyot.com

The full steps to reproduce this project can be found on github @ https://github.com/toolboc/Intelligent-Video-Analytics-with-NVIDIA-Jetson-and-Microsoft-Azure

For more information on the services employed, check out:
[IoT Edge Documentation](https://docs.microsoft.com/en-us/azure/iot-edge/?WT.mc_id=julyot-devto-cxa)
[IoT Hub Documentation](https://docs.microsoft.com/en-us/azure/iot-hub/?WT.mc_id=julyot-devto-cxa)
[Stream Analytics Documentation](https://docs.microsoft.com/en-us/azure/stream-analytics/stream-analytics-edge?WT.mc_id=julyot-devto-cxa)
[IoT Blob Storage Documentation](https://docs.microsoft.com/en-us/azure/iot-edge/how-to-store-data-blob?WT.mc_id=julyot-devto-cxa)

Camera used in demo: Foscam FI9821P, though any RTSP based camera should suffice.
Add commit hash version to your React app
Tags: react, ionic, tutorial, webdev
Published: 2020-07-07 15:30:00

##Problem
Check the current build version to be sure that everything is up-to-date. Ideally in some unnoticeable for user place on the page (if you have any reasons not to use console in this case). 

##Solution (Step-by-step)

* Get the last git commit hash from the command line

`git rev-parse --short HEAD`

* Execute the script above with Node.js. The best option to do this is with Node.js child_process. 

`child_process.execSync(git rev-parse --short HEAD)`
The only thing you should know here is that `execSync` allows you to execute the command [synchronously](https://nodejs.org/api/child_process.html#child_process_child_process_execsync_command_options). 

* Create an environment variable that contains a necessary hash. By default, your variable should be starting with REACT_APP_. In other cases, it would be ignored. 

There are several ways to do it actually. The first one is to replace your standard start and build project commands in `package.json` with this one

```"start": "export REACT_APP_VERSION=$(git rev-parse HEAD) && react-scripts start",
"build": "export REACT_APP_VERSION=$(git rev-parse HEAD) && react-scripts build"```

or just insert this line to your `webpack.config.js`
`const commitHash = require('child_process').execSync('git rev-parse --short HEAD')`
Calculated commit hash should be wrapped with `DefinePlugin` function in plugins array.

```new webpack.DefinePlugin({
    'COMMIT_HASH': JSON.stringify(commitHash),
 })```

That's all. Now your hash is available in the React app code `process.env.REACT_APP_VERSION`

>Note: the environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as described here. Alternatively, you can rebuild the app on the server anytime you change them. [Create React App docs](https://create-react-app.dev/docs/adding-custom-environment-variables/)

* It's better to store the value of such variables in any global store like Redux or just as a global variable

`window.VERSION = process.env.REACT_APP_VERSION`


That's it.

Happy Codding ⌨️! ❤️
Multithreading in C++
Tags: cpp
Published: 2020-07-07 15:26:25

## Introduction
Previously I've introduced the lambda expression in C++, I'll show a example how to use lambda expression in the multithreading. If you don't read it, here is [link](https://dev.to/gapry/introduce-c-lambda-37oe).

In the post, I will introduce three concept of multithreading and use an example to show how to do it in C++ Programming. The example is the random ten points generation.

1. Create Thread
2. Join
3. Lock

## Create Thread

To create a thread, we have two methods to achieve. One is the following code snippet.
```c++
auto task(float x, float y, float z) -> void {
  ...
}
auto worker = std::thread(task, x, y);
```

Other is the lambda expression.
```c++
auto worker = std::thread(
  [](float x, float y, float z) { ... }, 
  arg1, 
  arg2);
```

If you need to create a set of threads at the same time, you can utilize the `std::vector`.
```c++
auto spawn(void) -> std::vector<std::thread> {
  auto workers = std::vector<std::thread>();
  workers.emplace_back(
    [](float x, float y, float z) { ... }, 
    x, y, z);
  return workers;
}

auto workers = spawn();
```

## Join
Once we create the threads, the **thread-join** is easy.
```c++
auto workers = spawn();
for (auto& worker : workers) {
  worker.join();  
}
```

## Lock
We need to output the point(x, y, z) to the terminal.
```c++
workers.emplace_back(
  [](float x, float y, float z) { 
    std::cout << "(" << x << ", " << y << ", " << z << ")";
  }, 
  x, y, z);
```

But, you will find the output is not the same for each time. To fix the issue, we can utilize `std::mutex`.
```c++
std::mutex mtx;

workers.emplace_back(
  [](float x, float y, float z) { 
    mtx.lock();
    std::cout << "(" << x << ", " << y << ", " << z << ")";
    mtx.unlock();
  }, 
  x, y, z);
```

Thank you for reading, see you next time.

## References
1. [std::thread](https://en.cppreference.com/w/cpp/thread/thread)
2. [std::uniform_real_distribution](https://en.cppreference.com/w/cpp/numeric/random/uniform_real_distribution)
3. [Race Condition](https://en.wikipedia.org/wiki/Race_condition)
let's animate minion using gsap
Tags: 10daysofanimation, gsap, javascript
Published: 2020-07-07 15:23:33

This is the fourth post of `10 Days of Animation` and I am loving it. Today, I'll walk you through **timeline** functionality of gsap. 
As the name suggests, `timeline` feature lets you animate in sequence. The flexibility gsap provide makes it even more awesome. 

I used timeline to animate minion like this.

{% codepen https://codepen.io/rahuldkjain/pen/qBboxqR default-tab=result %}

Cool right!
If you are curious to know how to do such stuff, please read the whole article.

If you look carefully, you'll understand that the animation combines of multiple animations one after the other. Let me make this simple for you. The animations used in sequence to make the animation visually interesting are:
```
displayBody()
bringGoggles()
displayGoggleShadow()
displayDungaree()
displayEyes()
moveEyes()
displayHand()
jump()
displayLegs()
displayShadow()
displayMouth()
displayHair()
blinkEyes()
```

The best part is that you can animate these sub-animations individually and then combine it using timeline.

The syntax look like this
```js
var master = new gsap.timeline({repeat: -1, repeatDelay: 0.3})
```

To manage the timings, labels or checkpoints are used. See how I used it.
```js
master.add('checkpoint-1')
master.add(displayBody(), 'checkpoint-1')
master.add(goggle(), 'checkpoint-1+=0.2')
master.add('checkpoint-2')
master.add(displayGoggleShadow(), 'checkpoint-2-=0.3');
master.add(displayDungaree()).add(displayEyes()).add(moveEyes(-10)).add(displayHand('.left-hand'));
master.add(moveEyes(10)).add(displayHand('.right-hand')).add(moveEyes(0))
master.add('checkpoint-3')
master.add(jump()).add(displayLegs()).add(displayShadow(), 'checkpoint-3');
master.add(displayMouth(), 'checkpoint-3+=0.8').add(displayHair(), 'checkpoint-3+=0.8');
master.add(blinkEyes())
```

This looks simple, I am telling you this sole feature takes the animation to a next level.
I am coming with more crazy animations in the coming days. 
Stay tuned.

Happy Animating!
Is C still a high level language?
Tags: healthydebate, c, discuss
Published: 2020-07-07 15:05:49

I keep hearing that C is no longer a High Level Programming Language because it is no abstractions, has pointers, have to handle memory on our own, no string data type, unsafe etc.

Do you think that C is not a high level language anymore? I am against this because it's still readable as any other high level and usable as ever and has many libraries and still been updated.
How do you maintain focus on learning just one topic/concept?
Tags: discuss, productivity
Published: 2020-07-07 15:00:09

There are so many different languages and technologies out there that sometimes I find myself to be working on web dev one week, and then iOS dev the next, and this cycle tends to repeat. 

How do you maintain your focus for learning one thing at a time, and how do you know when to move on to learning the next thing?