First, an exercise. Can we represent all of css with plain data? Let's try.
let redText = { color: 'red' };
https://twitter.com/snookca/status/1073299331262889984?s=21
Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows.
(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)
So the big deal about css-in-js (cij) is selectors.
EMOJI CHEAT SHEET
Emoji emoticons listed on this page are supported on Campfire, GitHub, Basecamp, Redbooth, Trac, Flowdock, Sprint.ly, Kandan, Textbox.io, Kippt, Redmine, JabbR, Trello, Hall, plug.dj, Qiita, Zendesk, Ruby China, Grove, Idobata, NodeBB Forums, Slack, Streamup, OrganisedMinds, Hackpad, Cryptbin, Kato, Reportedly, Cheerful Ghost, IRCCloud, Dashcube, MyVideoGameList, Subrosa, Sococo, Quip, And Bang, Bonusly, Discourse, Ello, and Twemoji Awesome. However some of the emoji codes are not super easy to remember, so here is a little cheat sheet. ✈ Got flash enabled? Click the emoji code and it will be copied to your clipboard.
People
😄
const { promisify } = require('util') | |
const timeout = promisify(setTimeout) | |
async function bar() { await timeout(1000) } | |
// The idea here is that we don't know if foo | |
// is going to return a Promise or not, so just | |
// in case, force it to return a Promise. | |
// Unfortunately, doing it this way creates | |
// quite a few additional unnecessary Promises |
adb
and you can find it when you run adb devices
cordova run android --device
, Now the app will run on your devicechrome://inspect/#devices
on your Chrome browser, and select your app and click inspecttl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.
A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.
But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.
How do we solve this with React?
Note:
When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.
If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:
Questions to ask potential employers
A top-level App
component returns <Button />
from its render()
method.
What is the relationship between <Button />
and this
in that Button
’s render()
?
Does rendering <Button><Icon /></Button>
guarantee that an Icon
mounts?
Can the App
change anything in the Button
output? What and how?