Live-reloading CSS on static sites

Option 1: live-server https://github.com/tapio/live-server Run live-server, which runs a NodeJS web server with load-reload capabalities via websockets. npm install -g live-server cd <website-dir> live-server Option 2, for Hugo sites: fingerprint the CSS files https://discourse.gohugo.io/t/live-reloading-during-development/37132 Add the content’s hash to the CSS filename to work around the browser cache. {{ $style := resources.Get "css/style.css" | minify | fingerprint }} <link rel="stylesheet" type="text/css" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media='all' /> Option 3, when using VSCode: install the Live Preview extension https://marketplace....

January 19, 2024 · Fernando Costa Bertoldi

Browsing context

A browsing context is an environment in which a browser displays a Document. In modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe. Each browsing context has an origin (that of the active document) and an ordered history of previously displayed documents. https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context

May 2, 2023 · Fernando Costa Bertoldi

GitHub auto-refresh PRs

GitHub uses websocket connections to auto-refresh changes on pull requests, but the sockets are not created in the PR’s browsing context, but in shared web workers. https://stackoverflow.com/questions/64665510/how-does-github-instantly-update-its-web-interface https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker

May 2, 2023 · Fernando Costa Bertoldi

Chrome dev tools: filter for failing requests

Use negative filters (-) to filter for error status codes, i.e. -status-code:200 -status-code:201 -status-code:202 -status-code:204 https://developer.chrome.com/docs/devtools/network/reference/#filter https://stackoverflow.com/a/55777656/2634595

Fernando Costa Bertoldi