teleren/devto huggingface dataset:
Create Next.js app in one command 
Tags: javascript, react, nextjs, tutorial
Published: 2020-12-13 04:34:34

[Next.js](https://nextjs.org/) is very popular framework for building modern [React](https://reactjs.org/) applications. It comes with powerful features such as server-side rendering, automatic code-splitting, static exporting options, and much more that make it easy to build scalable and production-ready apps. 

#Getting Started

To get started all you have to do is just to run:
```
$ npx create-next-app
```

>`create-next-app` sets up a React application powered by Next.js by running just **one command**. 

###System Requirements
Node.js 10.13 or later
MacOS, Windows (including WSL), and Linux are supported

#Setup
You can create a new Next.js app using `create-next-app`, which sets up everything automatically for you. Than just:
`cd next-app`

After the installation is complete, run `npm run dev` to start the Next development server, this will make the app available on port 3000, on localhost, and just easy as this when we open http://localhost:3000 in our browser we will have:

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

To edit try to make some changes in pages/index.js and /styles/globals.css:

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

and check the result on your browser:

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

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Example: We will create pages/about.js that exports a React component like below: 

```
function About() {
  return <div>
    <h1>This is About page!</h1>
  </div>
}

export default About
```

It is accessible at http://localhost:3000/about and looks like this:

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

## Conclusion
This post has shown the new Next.js boilerplate called Create Next App, which is the officially supported Next.js starter application. Click [here](https://nextjs.org/docs/api-reference/create-next-app) for documentation. In the next blog, we will look at the new features one by one and also talked about how to get started using them.



To connect with me please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile). 

Thank you for reading!
My CLI project: The League...
Published: 2020-12-13 04:33:35

Welcome to The League ...

The League is my CLI program in which you are now an NBA general manager and can pick your team, to uncover team details. These details include your team's full name, city, conference, and division. 

This was hands down the most difficult project I've had to complete in my educational career. However, I learned a ton; implementing object orientation, using an API to access data from an outside party, style and construct an interactive program, etc. 

The process was an interesting one and planning definitely helped. Taking my cohort lead's advice to build out piece by piece and test each part helped so much. 

1. Plan out the order in which you want things to run as your user interacts with the program.
2. Build the folders and files needed.
3. Structure each class (API, CLI, etc.)
4. Style the interaction... can never go wrong with adding some ASCII art. 


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


Wrap that up and you got yourself a working CLI program. (It feels good to finally say it's "working" lol)

While I reflect on the overall project, I'd like to touch on one portion that was really giving me issues; the API class. 



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



Started with the initialize class method which set a local variable (@url) to the url that included my desired API data. This made it easier to call once I wrote the next class method (@get_team), where the user would be able to make a new instance of a team and use the API data to get all the information. Next, I structured this method to access the keys and values of the api and use JSON to parse the information. JSON is used to receive, send, and interchange the format of data. As you can see, I used JSON to parse the objects in the provided hash. Lastly, I ended the method with the ability to create a new instance of a team, from the information. 

(Still working on the coding vocabulary lol)

Setting up this API class is crucial to the entire project to prevent the need to hard code strings of data. Simply used data already provided, mass assigned all the available attributes, and used the objects I wanted to display later on. 

All in all, this was a big challenge for me but I learned so much and feel a great sense of accomplishment. I look forward to completing more challenges in the remainder of my time at Flatiron School.
Endpoint Security Technology.
Tags: cybersecurity, career, security, computerscience
Published: 2020-12-13 04:22:54

LAN devices such as switches, wireless LAN controllers (WLCs), and other access point (AP) devices interconnect endpoints.


But many attacks can also originate from inside the network. If an internal host is infiltrated, it can become a starting point for a threat actor to gain access to critical system devices, such as servers and sensitive data.

Endpoints are hosts which commonly consist of laptops, desktops, servers, and IP phones, as well as employee-owned devices that are typically referred to as bring your own devices (BYODs). Endpoints are particularly susceptible to malware-related attacks that originate through email or web browsing. These endpoints have typically used traditional host-based security features, such as antivirus/antimalware, host-based firewalls, and host-based intrusion prevention systems (HIPSs). However, today endpoints are best protected by a combination of NAC, host-based AMP software, an email security appliance (ESA), and a web security appliance (WSA). Advanced Malware Protection (AMP) products include endpoint solutions such as Cisco AMP for Endpoints.

The figure shown above is a simple topology representing all the network security devices and endpoint solutions discussed in this module.
Consuming Video Resources
Tags: productivity, discuss, career
Published: 2020-12-13 04:14:09

## Background

The learning process of a self-taught developer is time-consuming, from reading documentation to watching videos on how to build applications or a developer conference that usually lasts about 30 minutes or more. I find myself watching conference videos because they offer insights about a framework or optimizations that I would not figure out by reading through documentation.

While watching video provides resources, there is also a caveat of spending a large chunk of time on it. Additionally, viewing such videos makes me zone out after a while due to it being dry or too content-heavy. I needed a way to combat the time taken and zoning out.

## Faster

After a while, I concluded that watching videos with an increased playback speed is the solution. Initially, this thought is filled with self-criticism such as not being able to comprehend what the speaker is saying however it is a worthy attempt.

Watching videos at 2x speed takes time to adjust to but once I passed the adjusting phase, I never looked back. I find myself not zoning out much due to the need of focusing on what the speaker is saying at a high playback speed. Additionally, being focused increase my comprehension of the videos.

## Conclusion

Watching videos on a higher playback speed might not be for everyone, but it is worth a shot! Saving time and increasing comprehension is the main takeaway. With the extra time generated, I can devote it to doing other tasks or taking a longer break.

Give it a shot! Hope you enjoyed this post.
AIDE SUR MON PREMIER SITE
Published: 2020-12-13 04:09:14

Bonjour, je suis en train de créer mon premier site mais j’ai plusieurs problèmes . Je viens clémander des conseils (il faut que j'arrive trouver par mes propres moyens ...) 
- Pas moyen de redescendre le menu de navigation et le centrer à droite du logo en haut a gauche
- Descendre le séparateur (la ligne au dessus du menu) en bas de l'entête de sorte à ce qu'il prenne toute la largeur de l'id "block_page", en dessous du logo, du début du logo à la fin du menu, juste au-dessus de la bannière
- Quand on clique sur l'onglet "Mes réalisations" et "Contact", une marge supplémentaire se rajoute au-dessus de l'entête par rapport aux onglets "Accueil" et "Mon CV" alors que c'est relié au même fichier CSS (WTF)
- Réduire la couleur de fond de la balise "aside" dans les onglets "Mon CV" et "Mes réalisations"

Pouvez vous m'aiguillez svp ? Je m'entraine avant mon entrée en formation chez O'Clock 🙂
merci ❤
lien vers mon site et ses codes : https://codepen.io/JeanGrey1992/project/editor/XzEMQR
Migrate to Netlify from Github Page Custom Domain
Tags: portfolio, netlify, github, webdev
Published: 2020-12-13 04:08:42


https://github.com/wizlee/portfolio is official archived! It's now using the [Github page](https://wizlee.github.io/portfolio/) instead of https://wizlee.dev. 

### The steps are as briefly documented as follows:
1. Remove all Github page ALIAS and CNAME records from my web registrar site.
2. Remove custom domain from github page setting and then making sure the usual github page link is active.
3. Add custom domain in my existing Netlify project. 
4. Get the nameservers for the Netlify DNS zones and add them into my registrar site as custom DNS nameserver.
5. Verify in my site's domain setting that the new site DNS is configured successfully and the SSL cert propagated.
 
### The reasons for migrating are:
1. to utilize Netlify features such as deploy preview, functions, etc for future projects. 
2. to temporarily use private Github repo to host a static site before publishing the source code to prevent exposing keys or other sensitive information. 

During this migration there's downtime of the site, even after the SSL cert and DNS verification is done in Netlify. My assumption for this is the [Time To Live(TTL)](https://en.wikipedia.org/wiki/Time_to_live) value of the Github DNS/CDN cache. May be someone from the dev.to community can help to verify my assumption? 😉

Next up, adding this archive site as one of the projects in my live portfolio site. Stretch goal - automatically publish my latest dev.to posts onto the site using GraphQL query!
9 Useful apps for Developers
Tags: webdev, developers
Published: 2020-12-13 03:59:25


### Here are 9 useful apps for developers

Today i am going to share to you the apps i use on all the time when developing. 

#### [Web Screenshot](https://webscreenshot.now.sh/)
As the name goes, this is an app that enebles you to take screenshots of websites and web apps. It provides and easy to use interface in order to create high quality screenshots of any websites.
With this app, you are allowed to modify the screenshot size and quality.

#### [Squoosh](https://squoosh.app)
This is a simple but powerfull app, that allows you to compress your images without losing quality. It is pretty new. It can compress your images up to 60%+ lesser than its original size and you still get the same quality. Additionally, its a PWA (yay!), therefore you can use it offline at anytime.

#### [browserframe](https://browserframe.com)
Do you wish to enclode the screenshot of your web apps in a Mac style browser frame ? for them to look more attractive on your homepage ? Then this is app is for you. It  does not only support Mac styles but also windows. The available browser windows are `Chrome`, `Safari` and `Edge`.

#### [Metatags](https://metatags.io)
With metatags, you can view the metatags of any website you visited or anylink you find. Its pretty easy to use and efficient. It will also recommend you metatags to include on your page to improve on SEO and marketing.

#### [Unsplash](https://unsplash.com)
Unsplash is a website where you can get high quality images for free. They also provide an API in order to fetch images as per requests.

#### [Undraw](https://undraw.co)
A collection of high quality illustrations in SVG or PNG for your websites and web apps.

#### [flaticon](https://flaticon.com)
Flaticon provides thousands of free vector or image icons you can use anywhere. The provide a free and pain plan. In the free plan, you are required to attribute the author while in the paid plan, you don't need to.

#### [Font Awesome](https://fontawesome.com)
If you are builind a web app or site, you'll probably want to include font awesome icons. They are free and easy to use. All you need is to include their `CDN` link in your `head` tag and you are good to go.

#### [Google Fonts](https://fonts.google.com)
Google provides a repository of free fonts. You have the option of downloading a font or including it inside your page directly. They also provides many different styles of fonts to use.

> YOu have reached the end of this post. I hope you liked it ;)

<a href="https://www.buymeacoffee.com/rocketstellar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
How to Start Using Styled Components in Your Projects
Tags: css, styledcomponents
Published: 2020-12-13 03:58:39

First have to add the library to your project with 

`npm install styled-components`

Then you can have a separate file for all your stylings. Keep in mind the files will not be `css` files they will be `js` files.

To start using styled components, we must import it from "styled-components" 

```import styled from 'styled-components';```

Then you can start styling.

When you style, you can style individual elements

```javascript
import const StyledDiv = styled.div`
    display: flex;
    flex-direction: column;
`;
```

Now when we import them into our main app, we use them like a component.

```javascript
<StyledDiv>
    <AnotherComponent />
</StyledDiv>
```
JavaScript number sorting using default sort method
Tags: javascript, algorithms
Published: 2020-12-13 03:37:53

JavaScript has a default sort function which can be used to sort a list of values.

usage -> `array_name.sort();`

**However**, this sort method returns incorrectly for numbers, since this considers all values as string and sorts the list of numbers by comparing with the ASCII value of the individual values.

This can be resolved by using comparison inside of the sort method.

**ascending order sorting**

```
array_name.sort(function(a, b){
  return a - b;
});
```

**descending order or reverse sorting**

```
array_name.sort(function(a, b){
  return b - a;
});
```
Call the function inside that function
Published: 2020-12-13 03:33:33

Sometimes instead of just a loop, you might need a more descriptive tactic. A cool trick is if you need the same functionality to be repeated again you can just call the function again inside the function. Just make sure to break otherwise it might go into an infinite loop.

function hitAgain(number, boolean) { 
number +=1
if (boolean == false)
{
}
number += hitAgain(number, false)

return number

}


hitAgain(1, true)
Blog 1
Published: 2020-12-13 03:02:09

Hi, my name is Matthew Mrakovcic and I am from Long Island, NY. I come from a background of accounting and management. Currently I am transitioning into the technology field. Growing up, I always found technology fascinating. Once I was introduced to coding I fell in love with it. Upon researching roles in the industry I came across Software Engineering. After looking into Software Engineering more, I was intrigued by the skills associated with the role. A friend referred me to the Flatiron Bootcamp Pre-Work, and I really enjoyed the work I was doing there. I understood HTML and CSS with ease, but JavaScript brought some exciting new challenges. I decided I wanted to dive deeper into coding and become a Software Engineer, so I applied to Flatiron. So far I am very happy with my decision, and I can't wait to become a Full-Stack Software Engineer.
100 proyectos para aprender
Tags: beginners
Published: 2020-12-13 02:52:52

Estos son mis primeros 100 proyectos, algunos muy sencillos, otras también, con los que voy a comenzar mi aprendizaje de programación en HTML, CSS, y Javascript. Algunos son tomados de tutoriales, otros son ideas que se me ocurren, otros son variaciones de cosas que veo en la web. Pero todos tienen algo que quiero aprender, algo que me llama la atención.

1. Lista de 100 proyectos. 
2. Hello World!
Three.js - An Awesome Library to Bring Amazing Effects to Your Project.
Tags: javascript
Published: 2020-12-13 02:44:25

I recently discovered [this](https://paveldogreat.github.io/WebGL-Fluid-Simulation/) fluid simulation application, and was blown away. I was inspired to try my hand at WebGL and learn a little about the process involved in developing similar effects for the web (or in general).

I was able to find a few simple tutorials for WebGL, and almost immediately realized that it's much more involved than I initially anticipated. I'm not sure I'll be taking on the challenge anytime soon, although I genuinely love the work others have been able to accomplish with the technology, and would like to learn more eventually.

There is, however, an amazing library, called [Three.js](https://threejs.org/) which allows you to focus on developing effects without the need to understand the intricate low-level details of WebGL.

Here's a simple example I made while learning...

{% codepen https://codepen.io/brandonmweaver/pen/bGwggmW %}

I've had a ton of fun learning how to use Three.js, and I'm thrilled with the documentation that's been provided. While it will take me a little while to become comfortable working with Three.js, I'm excited to bring cool effects to my next side project.
Effective Interfaces In Golang
Tags: go, codenewbie, codequality
Published: 2020-12-13 02:37:34

# In go interfaces are useful to use in functions that you want to support multiple types

To start we need to create a function

```go
func hello() {

}
```

I want this function to be able to take strings, ints, and floats. How would I do this?

With an interface{} parameter

```go
func hello(s interface{}) {

}
```

Now how to add handling for the types that you may find in an interface with a switch statement.

```go
func hello(s interface{}) {
    switch s.(type) {
        case int:
            fmt.Printf("%d", s.(int))
        case float64:
            fmt.Printf("%d", s.(float64))
        case string:
            fmt.Printf("%s", s.(string))
        default:
            fmt.Printf("No handling for this type")
    }
}
```

This is an easy way to add handling for interface types using a switch statement.

Know that `s.(type)` can only be used within a switch statement.

You may notice the use of `s.(int)` and `s.(string)` This is simply telling the compiler that you would like to use the interface as a string or the interface as an int so that you can use functions that are associated with said type.

# I hope that clears up some confusion about go interfaces
What are Page visibility and full-screen mode WEB API?
Tags: javascript, api, webdev, codenewbie
Published: 2020-12-13 02:25:41


Hey, learners and beginners here are my latest post, where we gonna learn about the Page visibility and Full-Screen Mode WEB API. 


# Page visibility Web API

PageVisibility API is used for detecting the visibility of the page. The document object provides properties and event listeners to detect the page visibility. 

**This API is useful for** <br />
- Handling auto pause & play of video or animations
- Avoid playing distracting sounds when a user is not focused on the tab
- Stop polling or refreshing data on the page when not visible
- Switch image in carousel only  when a page is visible

### Properties

The document provides two properties to find page visibility. 
- **hidden(boolean)**: Boolean value will be true if page is hidden
- **visibilityState**: Represents the state of visibility. Has two possible value. 
  - `visible`: Page is visible
  - `hidden`: Page is hidden

### Event
An event `visibilitychange` will be fired on document object when page visibility changes

```javascript
document.addListener('visibilitychange', handler); 
```

> Play or pausevideo on page visibility change
```javacript
function handler() { 
    if (document.hidden) {
        document.getElementById('video').pause();
    } else {
        document.getElementById('video').play(); 
    }
}
```

<hr>

# FullScreen Mode Web API

Fullscreen mode can be achieved in a web page using the API provided on the HTML element. 

An HTML element like a video can be viewed in fullscreen mode by using `requestFullscreen()` method. 

Fullscreen API works on standard HTML elements. It doesn't work on `<dialog>` element and elements inside iFrame where iFrame doesn't have `allowfullscreen` attribute set. 

### Request Fullscreen

requestFullscreen() accepts a single parameter and returns a promise. 

`{ navigationUI: 'auto' | 'hide' | 'show' }`

- `hide`: The browser's navigation interface will be hidden. 
- `show`: The browser will present page navigation controls and possibly other user interfaces
- `auto`: The browser will choose which of the above settings to apply. This is the default value. 

### Example

```html
<video id="video" width="320" height="240" controls>
   <source src="src-video" type="video/mp4">
</video>
```

```javascript
document
  .getElementById("video")
  .requestFullscreen()
  .catch((err) => console.log("Couldn't open in fullscreen mode")); 
```

### EXIT FULLSCREEN

Exit form fullscreen mode is achieved by using `exitFullscreen()` method on doocument object `document.exitFullscreen()`

Document object has two event handlers changes in fullscreen. 

- `document.onfullscreenchange` : emits events, that represents transition between fullscreen mode or not. 
- `document.onfullscreenerror` : Error handler for fullscreen error event.

<hr>

That's it. ⚡Thanks For Reading | Happy Coding 😎
Postman, RapidApi.... what keys do I use where?
Tags: postman, api, python, help
Published: 2020-12-13 02:16:09

I’m using RapidApi and Postman. But the keys don’t match up to the places/names that are in Postman. What do I use from RapidApi? There’s a “X”that starts out of some codes, tokens? But what do I use where?
Recipe App
Tags: dohackathon
Published: 2020-12-13 01:53:06

## What I built
I built a recipe app using NextJS and MaterialUI. The deployment was super smooth. Previously, I have used GCP and Heroku, honestly, the best deployment experience I have ever had was with DigitalOcean. No hustle at all. Good Job, guys!

### Category Submission: 
Random Roulette

### App Link
https://recippy-3cm9c.ondigitalocean.app/

### Screenshots
![recippy-3cm9c.ondigitalocean.app_](https://dev-to-uploads.s3.amazonaws.com/i/pyfmxfadbec70xob06b7.png)

### Description
You can search recipes by name, filter them by ingredients, countries, and categories.

### Link to Source Code
https://github.com/rufataliy/Recippy

### Permissive License
MIT

## Background
I love cooking, so thought why not make an app that could be useful for me and others.