Taran_logo_black
TILBLOGABOUT

Today I learned about...
js

Back to all tags

10.04.2024js

GROQ

I also learned that Sanity has their own query language for working with JSON. Might be worth looking into if you need to do some transformations and just move it into the query versus doing it in the code.

Read More

TIL about a sick template for building a headless shopify theme with Sanity and Hydrogen.

Read More
14.03.2024js

trigger.dev

Need to run background jobs? Not writing Ruby On Rails and therefore not using Sidekiq? Check out trigger.dev

I can probably use this somewhere in the future but TBD 🤔!

11.10.2023js

vercel serve

TIL about serve by vercel. It lets you serve your SPA/static files, incredibly easily! We may or may not be using it at work for some of our SPAs 😉.

Check it out!

every on the JavaScript Array object is great since it checks to see if a given callback function is true for every value in the array… but there’s some caveats to it. Namely, every will return true for the empty array, and it does not take into consideration empty slots during its processing.

Refer to the following code to get an understanding of the caveats:

const isNumber = (v) => typeof v === 'number'

[].every(isNumber) // true
[1, ,2].every(isNumber) // true
[1, null, 2].every(isNumber) // false

28.06.2023js

shadcn

Check out Shadcn to learn more about re-usable components built using Radix UI and Tailwind CSS! It’s not a component library; you copy pasta the code you need into your project 😛!

There’s a new kid on the block and this new kid is a game changer! Panda is a new css-in-js solution that works in the server-first framework era!

While working on my site, I realized that there was a nifty utility that handles merging my tailwind classes for me!

On NPM

TIL that there’s a nifty methd on the Object type in JS: fromEntries. It’s the counterpart of entries method that exists on the Object.

Here’s an example for you:

let obj = { foo: "bar", baz: 42 }; 
const entries = Object.entries(obj);
console.log(entries);
// Expected output: [["foo", "bar"], ["baz", 42]]

obj = {}
console.log(obj)
// Expected output: {} 😆

obj = Object.fromEntries(entries);
console.log(obj);
// Expected output: Object { foo: "bar", baz: 42 }
14.12.2022js

Fusejs 🔥

As I was thinking about how I would migrate my search index for my site to remix, I came across an alternative to Lunrjs… and yes I know I can use Algolia but I personally think it’s overkill for what I want for my site.

Read more
07.12.2022js

unifiedjs

So there’s this thing called unified that allows us to take things like Markdown, HTML, or plain text and turns it into structured data (AST) so that we can apply transformations on said data. Its rich plugin pipeline allows us to typically write one line of code to chain a feature into a process.

It’s more than this though as it is collective that spans multiple organizations and an ecosystem that includes:

  • remark
  • rehype
  • retext
  • redot

Read more

17.10.2022js

DomMatrix

I was once asked about matrices in an interview. Still unsure how they work but we’ve got them in the browser specs 🤣.

Read more

11.10.2022js

matchMedia

My mind was blown today when I learned that browsers now ship with a native way to easily check if the window matches a specific media query. 🤯

Essentially, you can pass in a media query into window.matchMedia and the returned object will tell you if the window matches you media query. It also ships with event listeners so you can handle resizing out of the box ❤️ .

Shout out to my main man Vepor for this piece of knowledge!

Read more

Turns out you can set up auto scroll restoration with browser APIs (yay!).

Read more here

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.

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)

There’s a nifty little library to write shell scripts using node. Yay for less hassle!

Read more

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…

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.

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!

30.11.2020js

volta

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

16.11.2020js

npm i prefix

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

12.11.2020js

react-window

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.

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

TIL that you can’t open a window in full screen with window.open

Read more here

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

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.

Turns out you can’t use Xpaths to access elements in a shadow dom.

Don’t use xpaths

06.08.2020js

console.info

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

05.08.2020js

lodash fp

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

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

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

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

So here is a nice little thing I’m going to try and get people using at work, I hope!

PLOP js!

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__

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!

Blog post about: Iterators, iterables, and generators! 🤓