Search for a command to run...
Software developer documenting my journey through web and mobile development. I share what I learn, build, and struggle with—from React to SwiftUI, architecture decisions to deployment challenges. Not an expert, just passionate about coding and learning in public. Join me as I navigate the tech landscape one commit at a time.
No comments yet. Be the first to comment.
Daily code discoveries from my developer journey. Each post delivers concise, actionable insights I've uncovered while building with React, Typescript, and more. Brief but impactful lessons for curious developers looking to grow incrementally.
TL;DR Add parallel: N to your GitLab CI job and pass --shard=${CI_NODE_INDEX}/${CI_NODE_TOTAL} to Playwright to slash your test execution time and keep your team shipping fast. The Backstory Last week, our test suite execution time crossed the dreade...
The Problem Every Developer Faces with AI Coding Assistants You've probably experienced this frustration: you ask Claude, Cursor, or any AI coding assistant to write a function, and it confidently generates code that looks perfect at first glance. Bu...
The Backstory So there I was, staring at my shiny new Passbolt installation on Ubuntu 24.04, when that familiar dread crept in: "What happens when (not if) something goes wrong?" After one too many "I'll set up backups tomorrow" moments, I finally de...
TL;DR The custom Reactotron transport for react-native-logs improves logging by handling various message types, adding metadata, and allowing custom prefixes, making your logs more informative and easier to manage. The Backstory Logging is a crucial ...
TL;DR Add parallel: N to your GitLab CI job and pass --shard=${CI_NODE_INDEX}/${CI_NODE_TOTAL} to Playwright to slash your test execution time and keep your team shipping fast. The Backstory Last week, our test suite execution time crossed the dreade...
Error messages are often the first interaction users have with your support system. When they're cryptic, technical, or in the wrong language, they create confusion rather than clarity. That's why I built the Appwrite Exceptions Translator - a lightw...
I was peacefully implementing authentication for an Angular app, sipping my coffee, feeling productive. I added a simple tap operator to my login method to store the JWT token in localStorage. Easy-peasy, right? Wrong. The injected StorageService kept showing up as undefined despite being properly imported and injected. Cue the hair-pulling.
The issue occurred in an authentication service that looked something like this:
@Injectable()
export class AuthService {
constructor(
private http: HttpClient,
private storageService: StorageService // Properly injected!
) {}
private handleLoginSuccess(response: AuthResponse): void {
// ERROR: this.storageService is undefined here!
this.storageService.setItem('token', response.token);
}
login(credentials: {username: string, password: string}): Observable<AuthResponse> {
return this.http.post<AuthResponse>('/api/login', credentials).pipe(
tap(this.handleLoginSuccess)
);
}
}
When the tap operator executed, this.storageService was mysteriously undefined, despite being available in other methods. It's like my service got amnesia, but only for this one subscription.
The culprit? Context binding! Inside the tap callback, this wasn't referring to my service instance anymore. The solution was elegantly simple:
login(credentials: {username: string, password: string}): Observable<AuthResponse> {
return this.http.post<AuthResponse>('/api/login', credentials).pipe(
// The magic: .bind(this) preserves the correct context
tap(this.handleLoginSuccess.bind(this))
);
}
private handleLoginSuccess(response: AuthResponse): void {
// Now this.storageService exists!
this.storageService.setItem('token', response.token);
}
By using .bind(this), I explicitly told JavaScript: "Hey, when you execute this function later, remember that this should refer to the current context, not whatever context exists when the function runs."
This isn't just an Angular issue—it's a fundamental JavaScript concept that applies to any framework. Arrow functions automatically bind this, which is why you'll often see:
tap(response => this.handleLoginSuccess(response))
But using .bind(this) with a method reference can make your code cleaner while properly maintaining context. It's especially important in:
Observable operators like tap, map, and filter
Event handlers
Callback functions
setTimeout/setInterval calls
When your injected services go missing inside callbacks, remember: .bind(this) is your context-preserving superhero.