teleren/devto huggingface dataset:
Day 12 of #100daysofcode: Learning and Meetings
Tags: 100daysofcode, react, python, beginners
Published: 2021-11-17 22:26:04

Between meetings today, I learned about Django and continued my journey to a Javascript certificate from FreeCodeCamp.

## Today
I started today with working on FreeCodeCamp tutorials for about an hour. I then had to prepare for a couple meetings I had today. Between meetings, I learned about Django and some of key differences between Django and Flask.

At the surface level, it seems like Django is ideal for quickly getting a small project off the ground, while Flask is better and more flexible in larger projects.

I will discuss Django more after I learn more about it. I am still considering building my next app in Django instead of Flask, if only to learn it.

I also spent some time on the artist app today. I made a mistake with some git commands and, long story short, I ditched a week's worth of changes. 

A little disheartening, but I was considering trying a different tact for constructing the main page, so I'm not too upset about it. 

A clean slate, a new approach!

## Tomorrow
I am going to spend some time tomorrow planning the final approach for the artist app. I have already designed most of the elements using React bootstrap, it's really only the structure of the page that I will be focusing on. 

## What I'm Struggling on
Complicated state management between components. I still haven't quite nailed it down.


That's all for today! Thanks for following, if you have any suggestions, please leave them in the comments below!
Welcome Thread - v151
Tags: welcome
Published: 2021-11-17 22:24:15

---
title: Welcome Thread - v151
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Stefan from SNL waving hello](https://media.giphy.com/media/Y8ocCgwtdj29O/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
the command line command that saves me hours per week
Tags: beginners, webdev, tooling, programming
Published: 2021-11-17 22:20:42

The command that saves me hours per week

Knowing your tools can make or break your productivity.

But let’s talk about the command line first.

It’s FOUN-DA-TIONAL to your success as a developer or engineer.

Why?

This is your way to interface with your computer, run files, test stuff out, push your code to git, and so on.

Ya sure you can use an abstraction for these things like an IDE or git user interface like GitTower.

But…it really stunts your growth as a developer if you can’t use the terminal.

You’re gonna see this everywhere in your day to day.

Not only are you using it to build something small. But if you need to connect to a server and investigate. You’re gonna want to know how to figure out where you are and how to navigate to get your job done.

There’s nothing like SSH’ing(connecting) into a server and feeling shid outta luck because you dont know what to do.

Anyways…

Back to the command that saves me hours per week…probably more.

It’s called `"grep"`.

This is just a fancy way of saying…

***Hey!!! Computer!!! Filter out a bunch of stuff and show me 
what I care about.***

I use this when listing files…a lot. Or checking the contents of a file. So I don’t need to manually use my eyeballs to go read stuff I don’t have the time or patience for.

Work smarter not harder....amiright? 😉

Something I use in the wild looks like:

`> ls | grep thatthingicareabout`

This will list all of the files in my directory and then filter all folders or files that contain the title “thingthaticareabout”.

With all of that being said…

I literally just finished my first offer ***Mastering the Command Line Basics in Under 20 minutes*** to set YOU up for success no matter where your career takes you.

This offer includes the most important commands I use on a daily basis and HOW to use them.

So…

If you want to save hours per week so you can focus on solving actual problems and get your engineering career off on the 
right foot…

[>>> Check it out!!!!](https://commandline-basic.carrd.co/)

### If you 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

 - **Here is a [link](https://engjobresources.carrd.co/) to get my top 10 interview resources for FREE**
Community Building: Where To Start
Tags: developercommunity, devrel, communitydevelopment, communitybuilding
Published: 2021-11-17 22:10:49

---
title: Community Building: Where To Start
published: true
date: 2021-11-17 22:10:09 UTC
tags: developercommunity,developerrelations,communitydevelopment,communitybuilding
canonical_url: https://medium.com/@bass41992ben/community-building-where-to-start-a2151f8cdfca
---

![](https://cdn-images-1.medium.com/max/1024/0*1hmcRMLe25beve_a)
_Photo by Nathan Dumlao on Unsplash_

As I have been learning about community there is one thing that is at the foundation of building a community.

> A Common Interest. A Gathering Point

This may seem super obvious but it is impossible to build a community if you, the community builder do not know what you are gathering people to, helping them with, providing resources for, etc.

This is why the best community builders and leaders are those who have used the product, believe in the mission and vision of the product, and want to tell others about it.

#### Some Common Sticking Points

Often times you will get an early adopter that will want to spread the word. You may even get someone who just wants to support you and spread the word that way. However, unless the person knows the product, uses it, and is learning how to use it better, you will have a very hard time with this person building your community.

If you want a community builder, they are more than promotional. They can do that but to build community they need to help others use the service or product. They need to be able to answer questions.

In my opinion, you need someone who actively uses your product and wants to promote it. This is very much like a Developer Relations, Marketer, Salesman, Developer Advocate, and Developer Experience all wrapped up into a job with a fun name, Community Builder.

So start with people who are excited about and like talking about what you are doing. Then see if they want to help others learn. The teaching and building apps with your product and what you are offering will bring out their natural marketer and promotional spirit as well.
Raspberry Pi Zero W Network Game Controller Hub
Tags: raspberrypi
Published: 2021-11-17 21:50:01

After several weeks of searching. I finally discovered how to turn a Raspberry Pi Zero W into a USB controller.

## Hardware

raspberry pi zero w

## Software

[raspbian-jessie-lite](https://downloads.raspberrypi.org/raspbian_lite/images/raspbian_lite-2017-06-23/)
[raspbain-jessie](https://downloads.raspberrypi.org/raspbian/images/raspbian-2017-07-05/)
**Warning** Don't update your version of raspbian-jessie.

## Instructions

1. Flash raspbian-jessie or raspbian-jessie-lite onto your raspberry pi zero w.

2.  Connect to the wifi

3. Run wget -o https://github.com/drflamemontgomery/RaspberryPiZero-Controller/archive/refs/heads/main.zip

4. unzip RaspberryPiZero-Controller-main.zip

5. mv RaspberryPiZero-Controller-main/* ./

6. chmod +x setup.sh
   sudo ./setup.sh
   chmod +x hid.sh
   gcc -o tcp tcp.c -lpthread

7. Add lines from /home/pi/rc.local to /etc/rc.local before exit 0

8. ifconfig 
   find your ip address. format is usually 192.168.1.xxx or 10.0.0.xxx

8. shutdown

9. plug your raspberry pi zero w into a device of your choice using the OTG usb port

You should now have a raspberry pi zero w acting as a network controller hub on address IP_ADDR:8080. You should now be able to connect up to 4 devices and use them as controllers.

## Connecting

You can either program your own software using specifications from https://github.com/drflamemontgomery/RaspberryPi0ControllerPDF/blob/main/Raspberry_Pi_Controller.pdf or you can download https://github.com/drflamemontgomery/rpicontroller
Executing Shell Commands In Laravel
Tags: laravel, php
Published: 2021-11-17 21:45:20

Both `shell_exec()` and `exec()` do the job - until they don't. 

If your command crash for some reason, you won't know -  **`shell_exec()` and `exec()` don't throw Exceptions.** They just fail silently. 😱

So, here is my solution to encounter this problem:

```
use Symfony\Component\Process\Process;

class ShellCommand
{
    public static function execute($cmd): string
    {
        $process = Process::fromShellCommandline($cmd);

        $processOutput = '';

        $captureOutput = function ($type, $line) use (&$processOutput) {
            $processOutput .= $line;
        };

        $process->setTimeout(null)
            ->run($captureOutput);

        if ($process->getExitCode()) {
            $exception = new ShellCommandFailedException($cmd . " - " . $processOutput);
            report($exception);

            throw $exception;
        }

        return $processOutput;
    }
}
```
_It utilises Symfony's Process (which comes out of the box to Laravel)._ ✨

With this way, I can throw a custom exception, log the command and the output to investigate, report it to my logs to investigate, etc.

No more failing silently 😇

Hope you like this little piece! If you do, please give it a ❤️
Hawk project
Published: 2021-11-17 21:35:55

Hawk is a network and pentest utility that I developed so that I could perform different kinds of task using the same suite, instead of jumping from one tool to another.
Currently, this script can perform a good variety of tasks such as ifconfig, ping, traceroute, port scans (including SYN, TCP, UDP, ACK, comprehensive scan, host discovery (scan for up devices on a local network), MAC address detection (get MAC address of a host IP on a local network), banner grabbing, DNS checks (with geolocation information), WHOIS, subdomain enumeration, vulnerability reconnaissance, packet sniffing, MAC spoofing, IP spoofing, SYN flooding, deauth attack and brute-force attack (beta).
Other features are still being implemented. Future implementations may include WAF detection, DNS enumeration, traffic analysis, XSS vulnerability scanner, ARP cache poisoning, DNS cache poisoning, MAC flooding, ping of death, network disassociation attack (not deauth attack), OSINT, exploits, some automated tasks and others.
If you want to become a contributor, make a pull request or issue.
Waiting for your feedback. Kudos
Link to the repository: https://github.com/medpaf/hawk
How to Improve an API Ecosystem with Mapping
Tags: api, strategy, leadership
Published: 2021-11-17 21:21:35

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ileup74yxhraf0tywkkv.png)
Before promoting a direction to API leaders, all parties involved must understand where they are and what destinations are possible. A **map** helps simplify an overwhelming number of technologies, techniques, and ideologies into something approachable and with a clear way forward. 

Ultimately, maps provide the insights about an ecosystem’s strengths and weaknesses, fueling conversation. API Ecosystems are complex. But mapping where you are and where you need to go doesn't have to be. 

More at the original post: 
https://blog.postman.com/how-to-improve-api-ecosystem-with-mapping/
How mapping out project components can help you
Tags: react, drawio
Published: 2021-11-17 21:12:26

I started off doing my react projects on the fly without building out a map for myself of components and where State needs to go and where I'm passing props from/to. I started running into a lot of trouble with where I should be putting my states or where I can pass data from depending on where I fetch it etc. I decided then to learn to map out my components to help me be able to properly understand the structure of project.

Let us use a shopping website as our example. If I wanted to build something like that, it would need a lot of components. Initially what I did was try and think about the layout in my head, so let's try and do that here:
-I need some TopNav and BottomNav that will be rendered on every page/route of my website
-I also need a MainPage which will contain my ShopList, FeaturedList, and RecommendedList.
-Those then will contain their children items such as ShopItems, FeaturedItems, and RecommendedItems.
-I also need a CartPage that will display my cart and cost which will contain InventoryList(which has InventoryItems as a child) and CostDetails as well

Obviously you can keep going with this and it will get really complicated even if you write it out on paper. (That's with me not even mentioned state, props and fetching data... that's a whole other mess)

A much better way to do this is to sketch out a graph of your components and their children. I made a quick sketch of the same example that I used above, and now it will probably make sense.

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

I used the Drawio extension in VScode which is super easy and really nice to use for project planning. I really recommend you always take some time before starting your project to map out your components and their children and where you want your data to be fetched etc. before even touching a piece of code. This 100% will improve your time efficiency when it comes to actually coding and also your understanding of your own code.
Markdown Dociana
Tags: opensource, seneca, docusaurus, markdown
Published: 2021-11-17 18:53:04

I'm working on my release 0.3 again, at the moment I'm back on the [IPC144](https://github.com/Seneca-ICTOER/IPC144) repo again working on [auditing and fixing the expressions page](https://github.com/Seneca-ICTOER/IPC144/issues/39). 

My [changes](https://github.com/gusmccallum/IPC144/commit/c42528feee86a319bcd91e641697256df4fa1ce5) so far have been pretty minor, some language in a section on Unary Floating-Point operands was weird so I updated it to read a little better.

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


---

After going through the [checklist](https://github.com/Seneca-ICTOER/IPC144/issues/39)  I found a few more things to change, and pushed a few more commits and a pull request when I was done. 

I added [alt text](https://github.com/gusmccallum/IPC144/commit/0328b037e8e0ccb083449eeb684b290a37677192#diff-02c68ee144b51cbb5d2e86741c846fecbecb123ea1bbbf3eee84ce7941b3c180R463) to the images on the expressions page for clarity and SEO. Afterward I changed the only block quote I could find to an [admonition](https://github.com/gusmccallum/IPC144/commit/0328b037e8e0ccb083449eeb684b290a37677192#diff-02c68ee144b51cbb5d2e86741c846fecbecb123ea1bbbf3eee84ce7941b3c180R235). 

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

I [changed](https://github.com/gusmccallum/IPC144/commit/0328b037e8e0ccb083449eeb684b290a37677192#diff-02c68ee144b51cbb5d2e86741c846fecbecb123ea1bbbf3eee84ce7941b3c180R358) all the mentions of types like `int`, `double`, etc. to have backticks around them. 

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

Finally, I [added](https://github.com/gusmccallum/IPC144/commit/0328b037e8e0ccb083449eeb684b290a37677192#diff-02c68ee144b51cbb5d2e86741c846fecbecb123ea1bbbf3eee84ce7941b3c180R2) the frontmatter for the page. 

Overall the changes I made were pretty minor, I think I got lucky in that the page I chose to work on was converted to markdown very accurately. With my [pull request](https://github.com/Seneca-ICTOER/IPC144/pull/97) now submitted, all that's left is to wait and see what I messed up and fix that.
Angular: Slice and *ngIf for Conditional Ellipsis / Tooltip on Data
Tags: angular, typescript, webdev, javascript
Published: 2021-11-17 21:02:15

### Problem: Conditional Ellipsis without CSS
I want to add an ellipsis to data that's brought in from a service without having to use CSS' `text-overflow: ellipsis` feature, since it's unreliable and could break overtime if not monitored during refactoring.

---

# Using `Slice Pipe`

## Determine character max overflow limit
* Determine max overflow by number of characters (instead of max-width)
* Example: max overflow characters 20 (inclusive, aka 20 or more)
* I use `slice` pipe where you add the `start` and `end` of the slice to the interpolated string


```html
<!--Template-->
<a *ngFor="let item of items">
  {{ item.name | slice: 0 : 20 }}
</a>
```

## Add ellipsis as conditional `span`
* Conditional span is based on data's `length`
```html
<!--Template-->
<a *ngFor="let item of items">
  {{ item.name | slice:0:20 }}<span *ngIf="item.name.length >= 20">...</span>
</a>
```
---
#### If Problems with String vs. Object
Sometimes typescript or certain db packages make this harder by making it so `strings` are but _aren't_ considered strings. Solve this programmatically, by saving a new `boolean` value, when the data is either stored or updated:
```typescript
// Component
onSave(event: any, item: Iitem): void {
  if (String(this.item.name).length >= 20) {
    this.item.maxChar == true;
  }
  if (event) {
    this.dataService.addItem(this.item);
  }
}
```
Thus, can then apply in template as
```html
<!--Template-->
<span *ngIf="item.maxChar == true">...</span>
```
---
# Show Tooltip Conditionally
I want the tooltip to appear when this `maxChar` is true; but to remove itself from the DOM when no longer hovering over the item.
```html
<!--Template-->
<a
  *ngFor="let item of items"
  (mouseover)="(item.name.length >= 20) ? onHover($event, item.name) : ''"
  (mouseout)="showsTooltip ? (showsTooltip = !showsTooltip) : ''">
  {{ item.name | slice:0:20 }}<span *ngIf="item.name.length >= 20">...</span>
<a>

<!--Tooltip-->
<div
  *ngIf="showsTooltip"
  [style.top]="tooltipTopY"
  [style.left]="tooltipLeftX"
  class="tooltip"
  >
  {{ tooltipText }}
</div>
```

### Component
Catches coordinates of event and binds them
```typescript
export class SomeComponent implements OnInit {
  // Properties
  showsTooltip = false; // show or not
  tooltipText = ''; // text to be binded
  tooltipTopY!: any;
  tooltipLeftX!: any;

  // Methods
  onHover(event: any, itemName: string): void {
    this.tooltipText = itemName;
    if (event) {
      this.showsTooltip = true;
      this.tooltipTopY = event.clientY + 'px';
      this.tooltipLeftX = event.clientX + 'px';
    }
  }
}
```
Validate passwords with JS
Tags: password, javascript, tutorial, validate
Published: 2021-11-17 20:14:29

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/validar-senhas-com-javascript-6517c6438ba9)

Simple project to validate password cracking difficulty, using javascript to set as strong password.

## Code

First let’s create the interface, we’ll do something simple, using just HTML.

```HTML
<h1>Validator Password</h1>
<input type="password">
<span></span>
```

In this code we have only one input that will receive the password and the span where it will be displayed if the password is strong, medium or weak.

```JavaScript
"use strict";
const input = document.querySelector("input");
const text = document.querySelector("span");
input.addEventListener('input', validPassword);
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
let min_week_password = 3;
let min_medium_password = 6;
let min_strong_password = 6;
function validPassword() {
  let input_week = input.value.match(regExpWeak);
  let input_medium = input.value.match(regExpMedium);
  let input_strong = input.value.match(regExpStrong);
  if (input.value) {
    if (input.value.length <= min_week_password && (input_week || input_medium || input_strong)) {
      text.textContent = "Your password is too week";
    }
    if (input.value.length >= min_medium_password && ((input_week && input_medium) || (input_medium && input_strong) || (input_week && input_strong))) {
      text.textContent = "Your password is medium";
    }
    if (input.value.length >= min_strong_password && input_week && input_medium && input_strong) {
      text.textContent = "Your password is strong";
    }
  }
}
```

Here we have the javascript code that does all the magic, where we first get the password elements and the span element, in the password element we add a listening that is activated whenever it receives some data and calls the validPassword function.

in validPassword the input data is checked and compared with the Regex, if the password entered is valid in some regex it is weak, if it is valid in more than one it is average and if it is valid in all it is strong.

To make the password more valid, a minimum length was added for each password, but of course it can be edited to make it more compatible with your project.

ready simple like that.

## Demo

See below for the complete working project.

{% codepen https://codepen.io/WalterNascimento/pen/mdPmPag %}

## Youtube

If you prefer to watch it, see the development on youtube.

{% youtube 5g-184SKPwQ %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊
Debugging `make: 'build' is up to date.`
Tags: docker, makefile, typescript
Published: 2021-11-17 20:08:49

**TL;DR - Rename your directory `build` something else**

# Failure
`Makefile`
```make
build:
	docker build . -t my-basic-app
```
Look. I have the most basic app, Dockerfile and Makefile. Why can't it just run `make build` command properly as I defined in Makefile?


```bash
shyamajp@ubuntu:~/Projects/my-basic-app$ make build
make: 'build' is up to date.
```

# Debug
Let's get rid of this stupid error. At the root level, you must have a directory named `build`. That's why you see this unexpected behavior.

In my case, I can change outDir name from build to dist to avoid this specific conflict.
`tsconfig.json`
```json
{
    "outDir": "dist"
}
```

# Conclusion

Do not name your directory same as Makefile target. Be careful with names like `build` and `test`, which are often used for both Makefile targets and directory names.

I know this is a noob question but I've done it a few times already and I thought I might as well document it somewhere for myself. I hope this helps other newbie folks like me.

Feel free to reach out if you have any questions or suggestions to make this article better. Thank you for reading. Happy Coding!