teleren/devto huggingface dataset:
Day 406 : Imagine
Tags: hiphop, code, coding, lifelongdev
Published: 2021-07-12 22:06:52

_liner notes_:
- Saturday : Pretty chill day. Got up to finish prepping for the radio show. When that was over, I did some work for the Sunday show. Then we did the radio show. Had a great time as usual. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a photo of Bill Withers smiling standing in front of a wall with some graffiti on it with the words July 10th 2021 Beet's Killa Tape](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71rp3bz11wryiat3t00k.jpg)

- Sunday : Did the third week of the live online study group. I had some stories prepared so I got to actually work on some stuff. I finished all the post radio show promo work. Did my laundry. Added tutorials to the study group site. Before the show, I added a new feature that created the thumbnail of the recently finished live stream and added it to the video archive page. For the first cypher, the thumbnails generated were coming back blank. Between the cyphers, I did a fix and the following thumbnails came out fine. Super happy about it! You can check it out at https://untilit.works/videos. Oh and my microphone didn't go out at all. Awesome! This week's show went better than I could imagine. Plus, I sold a shirt!! After the cyphers, I watched "Black Widow", "Kevin Can F Himself" and "Rick and Morty".

- Professional : Started the day off with a couple of meetings. Then I spent the rest of the day working on a demo. I did as much as I could because being blocked in that stupid social network stops me from going any further. I'll be pair programming with a product manager tomorrow so hopefully I can get the social network integration working. I think I have it to the point where there are just a couple of more steps to finish.

- Personal : Ever since starting the live shows on Sunday, it feels good to have a set amount of time where I'll put in work and then I could relax outside of that time. Previously, I would pretty much work on something all day.

![A waterfall in Hawaii where the walls are covered in plants and the water is falling into a pond](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvez9medfidaq1l6d2n2.jpg)

An overall goal for this week is to a new feature to https://untilit.works where I can automatically generate notes for the recorded videos. There's an API I'll be playing with. I'll probably create a quick demo project so I can play with the API and see what data I can get back so I can figure out how to implement it into the site. I want to take some time out to watch anime again, so I'll probably do that while eating dinner. Trying to fit in time for other activities that aren't programming related. I want to catch up on "Fire Force". Think that's it.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube l14YwxJqnAc %}
Filter array with multiple conditions
Tags: react, javascript, beginners
Published: 2021-07-12 21:57:47

Ive been working on my first "React" project and this project I build is a "Park Browser" which is basically an app that helps you search for a specific national park in USA either by address, city or state.

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

It was really hard to understand how can I filter through an array with multiple conditions and also pass those conditions from a child component to parent.
Of course I googled it right away and I found it on "stackoverflow" (credit to Narendra Jadhav from stackoverflow).

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

Parent:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1twvqm0lzlf7bmjr53yw.png)

Child:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41h71dun58epxhe3cus5.png)


It seemed like its working but there was another problem,
If you searched for a park by one of the conditions it worked but if you wanted to use another condition or use a different one it will not change the search, Until i found the "continue" method in JS.

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

It is pretty simple what the "continue" method does,
If there are no filters to filter "continue" to the next "if" statement that will show me the parks that I am looking for by filter and if there are no results just return and empty search.

It helped me a-lot with understanding how to pass data from child to parent and how to use multiple conditions to filter and array.

I hope this post helped you with your errors,
Good Luck!
How can I run natively 'Big Commerce Stencil CLI' on Apple Silicon M1 Chip
Tags: bigcommerce, stencil, applesilicon, m1chip
Published: 2021-07-12 21:45:00

I am a front-end engineer who mostly works on a Bigcommerce platform. **Bigcommerce** uses a handlebar with the 'stencil command line interface' and it requires 'node version manager' (nvm).

I switched my Intel Macbook Pro with **M1 Chip Macbook Pro** then I couldn't realize this migration will be a little bit **ticky.**

I installed homebrew then node and nvm packages then I followed the steps on [bigcommerce developer website.](https://developer.bigcommerce.com/stencil-docs/installing-stencil-cli/installing-stencil) 

However, almost every project gives different errors but all of them are related to the 'node' version. I've gotten few-hour research on Google but these were not about BigCommerce 'stencil-cli',





Jump to 'TL;DR'
Here is the perfect version of the NVM for your delicious Stencil Templates.
```
# For ARM based macs // for bash
arch -x86_64 /bin/zsh

# For ARM based macs // for Fish Shell
arch -x86_64 /usr/local/bin/fish

brew install node
brew install nvm

# which is LTS for v12
nvm install 12.13.0
nvm alias default 12.13.0
npm install -g @bigcommerce/stencil-cli
```
Then start your project with 
```
stencil start -o
```



![Current Version Of my NVM](https://i.ibb.co/cLqphHM/bigcommerce-stencil-apple-m1-chip-optimum7.png)

Please check out [our website](https://optimum7.com) to get more information about BigCommerce Development and Marketing.


Thanks for reading, Happy hacking 🧡
How to change details label when open/closed without JavaScript
Tags: html, css
Published: 2021-07-12 21:26:26

I wish the [details element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) would support different labels (provided by the summary tag) for its open and closed states.

Consider a label of "Closed, click to open" when the details element is closed and "Open, click to close" when open:

![Open details element with label changed to indicate state.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6955uhrejxff5exayli.png)

Sadly only one summary tag is supported by the details element. However you can use an empty summary with a ::before pseudo-element to implement this.

Save the following to a file:
```
<html>
  <body>
  <style>
    #widget1 div { padding-inline-start: 1em; max-width: 20em;}
    #widget1 summary::before { content: "Closed, click to open";}
    #widget1[open] summary::before { content: "Open, click to close";}
    #widget1[open] summary { height: 2em;}
  </style>

  <p> Text before details.</p>
  <details id="widget1">
    <summary></summary>
    <div>
    A widget can be in one of two states. The default closed
    state displays only the triangle and the label inside summary
    (or a user agent-defined default string if no summary).
    </div>
  </details>
  <p>Text after details.</p>
  <body>
</html>
```
to experiment.
The second and third style lines are where the magic happens.

Note that it might not be accessible. I didn't try to see if adding a live region aria label to the summary would cause the label change to be announced. I suspect it will not, but refining this is left as an exercise for the reader. Add your experimental findings to the comments below.
What is AWS Infinidash?
Tags: aws, javascript, webdev, beginners
Published: 2021-07-12 21:25:08

As of today, AWS offers over 200 products and services with its own, unique name and functionality. Getting familiar with them is not an easy task and most AWS professionals only keep up to date with them in their respective fields. For example, if you are managing containers there are currently 17 ways to run them on AWS. This means 17 different services with their own and different pricing models.

On June 30, 2021, Joe Nash raised the question on Twitter about what happens if a small and dedicated group of developers start tweeting about a made-up AWS product. Would it appear in job specifications within a week? He suggested the word Infinidash but was open to other suggestions. He made it clear that “the intended joke here was that AWS product brands are completely impenetrable and indistinguishable from eachother (sic), let alone reality, and not “lol recruiters””.

{% twitter 1410178986978775040 %}

The name, Infinidash was so apt that it rapidly became a hit on Twitter and soon other people started using it. People started making videos describing the service that may sound real for the general public but clearly sounds fake for professionals.

Hand-on AWS even updated the original AWS certification diagram, highlighting Infinidash as the highest level of professional certification available for AWS.

{% twitter 1410696636590825473 %}

Soon AWS employees saw the potential in this hype and started to tweet about AWS Infinidash, including Jeff Barr Chief Evangelist for the Amazon Web Services.

{% twitter 1411063383302934531 %}

Only two days have passed since Joe’s original tweet and even Werner Vogels CTO of Amazon jumped on board:

{% twitter 1410943935124447237 %}

As of the writing of this article, the Infinidash movement is only at its beginning and eventually will expand beyond Twitter. While I don’t completely agree with Joe’s take on AWS services I clearly find the movement interesting. I believe that AWS also saw an opportunity in this and we will be hearing more about AWS Infinidash in the near future. I am curious to see what comes out of this and what AWS does with such a unique and apt name.

{% details Sources %}
- AWS Infinidash logo by [David Cuthbert](https://twitter.com/kangadac)
- Originally published at [Road to AWS](https://roadtoaws.com/)
{% enddetails %}
Weather-emoji
Tags: showdev, node, javascript, npm
Published: 2021-07-12 21:19:38

*Get the weather with an emoji ☀️ 🌈*

- **Repo** - [https://github.com/luctst/weather-emoji](https://github.com/luctst/weather-emoji)
- **Package** - [https://www.npmjs.com/package/weather-emoji](https://www.npmjs.com/package/weather-emoji)

---

## Install:

Run

```bash
npm install -D weather-emoji
```

Import the package:

```jsx
const weatherEmoji = require('weather-emoji');
```

> **Note** - We're using the [openweather API](https://openweathermap.org) to fetch the data, it requires that you create a key, click on the link to register and generate your key.

## Usage:

```jsx
const WeatherEmoji = require("weather-emoji");
const weatherEmoji = new WeatherEmoji(secretApiKey);

const emojiParis = weatherEmoji.getWeather("paris", true).then(data => data);

console.log(emojiParis.emoji); // return emoji
```

With async / await:

```jsx
const WeatherEmoji = require("weather-emoji");

(async () => {
	const weatherEmoji = new WeatherEmoji(secretApiKey);

	const emojiNewYork = await weatherEmoji.getWeather("new york", true);
	console.log(emojiNewYork.emoji);
})()
```

**More informations here** - [https://www.npmjs.com/package/weather-emoji](https://www.npmjs.com/package/weather-emoji)

Happy coding ✨🧑‍💻
Connecting to your Homelab without a VPN, SSH keys, or Public VP's using AWS Systems Manager
Tags: devops, aws, architecture, cloudskills
Published: 2021-07-12 20:52:17

The pandemic has made me enter the joys of home lab. I work daily as a cloud infrastructure engineer by day, so learning the home lab stuff has been rewarding. In addition, I have been trying to incorporate my cloud knowledge and skills into my lab environment by making a hybrid cloud approach.

I wanted to connect to my home lab remotely, and my cloud expertise makes me cringe at VPNs even though they have their place. It's just not "Cloud-native However, and I learned you could service in AWS to connect to private instances without the need for ssh keys, public infrastructure, or VPNs. There is a service called Systems Manager that offers a service "Sessions Manager".

I created a tutorial on how to set this up if anyone is interested.

https://youtu.be/Lm9afXJA7Q0
Using $ to select HTML elements without using jquery
Published: 2021-07-12 20:38:47

you want to use the dollar sign `$` to select HTML elements but you don't want to use Jquery ?
All you need to do is this:

```js
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document)
```
Now let say we have a div with the class `container`, you can select it like this:

```js
const container = $(".container");
```

Now lets say we have multiple inputs with the class `input` and we want to select all of them, you can do it like this.

```js
const inputs = $$(".input");
```

If you found this post useful give it a like.
Because we shouldn't import react like this 
Published: 2021-07-12 20:27:45

It is very know well the shape how we import react, but however there are issues by doing this


```
import React from 'react' 
import * as React from 'react' 
```

Yes well works how we want, the problem that exists with the two shape are the  next's

 The first imported 
```
import React from 'react'  
```

What happens? 
is that are importing all the Library. And the problem is what we re  making a importing heavy. Which can produce issues for example a low yield.

 The second imported 
```
import * as React from 'react' 
```
What happens is that we re making same. We re Saying what all the Library Be imported how react

These complet imports, are inncesary and we re Hurting our development

So there are a way which Fix these?

Yes and is import the necessary, how in this example

```
 import {useState, useContext } from 'react' 
```
But so. How Compiled our JSX?

Remember That babel exists and compile our JSX.
In the doc of react, We are told that react JSX is alone sugar for call to react create element

But We must import createElement?
No. since react use babel which Recognizes our JSX and does not need an import
Python Tears Through Mass Spectrometry Data
Published: 2021-07-12 20:17:28

{% youtube D5YQ3ZLESZM %}

At the November 2019 Python Frederick event, Conor Jenkins showed the group how mass spectrometry works and how Python saves huge amounts of time when processing the large amount of data produced by a mass spec analysis.

The recording from the talk is available on YouTube. [Check it out!](https://www.youtube.com/watch?v=4o63V0AdrHk)

Questions? Feel free to mention me on Twitter at [@mblayman](https://twitter.com/mblayman) so I can try to respond to your question.
Learning html code
Published: 2021-07-12 20:09:50

There is a lot of HTMl tags that comes into play when coding. In this blog I will teach you guys all the important ones you should know to be a good coder. 

1. <p>Hi </p>   
   <h1>Hi </h1> 
   <h2>Hey</h2>
   <h3>Sup </h3>
   <h4>Hi </h4>
   <h5>Hi </h5>
   <h6>Hi </h5>
   <title>Hey </title>
   <body>Hi today I will teach you guys how to make an inclined plane. </body>
 
  The p tag is used to write a paragraph. On the other hand the h1, h2, h3, h4, h5, h6 tags are used according to how big of a font size you want. h1 being the biggest font size and h6 being the smallest font size. In addition, the title tag is used so you can type the title of your web application. Lastly, the body tag us used so you can differentiate the heading and the body part of your coding. 

2. <h2><strong>Hey Guys</strong></h2>
   <p><i>How you guys been?<i></p>
   <mark><h3>What's your favorite sport?</mark></h3>
 
 The strong tag is used to make something bold. On the other hand, the i tag is used to italicize a word/sentence/paragraph and the mark tag is used to highlight a sentence/paragraph. 

3. <div class="...">
   .....
   </div>
 The div class.... is used to group block HTMl elements. Such as the h1, body, and paragraph tags together. 

4. < > (start)  </..>(end)
For every html tag you always start with < > and put the tage in the middle. On the contrary, you always end with </...>, and put the tag in the middle. 

5. <style> </style>
The style tag is used to input css code in your html file. 

6. <ol>
   <li> one </li>
  <li> two </li>
  <li> three </li> 
</ol> 

The ol tag is used to specify which order list is being used. The li tag is used to define the list item. 

7. 2021 &copy; 

the &copy; tag is used to make a copyright symbol on your we application. 

8. <br>
br is used for a line break. 

Here more coding that I did where you you could skim through and learn more coding not just HTML. 

https://github.com/ssharsh/Crosswordgame/blob/main/index.html
No password required: authenticate using Github access tokens
Tags: git, github
Published: 2021-07-13 05:19:56

---
title: No password required: authenticate using Github access tokens
published: true
date: 2021-07-12 19:59:43 UTC
tags: git,Github
canonical_url: https://on-sw-integration.epischel.de/2021/07/12/authenticate-using-github-access-tokens/?pk_campaign=feed&pk_kwd=authenticate-using-github-access-tokens
---

You are using Github as remote git repository? This article explains how to use an access token to authenticate yourself instead of username+password.

# Create an access token

On Github.com, navigate to the setting menu of your Github profile. From there, choose “Developer Settings” and then “Personal Account Tokens”.

Here you are able to create a personal account token:

[![](https://on-sw-integration.epischel.de/wp-content/uploads/2021/07/screenshot-github-newtoken-300x218.png)](https://on-sw-integration.epischel.de/wp-content/uploads/2021/07/screenshot-github-newtoken.png)

create new token

Select scope “repo”.

The token you created is presented to you. Save it to you credentials store (like KeePass).

# Use the token

The token is part of the remote url of the repository. The URL has this form:

```
https://userid:token@github.com/projectid/repo.git
```

e.g. for a repo of mine and suppose the token is “token1234567890”:

```
https://epischel:token1234567890@github.com/epischel/gensources.git
```

When you are using the token in the remote URL you won’t be prompted for your password.

Good luck with your repo on Github!

 ![](https://www.epischel.de/analytics/piwik.php?idsite=3&rec=1&url=https%3A%2F%2Fon-sw-integration.epischel.de%2F2021%2F07%2F12%2Fauthenticate-using-github-access-tokens%2F%3Fpk_campaign%3Dfeed%26pk_kwd%3Dauthenticate-using-github-access-tokens&action_name=Authenticate+using+Github+Access+Tokens&urlref=https%3A%2F%2Fon-sw-integration.epischel.de%2Ffeed%2F)
Terraform Associate Certification: State file
Tags: terraform, devops, cloud, aws
Published: 2021-07-12 19:41:25

If you have started using Terraform as your *Infrastructure as Code* tool you might wonder how does TF know which resources need to be created, deleted, or modified when you run your code. Well, let me tell you that it is not a magic stuff, the agent behind this is the **state file** 😉.

## Terraform apply
Every time we deploy our Infrastructure with *terraform apply*, a file named *terraform.tfstate* is created, it includes all the information about the resources that are currently deployed in the cloud. 

You can navigate on it and you will see a key with the name of **resources**, it is an array which lists all the elements that were created with the configuration file (after doing *terraform apply*). 

If you create an EC2 instance in AWS, your tfstate file will look like this:

![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tzx0w4lmg8tsxba0ihl.png)
 
To understand better how this works, it is important to talk about the ***Current and Desired State***

## Current State 
The *terraform.tfstate* file is the responsible to store the current state of the infrastructure, it is to say all the information about the resources that are currently deployed in your Cloud Provider (after the *terraform apply* command has been run).

## Desired State
All the code that is set in the main.tf file corresponds to the desired state, on it you specify what resources you expect to be created in the Cloud, and here is where the magic occurs 😉.

Terraform is going to **compare** both states (current and desired one), if there is an existing difference between both, it will make the changes that are necessary so that the current state is equal to the desired state.
TF shows the result of the comparison when we execute the *terraform plan* command in the terminal.

## Refreshing the state

But, what if we modify a resource directly in the Cloud Provider interface not using Terraform apply (AWS Console for instance), let's say that we changed the EC2 instance type from t2.micro to t2.large, how is our **local** *terraform.tfstate* be modified to match with those *remote* changes? 🤔.

Well, Terraform has the solution for that. We just need to run the command **terraform refresh** and all the configuration that is currently running in the cloud provider will be updated in the local *terraform.tfstate* file.

### Closure
Now that you understand the **state** concepts in Terraform, we can start talking about how to manage it in a collaborative workflow, let's talk about the **remote state** in a different post.


Thanks for reading, any comments or suggestions are welcome. We are here to help each other 😉💙.
SDLC Review
Published: 2021-07-12 19:37:34

I recently found myself a bit flustered during an interview conversation about SDLC.  It seemed like it might be a good time for a review.

What is the software development life cycle?

SDLC or the Software Development Life Cycle is a process that utilizes stages or phases to produce software with the highest quality and lowest cost in the shortest time possible.   There are usually six stages in this cycle: requirement analysis, design, development and testing, implementation, maintenance, and evaluation.

Let’s take a quick look at each stage.

Requirement Analysis
In this phase information is gathered from the eventual end user.  This information is then used to plan the basic project approach.   

Design
In this phase decisions are made regarding the architecture of the software solution. This can involve creating design documents, coding guidelines, and discussing the tools, practices, runtimes, or frameworks that will help meet the software requirement specification and goals defined in the requirements gathering phase. 

Development
This is when the actual code is written.  Each member of the project adheres to the requirements that were developed in the previous phases and sticks to an agreed upon timeline.  Testing is also performed in this phase.

Implementation
This is the final stage of development, where the software is put into production.  This may initially be on a limited scale or with only a small number of users.

Maintenance
This stage involves reviewing, understanding, and monitoring network settings, infrastructure configurations, and performance of application services in production. This is also where user issues will be addressed, and software is updated.

Evaluation
This is where the system that was developed, as well as the entire process, is evaluated. Did we meet the clients requirements?  What did we do well?  What can we improve on for the next project?

These phases can also be applied inside various models.  Some of the more popular models are Agile, Big Bang, Iterative, V-shaped and Waterfall.  These models could fill an entire post on their own so, perhaps that will be our next topic.