Published
Edited
Feb 4, 2021
2 forks
1 star
"☔️".length
"👨👨👧👦".length
"🤑".codePointAt(0).toString(16)
"🤑".charCodeAt(0).toString(16)
"wow! 🤑 i made so much money 💸 using this app?? 📲".match(/([\u10000-\u1FFFFF])/g)
"wow! 🤑 i made so much money 💸 using this app?? 📲".match(/([\ud800-\udbff][\udc00-\udfff])/g)
"☔️" == "☔️️" // one of these has a VAR-16 at the end!
"I'm saving for 👩🏽🔬".match(/([\ud800-\udbff][\udc00-\udfff])/g)[0] // not what they meant!
html`
<style>
.bin-display {
display: inline-block;
font-family: "Courier New";
font-weight: bold;
position: relative;
}
.chunk {
margin-left: 0.7em;
}
.chunk .fmt::after {
position: absolute;
top: -1em;
visibility: hidden;
content: attr(label);
width: 10em;
}
.chunk .fmt:hover {
border-bottom: 1px solid slategray;
}
.chunk .fmt:hover::after {
visibility: visible;
}
</style>
`
toCodePoints = function(str, TypedArray) {
return TypedArray.from(str.split('').map(c => c.codePointAt(0)))
}
UTF16SurrogatePair.html(Uint16Array.of(500, 499))
html`☔️ ${ASCII.html(Uint8Array.of(1, 2))}`
html`
<style>
.UTF8 .chunk .f-1 {
border-bottom: 1px solid steelblue;
}
.UTF16Pair .chunk .f-1 {
border-bottom: 1px solid steelblue;
}
</style>
${UTF8.html(Uint8Array.of(237, 175, 180))}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
