Lightnews — Scholar-powered news

Szymon Standarski

@standarski.bsky.social

Mostly a frontend developer 👨🏻‍💻 (Angular, React.js), but I also have experience with Node.js. In my free time, I’m an amateur cyclist 🚴🏻‍♂️.

Posts Replies Media Videos

Szymon Standarski

@standarski.bsky.social

A simple input tells Angular to create a binding to that property and check for a change at each change detection cycle. HostAttributeToken allows you to inject static values from the host component, which will only be retrieved at component initialization.

Code example:
import { Component, HostAttributeToken, inject } from '@angular/core';

@Component({
selector: 'app-example',
template: ` <div [style.color]="color">Content with injected attribute: {{ color }}</div> `,
})
export class AppExampleComponent {
color: string = inject(new HostAttributeToken('color'));
}

// usage
<app-example color="red"/>

July 25, 2025 at 10:53 AM

Reposted by Szymon Standarski

Syntax

@syntax.fm

stereotypical programmers by language, according to AI

March 27, 2025 at 3:37 PM

Szymon Standarski

@standarski.bsky.social

🚀 #Angular: how to react to input signal changes and fetch data from an API (without an effect)?

Connect toSignal + toObservable for auto-updating API calls!
Check example 👇
No manual subscriptions! Just reactive magic!

javaScript example:

const data = toSignal(
toObservable(this.inputSignal).pipe(
filter((input) => !!input), // 👉 filter out undefined values
switchMap((input) => this.apiService.getData(input))
)
);

February 14, 2025 at 2:21 PM

Szymon Standarski

@standarski.bsky.social

🚀 #JavaScript: Meet set.intersection() – a built-in method for finding the intersection of sets! 🎉

Check example and polyfill 👇

JavaScript Example:
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

const result = setA.intersection(setB);
console.log(result); // 👉 Set { 3, 4 }

JavaScript example:
if (!Set.prototype.intersection) {
Set.prototype.intersection = function (otherSet) {
return new Set([...this].filter(x => otherSet.has(x)));
};
}

// Test
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

console.log(setA.intersection(setB)); // 👉 Set { 3, 4 }

February 11, 2025 at 2:38 PM

Szymon Standarski

@standarski.bsky.social

🚀 New in #JavaScript: Array.prototype.toSorted()!
Unlike sort(), it does NOT mutate the original array but returns a sorted copy.

Check example 👇

JavaScript example:
const numbers = [3, 1, 4, 1, 5, 9];
const sorted = numbers.toSorted();

console.log(numbers); // [3, 1, 4, 1, 5, 9] ✅ original
console.log(sorted); // [1, 1, 3, 4, 5, 9] 🔥 new

February 5, 2025 at 2:51 PM

Szymon Standarski

@standarski.bsky.social

📢 #JavaScript devs, meet array.with() from #ES2023! 🚀
Replace an array element without mutation.

✅ with() is cleaner and shorter!

Check example 👇

JavaScript example:
const arr = [1, 2, 3];

// New in ES2023
const newArr = arr.with(1, 42);
console.log(newArr); // [1, 42, 3]

// Old way (spread with slice)
const oldArr = [...arr.slice(0, 1), 42, ...arr.slice(2)];
console.log(oldArr); // [1, 42, 3]

February 3, 2025 at 7:49 PM

Szymon Standarski

@standarski.bsky.social

🚀 Promise.try() – Your ally in handling async!

Instead of writing:
new Promise(resolve => resolve(myFunction()));

You can use:
Promise.try(myFunction);

✔️ Supports both async and sync functions
✔️ Catching Synchronous Errors
✔️ You can combine async and sync functions

Check examples! 👇

#JavaScript

JavaScript example:
// Wrapping Synchronous Code in a Promise

function myFunction() {
return "Simple sync function 🔥";
}

const promise = Promise.try(myFunction);

console.log("Start");

promise.then(result => {
console.log(result);
}).catch(err => {
console.error(err.message);
});

console.log("End");

// Output:
// Start
// End
// Simple sync function 🔥

JavaScript example:
// Catching Synchronous Errors

function myFunction() {
throw new Error("Error in sync function 🔥");
}

const promise = Promise.try(myFunction);

promise.then(result => {
console.log(result);
}).catch(err => {
console.error(err.message); // Output: Error in sync function 🔥
});

JavaScript example:
// You can combine async and sync functions and handle them with a single catch

function mySyncFunction() {
return "Simple sync function 🔥";
}

function myAsyncFunction() {
return new Promise(resolve => setTimeout(() => resolve("Async result"), 1000));
}

Promise.try(myAsyncFunction)
.then(result => {
console.log(result); // Output after 1 second: Async result
return Promise.try(mySyncFunction);
})
.then(result => {
console.log(result); // Output: Simple sync function 🔥
})
.catch(err => {
console.error(err.message);
});

// Output ....( after 1sec ):
// Async result
// Simple sync function 🔥

January 31, 2025 at 2:20 PM

Szymon Standarski

@standarski.bsky.social

🚀 npm install vs. npm ci

• npm install: 📦 Installs dependencies from package.json, updates package-lock.json if needed. Flexible but slower.
• npm ci: ⚡ Clean, fast install based only on package-lock.json. Reproducible builds, perfect for CI/CD.

💡Tip: In CI? Use npm ci for stability!
#javascript

January 28, 2025 at 10:39 AM

Szymon Standarski

@standarski.bsky.social

📌 Object.groupBy()

Since #ES2023 you can use Object.groupBy() to group array elements based on key!

Check example 👇

Very useful! 🚀 #JavaScript

JavaScript example:

const users = [
{ name: "Simon", age: 25 },
{ name: "John", age: 30 },
{ name: "Mia", age: 25 }
];

const grouped = Object.groupBy(users, user => user.age);
console.log(grouped);
/*
{
25: [{ name: "Simon", age: 25 }, { name: "Mia", age: 25 }],
30: [{ name: "John", age: 30 }]
}
*/

January 27, 2025 at 1:47 PM

Szymon Standarski

@standarski.bsky.social

🚀 ES13 #javascript feature: Error.cause!

Easier debugging by preserving the original cause of an error.
When you create a new error object (Error), you can pass an additional cause property that specifies what the original cause was.

Check out an example below 👇

JavaScript example:
function readFile() {
try {
throw new Error("No access to the file"); // Original error
} catch (err) {
throw new Error("Failed to load file", { cause: err }); // New bug from cause
}
}

try {
readFile();
} catch (err) {
console.error(err.message); // "Failed to load file"
console.error("Cause:", err.cause); // Original error
}

JavaScript example with output from devtools:
function readFile() {
try {
throw new Error("No access to the file"); // Original error
} catch (err) {
throw new Error("Failed to load file", { cause: err }); // New bug from cause
}
}

try {
readFile();
} catch (err) {
console.error(err.message); // "Failed to load file"
console.error("Cause:", err.cause); // Original error
}

Output:
> Failed to load file
>Cause: Error: No access to the file
at readFile (<anonymous>:3:11)
at <anonymous>:10:3

January 22, 2025 at 9:26 PM

Szymon Standarski

@standarski.bsky.social

🚀 Angular Routing Debugging: enableTracing or withDebugTracing()

Need to debug Angular routes?
✅ Use enableTracing (for traditional RouterModule setup)
✅ Use withDebugTracing() (for standalone APIs)

📌 Both log detailed routing events to the console, helping you debug navigation issues in #Angular!

TypeScript code example:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [ /* your routes here */ ];

@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })], // 🔍 Logs routing events
})
export class AppModule {}

TypeScript code example:
import { provideRouter, withDebugTracing } from '@angular/router';

const routes: Routes = [ /* your routes here */ ];

bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes, withDebugTracing()) // 🔍 Logs routing events
]
});

January 19, 2025 at 3:04 PM

Szymon Standarski

@standarski.bsky.social

🤔 What does NaN mean in JS?

NaN stands for “Not-a-Number”, but ironically, it’s of type number! 🤯

You can use Number.isNaN(x) to check if value is truly NaN.
NaN !== NaN (It’s the only value not equal to itself!).

🔥 Why is NaN !== NaN? A JS quirk or a hidden superpower? 🤯

#JavaScript #CodingTips

JavaScript Example:
typeof NaN; // "number"
0 / 0; // NaN
parseInt("hello"); // NaN

console.log(NaN == NaN) //false
console.log(NaN === NaN) //false

January 16, 2025 at 2:55 PM

Szymon Standarski

@standarski.bsky.social

🚀 TypeScript: Record<string, never> for an empty object!
Need to describe that a function returns exactly an empty object {}? Use Record<string, never>!

Why not just {}?
➡️ {} allows adding `any` properties.
➡️ Record<string, never> enforces absolute emptiness. 😎

Perfect for precise type modeling! 🛠️

January 15, 2025 at 2:40 PM

Szymon Standarski

@standarski.bsky.social

🧪 Do you know what `structuredClone()` is in JavaScript? It’s a method for deep-copying complex objects without issues like circular references! 🚀 It causes far fewer issues compared to JSON.stringify and ensures deep copying unlike the spread operator.
Check example! 👇 #JavaScript #CodingTips

Example in JavaScript:
const originalObject = {
name: "John",
data: {
age: 30,
names: ["Simon", "Tom"],
},
circularRef: null,
date: new Date(),
};

// Adding a circular reference - does not cause an infinite loop
originalObject.circularRef = originalObject; // -> this will cause an error when using JSON.stringify

const clonedObject = structuredClone(originalObject);

// ✅ deep copy!!
clonedObject.data.age = 31;

console.log(originalObject.data.age); // 30
console.log(clonedObject.data.age); // 31

// ✅ dates continue to be dates
console.log(typeof clonedObject.date);

January 15, 2025 at 8:49 AM

Add to Home Screen

Light up
your news

Add to Home Screen

Light upyour news

Sign in to Lightnews

Sign up to start reading

Connect Bluesky

Connect with Bluesky

Light up
your news