Deploy Plesk with one-click on Vultr

Plesk makes managing your websites and apps easy with a user-friendly dashboard. You can add and manage websites, customize DNS, view web stats, schedule security updates, and more. Plus, the built-in code editor lets you edit files on the go.

Get Started Now

Puzzle of the day

Featured content

bind() vs call() vs apply() in JavaScript: The little-known difference

Were you with me in the painful early days of React; when we still did this? 👇

This was just one of the multiple applications of bind() -- a seriously underrated JavaScript method.

// damn class components are such a chore to write now
import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  greet() {
    alert(`Hi, I'm ${this.props.name}!`);
  }

  // remember render()?
  render() {
    return (
      <button onClick={this.greet.bind(this)}>Click me</button>
    );
  }
}

export default MyComponent;

greet() would be a mess without bind() -- the alert() would never work.

Because internally React is doing something fishy with this method that completely screws up what this means inside it.

Before sayName would have had absolutely no problems showing the alert -- just like in this other class:

class Person {
  props = { name: 'Tari' };

  greet() {
    console.log(`Hi, I'm ${this.props.name}!`);
  }
}

const person = new Person();

person.greet();

But guess what React does to the greet event handler method behind the scenes?

It reassigns it to another variable:

class Person {
  props = { name: 'Tari' };

  greet() {
    console.log(`Hi, I'm ${this.props.name}!`);
  }
}

// reassign to another variable:
const greet = Person.prototype.greet;

// ❌ bad idea
greet();

So guess what happens to this — it’s nowhere to be found:

This is where bind comes to the rescue — it changes this to any instance object you choose:

So we’ve binded the function to the object — the bind target.

(I know it’s “bound” but let’s say “binded” just like how we say “indexes” for “index” instead of “indices”).

I hacked Firebase with Redux to get free Web socket hosting (sorry Pusher)

I was planning a powerful real-time app so Web Sockets was essential.

Unfortunately, all the Web Socket hosting options I found were too costly or complex to set up.

So, I hacked Firebase to get Web Sockets for free with an innovative trick from Redux.

Web sockets great cause unlike our classic HTTP request-response style, the web socket server can send several messages to multiple connected clients in real time without any need for a request.

Firebase Firestore is free and has this powerful real-time ability by default, but there was a major problem.

Firestore is data-centric and client-centric.

But Web Sockets are action-centric and server-centric.

As a client in Web Sockets, you send event messages through channels and the server uses them to decide what to do with the data.

It has complete control, and there’s no room for malicious manipulation from any user:

// channel to listen for events in server
channel.bind('sendChatMessage', () => {
  // modify remote database
  // client doesn't know what's happening
});

But in Firestore, you dump the data in the DB and you’re done. The client can store whatever they want. Anyone can access anything in your DB once they have the URL.

// client can do anything
const handleSendChatMessage = ({ content, senderId }) => {
  const messagesRef = collection(
    `users/${userId}/messages`
  );
  addDoc(messagesRef, {
    content: 'whatever I want',
    senderId: 'whoever I want',
    timestamp: new Date(),
  });
};

With Coding Beauty University, you get exclusive access to multiple freelance networks and get offered jobs of up to $160,000 annual equivalent on a daily basis.
The best part is you also join the Coding Beauty Build network, where you can effortlessly delegate an endless amount of jobs to fellow developers and earn passively with zero constraints on your time.
Reply to this email with “yes” to learn more.

Thanks for taking the time to read today’s issue.

Don’t let the bugs byte,
Tari Ibaba