TL;DR: Install this plugin 👉 https://www.npmjs.com/package/stylelint-css-modules-no-global-scoped-selector

Introduction

When using CSS Modules to apply some style to a React component, there is a risk to impact other components if the selectors are not scoped correctly (using a class or an id).

A typical case when this issue can happen is with external libraries that require some CSS customization that are not possible using the props exposed by the library. For example, if we use react-select in our component and we want to customize it, we can directly apply CSS to internal classes according to the docs.

The problem here is that if we just write .react-select__control { ... } in our CSS module file it will not work because the class will be renamed to something like .react-select__control__XXXX to be scoped. To avoid this behavior, we can add the :global keyword before the class to prevent it to be renamed. This solution works but it's risky because the selector is not scoped anymore: all the react-select used outside the component are also impacted by this style.

To avoid this issue, the solution is to add a scoped selector before the global keyword: .customReactSelect :global .react-select__control { ... }

In this case the component would look like:

.customReactSelect {
  :global .react-select__control {
    // ...
  }
}

import ReactSelect from 'react-select';
import styles from './CustomReactSelect.module.scss';

const CustomReactSelect = () => (
  <div className={styles.commonReactSelect}>
    <ReactSelect classNamePrefix="react-select" />
  </div>
);

// Or even better:
const CustomReactSelect = () => (
  <ReactSelect
    classNamePrefix="react-select"
    className={styles.commonReactSelect}
  />
);

export default CustomReactSelect;

In this example, only this occurrence of react-select will be impacted 🎉.

But how to be sure non-scoped selectors will never be written in our CSS module files?

Configure Stylelint to prevent usage of non-scoped selectors

Stylelint is a great linting tool for CSS files (like ESLint for JS files). You can run it locally in your terminal, programmatically in your CI pipelines, and you can also integrate it directly in your IDE (like ESLint) so that errors are underlined in red.

To avoid writing non-scoped selectors in CSS modules I wrote a Stylelint plugin, you can check it here 👉 https://github.com/lmichelin/stylelint-css-modules-no-global-scoped-selector. Installation steps are detailed in the Readme.

Once this plugin is integrated into your Stylelint configuration, you can see it in action in VS Code for example (you need to install the Stylelint extension for VS Code first):

Don't hesitate to integrate this Stylelint plugin in your projects, and feel free to open an issue on the GitHub repository if you detect a bug or a missing feature!

In this article, I will show you how I managed to set up my Ghost blog behind a Nginx server on a Scaleway instance with HTTPS enabled.

Purchase a domain name

The first thing you will need to do is purchase a domain name, like my-awesome-blog.io. HTTPS can't be enabled without it.

Start your Scaleway instance

Create your Scaleway account if you don't have one, follow the official instructions to add an SSH key, and go to the console to add an instance.

You can choose a DEV-1S instance to start. If you don't know which OS to choose, you can pick Debian, it's a light and easy OS to start.

Click on Create and wait a few seconds for your instance to be created:

Once your instance is created, you can click on the Console button to see your instance booting:

When your instance is fully started you can close the console and copy the SSH command:

Paste this command in a terminal on your computer and press ENTER, you are now connected to your instance through SSH! 🚀

You can run apt update && apt upgrade -y to update the outdated packages.

Install Nginx

Nginx is a popular and powerful web server allowing you to host many websites on your server. Run this command to install it:

apt install nginx

You can now visit http://YOUR_SCALEWAY_IP (for example http://51.15.215.187/) and you should see that Nginx is correctly installed!

Update your DNS zone

To access your server with your domain name, you need to add an entry in your DNS zone. Go to your customer account of your domain name provider and add an A entry to your DNS zone to make your domain point to your Scaleway IP address:

Now, you should be able to access your website with your domain name:

You are now ready to install Ghost!

Install Ghost

Install Node.js

Ghost is written in JavaScript, therefore you need to install node.js to run it:

curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt install -y nodejs

Install MySQL and create a database

Ghost uses a MySQL database, so just install mysql-server:

apt install mysql-server

Then run mysql and create a new user and his own database:

CREATE USER 'ghost'@'localhost' IDENTIFIED BY 'changeThisPassword';
CREATE DATABASE ghost;
GRANT ALL ON ghost.* TO 'ghost'@'localhost' IDENTIFIED BY 'changeThisPassword';
FLUSH PRIVILEGES;
exit

Install Ghost CLI

npm install ghost-cli -g

Create a non-root user

You need to create a non-root user and add it to the sudo group to install Ghost:

adduser blog
adduser blog sudo

Create a directory for your Ghost installation

We need to create a folder and set the right owner and permissions for it.

mkdir /var/www/ghost
chown blog:blog /var/www/ghost
chmod 775 /var/www/ghost
cd /var/www/ghost

Log in as the new user

su blog

Install Ghost

ghost install

Answer the questions with your own info, and answer Yes to all Y/n questions. Ghost will automatically configure Nginx and install the acme.sh script to get Let's Encrypt SSL certificates! 👌

Your blog is now ready! 😎

Create your first post and enjoy your new blog! 😉

Get more information on the official documentation.

This article has moved here:
👉 https://blog.theodo.com/2019/07/vscode-php-development/ 😉

When you work on a Vue.js or a Nuxt.js project, and more generally on a webpack project, you usually use absolute imports like

import MyComponent from '~/components/MyComponent.vue'

instead of

import MyComponent from '../../components/MyComponent.vue'

in which the number of ../ depends on the folder where the import is needed. These relative imports are not recommended because they are complicated to maintain in case of refactoring, but Visual Studio Code likes them because the editor can know exactly where the files are located and so can provide a complete IntelliSense experience (code suggestions, auto-imports, go to definition, etc.).

Unfortunately, even if you have the Vetur extension installed, IntelliSense (code completion, go to definition, ...) doesn't work by default when working with absolute imports. You need to give some informations to VS Code about absolute paths you use for imports. It can be done by adding a jsconfig.json file in your project. In this file you will specify a mapping table to link the virtual paths you use in your imports (like @/... or ~/... ) with the real paths of your project. The paths specified in the jsconfig.json file are relative to the location of this file, therefore you should place it in the root folder of your project.

According to the Nuxt.js documentation, they are 4 aliases in a Nuxt.js project:

• ~ or @ for srcDir (the src folder, the same as rootDir by default)
• ~~ or @@ for rootDir (the project's root folder)

For a Vue.js project generated with @vue/cli, @ is mapped with src/.

Therefore, in the case of a Nuxt.js project, you can use the following jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

However, if your srcDir is different from rootDir, for example if you have set up srcDir: 'src/' in your nuxt.config.js, your jsconfig.json would become:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

For a Vue.js project, it would look like:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

The exclude property allows to improve the performance of IntelliSense by specifying folders which are not part of your source code.

The result: 😎

A last thing to notice: If you want to have a complete IntelliSense for .vue files, you need to install the Vetur extension, and your Nuxt.js project must be the root folder of your VS Code workspace. Working in a Nuxt.js project in a subfolder of your VS Code workspace is not supported yet by Vetur (see the issue).

More information: https://code.visualstudio.com/docs/languages/jsconfig

When it comes to do some corrections after a code review, it can be painful to switch between GitHub and your IDE and browse the file tree to find the right file to update.

To improve this workflow, I recently developed a browser extension allowing to open GitHub links directly in VS Code and put the cursor at the desired line when possible.

Obviously this extension will only work if the repository is cloned on your computer. You can edit the local repositories path in the extension settings.

The extension is available on the Google Chrome Web Store and on Firefox Add-ons.

Feel free to open an issue on the GitHub repository if you detect a bug or a missing feature!

Here is my first post on my new personal blog!

Inline code example: console.log('hello!').

Code example with syntax highlighting:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Express app listening on port ${port}!`))

More posts coming soon! 😉