Today I Learned:

React event.code

🗓️ December 29, 2021 🏷️ React

Turns out (at least at the time of writing this TIL), that react doesn’t include the code property on their Synthetic Events.

Improving Scroll Performance

🗓️ October 24, 2021 🏷️ Best Practices

Turns out there’s a way to improve event listeners that are tied to the scrolling event in the browser.

const onScroll = (e) => console.log("sup", e)
window.addEventListener("scroll", onScroll, { passive: true })

This will make it so that our scroll handler will not block the main thread (yay!).

Read more

Intelligence and Wisdom

🗓️ September 01, 2021 🏷️ Random

Intelligence is knowing a tomato is a fruit. Wisdom is knowing you don’t put a tomato in a fruit salad. Charisma is convincing everyone that it’s a salsa.

Brought to you by Christine.

esbuild-loader

🗓️ July 15, 2021 🏷️ Cool Tech

There’s been a lot of new developments in the space of package bundlers. From the OG

Webpackto, Rollup to the new kid on the block esbuild each of them have their own unique set of features.

esbuild offers better build times as it is written in Go, which is compiled to JavaScript. The tradeoff here is that es5 isn’t supported (but that’s okay if you’re not supporting IE11). It’s pretty awesome but as it’s in active development and fairly new, it’s not as widely used as the other bundlers and therefore doesn’t have the rich plugin resource that somethings like webpack has.

However, you can leverage esbuild and plug it into a webpack config and via esbuild-loader

I did this at work today and it helped with devserver startup times and greatly improved the production build times.

Recursive vs iterative approach

🗓️ July 14, 2021 🏷️ Best Practices

There’s a reason why React is moving toward a linked list approach and moving away the recursive approach used in the current reconciler.

Recursion requires an O(n) call stack (causes jank). But if you do things iteratively, you can stop relying on stacks and push all object references into the heap. Arguably this is harder to reason about and harder to understand but the perf gains are totally worth it.

Document Fragment

🗓️ July 12, 2021 🏷️ Best Practices

So there’s this really handy web api that allows you to create a lightweight version of a Document and append nodes to said lightweight Document. The beauty with this is you can create this tree, make changes to it, and then all at once append the lightweight tree to the DOM.

This is much better than continually writing to the DOM and causing a shit ton of reflows.

Read more

Recursion

🗓️ July 01, 2021 🏷️ Random

Never forget, recursion occurs when a thing is defined in terms of itself.

YOU CAN HAVE ITERATION INSIDE OF A RECURSIVE FUNCTION.

Iteration and recursion aren’t mutually exclusive.

Feelings

🗓️ June 29, 2021 🏷️ Random

It’s normal to sit down with a few negative feelings about beginning your work. It’s how you handle those feelings that matters.

Post-Order Tree Traversal

🗓️ June 24, 2021 🏷️ CS

Learned about another way to traverse a tree! It’s called Post-Order.

Essentially:

  1. Go left as far as you can
  2. Go right as far as you can
  3. Visit Node

GET vs POST

🗓️ June 18, 2021 🏷️ Best Practices

All you need to keep in mind for a GET vs a POST. Basically, POST bodies are not limited whereas the GET values are limited by a character limit for the value.

Get and Post

Require Generic

🗓️ June 14, 2021 🏷️ TS

Want to make it so that people need to provide some sort of generic argument if they don’t use some predefined defaults for your TS code. Check this out:

type NoInfer<T> = [T][T extends any ? 0 : never];

type QT<T> = 'first' | 'second' | T;
type Yolo<T> = {
  data: QT<T>
}

function doSomething<T = void>(args: Yolo<NoInfer<T>>): null{
  // do something
  return null;
}

doSomething({ data: 'first' }) // okay
doSomething({ data: 'three'}) // not okay
doSomething<'three'>({ data: 'three' }); //okay

RTK query and React Query

🗓️ June 11, 2021 🏷️ JS

State management is hard but there’s a difference between state management in our apps versus managing our app’s server cache. Luckily, there are two libraries that we can use to help us with our server side state needs.

React query and RTK Query. We’re using React Query at work but RTK query looks cool too!

I’ll probably do a small POC this weekend to get a feel for the ergonomics.

Dates and stuff

🗓️ June 01, 2021 🏷️ JS

Whenever you’re going to be talking about dates, keep these things in mind:

  1. Formatting (locale)
  2. Timezone (this dictates how much time to add based on UTC)
  3. UTC (know what this is)

DateTimeFormat

🗓️ May 27, 2021 🏷️ JS

Turns out that there’s a neat little time formatter that most browsers ship with that allows us to do locale specific time formatting. It’s inside of the Intl.

  Intl.DateTimeFormat('en-US').format(Date.now());
Read more here...

Carl Sagan + Weed

🗓️ May 22, 2021 🏷️ Random

Turns out Carl Sagan was a big proponent of Marijuana. Who knew lolz.

How to deal with a stye

🗓️ May 04, 2021 🏷️ Random

Not a doctor and this is not medical advice

Lol so I got a stye and a home remedy that I’ve been using is a tea bag.

You steep the tea bag for one minute and when it’s bearable, rest the teabag on the affected eye for 5-10 minutes. Preferably use black tea.

Ambient TS files (*.d.ts)

🗓️ April 29, 2021 🏷️ TS

Alright, so I’ve been writing TS for a while and was never really sure why we needed these .d.ts files… until today.

The purpose of these files is so that authors/the community can backport popular JS libraries with TS type definitions. This allows library authors the freedom to keep on writing their JS code but allows users of TS to benefit with working code and the typings they need.

These typings probably exist in something like Definitely Typed. However, at work, we’re using a mix of JS and TS (JS is for the jest setup code) and therefore we were required to have ambient TS files so that our TS test code could benefit from the typings related to our JS files.

We are using module aliasing for our TestUtils so that we can do things like import { render } from 'TestUtils'. Under the hood, the render function is just a nicely wrapped render function from react-testing-library and so the return types are the same. There was a bug where if I tried to import the RenderResult from the testing library, VS code’s TS language server would yell at me for having an undefined module. The following code highlights the fix/issue.

working.d.ts
// TYPESCRIPT IS A PAIN
// https://stackoverflow.com/questions/39040108/import-class-in-definition-file-d-ts/51114250#51114251
declare module "TestUtils" {
  export function render(
    v: any,
    other?: { initialState?: any }
  ): import("@testing-library/react").RenderResult
}
not-working.d.ts
// doesn't work
import { RenderResult } from "@testing-library/react"

declare module "TestUtils" {
  export function render(v: any, other?: { initialState?: any }): RenderResult
}

document.activeElement

🗓️ April 23, 2021 🏷️ JS

If you want to know what element on the page currently has focus, you can use document.activeElement to get access to the reference of the currently focused element.

I’m using it to handle the / key to force my website to move focus onto the search input (similar to what github does) and to not try to make the site refocus the search if is the currently active element.

React.FC - don't bother

🗓️ April 21, 2021 🏷️ TS

React.FC was more meant to help beginners get more comfortable writing React components with TS but honestly, the cons of using it (always having the ability to pass children to your component even though you might not be rendering said children) make me want to not use it.

If you’re wanting to type children, you can do:

type Props = {
  children?: React.ReactNode
}

TypesScript Utility Type - Parameters

🗓️ March 29, 2021 🏷️ TS

There’s a neat little utility type in TypeScript that lets you reach into a function and discern the types of the function arguments. 

Parameters<(s: string) => void>;
// [s: string]
Read more

attr

🗓️ March 23, 2021 🏷️ CSS

There’s a neat little css function that lets you retrieve the value of an attribute of the selected element and use it in the stylesheet!

For example:

<h1 data-color="red">Hello</h1>
h1 {
  color: attr(data-color);
}

Would generate an h1 with red text!

Read more

Good design

🗓️ March 11, 2021 🏷️ Random

While working my way through The Pragmatic Programmer I came by a tip that really struck a chord with me.

Good design is easier to change than bad design.

Make things easier to change. Why is decoupling good? By isolating concerns, we make each easier to change. Why is the single responsibility principle good? A change in requirements is mirrored by a change in one module.

Wood filler

🗓️ March 07, 2021 🏷️ Random

If you’ve created too large of a hole inside of your drywall and you want to reuse the same hole for perhaps a drywall anchor, using spackle as filling won’t be enough.

Use wood filler; this’ll give you the consistency and strength you need for loadbearing purposes in the drywall.

Namespace pattern in React

🗓️ March 04, 2021 🏷️ React

So I’ve seen this pattern around but didn’t know it had a name! If you’ve ever used Context in React, you’re aware of there being a Provider and a Consumer and those two are namespaced to a specific Context. Keep in mind, this is assuming you’re using React < 16.8.0.

For example:

const SomeContext = React.createContext()

const SomeContextProvider = ({ children }) => {
  const [yolo, setYolo] = React.useState(false)

  return <SomeContext.Provider>{children}</SomeContext.Provider>}

const SomeContextConsumer = ({ children }) => {
  return (
    <SomeContext.Consumer>      {(context) => {
        if (context === undefined)
          throw new Error("Must be used within a SomeContextProvider")

        return children(context)
      }}
    </SomeContext.Consumer>
  )
}

I’m still trying to figure out when this should be used.

overflow, position absolute, stop hiding

🗓️ February 23, 2021 🏷️ CSS

So if you have an element positioned absolutely in a container and the container has overflow hidden the absolute element is gonna be hidden.

Need a structure of grandparent (relative position) > parent (overflow hidden) > child (position absolute)

Read more here

Valid header values

🗓️ February 22, 2021 🏷️ Best Practices

Turns out header values are always strings. So if there’s a header value like x-header and you want to see if it is true or false in JS, doing Boolean(req.header[‘x-header’]) would be true regardless because “true” and “false” are both true for Boolean constructor.

You can do something like req.header[‘x-header’] === ‘true’

Massive SVG and art board sizes

🗓️ February 16, 2021 🏷️ Random

So lol when I was exporting an SVG from Affinity, I noticed that the svg size was around 3 mb. Reducing the art board size made the export size waaaay better.

AST Explorer

🗓️ February 10, 2021 🏷️ JS

Learned about a parser that lets you convert JS into an AST

YOLO

affinity designer

🗓️ February 09, 2021 🏷️ Random

Turns out we aren’t forced to be shackled to the Adobe suite 🤣. There’s similar software called Affinity that does pretty much what Adobe does (without the arm and leg payment).

Check it out

VSCode regions

🗓️ January 18, 2021 🏷️ Random

TIL that vscode has region folding! It’s like this:

//#region
  const y = () => {}
  const x = () => {}
//#endregion
Read more here

Don't forget about closure

🗓️ January 08, 2021 🏷️ Scala

Not really a TIL but more of a reminder to myself to not forget about the damn concept of closure and to leverage it in Scala. Just because you have one function to handle sorting, doesn’t mean that function can’t have some helper functions defined within its body.

content-editable

🗓️ January 01, 2021 🏷️ html5

Turns out you can have a contenteditable attribute on your html and that’ll make (you guessed it), your content editable lol.

…go ahead… try it out on the list below… you know you want to. 🤪

  • Food
  • Food
  • Food

Collapsing Margins

🗓️ December 29, 2020 🏷️ CSS

So today at work I noticed that I was not getting the spacing I expected from block level elements. The reason this was occuring was because my team and I were relying on margins for spacing out elements, but we should have been relying on padding instead.

Margins collapse in on each other (for siblings). If element A has a margin bottom and element b is its sibling and underneath and has a margin top, we would see the margin bottom of element A “collapse” (not be applied) and only see the margin top of element B.

Read more

Printer ink

🗓️ December 26, 2020 🏷️ Random

TIL that printer ink requires a vehicle (a resin like honey) and a pigment (a powder). There’s a lot that goes into this process and it is pretty damn cool.

How's it made

Credit card skimmers and shimmers

🗓️ December 22, 2020 🏷️ Random

TIL that there are credit card scams around like skimmers and shimmers that oftentimes show up at gas station pumps and other brick-and-mortar shops.

To avoid being a victim, do not pay at the pump if they require you to insert the card at the pump (these pumps can be tampered with whilst the inside card reader most likely will not be).

Pay with tap when you can

Also, don’t forget to check your transactions regularly and check out free credit reporting services like Borrowell.

Abstract classes vs Traits

🗓️ December 21, 2020 🏷️ Scala

So Scala is a single inheritance language but allows classes to utilize multiple traits (these are like interfaces in Java). Traits and Abstract classes in Scala are essentially the same but there are some key differences.

  1. Traits cannot have constructor parameters (you can’t do a new trait)
  2. A class can inherit from multiple traits.
  3. Traits are for behaviors. Abstract classes are for things.

toFixed vs toPrecision

🗓️ December 15, 2020 🏷️ JS

toFixed(n) provides n length after the decimal point; toPrecision(x) provides x total length. Both will round! Both are functions that exist on the Number prototype!

Mac emoji keyboard

🗓️ November 30, 2020 🏷️ Mac

TIL keyboard shorcut for emojis on a mac is: Command-Control-Space

volta

🗓️ November 30, 2020 🏷️ JS

While working on a javascript monorepos course, I was exposed to Volta.

Volta eases the node development process by allowing developers to easily pin node versions to a project and will automatically switch the development machine to the right version when switching between contexts 😃.

s-max-age

🗓️ November 23, 2020 🏷️ Cool Tech

TIL that there is a cache control header for a shared cache. The s-max-age is similar to the max-age in that they both set a timer to invalidate a cache for a particular resource. The difference between the two is that the s-max-age applies to shared content and therefore applies to content on a CDN.

This is better in circumstances where we want to force an invalidation for a particular resource. This is not possible with max-age.

Resort Area!

🗓️ November 20, 2020 🏷️ Random

TIL that there’s a dope resort spot in South Asia. Maldives.

Netlify Identity Widget

🗓️ November 16, 2020 🏷️ Cool Tech

There’s a Netlify Identity Widget (that is framework agnostic) which can be leveraged to add some authentication to web apps deployed to Netlify.

There’s a limit of 1000 people but for a small e-commerce business that’s more than enough.

Here it is

npm i prefix

🗓️ November 16, 2020 🏷️ JS

So you can actually run an npm install for a directory without having to actually change directories. Look: npm install --prefix /my/project/root

react-window

🗓️ November 12, 2020 🏷️ JS

If you’re rendering over 50 rows in react-table and messing around with complicated filter logic, it’s wise to utilize something like react-window to get some performance gains as users are not going to be interacting with elements not in the viewport so we shouldn’t tax them for the rendering costs behind such frivolous elements.

toLocaleString

🗓️ October 29, 2020 🏷️ JS

TIL that there is a method built into the Date object toLocaleString. It essentially allows us convert a date string to a locale specific string.

Read more here

Scala Case Classes

🗓️ October 20, 2020 🏷️ Scala

Scala case classes are the bread and butter of Scala data types! Learn them ye fool.

The syntax is as normal but with a case prefix. By using the case word before class, Scala provides us some functionality out of the box, including but not limited to:

  1. the ability to omit the val keyword in constructor calls. (A field for each constructor argument)
  2. a nicer toString method for classes
  3. a sensible equals which operates on the field values of an object
  4. a copy method that creates a new object with the same field values as the current one
case class Cat(color: String, food: String)

// vs

class Cat(val color: String, val food: String)

Scala comparisons

🗓️ October 20, 2020 🏷️ Scala

For Scala’s case classes we get a sensible == operator which is different from Java’s—it delegates to equals rather than comparing values on reference identity.

Soooo.

new Person("Noel", "Welsh") == new Person("Noel", "Welsh")
// res4: Boolean = true

Scala pattern matching. If on steriods

🗓️ October 20, 2020 🏷️ Scala

Pattern matching in Scala allows us to do some very nifty things. This is all possible due to the fact that the comparison of objects is not done at the reference level but at the value level.

Refer to the TIL regarding Scala’s case classes😁.

case class Cat(color: String, food: String)

val oswald = Cat("black", "Chips")

object ChipShop {
  def willServe(c: Cat): Boolean = {
    c match {
      case Cat(_, "Chips") => true //don't care about the first argument
      case Cat(_, _) => false // don't care about any arguments (this is the default case essentially)
    }
  }
}

ChipShop.willServe(oswald) // true

A pattern can be one of

  1. a name, binding any value to that name;
  2. an underscore, matching any value and ignoring it;
  3. a literal, matching the value the literal denotes; or
  4. a constructor-style pattern for a case class.

useLayoutEffect vs useEffect

🗓️ October 20, 2020 🏷️ React

99% of the time you want to be using useEffect but there are some rare use cases for useLayoutEffect and I incidentally ran into one today at work 😂.

  • useLayoutEffect if you need to mutate the DOM and/or perform some measurements
  • useEffect if you don’t interact with the DOM at all.

Why React Elements have a "$$typeof" Property

🗓️ October 10, 2020 🏷️ React

While making my way through a new React course, I learned that React elements have a $$typeof property to help mitigate issues with XSS attacks.

In essence, the $$typeof prevents anyone from trying to get React to create invalid elements via JSON. Even if a user passed in some JSON that mimicked what a React Node looks like, the value of $$typeof is a Symbol and this cannot be mocked by JSON!

Read More

package.json main vs module

🗓️ October 05, 2020 🏷️ JS

TIL that the main attribute in package.json refers to the entry point for a commonjs node module and that the module attribute refers to the es module that can be used by bundlers such as wepback and rollup.

Read more here

Promise Extensions for JavaScript (prex)

🗓️ October 01, 2020 🏷️ JS

While I was working on something at my day job, I learned about prex.

It essentially allows us to cancel our promises (think axios or some other xhr).

token-example
return new Promise<void>((resolve, reject) => {
      const request = http.get(from);

      // abort the request if canceled.
      const registration = token.register(() => {
          request.abort();
          reject(new Error("Operation canceled."));
      });

      request.on("error", err => {
          registration.unregister();
          reject(err);
      });
}

Preapproval and a line of credit

🗓️ September 21, 2020 🏷️ Random

TIL it’s better to apply for a limit increase on a line of credit (LOC) if there’s a legitimate reason that this increase is required. Regardless of the approval of the LOC increase, one’s credit score takes a hit so it makes sense to try and increase one’s odds of being approved.

Having a reason for a limit increase (like a home reno) is more likely to get approved than someone who just wants some more backup funds.

Start with why

🗓️ September 15, 2020 🏷️ Random

Whenever you’re talking about setting up a business or a new venture, it’s important to start with why. Start with why, then move to how, and then move to what… it might be worth reading this book:

Start With Why

Graceful Shutdown

🗓️ September 10, 2020 🏷️ JS

Basically, avoid having to do any major logic from the SIGTERM signal or any other EXIT signals in node because they can often times be fired twice. It’s much better to run any clean up code that you want in the start of the process versus the end.

Also check out death on npm. It’s a handy helper library.

pascal-triangle

🗓️ September 03, 2020 🏷️ Cool Tech

While working through my functional programming course, I encountered a fun little leet code exercise. It’s fucking computer science so I’m not even surprised I had to solve a problem like this -.-

Anyway, here’s how the pascal triangle code will work in JS and in Scala

js-example
function run() {
  for (let row = 0; row <= 10; row++) {
    const rec = []
    for (let col = 0; col <= row; col++) {
      rec.push(pascal(col, row))
    }
    console.log(rec)
  }
}

const pascal = (col, row) => {
  if (col === 0 || row < 1 || col === row) return 1
  else return pascal(col, row - 1) + pascal(col - 1, row - 1)
}

run()
scala-example
def main(args: Array[String]): Unit = {
  println("Pascal's Triangle")
  for (row <- 0 to 10) {
    for (col <- 0 to row)
      print(s"${pascal(col, row)} ")
    println()
  }
}

/**
  * Exercise 1
  */
def pascal(c: Int, r: Int): Int = {
  // base case is if c = 0, just 1
  if (c == 0 || r < 2 || c == r) 1
  else pascal(c, r -1) + pascal(c - 1, r - 1)
}

Shadow DOM

🗓️ August 18, 2020 🏷️ Best Practices

Encapsulation in the web is hard (especially when it comes to CSS)… thank god for the Shadow DOM.

The Shadow DOM allows us the ability to keep the markup structure, styling, and behavior (JS) so that different parts of the application do not clash. This is entirely important for a micro frontend architecture — we do not want style clashing.

My colleague Danny and I were able to utilize the Shadow DOM and Single SPA to create an encapsulated navbar. 😁

Shadow

Read more about it here

console.info

🗓️ August 06, 2020 🏷️ JS

TIL that Jest will buffer console.log statements but this is not true for console.info.

lodash fp

🗓️ August 05, 2020 🏷️ JS

TIL that lodash-fp was merged into lodash but there are some discrepancies. For example, compose is flow and they both have curry.

Proactive

🗓️ July 29, 2020 🏷️ Random

Be proactive! Stay ready so you don’t have to get ready 😁

express-middleware

🗓️ June 03, 2020 🏷️ Backend

Express middleware is broken up into different types based on the number of arguments your middleware function takes. A middleware function that takes 4 arguments is classified as “error handling middleware”, and will only get called if an error occurs.

tsconfigs

🗓️ May 19, 2020 🏷️ Best Practices

Ever run into the problem of having your __tests__ directory sitting outside of your src causing issues with TypeScript? I’m a big fan of colocating tests but if you’re ever working on a codebase that doesn’t embrace this philosophy and instead has a __tests__ directory that sits at the same level as src, you may need a a separate tsconfig for your tests.

This is possible thanks to the -p flag in TS and the fact that we can extend tsconfig files. For the project in question, we used:

  1. tsconfig.json
  2. tsconfig.build.json
  3. tsconfig.test.json
Read more here

Struggling

🗓️ May 09, 2020 🏷️ Random

Struggling is not failing.

Struggling is succeeding on not giving up.

Free HTTPS certs

🗓️ May 07, 2020 🏷️ Cool Tech

Don’t be a sucka! TIL that you can get free HTTPS on your server thanks to a handy tool called Certbot.

Suck on that people who tried to charge me for HTTPS.

Promise Based Node Functions

🗓️ May 04, 2020 🏷️ Node

TIL during a basic async node training video, that the node core api exposes promisified (I think that’s a word) functions. For example fs provides a promise based API.

Read more

TypeScript declarations

🗓️ April 27, 2020 🏷️ Best Practices

My colleague Danny taught me how to easily create exportable interfaces for react components.

Rather than exporting interfaces in a component (imperatively), you can set up a typings.d.ts inside of a directory and it will be available to all components that reside in subdirectories. 😁

GeneralComponent
|--> GeneralComponent.tsx
|--> typings.d.ts
|--> Specialized // has access to interfaces in typings
     |---> Specialized.tsx
     |---> __tests__

Another valid way to do things is split typings in this way.

src/types
|--> canvas.d.ts
|--> interfaces.d.ts

Model vs Controller

🗓️ April 21, 2020 🏷️ Backend

After a brief conversation with Darnell, TIL that a controller should only be concerned with the processing of a request. Database logic etc. should live in the Model.

I’m such a noob 😆

Internationalization in React

🗓️ April 16, 2020 🏷️ React

This technically isn’t something that I learned “today” but it is something that I wanted to make note of! If you’re ever working on a project and need to support internationalization, your library of choice— assuming you’re writing in React— should be react-i18next!

Why? My coworker Vincent wrote up a great ADR (Architectural Decision Record) and evaluated the library and some of the benefits it totes is…

  1. It has a hooks implementation so there’s no change needed to be made to the render portion (the view) of your React components.
  2. It generates translation files in a directory that can be easily handed off to a translator to populate
  3. There’s enterprise options available if ye need em!

Keyboard events, divs, and tabIndex

🗓️ February 18, 2020 🏷️ JS

Vincent and I learned that if you’re attempting to add keyboard events to divs, you’ll want to supply a role and a tab-index if you’re wanting to react 😉.

Axios and Content-Type

🗓️ February 11, 2020 🏷️ JS

During work today, my colleague Mo and I were having issues making DELETE requests to a micro service that he had created. In Postman and the standard XHR function that ships with Google Chrome, the delete requests were going through with no problem but when we tried to make a call via axios.delete(url/id), the server kept returning a 400 error.

The truly peculiar thing was that making a call in the following manner worked:

axios({
  method: "DELETE",
  url: `url/${id}`,
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer SOME_TOKEN",
  },
})

However, this failed:

axios.delete(`url/${id}`, {
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer SOME_TOKEN",
  },
})

Long story short, TIL: axios.delete will drop the content-type header (which is the right behavior) so my buddy Mo had to change up his micro service endpoint to not expect a content type 😁!

California stop

🗓️ February 06, 2020 🏷️ Random

My girl taught me about the California stop; it’s essentially the same thing as a rolling stop but cooler sounding.

WW2, Jews, and a Homeless Woman

🗓️ February 02, 2020 🏷️ Random

I’ve always believed wholeheartedly in the following quote,

A fool will learn nothing from a wise man. But a wise man will learn much from a fool.

Yesterday evening, I was approached by a visibly homeless woman and amidst her musings about how Canada is a flawed nation where people are left to suffer as corporate greed consumes the very essence of the city and about how one doesn’t necessarily need a highschool education to be intelligent, she dropped a nugget of wisdom on me that I’ll carry with me for quite some time.

According to this woman, and I googled this after to make sure that it was in fact true, the people of Denmark actively assisted in helping Jewish Danes escape from Hitler by evacuating them to neutral Sweden.

By no means am I saying that this woman is a fool; please don’t misunderstand me. What I’m trying to hit home with this TIL is that wisdom can come from anywhere, whether it’s a college professor or a homeless woman who, and I can’t make this up, began urinating in her pants mid conversation… everyone has got something to offer.

EC2 tiers

🗓️ January 27, 2020 🏷️ Cool Tech

Long story short, t tiers of ec2 instances are spotty and unreliable; stick to using m series at the very least

Focusing in with focus-within

🗓️ January 16, 2020 🏷️ CSS

The focus-within pseduo class represents an element that has received focus or contains an element that has received focus.

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}
Read more here

Single sign-on

🗓️ January 11, 2020 🏷️ Cool Tech

Single sign-on (SSO) is a property of access control of multiple related, yet indepdent records. Thanks to this property, users can log in with a single ID and password to gain access to any of several related systems.

If you’re working in a corporate setting, this is how you’re able to seamlessly switch between applications (maybe in the browser) and not have to log in despite the fact that all these systems have some sort of authentication and authorization piece associated with them.

Read more about it here!

Components and Inversion of Control

🗓️ November 21, 2019 🏷️ React

A neat little concept that I learned about (just briefly) today is this idea of inversion of control. Essentially, assuming that we’re talking about React/Vue components, instead of having a mega component that accepts several different props to handle various things like position, aligment, etc, it sometimes make more sense to have a component that inverts control to the caller.

This means that we can extract out our business logic to a base component and then have specialized components that utilize the inversion of control to create a huge combination of different specializations/configurations. For exampe, we could have a Base Accordion that implements some core business logic and the rendering/extending can be left to a specialized implementation like Left aligned accordion or All can open acccordion.

The benefits of this pattern are the following:

  1. We no longer have to ship unncessary code to users — people only get the code that’s relevant to their use case
  2. Our bundle sizes will drop considerabley because of number 1
  3. We don’t fall victim to the “it’s only one more if statement” trap… if someone wants to extend our base component we expose the API’S they need to easily do this.
Thanks to Kent for the blog post!

UTF-8 and encodings

🗓️ November 17, 2019 🏷️ Cool Tech

I’ll be honest, up until today, I never really cared about character encodings and didn’t ever bother to learn anything about them… what a huge mistake! Character encodings are the unsung heroes that allow us to display languages (besides English) reliabely on computer systems.

The gist of UTF-8 is that it is an encoding that allows us to take Unicode code and map said codes to meaningful linguinstic representations. Codes that are between 0 and 127 occupy 8 bits — a single byte — and then any codes above this upper bound can use up to 6 bytes. The beauty of this system is that strings encoded in UTF-8 look exactly the same as strings encoded in ASCII. Americans are chilling and don’t need to worry about squat, while the rest of the world has to “jump through hoops” to make sure that they’re alphhabet will work across computer systems.

Read more here

Plop JS -- making your project structure consistent

🗓️ November 14, 2019 🏷️ JS

So here’s a nice little thing I’m going to try and get people using at work! PLOP js!

Essentially, it allows us to keep our project structure consistent by creating a CLI tool that will help automate the creation of files that should exist for various modules in our codebase. For example, if we are creating a React component, a structure that we’d like to enforce in order to keep our project neat and tidy is:

  1. componentName > file name
  2. componentName > index.js
  3. componentName > __tests__

Setting up your own private registry!

🗓️ November 13, 2019 🏷️ JS

When it comes to managing npm packages for your organization, there’ a great little package called Verdaccio

Verdaccio is a light-weight npm proxy registry. It allows us to host private Node.js packages and is compatible with all client package managers, such as Yarn and npm. There’s even a Docker image you can use to get you up and running!

Headless UI Components!😎

🗓️ October 25, 2019 🏷️ React

A headless UI component is a component that offers up maximum flexibility by providing no interface itself! This sounds like a radical idea but for library authors, it’s a great pattern to provide their users with all that sweet sweet functionality that they’re craving without any of the bloat/stylystic decisions that come with interface decisions.

This pattern works great when the logic of a component is complex and can be decoupled from its visual representation.

From a React perspective, this can be acheived via an HOC, render props, or if you’re using React > 16.8, hooks. Below is an example of two different interface implementation of a very simple toggle — the state isn’t complicated but since we created this headless interface, the UI can easily be changed/edited and does not suffer from the opinions of the library author

The Example

renderProps
class Toggle extends React.Component {
  state = {
    on: false,
  }

  handleClick = (cb = () => {}) => evt => {
    this.setState({ on: !this.state.on }, () => cb(evt))
  }

  render() {
    const { state, handleClick } = this
    return this.props.children({ state, handleClick })
  }
}

function CheckBox() {
  return (
    <Toggle>
      {({ state, handleClick }) => {
        return (
          <input
            type="checkbox"
            id="scales"
            name="scales"
            checked={state.on}
            onChange={handleClick()}
          />
        )
      }}
    </Toggle>
  )
}

// Just some simple styled components
// to illustrate how we can decouple the styling from the logic
const Label = styled.label``
const Input = styled.input``
const Slider = styled.span``

function PrettyToggle() {
  return (
    <Toggle>
      {({ state, handleClick }) => {
        const appliedHandleClick = handleClick(console.log)
        return (
          <Label>
            <Input
              type="checkbox"
              checked={state.on}
              onChange={appliedHandleClick}
            />
            <Slider />
          </Label>
        )
      }}
    </Toggle>
  )
}
hooks
function useToggle(cb = () => {}) {
  const [on, updateClick] = React.useState(false)
  const event = React.useRef()

  React.useEffect(() => {
    cb(event)
  }, [on])

  return {
    on,
    handleClick(evt) {
      event.current = evt
      updateClick(!on)
    },
  }
}

function HookPrettyToggle() {
  const { on, handleClick } = useToggle(console.log)

  return (
    <label class="switch">
      <input type="checkbox" checked={on} onChange={handleClick} />
      <span class="slider round"></span>
    </label>
  )
}

function HookCheckBox() {
  const { on, handleClick } = useToggle()

  return (
    <input
      type="checkbox"
      id="scales"
      name="scales"
      checked={on}
      onChange={handleClick}
    />
  )
}

Hypermedia 🤔

🗓️ October 22, 2019 🏷️ Backend

In the Rest maturity model, Hypermedia is considered to be the most mature — the highest level.

  1. The swamp of Pox (XML)
  2. Resources
  3. HTTP Verbs
  4. Hypermedia

In a nutshell, Hypermedia has REST endpoints expose links to other related data. For instance, if there was an endpoint that existed to fetch all the products in a particular catalog, each product resource in the payload would have a _links property that had attributes that would allow users of the API via self to navigate to the respected product. Just by visiting products, I’d have a way of getting to a specific product without having to store the API endpoint in my source code; the initial API call would prove it to me.

{
  "_embedded": {
    "products": [
      {
        "title": "Navy blue stone wash jeans",
        "seller": "Revtown Jeans",
        "_links": {
          "self": {
            "href": "/products/42"
          }
        }
      }
      // more products ...
    ]
  }
}
Read More

A taste of Node

🗓️ August 10, 2019 🏷️ Backend

Node is super useful for doing high throughput low latency I/O tasks! Here’s a diagram that roughly describes how Node works (I omitted libuv but you can bet it’s there):

Server/A machine                                               World/Another machine
+-----------------------------------------------+              +-------------+
| +-------------+                               |              |             |
| |JS           |                               |              |             |
| |             |                               +-------------->             |
| |             |                               |              |             |
| |             |                               |              |             |
| |             |                               |              +-----+-------+
| +---+--^------+                               |                    |
|     |  |                                      |                    |
|     |  |                                      |                    |
|     |  |                                      |                    |
|     |  |                                      |                    |
|     |  |                                      |                    |
|  +--v--+------------+  +------------------+   |                    |
|  |Node (C++)        |  |OSS               |   |                    |
|  |                  |  |                  |   |                    |
|  |                  <--+                  |   |                    |
|  |                  +-->                  |   |                    |
|  |                  |  |                  |   |<-------------------+
|  |                  |  |                  |   |
|  +------------------+  +------------------+   |
|                                               |
+-----------------------------------------------+

Axios, a DAM, and preflight

🗓️ July 30, 2019 🏷️ Best Practices

When making a request to a server, if they aren’t accepting OPTIONS requests, you’re going to have a bad time. Axios and Fetch make preflight requests by default so if you want to circumvent this, you’ll have to use the vanilla XHR capabilities.

Don't use the unload event!

🗓️ July 14, 2019 🏷️ Web API

The unload event that is available to us web developers isn’t consistent across browsers (but we already know that many things arent 😂). Really, if you want to have predictable behavior and need to fire off some event/code when a user leaves/closes your page, you should be listening to a page visbility change. Read more here

Buddy works!

🗓️ July 05, 2019 🏷️ Cool Tech

Buddy works allows us to create pipelines for our projects! Similar to how envoyer and deploybot works!
It comes with a bunch of prebuilt recipes for when you try to set up your actions. We’re using it to do deployments to a project site after PRs are merged and firing off notifications on slack!

Check it out

Make the right thing the easy thing

🗓️ July 04, 2019 🏷️ Best Practices

If you want your code to be tested, make it easy to test!
If you want people to do the right thing, make the right thing the easy thing!
When people get lazy, we can’t rely on discipline — make the lazy thing the right thing!