# Table of Contents

-   [related](#rltd) [[programming]] [[js]] [[css]] [[html]]
-   [CSS](#css) [[css]]
    -   [`[2019-11-11]` A Complete Guide to Flexbox | CSS-Tricks](#cmpltgdtflxbxcsstrcks) 
-   [`[2019-10-27]` `<pre>` tag respects newlines](#prtgrspctsnwlns) [[html]]
-   [`[2019-08-28]` Managing HTML5 Offline Storage - Google Chrome https://developer.chrome.com/apps/offline\_storage#temporary](#mngnghtmlfflnstrggglchrmsprchrmcmppsfflnstrgtmprry) 
-   [`[2020-01-30]` microsoft/playwright: Node library to automate Chromium, Firefox and WebKit with a single API](#mcrsftplywrghtndlbrryttmtchrmmfrfxndwbktwthsnglp) [[testing]]
    -   [`[2020-01-30]` microsoft/playwright: Node library to automate Chromium, Firefox and WebKit with a single API](#mcrsftplywrghtndlbrryttmtchrmmfrfxndwbktwthsnglp) 
-   [`[2019-07-20]` Responsive Design Mode - Firefox Developer Tools | MDN](#rspnsvdsgnmdfrfxdvlprtlsmdn) 
-   [`[2019-08-18]` dypsilon/frontend-dev-bookmarks: Manually curated collection of resources for frontend web developers.](#dypslnfrntnddvbkmrksmnllyctnfrsrcsfrfrntndwbdvlprs) 
-   [Firefox devtools color vision deficiency](#frfxdvtlsclrvsndfcncy) 
-   [`[2020-08-25]` Will It CORS?](#stlkttchwlltcrswlltcrs) [[cors]]
-   [`[2020-02-16]` (8) 🔎Julia Evans🔍 on Twitter: "CORS https://t.co/uSrLqGIWR0" / Twitter](#jlvnsntwttrcrsstcsrlqgwrtwttr) [[cors]]
-   [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.](#thsnclddmmttnbrkpntsndnctldsplysyntxndjsnmrcsprtrs) 
-   [`[2019-12-16]` What are the pros and cons of using flexbox? - Quora](#whtrthprsndcnsfsngflxbxqr) [[css]]
-   [`[2020-04-07]` Firefox 75 for developers - Mozilla | MDN](#frfxfrdvlprsmzllmdn) 
-   [`[2019-02-28]` Is there a CSS selector for elements containing certain text? - Stack Overflow](#sthrcssslctrfrlmntscntnngcrtntxtstckvrflw) [[css]]
    -   [`[2019-03-12]` apparently no&#x2026;](#pprntlyn) 
-   [`[2019-11-17]` to deal with cors issues (e.g. querying for external scripts for local html page)](#tdlwthcrssssgqryngfrxtrnlscrptsfrlclhtmlpg) [[cors]]
    -   [python's simplehttpserver doesn't work](#pythnssmplsrvrdsntwrk) 
    -   [http-server -p 8000 &#x2013;cors](#srvrpcrs) 
-   [`[2019-11-10]` html - Difference between DIV as-is and a SPAN with display:block - Stack Overflow](#htmldffrncbtwndvssndspnwthdsplyblckstckvrflw) 
-   [`[2019-09-30]` javascript - CORS request blocked in locally opened html - Stack Overflow](#jvscrptcrsrqstblckdnlcllypndhtmlstckvrflw) [[cors]] [[webdev]]
-   [`[2019-11-10]` localStorage can be used on client side to preserve state (no need to use cookies!)](#lclstrgcnbsdnclntsdtprsrvsttnndtscks) [[webdev]]
-   [apparently not many people know CSS has variables](#pprntlyntmnypplknwcsshsvrbls) [[css]]
-   [`[2021-01-24]` Incomplete List of Mistakes in the Design of CSS CSS Working Group Wiki](#swkcsswgrgdsmstksncmpltlssnthdsgnfcsscsswrknggrpwk) [[css]]
-   [`[2020-01-29]` Use and Reuse Everything in SVG; Even Animations | Lobsters https://lobste.rs/s/pd1ccu/use\_reuse\_everything\_svg\_even\_animations](#sndrsvrythngnsvgvnnmtnslbspdccsrsvrythngsvgvnnmtns) 
-   [`[2019-07-06]` Stop using so many divs! An intro to semantic HTML - DEV Community 👩‍💻👨‍💻](#stpsngsmnydvsnntrtsmntchtmldvcmmnty) 
-   [`[2020-12-12]` Periodic table of the web's APIs](#snwsycmbntrcmtmdprdctblfthwbsps) [[web]]





# 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?](https://httptoolkit.tech/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](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/)  
[in context](https://hyp.is/ojMC-PWPEemZk89OVNg-xQ/hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/)  




# `[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&#x2026;




# `[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 &#x2013;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](https://wiki.csswg.org/ideas/mistakes)      [[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](https://news.ycombinator.com/item?id=25399294)      [[web]]

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