teleren/devto huggingface dataset:
Prettifying JSON using Vim, Python & Bash
Tags: python, bash, vim, linux
Published: 2020-12-22 14:51:28

---
title: Prettifying JSON using Vim, Python & Bash
published: true
date: 2020-12-22 00:00:00 UTC
tags: python,bash,vim,linux
canonical_url: https://bhupesh.me/prettifying-json-files-using-bash-python-vim/
---

So I recently switched my editor to Vim (last month to be exact), I will probably post my experience sometime later on. If you are interested I am documenting my vim journey (or cheatsheet) [**here**](https://github.com/Bhupesh-V/til/blob/master/Miscellaneous/my-vim-cheatsheet.md).

Let me show you how to combine the 3 most powerful tools I use in my daily workflow to achieve this. Note that this post is only for users who are on \*nix environments because they probably have Bash, Python & Vim installed anyways.

So the heavy lifting is done by Python’s JSON CLI tool

```bash
$ python3 -m json.tool ugly.json
```

This will print the JSON files in a nice readable format, you can also sort key using the `--sort-keys` argument

Ok then that’s settled we now just need to redirect the output to the same file. Let’s write a small bash function to make this portable. Open your `.bashrc` or `.bash_functions` & put this bad boy in!

```bash
pj() {
    # prettify json using python3
    if [[-z "$1"]]; then
        echo "No file path"
        exit 1
    fi
    pretty_json=$(python3 -m json.tool "$1") && echo "$pretty_json" > "$1"
}
```

Cool, now you can just do `pj ugly.json` to do the work.

If you had like an in-editor solution, all you need to do is add this in your `vimrc` or `init.vim`

```vim
:command Pretty !pj %:p
```

This will create a Vim `Ex` command called Pretty which invokes our external bash function. `%:p` gives us the full path of the file in the buffer.

That’s it, Everything is Sexy now. Invoke the `:Pretty` command on your current buffer & `pj` will do its job.

![prettify-json-in-vim](https://drive.google.com/uc?export=view&id=1ZMGVYbc5hHfBxtlQLLSr_K6kaox8Indj)

> Always know your tools. Master the fuck outta them!

What’s the use if I have a plugin?

Well, I love plugins too but I know this is a very simple thing to do & can be easily achieved using things I already know, so why install an external plugin?

Wait not everything is lilies and roses. This might not be very efficient for large JSON files. Let me know if the reader finds a better way to do it.

> Seems interesting?, [Subscribe 🚀](https://buttondown.email/bhupesh) to read more such cool stuff or just connect with me on [Twitter](https://twitter.com/bhupeshimself).
Feedback and Performance Reviews
Tags: management, feedback, career, communication
Published: 2020-12-21 23:56:14

Hi all,
With performance review season coming up, I wanted to share a series of blog posts I wrote in the past few months about receiving feedback. I spent hours on every post, drawing inspiration from books I've read, conferences I've attended, and my own experiences engaging in difficult conversations. I hope you find them useful.

[Part 1: Receive Better Feedback by Asking](https://smallbigideas.substack.com/p/own-your-feedback-part-1) - describes why and how to ask for feedback

[Part 2: Listen, Lead, and Grow](https://smallbigideas.substack.com/p/own-your-feedback-part-2) - describes how to listen and ask questions during a feedback conversation

[Part 3: Preparation Makes Perfect](https://smallbigideas.substack.com/p/preparation-makes-perfect) - describes how to prepare for a feedback conversation to get the most out of it.

[Part 4: You Are Not a High-Performer](https://smallbigideas.substack.com/p/you-are-not-a-high-performer) - describes how feedback can be challenging to receive because it challenges our labels.
Salmon Run Statistics (Part 1)
Tags: python, showdev
Published: 2020-12-21 23:29:03

| [Next](https://dev.to/cassdlcm/salmon-run-statistics-stages-part-2-34cn)

Hi, Cass here.

I'm the developer of [Salmon Tracker](https://github.com/cassdelacruzmunoz/salmontracker), a toolkit for performing statistical analysis on the Salmon Run game mode of the Nintendo Switch game Splatoon 2.

Here's an intro to what my tool does and some of the cool things I've found.

First off, let's go through an overview of the data set.
> Jobs: 295255
> Average Waves: 2.2568457773788757
> Clear %: 57.90689404074444
> Wave 2 %: 77.00089752925438
> Wave 1 %: 90.77678616788878
> Golden: 16.685295761291087 (0.0, 16.0, 133.0)
> Power Eggs: 632.864202130362 (0.0, 614.0, 3722.0)
> Rescued: 2.2307564647508085 (0.0, 2.0, 59.0)
> Deaths: 1.624947926368732 (0.0, 1.0, 23.0)
> Hazard Level: 154.71349375961694 (4.4, 158.4, 200.0)

This overview was generated by the following code:
```Python
data = core.init("All")
print(core.getOverview(data))
```
Core is the main file of the library, containing functions to prepare the data, as well as fetch parts of the data efficiently.
The `init` function in core pulls the latest match results from the stat.ink API and stores it in either `"salmon.jl.gz"` or `"salmonAll.jl.gz"` depending on whether the mode is set to `"All"` or `"User"`. `"User"` mode requires providing an API key.
`getOverview` takes in one parameter, the path to the data file, and outputs that nice stat summary you see above.

At time of writing, the data set takes up 255 MB with gzip compression, or approximately 6 GB uncompressed.

The library uses jsonlines formatted data stored in gzip files to get around memory limitations.

Next post, I'll cover the hypothesis testing, and show just how powerful the Grizzco weapons are.
Barinsta: The Open Source Instagram Client
Tags: android, instagram, java, app
Published: 2020-12-21 23:09:07

Since someone [did mention our app](https://dev.to/justinhodev/comment/15kml) on this platform, I figured that I might as well make a central post.

Anyway, for those who don't know what Barinsta is: It is a (and the only, as of now) FOSS Instagram client. It is designed to be more useful while less addictive. It promotes responsible use of social media while giving users a bit more control on privacy. It is available on [F-Droid](https://f-droid.org/en/packages/me.austinhuang.instagrabber/).

{% github austinhuang0131/barinsta no-readme %}

Obviously dev.to seems to be a high-end blog-like platform, so no more babbling about features.

## The Backstory

Barinsta is the reincarnation of the abandoned [InstaGrabber](https://gitlab.com/AwaisKing/instagrabber) project, which is an open source Instagram downloader. At that time, I discovered F-Droid, and started replacing most apps with their open source counterparts (eg. [Frost](https://github.com/AllanWang/Frost-for-Facebook), [Infinity](https://github.com/Docile-Alligator/Infinity-For-Reddit), etc). Due to the pandemic, I also became concerned over my social media use and gradually started to drop my Instagram usage. So InstaGrabber, which still allows me to access posts, stories, and DMs, while stripped of other useless features, seems to be a good choice.

Unfortunately, it had quite some bugs, and it is abandoned by the original developer. Given my programming experience and also desire to learn Java (I had no experience prior to this), I decided to give it a try. I made some small hotfixes and gained the trust from the community. I officially started the reincarnation project (at that time still called InstaGrabber) a month later, which was then rebranded to Barinsta. So I guess I made my first app!

## Today

There is great demand for using open source apps to access proprietary social media platforms (After all, open source platforms are not that popular and it's hard to move people over). As well, the official Instagram app is quite bloated, which is further tainted by Facebook's track record on privacy. As Barinsta fills that huge void in the market, it received quite some attention. I was able to get another developer on board. Together, the UI is greatly improved, and with new features, we're on track to become a full-fledged Instagram client.

**We also need new maintainers!** If you think you're good at Java and want to contribute to the great cause, come join us!

## Future

Facebook, notorious for invading privacy, now faces many legal challenges over their business dealings. The general population cannot wait for political action - We must act with our phones. However, simply rejecting Instagram could risk friendships and cause distress ([FOMO](https://en.wikipedia.org/wiki/Fear_of_missing_out)). Rather than trying to enforce a hard boycott, Barinsta aims to gradually change people's behaviour for the better.

Ask any questions below!
Does MDX make Markdown Dirty?
Tags: nextjs, mdx, javascript, discuss
Published: 2020-12-21 23:08:33

I am sitting here trying to decide if it is wrong to embed my images/videos in markdown using an MDX component or keep the Markdown "pure" so that it will be able to be read fully on GitHub and DEV (dev.to). Anyone have thoughts on this, should i keep all of the main video/thumbnail of a blog in a separate frontmatter area, or just start adding all the components, similar to how DEV uses liquid tags?

With the front matter I will still need to parse the front matter and most likely store it in Firestore as a item anyways like below

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

If you have ever uploaded a photo on DEV it immediately gives you the markdown to insert after loading up to S3 like below. This is cool and makes sense for an image that doesn't need to lazy load on the web, and actually we leverage Cloudinary so it handles some of this for us on the new CodingCatDev site. But it is also nice for an end user to not load this image on page load and instead use a loading image like on Gatsby (which will soon be available on Next.js).

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

Now the goal is to have lessons that will allow you to stay within the same course. To me this means there is a main video that you will want, but again should this be done in an MDX component at the top, or in the world of react would it make more sense to pass the stored video from the frontmatter over to a prop where the video already lives. For other videos within the lesson or Blog I think it makes total sense to have that in the MDX we store. So we can do cool stuff like below.

https://media.codingcat.dev/video/upload/v1608592157/Dev.to/Screen_Recording_2020-12-21_at_6.01.35_PM.mov

I love everything about MDX and want to use it, but what are the long term ramifications of putting components in markdown?
Looking for Angular Debugging Help
Published: 2020-12-21 22:54:18

I am looking for a good place to post questions about Angular development and structure that I can't seem to grasp from tutorials alone.

I can't seem to ask basic questions about web development on StackOverflow.com because my reputation is too high. I get a few downvotes, and nobody looks at my questions.

We have a big project here that we are taking over, and I need a way to just get questions. It seems odd that I haven't found any decent forums on Angular.

Right now, I am trying to import data to create Entities. The button calls a javascript compare routine that is throwing out the message, "Error: Related Entity 'Physical Location' used by Reference Field 'Physical Location' does not exist in Target. Create Related Entity in Target and try again." What table is it talking about? How do I step into the code to see what it is doing?

The `package.json` file shows "version": "0.0.0", but I know it isn't that. The TypeScript is compiled to JavaScript and used in our Visual Studio 2019 project by Razor, ASP.NET and MVC - none of which I excel at. Most of the files are logically arranged, but there are lots of files that seem way too hard to find.

Where is a good place to go for help, not tutorials?
Prettier-Eslint Error -Solution by Utitofon Udoekong
Tags: vue, prettier, nuxt, eslint
Published: 2020-12-21 22:53:01

I encountered the prettier/prettier error above in my nuxt.js project and tried a few things in fixing it.

Firstly, I changed the rules for prettier in the .eslintrc.js file to 
rules: {
    'prettier/prettier': 0,
  }.

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


Secondly, I created a .prettierignore file in my root directory. It works just like a gitignore file.
I then added the following syntax


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

With that being done, the nuxt server should reload and the error should be gone. Hope this helps
TypeScript support for Pino with Fastify
Tags: node, typescript, fastify
Published: 2020-12-21 22:42:15

---
title: TypeScript support for Pino with Fastify
published: true
description: How to add complete typescript support for Pino in your Fastify app
tags: nodejs, typescript, fastify
//cover_image: https://direct_url_to_image.jpg
---

By default, [Fastify](https://www.fastify.io/) ships with a [Pino](https://getpino.io/#/) instance as its logger; however, since Pino types are not maintained ([yet](https://github.com/pinojs/pino/issues/910)) by the Pino project itself, Fastify does not ship type support for the complete Pino API. Understandably, this can be frustrating, but in this post I want to show you just how easy it is to add `@types/pino` to your Fastify app.

1. Install Pino Types
	```sh
	npm i -D @types/pino
	```
2. Augment the `FastifyLoggerInstance` type in the same file the app is instantiated in (generally `index.ts` or `server.ts`)
	```ts
	import type { Logger } from 'pino'
	declare module 'fastify' {
		interface FastifyLoggerInstance extends Logger {}
	}
	```

This works because in the v3 Fastify types, the `FastifyInstance.log` property is defined as a generic `Logger` that is defaulted to `FastifyLoggerInstance` ([ref](https://github.com/fastify/fastify/blob/b42b2d068c04eeda40936f76c0b16bd62d64288c/types/instance.d.ts#L25)). [Declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) the `FastifyLoggerInstance` type with `interface FastifyLoggerInstance extends Logger {}`, informs TypeScript to consider the type as an extension of the logger type defined in `@types/pino`.
My Social Media Blog Project 95% completed(React + Redux + Firebase)
Tags: react, css, javascript
Published: 2020-12-21 22:32:38

https://j-blogrr.herokuapp.com

Working on this project, just wanna know how far i have gone with it 
You may kindly test the site if the features are working properly thanks and what your say about the project or any suggestions, let me know in the comment section
Thanks

I used React.js with Redux for state management and Firebase for backend
3️⃣ Websites to Convert Tables to JSON
Tags: json, table, excel, convert
Published: 2020-12-21 22:01:26

In recent projects I made, I realized that I frequently feel the need of converting Excel tables or CSVs to JSON. First I made my own functions to convert the data but then I thought it was a bit long process.

Then I searched for this problem and found that there are so many websites that I could've used and save lots of time.

# 🔥 **Here are the websites**
## **1.** [**CSVJSON**](https://csvjson.com)
![CSVJSON](https://dev-to-uploads.s3.amazonaws.com/i/1b3kzoyhvih3pykz9u7y.png)
**CSVJSON** can convert your CSV files to JSON and this is by far my favourite.

## 2. [**CODEBEAUTIFY**](https://codebeautify.org/excel-to-json)
![codebeautify](https://dev-to-uploads.s3.amazonaws.com/i/51tkk5o8ns86z32270g6.png)
**codebeautify** has so many tools in it, excel to json is just a piece of it and it is also very easy to use.

## **3.** [**ACONVERT**](https://www.aconvert.com/document/xlsx-to-json/)
![ACONVERT](https://dev-to-uploads.s3.amazonaws.com/i/mewydkox7myzpcl0y9rj.png)
**ACONVERT** can convert so many formats to so many other formats but when working with UTF-8 characters you might need to use another website, other than that It is a really good website and supports so many formats you can choose from.

These are the websites I can recommend, If you have other websites that are worth mentioning, I would like to know them. Please share in the comments 🙂
The mcbroken dashboard - digitalocean hackathon entry
Tags: dohackathon, monitoring, showdev, cloud
Published: 2020-12-21 21:58:51

## What I built

I built a digitalocean app template that deploys grafana, prometheus, and a custom prometheus exporter which monitors/displays the availability information of all the broken Mcdonald's ice cream machines in the United States.

### Category Submission: 

**Random Roulette**


### App Link

[Click here to go to the mcbroken dashboard](https://mcbroken-dashboard-t7vfw.ondigitalocean.app/grafana/d/TmWLGVxMz/broken-mcdonalds-ice-cream-machines-in-the-us?orgId=1)


### Screenshots

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

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


### Description
 
The mcbroken dashboard is an app template of 3 applications(listed below) which pre-configure a dashboard that is powered by [mcbroken.com](https://mcbroken.com). Its purpose is to provide availability information of all the broken Mcdonald's ice cream machines in the United States.

Stats include:

- Current broken percentage of mcdonald's ice cream machines in the US
- City with the most broken machines and it's outage percentage
- Outage percentage of most major US cities

### Link to Source Code

https://github.com/circa10a/mcbroken-dashboard

### Permissive License

 **MIT**

## Background

I remember seeing mcbroken.com circle the news a little while ago and thought this was absolutely hilarious. What's the point of being an engineer if you can't over engineer things for a good laugh?

Not only would it be hilarious, but thought it would also be a good learning opportunity to learn how to wire up multiple components for a single application on digitalocean's new platform.

### How I built it 

I utilized digitalocean's new app platform to deploy an application that consists of a pretty cloud native architecture. Wiring up all the components on the platform was much simpler than I thought. I love that it's essentially kubernetes under the hood so all the existing functional knowledge is applicable, yet there's so much more simplicity when it comes to getting your application to "just work".
|YelpCamp| Errors and Validating Data
Tags: javascript, html, css, webdev
Published: 2020-12-21 21:28:07

---
title: |YelpCamp| Errors and Validating Data 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                  -Client-Side Form Validations
                  -Basic Error Handler 
                  -Defining ExpressError Class 
                  -More Errors 
                  -Defining Error Template 
                  -JOI Schema Validations 


###Client-Side Form Validations
It is important to add client-side validation to the forms, to ensure that end users are entering correct data into the fields. 

One way to do this, is to include the word required on the html forms. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ucw2etil7edn7ffbm54.png)


there is also a way to provide client-side validation with javascript 

```javascript 
const forms = document.querySelectorAll('.validation-forms') 

Array.from(forms)
  .forEach(function (form) {
   form.addEventListener('submit', function (event) {
  if (!form.checkValidity()) {
    event.preventDefault() 
    event.stopPropagation()
  }

 form.classList.add('was-validated')
}, false) 

})

```


###Basic Error Handler 
First set up the try catch block in the async function and then set up the error handler. 


```javascript 

app.post('./campgrounds', async (req, res, next) => {
  try {
      const campground = new Campground(req.body.campground); 
      await campground.save();
      res.redirect(`/campgrounds/${campground._id}`)
} catch (e) {
    next(e)
  }
 })

```



```javascript 

app.use((err, req, res, next) => {
  res.send(Something went wrong!)
})

```




###Defining ExpressError Class 
Create a new folder called utils 
then a file called ExpressError.js 

```javascript 

class ExpressError extends Error {
 constructor(message, statusCode) {
  super(); 
  this.message = message;
  this.statusCode = statusCode; 
  
  }
}

module.exports = ExpressError; 


###More Errors 

app.use((err, req, res, next) => {
  const { statusCode = 500, message = 'Something went wrong' } = err; 
  res.status(statusCode).send(message); 
 })



app.all('*', (req, res, next) => {
 next(new ExpressError('Page Not Found', 404))
 })

```

###JOI Schema Validations 

https://joi.dev/api/?v=17.2.1

```javascript 
app.post('/campgrounds', catchAsync(async (req, res, next) => {
  const campgroundSchema = Joi.object({
    campground: Joi.object({
        title: Joi.string().required(), 
        price: Joi.number().required().min(0),
   }).required()

 })

  const campground = new Campground(req.body.campground);
  await campground.save(); 
  res.redirect(`/campgrounds/${campground._id}`)
}))

```
'Tis the season to be learning Javascript
Tags: javascript, beginners, css, challenge
Published: 2020-12-21 21:14:42

Anybody who knows me knows how difficult it is for me to achieve the goals I set for myself. Unless there are strict deadlines with consequences, nothing gets done. 

This, coupled with my love-hate relationship with Javascript after being in tutorial hell for so long, had me thinking I'm never gaining mastery in this language past what my job required. 

This was the case until #javascriptmas made its way to my [Twitter feed](https://twitter.com/hellosurbhi)! 

In the form of an advent calendar, [Scrimba](https://scrimba.com) created fun Javascript and CSS challenges for every day leading up to Christmas. They have not only helped me feel less burnt out but also helped me feel a sense of achievement and consistency while reviewing essential Javascript properties.

The best part about completing the challenges is that for every submission, you get entered into a lottery for $1000 and a lifetime Scrimba subscription.

If this sounds like something you might be interested in checking out, feel free to head over to the [Scrimba Advent Calendar](https://scrimba.com/learn/adventcalendar). You can submit all solutions till Christmas eve to get your name into the raffle. 

Here's a list of my solutions to the challenges but I recommend trying them yourself before you take a look - 

[Day 1: Candies](https://scrimba.com/scrim/co76947c08c7303144a7a5396)

[Day 2: Deposit Profit](https://scrimba.com/scrim/coabe4fdc873123b91e466c25)

[Day 3: Chunky Monkey](https://scrimba.com/scrim/co73c4cfdbbec56602fedabfd)

[Day 4: Century From Year](https://scrimba.com/scrim/co5474938895ef99b6faa9159)

[Day 5: Reverse A String](https://scrimba.com/scrim/cod484ba4aebe57d4c146489a)

[Day 6: Sort By Length](https://scrimba.com/scrim/cob594cb99dc53b0197066858)

Day 7: Count Vowel Consonant [with Regex](https://scrimba.com/scrim/co2ab432cb6407664ca536803) / [with if conditions](https://scrimba.com/scrim/co6bb49d59fcf759379182898)

[Day 8: Rolling Dice](https://scrimba.com/scrim/co9284f55a0378b793036c7a2)

[Day 9: Sum Odd Fibonacci Numbers](https://scrimba.com/scrim/coe794a0c843c90de09a0915a)

[Day 10: Adjacent Elements Product](https://scrimba.com/scrim/coc944829850f56271f50900f)

[Day 11: Avoid Obstacles](https://scrimba.com/scrim/cob744b18ae5c7a411a569682)

[Day 12: Valid Time](https://scrimba.com/scrim/coc884391b6177435235dc2fe)

[Day 13: Extract Each Kth](https://scrimba.com/scrim/cobb64afc82a6ab6213cd8388)

[Day 14: Maximal Adjacent Difference](https://scrimba.com/scrim/coc384a529ddf6c124edc832d)

[Day 15: Javascript Carousel]()

[Day 16: Insert Dashes]()

[Day 17: Different Symbols Naive]()

[Day 18: Array Previous Less]()

[Day 19: Alphabet Subsequence]()

[Day 20: Domain Type]()

[Day 21: Sum of Two](https://scrimba.com/scrim/co73c44fca63962d635a634fd)

[Day 22: Extract matrix column](https://scrimba.com/scrim/co4a944fe9751e83165ba4f6b)

Hope you have just as fun solving these as I did! 

Merry Javascriptmas!