teleren/devto huggingface dataset:
Next.js Practical Introduction: Navigation and Routing
Tags: javascript, programming
Published: 2019-07-30 17:57:14

---
title: Next.js Practical Introduction: Navigation and Routing
published: true
description: Learn how to use Next.js to add navigation and routing to server-side rendered React applications.
tags: #javascript #programming 
canonical_url: https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-3/
---
In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications.

Created by ZEIT, a cloud company for hosting frontends and serverless functions, Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

Part one of this Nextjs series shows developers how to create pages and layouts. In the second part of the series, you learned how to add styling and create themes. In this third part of the series, you'll learn how to navigate to pages and implement routing using Next.js 9, the most recent framework version at the time of writing. Familiarity with the React library is recommended.

[Continue Reading 📖](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-3/?utm_source=twitter&utm_medium=sc&utm_campaign=nextjs-tutp3)
what's the first website/project you made?
Tags: discuss, webdev
Published: 2019-07-30 17:54:57

---
title: what's the first website/project you made?
published: true
description: 
tags: discuss, webdev
---

I'm in the interview process for my next tech job, but I figured I'd stop to look back a bit. The earliest bit of web development I can remember was my [Angelfire site](http://www.angelfire.com/blog/mrurl/). It's a static site that I built at the tender age of 11, all the way back in 2005.

It wasn't always orange- I had a cool tiled black-and-green matrix-style background (it was an animated GIF as well!) until link rot killed it. There were also a bunch of embedded pieces of code from other sites that were supposed to add different animations or sounds, none of which really work any more anyways. The whole thing is written solely in HTML, with some inline styling. 

It was super fun making it, and both embarrassing and fun to look at it again, now that I'm a proper MERN stack developer working with all kinds of high-tech containerization and automation tools.

Do any of y'all have old projects you'd like to share?
A Beginner Program I'm Rather Proud Of
Tags: beginners
Published: 2019-07-30 17:51:35

What does it do? It prints a four by four grid pattern.

![](https://thepracticaldev.s3.amazonaws.com/i/98cwqqmxavt5rqkovlla.png)

Thrilling, I know

But I got really excited once I debugged it and it worked.

Code is [here](https://github.com/erik-kristofer-anderson/Think_Python-Exercises_and_Examples/blob/master/Chapter_3/Exercise3-3_2-print_a_grid.py), and a slightly longer description is [here](https://github.com/erik-kristofer-anderson/Think_Python-Exercises_and_Examples/blob/master/Chapter_3/Exercise3-3_2-print_a_grid-notes.md).
How to get into Top Tech Companies - Secrets Revealed :)
Tags: codinginterview, amazon, facebook, google
Published: 2019-07-30 17:18:20

If you are looking to get into top tech companies and want to know what happens behind the scenes then do watch the following video.

The Video covers:

- How to get a job in top tech companies
- Clearing myths and doubts
- What skills are required to get into these top tech companies
- Useful tips and Resources


{% youtube WfqU3RVcieM %}


Hope it helps. :)
Is it fair to throw around the title "Software Engineer" like we do?
Tags: softwareengineer, javascript, bootcamp
Published: 2019-07-30 17:08:06

---
title: Is it fair to throw around the title "Software Engineer" like we do?
published: true
description: 
tags: software engineer, javascript, bootcamp
---

I see many people referring to themselves as Software Engineers after completing a 3 month Bootcamp or other similar fast track courses. Heck, I even saw a guy who did a few Udemy courses and got an internship doing mainly HTML call himself a Software Engineer. To be fair, his job title according to the company was "Software Engineer Intern". I wonder why we throw around that title in this industry like it's nothing? 

If we think about the aerospace industry, you have the proper certified Engineers designing aircrafts, doing stress test calculations and what not, and then you have those airport people who repair the aircraft/refill fuel. Those guys don't claim they are engineers! Would you fly on some aircraft a dude who did a 3 month course on aircraft design made? I know I would stay as far as I can from that!

In the steel industry you have the engineers who design and program the machines, and then you have the workers that use these machines to fabricate materials. These operators are NOT engineers, and don't call themselves Engineers.

So the question is: Why is it any different in this software industry? Is it because things are still very new? There is clearly a difference between the engineer and the person who has simply learned how to use the tools, like the machine operator in the factory.
CapitalOne AWS breach & AWS security discussion
Tags: aws, sec, netsec, iam
Published: 2019-07-30 17:04:56

CapitalOne was recently victim to a leak that [may have affected 100 million individuals](https://www.bloomberg.com/news/articles/2019-07-29/capital-one-data-systems-breached-by-seattle-woman-u-s-says) in the US. This post will not go into the unethical intent of the accused or the affect of private information being leaked, but rather the technical aspects and securing your AWS environment. If you'd like to read into it further, [this document](https://regmedia.co.uk/2019/07/29/capital_one_paige_thompson.pdf) does a fair job at explaining it.

The diagram below is my understanding of how the CapitalOne S3 data was compromised. Background information about the accused also states [that she worked for Amazon Web Services](https://imgur.com/NezWVKw) from 2015-2016 in the S3 division. Knowing that she worked for Amazon Web Services for a period of time very well may have affected her ability to compromise CapitalOne.

![diagram](https://www.troydieter.com/static/cap1_compromise.png)

There seems to be still unanswered questions, such as:

- What credentials were exploited for the accused to assume the STS role to gain access?
- Why wasn't AWS GuardDuty's [trusted list](https://docs.aws.amazon.com/guardduty/latest/ug/guardduty_upload_lists.html) being maintained?
- Why was the STS role that was assumed allowed access to the S3 bucket? A [strict bucket policy](https://docs.aws.amazon.com/AmazonS3/latest/dev/using-iam-policies.html) with allowed ARN's should've been used.

What is your opinion on the technical aspect of the exploitation and securing an AWS environment?
How to create simple tabs system with VueJS
Tags: javascript, vue, tutorial, frontend
Published: 2019-07-30 16:50:17

---
title: How to create simple tabs system with VueJS 
published: true
description: Simple example of tabs created with VueJS 
tags: JavaScript, VueJs, tutorial, frontend
---

Today I want to share with you and easy way to build a simple tab system using VueJS.

As a starter I am using Vue/cli 3

##Instructions
&nbsp; &nbsp; for installing vue-cli:

```bash
npm i -g @vue/cli
```

&nbsp; &nbsp; for creating a new project:
```bash
vue create <project-name>
```

&nbsp; &nbsp; for running the project:

```bash
cd <project-name>
npm run serve
```

***


##YouTube
{% youtube rkobOWi7htg %}

##Get the code
### &nbsp; &nbsp; GitHub
{% github polettoweb/vue-tabs %}

### &nbsp; &nbsp; CodeSandbox
{% codesandbox vue-template-xxtek %}
An absolute beginners guide to web development resources
Tags: beginners, frontend, webdev
Published: 2019-07-30 16:27:45

If you've never coded before but are interested in learning some of the basics, I have a few resources for you. I've provided a small number of introductory links as well as a few more thorough course options. I did my best to choose just enough options to not overwhelm you, but still provide choices that will hopefully fit your learning style.

Coding is a challenging, interesting skill that can take years to gain mastery. HOWEVER! The basics can be learned and used to enrich your life and help you understand how to use the tools and technology of our modern world. Just like learning how to change the oil and keep the tires filled on a car helps you use it better, learning just a bit about how code and the internet works helps you be a more knowledgeable citizen of the good ol' World Wide Web.

## Basic Introductions

[How Computers Work - Khan Academy](https://www.khanacademy.org/computing/computer-science/how-computers-work2)

"Learn everything from what makes something a computer in the first place, how computers use electrical circuits to store and process information, and the ways hardware and software work together."

[Internet 101 - Khan Academy](https://www.khanacademy.org/computing/computer-science/internet-intro)

"In six short, introductory videos, you’ll get an inside look into foundational concepts of everything from wires to websites"

[How Does the Web Work? - The Odin Project](https://www.theodinproject.com/courses/web-development-101/lessons/how-does-the-web-work)

"These concepts provide a more holistic understanding of the ecosystem in which you will be working and will enable you to talk intelligently with other developers about your work."

## Beginner Coding Courses

[Free Code Camp](https://www.freecodecamp.org/)

"You'll learn to code by completing coding challenges and building projects. You'll also earn verified certifications along the way. We also encourage you to join a study group in your city so you can code in-person with other people."

_This is my personal favorite and yes it really is free._

[The Odin Project](https://www.theodinproject.com)

"Our full stack curriculum is free and supported by a passionate open source community."

_This curriculum builds on other resources around the web, curating a thorough code education._

[Traversy Media](https://www.traversymedia.com/)

An excellent source of courses and youtube tutorials that include crash courses to get a brief overview of various coding topics.

[Codecademy](https://www.codecademy.com)

Codecademy has a mix of free and paid courses and is a viable alternative to Free Code Camp if that doesn't fit your style.

[Learn Enough to be Dangerous](https://www.learnenough.com/)

"Learn Enough is based on the idea that you don’t have to learn everything to get started—you just have to learn enough to be dangerous."

_I don't get any kickback for these paid courses, but can recommend them for beginners._
Raspberry Pi?
Tags: beginners
Published: 2019-07-30 15:50:54

What even is a Raspberry Pi? Are there Blueberry and Apple Pis too? 

I've heard it talked about at school, referenced and played a key role in a TV show (Mr. Robot to be specific and yes, you should definitely watch it!), watched Youtube videos and live demos of it but I still wasn't sure what it was. So, what is a Raspberry Pi? According to the Raspberry Pi Foundation:

*" It's a low cost, credit-card sized computer that plugs into a computer monitor or TV, and uses a standard keyboard and mouse. It's capable of doing everything you'd expect a desktop computer to do, from browsing the Internet to making spreadsheets or playing games."*

![](https://thepracticaldev.s3.amazonaws.com/i/da080bne7z2qluz029fn.jpg)

Okay, now that I have a better understanding of what it is, why would I want one? Well, turns out you can do an almost endless amount of things with a Raspberry Pi, but I'll just name a few:


- Make a digital photo frame.

- Make a robotic coffee maker.

- Build an old school arcade game.

- Stream Netflix and Amazon Video (where you can watch Mr. Robot btw).

- Practice/improve your coding skills.


That "build an old school arcade game" sounds like fun, but where do I start? I typed "How to build an arcade game with a Raspberry Pi?" in the Google search bar and almost too much information popped up! There are countless Youtube videos/tutorials, blog posts, websites, etc. that will point me in the right direction. I also saw that Raspberry Pi kits can cost anywhere from $27 - $90+ (with accessories that can be purchased at an additional cost). 

![](https://thepracticaldev.s3.amazonaws.com/i/zvmcdtt3vpep24gdyki7.jpg)

In the coming weeks, I'll be working on a project with a partner from school, building something out with a Raspberry Pi! Have any of you built something with one? How did it go? Any tips/tricks/comments? Let me know below!

Resources:

- https://www.raspberrypi.org/about/

- https://www.makeuseof.com/tag/different-uses-raspberry-pi/

- https://www.makeuseof.com/tag/netflix-amazon-video-plex-raspberry-pi/
Small, fast and simple Python CLI image converter for CNNs
Tags: discuss, python
Published: 2019-07-30 15:34:32

---
title: Small, fast and simple Python CLI image converter for CNNs
published: true
description: 
tags: discuss, python
---

![img](https://camo.githubusercontent.com/993fb4553c12b46fa81bfe4ae4931b33b6c7e892/68747470733a2f2f692e696d6775722e636f6d2f4b49693433315a2e706e67)

Hello, people) I've been working on CLI tool that's gonna help with dataset augmentation and image converting for CNNs or GANs or even other thing that needs images as input data. 

Here it is https://github.com/liashchynskyi/rudi

Support the repo with a star, if you like it! Thanks, hope this tool will help you 😀
Daily Challenge #27 - Unlucky Days
Tags: challenge
Published: 2019-07-30 15:31:47

---
title: Daily Challenge #27 - Unlucky Days
published: true
description: part of the Daily Challenge Series
tags: #challenge
series: Daily Challenge
---

Friday 13th or Black Friday is considered as an unlucky day. Calculate how many unlucky days are in the given year.

Can you find the number of Friday 13th in the given year? Good luck!

Input: Year as an integer.

Output: Number of Black Fridays in the year as an integer.

Examples:

```
unluckyDays(2015) == 3
unluckyDays(1986) == 1
```

**Note**: In Ruby years will start from 1593.


***
_This challenge comes from user suic. Thank you to [CodeWars](https://codewars.com/), who has licensed redistribution of this challenge under the [2-Clause BSD License](https://opensource.org/licenses/BSD-2-Clause)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Why I Switched from ZSH to FISH
Tags: fish, zsh, shell, productivity
Published: 2019-07-30 15:07:54

---
title: Why I Switched from ZSH to FISH
published: true
description: My experience using the friendly interactive shell.
tags: fish, zsh, shell, productivity
---

![fish](https://thepracticaldev.s3.amazonaws.com/i/e1wpy3kakj5i025ozw6s.png)

I've been using the `zsh` terminal with the infamous [oh-my-zsh](https://github.com/robbyrussell/oh-my-zsh) framework for many years now. The features and improvements it makes on plain old bash are impressive. But as my needs change, so does my shell. I made the switch to the `fish` shell almost a year ago and here is why I switched.

## Speed

`fish` is faster than `zsh`. Especially when using `zsh` plugins the loading time alone is significantly slower. But more than that, the overall experience for me feels snappier and more responsive in the `fish` shell. Since I'm using the terminal to be more efficient and get things done faster than a GUI, speed is one of my top requirements for my shell.

## Simplicity

The oh-my-zsh configuration and plugins tend to add complexity to the terminal environment, especially custom aliases. Overall, I have found `fish` to be much simpler regarding configuration and usage. My config file is only a few lines long and I'm only using one or two plugins for third party utilities (ex: [`fasd`](https://github.com/clvv/fasd) and [`nvm`](https://github.com/nvm-sh/nvm)). I also found a very simple theme that only shows me what I need, similar to my previous `zsh` theme.

## Autosuggestion

This is the main reason I moved to `fish`. I originally was using the [zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions) which is "Fish-like autosuggestions for zsh". This is what drew me to fish, this is by far my most used feature. If I mistype a command, it will show in red to indicate that it's an invalid command. But, more importantly, while I type the prompt auto-suggests my previous commands (by recent and most used). This is far quicker than `ctrl+r` and usually shows me the command I want 80%+ of the time. Again, this is the main reason I use `fish` and one of my favorite productivity tools on my computer, period.

## Vim Mode

I've been a vim user for many years now. What I love about vim is it's intuitiveness and efficiency (once you've really gotten it down). I know `zsh` offers a vim-mode but I was happy to learn `fish` has one as well. It a sort of simplified `vi` hybrid but it does all I need it to do.

## Conclusion

`fish` is fast, simple, offers powerful autosuggestion and a vim mode. These are the most important thing for me right now in the terminal so I proudly made the switch to this friendly interactive shell and haven't looked back.

What shell are you using? Do you love `fish` as much as me or found something better? Let me know in the comments!
MySigMail Card is out 🚀🎉 A free drag & drop email template builder
Tags: vue, startup, webdev, showdev
Published: 2019-07-30 15:00:03

---
title: MySigMail Card is out 🚀🎉 A free drag & drop email template builder
published: true
description: MySigMail Card is a free drag & drop builder helps you create email templates intuitively and very quickly
tags: vue, startup, webdev, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9mjm4lrh5lrsfb2levcf.png
---

Hi folks! 👋 [MySigMail](https://github.com/antonreshetov/mysigmail) developer here. I'm excited about the launch MySigMail Card - https://mysigmail.com/card. 

MySigMail Card is a free drag & drop builder helps you create email templates intuitively and very quickly. No need to register or create an account.

![](https://thepracticaldev.s3.amazonaws.com/i/39tt3gd1nci0ouc7exxz.png)

Features:

 - 50+ pre-designed components in categories: Menu, Header, Content, Feature, Call to action, E-Commerce, Footer
 - Content editing in components
 - Uploading external images
 - Live preview
 - Project management
 - Support email clients: the templates have been tested to render across major email clients, with support on popular web, desktop and mobile platform
 - Export the ready-made, compatible with any ESP, email template

Stack:

- Vue
- Vuex
- IndexedDB

**It's free!**

I'd be happy to get any feedback :innocent:
10 Teams, How many Frameworks?
Tags: javascript, webdev, discuss, frontend
Published: 2019-07-30 14:45:14

---
title: 10 Teams, How many Frameworks?
published: true
description: Using one framework to rule them all or better bet on multiple pillars?
tags: javascript, webdev, discuss, frontend
---

In my company 80% of the teams are using React and I would bet, a lot of their apps doesn't really differ from create-react-app + redux. I still don't understand the hype of React and hipster "innovations" like CSS in JavaScript (what the hell!? o.O). React itself was a good thing as it arrived but during time it blew up to much. But that's just my personal opinion which probably came up by liking other frameworks more^^. In my past 3 years I mostly developed with Aurelia and still like it's concepts. Anyways, we all know the discussion about the holy Framework which defeats all the others and will be the glorious King of Frameworks at the end of the war.

Even though I can't understand things like CSS in JS I'm super fine seeing others using it. Same applies for the framework decision and now it comes to my problem. Finally eh :D

As said most of the teams in my company are using React and in my department it applies as well. We try to create a design system with components which can be shared across the applications. As it seem to be very tricky to get multiple frontend developers on the same page it probably will remain a try^^. Never mind they use now Material-UI which requires React even though we aligned at some point that the components should be framework agnostic XD. Because the design system is now based on React as well, the question raised to me if it is now better for all teams to move to React? In my eyes we should not all have the same framework but it's hard to ague against obvious points. 

What comes after React and do we all have to migrate the applications in 3 years when web components are finally supported in all browsers? (HAHA 3 Years... All Browsers... HAHAHA). At this point I want to state that it's not an option to move all to vanilla JS or another framework. The decision is only if we are going to use one or multiple frameworks in our department / company.
Building shared components based on a framework the app uses, forces the app (or the components) to be compatible with these version unless you are not including the components in your bundle and rendering it with these framework. So components based on React 16.5 would probably not work in an application using React 14. On the other side it's way easier to change teams as the setup will be the almost same for all applications or? What happens when the setup changes? Do all have to change the setup as well to be consistent?

Long story, short question: Would you recommend us to all use one framework? Or would you recommend to vary and let every team be autonomous and decide which tech stack they use?


I really would appreciate your opinion and the reasons for your opinion!
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-07-30 14:41:34

---
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.

@kungtotte added some thoughts to the **[Github Must Be a Free Platform](https://dev.to/nekofar/github-must-be-a-free-platform-14pj)** thread.  The entire thread and surrounding context is worth reading more about:
{% devcomment de60 %}

In a thread destined for some hot-takes and disagreements: **[What’s the best JavaScript framework?](https://dev.to/ben/what-s-the-best-javascript-framework-3ple)**, @dmtrkovalenko provided some hilarious misdirection and levity:
{% devcomment dfak %}

A "Change my Mind" thread can oftentimes go down non-constructive paths, so it was great to see @stereobooster's comment and subsequent standalone article in response to **[TypeScript is a waste of time. Change my mind.](https://dev.to/parkroolucas/typescript-is-a-waste-of-time-change-my-mind-pi8)**:
{% devcomment df11 %}

Replying to **[What are your computer’s specs? Which specs are particularly important to you?](https://dev.to/ben/what-are-your-computer-s-specs-which-specs-are-particularly-important-to-you-4a0c)**, @steveblue talked about the choices for their set-up:
{% devcomment dema %}

A majorly awesome run for @desi who shared some incredible wins in the **[What was your win this week?](https://dev.to/jess/what-was-your-win-this-week-1a02)** thread 👏:
{% devcomment ddml %}

See you next week for more great comments ✌