Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
es-reactLeaflet DemoLeafletReactHandsontable DemoGoogle Auth and Google Sheets TestHandsontable ScrollingGoogle Auth APIGoogle Drive APIJSBarcodeGoogle Sheets with Formulae DemoTable Utilities DemoHyperformula DemoLocal Storage Table DemoLocal Storage TableGoogle Sheet TableTable UtilitiesSystemJSTipTapreact-json-formTailwind ComponentsHyperformulaCodeMirror componentTable DemoGrant's UtilitiesReact ComponentsJavascript Temporal APIGoogle Sheets APIGoogle Sheets API DemoFuse.jsList of countriesYahoo FinanceHandsontable for Observable
Avery 5160 Barcode Labels Template
createPages = (items) => {
window.setTimeout(() => {
JsBarcode(".barcode").init();
}, 30);
return html`<style>
body {
margin: 0;
}
.pages {
display: flex;
flex-direction: column;
}
.page {
width: 8.5in;
height: 11in;
padding: 0.5in 0.1875in;
display: grid;
grid-template-columns: repeat(3, 2.625in);
grid-auto-rows: 1in;
column-gap: 0.125in;
row-gap: 0;
box-sizing: border-box;
/* outline: 1px dotted silver; */
}
.sticker {
width: 2.625in;
height: 1in;
padding: 0.125in;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: hidden;
/* outline: 1px dotted silver; */
}
.barcode {
width: 100%;
}
.sku {
width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
/* font-weight: bold; */
white-space: nowrap;
text-overflow: ellipsis;
}
.page-break {
clear: left;
display: block;
page-break-after: always;
}
</style>
<div class="pages">
${split(items, 30).map(
(page) => `<div class="page">
${page
.map(
({ sku, barcode }) => `<div class="sticker">
<svg class="barcode" jsbarcode-value="${barcode}" jsbarcode-width=4 jsbarcode-height=60 jsbarcode-font="Helvetica" jsbarcode-fontSize=24></svg>
<div class="sku">${sku}</div>
</div>`
)
.join("\n")}
</div>`
)}
</div>`;
}
printButton = (element) =>
Inputs.button("Print", {
reduce: () => {
const body = element.innerHTML;
const a = window.open("", "", "height='11in', width='8.5in'");
a.document.write("<html><body>");
a.document.write(body);
a.document.write("</body></html>");
a.document.close();
a.print();
}
})
split = (array, n) => {
let [...arr] = array;
var result = [];
while (arr.length) {
result.push(arr.splice(0, n));
}
return result;
}
import { JsBarcode } from "@gnestor/jsbarcode"
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.
