Skip to content
Snippets Groups Projects
Commit 4e5f4267 authored by ncastejon's avatar ncastejon
Browse files

Add suggestion. Fix some .md layout issues.

parent 1efd8ff6
No related branches found
No related tags found
2 merge requests!14Doc webapp,!13Doc webapp
...@@ -129,4 +129,3 @@ Finally you can reference it in your style file as the following: ...@@ -129,4 +129,3 @@ Finally you can reference it in your style file as the following:
We have to do the conversion one by one. If multiple `.ttf` have to be converted, then maybe a `.sh` script is better. We have to do the conversion one by one. If multiple `.ttf` have to be converted, then maybe a `.sh` script is better.
In our case we needed only `Titillium Web` to add in our map glyphs. If another font is needed and you want to use them in a single style file, then you need to combine them. For this you can use [glyph-pbf-composite](https://github.com/mapbox/glyph-pbf-composite) In our case we needed only `Titillium Web` to add in our map glyphs. If another font is needed and you want to use them in a single style file, then you need to combine them. For this you can use [glyph-pbf-composite](https://github.com/mapbox/glyph-pbf-composite)
...@@ -32,3 +32,5 @@ If the user selects multiple values inside one filter category, they will behave ...@@ -32,3 +32,5 @@ If the user selects multiple values inside one filter category, they will behave
On another hand, if the user selects different filters in different filter categories; they will behave as `AND` operators. For example if we apply the filters `SYTRAL` in Producers and `WMS` in Services, it will display the datasets that are matching with these two conditions. On another hand, if the user selects different filters in different filter categories; they will behave as `AND` operators. For example if we apply the filters `SYTRAL` in Producers and `WMS` in Services, it will display the datasets that are matching with these two conditions.
## Suggestion ## Suggestion
This is a useful feature, especially for typo. If your research doesn't give you any result, Elasticsearch might find for you a word that is close of yours that would give more success in the results.
...@@ -2,40 +2,43 @@ ...@@ -2,40 +2,43 @@
This [resource](https://bitsofco.de/pa11y/) is a good start to create your own testing pipeline. This [resource](https://bitsofco.de/pa11y/) is a good start to create your own testing pipeline.
## Quick and simple overview ## Quick and simple overview
```
```bash
npm install -g pa11y npm install -g pa11y
```
```
pa11y https://data.beta.grandlyon.com/fr/accueil pa11y https://data.beta.grandlyon.com/fr/accueil
``` ```
## Display only critical errors ## Display only critical errors
```
```bash
pa11y https://data.beta.grandlyon.com/fr/accueil --ignore "warning;notice" pa11y https://data.beta.grandlyon.com/fr/accueil --ignore "warning;notice"
``` ```
## Using the pa11y-ci ## Using the pa11y-ci
```
```bash
npm install -g pa11y-ci npm install -g pa11y-ci
``` ```
Then create a **.pa11y1** json file. Then create a **.pa11y1** json file.
```
```bash
{ {
"urls": [ "urls": [
"https://data.beta.grandlyon.com/fr/accueil" "https://data.beta.grandlyon.com/fr/accueil"
] ]
} }
``` ```
To run the report on multiple URLs: To run the report on multiple URLs:
```
```bash
pay11-ci pay11-ci
``` ```
It is also possible to save the report as a json file: It is also possible to save the report as a json file:
```
```bash
pay11-ci --json > report.json pay11-ci --json > report.json
``` ```
# Good practices CSS/SASS # Good practices CSS/SASS
## Naming convention ## Naming convention
Many exist, but we should look for [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) Many exist, but we should look for [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
## Code formatting ## Code formatting
Two tools are usually used for having a clean and nice organized code across all the applicaiton:
Two tools are usually used for having a clean and nice organized code across all the application:
* a style linter: here the suggestion is [stylelint](https://stylelint.io/) * a style linter: here the suggestion is [stylelint](https://stylelint.io/)
* a code formatter: for example [Prettier](https://prettier.io/) * a code formatter: for example [Prettier](https://prettier.io/)
...@@ -13,32 +16,40 @@ The main issue here is that sometime is difficult to put settings between the li ...@@ -13,32 +16,40 @@ The main issue here is that sometime is difficult to put settings between the li
## Responsiveness ## Responsiveness
#### Use REM instead pixel ### Use REM instead pixel
One popular technique (there is a lot of discussion about it. The choice is yours): One popular technique (there is a lot of discussion about it. The choice is yours):
It's all about changing the `font-size` for the html element to 62.5%. It's all about changing the `font-size` for the html element to 62.5%.
```css ```css
html { html {
font-size: 62.5% font-size: 62.5%
} }
``` ```
The reason is that the default `font-size` for browser is usually `16px`. It means now inside your application `1rem` will be equal to 10px. This will help for the readability and maintainability of your code. The reason is that the default `font-size` for browser is usually `16px`. It means now inside your application `1rem` will be equal to 10px. This will help for the readability and maintainability of your code.
#### For mobile #### For mobile
* Increase the `font-size` on mobile * Increase the `font-size` on mobile
* Decrease or remove the paddings and margins * Decrease or remove the paddings and margins
## REM vs EM spacing ## REM vs EM spacing
It has to be considered case by case. But *in general*:
It has to be considered case by case. But *in general*:
* `rem` is more applied for **horizontal spacing** * `rem` is more applied for **horizontal spacing**
* `em` is more applied for **vertical spacing** * `em` is more applied for **vertical spacing**
## Random things about SVG ## Random things about SVG
* when you create a SVG, make it from the most small version you will use inside the website * when you create a SVG, make it from the most small version you will use inside the website
* one tool to optimize your SVGs: [SVGOMG](https://jakearchibald.github.io/svgomg/) * one tool to optimize your SVGs: [SVGOMG](https://jakearchibald.github.io/svgomg/)
* if your SVG has some blurry, probably your paths are not enough specifics * if your SVG has some blurry, probably your paths are not enough specifics
## Some questions ## Some questions
* animation on `height:auto` element: * animation on `height:auto` element:
You are screwed :) . There is no miracle solution. Here you can find on this [CSS Tricks article](https://css-tricks.com/using-css-transitions-auto-dimensions/) You are screwed :) . There is no miracle solution. Here you can find on this [CSS Tricks article](https://css-tricks.com/using-css-transitions-auto-dimensions/)
...@@ -47,5 +58,3 @@ here it's even worse. there is no suitable solution ! ...@@ -47,5 +58,3 @@ here it's even worse. there is no suitable solution !
* `display:flex`: is it possible to use it everywhere ? * `display:flex`: is it possible to use it everywhere ?
This has changed the way to use CSS, so no hesitation. The Flex main bugs are listed in this [Github page](https://github.com/philipwalton/flexbugs) if you find yourself with some issues. This has changed the way to use CSS, so no hesitation. The Flex main bugs are listed in this [Github page](https://github.com/philipwalton/flexbugs) if you find yourself with some issues.
*
\ No newline at end of file
## User settings # VS Code settings
## User settings
To add in the **settings.json** of Vscode IDE: To add in the **settings.json** of Vscode IDE:
``` ```json
{ {
"editor.snippetSuggestions": "top", "editor.snippetSuggestions": "top",
"editor.tabSize": 2, "editor.tabSize": 2,
...@@ -22,12 +25,12 @@ To add in the **settings.json** of Vscode IDE: ...@@ -22,12 +25,12 @@ To add in the **settings.json** of Vscode IDE:
``` ```
## Some important plugins to install ## Some important plugins to install
* stylelint * stylelint
* Beautify * Beautify
* TSLint * TSLint
* Angular Language Service * Angular Language Service
## Beautify (formatter) & stylelint (linter) settings ## Beautify (formatter) & stylelint (linter) settings
The rules of these are inside 2 files at the root of the project: .stylelintrc and .jsbeautifyrc.
The rules of these are inside 2 files at the root of the project: .stylelintrc and .jsbeautifyrc.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment