teleren/devto huggingface dataset:
How I Scraped Anime Filler List Website to get list of episodes of anime
Tags: python, jupyter
Published: 2021-08-15 06:49:26

At the start of this year I was learning Web Development, mainly ( HTML, CSS, JavaScript ) and I wanted to make projects to get a better understanding of concepts. Since I loved watching anime at that time, I thought it would be a great idea to make a clone of 'Anime Filler Website'. So, I started working on it. But instead of using an API ( or I couldn't find one ) I went along with the idea of scraping Anime Filler Website for the details I needed.

Here's how I did it:

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

These are the libraries I used. I used 'requests' to send request to the required website and get the response back along with the required data. I used 'bs4' (BeautifulSoup) so that we can parse the data that we got from the request.  I used the library 'json' to convert python array of objects into json array of objects. And lastly I used 'shutil' to move the json file from one location to another.

![Anime List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ef0leoa27ghhdb40hqc.png)

Here I created a list of anime that I wanted to get the episode list of. It is a big list so I did not mention all the name in the image.

![Source Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqgil4puwwjv1ew7kytu.png)

The function getJsons() in the above image is the main program. It takes the name of the anime as in the website as a parameter. It then makes a request to the website and gets back a response which is then stored in the variable 'result'. Then using bs4 it converts the text data inside result to a parsable data and stores it inside the variable 'soup'. Then we are free to select whichever HTML tag we want from the variable soup using soup.select() and then filtering the arrays to get only the text inside the HTML tags.
Then it initializes an array so that we can store our python objects inside it. Loops throuhgh the list of the textContents and checks if the selected episode is a filler, if it is a filler then adds an HTML class 'red' as a class in the object else add a class 'green'. Stores all the data under required titles in the object and then finally appends the object to the array.
It then converts the resultant array into a json array of bbjects using library 'json'. It then makes a file with anime-name.json and stores our array inside it.
Finally using library 'shutil' it moves the json file from current directory to where we want it.

![run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gdi1pzo0xzsxhkh10ed.png)

We run this function for all the anime in the anime list.
Thank You!! Hope you learned something from the post.
Here is the link to the github repo of my project [AnimVille](https://github.com/Hamza-777/AnimVille)
Create a Portfolio Website Using HTML, CSS, JavaScript
Tags: html, css, javascript, webdev
Published: 2021-08-15 06:12:40

##This is My Personal Portfolio Website


####Live Preview : [Click Me](https://github.com/Aman2221/AmanPortfolio.github.io)

![PortfolioHomePage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uobqnuulj0d01hdt1umx.png)
![AboutPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtdx0hfvgk84nhtz044w.png)
![SkiilsPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cntglibc94w8051z0m91.png)
![ProjectsPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5ksbdthw6z4eq6049xf.png)


 {% github Aman2221/AmanPortfolio.github.io %}
Covid made me a software developer
Tags: react, vscode, vue
Published: 2021-08-15 06:06:10

After graduating I enrolled in a BSC in Psychology not knowing what else to do with my life and having parents put pressure of me to enroll.

With a psychology degree there aren't too many options. Any job requires you to learn additional skills. To go into counselling you need to further your studies and to go into business you need to learn marketing, which I have no interest in.

During one vacation I travelled to Japan and South Korea and it was such an awesome experience. I wanted to go again but money wise it was not happening. I looked for to make money and live there and it seemed that it was possible. You can teach English for a living. 

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

I hopped on the first plane and secured a job in South Korea. It was a great experience. I managed to teach in [Japan](https://teast.co/teach-english-japan), [South Korea](https://teast.co/teach-english-korea), [Taiwan](https://teast.co/teach-english-taiwan), [China](https://teast.co/teach-english-china), [Hong Kong](https://teast.co/teach-english-hong-kong), [Vietnam](https://teast.co/teach-english-vietnam) and [Thailand](https://teast.co/teach-english-thailand).

When Covid hit Vietnam, my school closed down and I lost my job. I took a flight home and spend the next few months at home where I learned how to code from Youtube and Udemy. I recommend this course https://www.udemy.com/course/the-complete-javascript-course/.

I now work as a software developer for a large agency in Singapore. I also made a website to help people find travel and teaching job opportunities abroad, you can find out more [here](https://teast.co).
RigWorld - Flatiron School Rails Project
Published: 2021-08-15 05:41:20

I feel very relieved at last to get to this part of project mode. The blog post is usually the last thing I do and to get to this point now means I no longer have to endure sleepless nights at least till the next project is due haha.

The Rails section of this program was relatively easy in the first few weeks so it was kind of a huge shock to me when we dove into nested forms and everything all of a sudden became so exponentially hard. No, I'm not exaggerating. The difference in difficulty between the prior lessons and nested forms was so huge and glaring to see that it definitely threw me off a bit.
Thankfully, though, with the help of our very able cohort lead and a couple of youtube videos I was able to grasp enough of the concepts before project week came.

Okay, let us dive into my project. RigWorld is a simple Rails app that allows users(companies) present designs of their Rigs and other users leave reviews on them.The straightforward nature of the project meant I did not face any major difficulties until I tried to implement omniauth as a feature. The program would break whenever I tried to sign-in with an error that couldn't find the route I was sending my request to. Apparently google oauth2 does not accept 'get' requests and processes everything as a 'post' request and this was a headache for me because I was oblivious to the fact and whenever I tried to create a link to the omniauth sign in I was getting errors. Thanks to stackoverflow, the fix was simple. To specify in the "link_to" method that it was a post request and also add a csrf protection gem to my gemfile.

Overall, making this project was fun and I will definitely go back to add more features to the application!
Merging Git Repos 
Published: 2021-08-15 05:27:40

For my penultimate project, I made two separate git repositories - one for my Rails API backend and the other for my JavaScript frontend. However, after juggling both, not to mention several individual commits later, I realized that maybe having one repo is better than two. But I didn't want to lose my precious commit history either. Luckily, combining several repos into one is *almost* just as easy as copying and pasting into a new folder.
 

#How to Merge Multiple Repos#
##The Repos##
* **Repo 1**
* **Repo 2**
* **New Repo**, where I want to have Repo 1 & Repo 2

###Beforehand: Create/push a new repository###
**Create a new repo**
`echo "# new-repo" >> README.md`
`git init`
`git add README.md`
`git commit -m "first commit"`
`git branch -M main`
`git remote add origin git@github.com:your-github/new-repo.git`
`git push -u origin main`

 or **Push an existing repo**
`git remote add origin` `git@github.com:your-github/new-repo.git`
`git branch -M main`
`git push -u origin main`

![merge ahead traffic sign](https://i2.wp.com/twinstrology.com/wp-content/uploads/2016/09/11223651_1517839315205282_3135386444331329876_n.jpg)

##MeRgE Ahead##
Let's start in **New Repo** and add a remote copy of **Repo 1**.
`git remote add -f repo-1 git@github.com:your-github/repo-1.git`
Use the actual name of the directory, as opposed to what you named the repo on GitHub, and the SSH URL. 

Next, merge all of **Repo 1's** folders and files *with the flag* `--allow-unrelated-histories`, which allows the combining of unrelated branches into one. . . as long as they're no conflicts. 
`git merge repo-1/main --allow-unrelated-histories`

![](https://i.ibb.co/4mRCmsd/Screen-Shot-2021-08-15-at-12-35-28-PM.png)

Enter a commit message, in the command-line text editor, explaining why the merge is necessary. 
1. Press "*i*" to insert
2. Write merge message
3. Press "*esc*" to escape
4. Press "*:wq*" to write & quit
5. Press *enter*

If conflicts arise, resolve them and repeat the previous command, `git merge repo-1/main --allow-unrelated-histories`. (I had one with the README.md file, and I resolved it by accepting changes in my text editor.)

Commit the changes and `git log` to see that the commit history is still there!! 

##Repeat, Repeat, Repeat##
For **Repo 2** and, really, any other repo you want to merge, repeat the previous steps:
* `git remote add -f repo-2 git@github.com:your-github/repo-2.git`
* `git merge repo-2/main --allow-unrelated-histories`

(Resolve conflicts and re-merge)

Again, commit the changes and `git log` to check everything. 

![happy kawaii face](https://static.vecteezy.com/system/resources/previews/001/816/254/non_2x/happy-kawaii-cartoon-face-with-cheeks-design-free-vector.jpg)


Honestly, the thought of merging multiple repos seemed both annoying and daunting. And I spent a good while madly googling and compiling results. However, the previous steps worked and preserved all my commit history without too much suffering.
Python Foundation with Data Structures & Algorithms - Part 04
Tags: python, showdev
Published: 2021-08-15 04:14:35

##**Python Decision Making**

Python supports the usual logical conditions from mathematics:

Equals: a == b
Not Equals: a != b
Less than: a < b
Less than or equal to: a <= b
Greater than: a > b
Greater than or equal to: a >= b

These conditions can be used in several ways, most commonly in "if statements" and loops.
An "if statement" is written by using the if keyword.

Python relies on indentation (whitespace at the beginning of a line) to define scope in the code. Other programming languages often use curly-brackets for this purpose.

**Using if Statement**

![1a](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv2i5sa76btw3m1uvyti.png)

**using if-else Statement**

![2b](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vkjfy4obi7xh6c9n9un.png)

**Multiple if Statement**

Here all the true conditions will be executed.

![3c](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt62mhe5sj1flwmsgnk9.png)
 
**if-elif Statement**

Even if all the conditions are true, only first True condition will be executed rest all will not be executed.

![4d](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc2y20b4hny8bw7i2kku.png)
 
**Nested if-else Statement**
     
![5e](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4qw51sdz6xc4op3i7mo.png)

**Short Hand If**

If you have only one statement to execute, one for if, and one for else, you can put it all on the same line:

![6f](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk90d2tsskifmu3nubl0.png)

**if-else using Logical AND Operator**

![7g](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw5p2jhi7auxnoa3dzci.png)

**if-else using Logical OR Operator**

![15.08.2021_09.26.50_REC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7toqp0pccvjp6wdbjpc2.png)

**The pass Statement**

if statements cannot be empty, but if you for some reason have an if statement with no content, put in the pass statement to avoid getting an error.

![8h](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwi76eydtzv801tessg8.png)

**Find No is +ve/-ve**

![9i](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xahvxb52x9dhmffju972.png)

**Find the No is Even/Odd**

![10j](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jpbr13fu11zlef7ql3b.png)

**Find the No is Even/Odd ( Without using any Arithmetic Operator )**

![11k](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4ii8masvh29n60aunh5.png) 

**Find the Greatest Between 2 No's**  

![12l](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uiu5atz6cjx9u4nlsk63.png)

**Find the Greatest Between 3 No's**

![13m](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r02kqzc08z32wpwdd786.png)

![14n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrdp6l0vk45epuh8nqsq.png)

**Calculate Ticket Price:**

![15o](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr5qkse394arou82c3h6.png)
Nested object and array destructuring
Tags: codesandbox, javascript
Published: 2021-08-15 03:47:50

## Destructuring on nested object? 🤔

Destructuring is commonly used, but do you know how to do destructuring nested object and array?

## Can you refactor this?

Sandbox below to try it by yourself 👇
![Image 2021-08-15 at 12.35.10 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wj06nq1irkjh556m631.jpg)

The code taken from MDN: [Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

## Use nested object and array destructuring 👍

![Image 2021-08-15 at 12.40.10 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weez80ajxayz3fji4maw.jpg)
 
## Reference

[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)


## CodeSandbox

{% codesandbox i7wt1 %}
Quick react setup with Hook
Published: 2021-08-15 03:43:49

Import react
If I am using hook, set up hook when I am calling react.
If I am also using context, set up context when I am calling react.
In case if I want to use lazy <-- which makes load more efficiently, I can also load it in React
```javascript
import React, { useContext, useState, useEffect lazy, Suspense} from 'react';
```

If I am using Context, load context file
```javascript
import { ContextFile } from '../Context.jsx';
```

If there is a component that needs lazy, import it using lazy
```javascript
const TestComponent = lazy(() => import('./testComponent.jsx'));
```

Create component function that can be export
declare functions that I am going to use from context
create hook if I need it
```javascript
function App() {
  //context
  const { functionOne, functionTwo } = useContext(ContextFile);
  //hook
  const [testHook, setTestHook] = useState(initialValue);

  //update state function
  const ifStateNeedsUpdate = () => {
    setTestHook(whateverNewData);
  }

  const GetRequest = async () => {
   await getRequest here
  }

  //if I want to update hook only in certain situation, I can use useEffect to update hook for ex.
  useEffect(() => {
    setTestHook(whateverUpdate);
  }
}, [itWillonlyUpdateIfThisValueChanges]);

  return (
    <div> Hello, World </div>
  )
}

export default App;
```
Quick react setup without Hook
Published: 2021-08-15 03:29:06

Import React

```javascript
import React from 'react';
```

Create Class
```javascript
Class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      list: null,
      error:false
    }
  }
```

Create componentDidMount to fetch data from API
```javascript
componentDidMount() {
  fetch("http://localhost:3000/example")
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          listen:result,
          isLoaded: true
        });
      },
      (error) => {
        this.setState({
          error: true,
          isLoaded: true
        })
      }
    )
}
```

Render component & Post request (I am requesting Post & Get at the same time so I can keep up the new data after Post request)

```javascript
 render() {

    const postRequest = (data) => {
      let requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
      };
      fetch("http://localhost:3000/example", requestOptions)
      fetch("http://localhost:3000/example")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            list: result,
            isLoaded: true
          });
        },
        (error) => {
          this.setState({
            error: true,
            isLoaded: true
          })
        }
      )
    }

    const { error, isLoaded, list } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>Hello, World~!</div>
      );
    }
  }
}

export default App;
```
pre-commit-golang - v1.0.0-beta.4 - Go Mod Tidy, GoFumpt, StaticCheck
Tags: showdev, go, github, git
Published: 2021-08-15 03:23:39

Its been a busy week since the v1.0.0-beta.1 announcement.

Here's a quick recap of recent additions:

* [v1.0.0-beta.4](https://github.com/TekWizely/pre-commit-golang/releases/tag/v1.0.0-beta.4)
  * Support for [staticcheck](https://staticcheck.io/)
* [v1.0.0-beta.2](https://github.com/TekWizely/pre-commit-golang/releases/tag/v1.0.0-beta.2)
  * Support for [go mod tidy](https://golang.org/ref/mod#go-mod-tidy)
  * Support for [gofumpt](https://pkg.go.dev/mvdan.cc/gofumpt)
* [v1.0.0-beta.1](https://github.com/TekWizely/pre-commit-golang/releases/tag/v1.0.0-beta.1)
  * Support for [invoking custom tools](https://github.com/TekWizely/pre-commit-golang#my-cmd)

As an example of invoking custom tools, here's a snippit I gave to a user recently who wanted to invoke `golines`:

```
# ...
      hooks:
            # Run 'golines -l --dry-run $FILE' for each staged .go file
        -   id: my-cmd
            name: go-lines
            alias: go-lines
            args: [ golines, -l, --dry-run ]

            # Run 'golines -l --dry-run .' in the repo root folder
        -   id: my-cmd-repo
            name: go-lines-repo
            alias: go-lines-preo
            args: [ golines, -l, --dry-run, . ]
```

You can read about all pre-commit-golang features on project's homepage:
* https://github.com/TekWizely/pre-commit-golang
Intro to Blockchain: Distributed Systems
Published: 2021-08-15 02:22:49

Blockchain, the newest and most popular technology that everyone is currently raving about. What is it exactly?

'<em>A blockchain is a distributed software network that functions both as a digital ledger and a mechanism enabling the secure transfer of assets without an intermediary.</em>' -[The Blockchain Research Institute](https://www.blockchainresearchinstitute.org/an-intro-to-blockchain-and-nfts/)

A lot of confusing words there, lets break it down to 'distributed software network', 'digital ledger', and 'secure transfer of assets'. First lets understand what a <em>ledger</em> is. A ledger is usually a log. A loan shark for example would have a personal ledger logging all the people that owe him money. In that same book they'll log those same transactions as either paid or late or whatever the case. It's a log of the history, the transactions, the numbers. In this case it would be a <em>digital ledger</em> probably keeping track of all the transactions happening. 
That sounds like a pretty important thing right? A book with all the history and transactions in one place. What if whoever held that book were to make changes to that? Thats so unsecure. 
That's where the power of blockchain comes in. The great thing about blockchain is that it runs on a <em>'distributed software network'</em> or distributed system. What is a distributed system? A distributed system is a network of nodes that work together collectively. What are nodes? Nodes is just a fancy term for a machine that can connect to the network, it can be a computer, laptop, physical server, virtual machines, or other containers. Now through these network of nodes, the digital ledger is kept and stored on this distributed system. Each node has a piece of information of its own, and a copy of the information of the node next to it. Since our current node has a copy of the information of the node next to it, let's say that node next to it tries to change their information, we'd know right away because their information doesn't match up with what we have. Same goes for us and how the node next to us can keep us in check. Instead of a ledger being kept by one entity, we now have spread out the digital ledger amongst multiple nodes all keeping one another accountable. And that chain of nodes working together is the blockchain.
Understanding HTML <DIV>
Tags: html, beginners, div, frontend
Published: 2021-08-15 01:05:26

HTML DIV

In writing the HTML(Hyper Text Markup Language) of a web page, the use of the HTML tag called Div is one of the important HTML tag that every programmer should understand the schematics and it's purpose in writing our HTML codes. 

I came across a beginner to front end web development that said she had to stop her learning process due to lack of understanding of the HTML tag DIV, so I am writing this for absolute beginners to understand exactly what DIV is used for and there purpose and importance in writing a good HTML code. 

The div tag defines a division or a section in a standard HTML code. The div tag is used as a container for HTML elements. When ever you need to divide or separate the elements on a webpage, you use the HTML tag (div). 

While writing our codes for instance, we have the menu section, the about section, the skill section, the projects section, the contact section and the footer section. It is advisable to always wrap up each sections with a DIV. 

The div tag is easily styled by using the class or id attribute. When ever you want to effect a change in the style of a particular section, it is easier to Target the DIV class or ID, by so doing the changes affects all the elements and contents that is placed within the opening and closing div; 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltjc49fmvj94mgfzk2t7.png)
Any sort of content can be put inside the <div> tag!

NOTE:By default,browsers always place a line break before and after the div  element.

A DIV is simply a container that holds different sections and elements in an HTML document. 
You get to also see the beauty of a div when we start having sections and sub sections. Here you can have a div as a child inside a parent div.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzhqas7gc6i0v7w76e8f.png)

We make use of DIV for easy styling of each sections, subsections and to make our codes orderly, readable and reusable.
Javascript Functions
Tags: javascript, codenewbie, beginners
Published: 2021-08-15 00:58:04

Lets talk Javascript functions! Functions are very useful blocks of code that are reusable throughout your application. Javascript functions are only executed if they are called on. This is useful if you have a few lines of code that need to be used in multiple places in your application. This can save alot of time when writing code. 

Here is an example of how to set up a function...

`function reusable()
{
     Here is where the code is that you will use in multiple places in your app
}`

Javascript functions can also have arguments that will go in between the parenthesis. For example...

`function reusuable(arg1, arg2)
{ 
Here is that reusable code
}`

You can also request a value be returned and you would do that inside of the function.

`function reusable(arg1, arg2)
{
Here is the reusable code
return value1
}`

Happy Coding!