Please open Telegram to view this post
VIEW IN TELEGRAM
๐ฅ4โค2๐1
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐3๐ฅ1๐ค1
The Google team has gone all out with this significant release of its popular JavaScript framework. Theyโve put together a retro game-themed adventure-based tour of whatโs new, along with top notch videos showing off features like its new signal-based approach to forms, MCP server for AI-powered workflows, library of headless components focused on accessibility, and even a new โAngular AI Tutorโ to get up to speed.
Please open Telegram to view this post
VIEW IN TELEGRAM
๐6โค3๐ค3
CHALLENGE
const user = {
profile: {
settings: {
theme: 'dark',
notifications: null
}
}
};
const result1 = user?.profile?.settings?.theme;
const result2 = user?.profile?.settings?.notifications?.email;
const result3 = user?.profile?.preferences?.language ?? 'en';
const result4 = user?.profile?.settings?.notifications?.push?.('test');
console.log(result1, result2, result3, result4);๐ค5
What is the output?
Anonymous Quiz
42%
dark undefined en undefined
28%
dark undefined en null
17%
undefined undefined en undefined
13%
dark null en undefined
๐ค3
Examples of many common algorithms (e.g. bit manipulation, Pascalโs triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations. Available in eighteen other written languages too.
Oleksii Trekhleb et al.
Please open Telegram to view this post
VIEW IN TELEGRAM
โค10
CHALLENGE
const original = {
name: 'Sarah',
hobbies: ['reading', 'coding'],
address: { city: 'Portland', zip: 97201 }
};
const shallow = { ...original };
const deep = JSON.parse(JSON.stringify(original));
shallow.name = 'Emma';
shallow.hobbies.push('hiking');
shallow.address.city = 'Seattle';
deep.hobbies.push('swimming');
deep.address.zip = 98101;
console.log(original.hobbies.length, original.address.city);โค7๐ค1
โค2
Esteemed browser and Web standards expert Alex Russell looks at the state of client-side Web performance, what sort of bandwidth you should be taking into account, what devices people are using, and warns against ever-growing JavaScript bundle sizes. A lot of data here.
Alex Russell
Please open Telegram to view this post
VIEW IN TELEGRAM
๐5โค1๐ค1
CHALLENGE
class SimpleObservable {
constructor(subscribeFn) {
this.subscribeFn = subscribeFn;
}
subscribe(observer) {
return this.subscribeFn(observer);
}
}
const obs = new SimpleObservable(observer => {
observer.next('first');
observer.next('second');
observer.complete();
});
const results = [];
obs.subscribe({
next: val => results.push(val),
complete: () => results.push('done')
});
console.log(results.join('-'));โค4๐1๐ค1
What is the output?
Anonymous Quiz
46%
first-second-done
39%
first-second-complete
11%
first-done-second
4%
done-first-second
Get a Google Calendar-style experience in your own apps. Has connectors for React, Vue and Angular, but can be used with plain JavaScript too. The base version is MIT licensed, but thereโs a commercial version too with extra features.
Adam Shaw
Please open Telegram to view this post
VIEW IN TELEGRAM
โค10๐คฉ1
CHALLENGE
const arr = [1, 2, 3];
const obj = { valueOf: () => 4, toString: () => '5' };
const result1 = arr + obj;
const result2 = +obj;
const result3 = String(obj);
const result4 = obj == 4;
const result5 = obj === 4;
console.log(`${result1}|${result2}|${result3}|${result4}|${result5}`);
const weird = [] + [] + 'hello';
const weirder = [] + {} + [];
const weirdest = {} + [] + {};
console.log(`${weird}|${weirder}|${weirdest}`);
const final = !!'0' + !!'' + !!null + !!undefined;
console.log(final);
โค4
Draft diagrams quickly with TypeScript. Define your data models through top-level type aliases and interfaces and it automatically lays out the nodes in an efficient way. GitHub repo.
Andrei Neculaesei
Please open Telegram to view this post
VIEW IN TELEGRAM
โค8๐1
CHALLENGE
const data = '{"users": [{"name": "Sarah", "age": 25}, {"name": "Mike", "age": null}]}';
try {
const parsed = JSON.parse(data);
const result = parsed.users.map(user => {
return user.age ?? 'unknown';
});
console.log(result.join(' - '));
} catch (error) {
console.log('Parse error occurred');
}
const invalidJson = '{"name": "John", age: 30}';
try {
JSON.parse(invalidJson);
console.log('Success');
} catch {
console.log('Invalid');
}โค9
What is the output?
Anonymous Quiz
28%
Parse error occurred, Invalid
35%
25 - null, Success
10%
25 - unknown
27%
25 - unknown, Invalid
๐7๐ค2โค1
CHALLENGE
class Logger {
log(msg) {
return `[LOG]: ${msg}`;
}
}
class Formatter {
format(text) {
return text.toUpperCase();
}
}
class Service {
constructor(logger, formatter) {
this.logger = logger;
this.formatter = formatter;
}
process(data) {
const formatted = this.formatter.format(data);
return this.logger.log(formatted);
}
}
const service = new Service(new Logger(), new Formatter());
console.log(service.process('hello world'));โค3๐2๐ค1
What is the output?
Anonymous Quiz
49%
[LOG]: HELLO WORLD
28%
HELLO WORLD
14%
hello world
9%
[LOG]: hello world
CHALLENGE
let obj1 = { name: 'Sarah' };
let obj2 = { name: 'Mike' };
obj1.ref = obj2;
obj2.ref = obj1;
let weakRef = new WeakRef(obj1);
let registry = new FinalizationRegistry((value) => {
console.log(`Cleanup: ${value}`);
});
registry.register(obj1, 'obj1-cleaned');
obj1 = null;
obj2 = null;
console.log(weakRef.deref()?.name || 'undefined');
console.log('Script completed');