browse by category

Digital Minimalism

Source: Nikhil Thota

A few months ago I was offered (and have since accepted) a full time offer to work at Facebook in San Francisco and in that time I have been reflecting on my own usage of social media and the amount of value it has added to my life.

A common trend I’ve been seeing is the urgency to delete all your social media IMMEDIATELY or even go completely off-the-grid to avoid the unimaginable long-term implications of having your attention and personal data potentially manipulated and abused. I don’t think that we can thrive in today’s world without utilizing the platforms that allow us such a dense level of interconnectivity. I’m not saying that things couldn’t be engineered better; what I am saying however, is that we can take control of how these platforms influence us and in a sense, take control of our own evolution.

Anyways, here are five things I’ve done which have allowed me to be a participant in the digital world, but not have my attention micromanaged:

1. Unsubscribe from irrelevant emails

Inbox-zero isn’t a new idea but it’s infinitely more difficult to achieve this if you’re bombarded with emails from random retailers offering coupons and one-in-a-lifetime deals you’re never going to use.

A simple way to de-clutter your inbox is to look at each email you receive from a subscription and if it’s not immediately relevant (or will be in the foreseeable future), just scroll to the bottom and hit that unsubscribe button. Over time you’ll receive less and less irrelevant emails and this will naturally translate into less stress in the back of your mind.

And for those subscriptions and newsletters that you do want to keep, Unroll.me is a great tool I’ve used to manage the amount of content I see in my inbox. It allows you to wrap all relevant subscriptions into a daily newsletter that you see once and can tackle at your own leisure (it even allows you to unsubscribe directly from their platform!)

2. Unfollow people on social media

As you progress through school, jobs, projects, and whatever else you devote your time to, you tend to meet a lot of people who you may add on Facebook, follow on Instagram, but never develop a real relationship with. These acquaintances bloat your feeds and may cause you to miss out on important things that happen to those in your life who do matter.

What I have done is unfollow (or mute) the people that I don’t spend time with in person or plan to in the future. This includes brands, groups, events or influencers who I don’t feel are genuinely inspiring me. The beauty of this is that you are freeing up more time and mental space to interact with the content and people who you truly do want to invest in.

If you don’t want to be dramatic but still want more manageable social media feeds, the mute feature does thankfully exist. This allows you to mute someone’s posts, stories, and other notifications without explicitly unfollowing them and not tarnishing your (probably nonexistent) relationship with them.

3. Take occasional social media purges

It’s no secret that social media messes with the reward circuitry in your brain. One of the best ways to see just how it works is to take a social media purge where you commit to not using it for a certain amount of time. I’ve been surprised at how reflexively I reach for my phone and even more surprised at the free time and mental clarity I have after a couple days of adjusting.

In the past I’ve experimented with social media detoxes ranging from days to weeks and have found that the best strategy to avoid the temptation is to just delete the apps and not re-download until your purge is over. Most of the time you have an urge to check something, it’s simply a reflex and you won’t follow through since downloading the app again will take time and you will have caught yourself by then.

Another strategy, courtesy of Kenton Prescott is to enact a recurring purge, where you keep your phone in airplane mode (or even Do Not Disturb) for some amount of hours a day, limiting the time you spend catching up on notifications. The idea is that everyone can wait a few hours for your attention, even in the case of emergencies.

4. Turn off notifications for non-essential things

This one is pretty simple, just turn off notifications for things that are not essential. Every time your phone or wearable buzzes, you’re losing precious mental bandwidth which can take up to 23 minutes to get back!

In similar fashion to the previous steps, this takes some time and conscious effort daily where you take note of all notifications you get, evaluate if each one is worth the time, and turn off as necessary.

5. Learn how to use built in tools

One of my favorite features on my phone is Do Not Disturb. It allows you to silence all non-critical notifications for an indefinite amount of time. This is what I use when I’m working on school work, personal projects, or even this article. On both iOS and Android, you’re given fairly granular control over what is considered critical so you can pick and choose what is worth the focus lost from a distraction.

Apple and Google also fairly recently rolled out time management tools which allow the user to be restricted from certain applications after a given amount of use. This really helps to add an extra layer of discipline if you’re trying to build the habit of using your phone less.

Minimalism isn’t a philosophy that demands you to sell everything you own, wear the same outfit for the rest of your life, and live out of your van. Rather, it’s taking a hard look at everything in your life and determining whether something truly provides happiness for you. Digital Minimalism is a subset of this way of thinking and is a philosophy that has allowed me to work in tech and be an active participant of social media, but also maintain my own level of free thinking and choose what I focus on.

I hope this has helped at least one person out there better manage their digital engagement. When I was first starting my foray into this way of thinking, this documentary by Matt D’Avella really helped me understand what minimalism was all about and is something I’d recommend if you’d like to learn more!

Learn React.js in 5 minutes

This tutorial will give you a basic understanding of React.js by building a very simple application. I’ll leave out everything which I don’t think is core.

The setup

When getting started with React, you should use the simplest setup possible: an HTML file which imports the React and the ReactDOM libraries using script tags, like this:

<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/react.min.js"> </script><script src="https://unpkg.com/[email protected]/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

    /*
    ADD REACT CODE HERE
    */

    </script>
</body>
</html>

We’ve also imported Babel, as React uses something called JSX to write markup. We’ll need to transform this JSX into plain JavaScript, so that the browser can understand it.

There are more two things I want you to notice:

  1. The <div> with the id of #root. This is the entry point for our app. This is where our entire app will live.
  2. The <script type="text/babel"> tag in the body. This is where we’ll write our React.js code.

If you want to experiment with the code, check out this Scrimba playground.

Components

Everything in React is a component, and these usually take the form of JavaScript classes. You create a component by extending upon the React-Component class. Let’s create a component called Hello.

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

You then define the methods for the component. In our example, we only have one method, and it’s called render().

Inside render() you’ll return a description of what you want React to draw on the page. In the case above, we simply want it to display an h1 tag with the text Hello world! inside it.

To get our tiny application to render on the screen we also have to use ReactDOM.render():

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

So this is where we connect our Hello component with the entry point for the app (<div id="root"></div>). It results in the following:

The HTML’ish syntax we just looked at (<h1> and <Hello/>) is the JSX code I mentioned earlier. It’s not actually HTML, though what you write there does end up as HTML tags in the DOM.

The next step is to get our app to handle data.

Handling data

There are two types of data in React: props and state. The difference between the two is a bit tricky to understand in the beginning, so don’t worry if you find it a bit confusing. It’ll become easier once you start working with them.

The key difference is that state is private and can be changed from within the component itself. Props are external, and not controlled by the component itself. It’s passed down from components higher up the hierarchy, who also control the data.

Let’s take a closer look at props first.

Props

Our Hello component is very static, and it renders out the same message regardless. A big part of React is reusability, meaning the ability to write a component once, and then reuse it in different use cases — for example, to display different messages.

To achieve this type of reusability, we’ll add props. This is how you pass props to a component:

ReactDOM.render(
    <Hello message="my friend" />,
    document.getElementById("root")
);

This prop is called message and has the value “my friend”. We can access this prop inside the Hello component by referencing this.props.message, like this:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

As a result, this is rendered on the screen:

The reason we’re writing {this.props.message} with curly braces is because we need to tell the JSX that we want to add a JavaScript expression. This is called escaping.

So now we have a reusable component which can render whatever message we want on the page. Woohoo!

However, what if we want the component to be able to change its own data? Then we have to use state instead!

State

The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.

So if you want the data in your app to change — for example based on user interactions — it must be stored in a component’s state somewhere in the app.

Initializing state

To initialize the state, simply set this.state in the constructor() method of the class. Our state is an object which in our case only has one key called message.

class Hello extends React.Component {

    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }

    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.

Changing the state To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateMessage.

class Hello extends React.Component {

    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.

The next step is to create a button to click on, so that we can trigger the updateMessage() method.

So let’s add a button to the render() method:

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>
  )
}

Here, we’re hooking an event listener onto the button, listening for the onClick event. When this is triggered, we call the updateMessage method.

Here’s the entire component:

class Hello extends React.Component {

    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>
        )
    }
}

The updateMessage method then calls this.setState() which changes the this.state.message value. And when we click the button, here’s how that will play out:

Congrats! You now have a very basic understanding of the most important concepts in React.

Angular design patterns

Angular Design Patterns

This article is Part 5 in a 5-Part Series.

Enumerator

“In opposition to type guards, if your class has a variable that can take multiple values at the same time from a finite list of values, then consider using the bit-based enumerator. Here’s an excellent example from https://basarat.gitbooks.io/:

    class Animal{ 
    flags:AnimalFlags = AnimalFlags.None 
    } 
 
    enum AnimalFlags { 
        None           = 0, 
        HasClaws       = 1 << 0, 
        CanFly         = 1 << 1, 
    } 
 
    function printAnimalAbilities(animal) { 
        var animalFlags = animal.flags; 
        if (animalFlags & AnimalFlags.HasClaws) { 
            console.log('animal has claws'); 
        } 
        if (animalFlags & AnimalFlags.CanFly) { 
            console.log('animal can fly'); 
        } 
        if (animalFlags == AnimalFlags.None) { 
            console.log('nothing'); 
        } 
    } 
 
    var animal = { flags: AnimalFlags.None }; 
    printAnimalAbilities(animal); // nothing


    animal.flags |= AnimalFlags.HasClaws; 
    printAnimalAbilities(animal); // animal has claws 

    animal.flags &= ~AnimalFlags.HasClaws; 
    printAnimalAbilities(animal); // nothing 

    animal.flags |= AnimalFlags.HasClaws | AnimalFlags.CanFly; 
    printAnimalAbilities(animal); // animal has claws, animal can fly

We defined the different values using the <<shift operator in AnimalFlags, then used |= to combine flags, &= and ~ to remove flags, and | to combine flags.

Angular design patterns

Angular Design Patterns

This article is Part 4 in a 5-Part Series.

Constructor

TypeScript constructors offer a pretty unusual, but time-saving, feature. Indeed, they allow us to declare a class member directly. So, instead of this lengthy code:

    class User{ 
    
    id:number; 
    email:string; 
    name:string; 
    lastname:string; 
    country:string; 
    registerDate:string; 
    key:string; 
    
    
    constructor(
        id: number,
        email: string,
        name: string, 
        lastname: string,
        country: string,
        registerDate:  
        string,key: string
    ){ 
        this.id = id; 
        this.email = email; 
        this.name = name; 
        this.lastname = lastname; 
        this.country = country; 
        this.registerDate = registerDate; 
        this.key = key; 
    } 
    } 

You could have:

    class User{
        constructor(
            private id: number,
            private email: string,
            private name: string,
            private lastname: string,
            private country: string,
            private registerDate: string,
            private key: string
        ){}
    }

The preceding code achieves the same thing and will be transpiled to the same JavaScript. The only difference is that it saves you time in a way that doesn’t degrade the clarity or readability of your code.

Angular design patterns

Angular Design Patterns

This article is Part 3 in a 5-Part Series.

Getters and setters

In TypeScript, you can specify optional arguments with the ? operator. While this feature is good and I will use it without moderation in the coming chapters, it opens the door to the following ugliness:

    class User{ 
    private name:string; 
    public  getSetName(name?:string):any{ 
            if(name !== undefined){ 
                this.name = name; 
            }else{ 
                return this.name 
            } 
    } 
    }

Here, we test whether the optional name argument was passed with !== undefined. If the getSetName function received something, it’ll act as a setter, otherwise, as a getter. The fact that the function doesn’t return anything when used as a setter is authorized by any return type.

For clarity and readability, stick to the ActionScript-inspired getter and setter:

    class User{
        private name:_string = "Mathieu";
        get name():String{
        return this._name;
        }
        set name(name:String){
        this._name = name;
        }
    }

Then, you can use them as follows:

    var user:User = new User():
    if(user.name === "Mathieu") { //getter

        user.name = "Paul" //setter

    }