Handy web dev tools
Key shortcuts:
- Paste plain text (get rid of weird formatting):
Ctrl + Shift + V
- Override a page’s custom context menu (so you can access your normal one):
Shift + right click
Browser support:
Tests:
- Web Vitals
- Lighthouse tests
- Page Speed
- mobile-friendly
- Rich Results Test (replaces discontinued Structured Data Testing Tool)
- Facebook Sharing Debugger
- webpagetest (test on actual devices and connections)
Web Master utilities:
Colors:
Accessibility:
- Who Can Use (color checker)
- Accessibility Developer Guide
- ARL web accessibility toolkit
- Usability.gov
- Chrome Accessibility Developer Tools
- WAVE tool
- W3C Easy Checks documentation
- Accessibility testing and tools (MDN web docs)
- captioning videos for free
Stop using “click here”:
- Writing Hyperlinks: Salient, Descriptive, Start with Keyword
- Why Your Links Should Never Say “Click Here”
Also, don’t use link shorteners
Free images:
- Unsplash
- Flickr Commons
- PEXELS
- Old Book Illustrations
- Coverr (free stock video)
- Storyset (free illustrations)
Image optimize:
- For one off, Page Speed has a little link at the bottom of the analysis to download optimized images, css, and js (see Optimize Image)
- Essential Image Optimization by Addy Osmani
- Squoosh web app
- Image Magick (notes)
Reference:
JQuery?
Design:
- design examples
- Components Gallery
- Laws of UX
- Web Field Manual
- Performance Tooling Today
- Butterick’s Practical Typography
- Planet Friendly Web Guide
- Open Source Guide
- ac4d Design Library
Quick local server:
- Python 3:
python -m http.server 8000
then surf tolocalhost:8000
(part of python standard library) - Ruby:
ruby -run -e httpd . -p 8080
then surf tolocalhost:8080
(note in ruby 3.0+ webrick is removed from the standard library, so you will have to installwebrick
gem) - Node: install
npm install -g http-server
, runhttp-server
Ultra minimal computing notebook:
- new-note (see article)
- or paste into address bar
data:text/html, <html contenteditable style='padding:10%;'>
, type, then save withCtrl+S
.
Minimal hosting:
Find good font for your editor:
- Programming Fonts, test out mono fonts in web based editor
Check content of certificate file:
openssl x509 -in libcal_uidaho_edu_cert.cer -noout -text