teleren/devto huggingface dataset:
How to install pip3 on mac
Tags: python, help, beginners, tutorial
Published: 2021-11-13 19:54:00

#What is it about
Most of the installations you are going to use during your developer processes use PIP3 especially when you dig into the programming language Python.

The reason is simple, PIP is a package manager for this language. It allows you to manage libraries and dependencies that are added to the standard library, but not just that. It helps you to install those whos are missing during your development process.

#Difference between PIP and PIP3
As these are more likely to look like shortcuts to something they are. PIP is a [recursive acronym](https://en.wikipedia.org/wiki/Recursive_acronym) that stands for PIP install packages. 

PIP is understood as a soft link for a particular installer. Your operation system will use one of your Python versions depending on what exactly is known as first in the system PATH variable. 

To know what it is and where it is on this particular path it simply types this command to view the system file.

```
nano ~/.zshrc
```

When you run the PIP3 command, you can be sure that this particular module or dependency will be installed in Python3. 

#How to install with Brew
If you installed previously most of the stuff on your mac with help of Brew then this command is for you. If not start simply by adding this command from https://brew.sh/ into the terminal prompt.

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
This first installation process is awkwardly long, but don't get bored. Just wait and approve by entering what does it ask for. Then just go ahead with this simple command.

```
brew install python3
```
You can check the version of your PIP3 by entering this straightforward code as <code>-V</code> stays for the version number to request.

```
pip3 -V
```
You'll receive a PIP3 version number with a path to the last installation process.

#Installation as another way around

You can make it without using brew just simply downloading an official file from Python Packaging Authority - Pypa.io.

```
curl -O https://bootstrap.pypa.io/get-pip.py
```

And then after simply executing installation with the command mentioned hereunder.

```
sudo python3 get-pip.py
```

The installation will pass and here you are. PIP3 is on your system as final. Ready to install and roll out your new python script with help of libraries and dependencies.

Thanks to [Andrew Ruiz](https://unsplash.com/@andrewruiz?utm_source=unsplash&utm_medium=referral&utm_content=CreditCopyTextGratitude) for the cover image from Unsplash.
How does TensorRT 8.2 work?
Published: 2021-11-13 19:51:23

---
title: How does TensorRT 8.2 work?
published: true
description: In this video we look into how TensorRT 8.2 works. Talk about the improvements made in TensorRT and also what's new in 8.2.
tags:
cover_image: https://i.ytimg.com/vi/M2cz_-QDnjY/maxresdefault.jpg
---

{% youtube M2cz_-QDnjY %}

In this video we look into how TensorRT 8.2 works. Talk about the improvements made in TensorRT and also what's new in 8.2.
Let's build a list of real and alive open-source Angular projects.
Tags: angular, opensource, github, webdev
Published: 2021-11-13 19:51:05

I only found lists polluted with dead/toy/component-library OSS projects. (or even containing AngularJS projects)

I want to find *some real and alive open source projects* which are using Angular. I'm sure some of us want to dive deeper and read some Angular code used in real life.

Feel free to mention projects in the comments and I will try to keep the list up to date.

List:

1. **PeerTube** (*Angular 13* | 9.9k Github stars) 
https://github.com/Chocobozzz/PeerTube

2. **Openproject** (*Angular 12* | 5.3k Github stars)
https://github.com/opf/openproject

3. **Oppia** (*Angular 11* | 4.3k Github stars)
https://github.com/oppia/oppia
Build a template Dockerfile with ONBUILD
Tags: docker
Published: 2021-11-13 19:25:45

## Why? 
Industry Dockerfile usually is far more complicated than a demo, most time, we need to build our own base image. What if you want to run some common steps in a child Dockerfile? For example, all children docker images must run a setup.sh script. Here how `ONBUILD` instruction can help.

## How
Let's define a base image.
```
FROM openjdk:16-alpine3.13

WORKDIR /app

ONBUILD COPY ./setup.sh .
ONBUILD RUN ./setup.sh
ONBUILD COPY src ./src
```
Let build the base image
`docker build -t my-base-image`

Now, let see how the child image looks like.

```
FROM my-base-image:latest

WORKDIR /app

CMD ["./mvnw", "spring-boot:run"]

```

From the example, you can see, we have a much tiny child image. More important, we have a common pattern across all children images. For example, if child image is missing `setup.sh`, the build will fail.

## Note
`ONBUILD` instruction is not inherited by “grand-children” builds.


## Reference
https://docs.docker.com/engine/reference/builder/#onbuild
Do you know Termux has a Graphical Environment?
Tags: android, codenewbie, devjournal
Published: 2021-11-13 19:21:20

A couple week ago, I tried Fluxbox and it's really awesome. I installed this in my Termux and explore the complete GUI version through a vncserver.

Follow these steps if you want to do the same: https://wiki.termux.com/wiki/Graphical_Environment

Now, I can use almost all the linux tools in my phone. But, one thing is to be considered. As this is the graphical interface of Termux, we can only use termux commands here.

To explore the complete linux system, you have to install a distribution inside your Termux Emulator.

Have fun!
Your doctor (parent process) – is your prescription publisher, meanwhile you, well guess who you are ?..
Tags: node, process, programming
Published: 2021-11-13 19:19:41

If you reading , it means you are subscriber , you (*as child process*) read doctor's `stdout & stderr` i.e. you are a child process (subscriber) that consumes the output as Writable, not as Readable stream as what you may expected initially. In layman's terms you behave opposite than you doctor, common sense, you are not a doctor (unless RIP Don Shirley)

```javascript
const path = require('path')
const child_process = require('child_process');
// child_process.spawn(command@string, args@array, {options@object})

let ls = child_process.spawn('ls', ['-la'], {cwd: path.join(__dirname)})
// console.log(ls.pid /* self */ === ls._handle.pid /* inherited from parent */)

// the line below will be ignored , 'cause this is child process : it does not intended to consume stdin ;
ls.stdin.on('data', (data)=>console.log("data:", data))

ls.stdout.on('data', (data) => console.log(`stdout: ${data}`));

ls.stderr.on('data', (data) => console.log(`stderr: ${data}`)); // give spawn command as e.g lsapfhjsfjka to reproduce error

ls.on('close', (code) => console.log(`child process exited with code ${code}`));

```

---

This been first of short series on Dev.to . See you in a next one ! <br>
Thanks to @devternity for support I've been spared up today !
hello world
Tags: webdev, beginners, devjournal, codenewbie
Published: 2021-11-08 00:54:59

My name is Charlie Hoer and I am starting this blog to document my coding journey. So I guess I'll start with my story.

Where to start, 2003 seems like a good place. In 2003 I was a high school graduate with an A+ scholarship and dreams of becoming an engineer, but I test in to the lowest math class St. Charles Community College offered. Along with the huge math hurdle to overcome I found the classes boring. So I switched to a business major, but it was the same. I took a few more classes until my scholarship ran out. Then I tried my hand at finding a career with little success and after a few more years I decided to return to college. After meeting with the career counselors and taking a few test I landed on graphic design, which was a much better fit. And this my friends is where I would eventually be introduced to coding. 

Now my initial exposer to web-design was not great. for an idea on time I believe this was around 2008 in my first round of graphic design school. My professor was burnt out and taught an outdated way of creating web sites called the photoshop method. It was almost no coding, you laid the site out in photoshop then sliced it into separate sections then exported them to dreamweaver, I don't remember learning anything about code and was not impressed with it.  So I chose a print based design path.  And graduated in 2009.

Armed with my new degree and some help from a few friends I struck back out into the world to procure a career as a graphic designer. Got a job designing for a print shop, bought a house and had my girlfriend move in. A few months later we found out she was pregnant and things seemed to going in the right direction, until. She was about 6 months along I go in to work one morning and was let go for lack of work. Now with a son on the way a wedding coming up and bills to pay I took the first job that came a long, which was as a delivery driver. Which I thought would just be temporary til my freelancing took off, but I am still there 9 years later. 

After a few years of hit or miss freelance work I decided my skills needed a brush up and again I returned to school. This time something magic happened I was exposed to coding websites! It combined everything I loved learning, creativity, problem solving, bringing my web layout to life. It was one giant ever changing puzzle to solve and I was hooked. Now its 2016 I am still in my low paying full time job married with 2 kids so money is tight so I went the Codecademy route. true to form though there were set backs and issues to deal with so I got lax on my learning.

Which pretty much brings us to the present, today is November 7, 2021. I am currently 15% of the way through the front-end engineer career path on Codecademy pro. I will be at 100% by July 4, 2022.  I am creating this blog not only for me but in hopes it might help someone else with a similar situation and for my sons so one day they might know how hard I worked to give them the best life I possibly could.

And with that rather long introduction out of the way LET THE JOURNY BEGIN!
Building Arduino On Breadboard for stand alone Circuits
Tags: programming, tutorial, beginners, cpp
Published: 2021-11-13 18:49:18

Today, we will learn how to build your own stand alone Arduino on breadboard 

Components Required 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abhu7b08lj8b4imkg84y.png)

pin mapping diagram for AtMega328p

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t409bc048f6mwfpneqs.png)

Here pin mapping diagram describes each and every pin need to be connected, pin No 1 of (AtMega328p) is connected to the reset switch, and a pull up resistor is also connected to the switch to ON state, pin No 7 & 20 connected to (+5v), pin no. 8 & 22 connected to (GND), pin no 9 & 10 connected to 16 MHz Oscillator to generate clock pulse coupled with two 22pF non electrolytic capacitors, an indicating LED is connected to pin no 19

Connections 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39vsr5cgdwuojuyya98z.png
)


Wire configuration to upload code to stand alone Arduino

in this step we will use an ARDUINO UNO(Without IC) as a programmer to program our stand alone circuit 

ARDUINO PINS >> ATMega328p
Reset Pin-------Pin no one 
Tx pin----------Pin no three
Rx pin----------Pin no two
5v--------------Pin no 7
GND-------------Pin no 8

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8pw2k8p5jjvekcu9ibu.png)

Uploading sketch to our stand alone circuit 
open Arduino IDE 

Step:1
Tools> Board> Arduino UNO

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xujgcjrb8gecyfz3ybwo.png)


Step:2
Tools> Port> (Relative comport depends upon your Serial communication ports)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkr7vq2bd6iw9j7ttett.png)

Step:3 
Tools> Programmer> ArduinoISP

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktb6hmnet5f1q0ii86ze.png)

Step:4 
File> Examples> Basics> Blink

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgu5o5yfrt9dhgn9zq9w.png)

Step:5 
Click Upload 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azifq2icfvdvm9es9q83.png)



Powering stand alone circuit 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys7m77hrzg6pjtw19rk5.png)


Find Full Video on YouTube 

https://www.youtube.com/watch?v=CfwZGt1JQGE&t=41s
Just driving on a track (use a,w,d / arrows)
Tags: codepen
Published: 2021-11-13 18:46:20

<p>Adding to the collection of DIY Video Games: <a href="https://codepen.io/collection/jbqyoq" target="_blank">https://codepen.io/collection/jbqyoq</a></p>

{% codepen https://codepen.io/creativeocean/pen/yLoxpRq %}
#codeVember #12/2021: bars animation
Tags: codepen
Published: 2021-11-13 18:45:35

<p><a href="https://ello.co/shonk/post/wkvji8elaxdmk2y9kbujmg" target="_blank">https://ello.co/shonk/post/wkvji8elaxdmk2y9kbujmg</a></p>

{% codepen https://codepen.io/thebabydino/pen/QWMVgMj %}
Glassmorphism Creative Cloud App Redesign
Tags: codepen
Published: 2021-11-13 18:44:13

<p>Inspired by Mikołaj Gałęziowski
"<a href="https://dribbble.com/shots/14831798-Glassmorphism-Big-Sur-Creative-Cloud-App-Redesign" target="_blank">https://dribbble.com/shots/14831798-Glassmorphism-Big-Sur-Creative-Cloud-App-Redesign</a>"</p>

{% codepen https://codepen.io/TurkAysenur/pen/ZEpxeYm %}
How does Angular know about (click)?
Tags: angular, todayilearned, html, webdev
Published: 2021-11-13 18:37:54

`<button (click)="doSomething()">Do it</button>`
I used the above syntax lots of times, almost daily.

But how does Angular know how to deal with this `(click)` thing? 
It seems to work with any element, even custom Angular components. So how does this work?

It works because of the so called [Event Biding](https://angular.io/guide/event-binding). Basically it binds the target event name (*click*) to a method from the component (*doSomething*).

As explained in this [nice article] (https://dev.to/ngconf/angular-event-binding-deep-dive-20bg) , Angular doesn't have a list of it's own event names, but it actually uses the names of the underlying DOM events.

So the event binding part of the `<button (click)="doSomething()">Do it</button>` snippet is the equivalent of this vanilla snippet:

`element.addEventListener('click', () => { doSomething() });
`

This means the if I want to know which events I can bind to in Angular I can search them here: https://developer.mozilla.org/en-US/docs/Web/Events

What about the `$event`?

If the event is a DOM event, like *click, mouseenter, keyup* etc then the `$event` is the event itself. For example in the case of `click`, the $event is a `MouseEvent`.
But for custom events (using the [EventEmitter](https://angular.io/api/core/EventEmitter)) the `$event` is actually the emitted data.
How to learn AWS for free ?
Tags: beginners, tutorial, aws, devops
Published: 2021-11-13 17:18:41

𝑻𝒘𝒐 𝑮𝒓𝒆𝒂𝒕 𝒂𝒏𝒅 𝑭𝒓𝒆𝒆 𝑨𝑾𝑺 𝒍𝒆𝒂𝒓𝒏𝒊𝒏𝒈 𝒓𝒆𝒔𝒐𝒖𝒓𝒄𝒆𝒔 below:
1/ AWS skill builder - https://lnkd.in/gnAzj7bH
2/ Free AWS trainings at amazon.com - https://lnkd.in/g_FCjGvF

I just "buy" (free) one and watching #dataanalytics !
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbh4nphq9vbe153cw31s.jpg)
[ original LI post at https://www.linkedin.com/feed/update/urn:li:activity:6865332472352260096/]
My NPM Modules
Published: 2021-11-13 17:13:37

I created a few NPM modules to help with work and personal projects

I tried a few existing packages, but found that all had many other dependencies...creating large project repos

Since I needed simple functionality, I decided to make my own without dependencies

- [QuickGitJs](https://www.npmjs.com/package/quickgitjs): a simple node tool to interact with local repo for status and updates

- [QuickJSONConfig] (https://www.npmjs.com/package/quickjsonconfig): a silly package that reads a JSON (such as package.json) and allows accessing and updating of the file. I say *silly* because it does a silly thing as it reads in each element...it creates get/set functions for each top-level JSON element. I did this for fun and realize is it not really practical

- [QuickAsk] (https://www.npmjs.com/package/quickask): a simple prompt function that gets and returns user responses

- [QuickTextColor] (https://www.npmjs.com/package/quicktextcolor): a library of ansi color codes to make cli node apps a little nicer

- [QuickHTTPD] (https://www.npmjs.com/package/quickhttpd): simple node server using the http built-in module. Supports http and https. I built this to help me understand server-side certificate usage
My first Hackathon Experience
Tags: javascript, webdev, beginners, programming
Published: 2021-11-13 16:37:27

A hackathon is similar to a meetup for programmers looking for like-minded individuals. Techcrunch Disrupt, HackMIT, HackNY, Codespace, Flipcart GRID, and others are among the hackathons I've heard of. There are many more, and you can find them by searching online.

So, let us get started with today's topic. Hello, my name is Kunal and I am a developer from India who is just starting out in the world of technology.
I recently finished my first hackathon of my life and would like to share my experience with you all.

- **First of all**, I went to [devfolio](https://devfolio.co/home/) Website and Sign Up for the Account.
- __Secondly__, I went to the [Hackathon](https://devfolio.co/hackathons) section and discovered my first organisation, _[Reva Hack](https://revahack.com/#/)_, which is a student community-based online hackathon for coding enthusiasts.
- __Thirdly__, I formed a team with Koshik, whom I met on the Discord server, and we called ourselves Hack-Up007, and we began work on __*Abhaya*__ "a Women Safety App." {% 
github https://github.com/koushik-sherugar/Abhaya %}
- Now, once we start working, we run into a problem such as how to send an SOS message when a user is in danger. We used the Twilio API to do it, and then we had to get the current user's location in order to send an SOS message. Throughout the process, we encountered numerous challenges.
- __*What I Learnt*__ 🔥:- 
1. __Team Up__:- During that time, we both worked as a team, solving each other's problems.
2. __Working under Pressure__:- I worked all day to get to the point where I was overjoyed when we discovered the bug and fixed it. 
3. __Presenting final Products__:- We need to provide an elevator pitch and are stuck in the middle as to how and who will present the idea. 

That was a rewarding experience for me. I plan to attend more hackathons and learn as much as I can.

Feel free to leave a comment in the Discussions section. It is intended for your response; please make use of it.😅
Tech-blogging the easy way
Tags: webdev, javascript, showdev
Published: 2021-11-13 16:19:53

Lately I have seen a lot of posts here about how to set up your own blog. It's not a surprise that a regular Wordpress-installation doesn't really scream developer. On my personal blog [neoan.us/blog](https://neoan.us/blog), I use [blua.blue](https://blua.blue) and if you are a follower you will notice that many of my dev.to contributions originate from there as well (whenever I want to publish to multiple sites/services). However, knowing that the PHP-crowd here is miniscule I decided to provide you with 2 repositories you can start with that do not require the use of the blua.blue-API (because they are webhook-based) and allow you to simply design your blog using the means of your choice.

| Description | Repo |
| --- | --- |
| serverless framework | {% github sroehrl/serverless-blog %} |
| file-based (mono-repo node & PHP) | {% github sroehrl/minimal-blog %} |

## How to use them

After deploying one of these versions, sign up with blua.blue and navigate to your profile. You will find the tab "Webhooks". With both repositories, you will want to generate a webhook to `https://your-endpoint.tld/receive`. There is no need for a token as we check for allowed origins, but ultimately you will want to set one of your choice and then verify the source of the payload (sent through authorization header as bearer token) in order to prevent other blua.blue-users to post on your behalf.

## That's it

Lastly, please be aware of two things:

1. These repos are very basic and meant to be a boilerplate rather than a final solution. I am happy to accept pull-requests
2. Share! If you built something beautiful, let everyone know in the comments!
How to display a navbar component after logging in without reloading the page in angular 12
Tags: angular, rxjs, typescript, javascript
Published: 2021-11-13 16:11:17

***My landing page does not show a navbar, but I want to display a navbar after logging in successfully.  Currently, I'm able to show navbar if I do a full page reload after logging in successfully.*** I'm very sure that there is a better way than this approach.

---

**app.component.html**
```html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
```

---

**login.component.ts**
```js
login(){
    this.credentials = this.myForm.value;
    if(this.credentials){
      this.loginService.authenticate(this.credentials)
      .subscribe(data => {
        this.storageService.setLocalStorageItem('auth', JSON.stringify(data));
        this.dataService.global.showNav = true;
        this.sharedService.getProjectMetadata()
        .subscribe(metadata => {
          this.storageService.setLocalStorageItem('projectMetaData', JSON.stringify(metadata));
          this.router.navigate(['/home']);
        })
      }, err => console.log(err));
    } else {
      console.log('Please enter your username and password');
    }
  }
```

---

**data.service.ts**
```js
import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { IGlobal, IMessage } from '../../Shared/interfaces';
import { MessageCallback } from '../../Shared/types';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }

  date: string = (new Date()).toString();

  global: IGlobal = {
    showNav: false,
    sessionTimedOut: false,
    timezone: this.date.substring(this.date.indexOf('GMT')),
    projectMetaData: {
      name: ''
    },
    isAdmin: false,
    auth: {
      roles: {
        admin: false,
        developer: false
      }
    }
  }

  private handler: Subject<IMessage> = new Subject<IMessage>();

  broadcast(type: string, payload: any){
    this.handler.next({type, payload});
  }

  subscribe(type: string, callback: MessageCallback): Subscription {
    return this.handler.pipe(filter(message => message.type === type), map(message => message.payload))
                        .subscribe(callback);
  }
}
```

---

**navbar.component.html**
```html
<mat-toolbar fxLayout="row" color="primary" *ngIf='showNavbar'></mat-toolbar>
```

---

**navbar.component.ts**
```js
export class NavbarComponent implements OnInit {
  user: IAuth = {};
  showNavbar: boolean;
  progressbar: number = 0;

  constructor(
    private storageService: StorageService,
    private dataService: DataService
  ) { 
    this.showNavbar = this.dataService.global.showNav;
  }

  ngOnInit(): void {
    this.user = JSON.parse(this.storageService.getLocalStorageItem('auth'));
    if(this.user){
      this.showNavbar = true;
    }
  }

}
```

Please help me out. Your help is highly appreciated. Thank you.