teleren/devto huggingface dataset:
Creating vite vue ts template: Install eslint
Tags: typescript, prettier, eslint, vue
Published: 2021-07-27 16:47:00

## Install eslint and setup default config files

1. Install eslint with typescript.
    ```console
    $ npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
    ```
1. Create eslint config file `touch .eslintrc.js`
1. Edit `.eslintrc.js` to look like this.

    <!-- prettier-ignore -->
    ```javascript
    module.exports = {
      root: true,
      parser: '@typescript-eslint/parser',
      plugins: [
        '@typescript-eslint',
      ],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
      ],
    }
    ```

1. Create eslint ignore file `touch .eslintignore`
1. Edit `.eslintignore` to look like this.
    ```gitignore
    # don't ever lint node_modules
    node_modules
    # don't lint build output (make sure it's set to your correct build folder name)
    dist
    # don't lint nyc coverage output
    coverage
    ```
1. Add `"lint": "eslint . --ext .js,.jsx,.ts,.tsx"` to `"scripts"` section in `package.json`
    ```json
    {
      ...,
      "scripts": {
        ...,
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
      },
      ...
    }
    ```
1. Run `npm run lint`

    ```console
    $ npm run lint

    > vite-vue-typescript-starter@0.0.0 lint
    > eslint . --ext .js,.jsx,.ts,.tsx


    /path/to/project/vue-ts/.eslintrc.js
      1:1  error  'module' is not defined  no-undef

    ✖ 1 problem (1 error, 0 warnings)
    ```

1. First, let's commit what we already've done `git add .`
1. `git commit -m 'install eslint with typescript`

### Fix `error 'module' is not defined no-undef`

1. From [docs](https://eslint.org/docs/rules/no-undef#environments)

    > For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments.

1. Fix previous error by editing `.eslintrc.js` to look like this.
    ```diff
     module.exports = {
       root: true,
    +  // https://eslint.org/docs/rules/no-undef#nodejs
    +  env: {
    +    node: true,
    +  },
    ```
1. Run `npm run lint`
1. `git add -u`
1. `git commit -m "fix: error 'module' is not defined no-undef"`

## Links

-   https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/
-   https://eslint.org/docs/user-guide/getting-started
-   https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md

### Links for `error 'module' is not defined no-undef`

-   https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments
-   https://eslint.org/docs/rules/no-undef#nodejs
-   https://stackoverflow.com/a/62335842/3627387
-   https://stackoverflow.com/a/63512242/3627387

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
Developer First Culture & Collectives at Stack Overflow w/ Ben Matthews
Tags: devops, culture, management, stackoverflow
Published: 2021-07-27 16:44:33

If you’ve ever written code you’ve probably heard of Stack Overflow.

Most of us have learned from them or shared knowledge on their site. They’ve also got one of the most inclusive and positive engineering cultures out there.

On this week's episode of [Dev Interrupted](https://open.spotify.com/episode/54GeeR80VdGjiXwenLnDzc) we've brought on Ben Matthews, Director of Engineering at Stack Overflow, to give us the inside scoop on Stack's operations, teams and company culture. Ben also discusses their newest product launch - **Collectives** - and why he thinks they will be a game changer for dev teams.  

#**Listen to the full episode**
{% spotify spotify:episode:54GeeR80VdGjiXwenLnDzc %}


#**Episode Highlights include:**
* Stack Overflow engineering: a developer-first culture
* Leading with empathy and empowering developers
* Hiring the right devs
* Onboarding with purpose
* Team composition and organization
* Enabling work-life balance and maintaining team morale by actually caring: and requiring time off

#**YouTube Highlights:**
{% youtube O873vxozamw %}

{% youtube 5rRsbb75Oqg %}

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.com/invite/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrzc51hhz30s20dxabmw.png)
Lost In The Job Hunt
Published: 2021-07-27 16:41:17

## Where it Started

June 25,2021, the entire cohort graduated from Lambda School. It was a night to really remember, shoutouts, networking and much more. We all were super excited and couldn’t wait to begin the job hunt with our new found skills. 

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

HTML, CSS, JavaScript, ReactJS, NodeJS, Python, along with other material. We’re ready to hit the streets as Full Stack Web Developers. Well, it may seem that way, right?

## The struggle 😭

This is where things started taking a turn. 

It is now a month later and with, what seems like, hundreds of applications, the only response that is given is rejection after rejection. No interviews, no human responses, not even a quick email to gain more information. 

So now I’m lost and feel like just giving up on the whole thing entirely. It’s very discouraging to receive rejection after rejection and, almost, makes me want to just through my hands up and say “screw it!”.

## So why am I still here? 🤔

Even though I’m not landing that job, or even that dream job, I still have a deep passion for development. I really enjoy sitting down and making things for the world to see. No matter what it is I don’t think I could ever just throw my hands up and say I’m done. 

I have a family that depends on me and I know that this is something that I want to do for a living for a long, long, time. 

So despite feeling absolutely lost, I would like to know what YOU think. What thoughts do you have when it comes to landing that interview or even that job? Would love to hear what your thoughts and opinions are in that matter.
FINDING MAXIMUM OF 3 NUMBERS USING RAPTOR
Published: 2021-07-27 16:40:17

RAPTOR:
RAPTOR (Rapid Algorithmic Prototyping Tool for Ordered Reasoning) is a flowchart-based
programming environment, designed specifically to help students visualize their algorithms.
RAPTOR programs are created visually and executed visually by tracing the execution through
the flowchart. Required syntax is kept minimum. It was designed by Martin C. Carlisle in 2015.
RAPTOR is written in a combination of C# and A# (a port of Ada to the .NET Framework)
and is only supported on Windows. Raptor requires JDK to launch


Operators:
An operator directs the computer to perform some computation on data. Operators are placed
between the data (operands) being operated on (i.e. X / 3, Y + 7, N < M, etc.)
Basic math operators:
+, -, *, / : +, -, *, / are defined as one would expect
** and ^ : exponentiation, Example: 2**4 is 16, 3^2 is 9
rem, mod : rem (remainder) and mod (modulus) return the remainder (what is left over)
when the right operand divides the left operand, ex 10 rem 3 is 1, 10 mod 3 is 1
Concatenation operator (+) : Joins strings and numbers (i.e. “Average is ” + (Total /
Number))
The following operators are only used in decisions
Relational operators
(=, !=, /=) : Used to compare numbers and strings, = is equals, != and /= are both not
equals.
<, >, >=, <= : These are defined as expected. The result of a relational comparison is a
Boolean value.
Logical operators
and, or, not, xor
Precedence levels of Operators from lowest to highest:
[=, <, <=, >, >=, /=, !=], [+, -], [*, /, rem, mod], [**,^]

Algorithm:
Algorithm is a set of finite steps to accomplish a task. The Algorithm designed
are language-independent, i.e. they are just plain instructions that can be implemented in any
language, and yet the output will be the same, as expected.
We often know and implement many algorithms in our daily life like for example making tea,
going to college from home, finding prime numbers between 1 to 100, google search, Building
rocket to make it go to space etc

Algorithm to find the maximum 3 numbers:
step 1: start
step 2: enter the first number get a
step 3: enter the second number and get b
step 4: enter the third number and get c
step 5: put a condition if a>=b AND a>=c
step 6: then if yes put "a is the largest one"
step 7: if it is no put condition b>a AND b>c
step 8: if it is yes put " b is the largest one"
step 9: if it is no put " c is the largest one"
step10: End

Name: SiriUppula
Work from Home experience amid lock-down
Published: 2021-07-26 05:37:12

Being fresher it is my first ever coincidence to continue the work, that I used to do in office premise, from my room. yes the room, I will not say from the ‘home’ because I use to share a flat of three rooms with my 4 friends.

When we first heard about the lockdown that was going to be implemented throughout the country from the very next day and we were asked to carry our system and essential peripherals along with us, that moment was quite surprising and uncommon for all of us.
Minds of freshers like me were full of questions and confusion that how would this all be done?

We were coordinated by our seniors not just at that time of confusion but even after that whenever it is required till today and now everything seems to be as normal as it used to be in the office. We are still in lockdown and My bedroom has become my cubicle now, Plates from my kitchen have replaced my lunch box. Although we are in touch with our colleagues socially and maintaining physical distancing. The only thing that I miss is the direct interaction with them and I am sure nothing can replace this.

We are lucky enough that we can work from home as well. In the present situation of coronavirus epidemics, where many industries have to stop their work, work from home culture has proven as a boon to our industry and organization. Anyways Working from the home is not going to affect those organisation who measure productivity by objectives and not by how long we are visible in our work stations.

Hope things will get normal soon and we all get together once again under the same roof and with the same smile.
New Feature: Contents Publish Box Support Visual Web Editor | WYSIWYG HTML Editor
Published: 2021-07-27 16:35:10

We are so glad to announce that Kunming.io now supporting Visual Web Editor on Contents Publish Box, And it so easy to use! Every member can publish contents directly through Contents Publish Box with articles, videos, audios, photos, code snippets, run code output/results, blog posts, etc. So please come and post whatever you want with your company blogs, product informations, personal articles, individual videos, musician audios and so on and enjoy with contents publish worldwide.

Visual Web Editor | A WYSIWYG is an editor that allow content creators to preview the end results before the actual interface or document is made live. The full form of WYSIWYG is "what you see is what you get". This type of software allows you to edit content in a form so that it looks same when displayed or printed.

Now let's try it: https://kunming.io/signup

{% youtube wRJoVTF44Y0 %}
POLYMORPHISM IN PYTHON


Published: 2021-07-27 16:27:43

Polymorphism means multiple forms. In python we can find the same operator or function taking multiple forms. It also useful in creating different classes which will have class methods with same name. That helps in re using a lot of code and decreases code complexity. Polymorphism is also linked to inheritance as we will see in some examples below.

Polymorphism in operators
The + operator can take two inputs and give us the result depending on what the inputs are. In the below examples we can see how the integer inputs yield an integer and if one of the input is float then the result becomes a float. Also for strings, they simply get concatenated. This happens automatically because of the way the + operator is created in python.

Example
a = 23
b = 11
c = 9.5
s1 = "Hello"
s2 = "There!"
print(a + b)
print(type(a + b))
print(b + c)
print(type (b + c))
print(s1 + s2)
print(type(s1 + s2))
Running the above code gives us the following result −

Output
34
20.5
HelloThere!
Polymorphism in in-built functions
We can also see that different python functions can take inputs of different types and then process them differently. When we supply a string value to len() it counts every letter in it. But if we five tuple or a dictionary as an input, it processes them differently.

Example
str = 'Hi There !'
tup = ('Mon','Tue','wed','Thu','Fri')
lst = ['Jan','Feb','Mar','Apr']
dict = {'1D':'Line','2D':'Triangle','3D':'Sphere'}
print(len(str))
print(len(tup))
print(len(lst))
print(len(dict))
Running the above code gives us the following result −

Output
10
5
4
3
Polymorphism in user-defined methods
We can create methods with same name but wrapped under different class names. So we can keep calling the same method with different class name pre-fixed to get different result. In the below example we have two classes, rectangle and circle to get their perimeter and area using same methods.

Example
from math import pi

class Rectangle:
   def __init__(self, length, breadth):
      self.l = length
      self.b = breadth
   def perimeter(self):
      return 2*(self.l + self.b)
   def area(self):
      return self.l * self.b

class Circle:
   def __init__(self, radius):
      self.r = radius
   def perimeter(self):
      return 2 * pi * self.r
   def area(self):
      return pi * self.r ** 2

# Initialize the classes
rec = Rectangle(5,3)
cr = Circle(4)
print("Perimter of rectangel: ",rec.perimeter())
print("Area of rectangel: ",rec.area())

print("Perimter of Circle: ",cr.perimeter())
print("Area of Circle: ",cr.area())
Running the above code gives us the following result −

Output
Perimter of rectangel: 16
Area of rectangel: 15
Perimter of Circle: 25.132741228718345
Area of Circle: 50.26548245743669
What happened after completing the #100DaysOfCode challenge
Tags: 100daysofcode, codenewbie, productivity
Published: 2021-07-27 16:20:54

# Why I started
I'm currently studying a Software Engineering degree in México. I was having so much trouble to stay motivated with school. The education isn't that bad, but the problem is that they mostly focus on theory and we barely develop software.

I decided to start learning web dev by myself. I already knew programming, SQL Databases and some HTML/CSS, so that was a really good starting point. 

![motivation gif](https://media.giphy.com/media/XHjniwBKPxhnykNYno/giphy.gif)

My main goal was to end up doing a few full stack applications. Did I achieve it? Keep reading for the outcome 

# Struggling in the process
![struggle gif](https://media.giphy.com/media/l0K4hqqqwgFijgVLa/giphy.gif)

During the journey I struggled a lot with motivation, college really shut me down, and lots of times I felt like I wasn't achieving anything, but in the last 30 days I learned a good lesson...

# The real goals
...I discovered that we commonly miss-understand motivation. We think that we should always stay motivated, but that's impossible, therefore, it's a really bad idea to rely on motivation.

> Build habits and drop bad ones. Make discipline your fuel. Motivation is just a boost!

The real goals of the challenge are:
* Build habits that allow you to achieve what you want
* Connect with other people, it doesn't matter if they're code newbies or seniors
* Make progress on specific topics

![Twitter post - 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627401342510/SQz0UhIhR.png)

# What I've achieved
* I manage to learn VueJS, Tailwind and Django, all at a basic level of course. 
* Made multiple HTML/CSS or Bootstrap websites
* Started freelancing
* Made a fulltsack app that is a reddit clone with a new design. Check it out on https://microdit.ml

# Next steps
Now that I've started freelancing I want to focus on building a successful business and an online presence, but most importantly, to connect with people all over the world.

# Tips for people starting the Challenge
* Count only coding days. I've seen people counting days where they don't code, but I think it would be more satisfying to complete the challenge with 100 coding days.
* Be flexible with your plans and don't worry if they don't come up as you wanted. Keep moving forward.
* Learn to learn. School has given us a bad approach to learn practical skills. Learn by doing.
* Most importantly, enjoy the process

I wish you a good journey and hopefully you get where you want to.

![hi five](https://media.giphy.com/media/ErZq6qTDdHigheeXGt/giphy.gif)
#9) Explain HOF in JavaScript❔
Tags: javascript, webdev, beginners, career
Published: 2021-07-27 16:03:18

##`🔰HOF: Higher Order Function`
✅HOF is a function that that operates on other function, either by accepting functions as arguments and/or returning a function.

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

⚠`For example, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.`
__________________________________________________________________
Pure CSS checkboxes with one element
Tags: tutorial, beginners, css, checkboxes
Published: 2021-07-27 15:58:34

Here is a Pure CSS checkbox with only one element. It’s also accessibility friendly.

## HTML
```html
<input type="checkbox" data-name="Item 3" class="checkbox">
```

## The CSS
```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

.checkbox {
    appearance: none;
    height: 100px;
    width: 100px;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(37, 145, 251, 0.98) 0.1%, rgba(0, 7, 128, 1) 99.8%);
    background-size: 360% 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.checkbox:after {
    content: attr(data-name);
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-family: "Inter", sans-serif;
    color: #3f3f3f;
    z-index: 99;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.checkbox:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0px;
    height: 200%;
    width: 200%;
    background: #e9e9e9;
    z-index: 0;
    transition: all 0.2s linear;
    transform: scale(0.6) translate(-50%, -50%);
}
.checkbox:hover:before,
.checkbox:focus-visible:before {
    background: #cacaca;
    top: -4%;
    left: 20%;
}
.checkbox:checked:before {
    opacity: 0;
    transform: scale(0.9);
}
.checkbox:checked:after {
    color: white;
}
.checkbox:checked {
    box-shadow: 0px 4px 10px -6px black;
}

.checkbox:focus-visible {
    outline: none;
    box-shadow: 0px 0px 0px 5px #480f5d;
}
```

## Result

{% codepen https://codepen.io/Tronic247/pen/ZEKrwOj %}
Creating vite vue ts template: Install prettier
Tags: vite, vue, prettier
Published: 2021-07-27 15:55:34

## Install prettier and setup default config files

1. Install prettier `npm install --save-dev prettier`
1. Create prettier config file `touch .prettierrc.js`
1. Edit `.prettierrc.js` to look like this.
    ```javascript
    module.exports = {
      semi: false,
      singleQuote: true,
      trailingComma: 'es5',
    }
    ```
1. Create prettier ignore file `touch .prettierignore`
1. Edit `.prettierignore` to look like this.
    ```gitignore
    # Ignore artifacts:
    dist
    coverage
    ```
1. Add `"format": "prettier --write ."` to `"scripts"` section in `package.json`
    ```diff
       "scripts": {
         ...,
    -    "serve": "vite preview"
    +    "serve": "vite preview",
    +    "format": "prettier --write ."
       },
    ```
1. Run `npm run format`
1. `git add .`
1. `git commit -m 'install prettier'`

## Links

-   https://prettier.io/docs/en/install.html
-   https://prettier.io/docs/en/configuration.html
-   https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore
-   https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
Creating vite vue ts template: Create vite project
Tags: vite, vue, typescript
Published: 2021-07-27 15:23:46

## Create vite project

1. Create vite project from `vue-ts` template
   `npm init vite@latest vite-vue-typescript-starter -- --template vue-ts`
1. Move contents of created folder into root of repo.

    ```console
    $ mv vite-vue-typescript-starter/* vite-vue-typescript-starter/.gitignore .
    $ rmdir vite-vue-typescript-starter
    ```

1. `git add .`
1. `git commit -m 'npm init vite@latest . -- --template vue-ts'`

## Links

-   https://vitejs.dev/guide/#scaffolding-your-first-vite-project

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
Why tabs are better than spaces
Tags: beginners, code, editor, redpill
Published: 2021-07-27 15:20:31

#### Background

I've been writing code for over 20 years in several languages and all types of editors, including: Notepad, Visual Basic, Dreamweaver, TextMate, Coda, Sublime, Xcode, Visual Studio, and others.

For the majority of that time, I've been pretty adamant about **4 spaces**.


### Why I might be changing my mind

In very recent years, the popularity of a few frameworks has spawned a rise in cases of 2-space indentation. In my opinion, this level of indentation is too low and creates confusion. My assumption is that 2-space indentation was adopted to save horizontal real estate, but I'm not entirely sure why that would be required.

After all, if your code has to be indented to the point it becomes unreadable, you likely have other code-related issues to fix. In fairly broad strokes (⚠️), you have indentation for the following:

```
namespace
    class
        function
            conditional
                loop
                    logic
```

There's more than enough room to keep code within an 80 character margin with a 4-gap indentation even at 6 levels.

#### But why tabs?

I'm not on a mission to stop people from writing 2-gap indentation. **If that's what you like, that's what you like.**

When I write my code, I want to see 4-gap indentation even if I'm sharing the codebase with 2-gappers. This creates a problem because formatting the file will add/remove spaces on every line to meet indentation levels which causes your `git diff` to change virtually every line; unreasonable and irresponsible!

✅ **Tabs make more sense** because each individual tab represents one logical level of indentation.

You may have noticed I changed my terminology in this article to say "2-gap" rather than "2-space" and that's because it's the visual representation of space that matters; not the actual character. *Even though spaces require more disk space.*

Within your editor, you can change the visual representation of a tab:

![Sublime Text Tab Representation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb3tfcr86u90szhky2hd.png)
 
You can still get your 2-gap, 4-gap, 8-gap indentation level using tabs while working seamlessly with other developers. If Johnny is using 2-gap tabs, I'm using 4-gap tabs, and Maria is using 8-gap tabs... none of the actual characters change in our commits even though we can all feel comfortable with our preferred indentation sizes.

### TL;DR

- Each tab (_\t / 0x09_) represents one level of logical indentation, rather than having to compute/reduce spaces as a representation of indentation.

- Tabs allow multiple developers to use their own indentation preferences without overriding formatting of others.

- Forcing spaces of your own preference onto the other members of your team is a bit selfish.