42 lines
2.0 KiB
Markdown
42 lines
2.0 KiB
Markdown
### instructions
|
|
|
|
- start server with php, and browser-sync for auto reload :
|
|
- `npm run dev`
|
|
- setup instructions :
|
|
- install apps : `sudo apt update && sudo apt install php-cli nodejs npm`
|
|
- verify : `php -v` & `node -v` & `npm -v`
|
|
- install dependencies : `npm ci`
|
|
- -> only for info, at project creation setup :
|
|
- run : `npm init -y && npm install --save-dev browser-sync`
|
|
- add in package.jsons > scripts : `php -S localhost:8000 & browser-sync start --proxy localhost:8000 --files "**/*.php,**/*.css,**/*.js" --port 3000`
|
|
- `php -S localhost:8000` → starts PHP built-in server
|
|
- `&` → runs PHP server in the background (Linux/macOS)
|
|
- `browser-sync start --proxy localhost:8000` → proxies PHP server
|
|
- `--files "**/*.php,**/*.css,**/*.js"` → watches files for changes
|
|
- `--port 3000` → BrowserSync UI accessible at http://localhost:3000
|
|
|
|
---
|
|
|
|
### ressources
|
|
|
|
html validator : https://validator.w3.org/nu
|
|
|
|
---
|
|
|
|
### difficulties
|
|
|
|
- [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible)
|
|
- I finally decided to go with a structure like this :
|
|
```html
|
|
<h1 aria-label="hugo lamy">
|
|
<span aria-hidden="true" class="pre"> hugo (ascii) </span>
|
|
<span aria-hidden="true" class="pre"> lamy (ascii) </span>
|
|
</h1>
|
|
```
|
|
- [links accessibility](https://webaim.org/techniques/hypertext/)
|
|
- [accessibility gone wild](https://webaim.org/articles/gonewild/)
|
|
- [don't use title attribute](https://stackoverflow.com/questions/11161915/simple-tooltip-title-attribute/11163133#11163133)
|
|
- [I thought title text improved accessibility. I was wrong.](https://silktide.com/blog/i-thought-title-text-improved-accessibility-i-was-wrong/)
|
|
- [Things I learned by pretending to be blind for a week](https://medium.com/silktide/things-i-learned-by-pretending-to-be-blind-for-a-week-bf7b09f33eb4)
|
|
- [create the full screen hero section with the navbar under the title](https://stackoverflow.com/questions/77596781/in-css-how-to-make-a-sticky-navbar-after-the-header-in-an-hero-section/)
|