TGViewer
Channel Public Channel
JavaScript

JavaScript

@javascript

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
Open in Telegram
Subscribers
31K
Photos
1.2K
Videos
10
Links
899

Showing posts older than #2294 · Back to latest

Older Posts 20 shown
Post #2293 4.98K
  • 🤔 10
  • 👍 6
Post #2292 4.94K
CHALLENGE

const obj = {
  value: 10,
  getValue() {
    return this.value;
  },
  getArrowValue: () => {
    return this.value;
  },
  getMixedValue() {
    const regular = function() { return this.value; };
    const arrow = () => this.value;
    
    return [regular(), arrow()];
  }
};

console.log(obj.getMixedValue());
  • 👍 1
Post #2291 4.9K
🫡 GSAP v3.13: JavaScript Animation Set Free

Last year the popular GSAP (a.k.a. GreenSock) animation library was acquired by Webflow and as of this new version the entire GSAP toolkit is freely available (including formerly paid addons like MorphSVG and SplitText) even for commercial use. If you're unfamiliar with GSAP and want to see some of what it can do, they have a showcase, lots of code demos, and amazing docs.

Cassie Evans and Jack Doyle
  • 🔥 8
  • ❤ 2
  • 👍 2
Post #2290 4.61K
  • 👍 8
  • ❤ 2
  • 🔥 1
  • 🤔 1
  • 🤩 1
Post #2289 4.86K
CHALLENGE

const target = { a: 1, b: 2 };
const handler = {
  get(obj, prop) {
    return prop === 'sum' ? obj.a + obj.b : Reflect.get(obj, prop);
  },
  set(obj, prop, value) {
    if (prop === 'a' && value < 0) {
      return false;
    }
    return Reflect.set(obj, prop, value);
  }
};

const proxy = new Proxy(target, handler);
proxy.a = -5;
proxy.b = 10;
console.log(`${proxy.a}, ${proxy.b}, ${proxy.sum}`);
  • 👍 4
  • 🔥 1
Post #2288 4.68K
🥶 TypeScript is Like C#: A Backend Guide

I've been dabbling with a little C# recently and enjoyed this TypeScript is Like C# guide oriented largely around showing TypeScript/JavaScript vs C# examples of doing the same things.
  • 👍 5
  • ❤ 3
  • 🔥 3
Post #2287 4.95K
  • 👍 3
  • ❤ 2
  • 🔥 2
Post #2286 4.89K
CHALLENGE

const obj = {
  value: 42,
  getValue() {
    return this.value;
  },
  getValueArrow: () => this.value,
  nested: {
    value: 100,
    getValue() {
      return this.value;
    }
  }
};

const extractedMethod = obj.getValue;
const boundMethod = obj.getValue.bind(obj);

console.log(obj.getValue() + ',' + obj.getValueArrow() + ',' + 
            obj.nested.getValue() + ',' + extractedMethod() + ',' + 
            boundMethod());
  • ❤ 3
Post #2285 4.7K
🤟 Koa 3.0: The Expressive HTTP Middleware Framework

Koa first appeared over a decade ago as a ‘next-generation’ Web framework that shared some of the lineage (and team) of Express.js, but leaning on more modern JavaScript features and ideas of the time. While Express has been making a comeback recently, Koa has progressed too and offers a compelling alternative. v3.0 release notes.

Koa contributors
  • ❤ 7
  • 🤩 2
  • 👍 1
  • 🔥 1
Post #2284 4.5K
  • 🔥 4
  • ❤ 1
  • 👍 1
Post #2283 4.79K
CHALLENGE

function Animal(name) {
  this.name = name;
}

Animal.prototype.getName = function() {
  return this.name;
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.getName = function() {
  return `Dog called ${Animal.prototype.getName.call(this)}`;
};

const myDog = new Dog('Rex', 'German Shepherd');
console.log(myDog.getName());
  • 🔥 5
  • ❤ 1
  • 👍 1
Post #2282 4.56K
✌️ JavaScript Font Picker

A surprisingly featureful control for letting users pick fonts from a range of system fonts, Google fonts, and custom fonts of your choice. You can play with a code demo here or go to the GitHub repo.

Zygomatic
  • ❤ 3
  • 👍 2
  • 🔥 1
Post #2280 4.62K
CHALLENGE

function* genSequence() {
  const result = yield 'first';
  console.log(result);
  yield* [1, 2];
  return 'done';
}

const gen = genSequence();
let next = gen.next('ignored');
console.log(next.value);
next = gen.next('second');
next = gen.next();
console.log(next.value);
next = gen.next();
console.log(next);
  • ❤ 3
  • 👍 3
  • 🔥 1
Post #2279 4.82K
🤨 Creating a 3D Split-Flap Display with JavaScript

A split-flap display is a electro-mechanical display commonly associated with live timetable displays and it makes for a neat effect on the Web too. Jhey breaks down how to replicate it, or you can hit up this live demo.

Jhey Tompkins
  • 👍 7
  • 🔥 3
  • ❤ 1
  • 🤔 1
Post #2278 4.37K
  • 👍 4
  • ❤ 3
  • 🔥 3
Post #2277 4.76K
CHALLENGE

function* counter() {
  let i = 0;
  while (true) {
    const direction = yield i;
    if (direction === 'up') i += 2;
    else if (direction === 'down') i -= 1;
    else i += 1;
  }
}

const count = counter();
console.log(count.next().value);
console.log(count.next('up').value);
console.log(count.next('down').value);
console.log(count.next().value);
  • 👍 2
  • 🔥 1
Post #2276 4.95K
👍 p5.js 2.0: The JavaScript Library for Creative Coding

A popular Processing-inspired creative coding library that makes it easy to create interactive, visual experiences (examples). v2.0 improves its font support, adds more ways to draw and manipulate text, adds a way to write shaders in JavaScript, and much more. p5.js 2.0: You Are Here has more details on the release and where the project is headed next.

p5.js Team
  • 👍 7
  • 🔥 2
  • ❤ 1
Post #2275 4.53K
  • 👍 7
  • ❤ 5
  • 🔥 4
Post #2274 4.82K
CHALLENGE


const obj = {
  [Symbol('a')]: 'hidden',
  a: 'visible',
  [Symbol.for('b')]: 'registered',
  b: 123
};

const symbol1 = Symbol.for('b');
const symbol2 = Symbol.for('b');

console.log(obj.a + ', ' + 
  obj[Symbol('a')] + ', ' + 
  obj[symbol1] + ', ' + 
  (symbol1 === symbol2));
  • ❤ 2
  • 🔥 2
  • 👍 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →