teleren/devto huggingface dataset:
Fullstack AES-GCM encryption-decryption in node.js and the client-side
Tags: node, encryption, crypto
Published: 2021-02-12 15:26:33

**TL;DR**
You can find the fully workable gist code [here](https://gist.github.com/shahinghasemi/8008ba4918feeed08b14f7b9b3a32610).

AES(Advanced Encryption Standard) is a symmetric kind of cryptographic method which has different modes that you can read further here.
Without any further let’s get to the point. I wanted to encrypt some messages on the server side (Node.js) and send that encrypted message back to the client-side which can be pretty anything, e.g. React, Vue, Angular, vanilla JS, etc.
Since cryptographic stuff is sensitive, I wanted to do so using Native APIs that browser offers out of the box but I occurred some weird problems due to lack of enough resources for AES-GCM method, but finally I go the solution.
This is the code that should be run on the server side (node.js) 

```
function encrypt(message){
  const KEY = crypto.randomBytes(32)
  const IV = crypto.randomBytes(16)
  const ALGORITHM = 'aes-256-gcm';
  
  const cipher = crypto.createCipheriv(ALGORITHM, KEY, IV);
  let encrypted = cipher.update(message, 'utf8', 'hex');
  encrypted += cipher.final('hex');
  const tag = cipher.getAuthTag()
  
  let output = {
    encrypted,
    KEY: KEY.toString('hex'),
    IV: IV.toString('hex'),
    TAG: tag.toString('hex'),
  }
  return output;
}
```

And this is the code that should be run on the client side (browser)
```
function decrypt() {
  let KEY = hexStringToArrayBuffer(data.KEY);
  let IV = hexStringToArrayBuffer(data.IV);
  let encrypted = hexStringToArrayBuffer(data.encrypted + data.TAG);

  window.crypto.subtle.importKey('raw', KEY, 'AES-GCM', true, ['decrypt']).then((importedKey)=>{
    console.log('importedKey: ', importedKey);
    window.crypto.subtle.decrypt(
      {
        name: "AES-GCM",
        iv: IV,
      },
      importedKey,
      encrypted
    ).then((decodedBuffer)=>{
      let plaintext = new TextDecoder('utf8').decode(decodedBuffer);
      console.log('plainText: ', plaintext);
    })
 })
  
function hexStringToArrayBuffer(hexString) {
  hexString = hexString.replace(/^0x/, '');
  if (hexString.length % 2 != 0) {
    console.log('WARNING: expecting an even number of characters in the hexString');
  }
  var bad = hexString.match(/[G-Z\s]/i);
  if (bad) {
      console.log('WARNING: found non-hex characters', bad);    
  }
  var pairs = hexString.match(/[\dA-F]{2}/gi);
  var integers = pairs.map(function(s) {
      return parseInt(s, 16);
  });
  var array = new Uint8Array(integers);
  return array.buffer;
} 
```

I think the code is expressive enough but the take away is  **we should concatenate the encrypted and authentication tag together and passed it to the decrypt method of the subtle crypto API**.


If you've got any question, let me know on the comments ;)
On-Demand Answers Lessons and Feedback, via Video-Chat
Tags: showdev, javascript, beginners, firebase
Published: 2021-02-12 15:14:07

# Just discovered the #showDev tag!

Anyway, here’s a project I did last year. The platform is called [On Your Frequency](https://onyourfrequency.com/) - It’s for musicians, though I'd love you to try it out, as I have plans to broaden the audience. Users get on-demand answers, lessons and feedback, via video-chat.

Click “30 Sec demo”, to see how it works - don't worry, you won’t be connected to a real person! Select either “Answer” or “Feedback”, then for demo purposes, select one of the music production programs (DAWs) mentioned, though you may not know what they are. Then wait a few secs. 

Would love to know your thoughts on it.

I discuss some mistakes with the project, in this Dev.to [post](https://dev.to/markokoh/4-takeaways-mistakes-from-my-first-big-javascript-project-fh8)

Thanks
Top 50 cryptocurrencies explained in 2 sentences
Tags: defi, investing, cryptocurrency, bitcoin
Published: 2021-02-15 18:55:32

---
title: Top 50 cryptocurrencies explained in 2 sentences
published: true
date: 2021-02-12 15:11:43 UTC
tags: defi,investing,cryptocurrency,bitcoin
canonical_url: https://medium.com/coinmonks/top-50-cryptocurrencies-explained-in-2-sentences-4f607abf871e
---

[![](https://cdn-images-1.medium.com/max/1200/0*o5lt-pGHns4w2r-w.jpg)](https://medium.com/coinmonks/top-50-cryptocurrencies-explained-in-2-sentences-4f607abf871e?source=rss----721b17443fd5---4)

For the newcomers: the top 50 Cryptocurrencies, each described with two sentences.

[Continue reading on Coinmonks »](https://medium.com/coinmonks/top-50-cryptocurrencies-explained-in-2-sentences-4f607abf871e?source=rss----721b17443fd5---4)
Why you should be using React Context more often
Tags: beginners, react, javascript
Published: 2021-02-12 15:10:41

---
title: Why you should be using React Context more often
published: true
description: My opinion on why React Context should be thought of as "encapsulated state" instead of "global state".
tags: beginners,react,javascript
cover_image: https://owenconti.com/images/why-you-should-be-using-react-context-more-often.png
canonical_url: https://owenconti.com/posts/why-you-should-be-using-react-context-more-often/
---

When people think of context in a React JS app, they often think of global state. "I need to manage the theme my app is set to use, I can use context for this." While this isn't wrong, context can be used for so much more than that use case. I like to think of it as "encapsulated state".

Think of context as a component in your tree that can provide props directly to any child below it. Combine that with hooks, and you can write some clean APIs for your components. Let's take a look at a simple example using a Modal component.

Here's a look at a modal that accepts an `onClose` prop which should be called to close the modal. The modal manages its own transition system, so when closing the modal, the modal's custom `closeModal` needs to be called. After the transition is complete, the passed-in `onClose` prop will be called.

```jsx
// inside your Modal component...

const Modal = ({
	title,
	onClose
}) => {
	const closeModal = useCallback(() => {
		// Fake code, pretend to start the closing transition
		// and call `onClose` when the transition is done
		startCloseTransition(onClose);
	}, [onClose]);

	return (
		<ModalOverlay closeModal={closeModal}>
		  <ModalContent>
		    <ModalHeader title={title} closeModal={closeModal} />
		
		    <ModalBody>
		      {React.cloneElement(children, { closeModal })}
		    </ModalBody>
		  </ModalContent>
		</ModalOverlay>
	);
};
```

Here's the corresponding component that uses the `Modal` component above:

```jsx
const SomeComponent = () => {
	const [modalOpen, setModalOpen] = useState(false);

	return (
		<div>
			<button type="button" onClick={() => setModalOpen(true)}>Open Modal</button>

			{modalOpen ? (
				<Modal title="Some Modal" onClose={() => setModalOpen(false)}>
					<SomeComponentModalContent />
				</Modal>
			) : null}
		</div>
	);
};

const SomeComponentModalContent = ({
	closeModal
}) => {
	// `closeModal` is available here because the `Modal`
	// component passes it via the `cloneElement` call
	return (
		<div>
			<p>The content of the modal goes here</p>
			<button type="button" onClick={() => closeModal()}>Close the modal</button>
		</div>
	);
};
```

Continue reading this post [on my website](https://owenconti.com/posts/why-you-should-be-using-react-context-more-often/).
Windows Terminal Icons Package
Tags: terminal, windows, icons
Published: 2021-02-12 15:02:52

---
title: Windows Terminal Icons Package
published: true
description: 
tags: terminal, windows, icons
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zctfy2fpdqax220e7crf.png
---

I use Windows 10 at work, and even though I work in several linux environments at work and use linux at home, Windows has been doing some great things lately. I've switched completely from using Cmder to Windows Terminal. One thing I dislike is that it doesn't come with icons for the user to use when building profiles. You can see such discussion below, and push back from an actual MS employee below which was voted down to oblivion.

https://github.com/microsoft/terminal/issues/1918

I decided to put some icons together, I think some need higher resolution, but is a good start for anyone without spending too much time looking for all the icons.

https://github.com/TheFern2/windows-terminal-icons

Lemme know what you think, and please feel free to submit new icons with a PR.

Below is a profile example, I use powershell to generate a new guid. `New-Guid`, and then use that in the json.

```
PS D:\git\windows-terminal-icons> New-Guid

Guid
----
7c0578d1-35f0-46b5-972c-70b2293cff2c
```

```
{
    "guid": "{7c0578d1-35f0-46b5-972c-70b2293cff2c}",
    "hidden": false,
    "name": "Redis-Api",
    "commandline": "ssh fernandob@192.168.1.3",
    "icon": "C:/Path/To/Icons/WindowsTerminal/ubuntu.png"
},
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h9y4jdq27ljp7er9r9ia.PNG)
🚀10 Trending projects on GitHub for web developers - 12th February 2021
Tags: react, javascript, css, node
Published: 2021-02-12 14:41:12

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Remotion

Create videos programmatically in React. Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

{% github https://github.com/JonnyBurger/remotion %}

---

### 2. Evergreen

Evergreen React UI Framework by Segment. Components are built on top of a React UI Primitive for endless composability.

{% github https://github.com/segmentio/evergreen/ %}

---

### 3. CORS Anywhere

CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.

{% github https://github.com/Rob--W/cors-anywhere %}

---

### 4. Vuetify

Material Component Framework for Vue

{% github https://github.com/vuetifyjs/vuetify %}

---

### 5. Oasis Engine

Oasis Engine is a web-first and mobile-first high-performance real-time development platform.

{% github https://github.com/oasis-engine/engine %}

---

### 6. ag-Grid

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no third-party dependencies and integrates smoothly with all major JavaScript frameworks.

{% github https://github.com/ag-grid/ag-grid %}

---

### 7. Fontsource

Self-host Open Source fonts in neatly bundled NPM packages.

{% github https://github.com/fontsource/fontsource %}

---

### 8. cssnano 

cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.

{% github https://github.com/cssnano/cssnano %}

---

### 9. Objection.js

Objection.js is an ORM for Node.js that aims to stay out of your way and make it as easy as possible to use the full power of SQL and the underlying database engine while still making the common stuff easy and enjoyable.

{% github https://github.com/Vincit/objection.js %}

---

### 10. Victory

A collection of composable React components for building interactive data visualizations

{% github https://github.com/FormidableLabs/victory %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Importance of Writing Clean Code
Tags: codenewbie, productivity, javascript, programming
Published: 2021-02-12 14:23:11

Writing clean code is very important, especially in apps that are big in size and where multiple teams are working.
<br/>
**1. Extension becomes easy**
Following proper architecture and writing clean code makes it easy to extend the functionalities of your application. 

**2. A new developer will find it less difficult to understand your code**
Whenever a new dev gets added to the team, he/she will find it less complicated to read the code and understand what has been written. In contrast to that, the unclean code will require a lot of time and effort to understand.

**3. Making changes becomes easy**
A clean code will allow you to make changes more efficiently. Like, changing one thing in a part will not break the other features. If you have experienced this, you know how bad it can become.

**4. Testing and Debugging the Code becomes much more simple**
Finding bugs in an unclean and the code that is all over the place is a big ask. There are also chances that some bugs might be caused due to the non-neat code itself!

### How to write clean code ?
It's not that difficult. Following best architectural patterns, naming conventions, wring self descriptive code will do the job for you.

Follow us on instagram:
https://www.instagram.com/the.ninja.programmer/
Moving forward in 2021
Published: 2021-02-12 14:12:42

After conducting over 90 interviews in the month of January the results became clear. 

React and the Cloud win hands down. GraphQL is the new king of web base databases. Becoming a CSS artist still takes plenty of time, but there's tons of free templates for React projects to get started learning the art of web site design.

So for the rest of this year these are my focus points.

**Cloud and React**

- React
- Gatsby
- GraphQL
- Azure Functions
 - Used for Apollo Server queries
- Azure Storage Accounts
 - Deployment of Apollo Server
- Azure App Services
  - Free hosting for React websites

And of course my continued improvement at creating nice looking websites, which is harder to me than any of the above items.
Why Software Engineering?
Tags: flatiron, softwarengineering, coding, personal
Published: 2021-02-12 14:06:29

Through the last two weeks, I've asked myself so many questions.
// I'm smart right?
// Have I just been telling myself I'm smart?
// Is it worth all this time and money and stress?
// Is it ever going to "click" or do the next five months exist in a perpetual state of uncomfortable ambiguity?
// I made it work, but *how*?

Of everything I've learned during the First Mile, I feel like I haven't learned the answers. I feel confident in the difference between arrays and hashes and .sort and .collect, but when it comes to confidence in myself, I'm still struggling.

I guess I should just focus on the positive?
The joy of that green code is unmatched. The gratification and dopamine rush following a difficult problem has become something I crave.
The rush of helping someone understand a concept is wonderful.
Answering a prompt confidently makes me beam with pride.

The main objective of this blog post assignment was to describe **"Why did you chose this path?"**
I started working in restaurants when I was 14, washing dishes under the table for the diner at the end of my block. After years of the service industry I transitioned to retail. I recognize that these are important and valuable positions that require so much care and patience and understanding. However, it's taken me a long time to realize I may be capable of more? I want to be challenged and confused. I selfishly want documentation that I *am* smart enough. I want my life to be different.

So as I reflect back on things I've learned this week and questions I still have, hopefully I can continue to learn the answers.
My first talk: "How to prove your talent and stay motivated during your application journey"
Tags: career, speaking, beginners, motivation
Published: 2021-02-12 13:46:35

"New Year, New Me" - “New Year, New Me” - something like that best describes my feelings when [Raffaele](https://dev.to/pixari) asked me whether I wanted to give a talk at the [CodeJourneys](https://codejourneys.org/) Meetup. All I did so far that came close to this experiences was presenting in Uni, but never have I ever talked in public about my job. 

I was a bit insecure at first and wondered if I'm experienced enough to share proper recruiting insights or give advice and I had moments feeling like a tremendous imposter while preparing my talk. Then I tried to approach it as if I'm about to give advice to a friend and I realized that I'm always free to talk about my personal experiences and learnings and of course combine this with what I have learned so far in my job in Talent Acquisition. 

Long story short: Here's the recording of the talk. We had a nice Q&A afterwards and I'm super happy that I did it and actually helped and motivated people!

{% youtube TryM7B5GpDA %}

How do you stay motivated during your application process? I'm curious to read about your experiences in the comments.
Set default value in your function parameter
Tags: javascript, beginners
Published: 2021-02-12 13:43:33

### Hi Dev Community 😇
Did you know that we can actually set our function parameter with a default value, It will make your function at least return default value instead of `undefined`, sound great isn't it 🤩

```
    function multiply(a=1 ,b = 1) {
        return a * b;
    }
    console.warn(multiply(3,2))
    // expected output : 6 (3 multiply by 2)

    console.warn(multiply(5))
    // expected output: 5 ( 5 multiply by 1)

    console.warn(multiply())
    // expected output: 1 (1 multiply by 1)
```
now could you predict the expected output from this function 🤔

```
function substraction(a=1 ,b = 3) {
        return a - b;
    }
console.warn(substraction(3))
// the result is ?
```
Day 13: Validate ISBN
Tags: 100daysofcode, javascript
Published: 2021-02-12 13:41:13

Check if the input is a valid ISBN (International Standard Book Number).

```javascript
function checkIsbn(id) {
    var isbnRe = /\d-?\d{4}-?\d{4}-?[\dX]$/;
    if (!isbnRe.test(id))
        return false;

    var testId = id.split('-').join(''),
        result = 0;
    for (var i = 0; i < testId.length; i++)
    {
        var cur = testId[i] === 'X' ? 10 : parseInt(testId[i]);
        result += cur * (10 - i);
    }
    return (result % 11) === 0;
}
```
Terraform: Delete an Item from a List
Tags: terraform
Published: 2021-02-12 13:33:24

---
title: Terraform: Delete an Item from a List
published: true
description: snippet for how to remove an item from a terraform list
tags: #terraform
//cover_image: https://direct_url_to_image.jpg
---

I had a need to remove an expected item from a list recently while working with terraform. surprisingly, there is no native function to do that. The snippet below removes `2` from the list:

`compact([for x in tolist(1 ,2 ,3 ,4 ,5) : x == 2 ? "" : x])`

Try it for yourself!

`echo 'compact([for x in tolist([1 ,2 ,3 ,4 ,5]) : x == 2 ? "" : x])' | terraform console`

#### Update

Thanks to @goldbas for mentioning the `list()` was deprecated.
Border with gradient and radius
Tags: css, webdev, html
Published: 2021-02-12 13:29:36

<sup>**Find out more CSS tricks at [css-tip.com](https://css-tip.com)**</sup>

We all know the property `border-image` that allows us to add any kind of images (including gradients) as borders.

```css
.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}
```
![Gradient border](https://dev-to-uploads.s3.amazonaws.com/i/xx916apu8eysh9enq8ga.png)

Unfortunately, `border-radius` isn't supported with `border-image` and it's painful to find tricks to obtain rounded borders having a gradient.

Here is a trick that will produce such a result. No complex code, No SVG, or multiple elements are required! only two lines of CSS code using the `mask` property.

```css
.box {
  border-radius: 50px; /*1*/
  border: 10px solid transparent; /*2*/
  background: linear-gradient(45deg,red,blue) border-box; /*3*/
  -webkit-mask: /*4*/
     linear-gradient(#fff 0 0) padding-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /*5'*/
          mask-composite: exclude; /*5*/
}
```
![Gradient border with radius](https://dev-to-uploads.s3.amazonaws.com/i/1kfsw08obq1iug2v37ex.png)

## Explanation

(1)(2): Those lines are trivial.
(3): We apply a gradient as background and we make its origin the border box (by default it's the padding box).
(4): Using the `mask` property, we apply two opaque layers. The bottom one will cover the whole element and the top one will cover only the padding box (so it will not cover the border area)
(5): We exclude the top layer from the bottom one so that only the border area will be shown!
(5'): Some browsers still don't support `mask-composite` so we use the prefixed version.

### That's it!

Now you can adjust the border, gradient, and radius as you want. The only drawback is that this will mask the content so we can move the code to a pseudo-element instead

```css
.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 10px; 
  background:linear-gradient(45deg,red,blue); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}
```
![Gradient border radius](https://dev-to-uploads.s3.amazonaws.com/i/ejtg83k5vf61mq4b7j11.png)

*I replaced the border with padding to make the code shorter but the logic remains the same: we exclude the content area from the padding area so only padding will remain visible*

### Find more CSS Tips

[StackOverflow - Border Gradient with Border Radius](https://stackoverflow.com/q/51496204/8620333)

[StackOverflow - Button with transparent background and rotating gradient border](https://stackoverflow.com/q/65935742/8620333)