teleren/devto huggingface dataset:
How the Terminal Should Work by Default; But Doesn't
Tags: terminal, console, bashrc, zshrc
Published: 2020-12-16 22:03:32

---
title: How the Terminal Should Work by Default; But Doesn't
published: true
description: Here's how I format my terminal to make it feel more natural to me. The default always felt quite unnatural, let's fix that!
tags: terminal, console, bashrc, zshrc
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/74gpm68lvxi27gxrr301.png
---

So we use this Terminal/Console/Command Prompt thingy every day. The first time we used it we felt like we finally hacked into the matrix. 

### Back Story

Even the first computer I used which was some DOS system with green text. You enter a command a some magic would happen. Except I did not know any commands, nor did I know it could process commands. So it was used a way to leave messages on screen for my mom or brother.

How it worked then and how it works now is the same.

Enter command, it prints the output and enters a new line. After a while you have a tiny scroll bar and entire history of every command you entered.

Cool, I guess for some engineers I am sure, for me? I have never needed to look through history to see anything. So ultimately it's all left over noise. 

So I clear screen and continue on.

### A Side Story

A few years ago I was developing a desktop application that is basically a PostgreSQL database viewer which connected to Ruby on Rails. Most of the commands needed to be entered into a terminal.

This is when I really learned why they call them terminal emulators and got to understand the shell more. This is when I could control the entire layout of the terminal.

I realized I never needed any of that history and in fact I needed to see all the output clearly and easily. 

This project has since been closed however.

### The Point & The Code

Here's some bashrc code that will clear the screen after each command and provide the output in a much nicer way:

```
preexec () {
 printf "\033c"
 echo "$fg_bold[red]╭╼$fg[blue] $PWD\n$fg_bold[red]╰───╼$fg_bold[green] $ $history[$HISTCMD] $fg_bold[red]\n"
}
preexec_invoke_exec () {
    [ -n "$COMP_LINE" ] && return                     # do nothing if completing
    [ "$BASH_COMMAND" = "$PROMPT_COMMAND" ] && return # don't cause a preexec for $PROMPT_COMMAND
    local this_command=`history 1 | sed -e "s/^[ ]*[0-9]*[ ]*//g"`; # obtain the command from the history, removing the history number at the beginning
    preexec "$this_command"
}
```

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

### Disclaimer

Yes, you do lose the history and it always shows just the last command at a time.

Yes, it has some fancy stuff to format the directory and last command.

Yes, you should be using Starship addon for your terminal to format the node version, etc.

Yes, I think this is the way it should work. In fact I think the input should always stay at the top of the terminal and output below, however that seems to hard to hack into a .zshrc or .bashrc script.

Either way, thanks for reading.
Stress Testing w/ K6
Tags: postgres, javascript, testing, react
Published: 2020-12-16 21:31:13

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

The final project of my software engineering course at Hack Reactor has me scaling a legacy React application's code base from 100 primary records to 10 million while employing a previously unused database technology, stress testing it, and then deploying it to AWS EC2. I chose PostGreSQL for my database and K6 for stress testing. I'm so happy I chose both as they have been pretty intuitive and easy to setup!
DISEÑO DE LA INFORMACIÓN
Published: 2020-12-16 21:24:15

El diseño, sea cual sea su vertiente, como nos dice Fontana, debe de ser socialmente útil. Contribuir para el mejoramiento de la sociedad de la cual formamos parte y cumplir con el objetivo de comunicar conscientemente y de manera entendible para el público, parte de nuestra tarea como diseñadores es hacer que esa comunicación sea efectiva para así, empoderar al usuario con información.

En el libro de Diseño de información y vida cotidiana, de la profesora María González de Cossío, hay un claro ejemplo sobre Jacobson, donde menciona que tanto los diseñadores de información como los usuarios se ven cambiados o transformados al interactuar con el objeto diseñado y da un ejemplo que funciona bastante bien, “cuando una persona consulta y entiende un diagrama de un sistema de transportación, cambia su actitud y adquiere seguridad para movilizarse libremente”.

Este ejemplo que parece muy ilustrativo, si lo trasladamos a la vida de un estudiante que procede de un lugar ajeno y llega a estudiar a la Ciudad de México: al llegar a la enorme ciudad tendrá la necesidad de moverse a distintos puntos dentro de ella, muy probablemente tenga que hacer uso del Sistema de Transporte Colectivo (STC) mejor conocido como metro. Quizás el primer contacto con el Metro puede resultarle ¡terrorífico!, no sabrá cómo moverse dentro de él, pero sin duda una vez que entienda cómo funciona el sistema de señalización, el mapa y su relación con los colores le será bastante sencillo usar este medio de transporte, cambiará su actitud, tendrá seguridad porque estará empoderado por el conocimiento, y podrá hacer uso de este libremente.
DevAnalytics at DOHackathon: backend done
Tags: dohackathon, angular, python, devanalytics
Published: 2020-12-16 21:21:23

At least for the time being. Now it returns all data that [DEV Analytics](https://dev.to/sandordargo/my-dev-birthday-gift-for-you-dev-to-analytics-19f2) has. And in addition, I found a bug in [DEV Analytics](https://dev.to/sandordargo/my-dev-birthday-gift-for-you-dev-to-analytics-19f2) that now I fixed.

Tomorrow, I'll add [ng-bootstrap](https://ng-bootstrap.github.io/#/home) to the UI and I'll start to experiment with it.

To me, this is an obvious choice as it's mostly developed by my company and not surprisingly it's widely used for our UIs. So as I'm learning Angular for a new project... You undertand.
If Bob Ross had a modern, responsive, web development portfolio, what would it look like?
Tags: vue
Published: 2020-12-16 21:11:57

I wanted to do a project to get more comfortable with Vue.js & Sass, so I designed a developer portfolio template from the ground up. Of course, Bob's works are just a placeholder — it can be used by anyone with coding knowledge that can't be bothered with front-end design. Check it out! 

**Live Demo:** https://vue-portfolio-template.netlify.app/

**Repo:** https://github.com/darnocer/vue-portfolio-template
Standing or Sitting🤷‍♂️
Tags: watercooler, discuss
Published: 2020-12-16 20:57:32

> There are some out there between hither and yon that will scare you so much, you won't want to go on.
*Dr Sues*

I quite like Dr Sues books, as a nightly bedtime story reader, 'Oh the places you'll go' includes a lot of walking.

So is a standing desk a fad? It's certainly not exercise, but could it help to have one at home? I have seen no research paper suggesting that (although sitting is bad) standing is the answer, you can youtube that if you like.

So if the best thing to do is to get out there and do some exercise, what would you recommend?
A Developing Developer
Tags: firstpost, newbie, career
Published: 2020-12-16 20:48:48

`def blog_post
  puts "Hello World"
end`

Such a cliche, but that's about where I am as a developer right now (I can do a little more than that). I'm about 2 weeks into a Software Engineering course, and I am very excited to start learning and coding. It's time to start off on a new career journey!

##Time for a Change
Now, you may be wondering, "Why change your whole career path?" "Did you hate your old job?" "Do you think developers just type on a screen and make big money, or something?" 

Well, no.

I've been a teacher for the past few years, and I don't mind doing it. And, I know that software engineering can be a very demanding profession. But, I was drawn to the logicality; to the endless possibilities; to the space that exists between man and machine.

Okay, instead of flowery words, how about some background? So, I went to college for... a bunch of different things actually, but I graduated with 3 B.A.s in Communication Studies, Asian Studies, and Japanese (日本語はできるぞ！). I didn't pick those majors with the intent of making a career in one of them (like a normal person does) but just because I was interested in learning them. 

After I graduated, I mostly just tried to find any job that would take me. More importantly, though, I started building a website for my band. That led me to learn (a very insignificant amount) about HTML and CSS. While working at other jobs, time seemed to stand still, but I found that when I was working on the website, I could look up and hours would have gone by (mostly because it took that long because I didn't know what I was doing) 

I'm not goin to bore you any more, but long story short: I moved to China to be a teacher, and when I came back to the States, I decided to look into a long term career that was a better fit for me, personally.

If I could describe myself with one phrase it would be "logically creative". And that's why I was drawn to software engineering.

##Let's Get Started
Anyway, I'm learning Ruby first, so we'll see if any of what I just typed really means anything, or if it just sounds good

'Till next time...
JavaScript the Dirty Python
Tags: codepen
Published: 2020-12-16 20:47:59

Years back I learned a little on Python, and now I am taking an online program in JavaScript and at first I became frustrated due to me felling to grasp the concept of exactly JavaScript works and functions. Now after my many efforts and failed attempts I have been rescued by #CodeAcademy with their very easy to use tool I have finally come to understand and learn. I feel as if JavaScript is the Dirty Python example. Only saying and I am still learning so I could be wrong and may still have much to still learn. These are only my opinions (so far).

Thank you 
#CodeAcademy
Raspberry Pi DNS Settings Update 🔌
Published: 2020-12-16 20:22:55

##Enter Raspberry Pi with SSH.
Let's connect to Raspberry Pi over <code>SSH</code> with this simple command and then enter the password we keep for that whatever is your device connected over <code>WIFI</code> or via <code>UTP</code> cable.

```
ssh pi@raspberrypi.local
```

##Modify DNS info
Go to a specific configuration file named <code>dhcpcd</code> and edit it via <code>nano</code> command.

```
sudo nano /etc/dhcpcd.conf
```

Look for the <code>static domain_name_servers</code> string that at the beginning holds the <code>#</code> sign. It means the whole string is commented in other words not used as a command. Remove commenting sign as <code>#</code> and edit whole domain name server as you wish. You can go with Google's Public DNS servers that stay for <code>8.8.4.4.</code> and <code>8.8.8.8</code> or select Public DNS servers on Cloudflare that stays for <code>1.1.1.1</code>. Choose just one provider to paste. So based on your preference you will edit the whole string as follows. In the end, the whole string should look like this for Cloudflare's option.

```
static domain_name_servers=1.1.1.1
```

Or like this for Google's option.

```
static domain_name_servers=8.8.4.4 8.8.8.8
```

Press <code>CTRL + X</code> and as you'll be asked to "Save modified buffer?" press <code>Y</code> and then <code>ENTER</code>. No need to restart the whole Raspberry Pi device, just restart the <code>dhcpcd</code> service.

```
sudo service dhcpcd restart
```
To check if the domain name server's update was accepted and passed correctly use this last command to execute <code>resolv</code> file.

```
sudo nano /etc/resolv.conf
```
You should be seeing something like <code># Generated by resolvconf</code> info and under it <code>nameserver</code> updated informations. That's all.

Thank your lucky stars. Reading this whole DNS-awesomesauce brief tutorial.

Thanks to [Taylor Vick](https://unsplash.com/@tvick?utm_source=unsplash&utm_medium=referral&utm_content=CreditCopyTextGratitude) for the cover image from Unsplash.
The Best Naming Model in Html & CSS - BEM
Tags: css, webdev, beginners, codenewbie
Published: 2020-12-16 20:00:58

BEM is an abbreviation of the key elements of the methodology —**Block, Element and Modifier**. It is a popular *naming convention* for classes in HTML and CSS.
Here’s an example:-
```
/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__play {}

/* Modifier that changes the style of the block */
.btn--blue {} 
.btn--big {}
```
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.

## 1. Block
##### Naming
Block names may consist of Latin letters, digits, and dashes.
To form a CSS class, add a short prefix for namespacing :
`.block`
##### HTML
Any DOM node can be a block if it accepts a class name.
`<div class="block">...</div>` 
##### CSS
* Use class name selector only
* No tag name or ids

> .block { color: #032; }

## 2. Element
It is a Parts of a block and have no meaning on its own. 
Any element is semantically tied to its block.

##### Naming
Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as **block name plus two underscores plus element name** : `.block__element`
##### HTML
Any DOM node within a block can be an element. Within a given block, all elements are equal.
`<div class="block">
	  ...
	  <span class="block__element"></span>
	</div>` 
##### CSS
* Use class name selector only
> .block__element { color: #032; }

## 3. Modifier
Attributes on blocks or elements. Use them to change appearance, behavior or state.
##### Naming
Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as **block’s or element’s name plus two dashes**: 
`.block--mod` or  `.block--element__mod` and `.block--color-black` with `.block--color-blue`.
_Spaces are compensated with *dashes*._
##### HTML
Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class:
`<div class="block block--mod">...</div>
	<div class="block block--size-big
		block--shadow-yes">...</div>`
##### CSS
* Use modifier class name as selector:

> .block--hidden { }

* To alter elements based on a block-level modifier:

> .block--mod .block__element { }

* Element modifier:

> .block__element--mod { }

### **Reference** 
I learnt a lot about a new naming convention for html elements. A big thanks to Dom aka **dcode**. if you guys want to learn more about BEM,
check out his youtube video :
[Link](https://www.youtube.com/watch?v=u-XKw585KqY&ab_channel=dcode)
How to Download & Install MongoDB on Windows 10


Tags: database, mongodb, mysql, nosql
Published: 2020-12-16 19:37:26

###Introduction
###What is MongoDB?
MongoDB is a document-oriented NoSQL database used for high volume data storage. Instead of using tables and rows as in the traditional relational databases, MongoDB makes use of collections and documents. Documents consist of key-value pairs which are the basic unit of data in MongoDB. Collections contain sets of documents and function which is the equivalent of relational database tables. MongoDB is a database which came into light around the mid-2000s.
The installers for MongoDB are available in both the 32-bit and 64-bit format. The 32-bit installers are good for development and test environments. But for production environments you should use the 64-bit installers. Otherwise, you can be limited to the amount of data that can be stored within MongoDB.
It is advisable to always use the stable release for production environments.
In this tutorial, you will learn how to Download & Install MongoDB on Windows
The following steps can be used to install MongoDB on Windows 10
####Step 1
Go to the link https://www.mongodb.com/try/download/community and Download MongoDB Community Server. We will install the 64-bit version for Windows.
![ms1](https://dev-to-uploads.s3.amazonaws.com/i/nrmi0ktyejdzyr1jyap4.PNG)
####Step 2
Once download is complete open the Microsoft installer file. Click Next in the startup screen
![ms2](https://dev-to-uploads.s3.amazonaws.com/i/3xdhv3q0v1t72d7nnf4w.PNG)
####Step 3
Accept the End-User License Agreement
Click Next
![ms3](https://dev-to-uploads.s3.amazonaws.com/i/2osa2du8ei7w943fzwic.PNG)
####Step 4
Click on the "complete" button to install all of the components. The custom option can be used to install selective components or if you want to change the location of the installation.
![ms4](https://dev-to-uploads.s3.amazonaws.com/i/24ckpnjmfry4qs55e1iv.PNG)
####Step 5
Select “Run service as Network Service user”. Take note of the data directory, we’ll need this later.
Click Next
![ms5](https://dev-to-uploads.s3.amazonaws.com/i/tqwq7lukwdvy8663iib4.PNG)
####Step 6
Click on the Install button to start the installation.
![ms6](https://dev-to-uploads.s3.amazonaws.com/i/tdtbe26av6tdw8rw9a22.PNG)
####Step 7
Installation begins. Click Next once completed
![ms7](https://dev-to-uploads.s3.amazonaws.com/i/f2irwb7xkzgrzqnscl0z.PNG)
####Step 8
Click on the Finish button to complete the installation
![ms8](https://dev-to-uploads.s3.amazonaws.com/i/bhjgf5teqsqc9njsxnic.PNG)
####Step 9
Go to Go to " C:\Program Files\MongoDB\Server\4.0\bin" copy the path and include in your systems environment.
![ms9](https://dev-to-uploads.s3.amazonaws.com/i/ukilnuoz2vretv9hjkbh.PNG)
####Step 10
Go to your command prompt and type ‘’mongo’’.
![ms10](https://dev-to-uploads.s3.amazonaws.com/i/olrs1pc02n3je88aqcgx.PNG)
Congratulations!!! You just downloaded and installed MongoDb on Windows 10. Thank you for your time please do not forget to like and leave a comment.
The Big Picture with Security Hub
Published: 2020-12-16 19:24:42

AWS Security Hub is a comprehensive analysis utility that gives a clearer picture of your infrastructure. Through native and vendor integrations, it provides a single lens on security while providing you actionable insight. 

Security Hub utilizes foundational standards, CIS benchmarks, and PCI compliance checks to validate your infrastructure security. While using standards gets over the hurdle of managing rules, it still requires the overhead of enabling config and reporting back to the management account. However, despite the downsides, it can be a powerful utility in improving your security posture.


### Implementation
All of the resources are needed, as described in [AWS Config](https://danquack.dev/blog/507391). In replacement of config rules, we use the conformance packs, aws-foundational-security-best-practices, and cis-aws-foundations-benchmark. The conformance packs then translate individual benchmarks into rules. It is worth noting that the checks' [overall cost](https://aws.amazon.com/security-hub/pricing/) adds up quickly with more regions + accounts.

 
### Findings
Security Hub provides an aggregated console that breaks down the findings' severity, a key to prioritizing work. An example of what the prioritization looks like:
![Security Hub Findings](https://dev-to-uploads.s3.amazonaws.com/i/bn427pm2m6k25l117t49.png) 

Through navigating through the UI, you can then drill down to the specific AWS Config finding and view the non-compliant resources
![config](https://dev-to-uploads.s3.amazonaws.com/i/ksh6ztvvixcbqkt2re54.png)
 

### Scores
Scores are also an interesting metric to pull out. When you look at the CIS benchmarks, it is nice to report back a score of improvements to track progress.
![scores](https://dev-to-uploads.s3.amazonaws.com/i/fy4agl5y4gkehpxyeusb.png)
 
### Integrations
Security Hub integrates with many services, not just AWS Config. Both AWS services and vendor services, overall giving you a regionalized view of your infrastructure state. ![integrations](https://dev-to-uploads.s3.amazonaws.com/i/846d936rwbjpcbf3wbfg.png)
The story so far....
Tags: aws, python, serverless
Published: 2020-12-16 19:23:44

So not too long after clearing my AWS cloud pat cert, I come across this little gem (https://cloudresumechallenge.dev/instructions/) on the AWS subreddit. I was very interested in serverless and how one could use it to host a CV-like webpage so this challenge seemed like a good fit for me. The challenge is over and US only but I still think it's worth doing, so far I am about 60% done. My website to date has an SES function triggered by Lamdba and API gateway to send me an email. Why SES over SNS you ask? Simple ease of use and cost, the goal of my site is to make it as cheap as possible for my needs SNS was overkill. So far I am happy to report the site only costs about 80cent a month to run and the cost is for route 53(DNS) so far so good. Right now I am working on a visitor counter and how to tie that into dynamodb all the while trying to find time to study for the AWS dev cert and learning how to drive a car fun times indeed. The site is also backed/deployed by code pipeline so updates to my github repoe go live right away! I think that is really cool and yes I am new to CI/CD and dev work in general but I am impressed with this. 

For those who might be interested in the site and my work so far here is the URL lougheed.info she still needs a bit of spit and polish but it's getting there. Feedback and tips very much welcome.
Anyone else NEVER create a Node.js project at Git root?
Tags: discuss, vscode, vue, node
Published: 2020-12-16 19:19:37

Usually, my Git structure is like

```
_data/
_media/
.git/
packages/
.gitignore
```

Then,

```sh
cd packages
yarn create nuxt-app nuxt
cd nuxt && rm -rf .git
```

This usually cause problems with VSCode and Vetur (Vue language server for VSCode), and sometimes also ESLint / Prettier language server, unless I

```sh
code packages/nuxt
```

<small>Also, Node.js isn't necessarily the only kind of project I have.</small>

My approach makes it easily to migrate project scaffolding, I think, like deleting and creating a new one. Usually you cannot do this with project scaffolder.

```sh
git checkout new-branch
git rm -rf -e .env **/*
yarn create nuxt-app .  # Do not create a new folder
```

This also causes problems with hosting services that have or rely on Git integration.

- Netlify and Vercel prefers Git integration; not locally built then upload.
- Heroku relies on either Git integration or Docker.

Now, where do I put `netlify.toml`?

```sh
# Choice 1
netlify.toml
# Choice 2
packages/nuxt/netlify.toml
# Choice 3 - Both
```
Solving day 16 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-16 19:18:11

---
title: Solving day 16 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 16)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube KSbeFv5M80Q %}

I've tried to explain the process in more details today, let me know if it helped!
Series: Building a POS. The begining
Tags: dohackathon
Published: 2020-12-16 19:17:14

---
title: Series: Building a POS. The begining
published: true
description: My submission to the DigitalOcean App Platform Hackathon! (Part 1)
tags: dohackathon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fuln7r64s7o93nzw11q5.PNG
series: Building a POS
---

### Category Submission
Built for Business

### Description
This is the begining! I'm so excited :)

I just have received an email from Digital Ocean with a gift 50$ for the contest. I never used before this platform or similars

This is the begining of a new chapter in my Developer career.
I will publish more soon!