JS


Back to Tags

RTK query and React Query

🗓️ June 11, 2021

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

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

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...

document.activeElement

🗓️ April 23, 2021

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.

AST Explorer

🗓️ February 10, 2021

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

YOLO

toFixed vs toPrecision

🗓️ December 15, 2020

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!

volta

🗓️ November 30, 2020

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 😃.

npm i prefix

🗓️ November 16, 2020

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

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

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

package.json main vs module

🗓️ October 05, 2020

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

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);
      });
}

Graceful Shutdown

🗓️ September 10, 2020

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.

console.info

🗓️ August 06, 2020

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

lodash fp

🗓️ August 05, 2020

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

Keyboard events, divs, and tabIndex

🗓️ February 18, 2020

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

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 😁!

Plop JS -- making your project structure consistent

🗓️ November 14, 2019

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

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!