From 4e5f4267ff4027aabe983839edac1d2599ccd5b0 Mon Sep 17 00:00:00 2001
From: ncastejon <castejon.nicolas@gmail.com>
Date: Wed, 29 Jan 2020 11:27:06 +0100
Subject: [PATCH] Add suggestion. Fix some .md layout issues.
---
.../custom-apps/web-app/dataset/data.md | 1 -
docs/components/custom-apps/web-app/search.md | 2 ++
docs/miscellaneous/accessibility.md | 23 +++++++++++--------
docs/miscellaneous/sass-recommendation.md | 21 ++++++++++++-----
docs/miscellaneous/vscode-settings.md | 11 +++++----
5 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/docs/components/custom-apps/web-app/dataset/data.md b/docs/components/custom-apps/web-app/dataset/data.md
index 2cfcab9..b838a6e 100644
--- a/docs/components/custom-apps/web-app/dataset/data.md
+++ b/docs/components/custom-apps/web-app/dataset/data.md
@@ -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.
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)
-
diff --git a/docs/components/custom-apps/web-app/search.md b/docs/components/custom-apps/web-app/search.md
index 9098a0a..e70f38c 100644
--- a/docs/components/custom-apps/web-app/search.md
+++ b/docs/components/custom-apps/web-app/search.md
@@ -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.
## 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.
diff --git a/docs/miscellaneous/accessibility.md b/docs/miscellaneous/accessibility.md
index 4cea8e1..31c413a 100644
--- a/docs/miscellaneous/accessibility.md
+++ b/docs/miscellaneous/accessibility.md
@@ -2,40 +2,43 @@
This [resource](https://bitsofco.de/pa11y/) is a good start to create your own testing pipeline.
-
-
## Quick and simple overview
-```
+
+```bash
npm install -g pa11y
-```
-```
pa11y https://data.beta.grandlyon.com/fr/accueil
```
## Display only critical errors
-```
+
+```bash
pa11y https://data.beta.grandlyon.com/fr/accueil --ignore "warning;notice"
```
## Using the pa11y-ci
-```
+
+```bash
npm install -g pa11y-ci
```
Then create a **.pa11y1** json file.
-```
+
+```bash
{
"urls": [
"https://data.beta.grandlyon.com/fr/accueil"
]
}
```
+
To run the report on multiple URLs:
-```
+
+```bash
pay11-ci
```
It is also possible to save the report as a json file:
-```
+
+```bash
pay11-ci --json > report.json
```
diff --git a/docs/miscellaneous/sass-recommendation.md b/docs/miscellaneous/sass-recommendation.md
index 05a2cc2..5fcb1fa 100644
--- a/docs/miscellaneous/sass-recommendation.md
+++ b/docs/miscellaneous/sass-recommendation.md
@@ -1,10 +1,13 @@
# Good practices CSS/SASS
## Naming convention
+
Many exist, but we should look for [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
## 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 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
## Responsiveness
-#### Use REM instead pixel
+### Use REM instead pixel
+
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%.
+
```css
html {
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.
-#### For mobile
+#### For mobile
+
* Increase the `font-size` on mobile
* Decrease or remove the paddings and margins
## 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**
* `em` is more applied for **vertical spacing**
## Random things about SVG
+
* 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/)
* if your SVG has some blurry, probably your paths are not enough specifics
## Some questions
+
* 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/)
@@ -47,5 +58,3 @@ here it's even worse. there is no suitable solution !
* `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.
-
-*
\ No newline at end of file
diff --git a/docs/miscellaneous/vscode-settings.md b/docs/miscellaneous/vscode-settings.md
index 24c8bd3..872046f 100644
--- a/docs/miscellaneous/vscode-settings.md
+++ b/docs/miscellaneous/vscode-settings.md
@@ -1,7 +1,10 @@
-## User settings
+# VS Code settings
+
+## User settings
+
To add in the **settings.json** of Vscode IDE:
-```
+```json
{
"editor.snippetSuggestions": "top",
"editor.tabSize": 2,
@@ -22,12 +25,12 @@ To add in the **settings.json** of Vscode IDE:
```
## Some important plugins to install
+
* stylelint
* Beautify
* TSLint
* Angular Language Service
## 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.
--
GitLab