teleren/devto huggingface dataset:
Color Palates for Web Design
Tags: webdev, frontend, design
Published: 2021-02-11 23:18:08

The following was generated with [theme generator](https://jadenconcord.github.io/theme-generator/).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m5drv17rjl83w1yyakgd.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l0l6qc7vm2jrlnzd8b8h.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rwt4p5k3txwiufa0z23n.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vsqsnfdpdqzsg2fbu00j.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/39kh7ga4ijmxqm3nt7j3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fue9h2fjbq8ynuzfsxg5.png)
BEM methodology
Tags: css
Published: 2021-02-11 23:17:42

CSS is a language that is easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable.BEM is an approach for improving CSS structure.

BEM stands for Block Element, Modifiers.

**How It Works**
A BEM class name includes three parts.

1- Block: The outermost parent element of the component is defined 
   as the block.
2- Element: Inside of the component may be one or more children 
   called elements.
3- Modifier: Either a block or element may have a variation 
   signified by a modifier.

**Block**
A Block is a component part of a website that can exist in it’s own right. We’re using a product card as our example Block.

Naming : Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing

Example : .block
![Alt text of image](https://keepinguptodate.com/pages/2020/05/02-bem-block-example.svg)

**Element**
An Element is a child aspect of a Block that only exists within that Block. In our product card example, image, title, price and like-button are all examples of Elements within the product card 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

Example : .block__elem

![Alt text of image](https://keepinguptodate.com/pages/2020/05/03-bem-element-examples.svg)

**Modifier**
A Modifier can be applied to either a Block or an Element and is used to adjust the default look or behaviour of the Block or Element. With our product card example, the Modifier liked exists and can be applied to both the product card Block and the like-button Element when a product has been liked

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

Example : .block--mod

![Alt text of image](https://keepinguptodate.com/pages/2020/05/04-bem-modifier-examples.svg)

Overall, I would highly recommend using it on your next project. It may be different than what you’re used to,but I’m convinced you’ll quickly see the benefits it provides on projects both large and small. It will save you So much debugging time in the future. Hopefully, you find this article useful.
Top 10 TypeScript meetup videos in 2020
Tags: typescript
Published: 2021-02-11 23:16:38

Hello there,

2020 was a busy year for TypeScript. To summarize it for you, we've decided to create a hand-picked selection of the most interesting and relevant talks.

These presentations cover a wide range of TS-related topics, including using TS with Vue, solving problems with a compiler, using Gatsby and GraphQL with TypeScript respectively, writing safer JavaScript apps with TS, and so much more.

Check it out here: https://blog.meetupfeed.io/typescript-meetup-videos-2020/

Regards,
MeetupFeed
Why you should sign-up for Lunchclub right now.
Published: 2021-02-11 22:41:57

This is a tough time for many people, including myself. I've been struggling deciding what the next steps in my career should be. I'm struggling with discovering what my goals are and what I want. I also feel disconnected from people, and I can imagine many of you are as well. It's partly why I enjoy writing articles on this platform. Posting here it's a way for me to express myself, and condense my thoughts, perhaps a way meeting people, get advice.

Enter [Lunchclub](https://lunchclub.ai/), an app I discovered last year. The premise is simple, bring people together. You put in when you're free through the week and the app sets up 1:1 meetings for those times with like-minded people, usually with a focus on data science, startups, tech, development, or programming.

[Lunchclub](https://lunchclub.ai/) is magical.

I fluctuate between times of being more-or-less social, but I always find when I push myself to commit to a chat, I always come out on the other side of the call feeling energized. Sometimes not all matches spark the best of conversations, but the majority are fascinating. You want to know my secret? I ask one simple question early on in the conversation.

> What are you excited about?

Then I usually specify that it doesn't need to be about work. It can be about anything. Sometimes I get the wildest responses, of people learning a new language, or doing some crazy new workout.

The magic sauce of this simple prompt is that it steers the conversation away from the classic set of questions you can always come back to later, like:

* So, what do you do?
* Where are you from?
* How long have you been using Lunchclub?

Stay away from these questions, they often lead nowhere, and you shouldn't spend more than 3 minutes talking about them. I can't say say how many times I've been stuck talking about lunchclub for a half-hour. It's a waste. I don't want to talk about who you met on the platform.

I genuinely want to **learn** about you! Reach out! [reggi.com](http://reggi.com)
Essential Linux Command For Developers
Tags: linux, productivity, tooling
Published: 2021-02-11 22:28:54


## Introduction

In this tutorial, I am going to share basic Linux commands that we can use to edit the text file. One can ask why we should use the Linux tools where we can use IDE which is more powerful than Linux tools.

- In servers, you don't have GUI in that case you have to work with the CLI
- You can with CLI text editor like vim or nano but working with CLI tools makes  you more efficient
- Makes you look cool in front of your friends

## Outcomes

By end of the article you will understand the basic linux cli tools to work with the  text file

## Printing the content

There are ton of tools to print the content of the file lets see some of the common and popular cli tools

## Cat

cat command used to print the content of the file

**Usage**

```jsx
$ cat file-name 
```

There are some more flag that you can use along with cat to make cat more powerful

```jsx
$ cat -n file-name
```

The above command will print the content of the file with line number

## tac

tac command is the same as a cat but prints the content in the reverse order

**Usage**

```jsx
$ tac file-name
```

## head

Imagine you have 100 lines of code you want to see the beginning of the file In this case head command comes in hand

**Usage**

```jsx
$ head <file-name>
```

If you want to print up to a particular number of lines you can use the head command with n flag

```jsx
$ head -n 5 file-name
```

The above command prints.  the first 5 line of the file

## Tail

Tail command used to print the last part of the file

```jsx
$ tail file-name
```

Similar to head you can combine with the n flag

```jsx
$ tail -n 5 file-name
```

prints the last 5 lines of the file

## more

more command is similar to the cat

**Usage**

```jsx
$ more <file-name>
```

To show only 10 lines per page you can use the below command

```jsx
$ more -10 <file-name>
```

The main disadvantage of the more command is you can't scroll up

## less

less is similar to the more.But it's more efficient because because it doesn't load the whole file in the go

**Usage**

```jsx
$ less <file-name>
```

## Searching

To search  for the particular string in the file we can use  **grep**

**Usage**

```jsx
$ grep <string> <file-name>
```

We can combine with the -i flag to ignore the case

```jsx
$ grep -i <string> <file>
```

## Find and Replace

To find and replace the string in the file we can use **sed** command

```jsx
sed -i '/s/<text-to-be-searched>/<text-to-be-replaced>/' filename
```
To replace all occurrences


```jsx
sed -i '/s/<text-to-be-searched>/<text-to-be-replaced>/g' filename
```

## Conclusion


In this article, I have covered basic Linux CLI tools that you can use to edit the text file . If you have any more feedback or have any question let me know via Twitter
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2021-02-11 22:26:05

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

---

Good addition to the "underrated developer YouTubers" discussion  [win of the week](https://dev.to/karan316/3-underrated-web-dev-youtubers-you-should-check-out-24pm), @jadenconcord!

{% devcomment 1b8fo %}

@sanspanic has to Google this every time... and there's no shame in that! 

{% devcomment 1b85m %}

If you were the new CEO of Amazon Web Services what would be your first executive order? That's the fantastic question @andrewbrown raised in [this](https://dev.to/andrewbrown/if-you-were-the-new-ceo-of-amazon-web-services-what-would-be-your-first-executive-order-1ik7) post. Equally fantastic is @spetnik's response. 

{% devcomment 1b8j7 %}

Welcome to DEV, @davidlipschitz! It's always great to have a mentor make themselves available here. 

{% devcomment 1b7co %}

Congrats on this win of the week, @mitchpommers! Looking forward to reading the accompanying post. 


{% devcomment 1b78j %}

See you next week for more great comments ✌
JavaScript Destructuring Assignment - 1
Tags: javascript, node, tutorial, webdev
Published: 2021-02-11 22:17:31

{% youtube QNZB0idz48k %}

---
In the previous article, we've seen how to extract property values from an object and store them as variables.

```js
const person = {
  name: 'Bello',
  age: 27,
  size: {
    height: 6.7,
    weight: 220
  }
};

const heightSize = person.size.height;
// const weightSize = person.size.weight;

console.log(`${person.name} is ${heightSize}" tall.`);
```

There's a technique called **destructured assignment** that easily extracts properties from an object.

Syntax:

```
{ key } = obj;
```

See the example below:

```js
const person = {
  name: 'Bello',
  age: 27,
  size: {
    height: 6.7,
    weight: 220
  }
};

const { name } = person;
const { age } = person;

console.log(`${name} is ${age} years old.`);
```

Multiple property names in the same object (above example) can be accessed as shown below:

```js
const { name, age } = person;
console.log(`${name} is ${age} years old.`);
```

To extract a nested object property, the syntax is shown below:

Syntax:

```
{ keyN } = globalObj.objkey1.objkey2...objkeyN;
```

See the example below:

```js
const person = {
  name: 'Bello',
  age: 27,
  size: {
    height: 6.7,
    weight: 220
  }
};

const { name } = person;
// const { height } = person.size;
const { weight } = person.size;

console.log(`${name} weighs ${weight}lbs.`);
```

See more examples below:

```js
let a, b, c = 4, d = 8; // a = 4, b = 4, c = 4, d = 8
[ a, b = 6 ] = [ 2 ]; // a = 2, b = 6

[ c, d ] = [ d, c ] // [ 8, 4 ] => c = 8, d = 4

let x, y;
( { x, y } = { x: 'Hello ', y: 'Bello' } );

console.log(x + y); // Hello Bello

let person = { name: 'Bello', isTrue: true }
let { name: lastName, isTrue: t } = person;

console.log(lastName); // Bello
/* console.log(name); // ReferenceError: name is not defined */

let user = { lName: 'Bello', id: '3kwe9i' };
let { lName = 'Doe', isTrue = false } = user;

console.log(lName); // Bello
console.log(isTrue); // false
```

**Happy coding!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---

### TechStack Media | Domain
- Purchase a `.com` domain name as low as $9.99.
- Purchase a `.net` domain name as low as $12.99.
- Get cheaper domain names as low a $3.
-  Build a website with ease.

<a href="https://domain.mno8.net/c/2653712/848391/9560" target="_top" id="848391"><img src="//a.impactradius-go.com/display-ad/9560-848391" border="0" alt="" width="300" height="250"/></a><img height="0" width="0" src="https://imp.pxf.io/i/2653712/848391/9560" style="position:absolute;visibility:hidden;" border="0" />
DEV + Casey
Tags: meta, forem
Published: 2021-02-11 22:11:04

I'm thrilled to announce that today is my first day as a Community Associate with the Forem and DEV team. 

### Who am I?
#### Professionally
I'm a self-taught engineer who learned Java by accident, UI/UX designer, and Community enthusiast. I've worked professionally with frameworks/libraries such as Vue and React, I've built a Streetwear fashion community to ~40K users, and I've been a top-level community admin for a gaming community that had over 4.5 million subscribers between the three owners. 

**How did you learn Java by accident?** Easy! All I did at that time was play RuneScape with a few of my friends. Holy wow, it took ages to get a decent account, even after we’ve been playing for four or five years at that point. I wanted to build a `Private Server` - so I tried. I didn’t know what coding/programming was at the time and I was literally using a text editor on my Samsung Series 7 Chronos. Eventually, I gathered an understanding of programming by learning what "Java" was

#### Personally
I'm a husband and a dad to two little babies. I enjoy programming, playing video games, going on hikes/walks in our local redwood forests, and mowing the lawn, yep - I like mowing the lawn...

### Why Forem?
I was really excited for the opportunity to join the Forem and DEV team as I love writing code and learning new languages, frameworks, etc... I thought I would be a great asset to the team and to all of you wonderful community members around me at DEV.

Feel free to hang out with me here or on [Twitter](https://twitter.com/ioscasey)
Secure Cookies in 5 steps
Tags: security, webdev
Published: 2021-02-11 22:02:11

Even with the right CORS setup and CSRF protection cookies present a few more attack vectors. Let's discover how to secure cookies.

> Note that frameworks usually come with the below settings set properly so even developers inexperienced with web security can develop secure apps.

## 1. Samesite attribute

We've already covered this topic previously. You want to make sure your cookies are set to `sameSite=Lax` so they are only being passed when the request comes from the same site, and not a third-party context.

## 2. HttpOnly attribute

Cookies, by default, can be accessed using javascript via `document.cookie`. You can imagine this being a problem if an attacker finds a vulnerability to execute arbitrary javascript on your site (more on that in the next article).

To avoid cookies being accessible via JavaScript, set the `HttpOnly` flag.

## 3. Secure attribute

By setting the secure attribute, the cookie will only be sent over HTTPS.
This is especially important if a user uses your service in a public network where non encrypted traffic can be read by an attacker.

## 4. Encryption

You can have all of the above set, but if you forget to encrypt your cookies, it can be very dangerous.

Say you don't store a token, but the user ID for the auth cookie. If it's not encrypted, an attacker can just change the cookie value to another user id by himself. To avoid this, the cookie should be encrypted with a strong algorithm like AES-256 and a long, secret, random key.

In Node.js for example, you can use Node's crypto library for this.

> Note that encryption is different from hashing (like you would with a password using tools like bcrypt). Encryption allows decrypting the value again which is necessary for cookies.

## 5. Cookie signing

For extra security, sign cookies using a message authentication code (MAC) to make sure nobody can tamper with it.

This is again possible with the [crypto library](https://nodejs.org/api/crypto.html#crypto_crypto_createhmac_algorithm_key_options) in Node.js, but generally, for this and all above, I advise you to use something more high level and not implement any of this from scratch.

---

We've covered a lot in these articles but there are still ways an attacker can steal your users' data through the browser, even though you followed all the protections so far, and that's through XSS attacks. Let's cover this next time and see if React/Vue REALLY protect you from all XSS attack vectors!
Livestream com ReactJS + NodeJS
Tags: javascript, node
Published: 2021-02-11 21:48:05

Olá sras e srs, recentemente publiquei um repo lá no github mostrando a ideia de LiveStream (1:N).

A proposta é simples, a pessoa que está fazendo a Live tem um código e para se assistir a live desta pessoa, basta ter o código.

Na vida real, é interessante salvar esse código assim que ele é criado (a cada nova live o código muda), e então assim que a pessoa que começar assistir alguma live, não precise inserir código nenhum. (Semelhante a Twitch).

Screenshot:
![Print](https://user-images.githubusercontent.com/40338524/102680135-76430100-4194-11eb-993a-c5a13db11426.png)


Link do repo:

https://github.com/kingaspx/VideoStream-ReactJS-Node
Fancy Programming Words
Tags: programming
Published: 2021-02-11 21:43:37

<span>Cover photo by <a href="https://unsplash.com/@altumcode?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank">AltumCode</a> on <a href="https://unsplash.com/s/photos/programming?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank">Unsplash</a></span>

I recently discovered a few interesting Latin based words used as programming terms. Here they are,
<hr>
### Idempotent
Having the same result for a given input every time. This means a function that returns the same result every time with the same input. Here is an example,
~~~js
// Multiply argument "a" by 2 
const fun = a => a * 2;
fun(2) // 4
fun(2) // 4
~~~
The above is Itempotent because it returns the same value when it is given the same input. This function would not be Idempotent,
~~~js
let counter = 0;
// Add counter to argument "a" and increment counter
const fun = a => a + counter++;
fun(2) // 2
fun(2) // 3
~~~
<hr>
### Predicate
This one is simple. It just means that the output of a function will be true of false. Example,
~~~js
const userLoggedIn = user => user.status === 1;
~~~
<hr>
### Abstraction
Abstraction is the process of simplifying the code so that you hide major functionality. Basically, it is where you make your code organized and separate from the functionality of code. It is practically the DRY (dont repeat yourself) technique.
~~~js
// Less abstraction
users.push({id: result.id});
// More Abscraction
addUser(result.id);
~~~
<hr>
### Serialization
Simply, Serialization is where you convert data from one application so it can be read by another application. Let's say you have a Javascript application that needs to communicate to a Python application. In the Javascript application, you would Serialize the output to a JSON file, and then the Python script would read the file and parse the text.
<hr>
### Immutable
Immutable simply means that the state of a variable does not change. It is like a <code>const</code> variable or an object with properties that do not change.
<hr>
### Operand
An operand is basically a function with a set of math operators like <code>a => a+b*c</code>
<hr>
### Ephemeral
Used to describe things that when changed, cannot go back to the original state. Let's say you have a simple object that you modify, you can not go back to the original state of the object so it is Ephemeral. Computer RAM is also considered Ephemeral because it is temporary.
<hr>
### Hard Code
This is one that most people might know. It means code that when done is hard to change. They are things that require manual coding changes to modify. Generally, Hard Coding things could a bad thing because you may not be abstracting the entire application.
<hr>
Now go make an application that abstracts serialization of the output from an Idempotent operation using Ephemeral states to manage results from Immutable operations and set them by Abstracting them Predicatively.  
  
  
<code>Credit to [FireShip](https://fireship.io/) and [hackr.io](https://hackr.io)</code>
Wiki.js - The Best OpenSource Wiki
Published: 2021-02-11 19:34:59

Looking for a while for a good and easy wiki to set-up, I finally found Wiki.js. 

If you don't know what it is, it's an extensible OpenSource wiki software. Build-in you have :
* **an authentication module** (where you can create different roles for all your users, 2FA...)
* **multiples editor** (Markdown, WYSIWYG, HTML...)
* **a version tracker**
* **the localization module**
* ...

Basically, it looks really pretty but if you want to customize its theme, it's also possible.

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

<br/>

---

The tool is available for all OS, on Docker and Kubernetes. You just need to have a database linked to the wiki and it will work fine.

I don't want to waste your time, if you are interested go check the project/documentation.

* Official website : https://js.wiki/
* Installation documentation : https://docs.requarks.io/install
* Github Project : https://github.com/Requarks/wiki

<br/>

---

<br/>

If someone working on this project sees this post: Thanks for your amazing work!
Set file associations per project in VS Code
Tags: vscode
Published: 2021-02-11 21:27:52

I am in and out of several different frameworks.  When editing in VS Code sometimes I want .js files to be "React JavaScript" instead of just "JavaScript" in a particular project.

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


You can set the association by creating `settings.json` in a `.vscode` directory. This 

```json
{
  "files.associations": {
    "*.js": "javascriptreact"
  }
  // other project settings
}
```

If you need different file associations you should be able to find them by searching: files.associations vscode + the language you need.
Getting in the FlowState with Standing Desks
Tags: discuss, meta, productivity, wellness
Published: 2021-02-11 21:16:40

---
title: Getting in the FlowState with Standing Desks
published: true
description: 
tags: discuss, meta, productivity, wellness
cover_image: 
---


[FlowState](https://www.flowstate.to/) is a community of health, fitness, and wellbeing enthusiasts. It’s built on Forem and is definitely worth checking out if you're looking for some great fitness conversations and advice! 

With more and more developers working from home due to a combination of personal preference, the COVID-19 pandemic, and shifting work cultures, many of us are pushing code into production while pulling nerves in our back — it's _hard_ to maintain proper ergonomics outside of the traditional office environment. 

This FlowState convo is full of opinions on the merits of standing desks! And when it comes to office setups, I don't need to tell _you_ that we developers are an opinionated lot 🙃

> ### **["What are your thoughts about the benefits of standing desks?"](https://www.flowstate.to/ildi/what-are-your-thoughts-about-the-benefits-of-standing-desks-13nh) by ildi (on [DEV](https://www.dev.to/ildi) and [FlowState](https://www.flowstate.to/ildi))**


If you’ve been thinking about investing in a standing desk or you already have one and want to share advice on using one, don’t miss this discussion on FlowState! 


#### 🌱