teleren/devto huggingface dataset:
Configuring Prettier and TypeScript Compiler as a Pre-commit Hook
Tags: typescript, prettier, git
Published: 2019-06-22 21:00:02

---
canonical_url: https://juliangaramendy.dev/blog/prettier-pre-commit-hook
---

We can easily improve our developer experience by:
* Preventing broken code being committed/pushed.
* Avoiding pointless arguments about formatting in our code reviews.

We decided to use [git pre-commit hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) to help prevent "broken" commits.

We started from an existing TypeScript project, but here's a [demo repository](https://github.com/JulianG/precommit-hooks-demo) if you want to have a look.

## 1. Install [prettier](https://www.npmjs.com/package/prettier), [husky](https://www.npmjs.com/package/husky) and [lint-staged](https://www.npmjs.com/package/lint-staged)

```js
yarn add -D prettier husky lint-staged
```
None of these are required at run time so it's important to use `-D` so that the dependencies are added to "devDependencies".

## 2. Configure prettier 

We need to create two files: 
### .prettierrc:

```js
{
  "printWidth": 120,
  "proseWrap": "preserve",
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "trailingComma": "es5"
}
```

### .prettierignore:

```js
node_modules
build
dist
res
coverage
```
You can of course configure this in [any way you like](https://prettier.io/docs/en/configuration.html).

## 3. Create a lint-staged config file: .lintstagedrc:

```js
{
  "**/*.+(js|jsx|css|less|scss|ts|tsx|md)": [
    "prettier --write",
    "git add"
  ]
}
```
This is configured to run prettier and overwrite any **staged files** that match the pattern above and then staging the new changes (if any). 

## 4. Create a husky config file: .huskyrc:

```js
{
  "hooks": {
    "pre-commit": "tsc && lint-staged"
  }
}
```

This is configuring the pre-commit hook. It will run **`tsc`** and then **`lint-staged`** using the configuration files discussed above.

## 5. Success!

Now every time I try to commit, the pre-commit hook will run.
If -for some reason- my code doesn't compile I'll get an error and a chance to fix it before committing.

And I don't have to worry about code formatting because **`prettier`** will format any staged files before committing.

## Demo Repository

I've setup a very basic [repository](https://github.com/JulianG/precommit-hooks-demo) on GitHub as a demo.

----

Photo by [Simon Wilkes](https://unsplash.com/@simonfromengland) on [Unsplash](https://unsplash.com/search/photos/stream)
Do you have your own Gatsby site? Let's brainstorm a dev.to cross-poster
Tags: react, discuss, opensource, productivity
Published: 2019-06-22 20:40:02

---
title: Do you have your own Gatsby site? Let's brainstorm a dev.to cross-poster
cover_image: https://thepracticaldev.s3.amazonaws.com/i/17agn4hvbtp33fmjuelc.png
published: true
description: I'd love it if my blog posts were automatically sent to dev.to - wouldn't you?
tags: react, discuss, opensource, productivity
canonical_url: https://mike.biful.co/gatsby-dev-to-cross-poster-brainstorm
---

So, like all good things, the idea for this post comes from a tweet:

{% twitter  1141182332809940992 %}

This is something I've been ruminating on for a bit.  I've even tried to build it - a few rtimes! I keep starting in on the work and getting lost in the millions of directions I could take it. 

Here's what I'd like: When I publish a new post to [my gatsby site](https://mike.biful.co), I'd like for that post to appear here on dev.to automatically.

# It should:
- recreate my post verbatim, from its original markdown source
- use the `canonical_url` frontmatter field to make sure I retain SEO goodness on my post
- happen without my intervention
- be agnostic of where my posts are coming from.  I use [takeshape.io](https://takeshape.io) as a headless CMS for my site, so my individual posts aren't in source control
- only take posts from my `master` branch, since I use feature branches for draft posts from time to time
- use the [dev.to API](https://dev.to/api), of course


# Nice to have:
- maybe posts should be set to `published: false` at first, so I can preview/review/update them as needed for dev.to?

# Possible approaches for this:
1. Tap into GitHub's webhooks somehow, and fire off a post here 
1. Come from a job kicked off after CI, maybe? I use CircleCI, but would like this feature to be fairly implementation agnostic.
1. Use a [GitHub App](https://developer.github.com/v3/apps/)?
1. or a [GitHub Action](https://github.com/mbifulco/thepraticaldev-crosspost-action)?
1. Perhaps just a lamba function deployed to AWS or [Netlify Functions](https://functions.netlify.com/).

So - here's where I ask for your help.  Surely there's a simple approach here I haven't thought of, or maybe it's a matter of collecting a few scenarios and building something based on 80/20.

What else am I missing here? I'd love your help.  What use cases would you have for a crossposter from your gatsby site? How would you implement it? How can we help each other?
Lesson 7 : Java Control Statements (part 1) :
Published: 2019-06-22 19:54:33

A program normally executes from top to bottom except when we use control statements, we can control the order of execution of the program, based on logic and values.
In Java, control statements can be divided into the following three categories:


##1-  Selection or conditional statements :##

Selection statements allows us to control the flow of program execution on the basis of the outcome of an expression :

 

(if  ,  if - else  ,  if - else - if  ,  nested if-else , switch)


__if :__ 
if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.

 ![Alt text of image](https://1.bp.blogspot.com/-BCFXb2tn3Fo/XQ0btQyQ-iI/AAAAAAAAITk/nCEQkTWoEPIDNR7FWqgz5I3G-tosOuEjACLcBGAs/s1600/4.png)

 ![Alt text of image](https://1.bp.blogspot.com/-EnGyQdSbuHI/XQqXE6vw0iI/AAAAAAAAISw/byf1IsYX874uqXmWzjd8LBgAYV8AcmRxACLcBGAs/s640/1.png)

You can try examples [here](https://www.w3schools.com/java/java_conditions.asp) .

__if-else :__

The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
 ![Alt text of image](https://1.bp.blogspot.com/-TLTUPZjJB2c/XQ0b-xr3DmI/AAAAAAAAITs/0zOac8JtTdEh1bf0RxXmUjg_L3rsG9O3gCLcBGAs/s1600/5.png)
 ![Alt text of image](https://1.bp.blogspot.com/-2jjWxIqRhss/XQ0HJhKnznI/AAAAAAAAITM/_P7iTYieyxkgJjCPUzPERVc-zI4vkFZsgCLcBGAs/s1600/2.png)

You can try examples [here](https://www.w3schools.com/java/java_conditions.asp) .

__if-else-if :__

Here, a user can decide among multiple options. The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.

 ![Alt text of image](https://1.bp.blogspot.com/-aFvwM7dnO1c/XQ0gxBNZduI/AAAAAAAAIT4/6wgdWVUPjigfbXk7PeNHolxP8Bhow0JQQCLcBGAs/s1600/7.png)

 ![Alt text of image](https://1.bp.blogspot.com/-EIa_aZUpnBY/XQ6Alw3baSI/AAAAAAAAIUE/ub_rHI95cyADA8Zc4bSIo9veXpDltI1SgCLcBGAs/s1600/8.png)

You can try examples [here](https://www.w3schools.com/java/java_conditions.asp) . 



__nested if-else :__

in nested if-else we can use one if statement inside another if or else if statement .



__switch :__

The switch statement is a multi-way branch statement . It defines multiple paths of execution of a program . It provides a better alternative than a large series of if-else-if statement .
 ![Alt text of image](https://1.bp.blogspot.com/-03UknxUZ_L0/XQ0acpwCw-I/AAAAAAAAITY/Uc_WgNCFjtweSTj4CjWrK3O9fhJbNuDkwCLcBGAs/s1600/3.png)

You can try examples [here](https://www.w3schools.com/java/java_switch.asp) .
static type JavaScript
Tags: typescript, flow, discuss, javascript
Published: 2019-06-22 19:40:48

---
title: static type JavaScript
published: true
description: typescript or flow?
tags: #typescript #flow #discuss #javascript
---

Has anyone used both flow and typescript? After trying graphql I'm sold on this whole type system and don't know which to go for. Typescript has a lot of hype though but is it really just hype or is it as great as people make it seem.

PS: I don't use vscode so saying one  has a great support for it doesn't do it for me, I'm a sublime person
Installing yay on Arch Linux
Tags: linux, archlinux, opensource
Published: 2019-06-22 19:35:09

[Yay](https://github.com/Jguer/yay) is an AUR helper that you can use as a replacement for yaourt (deprecated). It's not available in the Arch Linux repositories. So If you recently installed Arch, you can follow the instructions in the GitHub repository.

## Installation
First of all, you need to clone the PKGBUILD and run `makepkg` script for building the package.

### Requirements
Git is a dependency of yay and installations from AUR are made through a fakeroot environment, so you need to install both packages. On a new Arch installation, Git and fakeroot are not installed by default, and you also need git to clone the *PKGBUILD* from AUR.

For using `makepkg`, its dependencies need to be installed. You can install the *base-devel* package group which includes `binutills`, `make`, `gcc`, `fakeroot` or install them individually.

Git:
```bash
$ sudo pacman -S git
```

base-devel:
```bash
$ sudo pacman -S base-devel
```

OR

binutils, make, gcc, fakeroot:
```bash
$ sudo pacman -S binutils make gcc fakeroot
```

### Install yay
```bash
$ git clone https://aur.archlinux.org/yay.git
$ cd yay
$ makepkg -si
```

Yay is installed and you can get packages directly from AUR using this helper.
My Unbelievably Long Journey to Make my Personal Website
Tags: showdev
Published: 2019-06-22 19:27:26

---
title: My Unbelievably Long Journey to Make my Personal Website
published: true
description: It took me over 4 years to release my personal portfolio website, here's why.
tags: showdev
---
Like my website, I started this post a while ago but wanted to finish it once I published my website, so this will probably end up with a lot of rambling and absolutely no structure.

I began building my website a few years ago. I wrote some code, then deleted everything countless times, I still have a few .psd and .ai of my half-designed website laying around in my computer. I knew I wasn't going to respect any design I made, so I decided I'd just wing it and go with the flow.

This version of my portfolio, took me around 3 months before I pushed the code to prod, I only wrote code for this project when I felt like it, so not that often. Since I mainly used 2 different computers for this project, I decide to put my project on github and while I was at it, I made the code open source.

One of the main reason I never fully finished mt website is because I lacked personal projects to showcase, I only had my [IE11 death countdown](https://gabriellaroche.dev/ie11-death-countdown/). I wanted to have a few more projects before releasing my website. And the funny thing is that I'm not even looking for work, I just wanted a website because any web developer should have a website I guess.

I wrote the website in PHP, SASS and TypeScript. When I first started this project I wanted to only use HTML5 Pure CSS3 and vanilla JS, but I wanted my site to be bilingual (French and English), so I thought of using JSON files and deal with the translation in javascript and use web components to build the different sections, but then I realized it might not be the best bet for performance and if javascript is disabled, so I decided to use a mixture of PHP and JSON files to deal with the translation (Posts coming to explain this choice). Before choosing JSON to store the translations, I wanted to use [gettext](https://www.gnu.org/software/gettext/) and [Poedit](https://poedit.net/) like we did in school, but that knowledge is so far away and all the tutorials online were unclear. Therefore, I decided to use a less maintanable method using JSON files and PHP.

I apologize for this rambling post, but I had to talk about my journey to make my personal website, you can check it out here : [gabriellaroche.dev](https://gabriellaroche.dev) and the repo right [here](https://github.com/gabLaroche/portfolio). It really feels like a weight has been lifted off my shoulders, it's far from perfect, but I'm happy with the final result and I'm happy I finally finished this project.
Learning NextJs - Day 5
Tags: react, nextjs
Published: 2019-06-22 19:21:07

One of the benefits of render our pages on server side is the ability to get the full control of the whole html that the browser will receive.

Normally there is a section of the HTML that you want to be different for all the pages: the **head** section.

Next have this special component **Head**. It will append all the content you put inside of it to the head html tag once your page is rendered.


```jsx
import Head from 'next/head';

function Home({ users }) {
  return (
    <div>
      <Head>
        <title>Home Page</title>
      </Head>
      <h1>Users</h1>
      {users.map(user => (
        <div key={user.id}>
          <p>{user.name}</p>
          <CustomButtom id={user.id}>Click Me</CustomButtom >
        </div>
      ))}
      <style global jsx>{`
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}
```

Now your home page will include in the html a title tag with the value "Home Page", you actually can verify it using the **view source** option of the browser.
And you can have different values for each of your pages.

```jsx
import Head from 'next/head';

function About() {
  return (
    <div>
      <h1>Welcome to the About Page!</h1>
      <Head>
        <title>About Page</title>
      </Head>
    </div>
  );
}

export default About;
```

### SEO

Since you can add any valid html inside head now you can improve the SEO of your pages. Let's add meta tags to give google, facebook and twitter robots more information about our web.

```jsx
function About() {
  return (
    <div>
      <h1>Welcome to the About Page!</h1>
      <Head>
        <title>About Page</title>
        {/* HTML meta tags */}

        <meta
          name="description"
          content="Hey google, bing, altavista, etc this is my about page, please rank me nice!"
        />
        <meta name="robots" content="index, follow" />
        <meta name="author" content="Eduardo P. Rivero" />

        {/* Twitter meta tags */}
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content="@eperedo" />
        <meta name="twitter:title" content="Learning NextJs" />
        <meta
          name="twitter:description"
          content="Hey twitter users! This is my about page built with NextJs!"
        />

        {/* Facebook meta tags */}
        <meta property="og:type" content="article" />
        <meta
          property="og:title"
          content="Hello Facebook! This is my about page built with NextJs!"
        />
        <meta property="og:site_name" content="Learning NextJs" />
        <meta property="og:url" content="http://localhost:3000" />
        <meta
          property="og:image"
          content="https://picsum.photos/id/607/200/300"
        />
        <meta property="article:published_time" content="2019-06-22" />
        <meta
          property="article:author"
          content="https://facebook.com/my-profile"
        />

      </Head>
    </div>
  );
}

export default About;
```

And of course you can do the same for all the pages of your website.
How to Completely Uninstall MongoDB from Linux?
Tags: mongodb, uninstallmongodb, linux, uninstallmongodbfromlinux
Published: 2020-02-07 08:46:43

---
title: How to Completely Uninstall MongoDB from Linux?
published: true
tags: MongoDB,Uninstall MongoDB,   Linux, Uninstall MongoDB from Linux
canonical_url: https://www.positronx.io/how-to-completely-uninstall-mongodb-from-linux/
---

The post [How to Completely Uninstall MongoDB from Linux?](https://www.positronx.io/how-to-completely-uninstall-mongodb-from-linux/) appeared first on [positronX.io](https://www.positronx.io).

Today we are going to look at how to completely **uninstall MongoDB** from Linux, in order to clean up mongoDB from your system you should remove mongoDB configuration files, data, and logs. This tutorial will help you to remove mongoDB application from your system But remember, before removing mongoDB from your device you must take the backup of your mongoDB data because this process is unreversible.

[click here to read more](https://www.positronx.io/how-to-completely-uninstall-mongodb-from-linux/)
How Do I Keep up with Scala and Java
Tags: java, scala, discuss, productivity
Published: 2019-06-22 18:25:01


For a long time I have been focused on front-end development. I follow a lot of high profile people on social media. I also read blogs and sometimes newsletters. My focus is slowly shifting from front-end to back-end development. At my job, we write a lot of Scala and Java. I really want to become better at these languages.

Do you know any high profile Scala or Java developers? 
Can you recommend any good blogs on these languages?

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I really want to be better at <a href="https://twitter.com/hashtag/Scala?src=hash&amp;ref_src=twsrc%5Etfw">#Scala</a>. Do you know any good blogs or people to follow? <a href="https://twitter.com/scaladays?ref_src=twsrc%5Etfw">@scaladays</a></p>&mdash; Steffen Pedersen 🌚 (@mrsteffenp) <a href="https://twitter.com/mrsteffenp/status/1139850060794138626?ref_src=twsrc%5Etfw">June 15, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
How do you handle imposter syndrome or thoughts about changing careers?
Tags: discuss, career, impostersyndrome
Published: 2019-06-22 18:23:41

How do you handle the moments when you feel like you're not qualified to be in your industry? And/or it makes you feel like you want to change careers away from being a developer full time to something else tech related but don't know what.

I think a lot of us have had these feelings, myself included pretty recently. With imposter syndrome I try to remind myself how far I have come. Remembering those moments when I realized I wasn't a newbie anymore because I was able to help people with issues I used to have problems with. Or that I've been able to solve other technical challenges like clean code/architecture, theory, language issues, planning, soft skills, etc. 

But sometimes that imposter syndrome is a pain.

For me, at times it's made me think I should change careers, even if it was other IT related fields. To be fair, this has made me more interested in things like devil's, not because that isn't hard too, but it's just different. 

So I though I would lose the question on how others have handled these problems in their career.
Video of one hour of assembly programming.
Tags: asm, productivity
Published: 2019-06-22 17:55:29

Here is a video of one hour of my assembly language programming session.

Very often, when I am discussing about assembly language programming, I have some feeling, that the opponents simply can't imagine the whole process and think that it is some kind of very different (and very hard!) from other languages. 

So, I decided to make a screencast of my programming process in order to give a general idea about what programming I am writing in my posts.

This video shows implementation of multiple files open through the file open dialog in Fresh IDE v3.x project.  

Actually it is a work on two projects simultaneously: The GUI toolkit of FreshLib (the file dialog and the components TGrid and TListView) and the Fresh IDE itself (which is in very early stage and I am using it mainly as a test project for the GUI toolkit.

The GUI toolkit uses OOP macro library of FreshLib, so, some of the instructions used may look a little bit strange. 

Unfortunately, a lot of the process remains behind the camera - in my head. So, some of you can find the video a little bit boring. But hope you will like the music if not the video.

{% youtube yeSN2mFiAz8 %}
Install PyTorch on Mac by pip
Tags: pytorch, python, mac, pip
Published: 2019-06-22 17:27:35

---
title: Install PyTorch on Mac by pip
published: true
description: Install PyTorch on Mac by pip
tags: #PyTorch #python #Mac #pip
---

# Overview

1. Install PyTorch on Mac OS X 10.14.4
1. Check whether it works.

---

# Environment

- Mac OS X 10.14.4 Mojave
- [oh-my-zsh](https://dev.to/berry_clione/switch-from-bash-to-zsh-and-install-oh-my-zsh-on-iterm2-18d9)
- [Homebrew 2.1.6 (git revision 0d363)](https://dev.to/berry_clione/install-homebrew-on-macos-mojave-4m3m)
- Python 3.7.2
- [anaconda3-5.3.1](https://dev.to/berry_clione/install-anaconda-into-mac-os-x-mojave-and-add-library-4fdh)
- pip 19.1.1

---

# How to install PyTorch

- [PyTorch official](https://pytorch.org/get-started/locally/) says you can install PyTorch by conda if you already have Anaconda.
- But conda may just fetch package which already build, while pip may build package after getting a wheel compatible with installation environment, so performance may differ.
    - I'm not so sure. Log may make it clear.
- Then, use pip to install PyTorch

```shell
$ pip3 install torch torchvision
Collecting torch
  Downloading https://files.pythonhosted.org/packages/95/80/0851d6088bb054be3ddf47bfde1aedb4e1cbd170cf8e1c60cad321b97162/torch-1.1.0.post2-cp37-none-macosx_10_7_x86_64.whl (88.1MB)
     |████████████████████████████████| 88.1MB 604kB/s
Collecting torchvision
  Downloading https://files.pythonhosted.org/packages/af/7c/247d46a1f76dee688636d4d5394e440bb32c4e251ea8afe4442c91296830/torchvision-0.3.0-cp37-cp37m-macosx_10_7_x86_64.whl (231kB)
     |████████████████████████████████| 235kB 894kB/s
Requirement already satisfied: numpy in /Users/foo/.pyenv/versions/anaconda3-5.3.1/lib/python3.7/site-packages (from torch) (1.15.1)
Requirement already satisfied: pillow>=4.1.1 in /Users/foo/.pyenv/versions/anaconda3-5.3.1/lib/python3.7/site-packages (from torchvision) (5.2.0)
Requirement already satisfied: six in /Users/foo/.pyenv/versions/anaconda3-5.3.1/lib/python3.7/site-packages (from torchvision) (1.11.0)
Installing collected packages: torch, torchvision
Successfully installed torch-1.1.0.post2 torchvision-0.3.0
```

- Check if PyTorch works well.

```python
from __future__ import print_function
import torch
x = torch.rand(5, 3)
print(x)
```

- Result

```python
tensor([[0.7747, 0.9627, 0.1806],
        [0.9219, 0.1319, 0.9026],
        [0.6719, 0.6495, 0.5341],
        [0.6629, 0.4546, 0.7309],
        [0.3577, 0.8918, 0.8544]])
```

- Check if GPU CUDA is available

```python
import torch
print(torch.cuda.is_available())
```

- If CUDA is not available, result shows below

```sh
False
```