Have a function with properties on it in TypeScript? Function types to the rescue!

typescript

#TIL about function types in TypeScript! It's a fancy word for an interface that has a call signature.

For e.g.,

const computeNthFibonacciNumber: MemoizedFn = (n: number) => {
  computeNthFibonacciNumber.memo = computeNthFibonacciNumber.memo[n] ?? []
  
  if (typeof computeNthFibonacciNumber.memo[n] === 'number') {
    return computeNthFibonacciNumber.memo[n]
  }
  ...
  // calculate expensive result
  ...
  
  // memoize the result
  computeNthFibonacciNumber.memo[n] = result
  return result
}

interface MemoizedFn {
  (n: number): number
  memo?: number[]
}

Here computeNthFibonacciNumber.memo now has the type number[] | undefined. It's marked as an optional as we define memo in the body of the function. If memo wasn't marked as optional, we'd have to define to after the function expression as shown below —

const computeNthFibonacciNumber: MemoizedFn = (n: number) => {
  computeNthFibonacciNumber.memo = computeNthFibonacciNumber.memo[n] ?? []
  
  if (typeof computeNthFibonacciNumber.memo[n] === 'number') {
    return computeNthFibonacciNumber.memo[n]
  }
  ...
  // calculate expensive result
  ...
  
  // memoize the result
  computeNthFibonacciNumber.memo[n] = result
  return result
}
computeNthFibonacciNumber.memo = [0, 1] // first to numbers in the sequence

interface MemoizedFn {
  (n: number): number
  memo: number[]
}

This is the same pattern React.FC type uses.

Read more: https://www.typescriptlang.org/docs/handbook/interfaces.html#function-types

Created at: Thu Mar 26 2020 18:59:56 GMT+0000 (Coordinated Universal Time)

Removing Exif data from images

terminal,images,exif

#TIL that the wonderful ImageMagickthe image handling swiss army knife — ships with mogrify which can be used to remove Exif data from images.

Why remove Exif data? Short answer — privacy.

To use mogrify to remove Exif data from an image, first install imagemagick and then run the following incantation in your terminal —

mogrify -strip original.jpg

This will remove Exif data from original.jpg and save the modified file under the same name i.e., original.jpg in the case of this example.

Read more: https://superuser.com/questions/335489/how-to-strip-exif-info-from-files-in-osx-with-batch-or-command-line/335504#335504

Created at: Mon Mar 23 2020 13:06:00 GMT+0000 (Coordinated Universal Time)

Package entry points in node

javascript,node

#TIL that package entry points can be specified in another way other than the "main" property in package.json. It is the "exports" property.

Not only does it let you re-map entrypoints into your package —

// ./node_modules/es-module-package/package.json
{
  "exports": {
    "./features/": "./src/features/"
  }
}

// otherFile.js
import feature from 'es-module-package/features/x.js';
// Loads ./node_modules/es-module-package/src/features/x.js

it also lets you allow for conditional exports using the "import" and "browser" sub keys —

// ./node_modules/pkg/package.json
{
  "type": "module",
  "main": "./index.js",
  "exports": {
    "./feature": {
      "import": "./feature-default.js",
      "browser": "./feature-browser.js"
    }
  }
}
  • "default" - the generic fallback that will always match. Can be a CommonJS or ES module file.
  • "import" - matched when the package is loaded via import or import(). Can be any module format, this field does not set the type interpretation.
  • "node" - matched for any Node.js environment. Can be a CommonJS or ES module file.
  • "require" - matched when the package is loaded via require().

This can be seen used quite well in preact

Note that "." export will define the main entrypoint for your package and will take precedence over the "main" property.

Read more on this using the link below as it has a lot of other use-cases that I haven't described here (such as fallback targets 😱)

Read more: https://nodejs.org/api/esm.html#esm_package_exports

Created at: Wed Mar 11 2020 17:26:59 GMT+0000 (Coordinated Universal Time)

Visualizing unicode tables

fonts,web

#TIL about a website that visualizes unicode tables.

I came across it while subsetting a font for my blog using the awesome Font Squirrel webfont generator's expert mode.

I wanted only the Basic Latin unicode table and to visualize the table, I ended up on https://unicode-table.com.

Just seconds later though, I realised that Font Squirrel itself shows the subset. Oh well 🤷🏻‍♂️

Read more: https://unicode-table.com/en/#spacing-modifier-letters

Created at: Sun Jan 19 2020 12:27:10 GMT+0000 (Coordinated Universal Time)

How to get a union of types contained within an object type in typescript?

typescript

#TIL I learnt about some more typescript-fu that lets us disjoin or blow up an object to get a union of objects that each have one key from the main object. My english prowess is failing me right now so let me show what I mean with an example.

Say we have the following type

interface Person {
  name: string
  age: number
}

Now say we want the type { name: string } | { age: number } from it. We can do so by defining a type that accepts the Person interface and "blows it up" into unions.

type Unionize<T extends object> = {
  [P in keyof T]: { [Q in P]: T[P] }
}[keyof T]

type Members = Unionize<Person> // type Members = { name: string } | { age: number }

Hot dang!

This and a lot more await you in the wonderful utility-types library by Piotrek Witek.

Read more: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts#L360

Created at: Sat Jan 18 2020 18:02:48 GMT+0000 (Coordinated Universal Time)

SSR + react-spring - hooks

javascript,web,react,animation

#TIL that if you use one of the render prop methods from react-spring such as transition, it will render nothing when the react application is rendered on the server. I found this out the hard way when I noticed that the performance score for my TILs page had dropped from 95+ to anywhere between 29-45. Using react-spring with my SSR-ed app basically nullified the impact of server side rendering and converted it to a fully client side app in terms of behaviour.

Note to self: react-spring is awesome but be aware of its and any other library's inter-op with ReactDOMServer.renderToString. ☠️

Read more: https://github.com/react-spring/react-spring/issues/435

Created at: Sun Jan 12 2020 13:23:12 GMT+0000 (Coordinated Universal Time)

Sorting strings with help from the platform

web,javascript

#TIL about String.prototype.localeCompare() which is purpose built to help sorting a collection of strings!

e.g.,

const a = 'réservé'; // with accents, lowercase
const b = 'RESERVE'; // no accents, uppercase

console.log(a.localeCompare(b));
// expected output: 1
console.log(a.localeCompare(b, 'en', {sensitivity: 'base'}));
// expected output: 0

Read more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

Created at: Fri Jan 10 2020 12:34:43 GMT+0000 (Coordinated Universal Time)

Multiple fields in mutations in GraphQL

graphql,web

#TIL that a GraphQL mutation can contain multiple fields just like in a query. With one clear distinction though. While GraphQL queries run in parallel, mutations run serially in top down order.

For e.g., say we have the following request —

mutation {
  increment(by: 10)
  decrement(by: 5) {
    num
  }
}

In the above request, num will incremented by 10 first and then decremented by 5.

Read more: https://graphql.org/learn/queries/#multiple-fields-in-mutations

Created at: Thu Jan 09 2020 09:56:26 GMT+0000 (Coordinated Universal Time)

Working with query string of a URL

web,javascript

#TIL about URLSearchParams which gives developers methods to manipulate the query string of a URL. It can be initialized using any query string. For e.g.,

const queryParams = new URLSearchParams(document.location.search)
const queryParams = new URLSearchParams('q=web+platform')
// etc

We can then manipulate the query string using getter, setters, etc. For e.g.,

queryParams.set('q', 'someother non-URL safe character 😱')
queryParams.get('q', 'someother non-URL safe character 😱')
queryParams.getAll('repeated-query-param') // gets all the values associated with the given query parameter
// and many more

To get a URL safe string we can either use the returned object (queryParams) in a string context or call .toString() on it.

For e.g.,

const queryParams = new URLSearchParams('q=omg 😱')

window.history.pushState({}, '', `${document.location.origin}?${queryParams}`)

Read more: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Created at: Tue Dec 31 2019 21:39:04 GMT+0000 (Coordinated Universal Time)

GraphQL subscriptions

graphql,javascript

#TIL that the values returned by the async iterator returned by subscribe function for a Subscription field, should return objects of the same shape as the field it is defined on.

Makes no sense right? Let's look at an example.

Let's say we have the following type definition.

const typeDefs = `
  type Subscription {
    getNumber: Int!
  }
`

Now, let's define an iterable that returns an async iterator. (Click here for more on iterators, generators, etc). We can do so by either making a plain object as shown on MDN or we can use the new async function * syntax.

Let's use the latter.

async function generateNumbers*() {
  let x = 1
  if (x < 5) {
    yield x++
  }
  return 5
}

Now let's define the resolver for our type definition using generateNumbers.

const typeDefs = `
  type Subscription {
    getNumber: Int!
  }
`
const resolvers = {
  Subscription: {
    getNumber: {
      subscribe: () => generateNumbers() // this call returns an async iterator generated from the iterable which GraphQL iterates on interally, takes the value when available and yields that as the value of the async iterator it itself returns for a subscription query
    }
  }
}

This setup, when used with a GraphQL server, doesn't work and even throws in certain implementations. That's because, the lack of a resolve function next to subscribe above is internally converted to the following as per the GraphQL spec.

const resolvers = {
  Subscription: {
    getNumber: {
      subscribe: () => generateNumbers(),
      resolve: (root) => root.getNumber // aka the default resolver in GraphQL which is used when no resolve function is provided
    }
  }
}

The error should now be clear. Our async iterator yields integers, instead of an object of shape { getNumber: Int! } as specified by the type definition. The values yielded by our async iterator as passed as the root value to the resolve function. This along with the default resolve function is what causes the error to occur as root value has no getNumber property.

The fix, therefore, is simple. We update generateNumbers to yield an object of that shape. All together, a working setup using a default resolve functionlooks like below.

const typeDefs = `
  type Subscription {
    getNumber: Int!
  }
`
const resolvers = {
  Subscription: {
    getNumber: {
      subscribe: () => generateNumbers()
    }
  }
}
async function generateNumbers*() {
  let x = 1
  if (x < 5) {
    yield {
      getNumber: x++
    }
  }
  return { getNumber: 5 }
}

This is what it looks like when used with apollo-server (the schema is generated by @zeusdeux/serverless-graphql.

gql subscription til

Notice that the output stops at 4 even though we finally return { getNumber: 5 }. This tells us that return value of the async iterator is discarded by GraphQL.

Finally, we can return anything from the async iterator and shape it how we want using its neighbouring resolve function as the value returned by the iterator is passed as the root value to its resolve sibling.

This means we can fix the same issue in a second way. The code below shows another approach to fix it using a custom resolve function next to the subscribe function.

const typeDefs = `
  type Subscription {
    getNumber: Int!
  }
`
const resolvers = {
  Subscription: {
    getNumber: {
      subscribe: () => generateNumbers(),
      // the root value is the number as returned by generateNumbers
      // when we return it as is, we get the overall shape of 
      // { getNumber: root (which is a number) } as the resolve
      // function is nested inside a field named getNumber.
      resolve: (root) => rootValue
  }
}
async function generateNumbers*() {
  let x = 1
  if (x < 5) {
    yield x++
  }
  return 5
}

Fin.

PS: The delay in the GIF is introduced synthetically by my code to show that values are indeed being subscribed to and emitted over time.

Read more: https://www.apollographql.com/docs/graphql-subscriptions/subscriptions-to-schema/

Created at: Mon Dec 30 2019 20:36:29 GMT+0000 (Coordinated Universal Time)

graphql/utilities is cooooool!

javascript,web,graphql

#TIL (well day before), I learnt about graphql/utilities which is a brilliant package for all low level GraphQL needs.

Specifically, I love its buildSchema function that takes a string type definition, parses it and returns a GraphQLSchema object. This is great as this object is supported by packages such as apollo-server.

This has been the core of my package, serverless-graphql which lets you execute GraphQL against any API without the needs of a graphql server in between.

Read more: https://graphql.org/graphql-js/utilities/

Created at: Sat Dec 28 2019 05:59:27 GMT+0000 (Coordinated Universal Time)

Leave certain imports as-is if you're authoring a JavaScript library

javascript,npm,web,node

#TIL that, when authoring a JavaScript library, leave certain imports as-is. Don't include their code in your final bundle as it can cause weird bugs if the consumers of your library also are dependent on one of your dependencies. This leaves the consumer's dependency tree with potentially many different version of the same package which can wreak havoc!

When I say certain, I mean certain. Things like lodash, etc are usually fine. But bundling up a framework (e.g., react, vue, etc) or lower level packages (e.g., graphql, etc) as a part of your library are a bad idea for reasons mentioned above.

As an alternative, declare those packages as peerDependencies!

Read more: https://github.com/zeusdeux/use-is-in-viewport/blob/master/package.json#L33-L35

Created at: Sat Dec 28 2019 05:56:27 GMT+0000 (Coordinated Universal Time)

Group commands in bash/zsh/etc for profit!

bash,npm

#TIL that one can group commands in bash and bash-like shells using {...}. This is very useful when used in things such as npm scripts to guard certain operations.

For example:

{
  ...
  "scripts": {
    "check-peer-deps": "[[ -d node_modules/graphql ]] || { echo 'Maybe install the peerDeps?'; echo; exit 1; }",
    "build": "npm run check-peer-deps && npm run build"  
  }
}

Read more: https://stackoverflow.com/a/3822649/1727349

Created at: Sat Dec 28 2019 05:32:55 GMT+0000 (Coordinated Universal Time)

npm link caveat

npm,node,javascript

#TIL about an interesting caveat of npm link due to how the node resolution algorithm works.

Say you have a library libA at path ~/libA and a project myApp that consumes libA at path ~/myApp. Now say that you want to test myApp with a local version of libA to see if things work fine before cutting a release or maybe even a beta/alpha.

One way you can do so is by cd-ing into ~/libA and running npm link. Following this you cd into ~/myApp and run npm link libA to (sym)link ~/myApp/node_modules/libA to your local ~/libA. You run myApp, it all works fine and you're a happy cat.

Now say libA has a peer dependency on graphql (or any package). This means that the consumer of your library must install graphql in their application. So we go into ~/myApp and run npm install graphql. Now you run the application as always but, oh no! myApp fails to run! The logs on the screen say that libA was looking for graphql but didn't find it!

We sit/stand/lie there, flabbergasted. I mean, we did everything right, no? We installed the graphql peer dependency in ~/myApp as instructed. So what gives?

Well, turns out, we got bit by a small lack of understanding on our part combined with the module resolution algorithm of your favourite bundler/node/what have you.

When we run npm link libA in ~/myApp, ~/myApp/node_modules/libA is (indirectly) symlinked to our local ~/libA. Now, when we run ~/myApp and the libA import/require is encountered, the file given by the main key in ~/libA/package.json is loaded. Say that it maps to ~/libA/dist/libA.umd.js. This file, in turn, tries to import/require graphql. To do so, node or your bundler, does the look up roughly as follows:

  1. Check if graphql is a core module. Nope, it isn't. Go to next step.
  2. Look for graphql in ~/libA/dist/node_modules. Found it? No? Ok, next step then.
  3. Look for graphql in ~/libA/node_modules. It isn't there either since it's a peer dependency and isn't automatically installed when we run npm install in ~/libA.

This process continues, one directory higher in the hierarchy at every step till it gives up and ends.

But, Mudit, why not just install the peer dependency in ~/libA using npm install graphql --no-save and move on with our lives? Well, that defeats the purpose Jimmy, that's why!

In anycase, you might have noticed that all the look ups are happening relative to ~/libA, not ~/myApp where we already did install graphql. This is due to the fact that npm link creates symbolic links! And that's the root cause, Jimmy! Due to the fact that npm link libA creates a symlink inside ~/myApp/node_modules (indirectly) to ~/libA, the module resolution algorithm (correctly) uses the real location of libA for the look up of graphql.

This had me scratching my head for a bit and hopefully it helps someone else out there.

Read more: https://nodejs.org/dist/latest-v12.x/docs/api/modules.html#modules_all_together

Created at: Sat Dec 28 2019 05:25:13 GMT+0000 (Coordinated Universal Time)

Want to grab a union from an object type in typescript?

typescript

As a part of working on a project, I needed a way of getting a union of all the values an object could have in typescript. Turns out there's a weird way to do so using infer and some other typescript voodoo.

To read how and to try it out, see below or visit it on codepen.

Read more: https://github.com/zeusdeux/ts-playground/blob/master/gettingUnionFromObjectType.ts

Created at: Fri Oct 18 2019 12:18:58 GMT+0000 (Coordinated Universal Time)

Want to crash safari 13.0.x?

web,css,macos

#TIL that one can cause safari to hang and crash by styling a select box in a very specific manner.

The interaction of text-rendering: optimizeLegibility and -webkit-appearance: none on a select box causes Safari to hang up, beach ball and everything!

More in the codepen link!

Read more: https://codepen.io/zeusdeux/pen/NWKJzPJ

Created at: Thu Sep 26 2019 12:38:42 GMT+0000 (Coordinated Universal Time)

Generating n pseudo-random bytes using openssl

security,openssl

#TIL that one can generate n pseudo-random bytes and encoded it using any supported encoding scheme (e.g.,base64, hex, etc) using the mighty openssl cli!

For example, openssl rand -base64 64 will output a base64 encoded 64 pseudo-random bytes of data. But this usually contains newlines.

What if we want to use this to generate a password and don't want those newlines? Well, openssl cli to the rescue again! We can generate pseudo-random bytes and pipe it to openssl enc!

Example: openssl rand 64 | openssl enc -A -base64 where -A as per the man page is — If the -base64 option is set, then base64 process the data on one line

Read more: https://linux.die.net/man/1/sslrand

Created at: Wed Aug 28 2019 14:16:15 GMT+0000 (Coordinated Universal Time)

Internet Assigned Numbers Authority (IANA)

http,rfc,IANA

# TIL that one can find all the HTTP status codes and their corresponding normative sections in the RFCs they come from in the IANA registry! No more having to look at stackoverflow when confused while having to choose between a 400, 422 or a catch all 500 for example!

Here's a bonus — HTTP Method Registry

Read more: https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml

Created at: Tue Aug 20 2019 14:07:22 GMT+0000 (Coordinated Universal Time)

A tale of obsoleted RFCs

http,rfc

#TIL that RFC 2616 aka the one that defined HTTP/1.1 protocol was obsoleted by many as are listed in its first header section. One such RFC that made a part of RFC 2616 obsolete is RFC 7231 which updated some of the semantics of HTTP/1.1.

Read more: https://tools.ietf.org/html/rfc7231

Created at: Tue Aug 20 2019 14:05:13 GMT+0000 (Coordinated Universal Time)

Order of overrides in .eslintrc matter

javascript,tools

#TIL that if you have, for e.g., rule overrides for files that match src/**/*.js & src/folder/**/*.js, the order in which they appear in the config will determine the final rules for those globs.

Read more: https://gist.github.com/zeusdeux/31467d8c69602ac38859af0e39457255

Created at: Fri Jul 26 2019 14:05:33 GMT+0000 (Coordinated Universal Time)

Catastrophic backtracking in regular expressions

performance,regular-expressions

#TIL about Catastrophic backtracking in regexps that can potentially bring down your service as it happened in the case of Cloudfare. Be mindful of your repetition op usage!

Read more: https://www.regular-expressions.info/catastrophic.html

Created at: Mon Jul 15 2019 13:53:05 GMT+0000 (Coordinated Universal Time)

Set default apps in macOS with EASE!

software,tools,macos

#TIL about RCDefaultApp, a wonderful blast from the past! It adds a pane in the System Preferences app to set defaults for pretty much anything on macOS. brew cask install rcdefaultapp ftw!

Read more: https://apple.stackexchange.com/questions/261881/set-default-mail-client-without-adding-mail-account

Created at: Tue Jul 09 2019 09:16:30 GMT+0000 (Coordinated Universal Time)

Semigroups and monoids ftw!

category-theory,functional-programming

#TIL that any function of type a -> a is a monoid under function composition with the identity value of the identity function. I.e., given ∘ is fn composition, (f ∘ f) ∘ f = f ∘ (f ∘ f) and f ∘ id = id ∘ f where id is the identity fn: id(a) = a

Read more: https://twitter.com/muditameta/status/1137828272501399552?s=21

Created at: Sun Jun 09 2019 21:50:58 GMT+0000 (Coordinated Universal Time)

Create a docker container without starting it with docker-compose

docker

#TIL that you can create a docker container without starting it using docker-compose up --no-start <service name>. This is handy when all you really want to do is copy some artifacts from the built image onto the host filesystem (in CI or locally).

Read more: https://github.com/zeusdeux/docker-playground

Created at: Thu Mar 28 2019 11:24:21 GMT+0000 (Coordinated Universal Time)

Removing the passphrase from an RSA private key

docker,openssl

#TIL: Run openssl rsa -in locked.pem -out unlocked.pem to remove the passphrase from the input key! It's great for testing docker builds locally that require an ssh key for example. And yes, you'll be prompted for the passphrase when you run that cmd.

Read more: https://www.openssl.org/docs/manmaster/man1/rsa.html

Created at: Wed Mar 27 2019 22:15:09 GMT+0000 (Coordinated Universal Time)

docker-compose run

docker

#TIL that docker-compose run doesn't map the ports if your docker-compose.yml specifies a ports key. It's by design.

Read more: https://github.com/docker/compose/issues/1259

Created at: Wed Mar 27 2019 13:15:31 GMT+0000 (Coordinated Universal Time)

Variable fonts ftw!

web,css

#TIL about variable fonts which can declare attributes that can be manipulated by the user to change how the font looks when rendered! Try them on v-fonts!

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Created at: Sun Mar 03 2019 20:44:23 GMT+0000 (Coordinated Universal Time)

HideShow mode for code folding in emacs

javascript,emacs

#TIL about HideShow mode that's built into emacs as of Emacs 20. It enables syntactic hide/show of code blocks & supports many langs such as JS, C, Java, Lisps, Python, etc. Use: Enable hs-minor-mode in your buffer & then hit C-c @ C-c to toggle blocks

Read more: https://www.emacswiki.org/emacs/HideShow

Created at: Fri Mar 01 2019 14:27:06 GMT+0000 (Coordinated Universal Time)

LD_PRELOAD for profit!

c

#TIL about LD_PRELOAD env var that let's one load shared objects or libs before loading the C runtime lib. In essence, you can use it to provide your own definition of functions that override those provided by other libs. E.g., provide your own malloc.

Read more: https://jvns.ca/blog/2014/11/27/ld-preload-is-super-fun-and-easy/

Created at: Tue Jan 22 2019 11:40:50 GMT+0000 (Coordinated Universal Time)

Sum types with never in Typescript

functional-programming,typescript

#TIL that a sum type that has never resolves to a type that has no never in it. For e.g. let x: string | never // type -> string. This is the trick used to implement Exclude simply as type Exclude<T, U> = T extends U ? never : T! More in the link

Read more: https://bit.ly/2CPMbPo

Created at: Sat Jan 05 2019 17:37:42 GMT+0000 (Coordinated Universal Time)

Toggling hidden items in Finder

macos

#TIL that, as of macOS Sierra, you can toggle hidden files visibility in Finder by pressing CMD + Shift + .

No more executing defaults write ... in the terminal!

Read more: https://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/

Created at: Fri Jan 04 2019 15:38:33 GMT+0000 (Coordinated Universal Time)

Querying for face being used by character under cursor in emacs

emacs

#TIL that you get info about the char under the cursor in emacs by using the chord C-u C-x =. The prefix arg, C-u, is what gives the details & is a neat way to find out the face you need to modify to change how something (e.g., keyword) is displayed.

Read more: https://stackoverflow.com/a/22951243/1727349

Created at: Wed Jan 02 2019 23:37:35 GMT+0000 (Coordinated Universal Time)

Custom shell bindings that work everywhere*?

terminal,readline

#TIL that you can bind custom actions (fns, macros or strings) to custom keybindings by leveraging Readline and its init file, .inputrc. For e.g: "\ev": "code .\n" will open current folder in vscode when you press alt/option+v in your shell.

Read more: https://www.gnu.org/software/bash/manual/html_node/Readline-Init-File-Syntax.html#Readline-Init-File-Syntax

Created at: Wed Jan 02 2019 22:28:41 GMT+0000 (Coordinated Universal Time)

Tired of typing out the same bit of data that you want to POST using curl?

curl,http

#TIL that one can get curl to read a file and POST its contents to the given URL by appending the file name with the @ character. For example:

curl -X POST -d @myfile.json -H 'Content-Type: application/json' https://foo.bar.in/baz

Read more: https://curl.haxx.se/docs/manpage.html#-d

Created at: Wed Jan 02 2019 22:13:38 GMT+0000 (Coordinated Universal Time)

Scroll two buffers together in emacs you say?

emacs

#TIL that you can scroll all your buffers in unison by enabling a built in minor mode called scroll-all-mode. My use case was to visually diff a file and its refactored counterpart. Invoking it again disables it & returns you to normal scroll behaviour.

Read more: https://stackoverflow.com/a/18092297

Created at: Wed Jan 02 2019 14:11:24 GMT+0000 (Coordinated Universal Time)

Express.js and named capture groups 🙅🏻‍♂️

javascript,web,regular-expressions,node

#TIL that Express.js (version 4.16.4 as of writing this) does not work with the new named regex capture groups in JS. It breaks with a confusing and weirdly un-googleable error. Not only that, you have to wrap the whole regex into a non-capturing group.

Read more: https://github.com/zeusdeux/til.mudit.xyz/blob/master/now-dev.js#L43

Created at: Thu Dec 27 2018 22:50:17 GMT+0000 (Coordinated Universal Time)

How to disable Sentry integration in dev?

javascript,node,error-reporting

#TIL learnt that to disable Sentry integration (in dev or so), you can pass anything false-y as the value for options.dsn to the Sentry.init(options) function.

ಠ_ಠ

The good thing is that this works in apparently all their clients!

Read more: https://github.com/getsentry/sentry-symfony/issues/38#issuecomment-271825703

Created at: Thu Dec 27 2018 22:37:30 GMT+0000 (Coordinated Universal Time)

Sentry nodejs package isn’t modelled to be used serverless-ly

javascript,node,error-reporting,serverless,lambda

#TIL that @sentry/node buffers exceptions your app sends to sentry.io and sends 'em over the wire async. This fails with lambdas as they cease to exist after responding. The work around is await-ing on Sentry.getCurrentHub().getClient().close(2000)

Read more: https://github.com/getsentry/sentry-javascript/issues/1449

Created at: Wed Dec 26 2018 22:43:01 GMT+0000 (Coordinated Universal Time)

HTTP2 Server Push on CDNs that support it

web,performance,http2

#TIL that one can enable HTTP2 Server Push on CDNs that support it by using the Link http header. E.g., Link: </css/custom.css>; as=style; rel=preload, </img/favicon.ico>; as=image; rel=preload.

Read more: https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

Created at: Sun Dec 16 2018 16:40:21 GMT+0000 (Coordinated Universal Time)

HSTS preload list

web,security,https,hsts

#TIL about the HSTS preload list maintained by google. It prevents all browsers that respect this list from connecting to page in the list using an insecure protocol like http. Your website can qualify if it sets the Strict-Transport-Security header.

Read more: https://hstspreload.org

Created at: Sun Dec 16 2018 16:40:00 GMT+0000 (Coordinated Universal Time)

Epoch based computer time

time,software

#TIL about different epochs used by software. Specifically win32/64 epoch of January 1, 1601 (UTC). The FileTime struct holds time elapsed in 100 nanosecond intervals since January 1, 1601 (UTC). Why? "it was chosen to make the math come out nicely".

Read more: https://en.wikipedia.org/wiki/Epoch_(reference_date)#Notable_epoch_dates_in_computing

Created at: Sun Dec 16 2018 16:39:41 GMT+0000 (Coordinated Universal Time)