JavaScript
31.9K subscribers
1.01K photos
9 videos
33 files
693 links
A resourceful newsletter featuring the latest and most important news, articles, books and updates in the world of #javascript πŸš€ Don't miss our Quizzes!

Let's chat: @nairihar
Download Telegram
🀨 Rsdoctor 1.0: An Analyzer for Rspack and Webpack

A one-stop, intelligent build analyzer making it easier to identify bottlenecks and optimize performance. It’s part of the same family of tools as Rspack (a Rust-powered web bundler) but is fully webpack compatible. If you’ve ever asked why your build times are too long, this is for you.

ByteDance Inc.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘5πŸ”₯2❀1
❀8πŸ‘1πŸ”₯1
CHALLENGE

function* counter() {
let count = 1;
while (true) {
const reset = yield count++;
if (reset) {
count = 1;
}
}
}

const gen = counter();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next(true).value);
console.log(gen.next().value);
πŸ‘8πŸ”₯2πŸ€”1
πŸ‘9🀣8🀩5πŸ”₯4❀3
πŸ€” How to Build a Snake AI Game with Docker and TensorFlow.js

You’ve probably heard about people β€˜vibe coding’ games by letting LLMs do the coding work, but what if you want to build a game yourself that has neural network powered elements? TensorFlow.js offers one solution that you could just as easily adapt to non-gaming contexts.

Manvar and Raina (Docker)
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘10❀2πŸ”₯2
CHALLENGE

const user = {
profile: {
name: 'Alice',
social: null,
getDetails() {
return { verified: true };
}
}
};

const result = [
user?.profile?.name,
user?.profile?.social?.handle,
user.profile.getDetails?.()?.verified,
user?.nonExistent?.property
];

console.log(result);
πŸ‘7
πŸ‘ Introducing Motion for Vue

Motion is a popular and powerful animation library most commonly associated with React, but now there’s a new Vue flavor and it’s feature complete, too.

Matt Perry (Motion)
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘6❀5
CHALLENGE

function Vehicle(type) {
this.type = type;
}

Vehicle.prototype.getType = function() {
return this.type;
};

function Car(make) {
this.make = make;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

const myCar = new Car('Tesla');
myCar.type = 'electric';

console.log(myCar.getType(), myCar instanceof Vehicle, myCar.constructor.name);
❀1
πŸ‘6❀4πŸ€”3
😭
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ€”32πŸ‘6❀2
CHALLENGE

const target = { a: 1, b: 2 };
const handler = {
get(obj, prop) {
return prop in obj ? obj[prop] * 2 : 'Not found';
}
};

const proxy = new Proxy(target, handler);

// Add a property to the original target
target.c = 3;

// Attempt to access properties through proxy and Reflect
console.log([
proxy.a,
proxy.z,
Reflect.get(target, 'b'),
Reflect.get(proxy, 'c')
]);
πŸ‘4
πŸ‘8πŸ€”7❀3πŸ”₯1
CHALLENGE

type User = {
id: number;
name: string;
role?: 'admin' | 'user';
};

function processUser(user: Partial<User>): string {
const defaultUser: User = {
id: 0,
name: 'Guest',
role: 'user'
};

const mergedUser = { ...defaultUser, ...user };

if (mergedUser.role === 'admin') {
return `Admin: ${mergedUser.name}`;
}

return `User: ${mergedUser.name} (ID: ${mergedUser.id})`;
}

console.log(processUser({ name: 'John', role: 'admin' }));
πŸ‘7❀1
πŸ”₯6πŸ‘4❀2
πŸ‘12❀4πŸ€”4
CHALLENGE

function processConfig(config) {
const cache = config.cache ?? true;
const timeout = config.timeout ?? 1000;
const retries = config.retries ?? 3;

return {
useCache: cache,
timeoutMs: timeout,
maxRetries: retries
};
}

const result = processConfig({ timeout: 0, retries: false });
console.log(result);
πŸ‘3
CHALLENGE

function processInput(userInput) {
const defaultValue = 'default';
const value1 = userInput?.value ?? defaultValue;
const value2 = userInput?.value || defaultValue;

const result = {
a: 0 ?? 'zero',
b: '' ?? 'empty',
c: null ?? 'null',
d: undefined ?? 'undefined',
comparison: value1 === value2
};

console.log(result);
}

processInput({ value: '' });
πŸ‘7