Elisabeta Nitura

Based on how you define your event handlers you can either rely on Typescript’s inference or have to supply the types for the handlers.

If you use inline event handlers then you don’t need to provide types and can just write them like you would in a regular React project.

Similar to how things are done for functional components in classes we can use a mix of Typescript’s inference and our own interfaces.

There are multiple approaches to typing the props and here are two of them.

interface ChildProps {
  color: string;
}

export const Child = ({color}: ChildProps) => {
  return <div>{color}</div>
}

import { Child } from './Child'

const Parent = () => {
  return <Child color="fuchsia" />
}

export default Parent

When using Typescript with React you don’t need a lot of changes to your codebase.

First it’s the file extensions, you’d use .tsx for components and .ts for the rest of the files that would normally be .js files.

Logging information should be managed differently in terms of how much detail should be included and what types of logging should be active in which scenario.

Managing NULL values

Go is not good at managing NULL values in db records.

For example if a field contains a NULL values that is supposed to be converted into a string that will fail. One solution is to change the field you’re scanning into from string to sql.NullString.

We’re using a MySQL driver along with the database/sql package from the std library.

“import (
    "database/sql"
    _ "github.com/go-sql-driver/mysql"
)”

We assign the driver import to _ because main doesn’t actually use it however we need the init of the package to run so that it can register itself with the database/sql package.

When you have your handlers spread out over multiple packages you can’t use the simple pattern of declaring your handlers as methods against the application struct (I don’t see why at this point => I’m missing something; is it because you can only declare the handlers against the app struct if they’re in the same package?).

The DefaultServeMux

The reason why you can skip creating a mux and register routes with just http.Handle() or http.HandleFunc() is because Go creates a global var where it stores a default mux instance.

Sentinel errors are error objects stored in a global variable. They are created using the errors.New function.

The idiomatic way to manage config vars is with command line flags. While you can use env vars, there’s advantages in using the cli flags:

1. cli flags can have default values, env vars cannot
2. cli flags get automatic type conversions (flag,.String(), flag.Int())
3. they are documented when starting the app with the -help flag

go.sum

This file contains the crypto checksums representing the content of the required packages in go.mod.

CSS blocks rendering, meaning that while CSS is downloading and the CSSOM is being built no rendering is done on the screen. However the HTML is still being parsed and the DOM is still being constructed.

Once the browser starts receiving the response of a HTTP request it starts processing its content. As it encounters links to resources it will begin downloading them. However when it encounters CSS stylesheets it’s going to wait to download the file and finish processing it before rendering anything. That means that if the CSS file is large and takes time to download and process, the user will be waiting with nothing to see on the page.

Finding the right metrics

“For example, think about the last time you read a news article online. As the page loaded, what were you waiting for? The most probable answer is that you were waiting for the text content of the article itself. The DOMContentLoaded event, also reported by WebPageTest, is like the load event except that it doesn’t wait for images to be displayed. The timing of this event may be a more appropriate metric to track because the time to load the ancillary images should not necessarily be taken into account. The default metric is not always the most relevant to the page in test.”

Stats

• 100ms is the limit for having the user feel that the system is reacting instantaneously
• 1s is about the limit for the user’s flow of thought to stay uninterrupted, even if they will notice the delay
• 10s is about the limit for keeping the user’s attention
• 1s slowdown resulted 11% fewer page views, 7% less conversions - Aberdeen Group
• Akamai found that a 2s delay in web page load time increase bounce rates by 103%
• 53% of users will leave a mobile site if it takes more than 3s to load
• if you want users to feel like your site is faster than your competitors, you need to be 20% faster for them to notice

The steps to create a web page are: create the DOM, create the CSSOM, merge them into a render tree, calculate the layout based on the render tree and paint the results on the screen.