A Google Calendar-style experience for your own apps. Works with React, Vue and Angular (v7.0 adds Angular 22 support), but can be used with plain JavaScript. Hereโs a demo where you can play with the themes and styling approaches. MIT licensed with commercial extensions.
FullCalendar LLC
Please open Telegram to view this post
VIEW IN TELEGRAM
โค6๐6
CHALLENGE
const inventory = [
{ name: "sword", type: "weapon", power: 85 },
{ name: "shield", type: "armor", power: 60 },
{ name: "bow", type: "weapon", power: 72 },
{ name: "helmet", type: "armor", power: 45 },
{ name: "dagger", type: "weapon", power: 91 },
];
const result = inventory
.filter(item => item.type === "weapon")
.map(item => ({ ...item, power: item.power * 1.1 }))
.sort((a, b) => b.power - a.power)
.reduce((acc, item, index) => {
acc[index === 0 ? "best" : "rest"] ??= [];
if (index === 0) acc.best = item.name;
else acc.rest.push(item.name);
return acc;
}, {});
console.log(result.best, result.rest);
โค2
What is the output?
Anonymous Quiz
25%
dagger [ 'sword', 'bow' ]
48%
dagger ["sword", "bow"]
17%
sword ["bow"]
11%
bow ["dagger", "sword"]
โค1๐1
Please open Telegram to view this post
VIEW IN TELEGRAM
๐คฃ14โค4๐3๐ฅ2
CHALLENGE
const handler = {
get(target, prop, receiver) {
if (prop in target) {
return Reflect.get(target, prop, receiver) * 2;
}
return `missing:${prop}`;
},
set(target, prop, value) {
if (typeof value !== "number") {
throw new TypeError("Only numbers allowed");
}
return Reflect.set(target, prop, value * 10);
},
has(target, prop) {
return prop.startsWith("x") ? false : prop in target;
},
};
const store = new Proxy({ xRay: 5, score: 3 }, handler);
store.level = 4;
console.log(store.xRay);
console.log(store.score);
console.log(store.level);
console.log("xRay" in store);
console.log("score" in store);
console.log(store.missing);
โค3๐3๐ฅ3๐ค1
CHALLENGE
const inventory = {
warehouse: {
shelves: [
{ id: 'A1', items: ['bolts', 'nuts', 'washers'] },
{ id: 'B2', items: ['hammers', 'wrenches'] },
],
manager: { name: 'Carlos', shift: 'night' },
},
};
const {
warehouse: {
shelves: [{ items: [firstItem, , thirdItem] }, { id: shelfId }],
manager: { name, shift = 'day' },
},
} = inventory;
console.log(`${name} | ${shift} | ${shelfId} | ${firstItem} | ${thirdItem}`);๐คฃ4โค2๐1
CHALLENGE
async function fetchData(id) {
if (id <= 0) throw new Error("Invalid ID");
return { id, value: id * 10 };
}
async function process() {
const results = await Promise.allSettled([
fetchData(1),
fetchData(-1),
fetchData(3),
]);
results.forEach(({ status, value, reason }) => {
if (status === "fulfilled") {
console.log(`โ
${value.id}: ${value.value}`);
} else {
console.log(`โ ${reason.message}`);
}
});
}
process();โค5๐ฅ1
What is the output?
Anonymous Quiz
25%
โ
1: 10 โ Error: Invalid ID โ
3: 30
48%
โ
1: 10 โ Invalid ID โ
3: 30
23%
โ
1: 10 โ
3: 30
5%
โ Invalid ID โ
1: 10 โ
3: 30
โค2๐1
CHALLENGE
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x * x;
const negate = x => -x;
const transform1 = compose(negate, square, addTen, double);
const transform2 = pipe(negate, square, addTen, double);
console.log(transform1(3));
console.log(transform2(3));
โค4๐1๐ฅ1
๐ค2๐1๐ฅ1
CHALLENGE
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([3, 4, 5, 6, 7]);
const union = new Set([...setA, ...setB]);
const intersection = new Set([...setA].filter(x => setB.has(x)));
const differenceAB = new Set([...setA].filter(x => !setB.has(x)));
const symmetricDiff = new Set(
[...setA, ...setB].filter(x => !(setA.has(x) && setB.has(x)))
);
console.log([...union].join(','));
console.log([...intersection].join(','));
console.log([...differenceAB].join(','));
console.log([...symmetricDiff].join(','));
๐ฅ3โค2๐1
What is the output?
Anonymous Quiz
24%
1,2,3,4,5,6,7 3,4,5 6,7 1,2,6,7
45%
1,2,3,4,5,6,7 3,4,5 1,2 1,2,6,7
21%
1,2,3,4,5,6,7 4,5 1,2 1,2,6,7
9%
1,2,3,4,5,6,7 3,4,5 1,2,3 1,2,3,6,7
โค1
Vite+ is the Vite teamโs โunified toolchainโ that brings Vite, Vitest, Oxlint, and similar tools together under a single vp command, whether for running a dev server, tests, formatting, or bundling.
VoidZero
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐4๐ฅ2
CHALLENGE
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x ** 2;
const negate = x => -x;
const transform1 = compose(negate, square, addTen, double);
const transform2 = pipe(negate, square, addTen, double);
console.log(transform1(3));
console.log(transform2(3));
โค2๐ฅ2๐คฉ1
๐3โค1๐คฉ1๐คฃ1
With Eloquent JavaScript and ProseMirror under his belt, not many people know more about JavaScript and making good editor controls than Marijn. Modular, supports collaborative editing, and thoughtfully built. Live demo and how to get started.
Marijn Haverbeke
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐ฅ2