teleren/devto huggingface dataset:
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-09-28 18:11:42

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


##  Preventing alert fatigue


@dvddpl came through with a very helpful and empathetic guide to dealing with the apprehension and frustration that comes from "alert fatigue".

{% link https://dev.to/dvddpl/when-everything-is-urgent-nothing-is-what-is-alarm-fatigue-and-how-to-deal-with-it-1321 %}

## Group Design Challenge

@zernonia shared a handful of designs so that anyone who wants to practice web design can do so without a cost barrier. Amazing!

{% link https://dev.to/zernonia/i-design-you-build-frontend-challenge-1-158a %}

## Your next (effective) open-source contribution

@pragativerma18 shared what they learned along their journey in open-source — in the hopes that it will allow you to give back to the community.

{% link https://dev.to/pragativerma18/how-to-pick-an-open-source-project-to-contribute-to-4kak %}


## Question styles that will set you up for success 

@erikmelone believes that there are certain ways to phrase typical questions that can help better set you up for success. In this post, we'll take a look at a few of them.   

{% link https://dev.to/erikmelone/how-to-ask-the-right-questions-as-a-junior-developer-5701 %}

## How to implement automatic link shortening in React 

"Whether you are looking to add automatic URL shortening to your existing React app, or you want to get detailed analytics of all the links shared on your mobile/web app, emly.cc’s URL shortener has a detailed API to get you started within few minutes." — thanks @eaetukudo! 

{% link https://dev.to/eaetukudo/build-automatic-url-shortener-with-react-and-emly-2ob5 %}

## What makes React fun

"What makes React fun is that we can take common patterns and turn them into reusable components, making our development life easier and our code shorter." says @trishathecookie. No better example of this than React Context!

{% link https://dev.to/trishathecookie/react-creating-a-reusable-form-using-react-context-5eof %}

## 10 open source programs for students 

In this post, @pb shares some of the open source programs which you can apply to as a student to gain experience, work with some of the most informed people in the industry (from the comfort of your home) and earn a generous stipend! 

{% link https://dev.to/pb/open-source-programs-for-students-to-participate-55gm %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Protect Your Routes in React
Tags: react, javascript, programming, security
Published: 2021-09-28 18:09:26

If you're using **react router** in your App, then you probably wanted to protect some routes from specific users, or to Redirect some users to their own page or component.

## so what to do ?

In this blog we'll see How to handle that with some simple checks

![checks](https://i.gifer.com/7efs.gif)

So at the beginning this is how our App looks like

![protectedRoute2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86dmp37s365dv1bfadiz.png)

At this point every user can access those two components (Admin, Home)

But that's not what i want, I want just the **admin** to have access to the "`/admin`" route.

And those who don't have access to that route, I need to redirect them to the **Home** Page ("`/`" route)

So the 1st Step is to create the **ProtectedRoute** Component.

You can create it in the same file, but for a cleaner code we'll create it on a new file

### 1- Create a file and name it to what you want. I'll name it `protectedRoute.js`.

<br/>

### 2- Paste this code in that file

 ![protectedRoute1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82t2mq0oa0pp48ftivtg.png)

 So basically we check if there is a **token** stored in our **LocalStorage** or not.

 If The check is **Truthy** then he Have access to that route.
 If Not, He will be Redirected to the Home Page (thanks to the `<Redirect />` Component).

 > You need to change that check to suit your case.

 Don't forget to **export** your Component.

### 3- Finally we'll use that ProtectedRoute in our **App**

Import The *ProtectedRoute* Component from where you created it
you can name it what you want if you export it with the **default**

![protectedRoute3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arjssd40yki0qz07i80v.png)

So here we need to change The <br/>
`<Route exact path="/admin" component={Admin}  />` 

with

`<ProtectedRoute exact path="/admin" component={Admin}  />`

### And that's it 🎉, Go Try it out.
Project 1 Button Update
Published: 2021-09-28 18:05:09

For our Penguin button, we were able to implement the hover/focus and active states of the button, as well as the link tag. The buttons are also navigable via keyboard. We implemented the dark variation of the button. 

# Roadblocks we ran into:
We had an issue where the size of the area to activate the hover/focus state of the button was far larger than the penguin image we were using. We were able to fix this issue by changing the size pixel value under our host section of our get styles(). 

# What we have learned:
How to implement dark variation of the button
Making the size of the hover/focus area the same as the size of the button
Implementing a hover/focus state

# Next steps:
We working on creating the disabled state of the button as well as the support for an icon. 

[Link to my fork in the repo] (https://github.com/pvd5206/PenStat-CTA/tree/master/penguin-button)
Adding Sentry to Spring Boot Securely
Tags: tutorial, observability, springboot, spring
Published: 2021-09-28 18:02:12

Observability.

When I started working with the microservices at my job about 4 months ago, there were numerous ways to know a bug made it to production.

Slack alerts. Cloudwatch logs. Production support.

There was no aggregation of errors and alerting.

I had never used Sentry, but heard a lot about it over the last couple of years. It seemed like a reasonable solution to this problem.

Other folks at my job agreed we should try it. Here's what it took to integrate.

## Requirements

To understand fully what's going on in each of the services, it made sense to capture EVERYTHING, at least at first. This meant uncaught and caught exceptions, including the ones already caught by any @ExceptionHandlers.

We also wanted to keep any secrets out of our code and in AWS Secrets Manager.

## Follow The Instructions

I found vast documentation on [Sentry's Spring Boot docs](https://docs.sentry.io/platforms/java/guides/spring-boot/) pages. However, there wasn't a solution that let us store the DSN securely, outside the source.

## My Solution

To store the DSN elsewhere and pull it in at runtime, I used the AWS Secrets Manager SDK. [Here's a decent tutorial from AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/manage-credentials-using-aws-secrets-manager.html) on how to get that setup. Now let's focus on the Sentry part.

### Code

Combining the documentation from Sentry and the slightly different requirements we had, I created a Spring configuration that provides a Sentry OptionsConfiguration bean:

```
@Bean
@Primary
Sentry.OptionsConfiguration<SentryOptions> sentryOptionsConfiguration() {
    return options -> {
        SentryProperties properties = (SentryProperties) options;
        properties.setDsn(secretService.getSentrySecret().getDsn());
        properties.setEnvironment(activeProfile);
        properties.setDebug(true);
        properties.setExceptionResolverOrder(Ordered.HIGHEST_PRECEDENCE);
    };
}
```

Because Sentry provides an OptionsConfiguration themselves, I used `@Primary` to ensure mine took precedence.

I used the Spring profile name to set the environment; for example, `QA`.

To make sure we see all handled errors, I set the exception resolver order to `Ordered.HIGHEST_PRECEDENCE`.

### Properties

I thought the code changes would be enough. I was wrong.

Turns out Sentry **requires** the property `sentry.dsn` to be set to something or the Sentry bootstrap fails when the Spring application context is built.

The solution:

`sentry.dsn=dummy` in my `application.properties` file

## Summary

Sentry is an extremely useful tool that has a friendly and clear interface. We use it to see production issues and have more context of issues reported by our QA team.

With these small tweaks, we are able to get the data we need to resolve errors fast.
Button Updates
Tags: button
Published: 2021-09-28 17:44:16

###Current State of Button
Currently we have two buttons, one which is normal coloring and has hovering & clicking abilities. The second is a duplication of the first but has the color variation requirement by using an inverted coloring. 

###Challenges
Some challenges which we are having involves having the button disabled and also adding an icon/image over our current button. In addition, we are working to make sure there are no other issues involving GitHub pushing, pulling, and committing.

###What We Have Learned
* invert the color of a button
* using reflect
* how to duplicate a button in index.html
* how to make an image a button by pulling from files
* how to use 'this.addEventListener'

###Github and Button Preview
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4ro2l02jl65ljf3dmk5.png)

**Github**
https://github.com/elizabeth-delor/PenStat-CTA/tree/master/penguin-button
React Components In Theory
Tags: react, beginners, codenewbie
Published: 2021-09-28 17:21:20

## Development

>React development was led by **Jordan Walke** who is a software engineer at Facebook. React was first deployed in 2011. 
Now it has become super famous and a lot of contributions have been made globally. 

## Introduction

React is a JavaScript library used for building fast and interactive user interfaces.  

The heart and soul of every React-based Application are **Components.** 

### Components

A Component in plain words, is just like a building block. We take a bunch of isolated code blocks and fit them together to form a large scale application.

We can also visualize a React App as a tree of Components.
`Taking Twitter for Example` We can split the home page into independent components. The App becomes the **Root component** or the **parent** component which contains all the other components as its **child components**. 
![React Twitter tree component example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnmho3v4ims7jjaeeiqu.png)

Here in this example, we see how a large app like Twitter can be made manageable with the help of components. 
Components allow us to make use of reusability in our apps thus increasing code readability and code management. 
`For instance:` The Tweet button can be used across the Twitter application for different purposes with a different look and feel!

`Let's take another example` We can split the home page of a website into independent components like:
* SearchBar
* SideBar
* NavBar
* Card  
![Website component example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8s41627kmbds87dsaw5.png)

### Conclusion

The component-based design in React increases the efficiency to write code and makes it easier to follow and learn. The components also provide their own logic and a layer of separation in general so that one can add and update logic without causing a lot of issues.
Create Zip and Download Code Example in Laravel
Tags: laravel
Published: 2021-09-28 17:07:26

In this tutorial, i am writing example of laravel 7/6 create zip archive file and download in response. i will give you example step by step how to create zip file from folder and download in laravel 7/6. we will create zip file using ziparchive class in php laravel 7/6 application.

I also post few months ago how to create zip file using composer package in laravel 5. if you want to create zip file using another composer package then you can follow this tutorial: Laravel 5 create and download zip file example using zipper.

But i will highly recommended to create zip archive file without using anymore composer package, because you can easily make zip file using php ziparchive class. ziparchive class provide method to add files so you can easily add files with relative path, so you can easily create folder inside your zip file.

In this post, i will show you how to create very simple way to zip file in laravel 6 application. So let's follow few things and make it simple example.
https://www.codecheef.org/article/recursively-download-multiple-files-as-a-zip-file-in-laravel
PyLadies Dublin September Meetup: Lifelogging || Sentiment Analysis
Tags: pyladies, video, datascience
Published: 2021-09-28 17:06:27

![thank you](https://media.giphy.com/media/3ohs4kI2X9r7O8ZtoA/giphy.gif?cid=ecf05e47maksmcvs25nswa89qciojbsz2z1f137skgbwm9k0&rid=giphy.gif&ct=g)

❤️ Thank you for your interest and attending our live-stream last week, if you missed it or want to re-watch it above (and you can 👍 and subscribe to our Youtube channel: https://www.youtube.com/channel/UCMunGHeQPceOWhNSqlmYWPg

👏 A huge thanks to our speakers Liting Zhou and Chenyang Lyu. If you have any questions for them and any of our past speakers, send them on and I will forward it on to them.

🌈 Of course I can't do this without ever awesome co-organisers [Lei](https://twitter.com/Lei_Shao1) and [Mick](https://twitter.com/micktwomey)'s help each month.

🦄 And to our community partners: [Coding Grace](https://codinggrace.com) (Zoom), [ImagiLabs](https://imagilabs.com), [PSF](https://www.python.org/psf) (Meetup) and [PyLadies](https://pyladies.com)

📌 Announcements, CFPs, other events, etc. can be found via our [notion page](https://twomeylee.notion.site/PyLadies-Dublin-September-2021-e1158b3040e445b4ad0f2e6d866d16ef).

![catbug singing](https://media.giphy.com/media/RRBg6Y26JpU9G/giphy.gif?cid=ecf05e47maqhok3ehbulbhhhynlvkga6m2d93apvw75v46cp&rid=giphy.gif&ct=g)
## 🗓 The next PyLadies Dublin is a special international collaboration with PyLadies Paris.
It will be 🔴 live-streamed and you can RSVP (so we know how many is interested*) on meetup and don't forget to hit that 🔔 when the live-stream goes live.
###### *(*this will help us plan future events and see what interests people have in our various events, all the Yes and No RSVPs helps a lot, thank you.)*

* Tue Sep 19th, 18:00 - 19:00 (Irish Time)
* https://www.meetup.com/PyLadiesDublin/events/280900898
 
![call for speakers](https://media.giphy.com/media/3vqFacjAkdZ71tTlUn/giphy.gif?cid=ecf05e47iigrie8ros5gwh7mc5533buqnqrf712bqw1m36eh&rid=giphy.gif&ct=g)
## CFPs
### 📢 Call for speakers for Nov (our last PyLadies Dublin for 2021)
* Tue Nov 16, 18:30 - 19:30 (Irish Time)
* Interested? Send in your talk details to  https://pyladiesdublin.typeform.com/to/VvW3iME6

### 📢 PyjamaConf CFP

* Deadline: 4th October, anywhere on earth (UTC+12)
* Details: https://pyjamas.live/cfp
 
If you have ideas for talks, workshops, something we haven't done before, or general questions of any kind, drop us an email at dublin@pyladies.com.

See you next month.

![BMO from Adventure Time dancing](https://media.giphy.com/media/10bxTLrpJNS0PC/giphy.gif?cid=ecf05e47yl4sy7ywwr8nvxtxfjgii6c3p1lqkubef4pvxzby&rid=giphy.gif&ct=g)
What is expected from a Junior developer?
Tags: 100daysofcode, career, beginners, productivity
Published: 2021-09-28 16:40:27



Are you interviewing for web developer jobs and asking yourself, "What is expected from a junior developer?"


Here's what happened in my first month as a Bootcamp graduate.

---

No one expected me to code right away. Contrary to what you might think the company is not looking for you to contribute on your first day. Most companies will have an onboarding process so be sure to ask about it in your interview.

---

My first tickets was not me building a highly visible feature. When I first started I mostly worked on documentation, setting up new projects, and bug tickets. The importance here is to use this time to be a sponge. There is no pressure on you and your team is there to help.

---

I thought I was moving slowly when comparing myself to senior devs. It's easy to be discouraged when you are working with people who have been doing this for years. You want to show them you belong, I get it, trust me! Keep in mind you are new and in time you will get there.

---

Here are some developer workflow hacks I used to increase my speed and productivity 

- VSCode Extensions [@code](https://twitter.com/code)
- Customized my terminal with Zsh and aliases [@ohmyzsh](https://twitter.com/ohmyzsh)
- Bash scripts

---

- https://dev.to/saviomartin/34-ultimate-vs-code-extensions-to-increase-productivity-4hee
- https://freecodecamp.org/news/how-to-configure-your-macos-terminal-with-zsh-like-a-pro-c0ab3f3c1156/ 
- Check out our tweet about Bash scripting 👉   https://twitter.com/nspiredTech/status/1427652779645022213

---

In short, regardless of the role, no one is expecting you to turn water into wine on your first day. So don't forget while you are interviewing ask clarifying questions about onboarding, mentorship, and what the expectation will be for you as a junior engineer. You got this!
OutSystems: the journey to a $9.5B valuation
Tags: techtalks, podcast, leadership
Published: 2021-09-28 16:24:11

Paulo Rosado founded OutSystems in 2001 with a vision to give every company the power to build software fast, right, and for the future. Today, 20 years later, Paulo remains CEO and OutSystems is valued at more than $9.5 billion.

Paulo’s incredible journey is the topic of this week’s episode of the Dev Interrupted podcast. Listen to Paulo as he tells the origin story of OutSystems, how he avoided bankruptcy on three separate occasions, his advice for becoming a successful leader, and why technical debt is a growing threat that will cost companies $5 trillion over the next 10 years.

OutSystems’ Technical Debt Report: [https://www.outsystems.com/stop-tech-debt/](https://www.outsystems.com/stop-tech-debt/)

#**Listen to the full episode**
{% spotify spotify:episode:1Upd99Drq75d6WQK62e73X %}

## Episode Highlights Include:

## 

* Founding story of OutSystems

* How to be a successful leader by creating context

* Key drivers of technical debt

* Budget costs associated with technical debt

* The importance of building cloud ready products

**This week is your last chance to register for INTERACT**, Dev Interrupted's community-driven, digital conference on **September 30th** - by engineering leaders, for engineering leaders. 1 day, 10 speakers, 100s of engineers and engineering leaders, **all free**.

![](https://cdn-images-1.medium.com/max/2400/0*nHzak-kDc0MzrG55.gif)

# [Save your seat](https://devinterrupted.com/event/interact/)
______________________________________________________________

## Join the Dev Interrupted Community

## 

With over 1700 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.com/invite/devinterrupted)

![](https://cdn-images-1.medium.com/max/2048/0*PPi3XnTIZrKrxgPL.png)

*Originally published at [https://devinterrupted.com](https://devinterrupted.com/podcast/outsystems-the-journey-to-a-9-5b-valuation/).*
Wordlists
Tags: cybersecurity
Published: 2021-09-28 16:07:51

# Passwords
```bash
# starter, small
/usr/share/wordlists/fasttrack.txt
/usr/share/seclists/Passwords/Common-Credentials/top-passwords-shortlist.txt

# generic, medium
/usr/share/seclists/Passwords/darkweb2017-top1000.txt

# big
/usr/share/wordlists/rockyou.txt

# linux, ssh (can also be used on windows boxes)
/usr/share/seclists/Passwords/Common-Credentials/top-20-common-SSH-passwords.txt

# windows
/usr/share/seclists/Passwords/Common-Credentials/common-passwords-win.txt

# big, windows
/usr/share/seclists/Passwords/Common-Credentials/common-passwords-win.txt
```

# Usernames
```bash
# starter, small
/usr/share/seclists/Usernames/top-usernames-shortlist.txt

# linux, unix
/usr/share/wordlists/metasploit/unix_users.txt
```

# Passwords + Usernames
```bash
# ftp
/usr/share/legion/wordlists/ftp-betterdefaultpasslist.txt
```

# Directory Fuzzing and Bruteforcing
```bash
# starter, small
/usr/share/wordlists/dirb/common.txt

# medium
/usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt

# big
/usr/share/wordlists/dirbuster/directory-list-1.0.txt
/usr/share/wordlists/dirb/big.txt

# version control (git)
/usr/share/seclists/Fuzzing/fuzz-Bo0oM.txt
/usr/share/seclists/Discovery/Web-Content/raft-medium-files.txt

# web extensions (.php, .html, etc ..)
/usr/share/seclists/Discovery/Web-Content/web-extensions.txt

# lfi, windows
https://github.com/carlospolop/Auto_Wordlists/blob/main/wordlists/file_inclusion_windows.txt

# lfi, linux
/home/kali/data/tools/wordlists/file_inclusion_linux.txt
https://raw.githubusercontent.com/tennc/fuzzdb/master/dict/BURP-PayLoad/LFI/LFI-InterestingFiles.txt

# iis, windows
/usr/share/seclists/Discovery/Web-Content/SVNDigger/cat/Language/aspx.txt
/usr/share/seclists/Discovery/Web-Content/SVNDigger/cat/Language/asp.txt
/usr/share/seclists/Discovery/Web-Content/CommonBackdoors-ASP.fuzz.txt

# backups
/usr/share/seclists/Discovery/Web-Content/Common-DB-Backups.txt

# crawlers
/usr/share/seclists/Discovery/Web-Content/RobotsDisallowed-Top500.txt
/usr/share/seclists/Discovery/Web-Content/RobotsDisallowed-Top100.txt
/usr/share/seclists/Discovery/Web-Content/RobotsDisallowed-Top1000.txt
/usr/share/seclists/Discovery/Web-Content/RobotsDisallowed-Top10.txt
```
Button Project Update
Published: 2021-09-28 16:06:02

Our button project is going pretty well. Compared to the first version of the project, we added progressive enhancement and keyboard navigability(escape key)(with the generous help from the instructor). We also improved the design of the button referring to CSS designs in Angular templates. We plan to add animation and sound effect to the button as improvements.

My main difficulty has been about CSS elements implementation.

As I continue to work on this project, I am learning more of how HTML, CSS, and JavaScript are working together to make the button work.

Project link:
https://github.com/IST402/btnproject1
Good for newbie coders to start with open-souce
Published: 2021-09-28 16:04:13

Excited for Hactoberfest. I am a newbie excited to get started with open-source contribution. Do my first PR(Pull request)...Don't get nervous from these words:
1. PR(Pull Request)
2. Merge
3. clone
4. Fork
5. Git and Github

Watch introductory videos on youtube. You will get a hangout of these things eventually.

Note:
I got quite anxious about these things therefore I am writing about this.
Don'y worry!! You will get things..Just believe and go with the Flow.

Thanks and regards 
Pabitra Jana

#hacktoberfest #github
My first post
Tags: security
Published: 2021-09-28 15:59:50

This is a sample post.

```python
# scans for port 22
for i in {1..25}; do ./nc -v -n -z -w 1 172.18.0.$i 22; done

# threader3000
# - for fast port scan
# - prompts for nmap scan also at the end, cool!
# https://github.com/dievus/threader3000
threader3000

# massscan
https://github.com/robertdavidgraham/masscan
```