teleren/devto huggingface dataset:
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-08-31 18:04:47

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


## Sorting through the Chaos

@thenjdevopsguy explains why we need chaos engineering — and how can make sense of it 💡 

{% link https://dev.to/thenjdevopsguy/three-tips-to-understand-chaos-engineering-1eoc %}

## All about transfer learning 

Transfer learning can save you a lot of time when developing a machine learning model from scratch. @flippedcoding explains. 

{% link https://dev.to/flippedcoding/using-experiments-for-transfer-learning-a8f %}


## Your "check engine" light is on

As @dinamlev writes, "it's critical to write de-coupled, repeatable tests that provide important, meaningful signals." You'll get a primer on how to do just that in this post. 

{% link https://dev.to/dinamlev/your-check-engine-light-is-on-how-to-write-good-software-tests-e05 %}

## Where nostalgia meets software 

@christinecdev's tutorial aims to help you get started with Local Storage and further your React skills — with some added Pokémon flair 😎 

{% link https://dev.to/christinecdev/let-s-make-a-pokemon-themed-note-keeping-app-in-react-2afg %}

## Great web design from A(ccessibilty) to Z

@imiahazel has provided some design guidelines that will place your website thousands of steps aheads of the pack.

{% link https://dev.to/imiahazel/8-fundamental-principles-of-effective-web-design-196l %}

## Web3 is changing the game

There's a lot of misguided and downright spammy Web3/cryptocurrency content out there. @dabit3 has advice you can trust. 

{% link https://dev.to/dabit3/the-new-creator-economy-daos-community-ownership-and-cryptoeconomics-lnl %}

## Knowing and nailing the expectations of your role

In this article, @eisabai offers answers to many of the early-career software development questions that you wanted to ask your new colleagues but were too afraid to.

{% link https://dev.to/eisabai/your-first-30-days-as-a-software-developer-at-a-tech-company-273e %}



_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!_
Why you should use  Cookiecutter in you next Django Project.
Tags: django, productivity, programming, webdev
Published: 2021-08-31 18:03:16


## What is Cookiecutter?

A command-line utility that creates projects from cookiecutters (project templates), e.g. creating a Python package project from a Python package project template.

## Features

* Cross-platform: Windows, Mac, and Linux are officially supported.

* You don’t have to know/write Python code to use Cookiecutter

* Works with Python 2.7, 3.5, 3.6, 3.7, 3.8 ,PyPy and PyPy3.

* Project templates can be in any programming language or markup format:
Python, JavaScript, Ruby, CoffeeScript, RST, Markdown, CSS, HTML, you name it.

* You can use multiple languages in the same project template.
Simple command line usage:

## Install cookiecutter

```shell
pip install --user cookiecutter
```
**or you can use any package manager**


## Usage

First, clone a Cookiecutter project template:
```shell
$ git clone git@github.com:audreyr/cookiecutter-pypackage.git
```

## Make your changes

Modify the variables defined in cookiecutter.json.

Open up the skeleton project. If you need to change it around a bit, do so.

You probably also want to create a repo, name it differently, and push it as your own new Cookiecutter project template, for handy future use.

##  Generate your project

Then generate your project from the project template:

```shell
$ cookiecutter cookiecutter-pypackage/
```
and thats is it, your are ready to go.


## reference

Documentation: https://cookiecutter.readthedocs.io
GitHub: https://github.com/cookiecutter/cookiecutter
PyPI: https://pypi.python.org/pypi/cookiecutter
React Context Explained in 10 minutes
Tags: react, tutorial
Published: 2021-08-31 18:02:51

In this video we learn about react context and the issue that it solves. We start with a demo application that uses props and refactor to an elegant solution that uses react context. If you enjoy this video please Subscribe, Like and Share.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

{% youtube hUhWtYXgg0I %}
were never done
Tags: career, productivity, javascript
Published: 2021-08-31 17:58:23

I have friends, my mom, significant others ask me all of the time if I'm done..

Lol....we're never done as engineers.

What we have are priorities, we do them and we move forward.
Getting comfortable knowing that we are "never done" is huge. 

Its important to assess what you have to do, prioritize the top few things and get them done.

How you prioritize depends on the situation.

However, when I first started this gave me SO MUCH ANXIETY!

I have so much to do! I don't have enough time!

I wish someone told me that feeling would never go away. And to be honest, the technology industry moves so fast I feel the same way about learning new technologies, buzz words etc (ill cover this in another post)

So learn to be comfortable knowing that its never over.

Its important to have a goal, and reverse engineer your way to where you are.

Want to get a job? Ok what kind of job? Where are my knowledge gaps? How have my interviews been going? What feedback have I been getting?

Now, one foot in front of the other march forward.

***Want more? Come join our Facebook group to help you get your first job as a software engineer, career development, and so much more!***

https://www.facebook.com/groups/310120400851953
Data Types JS {Day -18}
Tags: 100daysofcode, javascript, beginners, webdev
Published: 2021-08-31 17:57:24

#100daysofcode { Day -18 }
Today I learned some important things about JavaScript.

There are two types of data: primitive data and non-primitive data.
Primitive data type:
=> Number, string, boolean, undefined, null, symbol
Non-primitive data types:
=> Objects and arrays

Also learned the difference between == and ===, the difference between block scope and global scope, also learned the difference between null and undefined.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cezht4t3p5x0ixq5ejfr.jpg)
#javascript #programming #codinglife #devcommunity
image download using html
Tags: html, webdev, wordpress, css
Published: 2021-08-31 17:55:15

Hi guys,

Today we will see how to make image download when user clicks on image using html.

For that, we need "download" attribute. We need to keep this attribute in the tag, then when the user clicks on image, automatically image get downloaded.

Method 1:

```html
<a href="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" download>
<img src="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" style="width:200px;height:100px;">
</a>
```
In this method, when the user clicks on the image, image will be downloaded with the filename "coding-vs-programming-2".

Method 2:

```html
<a href="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" download="filename">
<img src="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" style="width:200px;height:100px;">
</a>
```
In this method, when the user clicks on the image, image will be downloaded with the filename "filename".

Note: Same origin links can only be downloadable.

Read: <a href="https://wordpress.org/plugins/increase-upload-limit/" target="_blank">How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?</a>

Social Profile : <a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/">LinkedIn</a>

Have a Nice Day!
Hello All!
Tags: beginners
Published: 2021-08-31 17:45:08

Hi Everyone! My name is Elizabeth and I am a senior at Penn State University. I am currently majoring in Information Science and Technology with a specialization in Integration and Application. In addition to my major, I plan to graduate with a Smeal College of Business Certificate. Though I am new to code and only know how to do the basics (and last time I coded was over a year ago) I am excited to get back into it.

Over the past summer I had the opportunity to intern at Trane Technologies, where I will also be working full time after I finish my senior year! I also enjoy to play games such as Apex and Valiant in my spare time. I am so excited to learn more about Web Components and be able to apply what I learn in my future work!
i can not covert this query
Published: 2021-08-31 17:38:30

SELECT s1.product_id,s1.totalstock,s2.totalstock as assign,s3.totalstock as warrenty,s4.totalstock as damage,s5.totalstock as missing,s6.totalstock as returnProduct  FROM stock_details as s 

            left JOIN (SELECT sum(s.quantity) as totalstock,s.product_id FROM stock_details as s WHERE s.status_type=1 GROUP BY s.product_id) as s1 ON s1.product_id = s.product_id
            left JOIN (SELECT sum(s.quantity) as totalstock,s.product_id FROM stock_details as s WHERE s.status_type=2 GROUP BY s.product_id) as s2 ON s2.product_id = s.product_id
            left JOIN (SELECT sum(s.quantity) as totalstock,s.product_id FROM stock_details as s WHERE s.status_type=3 GROUP BY s.product_id) as s3 ON s3.product_id = s.product_id
            left JOIN (SELECT sum(s.quantity) as totalstock,s.product_id FROM stock_details as s WHERE s.status_type=4 GROUP BY s.product_id) as s4 ON s4.product_id = s.product_id
            left JOIN (SELECT sum(s.quantity) as totalstock,s.product_id FROM stock_details as s WHERE s.status_type=5 GROUP BY s.product_id) as s5 ON s5.product_id = s.product_id
            left JOIN (SELECT sum(s.quantity) as totalstock,s.product_id FROM stock_details as s WHERE s.status_type=6 GROUP BY s.product_id) as s6 ON s6.product_id = s.product_id

            GROUP BY s.product_id
Arrays & Most important methods of them in JavaScript
Tags: javascript, beginners, webdev
Published: 2021-08-31 17:37:43

Explained Arrays in Details

00:00 Introduction to Arrays
01:41 Creating Array
03:15 push method
04:40 pop method
07:33 slice method
13:30 iterate with for loop
14:30 iterate with while loop
14:50 indexOf lastIndexOf Includes
19:13 forEach method
22:26 map method
23:37 filter method

{% youtube YVFaLFIvPSc %}
Smooth Navigation within a webpage using Html CSS Javascript
Tags: html, css, javascript, beginners
Published: 2021-08-31 17:35:26

Explained in detail about navigation within web page.

Crate a beautiful Web page using HTML CSS
Implementing Navigation using HTML element
Implementing Smooth scrolling using JavaScript
Created a web page from scratch.
Please subscribe for more videos

Source code : https://github.com/DasaradhaNimmala/Navigation

https://youtu.be/szHLTpfs9G0

#html #css #javascript #navigaition 
{% youtube szHLTpfs9G0 %}
Fix No Video and Sound Output Through HDMI In Linux
Tags: linux, ubuntu, nvidia, hdmi
Published: 2021-08-31 17:34:34

The other day, I connected my Asus Rog G531-GT running Opensuse Tumbleweed with my TV to watch a movie. To my surprise, there was no output through HDMI in TV. The laptop couldn't detect any connected HDMI output device. After fixing the HDMI output device detection, my HDMI sound device showed as unplugged. So I decided to write a blog about it as I had to search a lot to find the fix for it.

![Unplugged](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18hy14gcrninpejfte7o.png) 
## Why this happens:
### For Video

This usually happens in optimus systems(Has two GPUs: Integrated intel gpu and dedicated Nvidia gpu) 
In such machines, the HDMI port is connected directly to the dedicated GPU. Therefore, when u turn off your D-GPU either from the BIOS or using gfx tools such as bb-switch, pop-graphics-switch, asusctl, optimus-manager etc, the HDMI port gets turned off. Therefore, no output device is detected. 

### For Sound

This happens due to an old set of rules for Dynamic power management of Nvidia audio device. The latest kernel now manages those parts fine and doesn't need the explicit rule anymore.

## Fix

### For Video
To fix no video output you need to turn on your D-GPU either from BIOS(if your motherboard supports it) or using any gfx tool that you use to switch to hybrid or dedicated GPU mode. 

### For Sound
The rule file would exist either here :
```
/usr/lib/udev/rules.d/90-nvidia-udev-pm-G05.rules
```
or 
```
/etc/udev/rules.d/90-nvidia-udev-pm-G05.rules
```
Open this file with your favourite editor and search for these entries: 
```
# Remove NVIDIA USB xHCI Host Controller devices, if present
ACTION=="add", SUBSYSTEM=="pci", ATTR{vendor}=="0x10de", ATTR{class}=="0x0c0330", ATTR{remove}="1"

# Remove NVIDIA USB Type-C UCSI devices, if present
ACTION=="add", SUBSYSTEM=="pci", ATTR{vendor}=="0x10de", ATTR{class}=="0x0c8000", ATTR{remove}="1"

# Remove NVIDIA Audio devices, if present
ACTION=="add", SUBSYSTEM=="pci", ATTR{vendor}=="0x10de", ATTR{class}=="0x040300", ATTR{remove}="1"

```
Comment these lines by adding a "#" infront of these lines like this :
```
# Remove NVIDIA USB xHCI Host Controller devices, if present
#ACTION=="add", SUBSYSTEM=="pci", ATTR{vendor}=="0x10de", ATTR{class}=="0x0c0330", ATTR{remove}="1"

# Remove NVIDIA USB Type-C UCSI devices, if present
#ACTION=="add", SUBSYSTEM=="pci", ATTR{vendor}=="0x10de", ATTR{class}=="0x0c8000", ATTR{remove}="1"

# Remove NVIDIA Audio devices, if present
#ACTION=="add", SUBSYSTEM=="pci", ATTR{vendor}=="0x10de", ATTR{class}=="0x040300", ATTR{remove}="1"
```
Save the file and reboot. After reboot open settings and go into sound and select HDMI from output devices
![HDMI SOUND](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53ikor48k5yn13wu9qkh.png)
And you should have both video and sound output through your HDMI.

Hope it helps someone.

##### Want to buy me a coffee : [Paypal](https://www.paypal.com/paypalme/drunkcj) || [Crypto(preferred)](https://drunckj.github.io/drunkcj-crypto-donation/)
When Should You Give An Employer Your Social Security Number? 
Tags: career, codenewbie, recruiters, interview
Published: 2021-08-31 17:34:21

After helping bootcamp grads and junior software engineers get their first jobs and launch coding careers for almost a decade, you see certain timeless questions again and again. 

This one comes up all the time - up about once or twice a month, and it can be a real show stopper. 

Imagine, someone's been on the job search for months and they're finally faced with the opportunity they've been preparing and sacrificing for. 

They make it through a phone screen and a couple of grueling interviews. It's in reach! They got this. 

They still have an interview or two left to go, and they reach out to the recruiter, who's been super cool and helpful every step of the way so far - just innocently asking a question about next steps. 

The recruiter messages them back, maybe a little too quickly, and they see the words "before we can proceed." 

Those dreaded words are followed by them asking for a bunch of - what would legally be defined as - [Personal Identifiable Information (PII)](https://www.dol.gov/general/ppii). 

## What would you do? 

Many people have told me they've given out their social security number before it felt right. They ask, "Did I have to do that?" 😱

The answer is almost always, **"No."** 

You don't have to give anyone your social security number during a job search. While it may be legal for them to ask, you can politely decline until _accepting an offer_. 

Whether they want you to sign a PDF contract or fill out a secure online form, it doesn't matter. You don't have to give out your social security number "before we proceed." You should only provide it once they're done with the hiring process, you are the chosen one, you've accepted the job offer, and basically all other details and negotiations have been ironed out. 

If they insist on getting your SSN before all of that you should consider it a major red flag, for the recruiter and the company they're representing. 

If they won't back down or continue to bring it up throughout the process, feel free to end all communication with them.

If you do accidentally give out your social security number to someone who might be a scammer, or a company that may be mishandling your PII, you can [file an official report](http://www.irs.gov/identity-theft-central) to  get ahead of any headaches they may try to cause you.
PowerShell Array and ArrayList - storing multiple items as a one variable
Tags: powershell, video, scripting, array
Published: 2021-08-31 17:17:48

 {% youtube rvGd8kxXlVc %}

Link to the script: https://github.com/kprocyszyn/About-PowerShell/tree/main/PowerShell%20Array

Array is a basic data structure that allows to store multiple items in one variable. In this short video, I'll show you how to create a basic array, populate it with items, how to add, access and modify items within array.

In addition, I'll present to you how to use ArrayList - which is much more flexible array, especially for adding more items.
ES6 - A beginners guide - Arrow Functions
Tags: javascript, codenewbie, beginners, webdev
Published: 2021-08-31 17:06:45

Hello! Welcome back to the next part in my series as I work through training resources refreshing (and in some cases learning more) my understanding of ES6. In this post I'll be covering ES6's implementation of Arrow Functions :heart_eyes:

Arrow Functions are probably one of my favourite additions because visually I feel it makes a _**HUGE**_ difference when reading the code on the screen. We can make function declarations shorter and more concise, making it easier when a new developer comes to inspect your code to make amendments or reviews.

### So... What are they?

Let's imagine we wrote a function using the "old" way of working, it might look something like this:
```javascript
function someFunkyFunction(param1, param2) {
  var retValue;
  retValue = param1 + param2;
  return retValue;
}
someFunkyFunction(1,2); // Returns: 3
```
With this way of working there are certain things I feel are inefficient:

- The code is 115 characters, we can make that smaller!
- We must always use a return statement at the end of the function
- We have to write the word function everytime

Let's make it into an arrow function:
```javascript
someFunkyFunction = (param1, param2) => {
  var retValue;
  retValue = param1 + param2;
  return retValue;
}
someFunkyFunction(1,2); // Returns: 3
```
With this way of working there are still some things I feel can be improved (and they can be):

- The code is 112 characters, it is a bit smaller, but we can lose more weight!
- We must always always use a return statement at the end of the function still

But wait!!! There is a way to make this smaller, take a look:
```javascript
someFunkyFunction = (param1, param2) => param1 + param2;
someFunkyFunction(1,2); // Returns: 3
```
With this way of working you can see the following:

- The code is now only 56 characters in length! that's a massive saving!
- There is no return statement

### WAIT!! No return statement??

That's right, when using this final version of an ES6 arrow function we can remove the arrow function. But why? Well, if you are performing a single JS expression as part of your ES6 Arrow Function the it's output and inherently be the return value. In doing this we can remove the surrounding curly braces from the function, aswell as the word return.

## Extra
If you create an arrow function that only takes a single parameter then you can make things even smaller because you can also remove the brackets from the parameters of the Arrow Function. Let's have a look at an example:
```javascript
someFunkyFunction = param1 => param1 * 2;
someFunkyFunction(1) // Returns: 2
```
Now that's tidy!
Django - How to keep secrets safe with python-dotenv
Tags: python, django, webdev, codenewbie
Published: 2021-08-31 16:54:27

Often when working on a django project, we have some secret keys, OAuth keys and other critical information that needs to be kept safe and private. By no means should you expose such kind of keys because it makes your system vulnerable to security attacks.

Today, we are going to see how we can use **python-dotenv** to keep such kind of information hidden. As we can read from the [docs](https://pypi.org/project/python-dotenv/), basically what **python-dotenv** does is read key-value pairs from a .env file and set them as environment variables to be retrieved later.

First and foremost let's install this module.

```python
pip install python-dotenv
```

Then create a *.env* file in the root directory of our project. This is where we will put key value pairs of all the environment variables required by our application.

### Okay, what should we put in the *.env* file?
- The [secret key] (https://docs.djangoproject.com/en/dev/ref/settings/#secret-key[) that comes with every django project - This needs to be kept private because it's the crucial part of security in django. 
- Social auth configs for Github
- Social auth configs for Google or any other OAuth keys.

.env
```
SECRET_KEY = 'YOUR SECRET KEY'

GITHUB_KEY = 'YOUR GITHUB KEY'
GITHUB_SECRET = 'YOUR GITHUB SECRET KEY'

GOOGLE_KEY = 'YOUR GOOGLE KEY'
GOOGLE_SECRET = 'YOUR GOOGLE SECRET KEY'
```

- Pull these configs from .env and load them in the settings.

settings.py
```python
from dotenv import load_dotenv
load_dotenv()  # loads the configs from .env
```

Now instead of exposing our secret keys and OAuth keys in the settings, let's retrieve them through their key names as follows.

settings.py
```python
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = str(os.getenv('SECRET_KEY'))

# social auth configs for github
SOCIAL_AUTH_GITHUB_KEY = str(os.getenv('GITHUB_KEY'))
SOCIAL_AUTH_GITHUB_SECRET = str(os.getenv('GITHUB_SECRET'))

# social auth configs for google
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = str(os.getenv('GOOGLE_KEY'))
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = str(os.getenv('GOOGLE_SECRET'))
```

That's it, with these simple steps we are able to make our app more secure. 

Thanks for your time. You can find the finished app in [github](https://github.com/earthcomfy/Django-registration-and-login-system). See you next time with another part of the series.

Any comments and suggestions are welcome.
Awesome Developers & Designers Portfolio list 😎
Tags: showdev, awesomelist, portfolio, inspiration
Published: 2021-08-31 16:06:54

A portfolio site is an extension of a developer/designers' résumé. It provides a convenient way for potential clients to view your work while also allowing you to expand on your skills and services. This, however, isn’t the ultimate purpose of a portfolio website. Not every job hunter needs a portfolio. But there are certain careers where portfolios prove more helpful than just a resume in showcasing your skills and experience.

This is especially true for careers like art, design, and web development.

Individuals in these jobs often have their own unique style, and a collection of past work will help employers to assess whether that style fits their needs.

Developers and Designers are creative. They build their website with there own flavor and creativity.

I curated some list of Developers' and designers' portfolio/blog site from online and make this [awesome-list](https://github.com/Arif-un/awesome-portfolio-websites).

If you have a creative website just PR (pull request) in this repository.