DEV Community: Boris

How to properly set up Prettier in less than 2 minutes

Boris — Mon, 20 Jun 2022 07:17:02 +0000

My step-by step guide to set up Prettier in any project, and integrate it with ESLint and Git Hooks

I’ve been using Prettier for more than 5 years now, and every time I create a new project or join an existing one, I ask myself the same questions:

How do I install Prettier?
Where should I put my configuration?
Should I add new scripts to my package.json ?
How to integrate it with ESLint?
How can I setup Git hooks to ensure the code is always properly formatted?

For many years, every time I had to setup Prettier in a project, I had to read multiple documentation pages, look up tutorials, or dig into my old projects, and this took me so long that one day, I decided to create my own “step-by-step” guide, just for myself.

After using and updating my guide for 2 years, I finally decided to share it here, so everyone can benefit from it ✨

N.B: A summary of all the commands used in this guide can be found in my dedicated GitHub repo, this guide is just here to explain the different steps.

Step 1: Install Prettier

Installing Prettier can be done with one simple command

Note: for each code block in this guide, you can choose between npm and Yarn, depending on what you use in your project.

# With npm
npm i -D prettier

# With Yarn
yarn add -D prettier

Step 2: Configure your options

Prettier is installed, you can now configure the format you want to use! A Prettier configuration is nothing more than a set of “options”.

Note that this step is totally optional, because Prettier is pre-configured with default options that you can use without any additional configuration

Method 1: Configure your own options

To add your own options, create a new file called .prettierrc.js at the root of your project, and add your options using the following format:

// .prettierrc.js
module.exports = {
  tabWidth: 4,
  singleQuote: true,
};

N.B: You can find the list of all available options here. The name of each option should be the one from the “API Override” section.

Method 2: Use someone else’s options

I personally always use the same options, which are the default ones, plus:

Single quotes instead of double quotes
Max line length: 120 instead of 80
A indent size of 2 spaces
Some other niche options for .vue files

If you want to use my set of options, it’s super easy, add the following line to your package.json

{
  "prettier": "@bokub/prettier-config"
}

Then, install my config with:

# With npm
npm i -D @bokub/prettier-config

# With Yarn
yarn add -D @bokub/prettier-config

That’s it!

Step 3: Run prettier on existing code

Now that Prettier is installed and configured, you can actually run it on your existing code to properly format it.

Just run the following command:

npx prettier --write .

Prettier will replace all your existing code with properly formatted code. You can add this command to a npm script so you can run it when you need to, but I think it’s actually not necessary, because you can do something so much better: automate it!

Check out the next step to see how 😉

Step 4: Set up a pre-commit hook (optional)

Running the command from step 3 is easy, but it’s also easy to forget. It can also take a few seconds if your project is very big.

How to be sure your code is always formatted by everyone working on the project, without slowing the development workflow? Use a git hook!

By using husky and pretty-quick, you can automatically force every developer to format all the changed files (and nothing more) every time they commit.

The setup can be a little bit long if you actually read the whole documentation, but here are the commands you need to run to set everything up:

# With npm
npx husky-init
npm i -D pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

# With yarn
npx husky-init
yarn add -D pretty-quick
yarn husky set .husky/pre-commit "npx pretty-quick --staged"

That’s it ! You will now see this kind of message every time you commit something:

Step 5: Setup with ESLint (optional)

The main differences between Prettier and ESLint are the following:

ESLint is a linter: it can detect errors in your code and also format your code if you configure it correctly
Prettier is only a code formater, but doesn’t need a configuration to work

A lot of projects use both a linter and a formater. In this guide, I won’t explain how to setup ESLint, but instead, I’ll show you how to edit an existing ESLint configuration to make it work perfectly with Prettier.

Start by installing the following dependencies (I suppose you already have installed ESLint 7 or higher):

# With npm
npm i -D eslint-config-prettier eslint-plugin-prettier

# With yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier

Then, edit your ESLint configuration file like this:

Add "prettier" to the list of “plugins”
Add "plugin:prettier/recommended" at the end of the list of “extends”
Optionally, you can set the error level to warn by adding a new rule as you can see below

{
  "plugins": ["prettier"],
  "extends": ["<some-config>", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

Conclusion

Following this step-by-step guide should help you configure Prettier properly in only a few minutes, without having to search through the documentation of multiple tools.

If you prefer, you can also use the “tl;dr” version of this guide which can be found in my dedicated GitHub repository.

Hope it helps ! 👍

How to add a login form to any website, without a single line of code

Boris — Mon, 19 Jul 2021 13:25:29 +0000

Creating a website or an app has never been so easy. There are so many tools and platforms to help you in this journey, with or without code, paid or free, with lots of features to make your life easier.

With these tools, you can create blogs, e-commerce websites and portfolios in less than a day! However, most of the time, adding a login form to your website quickly becomes a nightmare:

If you have access to all the code of the website (including the back-end), and if you’re an experienced developer, you can try to code this feature yourself, which will probably take a few weeks, or you can try to integrate an authentication platform, which can be quite complex if it is your first time.
If you created and deployed your website on a no-code platform, maybe this platform offers a password protection feature, maybe not!

Whatever your case may be, Octauthent can probably help you!

Octauthent is a simple service that adds login forms on your website

Once installed on your site, Octauthent provides a dashboard where you can manage users, settings, and analytics.

Octauthent can be installed on almost every site or platform, even the most limited ones. In fact, there is only one requirement to use Octauthent on your website: You need to own the domain name of this website.

If that’s the case, congratulations! Follow the tutorial below, and you’ll have a login form on your website in a few minutes 🎉

Before we start, how does it work?

To make it very simple, imagine that instead of linking your domain name to your website, you link your domain to a third party service (in our case, Cloudflare), which then redirects all your traffic to your website.

Not only it makes your website faster (because the Cloudflare network is available on hundred of locations all around the globe), but it can also protect your website from attackers.

Now, imagine that the third party service not only redirects traffic, but can also block requests and show them a login form instead of your site.

That’s exactly what Octauthent does!

Every request to your website domain is intercepted by Cloudflare, and analyzed by Octauthent, which acts like a bouncer. Unauthorized requests are blocked, allowed ones are routed to your site through Cloudflare’s intelligent global network

Now that you have a better understanding of how it works, let me show you how to set up Cloudflare and Octauthent on your site.

1. Setup Cloudflare

As explained above, Cloudflare is a company that provides web performance and security services, and is completely free for most users! If you’re not familiar with Cloudflare, here’s a quick list of some benefits you’ll get:

CDN — Cloudflare’s content delivery network helps speed up your site by serving your static content from a huge network of global servers. Cloudflare is the most popular free CDN service.
SSL — if your site doesn’t already have an SSL certificate, Cloudflare can help you use HTTPs on your site to get the green padlock in visitors’ browsers
DNS — Cloudflare is one of the fastest DNS providers, which can speed up your site’s time to first byte (TTFB)
DDoS protection — Cloudflare can help you protect against distributed denial of service (DDoS) attacks. It can also help you just generally filter out malicious traffic
Other performance benefits — Cloudflare can help you minify your code, enable Brotli compression, and implement other performance best practices

Let’s start

For my example, I’ll use a WordPress blog, which is already working with my custom domain name: example-blog.ml. You can follow the exact same steps with your own domain.

First, create a Cloudflare account. As soon as you have signed up, Cloudflare will start the installation process.

Enter your website domain, then choose the free plan (on the bottom). The free plan is more than enough for most website owners, including me.

Cloudflare will now perform a quick scan to detect your current domain configuration. Accept the recommended settings (unless you know what you’re doing), and click on Continue.

In order to use Octauthent on a domain or a subdomain, you must have the orange cloud in the “Proxy status” column. In the screenshot below, I’ll be able to install Octauthent on example-blog.ml and www.example-blog.com

In order to finish the installation, Cloudflare will now give you clear instructions about what to do from your registrar account (where you bought your domain name!)

In my case, I log into my registrar account, look for the DNS / nameservers settings, and change them as I’m told. Please note that the user interface may be completely different in your case, because we probably don’t have the same registrar.

After that, there is one last step: waiting. DNS is a complex matter and there are lots of cache levels, so be patient. You probably need to wait only a few minutes, but in some cases it can be several hours.

To know if the installation process is finished, refresh the “Overview” tab of your Cloudflare dashboard. If you still see the setup instructions, wait a little bit more. If the installation is finished, you’ll see the following message

Please note that even after you see this message, you may have to wait a little bit more until your visitors (including you) are actually passing through the Cloudflare network.

To confirm that Cloudflare is effectively protecting your site, go to:

https://[your-domain]/cdn-cgi/trace using your web browser. In my example: https://example-blog.ml/cdn-cgi/trace

If you see a black text with your domain in the second line, you’re good to go to the next step!
If you see a 404 Not found error, a ERR_SSL_PROTOCOL_ERROR, or any other result, wait a little bit more. DNS propagation can take up to 24 hours.

2. Install Octauthent

Now that all your traffic is passing through Cloudflare, let’s install Octauthent on it.

Sign up to Octauthent, then click on the New Site button. For each step, answer to the questions, and click Next.

The last step to create your site will be to choose users and passwords. In my case, I’ll start with only one user: “demo”, and I’ll set the password to “octauthent”.

Once your site is created, go to the Install tab.

You will first see a tutorial to create an API Token on your Cloudflare account, just follow the instructions.

Then, you’ll be asked to choose on which Cloudflare site you want to install Octauthent.

In my case, I choose the “example-blog.ml” site, which is my example site.

Finally, configure which pages will be protected by Octauthent, and which pages will stay public.

For my example, let’s say I want to protect:

All the wp-admin pages, which contain the admin part of my WordPress
A very private page where I can write private thing. I created a page that can be accessed at example-blog.ml/private-page/ (in my case, there is a trailing slash, but maybe not in yours!)

Here is my config:

Click on the install button, wait a few seconds and the Octauthent login form should appear on your website in the next minute! That’s it!

I hope you enjoyed this tutorial, don’t hesitate to comment if you think it can be improved

Also, Octauthent is still very new and in active development. Don’t hesitate to tell me what you think about it and how it could be improved.

Have a nice day 👍

How I made a Pastebin clone with NO database and NO back-end code

Boris — Fri, 29 May 2020 15:46:32 +0000

Hello everyone !

I'd like to show you the project I've been working on for the last few weeks, which is, as said in the title, a client side paste service, called NoPaste.

What does it mean exactly? Let's take a simple example

When you share a piece of code on Pastebin, your data is saved somewhere in a database, then Pastebin gives you a short link to access this data

NoPaste has a different approach: instead of using a database, your data is compressed then stored into a unique URL that can be shared and decoded later.

As a result, there is no risk of data being lost, censored or deleted. The data is stored entirely in the links and nowhere else!

Here are a few examples so you can see it in action:

This code is the CSS code used on the NoPaste page.
It has more than 3400 characters, but thanks to the compression, the link to access it has a length of 1710 characters.

Want something more impressive?
What about the CSS code of the Bootstrap grid system?
Because there are lots of repetitions, the compression is very efficient: 67959 characters stored in a link that's only 5762 characters (compression ratio about 8%)🤯

But a link length cannot be infinite! What's the limit?

Well, that's true, in some cases your browser won't support a URL which is too long, but that limit is actually quite high:

Browser	Max length	Notes
Google Chrome	(win) 32,779 (mac) 10,000	Will not display, but larger links work
Firefox	>64,000
Microsoft IE 11	4,043	Will not show more than 2,083
Microsoft Edge	2,083	Anything over 2083 will fail
Android	8,192
Safari	Lots

And here are the link length limits on a few popular apps / sharing methods:

App	Max length
Reddit	10,000
Twitter	4,088
Slack	4,000
QR Code	2,610
Bitly	2,048

You can embed NoPaste snippets in (some) websites

Unfortunately, dev.to is not one of them, but if you have a personal website, you can easily embed a NoPaste code snippet using the "Embed" button

The text inside an embed can be highlighted and copied, but not directly edited, unless you click on the "Edit" button. Perfect for tutorials!

Here is a preview made with jsFiddle:

Thanks for reading!

Don't hesitate to star ⭐ my Github repository, and leave comments if you have suggestions or ideas of improvement

bokub / nopaste

📋 Client-side paste service

Thanks again 👍