18th week of 2021

Published on

Last updated on

New RSS feeds for my website, Google tricks, split diffs in your terminal, two-way data binding in React, and more.

Table of contents

👨‍đŸ’ŧ Work

No highlights this week.

👨‍🚀 Personal

My goal for the last week was to implement RSS feeds for my cookbook[1] and weekly log. I didn't reach the goal in time, but this week I did! đŸĨŗ

My goal for the next week is to publish a new blog post. It's been three months since the last one. 🙈

Subscribed to BazQux Reader (RSS reader)

Four weeks ago I started using an RSS reader by signing up for a free 30-day trial of BazQux Reader.

BazQux has been excellent so far, so this week I paid for a year's subscription. Definitely worth the $30. Recommended! (No affiliation.)

New RSS feeds for my website!

I finally implemented RSS/Atom and JSON feeds for my cookbook[1:1] and weekly log. I ended up doing other tweakings as well so in the end it took quite a few hours. 🙈 See the changelog on GitHub if you are interested. (And why wouldn't you be? 💁‍♂ī¸)

Now there are four different feeds per feed type, so I created a separate Feeds page. This was inspired by Stefan Judis's Feeds page; he also provides multiple RSS feeds.

Check out my Feeds page (and subscribe 😉).

👨‍🎓 Learnings

Google: before: and after: search operators

Google allows searching for old entries with the before: operator and for recent entries with the after: operator. For example:

  • before:2015 looks for pages published before 2015.
  • after:2020-07-01 looks for pages published since July, 2020.

I'm not actually sure whether the first one includes results starting from 2015 or 2016, or whether the second one includes results from the first day of July, 2020. But at least the operators let you roughly filter out new or old stuff.

Previously I clicked my way through the options to filter out old stuff. There's a subtle "Tools" button under the search bar (at least on desktop), which reveals an "Any time" dropdown with more options:

  • Past hour
  • Past 24 hours
  • Past week
  • etc.

Using the search operators is definitely nicer.

One caveat is that some websites somehow fake their dates, so that Google shows a fresh date, but the actual page reveals that it's a few years old. I'm looking at you, Reddit. 😤

I learned these operators from Marko Denic's article Use Google like a pro and related discussion on Reddit. See also related discussion on Hacker News.

đŸ•ĩī¸â€â™‚ī¸ Cool stuff

Bash: GitHub-style split diffs using git-split-diffs

Shrey Banga's git-split-diffs provides "GitHub-style split diffs with syntax highlighting in your terminal." Here's a taste, taken from the project's GitHub page:

A terminal showing a diff in two columns using .

Looks eggg-cellent! And light themes are also available! Yay!

I also like that it's installable via npm, which makes using it easy.

Check out git-split-diffs on GitHub.

React: Two-way data binding

React uses one-way data binding for controlled components: a parent passes to its child the current state value and a function to update the value. Like this, for example:

function App() {
  const [value, setValue] = useState('John')
  const update = (e) => setValue(e.target.value)
  const reset = () => setValue('')

  return (
    <>
      <input value={value} onChange={update} />
      <div>Hello {value}</div>
      <button onClick={reset}>Reset</button>
    </>
  )
}

This way the input element (the child) never mutates the state. Instead it calls the onChange event listener, so that the parent can update the state and pass the new value to the input element.

So far this is very basic stuff.

AngularJS 1 used to have two-way data binding: a parent passes only the state to its child, and the child can directly mutate the state!

  • If the parent updates the state, the child will receive the new value.
  • If the child updates the state, the parent will receive the new value.

When the parent receives a new value, it can't know where the new value is coming from, and it can't prevent the child from updating the value.

This is nowadays considered a bad practice because it can easily lead to unpredictability (can't know what's changing state) and poor performance. Probably for other reasons too.

On the upside, two-way data binding makes code cleaner as you don't have to manually deal with event listeners and stuff. Just pass a state to a child and you're done.

Sandro Roth tells in his article Two-way Data Binding in React how you can mimic two-way data binding in React by writing a custom hook. Like this:

function useModel(initialValue = '') {
  const [value, setValue] = useState(initialValue)
  const update = (e) => setValue(e.currentTarget.value)

  return {
    model: { value, onChange: update },
    setModel: setValue,
  }
}

function App() {
  const { model, setModel } = useModel('John')
  const reset = () => setModel('')

  return (
    <>
      <input {...model} />
      <div>Hello {model}</div>
      <button onClick={reset}>Reset</button>
    </>
  )
}

Notice how we are passing (via spreading) only a "model" to the input element. The model contains the current value and a function to update the value from the child.

This is ultimately still one-way data binding – the parent is still the single source of truth for the state – but it looks cleaner and allows reusage of the logic contained in the useModel hook.

Check out Sandro's article for more details!

(Also thanks to Sandro for our email exchange over this topic. 😊)

VS Code: Error Lens extension makes errors and warnings easier to see

My colleague (hi Oskari!) recommended me to install the Error Lens extension for VS Code. It makes errors and warnings easier to see:

  • The error and warning texts are shown at the end of lines.
  • The lines are highlighted with red (errors) or yellow (warnings). (The colors are customizable.)

Here's how it looks like (before and after):

An error and a warning shown in VS Code, before and after using Error Lens.

I have been using Error Lens for a few days, and so far I like it. Recommended!

I wonder how I previously checked what the errors and warnings mean... did I maybe grab a mouse to move the cursor over the squiggly lines?! Madness.


Footnotes

  1. I no longer have a cookbook section on this website: Goodbye Cookbook, hello more blog posts. ↩ī¸Ž ↩ī¸Ž

💁‍♂ī¸ More Weekly log entries

Next week: 19th week of 2021

Previous week: 17th week of 2021