These feature-complete services offer a great deal of functionality but also come with a hefty price tag for its more significant users. So for cost-conscious businesses, you'd have to look further afield.

Enter AWS CloudWatch Evidently.

For companies with developer resources and already utilising the AWS SDK in their language of choice, this is certainly worth considering if you require only a small subset of features. Like many serverless products, you're billed for the number of API calls you make once you reach a certain threshold. If you choose to store the events or metrics, these incur additional fees too. The free tier is quite generous, and if you set a retention policy on the CloudWatch logs, you aren't likely to be surprised by a huge bill at the end of the month.

If you're looking for a basic redirect test, or perhaps some component-level switching, this might be the service for you.

chris@chris-book:~$ python3 hello-world.py

This would work, and I thought that's just how you ran the code. Anyway, while starting a new course, I just discovered that you can streamline this process using a shebang:

1. Make the file executable using chmod (make sure you consider which users/groups should be permitted to do this, obviously)

2. Append #!/bin/python3 to the start of the file

    #!/bin/python3
    print("Hello World");
   

3. Execute the file

    chris@chris-book:~$ ./hello-world.py
    Hello World
   

Keep in mind that you can do this with other program files too.

Below are the six advantages of cloud computing, courtesy of Amazon Web Services:

1. Trade CapEx for OpEx - rather than paying upfront for hardware, you pay for it as its used

2. Benefit from economies of scale - cloud providers buy things at a much larger scale, so benefit from cheaper rates

3. Stop guessing capacity - spin up what you need, then update the hardware as your requirements change. This is much better than over-provisioning, resulting in expensive, under-utilised equipment.

4. Increased speed and agility - the lead time to acquire hardware and other services are minutes away rather than days, weeks and months seen by acquiring the hardware yourself.

5. Reduced data centre operational costs - running your own data centres is expensive. The physical building, all of the hardware and utility prices quickly stack up - and that's before staffing expenses. Make it Amazon's problem.

6. Go global in minutes - with cloud providers you can deploy to regions all around the world, to be closer to your users and provide the best possible experience.

chris@chris-book:~$ ls sho*.txt
shoe.txt shogun.txt shoot.txt shot.txt

chris@chris-book:~$ ls sho?.txt
shoe.txt shot.txt

chris@chris-book:~$ ls sho[efg].txt
shoe.txt

So you too can now be more powerful with your search!

You can change the style of all checkboxes with a simple line of code:

input[type="checkbox"] {
  accent-color: #a3e635; /* lime-green */
}

Checking MDN Web Docs, the browser support is pretty good too, so unless you're worrying about IE11, you should be free to use this as you wish.

Inspired by German Mathematician Carl Jacobi, who wrote "invert, always invert", it suggests an alternative method for tackling problems. Rather than identifying what you need to do in order to achieve a goal, first identify what outcomes you wish to avoid. These outcomes can then provide you with prompts on mistakes to avoid when you begin.

For example, take running a marathon. You could simply say "I'll start running a little bit further every day until I reach the 23-mile target". With inverted thinking, you identify the potential issues, things you absolutely wish to avoid:

• What if I hurt myself?

• What if I doubt my capabilities, or worse, quit?

• What if my training programme isn't suited for me?

• What if I eat the wrong food?

With some of these prompts in mind, you can now start to look at solutions:

• Find a good warm-up/warm-down routine

• Find a running partner or group to train with, to ensure accountability

• Research a training programme that suits my current running experience

• Research an appropriate diet to ensure my body is receiving the right fuel

On a similar note, historically I've always recommended people work backwards when tracking down a bug. For example, let's assume you're working on a bug report where a customer claimed they made a purchase but was never fulfilled. They didn't receive a confirmation email. You could tackle this by attempting to recreate the user journey from the very start, but you're immediately hit with questions like:

• How did they add the product to their basket?

• Did they receive an email?

And so on. However, you could also see if an email was sent, if a payment was made, or if the order was stored in the database. Rather than working through multiple execution paths, you'll find yourself working on a more tightly scoped problem area, making triaging issues much faster.

However, sometimes you only want a subset of data from a larger object, which is where TypeScript's utility types come in:

• Omit

• Pick

These let you create new types based on an existing type, but filtering in/out specific properties:

type User = {
  username: string;
  firstName: string;
  lastName: string;
  emailAddress: string;
  avatarUrl: string;
  address: {
    addressLine1: string;
    addressLine2: string;
  };
  createdAt: Date;
}

// Provides only username and avatarUrl properties
type MessageBoardUser = Pick<User, "username" | "avatarUrl">

// Provides firstName, lastName, emailAddress and address properties
type ShippingUser = Omit<User, "username" | "avatarUrl" | "createdAt">

• endsWith()

• includes()

• startsWith()

const firstName = "John";
const emailAddress = "john.doe@example.com";

console.log(emailAddress.startsWith(firstName.toLowerCase())); // true
console.log(emailAddress.includes("@")); // true
console.log(emailAddress.endsWith("gmail.com")); // false

Each of the three methods also accepts a second optional parameter that specifies an offset.

const fullName = "John Doe";

console.log(fullName.startsWith("John")); // true
console.log(fullName.startsWith("John", 4)); // false

Disclaimer: Each of these methods is case-sensitive. If you need case insensitivity, I'd recommend either regex or applying .toLowerCase() on both strings - just ensure you're doing it in an immutable fashion.

class User {
    firstName: string;
    lastName: string;

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

const user = new User("John", "Doe");

console.log(`${user.firstName} ${user.lastName}`); // John Doe

There's absolutely nothing wrong with this approach, however, I often say that the best programmers are the laziest ones*. Did you know you can define the class properties in line with the constructor definition? The following code sample is functionally equivalent to the first.

class User {
    constructor(public firstName: string, public lastName: string) {}
}

const user = new User("John", "Doe");

console.log(`${user.firstName} ${user.lastName}`); // John Doe

You may also modify the parameter scope by using protected and private keywords, as well as marking the property as readonly.

class Account {
    constructor(public emailAddress: string, private readonly password: string) {}
}

const account = new Account("john.doe@example.com", "hunter2");

console.log(account.emailAddress); // john.doe@example.com

// Property 'password' is private and only accessible within class 'Account'
console.log(account.password);

*From an automation perspective, not from a "don't write tests" view!

Secondly, you may define optional properties by appending a ? to the end of the property name. Easy as that!

class Child {
  readonly name: string;
  age: number;
  nickname?: string; // optional

  constructor(name: string, age: number, nickname?: string) {
    this.name = name;
    this.age = age;
    this.nickname = nickname;
  }
}

const alice = new Child("Alice", 10);
const bob = new Child("Robert", 5, "Bob");

console.log(alice.nickname, bob.nickname); // "undefined Bob"

// This can *only* be "heads" or "tails"
type Coin = "heads" | "tails"; 

const flip = (): Coin => Math.random() < 0.5 ? "heads" : "tails";

console.log(flip());

Obviously, there is a lot of similarity to using an enum , but has the benefit of generating slightly less code after compilation if that's your bag. Personally, I'd probably stick with a backed enum:

enum Coin {
  HEADS = "heads",
  TAILS = "tails",
}

const flip = (): Coin => (Math.random() < 0.5 ? Coin.HEADS : Coin.TAILS);

console.log(flip());

Well, unless you're working with JavaScript*. But don't worry, there is a way to give you the control you need without too much effort.

Below shows the creation of an employee named John Doe who gets paid 10,000 simoleons (since he lives in SimCity, naturally). The Employee function takes an object with two properties - name and salary , and stores them as local variables. Finally, with a sprinkling of closure magic, it returns a new object with 2 getters and a single setter. These three functions are the only ways to interact with the employee object, meaning direct access to _name and _salary are prohibited.

const Employee = ({ name, salary }) => {
    let _name = name;
    let _salary = salary;

    return {
        getName: () => _name,
        getSalary: () => _salary,
        setSalary: (newSalary) => _salary = newSalary
    }
};

const johnDoe = Employee({name: "John Doe", salary: 10000 });
johnDoe.getName(); // "John Doe"
johnDoe.getSalary(); // 10000
johnDoe.setSalary(12000);
johnDoe.getSalary(); // 12000

* No prefixing all property names with a _ won't save you

const list = [];

for (let i = 0; i < 10; i++) {
    list[i] = 0;
}

// [0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0]

This is fine and will do what I need. However, one of the benefits of JavaScript these days is the syntactic sugar that has been added in more recent releases of ECMAScript. So why not take advantage of Array.fill()?

const list = Array(10).fill(0);

// [0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0]

The fill() method also accepts two further, optional parameters to define the starting and ending indexes. For example, the code below states that we should set the fifth through ninth values of the list array with a 0.

const list = Array(10).fill(0, 5, 10);

// [5: 0, 6: 0, 7: 0, 8: 0, 9: 0]

const matches = (email.match("@")||[]).length;

However, the ||[] which defaults to an empty array if no @ characters are found strikes me as rather hard to read. Looking for alternatives, I found that you could use filter() instead:

const matches = [...email].filter(char => char === "@").length

I'm not convinced this is much clearer, but it's always good to see how other people tackle the same problem, you'll always learn new things.

Today I have been working my way through Ali Spittel's React.js Coding Challenges over on LinkedIn Learning to put what I've learned so far to the test. The challenge in question was to add a double-click listener to the window when a toggle button is clicked, then remove it again once the toggle button is clicked again.

Once I'd finished the task, I watch the solution and discovered that you can return a function from inside the setup function of a useEffect hook:

import { useEffect } from "react";

export default function windowEvent() {
    useEffect(() => {
        const handleDblClick = () => alert("mouse pressed");
        window.addEventListener("dblclick", handleDblClick);

        return () => window.removeEventListener("dblclick", handleDblClick);
    });
}

I'd never seen this before, but it turns out that this method is known as a clean-up function, which is executed when the component is re-rendered, before running the setup method again.