teleren/devto huggingface dataset:
Lab 7: Linters and Code Formatters are really powerful tools
Tags: opensource
Published: 2020-11-15 05:35:37

"Once you learn these tools, you'll never go back" I can say that this quote from David is 100% correct.

For this week's lab, we were required to setup a Contributing.md file to let other developers know how to setup our project in order to test out changes that are supposed to be made. We were also supposed to setup a linter and code formatter for our project. I decided to use black and pylint since my release 0.1 project was written in Python. Setting these tools up were simple enough. What I was more amazed with, were the amount of linter errors that came up based on the settings you pass into the .pylintrc file. 

Black on the other hand, is similar to Prettier in Javascript, in that it formats your code based on specific settings that you pass. As I have experience with Prettier in the past, black made me feel very much at home. 

After setting up the linter and code formatter, we were also asked to setup default settings on our editor of choice with regards to having the linter and code formatter work by default. For me, this meant I had to make a .vscode folder that contained a settings.json file. This file would be loaded for the workspace every time a user cloned the repo. This file while not useful for me, is very much useful for every user that downloads/clones the repo. These settings allow them to run the linter and code formatter by default as soon as they save their files in the workspace. For those that don't use vscode, I also made a shell script that will execute black and pylint. The default action is to check the two python modules I created, but you can also pass in additional files as parameters in order to have black and pylint check them as well. When this was all done, I rebased, squashed, committed, and pushed my code to my repo on github.

This lab has shown me just how important a linter and code formatter are for open source projects, but also for projects in general. I don't think it's something I can work without now. Once you go linter/code formatter, you never go back.

Thanks for reading!
Finally Completed Hacktoberfest 2020
Tags: hacktoberfest, opensource, github
Published: 2020-11-15 05:29:34

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d2txt10eb4ckbo8q8xem.png)

### First Hacktoberfest ✨✨🚀
 As I was already a member of Dev Community and also this time i had decided to participate in this Hacktoberfest event. It was really great to contribute open source projects.

And yes I was really new to open source and actually this event really helped me understand and cherish the true spirit of #OpenSource Community

### Contributions🚀

Well there was no specific criteria for me to choose projects. As i was new to open source i grabbed most easy repo's. But here is tricky part one of Repo Maintainer was impressed with my contribution and she made me a permanant contributor of that respective project(project:-time-to-leave).

### Reflections🙌
My Overall experience of Hacktoberfest was damn awesome, made networking with new people, learned lot of things and also became a contributor to a opensource project.
We put the results of the recent Bihar (India) elections through Benford's law. Our analysis suggests NO EVM Fraud.
Tags: python, benfordslaw
Published: 2020-11-15 05:10:48

This was inspired by Matt Parker of the Stand-up Maths YouTube channel. 
Here's our episode link --> https://www.youtube.com/watch?v=KCgmMIfI4S8

Here's Matt Parker's video --> https://www.youtube.com/watch?v=etx0k1nLn78
Static Analysis Tool
Tags: opensource, go
Published: 2020-11-15 05:01:13

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

This week we covered the commonly used static analysis tools. After watching David's lecture, I feel lucky and happy that I chose to learn some Golang language while taking this course. Go has made things much easier and reduced unnecessary conflicts by forcing users to follow only one rule of formatting. It's meaningless to fight for which kind of indentation we should take, or if the curly braces should take another line or not. 

For the formatting, actually, there is no need for me or any contributor to do manual formatting with Go, since Go would save the code to its pre-defined format. The following command can help to format the code too: 
```
gofmt -w filename.go
```
I chose Golint for the linter, and the user can execute the below command to force checking: 
```
golint filename.go
```
For the IDE Integration, I used VS Code, and the file setting.json under .vscode has been updated automatically after changing the setting of the extension.
Solving LeetCode -  Longest Substring Without Repeating Characters
Tags: javascript
Published: 2020-11-15 04:55:22

# Question

Given a string s, find the length of the longest substring without repeating characters.

Example 1:
```
Input: s = "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3.
```
Example 2:
```
Input: s = "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.
```
Example 3:
```
Input: s = "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Notice that the answer must be a substring, "pwke" is a subsequence and not a substring.
```

Constraints:

* 0 <= s.length <= 5 * 104
* s consists of English letters, digits, symbols and spaces.

## Let's Go!

Solve by using [PREP](https://dev.to/phariale/prep-technique-for-algorithms-in-js-5b0g).
* **P** - One parameter of type string
* **R** - A return of type number that represents the length of the longest substring that does not repeat characters
* **E** - Examples provided by question. (See Above)
* **P** - See Below

```javascript
var lengthOfLongestSubstring = function(s) {
  // Assign i to 0 to track index of s
  // Assign count to [ 0 ] to track lengths of all substrings
  // Assign start to 0 to track the beginning idx of a new substring

  // Iterate over s while i < s.length
    // If slice of s from start to i does not include the current char at i of s
      // Add 1 to the last element of the count array
      // Add 1 to i
    // Else
      // Add a new length of 0 to last element of count array
      // Assign start and i to the previous index where the char at i of s appeared and then add 1

  // return the largest number within the count array
}

```

Translate into code...

```javascript
var lengthOfLongestSubstring = function(s) {
  let start = 0
  let i = 0
  let count = [ 0 ]

  while (i < s.length) {
    if (!s.slice(start, i).includes(s.charAt(i))) {
      count[count.length - 1]++
      i++
    } else {
      count[count.length] = 0
      start, i = s.slice(0, i).lastIndexOf(s.charAt(i)) + 1
    }
  }

  return count.reduce((max, current) => current > max ? current : max)
}
```

### Conclusion

& Remember... Happy coding, friends! =)

#### Sources
* https://leetcode.com/problems/longest-substring-without-repeating-characters/
Leetcode Permutations Problem: Python Solution
Tags: python, recursion
Published: 2020-11-15 04:18:40

Given a collection of distinct integer, return all possible permutations.

Example:
Input: [1, 2, 3]
Output: 
[
  [1,2,3],
  [1,3,2],
  [2,1,3],
  [2,3,1],
  [3,1,2],
  [3,2,1]
]

Leetcode problem can be found [here](https://leetcode.com/problems/permutations/)

We need to understand what a permutation is; a way in which a set of things can be ordered. So our given input of numbers, we must find every possible combination starting with first number, then second number, then so on.

The way I approached this problem was by finding out how I wanted to initially loop through the whole input array.

We want to keep track of our result we want to output at all times and we want to constantly append this with 
```python
for i in range(len(array)):
    newArray = array[:i] + array[i+1:]
    newCurrentArray = currentArray + [array[i]]
```

this is our main algorithm that will constantly look for the different permutations. We now have to call this recursively
to get every permutation

```python
def getPermutations(array):
    result = []
    helper(array, [], result)
    return result
def helper(array, current, permutations):
    if not len(array) and len(current):
        oermutations.append(current)
    else:
        for i in range(len(array)):
            newArr = array[:i] + array[i+1:]
            newCurr = current + [array[i]]
            helper(newArr, newCurr, permutations)
```
How to get 2x Oracle Cloud servers free forever
Tags: cloud, devops, webdev, tutorial
Published: 2020-11-15 04:04:52

This is a follow up to my [How to get a Google server free forever](https://dev.to/phocks/how-to-get-a-free-google-server-forever-1fpf) post.

In the comments [selim13](https://dev.to/selim13) let me know that Oracle was offering a similar deal but even better!

{% comment 17on5 %}

The servers have twice the RAM that Google offers and more Hard Disk space plus 2 CPU cores compared with 1 on Google Cloud. And you get 10 TB outgoing traffic per month compared with 1 GB on Google! As for the 10 Mbps bandwidth limit, it seems that only applies if you enable a **load balancer** on your virtual network.

Seems like a great deal anyway. Here's how to do it.

Go [here](https://www.oracle.com/au/cloud/free/) and click **Start for free**. Then enter your country, name, and confirm your email. 

> *Note: my confirmation email went to spam so check there*

![Sign up](https://dev-to-uploads.s3.amazonaws.com/i/fc5nygsa2uqz3yafwh1l.PNG)

Choose a username and password and make sure you choose a region that includes the [always free cloud services](https://www.oracle.com/cloud/data-regions.html#northamerica).

![Choose region](https://dev-to-uploads.s3.amazonaws.com/i/8we9iscc83t81vcad3c3.PNG)

Fill in your address, verify your mobile number, then hand over your credit card details.

> *Note: unfortunately payment info is required even though they won't actually charge you if you stay on the free tier*

Pretty soon they'll send through your access details via email so you can log in. Then you'll get this screen.

![Build your server](https://dev-to-uploads.s3.amazonaws.com/i/6djsph7ge9yvzvpwnbpj.PNG)

Click on **Create a VM instance** and configure your machine.

I switched from Oracle Linux to Ubuntu Linux but other than that I just kept all the defaults. You can change the boot image by clicking **Edit** in the **Configure placement and hardware** section.

![Edit image](https://dev-to-uploads.s3.amazonaws.com/i/ggxbnwymfqx9y4hp99sx.PNG)

**IMPORTANT: SAVE THE PRIVATE KEY**

![Save the private key](https://dev-to-uploads.s3.amazonaws.com/i/4byujr1tqjkvjhhluur2.PNG)

> *You will not get another chance to do this and will not be able to access the server without it*

Click **Create** and your server will spin up!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0y59wxzsj1s6rw2i7smu.PNG)

Repeat this from **Create a VM instance** to get your 2nd free server.

That's it! You can [connect to your new servers via ssh](https://docs.cloud.oracle.com/en-us/iaas/Content/Compute/Tasks/accessinginstance.htm).

Have fun!
FullStack vs PolyGlot
Tags: programming, computerscience, webdev, 100daysofcode
Published: 2020-11-15 03:25:38

You can call yourself polyglot when you are independent. Independent in the sense, you are responsible to answer if anything goes wrong either on server, backend or fronted side. Organization you're working with can assign you whole project without involvement of other dev

You are polyglot if you can handle team of fullstack dev. That means, you have to be fullstack with multiple programming skills. 

Example ⤵️

Fullstack: python(django), react, mysql, aws, linux(ec2)

Polyglot: php, java, python(django), react, mysql, aws, linux(ec2)

Hope this makes clear about these two terms 😀
Code Smell 25 - Pattern Abusers
Tags: oop, tutorial, programming, patterns
Published: 2020-11-15 03:17:11

*Patterns are awesome. With great powers comes great responsibility.*

> TL;DR: Don't abuse patterns.

# Problems

- Over Design

- Readability

# Solutions

1. Measure the tradeoff of patterns usage.

2. Create solutions based on real world names ([essential](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)) over architecture (accidental).

3. Choose [good names](https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd).

4. User [MAPPER](https://dev.to/mcsee/what-is-wrong-with-software-5pa) technique to find [bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) real entities.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/a94aac5dd5fee1e1c19b4b07e87e7887)
```java
public final class FileTreeComposite {
    //name should be inferred from behaviour
}
    
public final class DateTimeConverterAdapterSingleton {
    //
}

public final class PermutationSorterStrategy {
    //
} 

public final class NetworkPacketObserver {
    //
}
    
public final class AccountsComposite {
    //
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/9adec62e0637199e351100eb2ece56f2)
```java
public final class FileSystem {
    // These names map 1:1 to real world concepts
}

public final class DateTimeFormatter {
    //
}

public final class BubbleSort {
    //
}

public final class NetworkSniffer {
    //
}

public final class Portfolio {
    //
}        
```

# Detection

It would be very difficult to create automatic detection rules. 

A class name with more than one pattern on it, is a warning.

# Tags

- Abuser

- Naming

# Conclusion

Chose when to apply a pattern solution. You are not [smarter](https://dev.to/mcsee/code-smell-06-too-clever-programmer-37lb) for using too many patterns. You are smart if you choose the right opportunity for everyone.

# Relations

{% post https://dev.to/mcsee/code-smell-06-too-clever-programmer-37lb %}

{% post https://dev.to/mcsee/singleton-the-root-of-all-evil-50bh %}

# More Info

{% post https://dev.to/mcsee/how-to-decouple-a-legacy-system-30ke %}

{% post https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd %}

# Credits

Photo by <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a> on <a href="https://unsplash.com/s/photos/addict">Unsplash</a>

* * *

>  When you have a hammer, every problem looks like a nail.

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/07/09*
Adding filters to images using CSS
Tags: css, webdev, html, javascript
Published: 2020-11-15 03:11:10

This latest post is related to CSS in which i will add filter to some images purely using CSS. 
Lez get into it.

We'll first see the markup write below and will see the output pics one by one. You'll also get the CodePen link. 😁

### Adding filter to images in CSS

1. Open you code editor and be ready with the pic. 

```html
<div>
  <h1>Original Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

<div class="filt1">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt2">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt3">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

```
nd finally the CSS

```css
img {
  display: block;
  max-width: 100%;
  
}
.filt1{
   filter: grayscale(90%) sepia(13%) saturate(700%); 
}
.filt2{
  filter: hue-rotate(-40deg); 
}
.filt3{
  filter: contrast(170%) saturate(80%) 
}
```
**
Lez see the output**

So first basic image was this

1. Basic image


![dog.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1601517071800/Og-KUSZuf.jpeg)
This was the real pic we've added filter to this pic. 

2. Saturated

![dog1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601518270336/g5lDDa4M9.png)

```css
 filter: grayscale(90%) sepia(13%) saturate(700%); 
```

3. BnW


![dog2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601518408161/3ZPrkEP3Z.png)
```css
  filter: hue-rotate(-40deg); 
```

4. Sharp 😂

![dog3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601518426546/6VvfyNJNm.png)

```css
  filter: hue-rotate(-40deg); 
```
To use CodePen => 

{% codepen https://codepen.io/rahxuls/pen/YzqoPbx %}

<hr>
Thanks for seeing this tutorial. Hope you like it. 
If you have anything going in your mind comment down below. 😎
CLI PROJECT!
Tags: ruby, css
Published: 2020-11-15 03:09:35

I just completed my first CLI ruby project! For my project I chose scraping Bugatti website. So first I scraped the website and all the models I wanted to present in my program. After that I made the scraper file and got to the CLI stuff. This took a while and was pretty challenging, especially because it is a bit different than what an API looks like. After I completed all the files and code for the project I ran my program. In order to run my program you have to bundle install the gems and then in the terminal type "bin/Bugatti_Models" to run it. It will then present you with 5 models to choose from 1-5 and give you a short description. In order to leave the program type "Exit".
 Although there was challenges, lots of patience, google, and a bit of help got me through my first project! Some of the issues I ran into was finalizing the project. For example getting the text in the terminal to output the models in the correct order "1-5" was difficult. I ended up getting some help and researching, although I know little about it I got it done. 
 From this project I learned a lot. A few things I learned was coding is not as easy as you anticipate. I had to restart multiple times and even tried making an API project cause I was stuck on scraping. In the end I learned that although some things such as this can be challenging there is always a way to overcome and figure them out.
Controlled Form Inputs using React hooks 
Tags: react, beginners
Published: 2020-11-15 03:05:21

### Why do you need Controlled Forms?
One reason why someone might use controlled inputs is to validate the input before submission. 

### The overall process of now controlled inputs work
- user types -> calls handleChange -> sets the data based on the name

> NOTE: setName/setUsername/etc are async

### An example of how to implement controlled inputs in react hooks

```javascript
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // Where our state is being stored
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // Everytime input changes we update the state
  const handleChange = (e) => {
    if (e.target.name === "name") {
      setName(e.target.value);
    } else if (e.target.name === "username") {
      setUsername(e.target.value);
    } else if (e.target.name === "email") {
      setEmail(e.target.value);
    } else if (e.target.name === "password") {
      setPassword(e.target.value);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("name: ", name)
    console.log("username: ",username)
    console.log("email: ",email)
    console.log("password: ",password)
  }

  // The value will be based on the state
  return (
    <div className="App">
      <h1>Controlled input</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>name</label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={handleChange}
          ></input>
        </div>
        <div>
          <label>username</label>
          <input
            type="text"
            name="username"
            value={username}
            onChange={handleChange}
          ></input>
        </div>
        <div>
          <label>email</label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={handleChange}
          ></input>
        </div>
        <div>
          <label>password</label>
          <input
            type="password"
            name="password"
            value={password}
            onChange={handleChange}
          ></input>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

```

Thank You for reading! I know that the part where we update the state can be improved to be more DRY, but I just find that the if-else statements make it easy to understand. If you have a better way to implementing that part let me know in the comments. This is usually what I would use when I implement a controlled form input.
The CSS Grid Functionality 
Published: 2020-11-15 02:08:15

Have You Ever Made A grid in CSS format? It makes It think a little more simple if you're used to working in excel.
For example
.box {
display: grid;
grid-template-columns: 50% 50%
grid-template-rows: 50% 50%
}

You can skip all that position display and margin as well as padding if you just set a number in the row or column and put in the exact spot up to the numbers on the template.
.box-child {
grid-row: 2;
grid-column: 2;
} 
This would put it in the second percentage to the right and the second percentage to bottom
Setting Up Eclipse With Plugins On Ubuntu
Published: 2020-11-15 01:22:41

### Vim: 
For a first-timer who sets up java development environment on Ubuntu, one should not use Vim as the primary IDE option even though it is a very powerful tool.  

Initially, after finding a Youtube video titled as Java Programming Using Command Line Tools Only! (vim, curl, and tmux) at https://www.youtube.com/watch?v=zmnlpf4FtkE, I decided to use Vim for Java development on Ubuntu. Since it is recommended to use prettier as my source code formatter, I was very happy to find this Youtube video How to automatically format your code in VIM with Prettier | VIM Tutorial at https://www.youtube.com/watch?v=ellaT6dK780. However, later on, I found out Java is not included in the list that prettier will support in Vim.
	
Then, check out the documentation at prettier.io, and followed the instructions on vim-prettier at https://github.com/prettier/vim-prettier. Unfortunately, my installation failed at the beginning of the instruction, which states:
	To install with vim 8+ plugins, simply clone to your ~/.vim/pack/plugins/start directory, and add packloadall to your .vimrc (if you haven't already).
mkdir -p ~/.vim/pack/plugins/start
git clone https://github.com/prettier/vim-prettier ~/.vim/pack/plugins/start/vim-prettier

.vimrc: packloadall

When Vim option failed miserably, I decided to give another try on SpaceVim at https://spacevim.org/quick-start-guide/. The installation went through very smoothly and I could use it to work on my java project. But the final straw for me to give up on SpaceVim was the failure to configure its layer to java. 

After all the time and energy spent, I finally realized Vim is not a feasible option for my time frame. I abandoned Vim.


### Eclipse

At the very beginning, I was reluctant to a non-linux ide such as Eclipse. As the deadline of my lab is approaching, Eclipse seems the only option I can resort to.

It is a breeze to use install Eclipse on Ubuntu. Integrating Eclipse with a source code formatter and a linter is also very easy. By using Google Java Format as the Formatter.xml file, I set Save Actions options to format all lines of source code via Eclipse's preference for editor. In addition, through Eclipse MarketPlace, I installed Spotbugs plugin as the linter.
Greetings new friends!
Published: 2020-11-15 00:39:50

Me before coding / Me learning to code!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9pbohi5n8urg9sfi1fvu.png)
/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tildpgw7tgiu2ox6ytqp.png)