| <h1 class="message-wrapper" style="text-align:center;white-space:pre-wrap;"> | |
| <span>Work more</span> | |
| <ul class="message"> | |
| <li><span>effectively</span></li> | |
| <li><span>inclusively</span></li> | |
| <li><span>sustainably</span></li> | |
| <li><span>intentionally</span></li> | |
| </ul> | |
| <br> | |
| <span>Live more fully.</span> |
This is a very minimal bit of polyfill code for when you want to use some basic p5.js code you wrote, but not pay the performance cost associated with importing the whole kitchen sink.
It basically implements some of the sintactic sugar I use the most from p5.js but using the Canvas api, so that I have the p5 api but without all the magic I'm probably not using in this particular sketch.
One of the problems I have when testing giant TensorFlow models in TensorFlow.js is that they're huge (like 500 MB) and they take forever to download, every time I refresh the page. This is how I setup my ServiceWorker code so that at least in testing I only have to download the model once, and then it's saved in the cache for the next time.
I travel a lot so I'm down to like 30 minutes of packing per any kind of trip. I always bring one carry-on suitcase for any trips up to 2 weeks (that I never check in unless forced) -- I have an Away suitcase because it's got a built-in (removable) battery, and amazing wheels.
Someone sent me an email asking me what advice I had for new developers. I get this question a bunch, so I wanted to put all my thoughts in one place, that I can update as I get more ideas!
I answered this a bunch on my AMA repo, so here's some initial general answers, before I get to some of the specific questions:
The question was: "What's the best, if any, way to detect "conflicts" w/ CSS vars names between components?"
First, as a best-practice policy, on the elements team, we prefix custom properties with the element name, to make things clear: So paper-checkbox would have something like --paper-checkbox-checked-color etc.
Now, let's say that I have two identical elements, paper-checkbox and paper-checkbox-copy (in the sense that paper-checkbox-copy has all of paper-checkbox's custom variables, --paper-checkbox-checked-color and friends). If you style individual elements separately, even if the names are duplicate, the custom properties are scoped correctly. So in the example above, this will always do the right thing (because, remember: custom properties are scoped to their elements, and down their tree, they're not globally set)
paper-checkbox {
/* all paper-checkboxes instances always be blue */
--paper-checkbox-unchecked-background-color: blue;
}
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>offset parent demo</title> | |
| <link rel="import" href="some-thing.html"> | |
| </head> | |
| <body> | |
| <some-thing></some-thing> | |
| </body> | |
| </html> |
| [[NSNotificationCenter defaultCenter] | |
| addObserver:self | |
| selector:@selector(windowWillClose:) | |
| name:NSWindowWillCloseNotification | |
| object:self.window]; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <div id="box"> | |
| <div id="content"> | |
| CSS, right? | |
| </div> |