teleren/devto huggingface dataset:
How To use Material-UI Media Queries with Reactjs
Tags: materialui
Published: 2021-07-20 15:46:53


Material ui is a popular library made by Google in 2014 to unify React and Material Design. This library is widely used by the Web Developers and has a lot of free components. In this blog, I will tell you how to use media queries with material-ui and React.

Let's get started now by creating a folder on your desktop.
Then, open your terminal and navigate to that folder you have just created and type the following command in your terminal:

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

It will take some time for creating a new react project.
After this, open the folder in your favorite code editor.
The project structure will be like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ketb7nkiy099up4wniq.png)

then type the command given below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygyydkobm0raa1tbt05z.png)

It will start the react project in your browser on port 3000(default). 
Now install material-ui by typing in terminal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmhzekfbsjv9ashd6hzz.png)

Now comes the coding part, open App.js in src folder in your code editor
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qxo1171ecw6zanuyn28.png)

Remove the header and import React from 'react'. After this
import Typography and makeStyles from material-ui/core
and declare a variable classes to make use of the styles in your JSX
![This is will loke like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owalg2ocghu22ng7xncq.png)

Now start giving styles first for desktop. Here the theme variable will refer to your styles for your components. You can make use of this variable to change the styling of components at different screen size as
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea26cycuobgxsmtrn2eb.png)

Here,"down" means when your screen size reduces it will apply the style written in these brackets(those are changing) and will not affect which are not changing with screen size.
In this example the fontSize of the "Hello World" changes from "5rem" to "1rem" when switched to extra small screen size and all other style remains same.
You can also use "up" to change styles whenever the screen size increases.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns1123njbf60vcpffnky.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miwzi6c6wsha6t3w4yjp.png)

You can also use useMediaQuery in material-ui assigned to a variable by specifying the prop to change whenever the screen size change
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyk1m8wllolsa2wdc9vk.png)

It will return true or false  whenever the screen size reduces or increases depending on viewport.It can be used to change the styles whenever the screen size change.
In the above code, it will return false when the screen size decreases below 600px.

So, this way you can change styling based on viewport size of the device.

Thanks for reading.
Justin Jackson: how coding and skateboarding are similar
Tags: webdev, beginners, career
Published: 2021-07-21 07:50:17

---
title: Justin Jackson: how coding and skateboarding are similar
published: true
date: 2021-07-20 15:39:57 UTC
tags: Webdev, beginner, career
canonical_url: https://www.nocsdegree.com/justin-jackson-interview-coding-skateboarding/
---

 ![Justin Jackson: how coding and skateboarding are similar](https://www.nocsdegree.com/content/images/2021/07/justin-jackson-2.png)

I had the pleasure of interviewing Justin Jackson, the co-founder of Transistor FM, the podcast hosting service making millions in revenue. We covered a range of topics including how Justin learned to code in public, the advantages of learning to code, how to choose a market with momentum and how skateboarding and coding have more in common than you might think.

You can listen to this interview on the podcast below or search for No CS Degree in the podcast player of your choice. You can also watch it on YouTube below.

If you are interested in starting a podcast of your own, check out [Transistor FM](https://transistor.fm/?via=pete) (affiliate) for hosting.

<!--kg-card-begin: html--><iframe width="100%" height="180" frameborder="no" scrolling="no" seamless src="https://share.transistor.fm/e/01b2184a"></iframe><!--kg-card-end: html-->

<iframe width="200" height="113" src="https://www.youtube.com/embed/T2xThvnIS2I?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
CSS Alphabetize plugin for VSCode
Tags: vscode, css, plugin, organization
Published: 2021-07-20 15:29:41

Ever get tired of seeing CSS like this?

```css
tagName {
    width: 500px;
    color: #f0a10c;
    margin-left: 1rem;
    text-align: left;
    display: flex;
    transform: translate(-50%);
    background-color: green;
}
```

It's impossible to tell what is where. It should look like this:

```css
tagName {
    background-color: green;
    color: #f0a10c;
    display: flex;
    margin-left: 1rem;
    text-align: left;
    transform: translate(-50%);
    width: 500px;
}
```

😍 😎 😇 Now you can easily tell which properties exist in the block and where you should be making your changes.

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cqrmauo7dzwwlk1z80s.gif)

This past Saturday, I whipped together a quick plugin for VSCode that will organize your CSS/SASS properties. You can install it here: https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize

The dropdown command `shift+cmd+p` is named: "CSS/SASS: Alphabetize Properties"

The default keyboard shortcut is: `shift+alt+a`
Day 147
Tags: 100daysofcode, programming
Published: 2021-07-20 15:29:32

Day 147/200 of #200DaysOfCode #100DaysOfCode 

-  I tried to solve three problems but couldn't.
[
- Super power frequency function (5 kyu)
- multiFilter (6 kyu)
 - Name That Integer (6 kyu)
]
Using VS Code to git rebase
Tags: vscode, git
Published: 2021-07-20 15:23:40

Git rebase is a powerful, albeit confusing tool. I primarily use rebase to squash my commits before I PR my branch into `main`. This tutorial will show you how to use VS Code to visually do this process.

## Prerequisites

You will need to install this VS Code extension: [https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

You will also need to enable "force push":

In settings, search for "git allow force push" and check the box

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

**Optional but recommended**: set VS Code as your git editor:

`git config --global core.editor "code --wait"`

## Let's Begin!

1. Ensure your local branch you are rebasing onto (in our case, `main`) is up to date.
2. Switch to your feature branch (the branch you have been working on)
3. Type in `git rebase -i main`, where `main` is the branch you are rebasing onto
4. You will then see the codelens rebase screen, where you can choose what to do with each commit. We are going to `squash` every commit, and `reword` the last one into a good commit message.
5. Once you have your commits ready, we can click the `Start Rebase` button.
6. You will then be presented with a screen in VS Code to reword your commit message. Write your new message, and save and close the file to continue.
7. After this, our rebase is complete. However, now we must force push to remote. In your version control panel, click on the kebab menu (3 dots) and under the `Pull, Push` menu, choose `Push (Force)`. Use this with caution, especially when working with other developers, as force push is destructive.

And we are done! A very easy way to rebase and squash all your commits using VS Code.
Setup ZSH for suggestion, auto completion and text highlighting on linux terminal
Tags: linux, zsh, cli, terminal
Published: 2021-07-20 15:12:58

Install ZSH, Syntax Highlighting and Auto Suggestions
```
sudo add-apt-repository universe

sudo apt update

sudo apt install zsh zsh-syntax-highlighting zsh-autosuggestions

zsh
```

Add syntax-highlighting and autosuggestions to your zshrc file
```
cp ~/.zshrc ~/.zshrcbackup

echo "source $(dpkg -L zsh-autosuggestions | grep 'zsh$')" | tee -a ~/.zshrc

echo "source /usr/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" | tee -a ~/.zshrc
```

Source your ~/.zshrc file to apply the changes (if you are in bash or another shell, run the `zsh` command first)
```
zsh

source ~/.zshrc
```

Make zsh the default shell
```
chsh -s $(which zsh)
```

##**Now here is a pitfall**

Your command history will get cleaned after closing the terminal. So you need to store your commands somewhere to retrieve later.

Open .zshrc file in text editor (for simplicity i've used `xed` you can use `nano`/ `vim`/ `code` or any other text editor)
```
xed ~/.zshrc
```

7. Add this following lines to `~/.zshrc` file
```
HISTFILE="$HOME/.zsh_history"
HISTSIZE=500000
SAVEHIST=500000
setopt appendhistory
setopt INC_APPEND_HISTORY  
setopt SHARE_HISTORY
```

Save the file

source your `~/.zshrc` file to apply the changes (Repeat Step 4)
```
source ~/.zshrc
```

Now all of your command history will save in `~/.zsh_history` file.
Adding PHP 8 to Laragon
Tags: php, windows, webdev, laravel
Published: 2021-07-20 15:06:26

Currently I'm using Laragon Lite version, it has PHP 7.4.16 and apache 2.4.35 running well in my machine. Meanwhile PHP now has version 8 and it seems like it still supported in Windows machine. Here is my step to change version to PHP 8.

## Downloading the PHP 8 Binaries

You can go to [https://windows.php.net/download](https://windows.php.net/download) and you can see the option to download the latest available PHP 8 version, I got PHP 8.0 (8.0.8) at the moment. 

After it downloaded, you can create a folder inside `C:\laragon\bin\php` (or your own custom directory) named after the downloaded zip file. The folder name for me is `php-8.0.8-Win32-vs16-x64` and then extract anything inside `php-8.0.8-Win32-vs16-x64.zip` to this folder.


![multi php folder in laragon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjir4o19vfuflggelb81.png)

## Switching the PHP version to 8

Try to right-click on Laragon desktop app, choose PHP, and click the `php-8.0.8-Win32-vs16-x64` to change to this version.

Now run the apache too. When the apache starting to run, Laragon will pop this message:

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

Something is wrong and we need figure the error out.

> This issue seems have been fixed in the full laragon version 5 installation as I tried it.

## Fixing the Apache Error when using PHP 8

When I'm looking on the laragon forum [https://forum.laragon.org/topic/2232/php-8-and-apache-2-compatibility](https://forum.laragon.org/topic/2232/php-8-and-apache-2-compatibility), someone found how to fix the error with video explanation [https://www.youtube.com/watch?v=P0ahcFoMwnM](https://www.youtube.com/watch?v=P0ahcFoMwnM).

So to fix it, we need to open the `C:\laragon\etc\apache2\mod_php.conf` file that contains this code:

```conf
# This file is auto-generated, so please keep it intact.
LoadModule php8_module "C:/laragon/bin/php/php-8.0.8-Win32-vs16-x64/php8apache2_4.dll"
PHPIniDir "C:/laragon/bin/php/php-8.0.8-Win32-vs16-x64"
<IfModule mime_module>
    AddType application/x-httpd-php .php
</IfModule>
```

Look at the `php8_module`. You only need to change it into `php_module` so the code will be like this:

```conf
# This file is auto-generated, so please keep it intact.
LoadModule php_module "C:/laragon/bin/php/php-8.0.8-Win32-vs16-x64/php8apache2_4.dll"
PHPIniDir "C:/laragon/bin/php/php-8.0.8-Win32-vs16-x64"
<IfModule mime_module>
    AddType application/x-httpd-php .php
</IfModule>
```

Save the file, now turn-off apache and restart it. When you access the `localhost` in the browser, you should see this now:

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

This solution will temporary fix the issue. When you switch back to version `7.4` or else, the above configuration will reset back and you have to change it when using PHP 8. We're looking forward for the permanent solution. 

__________

Tell me if this article is helpful and helped you fix your problem in the comment below.
Logging Exceptions via Slack in Laravel
Tags: laravel, php
Published: 2021-07-20 15:02:23

Logging can be a powerful tool that people tend to gloss over. Most developers still view logging as an archaic way of dealing with bugs and user issues. Laravel has a very easy and eloquent way of dealing with the logging problem.

## The Problem

Logging is usually done by creating a log file on your server, and telling your backend to send all errors to that file. While this is a good temporary solution, this system tends to fill up fast, and is a pain to search and find certain things.

## The Solution (one of many)

Using Laravel’s built-in logging system, you can log to many different “channels”, including our old tried and true, file logging on the server. But that isn’t why you are reading this post, is it?

## Slack it to me

If you have ever used Slack, you’ve grown to love the instant messaging capabilities, and the searching function. Search is great on Slack. And one of our problems with logging was search, wasn’t it? Wouldn’t it be great if we could log all our errors to Slack? Good news!

## How to log exceptions to Slack

Logging is relatively easy in Laravel ([see this page for how-to setup Slack logging](https://laravel.com/docs/6.x/logging)). What we want is to nicely log all our exceptions.

*This post is written assuming you have a Laravel project already set up.*

Open your `app/Exceptions/Handler.php` handler file. This is where Laravel gives you the option to send exceptions to Sentry, Bugsnag, or any other bug reporters you want to set up. This is also where we will be logging to our Slack channel.

```php
public function report(Exception $exception)
{
    parent::report($exception);
}
```

We are going to change this function to do a few things.

1. Log to Slack (that is why you are here!)
1. Format the exception nicely.
1. We will do an optional filter to filter out any vendor code.
1. Remove the `parent::report($exception)` as we are going to be doing this ourselves.

Our function will now look like this:

```php
public function report(Exception $exception)
{
    // You can specify which exceptions not to report here
    if ($this->shouldntReport($exception)) {
        return;
    }
 
    // We are getting the directory so we can filter out any vendor code,
    // along with the directory, so it looks better for the developer.
    $dir = substr(__DIR__,0,-14);
    $backtrace =  $exception->getTraceAsString();
    $backtrace = str_replace([$dir],"", $backtrace);
    $backtrace = preg_replace('^(.*vendor.*)\n^','',$backtrace);
 
    // And finally, we log the exception! 
    Log::channel('slack')->error('@here'.PHP_EOL.' . PHP_EOL . '**Error:** '.$exception->getMessage() . PHP_EOL. '**Line:** ' . $exception->getLine() . PHP_EOL. '**File:** '. $exception->getFile() . PHP_EOL . '**Trace:**'.PHP_EOL. $backtrace);
}
```

And that’s it! It is very easy to nicely log your exceptions using Laravel’s built-in logging system.

image credits: https://unsplash.com/photos/gNoqNvYAsBg
Mastering JS' 7 Best JavaScript Fundamentals Tutorials
Tags: javascript
Published: 2021-07-20 14:44:09

At [Mastering JS](https://masteringjs.io/), we think learning JavaScript fundamentals is much higher ROI than learning any particular framework. Two reasons why:

1) Fundamentals rarely change. The JavaScript language spec doesn't allow backwards breaking changes. The [void operator](https://masteringjs.io/tutorials/fundamentals/void) will work the same way in 5 years as it does today.
2) Fundamentals are the same regardless of what framework you use. If you switch jobs tomorrow, you'll still be able to apply your fundamental language skills even if your new job does things differently.

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

### 7. [The Promise then() Function in JavaScript](https://masteringjs.io/tutorials/fundamentals/then)

[Promises](https://masteringjs.io/tutorials/fundamentals/promise) and promise chaining, explained.

### 6. [Understanding Array.splice() in JavaScript](https://masteringjs.io/tutorials/fundamentals/array-splice)

The `splice()` function lets you add and remove elements from the middle of an array. Here's how it works.

### 5. [Compare Dates in JavaScript](https://masteringjs.io/tutorials/fundamentals/compare-dates)

Checking whether two dates are equal in JavaScript is tricky, this tutorial explains how. On the bright side, you can use `<` and `>` to compare whether one date is before or after another.

### 4. [What is a Plain Old JavaScript Object (POJO)?](https://masteringjs.io/tutorials/fundamentals/pojo)

Whether an object is a POJO or not is a nuanced and commonly debated topic. This tutorial goes into detail about why checking whether a value is a POJO is tricky.

### 3. [Iterating Through an Object with `forEach()`](https://masteringjs.io/tutorials/fundamentals/foreach-object)

Some [ESLint](https://masteringjs.io/eslint) presets require you to use `forEach()` rather than conventional loops. That means you need to iterate through objects using `forEach()`. This tutorial shows you how.

### 2. [How to Use forEach() in JavaScript
](https://masteringjs.io/tutorials/fundamentals/foreach)

While we do not recommend using `forEach()` to [iterate arrays in JavaScript](https://masteringjs.io/tutorials/fundamentals/array-iterate), `forEach()` is an established part of JavaScript and worth mastering. This tutorial tells you what you need to know about `forEach()`.

### 1. [3 Ways to Concatenate Strings in JavaScript](https://masteringjs.io/tutorials/fundamentals/string-concat)

Concatenating two strings is one of the most fundamental tasks in JavaScript. This tutorial explains the tradeoffs of 3 different ways to concatenate strings.
Instagram Login Automation using Selenium
Tags: python, selenium, productivity, automation
Published: 2021-07-20 14:41:10

Hello Everyone today i will show you a simple instagram Login automation in Python using selenium.

Selenium is an open-source tool that automates web browsers. It provides a single interface that lets you write test scripts in programming languages like Ruby, Java, NodeJS, PHP, Perl, Python, and C#, among others.

A browser-driver then executes these scripts on a browser-instance on your device.



Firstly execute this command in your terminal - 
```terminal
pip install selenium
```
Lets get dive into the code -
```python
from selenium import webdriver
from time import sleep

browser = webdriver.Chrome("D:\old pc\Softwares\chromedriver_win32\chromedriver")

browser.implicitly_wait(1)

browser.get('https://www.instagram.com/')

sleep(1)

username_input = browser.find_element_by_css_selector("input[name='username']")
password_input = browser.find_element_by_css_selector("input[name='password']")

username_input.send_keys("your_username")
password_input.send_keys("your_password")

login_button = browser.find_element_by_xpath("//button[@type='submit']")
login_button.click()

sleep(9999999)

browser.close()
```

1.First we have imported selenium and time module.
2.Then after that we access the chrome browser using Chrome drivers.
3.Then we provided the instagram page login page link in the get method.
4.sleep(1) means one second of pause then continue.
5.Then we find the input fields using css selectors.
6.Then we provide username and password.
7.Then we find the login button using xpath where we provide the html tagname and inside it we provide the attribute and its value.
8.Then we use click() method to click the login button automatically.
9.sleep(99999999) means the browser wont close.

I am a newbie developer and still exploring.
So, if you find any mistake in the post please highlight it in the comment section.
THANK YOU FOR READING THIS POST.

Chrome driver - https://chromedriver.chromium.org/downloads

If you want to learn more about selenium then visit here-
https://www.browserstack.com/selenium
🦠 The Worst Data Breaches of 2021 (Q1 and Q2)
Tags: security, attacks, breaches
Published: 2021-07-20 14:32:29

#### 📉 Learn what caused the worst #data #breaches in 2021 so far and how to defend against similar #threats.

### <br>

Every six months, we compile a list of the worst data breaches that occurred during that period in order to learn from them. So far this year, the causes of the worst data breaches have shifted from human error and credential based attacks that we saw at [the end of last year](https://auth0.com/blog/the-nine-worst-recent-data-breaches-of-2020/) to ransomware, third-party vulnerabilities, and undetected security gaps.

This suggests that threat vectors may be changing, and organizations would be wise to bolster their cybersecurity efforts against new ways cybercriminals are now gaining access to data.

Below, we break down 10 of the worst data breaches in 2021 so far, as well as what organizations can learn from those breaches.

![Data Breaches](https://images.ctfassets.net/23aumh6u8s0i/3iuokX9OUndtAbdOcAZnoW/cb6066767d6ff4ff6e4ea80a417c8238/breach_zoom1)

#### 1. Over 30K Organizations Exposed in Microsoft Breach
#### 2. More Than 220M Brazilians Exposed in Major Data Leak
#### 3. Over 533M Facebook Users’ Personal Information Leaked
#### 4. 17 Organizations Affected in Accellion Data Breach (So Far)
#### 5. Millions Affected in Automatic Funds Transfer Systems (AFTS) Attack
#### 6. MeetMindful Breach Exposes 2.28M Users’ Data


[Read more](https://auth0.com/blog/the-worst-data-breaches-of-2021-q1-and-q2/?utm_source=content_synd&utm_medium=sc&utm_campaign=security)
Creating a Spotify Web Clone with ReactJS+Spotify WEB API.
Tags: javascript, css, beginners, react
Published: 2021-07-20 13:41:19

Pre View:[View:](https://romantic-wozniak-9ac9cd.netlify.app)

In this post i represent how i build a spotify clone web app using ReactJS+Redux using Spotify Web API...[Read docs.](https://developer.spotify.com/documentation/web-api/).

### Note::

<p>We cannot play audio of any song because this feature is not yet updated in spotify web api docs.</p>

<p>hence in this project user can view their spotify data in terms of application.</p>

### Actors of the Application:
  Non-Premium Spotify Users:

    * Check their latest played song
    * Visit Spotify User profile.
    * Check their saved & liked playlists.
    * View which device playing current song in song player.
  Premium Spotify Users:
    * The above 4 features of Non Premium Users is also same for the Premium users 
    in addition with this premium users can control player i.e user can play Next, Previous song, stop or resume the current played song, user can also control device volume by sliding the user control in player.

Github Repo:[Repo](https://github.com/Ammyy9908/spotify)





**Please 🌟 the repo if you like.**