teleren/devto huggingface dataset:
`wget` God Mode
Tags: bash, tips
Published: 2020-07-31 07:19:41

If you're anything like me, you like to download things. And sometimes, it's too cumbersome to `right click > Save As...` each item on a webpage. The solution to your problem sits in your terminal: the `wget` utility. If we add a few options, `wget` becomes a beast of a website downloader, and is capable of pulling an entire site for offline viewing, include all of the linked files.

All you have to do is copy & paste your desired URL into the following terminal command:

```sh
$ wget -mkEpnp WEBPAGE-URL
```

The options `-mkEpnp` are specified below (pulled from the `man` page):

`-m` (aka `--mirror`): Turns on options suitable for mirroring. This option turns on recursion and time-stamping, sets infinite recursion depth and keeps FTP directory listings. It is currently equivalent to `-r -N -l inf --no-remove-listing`.

`-k` (aka `--convert-links`): Converts links for offline viewing.

`-E` (aka `--adjust-extension`): Adds proper filename extensions to downloaded files.

`-p` (aka `--page-requisites`): Downloads images, sounds, stylesheets, and other required files for proper offline site rendering.

`-np` (aka `--no-parent`): Prevents retrieval of the parent directory. Guarantees that only files below a certain hierarchy will be downloaded.

More fun `wget` options: 

```sh
$ --execute robots=off #ignore robots.txt
$ --wait=30 #be gentle, wait between fetch requests
$ --random-wait #waits for a random amount of time before fetch requests
$ --user-agent=Mozilla #sends a mock user agent with each request
```

Happy downloading! Oh and... I can't be held responsible if you suddenly find yourself investing in a home server setup, NAS drives, or the like.
REST API logging in Google Cloud Run
Tags: restapi, logging, gcp, webdev
Published: 2020-07-31 07:12:23

As a response to my other post, as I use Google Cloud Run in production.

{% post https://dev.to/patarapolw/logging-rest-api-1fkg %}

![Logs tab](https://res.cloudinary.com/practicaldev/image/fetch/s--q4cVkAfK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ymlix3rf6qvj5wuawhdc.png)

- It's not exactly in the LOGS tab. You have to open [Log viewer's page](https://cloud.google.com/run/docs/logging#viewing-logs-cloud-logging)
- JSON-like strings will be auto-transformed to JSON inside `jsonPayload`. Therefore, you can search like this,

```
severity>=DEFAULT
jsonPayload.req.method = "GET" 
```

- JSON strings are easier to log, therefore `req.body` and `POST` / `PUT` / `PATCH` as easier to log than `req.query` in `GET` / `DELETE`; however, it isn't impossible to pre-transform.
  - Another problem is `req.query`'s serialization isn't very standardized. I use currently use [rison-node](https://www.npmjs.com/package/rison-node).
  - I use `GET` requests for [potential caching](https://restfulapi.net/caching/). But I didn't do any caching yet. Also, some `GET` are truly dynamic (e.g. `/api/:dict/random`).

```js
export const logger = pino({
  serializers: {
    req(req) {
      return {
        method: req.method,
        url: req.url,
        version: req.headers['accept-version'],
        hostname: req.hostname,
        remoteAddress: req.ip,
        query: parseQuery(req.query),
      }
    },
  },
})
```

- At least in [Fastify](https://www.fastify.io/docs/latest/Logging/), you have to decide what to log, as by default, the logger doesn't log `req.body`. (It does log `req.url`, therefore, unparsed querystrings.)
Build a custom React toggle switch component
Tags: react, tutorial, javascript, webdev
Published: 2020-07-31 07:08:34

Toggle switches are form components that allow users to choose between two opposing states.

They are commonly used to toggle settings in apps or even day/night mode on websites.

Here’s what our toggle switch will look once complete:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/83oiv9ms25i7aycok154.gif)

Let’s get started by creating a `ToggleSwitch.js` file with some basic checkbox markup:

```javascript
import React from "react";
import "./ToggleSwitch.css";

const ToggleSwitch = () => {
  return (
    <label className="toggle-switch">
      <input type="checkbox" />
      <span className="switch" />
    </label>
  );
};

export default ToggleSwitch;
```

As checkboxes have limited styling capabilities we will instead be styling the `<span className="switch" />`.

Add the following CSS to `ToggleSwitch.css`:

```css
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}
.toggle-switch input[type="checkbox"] {
  display: none;
}
.toggle-switch .switch {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 25px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color 0.2s ease;
}
.toggle-switch .switch::before {
  position: absolute;
  content: "";
  left: 2px;
  top: 2px;
  width: 21px;
  height: 21px;
  background-color: #aaa;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.toggle-switch input[type="checkbox"]:checked + .switch::before {
  transform: translateX(25px);
  background-color: #6699cc;
}
.toggle-switch input[type="checkbox"]:checked + .switch {
  background-color: #336699;
}
```

At this point if you view the component it looks fully functional but in fact the value isn’t actually changing.

To change the value of the checkbox component we will be adding the following attributes:

`checked` – stores the input’s current value (true/false).
`onChange` – triggers whenever the switch is toggled and updating the component’s current value.

Modify `ToggleSwitch.js` so it contains the following attributes:

```javascript
const ToggleSwitch = ({isToggled, onToggle}) => {
  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isToggled} onChange={onToggle} />
      <span className="switch" />
    </label>
  );
};
```

Finally let’s add the component to our application.

As our component is stateless we also need to pass the isToggled value from the parent component:

```javascript
import React, { useState } from "react";
import ToggleSwitch from "./components/ToggleSwitch";

function App() {
  const [isToggled, setIsToggled] = useState(false);
  return (
    <div className="App">
      <ToggleSwitch
        isToggled={isToggled}
        onToggle={() => setIsToggled(!isToggled)}
      />
    </div>
  );
}

export default App;
```

Now you have a flexible toggle switch component to use in React projects.
How to work with git submodule?
Tags: help, git, submodule
Published: 2020-07-31 07:07:14

I have several repository projects. And in order not to create a bunch of repositories, I decided to combine them into one repository, because they are on the same topic.
Here is the repository structure:
onetheme_repo:
repo_001
repo_002
and so on.
As I understand it, git uses the submodule command for this.
A question -- when creating a new project and saving it to the repository, do I need to use the submodule command every time?
P.S. Sorry for my bad English. I'm hard of hearing, and I'm learning to work with git.
The Level Design of The Golem Game 
Published: 2020-07-31 05:34:45

Today I’m going to be talking about my thoughts upon creating the level for our game, The Great Golem.

### **Finding the right theme**
To start let’s go back a month ago when I first tried to develop the level. My first thought was what kind of theme do we want for our game. We needed something that made sense and would fit the models, buildings and details that we had, so silly options like the interior of a volcano or the bottom of the ocean would not work. For us the best option we determined was a mountain range which added depth to the scene and made it feel less like you are just a plane in the middle of an empty space.

### **Level Layout**
So now we have a location to work with now it is time for design the level layout. The first thing I wanted was to ensure some feel of level progression, so rather than throwing the player into a pit of death they get to understand the game and just have fun with it and later have the game get a little more challenging. First off in the tutorial section we started off with a couple homes a couple houses and a couple walls for the player to destroy. We then introduced some enemies that will attack the player and then teach the player how to regain health by eating his minions.

### **Sieging the Castle**
Now we need to determine how the rest of the map should look and play. Once again, we needed to go with something that fit our theme and models, so our best choice was to create a castle-like structure, this gave us the opportunity to overload a section with a lot homes and towers. After the castle has been built and the homes have been added it’s time to add the enemies into the game.

### **Bad Guys and Progression**
So after the tutorial level where the player learns the mechanics of the game I started off by placing one enemy on the outskirts and a bunch of homes around to draw the player into that section and repeated it until they arrived at a larger building which was used to refill a special token. From there the player should know what they can do we can start to up the number of enemies to 2, and it continues to increment to where you could potentially be hit by 6 enemies all at once. I decided to make the castle a very clustered section with many homes, many enemies and many opportunities to deal damage and take damage. Lastly we had some extra space on the sides of the castle so we added some trees to block off specific pathways so the player can't just walk around it

### **The Finale**
All that is left to do now is add some details, add some lights to brighten up the scenery and hooray! We have a map for our game!

Gage Dietz
SCSS Variables
Tags: css
Published: 2020-07-31 07:06:29

Now that we are getting into `SCSS` let's look into using variables and the power that comes with them.

Variables are literally what you expect a definition of a value.

These can contain a wide range in `SCSS`:

- Strings
- Colors
- Numbers
- Boolean
- Lists

## Declaring Variables

To declare variables in `SCSS` we use the dollar sign \$.

```css
$variableName: value;
```

Let's define some variables for todays examples:

```css
$fontFamily: Roboto, 'Helvetica Neue', Arial, sans-serif;
$fontSize: 16px;
$primaryColor: #333;
$secondaryColor: #efefef;
$maxWidth: 300px;
```

We can then use these variables as such:

```css
body {
  font-family: $fontFamily;
  font-size: $fontSize;
  background: $secondaryColor;
}
.box {
  max-width: $maxWidth;
  background: $primaryColor;
  color: $secondaryColor;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
```

This will then result in the following Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="zYrVxrp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SCSS Variables">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/zYrVxrp">
  SCSS Variables</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## Overwriting Variables

There is an option to overwrite variables inside an element check out the following use case:

```css
$color: #ef476f;

h1 {
  $color: #ffd166;
  color: $color;
}
p {
  color: $color;
}
```

What happens here, just inside the H1 we change the color to green, will only make the H1 yellow. The p tag will stay our original color.

There is an option to overwrite the default for good, but I don't know why it exists!

This will give the following Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="OJMePbP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SCSS Variables #2">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/OJMePbP">
  SCSS Variables #2</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Hosting an Application on Heroku in 7 Steps
Tags: heroku, git, github, json
Published: 2020-07-31 06:59:50

Before we start, go to [Heroku.com](Heroku.com) and log in or sign up for an account (if you don't already have one).

You will also need the Heroku CLI tool, available from [Heroku Dev Center](https://devcenter.heroku.com/articles/heroku-cli)

Heroku uses Git for source control, so make sure you have that installed as well. Git install documentation can be [found here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).

1. **Check that everything is installed**

```sh
$ heroku -v
$ git -v
```

2. **Log in through the terminal within your project directory**

```sh
$ heroku login
# Then enter your email and password for Heroku
```

3. **Initalize a git repository**

> Make sure to create a `.gitignore` containing anything that you don't want pushed to Heroku: `node_modules`, reference docs, sandbox files, etc.

```sh
$ git init
$ git add .
$ git commit -m 'Initial commit'
```

4. **Initialize the Heroku container**

```sh
$ heroku create
```

5. **Set Heroku as Remote Repository**

Go to your Heroku dashboard and open up the new Heroku container.

Scroll down to "_Create a new Git repository_" and grab the command to add this container as our remote repository:

```sh
$ heroku git:remote -a CONTAINER-NAME-12345
```

And then paste that command into your project directory terminal.

6. **Push to `master` branch of Heroku App**

```sh
git push heroku master
```

7. **View Your New Application**

Go to the URL provided when pushing to `master` or just type `heroku open` into the project terminal.

A Few Notes:

1. In `index.js`, we've set `const PORT = process.env.PORT || 5000` - Heroku will be using `process.env.PORT` and not `PORT = 5000`.
2. Make sure that you have a `start` script in `package.json` - `"start": "node index"`. Change `index` to whatever entrypoint you're using if necessary.
🔥 How to Work with GET/POST/PUT/PATCH/DELETE in Postman(in 10 min)
Tags: testing, tutorial, beginners, webdev
Published: 2020-07-31 06:58:42


Hey BugHunters,  In this video we are going to discuss CRUD in Postman In 10 minutes and How to work with GET/POST/PUT/PATCH/DELETE | API Testing with Postman

> 🔥 Install JSON Server - https://www.npmjs.com/package/json-server

[![ Rest Assured Tutorial](https://i.imgur.com/fpu61Q8.png
)](https://youtu.be/UGZsOlNiVCI "Rest Assured Tutorial")


### ✅ What is CRUD in Postman?
Create, Read, Update, and Delete (CRUD) are the four basic functions that models should be able to do, at most.

### ✅ What is GET Request?
The GET Method. GET is used to request data from a specified resource. GET is one of the most common HTTP methods.

### ✅ What is POST Request?
POST is used to send data to a server to create/update a resource.
The data sent to the server with POST is stored in the request body of the HTTP request:


### ✅ What is PUT Request?
PUT is used to send data to a server to create/update a resource.
The difference between POST and PUT is that PUT requests are idempotent. 

That is, calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple times.


### ✅ What is PATCH Request?
PATCH is somewhat analogous to the "update" concept found in CRUD (in general, HTTP is different than CRUD, and the two should not be confused)

### ✅ What is DELETE Request?
The DELETE method deletes the specified resource.


P.S: 
This is Day 10 of the 30 days of API Testing challenge Series. Where will learn the Basics before jumping to API Automation.

🚀 All 30 Days Task - https://scrolltest.com/30days/restassured
📌 Join 30 Days Challenge Updates - https://scrolltest.com/tta
🎓 Free Automation MasterClass - https://thetestingacademy.com
📚 REST API testing with Python - https://masterapitesting.com

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Merging Local Git Branches
Tags: git, github
Published: 2020-07-31 06:53:21

## Using Merge

```sh
git checkout test
git pull
git checkout master
git pull
git merge --no-ff --no-commit test
```

This method will test your merge before a full commit, and will avoid a fast-forward commit by `--no-ff`,

If a conflict is encountered, we can run `git status` to check details about the conflicts and try to solve

```sh
git status
```

Once we solve the conflicts, or if there is no conflict, we commit and push them

```sh
git commit -m 'merge test branch'
git push
```

But this way will lose the changes history logged in `test` branch, and it would make `master` branch difficult for other developers to understand the history of the project.

So the best method is we have to use `rebase` instead of `merge` (suppose, when in this time, we have solved the branch conflicts)...

## Using Rebase

Following is one simple sample, for advanced operations, please refer to [http://git-scm.com/book/en/v2/Git-Branching-Rebasing](http://git-scm.com/book/en/v2/Git-Branching-Rebasing)

```sh
git checkout master
git pull
git checkout test
git pull
git rebase -i master
git checkout master
git merge test
```

Yep, when you have uppers done, all the Test branch's commits will be moved onto the head of Master branch. The major benefit of rebasing is that you get a linear and much cleaner project history.

## ❗️ CAUTION

The only thing you need to avoid is: **never use `rebase` on public branch, like `master` branch.**

In other words, if you're ever about to perform an operation like the following, please be absolutely sure you know what you're doing.

```sh
git checkout master
git rebase -i test
```

For more details, please see this article from Atlassian on [The Golden Rule of Rebasing](https://www.atlassian.com/git/tutorials/merging-vs-rebasing/the-golden-rule-of-rebasing).
Error Handling With Fetch
Tags: fetch, api, javascript, http
Published: 2020-07-31 06:47:38

Error handling with fetch is a bit different than with something like Axios or jQuery. If there is an http error, it will not fire off `.catch` automatically. You have to check the response and throw an error yourself. Here is an example:

```js
fetch('https://jsonplaceholder.typicode.com/todo/1')
  .then(res => res.json())
  .then(res => {
    if (!res.ok) {
       throw new Error(res.error);
    }
    return res;
  })
  .catch(err => console.log(err));
```

I would suggest creating a separate function for error handling:

```js
function handleErrors(res) {
  if (!res.ok) throw new Error(res.error);
  return res;
}

fetch('https://jsonplaceholder.typicode.com/todo/1')
  .then(res => res.json())
  .then(handleErrors)
  .then(res => console.log(res.data))
  .catch(err => console.log(err));
```
Variable and Constant In Javascript | Javascript Crash Course
Tags: javascript, codenewbie, tutorial, webdev
Published: 2020-07-31 06:46:36

In this video, we will learn about variables and constant in Javascript. We will learn about their concept and the difference between them. Then, we will learn how to create then using the let and const keyword.

Hope you enjoy it.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Debugging Pattern: "ControllerID"
Tags: debugging, javascript
Published: 2020-07-31 06:40:36

This debugging pattern was shared with me by a close friend (who also happens to be a very skilled developer). This is an incredibly useful and time-saving debugging pattern when working with modules or controllers that need to be instantiated only once per instance. 

The idea behind this pattern is to apply a controller ID to each instance of a given module/controller in order to keep track of the number of times it is being instantiated.

To do this, create a global variable that we will increment:

```
let controllerCount = 0
```

Then, assign a variable within the module that will be assigned a controller ID, and increment the controller count:

```
export const Controller = () => {
	const controllerID = ++controllerCount
}
```

Then, add the following code to your tests:

```
console.log({data, controllerID})
```

## Create Custom DOM & Window Tests

To make information that would normally be buried deep within the DOM, we can create our own tests to make things more readily available.

Just add this pattern to the correct scope:

```
window.test = { module1, module2, ... }
```
Sass Setup and Basic Use
Tags: css, sass
Published: 2020-07-31 06:34:06

## How to Set Up Sass Using NPM

1. In main project folder, (outside of dist folder if using one), create a folder called `scss`, and `main.scss` file within the new `scss` folder.

2. Right click up-one-level folder from dist and open in terminal (i.e. in terminal, go to your dist folder, then do '$ cd ..')

3. In terminal, do `$ npm init` to create a package.json file.

4. Enter package name and details.

5. In terminal, do `$ npm i node-sass` to initialize sass.

6. Open `package.json` file, change:

```json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"},
```

to:

```json
"scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive"},
```

> **NOTE:** File directories in the script must match your folder layout!

For example, if you don't have a `dist/` folder, just use `... -o css/ --recursive` instead.


> **NOTE:** Make sure to point your stylesheet correctly in your html code!

For example, if using `main.scss` (and thus `main.css`), use: `<link rel="stylesheet" href="css/main.css">`

7. In your terminal, start the Sass script with: `npm run sass`.

8. In `main.scss`, start writing your sass.

> **NOTE:** Do not edit your `main.css` file. The Sass compiler will overwrite any changes you might make, so be sure to write your CSS directly to `main.scss`.