📕 subnode [[@karlicoss/webdev]] in 📚 node [[webdev]]
📓 garden/karlicoss/programming/webdev.md by @karlicoss

Table of Contents

related [[programming]] [[js]] [[css]] [[html]]

TODO weird. why didn't this work? #js #css #html etc

CSS [[css]]

[2019-11-11] A Complete Guide to Flexbox | CSS-Tricks

https://css-tricks.com/snippets/css/a-guide-to-flexbox

[2019-10-27] <pre> tag respects newlines [[html]]

[2019-08-28] Managing HTML5 Offline Storage - Google Chrome https://developer.chrome.com/apps/offline_storage#temporary

Each app can have up to 20% of the shared pool. As an example, if the total available disk space is 60 GB, the shared pool is 20 GB, and the app can have up to 4 GB. This is calculated from 20% (up to 4 GB) of 1/3 (up to 20 GB) of the available disk space (60 GB).

[2020-01-30] microsoft/playwright: Node library to automate Chromium, Firefox and WebKit with a single API [[testing]]

https://github.com/microsoft/playwright 

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer project is active and is maintained by Google.

[2020-01-30] microsoft/playwright: Node library to automate Chromium, Firefox and WebKit with a single API

https://github.com/microsoft/playwright 

[capabilities] With Playwright, we aim at providing a more capable driver, including support for mobile viewports, touch, web & service workers, geolocation, csp, cookie policies, permissions, accessibility, etc.

[2019-07-20] Responsive Design Mode - Firefox Developer Tools | MDN

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode

[2019-08-18] dypsilon/frontend-dev-bookmarks: Manually curated collection of resources for frontend web developers.

https://github.com/dypsilon/frontend-dev-bookmarks#readme 

Workflow
Task automation and asset delivery.

Firefox devtools color vision deficiency

[2020-08-25] Will It CORS? [[cors]]

[2020-02-16] (8) 🔎Julia Evans🔍 on Twitter: "CORS https://t.co/uSrLqGIWR0" / Twitter [[cors]]

<https://twitter.com/b0rk/status/1162392625057583104 >

These include DOM mutation breakpoints and inactive CSS rule indicators in the DevTools, several new CSS text properties, two-value display syntax, and JS numeric separators.

Firefox 70 — a bountiful release for all – Mozilla Hacks - the Web developer blog
in context

[2019-12-16] What are the pros and cons of using flexbox? - Quora [[css]]

https://www.quora.com/What-are-the-pros-and-cons-of-using-flexbox 

The pros are plentiful.
It makes things like space allocation a lot simpler and far fewer lines of code.
Unfortunately, not all browsers can identify and correctly interpret flexbox. Give it a few more years for (mostly) mobile browsers to catchup.

[2020-04-07] Firefox 75 for developers - Mozilla | MDN

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/75 

In the inspector, you can now use XPath expressions to locate elements, in addition to locating elements using CSS selectors as before (bug 963933).

[2019-02-28] Is there a CSS selector for elements containing certain text? - Stack Overflow [[css]]

https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text

[2019-03-12] apparently no…

[2019-11-17] to deal with cors issues (e.g. querying for external scripts for local html page) [[cors]]

python's simplehttpserver doesn't work

http-server -p 8000 –cors

also navigate to 127.0.0.1:8000. That's IMPORTANT! Apparently Cors header is hardcoded and it contains ip address

[2019-11-10] html - Difference between DIV as-is and a SPAN with display:block - Stack Overflow

https://stackoverflow.com/questions/1142104/difference-between-div-as-is-and-a-span-with-displayblock 

A <div> is a block level element that has no specific semantics of its own, beyond defining a discrete block of content. A <span> is an inline element that has no specific semantics of its own, beyond defining a discrete segment of inline content.

[2019-09-30] javascript - CORS request blocked in locally opened html - Stack Overflow [[cors]] [[webdev]]

https://stackoverflow.com/questions/48362093/cors-request-blocked-in-locally-opened-html 

You can tell your browser to allow to connect from localhost to a backend if you change your backend to return the following header:
access-control-allow-origin: https://localhost:8888
And, you also need to tell your localhost server to serve your page in HTTPS instead of HTTP. Once both conditions are met, CORS validations won't fail.

[2019-11-10] localStorage can be used on client side to preserve state (no need to use cookies!) [[webdev]]

apparently not many people know CSS has variables [[css]]

[2021-01-24] Incomplete List of Mistakes in the Design of CSS CSS Working Group Wiki [[css]]

[2020-01-29] Use and Reuse Everything in SVG; Even Animations | Lobsters https://lobste.rs/s/pd1ccu/use_reuse_everything_svg_even_animations

[2019-07-06] Stop using so many divs! An intro to semantic HTML - DEV Community 👩‍💻👨‍💻

https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

[2020-12-12] Periodic table of the web's APIs [[web]]

http://wwwperiodictable.surge.sh/?hn5

📖 stoas
⥱ context
To see links, go up to full node [[webdev]].