teleren/devto huggingface dataset:
Autoscrolling lists with React Hooks
Published: 2020-06-19 18:39:51

<!-- ## _React_ to live data changes with an autoscrolling list -->

## Create a container
To start, create a component that recieves a list of `[items]` and displays each `item` by mapping over the list.
```javascript
export const AutoScrollContainer = ({ items }) => {
    return (
        <div className="autoscroll-container">
            <div className="scroll-list">
                {items && items.map((item, index) => 
                    <p key={index}>{`${index + 1}. ${item}`}</p>
                )}
            </div>
        </div>
    )
}
```

React's `useRef` hook will provide a reference to a DOM element at the bottom of the list. Then we can use the browser's `scrollIntoView()` API to do the scrolling for us. 

```javascript
export const AutoScrollContainer = ({ items }) => {
    const bottomRef = useRef();

    const scrollToBottom = () => {
        bottomRef.current.scrollIntoView({
        behavior: "smooth",
        block: "start",
        });
    };
    return (
        <div className="autoscroll-container">
        <button type="button" onClick={scrollToBottom}>
            Scroll To Bottom
        </button>
        <div className="scroll-list">
            {items &&
            items.map((item, index) => (
                <p key={index}>{`${index + 1}. ${item}`}</p>
            ))}
            <div ref={bottomRef} className="list-bottom"></div>
        </div>
        </div>
    );
};
```
Add a button to trigger the scroll and watch the magic happen before your eyes.

![Press to scroll](https://media.giphy.com/media/kGby1nNX9FIxZFNaPH/giphy.gif)

That's pretty neat! But at this point this is nothing *auto* about this solution. To fix this, we can react to changes in `[items]` using `useEffect` to trigger the scroll from there. I'm adding another `useEffect` hook to handle the initial mount as well.
```javascript
export const AutoScrollContainer = ({ items }) => {
    ...

    useEffect(() => {
        scrollToBottom()
    }, [items])

    useEffect(() => {
        scrollToBottom()
    }, [])

    ...
}
```

Let's also add a some logic to mock live data.
```javascript
const ITEMS = "perferendis asperiores adipisci voluptatibus autem repellendus".split(" ")
export const App = () => {
    ...
    // Add a new item to `items` every second.
    useEffect(() => {
        let interval = setInterval(() => {
            let item = ITEMS[Math.floor(Math.random() * ITEMS.length)];
            setItems([...items, item])
        }, 1000);

        // remember to clear timers
        return function cleanup() {
            clearInterval(interval);
        };
    });
}
```

# Conclusion
You now have an auto-scrolling react component! You could implement an infinite scroll to handle very large lists of live data if you felt inclined.

![Auto Scroll](https://media.giphy.com/media/kbQUIIiijd0XDEsZJA/giphy.gif)
Custom Validation in Materialize css
Tags: javascript, webdev, css, materialize
Published: 2020-06-19 18:37:03

Hey! Thanks for dropping by. Well, if you are using Materialize in your project then I believe this trick can be really helpful for you. Almost every website has some kind of form or input fields the user interacts with. And most of the fields have some validation logic attached to them. Think of a case where you want the user to enter a unique username as the input. But when this username is not unique we immediately notify the user by displaying a warning for the same.

I had a similar use case and I was using [Materialize](https://materializecss.com/), a CSS framework in my project. It provides you an easy way to show or customize warning messages if the input value is not in the expected format. But what if you want to perform custom validation for an input. For eg. username must not contain  characters like @, { etc. Unfortunately the documentation does not mention any such scenarios.

So just like any other developer I googled that immediately. But I could not find any useful resource. After digging a bit on how Materialize manages to show the warning messages, I came out with a solution(a little hackish 😅). Basically Materialize adds valid class to the input to show succes message and vice-versa. Accordingly it displays the helper text. Here is a quick demo -
{% codepen https://codepen.io/pulkit29/pen/ZEQLjqa %}

The above code checks if username contains [@.;:] and shows message accordingly. I attached event listeners for fetching the current value and toggled classes accordingly.

Hope this helped.

Find me on my social media handles 🤟.
My experience with Ember - Intro
Tags: ember, javascript, brazil, brasil
Published: 2020-06-19 18:34:30

---
title: My experience with Ember - Intro
published: true
description: After some suggestions from Twitter. I will tell about that journey. 
tags: Ember, Emberjs, Javascript, Brazil, Brasil, JS
// cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sejr52d3ndhlbp1coaxx.png
---

I'm starting a sequence of posts telling my personal experience with "Ember.js". To be continued. 

Estou começando uma sequência de posts falando da minha experiência pessoal com o Ember.js. Continua... 

![Tomster](https://dev-to-uploads.s3.amazonaws.com/i/cdyx9mkzyaucsc8ljbry.png)

Origin of the idea / De onde veio a idéia: {% twitter 1274039651758735363 %}
JFrog Artifactory vs AWS CodeArtifact: Comparison in 10-ish parts
Tags: jfrog, artifactory, aws, codeartifact
Published: 2020-06-19 18:06:24


Ah, the smell of a new AWS product! 

You can expect Corey Quinn to be all over it, and he is!
 {% twitter 1270845921073393665 %} 
Wait, what? No tags? As in "no metadata"? One of the most (if not *the* most) important features of an artifact repository? Oh-oh...

Also, the name sounds [kinda familiar](https://aws.amazon.com/artifact/)? Ah, right! So, please welcome AWS CodeArtifact, not to be confused with AWS Artifact!

My dear friend [Pavan Belagatti](https://dev.to/pavanbelagatti) wrote a great high-level comparison between the newly released AWS CodeArtifact and some of the leading Artifact Repository Managers out there:
{% link https://dev.to/pavanbelagatti/review-of-the-aws-codeartifact-48b6 %}

I'd like to take the points he mentioned as advantages of JFrog Artifactory and with the help of the amazing JFrog developer advocates dive into a little more detail for each and every one of them. Here is the list, I will link each item to the blog post about them as we publish:

#### Universal solution supporting all major package formats (including Docker, no need to have a separate Docker Registry)
{% link https://dev.to/jfrog/go-big-or-go-home-a-quick-review-of-artifactory-and-codeartifact-repository-types-and-capabilities-1ghn %}
#### Unlimited flexibility in repository configuration – local story, any remote repository proxying, virtual repositories aggregation
{% link https://dev.to/svenruppert/aws-codeartifact-versus-jfrog-artifactory-1bi0 %}
#### Integrates with all CI/CD tools
{% link https://dev.to/jfrog/aws-codeartifact-lol-who-needs-build-integrations-anyway-4pn2 %}
#### Custom API-driven automation
To be posted!
#### Extensive CLI for uploading and downloading artifacts
To be posted!
#### Support for hybrid & multi-cloud environments
To be posted!
#### Replication - ensures locality in any network topology
To be posted!
#### Immediate (thanks to checksum-based storage) metadata-based promotion between repositories
{% link https://dev.to/jfrog/jfrog-artifactory-vs-aws-codeartifact-promotion-pipelines-3chk %}
#### Enriched implicit, explicit and custom metadata
To be posted!
#### Security vulnerability and license compliance scanning
To be posted!
#### Artifactory Query Language
To be posted!

Stay tuned, and **come back often** to see the items on the list turn blue, linking to the comparison deep-dives.
Day 8 of #100DaysOfCode
Tags: 100daysofcode
Published: 2020-06-19 17:57:30

Today's Progress: I have fixed some bugs of My Tesla Battery Range Calculator with React and Redux and completed Tribute Page coding challenge at https://www.freecodecamp.org/.

Link to work: https://codepen.io/kyawkhaing/full/wvMgxmK
Binary Tree (Recursive) traversal methods
Published: 2020-06-19 17:57:23

There are three ways to traverse or visit all the nodes in a tree. They are:

## In-order Traversal
This form of traversal works by visiting the left branch of the tree, then the current node, and then the right branch.

Below is an implementation of in-order traversal:

```javascript
function inOrder(treeNode) {
  if (treeNode) {
    // explore left branch
    inOrder(treeNode.left);

    // visit/print current node
    console.log(treeNode.value);

    // explore right branch
    inOrder(treeNode.right);
  }
}
```

![Tree](https://raw.githubusercontent.com/elishaking/tech-articles/master/tree.png)

If we had a simple tree like the one above, with in-order traversal, the node values will be printed in this order:

```javascript
[40, 20, 50, 10, 60, 30, 70]
```

## Pre-order Traversal
This form of traversal works by first visiting the current node, then the left branch, and finally, the right branch.

Below is an implementation of pre-order traversal:

```javascript
function preOrder(treeNode) {
  if (treeNode) {
    // visit/print current node
    console.log(treeNode.value);

    // explore left branch
    preOrder(treeNode.left);

    // explore right branch
    preOrder(treeNode.right);
  }
}
```

![Tree](https://raw.githubusercontent.com/elishaking/tech-articles/master/tree.png)

If we had a simple tree like the one above, with pre-order traversal, the node values will be printed in this order:

```javascript
[10, 20, 40, 50, 30, 60, 70]
```

## Post-order Traversal
This form of traversal works by exploring child nodes before the current node.

Below is an implementation of post-order traversal:

```javascript
function postOrder(treeNode) {
  if (treeNode) {
    // explore left branch
    postOrder(treeNode.left);

    // explore right branch
    postOrder(treeNode.right);

    // visit/print current node
    console.log(treeNode.value);
  }
}
```

![Tree](https://raw.githubusercontent.com/elishaking/tech-articles/master/tree.png)

If we had a simple tree like the one above, with post-order traversal, the node values will be printed in this order:

```javascript
[40, 50, 20, 60, 70, 30, 10]
```
In the example above, the values of the left and right sub-trees are printed before the root node 

___

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

Leave a comment below or tweet me @ElishaChibueze if you have any questions or suggestions
Mocking standard library functions
Tags: go, testing
Published: 2020-06-17 01:19:39

Hi! First time writing a post here. Hope you enjoy!

# Introduction

It's quite common the needing to test some function from a standard library package. Today, I want to show you guys one simple way for testing some troublesome functions, such as `time.Now`, which I'm gonna use for this tutorial.

# Hum, go on...

There are a few ways of doing that, one of them is **injecting** your target function (the one you want to mock, the `time.Now` in my case) in the function you are testing, just pass it as a parameter.

```Go
package main

import (
	"fmt"
	"time"
)

func WhatTimeIsIt(nowFunc func() time.Time) {
	fmt.Printf("The time is now: %v\n", nowFunc())
}

func main() {
	WhatTimeIsIt(time.Now)

	// So, when testing you could do something like this
	mockedNowFunc := func() time.Time {
		// I can control the time with one line of code, mwhahaha
		return time.Date(2050, time.January, 01, 15, 06, 54, 0, &time.Location{})
	}
	WhatTimeIsIt(mockedNowFunc)
}

// outputs
// The time is now: 2020-06-16 21:44:35.722303193 -0300 -03 m=+0.000060729
// The time is now: 2050-01-01 15:06:54 +0000 UTC
```

The problem with that is you need to pass the original `Now` function every time you want to know `WhatTimeIsIt` in production code :/

Of course this won't cause you a production bug, because Go Compiler is [awesome](https://dev-to-uploads.s3.amazonaws.com/i/bd652hqcj6mobg08ea68.jpg) and would warn you if you 
forget a parameter when calling the function, but, it's still kind of annoying injecting it every time. It should have a way to avoid this...

**YES**, my young apprendice, there is. That's why I'm writing this post

It's very simple, actually, you just need to wrap your original function inside a global variable within your package... Wait, what?!

I'm gonna show you and you'll probably think: Why the hell did he write this post, then? **¯\_(ツ)_/¯** Everyone needs to start somewhere, right?!

```Go
package main

import (
	"fmt"
	"time"
)

func WhatTimeIsIt() {
	fmt.Printf("The time is now: %v\n", nowFunc())
}

var nowFunc = func() time.Time {
	return time.Now()
}

func main() {
	WhatTimeIsIt()

	// So, when testing you could do something like this
	nowFunc = func() time.Time { // note that we just overwrote the global var nowFunc
		// I can control the time with one line of code, mwhahaha
		return time.Date(2050, time.January, 01, 15, 06, 54, 0, &time.Location{})
	}
	WhatTimeIsIt()
}

// output still the same
// The time is now: 2020-06-16 21:44:35.722303193 -0300 -03 m=+0.000060729
// The time is now: 2050-01-01 15:06:54 +0000 UTC
```

Now you don't need to pass the function every time, and when you need to mock the function for testing, or whatever reason, you can just overwrite the `nowFunc` var.

It's a nice tool for having in your toolkit. Probably, there are some other ways of doing that, but that's it for today.

Feel free to comment and thanks for reading!
React App: Creating a Responsive Navigation Bar from Scratch
Tags: react, css, html, javascript
Published: 2020-06-19 17:46:39

Hey Devs, today's post is about creating a responsive navigation bar in react apps from scratch. Use the 1 hour video below.

You will learn:
* How to style react components using CSS
* Using CSS media queries to create responsive design
* Managing state
* Using props
* and more...

**Please support my content** (*Stay Awesome!*)
1. Subscribe to my YouTube channel [here] (https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=10)
2. Donate to my PayPal [here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url)


{% youtube SkyoBJwwvh4 %}
`heroku local` command with ESET Cyber Security Pro
Tags: heroku, environment
Published: 2020-06-19 17:38:48

---
title: `heroku local` command with ESET Cyber Security Pro
published: true
description: 
tags: heroku, environment
//cover_image: https://direct_url_to_image.jpg
---

I have run `heroku local` today, but I could not open the sample page in a browser.
ESET was blocking packets.

The settings below allowed for connection.

# Version
ESET Cyber Security Pro 6.8.300.0

# Firewall Setting

## Application / Service
* Target: All applications

## Action/Direction
* Action: Allow
* Direction: In

## Protocol/Ports
* Protocol: TCP & UDP
* Ports: Local
* Local Port: 5000

## Destination
* Destination: Entire Internet

# Reference

https://github.com/heroku/go-getting-started
How to create a CSS Heart - CSS Illustrations
Tags: css, tutorial, coderarchive, design
Published: 2020-06-19 17:35:11

In this CSS Illustration tutorial, we're going to take a look at how to create a CSS Heart ❤️

You can find the codepen here:
https://codepen.io/coderarchive/pen/rNxjdKp

If you'd like to see more of my videos, [head over to Youtube!](https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg) 

For more content, stay tuned! A follow/sub comes a long way to show support 

Follow and connect with me on:
----------------------------------
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive
Time...
Tags: struggling, time, lost
Published: 2020-06-19 17:33:11

# Time
Lately I have been coming to grips with having enough time to accomplish what I want to in life. I am happy with my professional career and want to branch out to doing some personal projects. I find my self not having the time to even start on a personal website. It has been bugging me more and more lately because we don't have an infinite amount of time in life. So every day that passes not working on a personal goal is a day lost. 

# How do you deal with it?
I want to know how others deal with this problem? I know I can't be the only one that has ever felt this way in life. I am still young (25 yrs old). So I understand that in the grander scheme of things I have time. Although at the same time if feels like I don't.

## Thoughts?
HOW TO USE REDUX THUNK - SAVE AND LOAD DATA FROM THE BACKEND
Tags: react
Published: 2020-06-19 17:31:01

---
title: HOW TO USE REDUX THUNK - SAVE AND LOAD DATA FROM THE BACKEND
published: true
description: In this video we learn how to work with redux-thunk a library for redux to perform side effects. We'll save the data to server using a thunk.
tags: react
series: React
---

{% youtube lmyKHYmgUYc %}

In this video we learn how to work with redux-thunk a library for redux to perform side effects. We'll save the data to server using a thunk.

Code: https://github.com/satansdeer/redux-thunk
Discord: https://discord.gg/KPh8Vvb
Free React Testing Checklist: http://eepurl.com/c_8tzP

Subscribe to the channel: http://bit.ly/2QZ2UY3
How To Convert React Application To SolidJS
Tags: react
Published: 2020-06-19 17:28:47

---
title: How To Convert React Application To SolidJS
published: true
description: In this video we'll take a look at a new frontend framework Solid. It's API is very similar to ReactJS, it supports Context, Hooks and JSX. Let's try to remake a simple React application to Solid.js.
tags: react
series: React
---

{% youtube wu6HvLoi9VQ %}

In this video we'll take a look at a new frontend framework Solid.
It's API is very similar to ReactJS, it supports Context, Hooks and JSX. Let's try to remake a simple React application to Solid.js.

Code: https://github.com/satansdeer/notes-app-solid
Discord: https://discord.gg/KPh8Vvb
Free React Checklist: http://eepurl.com/c_8tzP

Subscribe to the channel: http://bit.ly/2QZ2UY3
How to Use React Context | React Context vs Redux
Tags: react
Published: 2020-06-19 17:26:42

---
title: How to Use React Context | React Context vs Redux
published: true
description: In this video I show how to use React Context. We'll create a context provider that will hold a list of notes. Then I compare it to Redux.
tags: react
series: React
---

{% youtube xAhta1yZzwo %}

In this video I show how to use React Context. We'll create a context provider that will hold a list of notes. Then I compare it to Redux.

Code: https://github.com/satansdeer/context-example
Discord: https://discord.gg/KPh8Vvb
Free React Testing Checkilst: http://eepurl.com/c_8tzP

Subscribe to the channel: http://bit.ly/2QZ2UY3
How to Add SVG Images in React
Tags: react, javascript, webdev
Published: 2020-06-19 17:11:36

In this short article, I'm going to walk through a step-by-step of adding SVG images to React app. For the purpose of the article, I'm going to use [Undraw](https://undraw.co/) which is an open-source illustration that hosts a wide variety of high quality and beautiful SVG images and you can use it for personal and commercial work.

### 1. Download an SVG image

First download an SVG image from the [Undraw](https://undraw.co/), or any other resources you like. When you finished downloading it in your computer, move the downloaded image to your project directory.

### 2. Import the image into the file you want to use

Here's a trick: adding SVG images is different from adding any other types of images (like PNG or JPEG). You are going to import the SVG image as if it is a component.

To do that, we'll write import like this:

```js

import {ReactComponent as Jotaro} from "./jotaro.svg"

```

In this example, I named the component `Jotaro`, but you can call it whatever you want. Just make sure that you are importing it from the correct file directory and wrap it with curly braces `{}`. As for what `ReactComponent ` does, it basically tells React that an SVG image should be imported as a component and not a file name.

### 3. Add the image into your component file

Now that we've imported the image, let's actually use it.

To render the SVG image, add the `Jotaro` component in the component file:

```js
import {ReactComponent as Jotaro} from "./jotaro.svg"

const App = () => (
        <div>
            <Jotaro />
        </div>
);

export default App;

```

And that's it! Now you know how to add SVG images to React, you can bring SVG images into your projects. Hopefully, you find this article helpful.

You can view a complete code example from [Code Sandbox](https://codesandbox.io/s/svg-image-example-omcy8?file=/src/App.js) with a bit of CSS styling.

Resources: [Adding Images, Fonts, and Files](https://create-react-app.dev/docs/adding-images-fonts-and-files/)
Angular Components vs. Web Components in 10 minutes
Tags: angular, typescript, webcomponents
Published: 2020-06-19 16:55:22

The bridge between an [Angular Component](https://angular.io/guide/architecture-components) and a 
[WebComponent](https://www.google.com/search?q=web+component) is 4 lines of code, placed in a [service](https://angular.io/guide/architecture-services).

```typescript
// This uses the new custom-element method to add the popup to the DOM.
showAsElement(message: string) {
 // Create element
 const popupEl: NgElement 
  &WithProperties<PopupComponent> =
    document.createElement('popup-element') 
     as any;

 // Listen to the close event
 popupEl.addEventListener('closed', () => 
   document.body.removeChild(popupEl));
 // Set the message
 popupEl.message = message;
 // Add to the DOM 
 document.body.appendChild(popupEl);
 }
```
This statement casts the created popup-element, to type [NgElement](https://angular.io/api/elements/NgElement) which also contains [WithProperties](https://angular.io/api/elements/WithProperties). The property names and values are within our Angular Component.

```typescript
    const popupEl: NgElement & WithProperties<PopupComponent> =   
      document.createElement('popup-element') as any;
```

**The Angular Component Class 'withProperties'**

```typescript
// Class decorator stuff cut out for brevity
export class PopupComponent {
  state: 'opened' | 'closed' = 'closed';
  // Properties must use getter/setter syntax
  @Input()
  set message(message: string) {
    this._message = message;
    this.state = 'opened';
  }
  get message(): string { return this._message; }
  _message: string;

  @Output()
  closed = new EventEmitter();
}
```
[Working Example Github Repo ](https://github.com/Javaman2/customelements)

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


Next: Exporting and importing an Angular Component as a Custom Element.

JWP2020 Angular Components vs. Custom Elements