Here are some resources.
How to carry out a web project?
- Ma méthodologie d’intégration web
- Some pieces of advice
- Maintenabilité du code HTML / CSS : entre automatisation et guide de style
- Developer Roadmaps
CSS
- Pour une CSS simple et réutilisable
- CSS Values: a good documentation about CSS properties
- Feuilles de styles CSS - Conseils et bonnes pratiques
- Mini Convention CSS
- Flexbox, et le CSS redevient fun ! (Hubert SABLONNIÈRE)
- CSS is Awesome Igor Laborie
- Grid by Example
- Everything you need to know about CSS Variables
- w descriptors and sizes: Under the hood
- Decorating lines of text with box-decoration-break
- Mastering margin collapsing
- CSS doodle
- Did you know that style and script tags can be set to display: block?
- 30 Seconds of CSS
Support and compatibility
- caniuse.com: check out the tab 'Relative'
- gs.statcounter.com
- developer.mozilla.org aka MDN
- www.chromestatus.com/features
- developer.microsoft.com/en-us/microsoft-edge/platform/status/
- webkit.org/status/
- platform-status.mozilla.org
- bugzilla.mozilla.com
Centering
Mobile development
Responsive design
Compatibility
Testing
Finalizing
HTTPS and security
- Check liste pour passer un site de HTTP à HTTPS
- SSL Server Test
- Observatory by Mozilla
- Mozilla SSL Configuration Generator
- Certificat SSL avec Letsencrypt
- Why isn't HTTPS everywhere yet?
- Cipherli.st - Strong Ciphers for Apache, nginx and Lighttpd
- Rouler en classe A avec Apache
- Installer et activer HTTP2 sur Apache2
- Installer et activer HTTP2 sur Nginx
- Security/Guidelines/Web Security
- Web Application Exploits and Defenses
Formatting / minimizing / indentation / compressing
- HTMLLisible: auto-indent HTML
- CSSLisible: order properties and auto-indent CSS
- Online JavaScript/CSS Compressor
- Optimise your pngs from the terminal in OSX
- Cache et compression des pages web avec Gzip ou Deflate en HTTP
- PageSpeed Insights
- Monitoring unused CSS by unleashing the raw power of the DevTools Protocol
Apache setup
Favicon
On Linux, if you have imagemagick
installed, do:
convert favicon.png -alpha on -resize 256x256 \
-define icon:auto-resize="256,128,96,64,48,32,16" \
favicon.ico
Useful resources
UI
Fonts
- How we use web fonts responsibly, or, avoiding a @font-face-palm
- Font-display
- Three Techniques for Performant Custom Font Usage
- Variable Fonts
- Understanding Web Fonts and Getting the Most Out of Them
- Fitting Text to a Container
Icons
- Icones web Unicode
- Pictonic - free
- IcoMoon App
- iconmonstr
- PaymentFont: A sleek webfont containing 95 icons of all main payment operators and methods
- Seriously, Don’t Use Icon Fonts
- Seriously, use icon fonts
- How to Use Emojis as Icon
Images
- Sometimes
sizes
is quite important. - [DevFest Nantes 2018 - Fast and Beautiful Modern Image Delivery Techniques(https://www.youtube.com/watch?v=bTKRic9FWmM)
- Responsive Image Breakpoints Generator
Debugging
- How to stop using console.log() and start using your browser’s debugger
- La console JavaScript avancée
Bonus: HTML Emails
- My Current HTML Email Development Workflow
- Build Fully Responsive Email In Just Minutes.
- Foundation for Emails
Going further
Methodology
Web Assembly
- Awesome wasm
- WebAssembly 101: a developer's first steps
- WebAssembly, an executable format for the web
PWAs
- A Pinterest Progressive Web App Performance Case Study
- Lab: Migrating to Workbox from sw-precache and sw-toolbox
- Modifications to your existing configuration
- Workbox
- Google Play Store now open for Progressive Web Apps
Linters
Testing
Performance
Misc
- 6 Rules of thumb to build blazing fast web server applications
- 10 things I learned making the fastest site in the world
- Free Web Analytics Software (Piwik)
- The perfect PHP clean url generator
- PHP - The Right Way
- What Web Can Do Today
- OpenSearch
- De la gestion de projet à la gestion de workflow
- WebSocketd – Faites communiquer vos pages web avec vos outils en ligne de commande
- Front-End Developer Handbook 2017
- Les Web DevTools en 2017 (Jean-Francois Garreau)
- Optimiser les performances d'une webapp (Guillaume EHRET)
- The Illusion of Speed
- Firefox 54: E10S-Multi, WebExtension APIs, CSS clip-path
- How we rebuilt the viewsourceconf.org website
- What Web Can Do Today
- History of the browser user-agent string
- Roadmap to becoming a web developer in 2019
- Frontend Bootcamp / Days in the Web
- Illustrated.dev