Lecco view of the Lake Como.

Just reading a book and enjoing a coffee. Niiice.

I've been contemplating of booking a cheap flight to Milan, only with a backpack, rent a car, drive all the way to Como to a hotel near the lake and stay for a couple of nights. And, while there, rent a bike, pack a sandwich and a San Benedetto, pick a couple of trails and don't look back. Maybe you should, too.

Found a nice hotel in Bellagio that had breakfast included, Seta. There was also a bike renting shop nearby, Bike It! Bellagio, and the best thing about it was that they had a website which contained a few bike trail suggestions, so it was easy to start the trip with minimum preparation. Bellagio, as a town is quite nice, but there was a lot of construction going around and there weren't many places to eat or have a coffee, at least I did not find any. That was not on the convenient side, but the main topic of the trip was biking, so I forgave the shortcoming.

Bellagio - Como and back​

A quite classic trip to start with, not very hard, but not very easy, as it involved a few ups and downs along the way. The first checkpoint was the town of Nesso, as it was almost half way to Como and had a couple of highlights: a waterfall and a small bridge, Orrido di Nesso. It's worth a visit, don't mind the reviews on Google, you don't need to be a pro climber to take the stairs. There is also a small bar nearby, Bar la Cascata, to recharge the batteries with a authentic Italian espresso and croissant.

View of the Alps on Como	Boat on the Como Lake

Back on the road and Como was not that far away, and the ride was pleasant. Legend says that George Clooney owns a villa somewhere in the area, but I was not lucky enough to find it. Dropping by and enjoing one cup of his Nespresso was totally planned for the trip. Shame. Anyway, arrived in Como, beautiful as ever, and quite crowded for March. The weather was nice, though, so I guess that was the reason for such a large audience. But there was not enough time to loiter, as daylight was not going to last forever in order to bike back to Bellagio. There was a ferry to catch in Griante in order to make it back to Bellagio. This second part of this trip was not that pleasant, since it involved picking up the pace and avoid being on the road at night.

That being said, even with the faster pace, I did manage to enjoy the splendid scenery Como has to offer. Every corner of water, every boat, every villa on the shore, every bird in the sky. Everything was just perfectly part of the scenery and it makes sense why owning a property on the lake is such a good idea. Just reading a book and enjoing a coffee. Niiice.

Overall it was 65km ride and someone deserved some rest.

Griante - Villa del Balbianello - Porlezza and back​

Day 2, and surprisingly, not everything was hurting that much. For the second part of the trip, I chose a route that involved going north all the way to Lake Lugano. It started by taking the ferry from Bellagio to Griante, and a short visit to Villa del Balbianello, in order to start things slow. After enjoying the very well trimmed courtyard, it was time to hit the road again, and the route went north to Menaggio but before entering the city, the route would diverge from the main road, and it was uphill time baby. After this challenging part, the route went west.

Lago di Piano	Villa del Balbianello

The route was actually not that scenic to be honest, but it had a special bike lane all the way, which was much appreciated. However, there was nothing that special about the countryside, just farms, villages and a few cows here and there. Lago de Piano was actually beautiful, with it being next to the mountains, and it proved to be a good place to take a break. After taking a few pics of this gorgeous mountain lake, it was time to finish the first half of the route, in Porlezza. This very cozy town, just next to Lake Lugano, has a very nice boardwalk to enjoy the lake from, and right next to it, a gelato place. How thoughtful!

After a very needed break with coffee and icecream to lift the spirits back up, it was time to head back home. The route back was different until Menaggio, and this time, it was pure torture. It was a lot, and a lot, and a lot of uphill. I died at least 5 times until reaching Naggio, the place where the route would change from uphill to full speed downhill. Which was supposed to be good, right? Wrong, as the downhill part was so steep, and it involved so many turns, it proved that all the torture involved for reaching it proved to be not such a good investment. Ideally, folks, do this one the other way around.

Anyway, the route was shorter than the first one, only 47km, but I believe it was quite more challenging, due to all that uphill part. But eating icecream next to the Lake Lugano? Priceless.

Lecco​

Day 3, time to go back home. Since the flight was scheduled for the evening, Lecco was decided to become the third and last stop of the trip. The weather was a mix of sun and rain, which was not all bad, given the really great pictures I managed to take as a result of the shifting light. The town itself is quite nice to stop for half a day, but the best bits involve the scenery. The view towards Corni di Canzo is simply breathtaking, and I highly recommend going for a walk along the Como promenade and enjoy the views. Quite impressive, and, again, the sunlight really made it even better.

View of the Alps from Bellagio	Sunset over Como from Tremezzo

After going for a pizza (duuuh) at Pizzeria la Rosa and for a coffee (double duuh) at Coffee&Coffee, it was time to take the rental to the car lot, enjoy the airport van ride and the short trip back home. Biking on the Como proved to be an excellent choice for a weekend getaway, and there would be more such trips in the future for sure.

The Praetorian Fountain in Palermo.

All stages in the software development lifecycle are important, but some stages are more important than others.

There are many important parts of the software development lifecycle. It's important to understand a business need, otherwise your feature won't be useful. It's important is to devise its requirements, create the designs, split the work and estimate it. Then comes the implementation, testing, delivering it to production and measuring its performance and usage through telemetry.

All stages in the software development lifecycle are important, but some some stages are more important than others. Is it true? Hard to say, maybe it depenends case by case. Are you a startup? A big tech company? Is there a similar product already on the market? There are many aspects to consider when you're prioritising.

We're not going to debate that here. Instead, I would like to advocate the importance of delivering the feature. If it's not being used by costumers, nothing else matters.

The Problem​

I was fixing an issue in Microsoft Teams related to a selection inside a search box. After fixing and testing it manually, my next step was to write a unit test using Jest and React Testing Library to make sure the issue won't surface again as a regression. The issue itself is not important, but the test looked, more or less, something like this:

test('should render the search box with the value selected', () => {
  const defaultValue = 'good morning'
  const {getByRole} = render(<SearchBox defaultValue={defaultValue} />)
  const searchBox = getByRole('textbox', {name: 'search for gifs'})

  expect(searchBox).toHaveFocus()
  expect(searchBox.selectionStart).toEqual(0)
  expect(searchBox.selectionEnd).toEqual(defaultValue.length)
})

The test is rendering our search box component, which we expect to be already focused and, if it has default text passed to it, to have it already selected, so the user can overwrite it in one go. The test looks fine, it's easy to understand, it covers the scenario, so we should be all done. In order to take it one step further, I asked myself if jest dom could have a convenience function to test this in one go, and also improve the readability. Something like this:

expect(searchBox).toHaveSelection(defaultValue)

Now, there's nothing wrong with the fist approach, but we can agree that the second one conveys the message better. After checking the functions available in VSCode, and noticing there's no helper expect function, I went to their repo with the thought of submitting a feature request, as I believe it could be a useful addition. Not only did the library already have a feature request, but it also had an open PR to add the function.

The feature request is, at the time of writing this article, almost 4 years old, and the PR is 3 years old. At first guess, I would expect that the changes introduced in the PR were not correct, or did not solve the problem one way or another. However, after checking the discussion and the code itself, the PR was actually in a very good state. It introduced the correct function, which covered all the required scenarios. It was able to check both input elements and their selection, and also random elements that could contain text, from paragraphs to divs. And for this second use case, the checks were mostly done by using the range and selection native JS objects, and covered the following:

1. whole elemenent was part of the selection.
2. the element containing the whole selection.
3. element contains part of the selection.

So, why wasn't this PR merged already? There was quite a lot of effort put into the changes, and users of jest-dom were not reaping the benefits. It made me curious enough to dive deeper.

The Solution​

It turned out that the code coverage target of 100% was not met, there was no documentation and no TypeScript support for the changes. Considering all the work that was done until that point, the rest seemed to be a piece of cake. What I did first was to fully understand requirements and the implementation.

We basically need to get the selection for the element we are asserting and return it. If our element is an input (not a checkout or a radio) or a textarea, we basically just return the selected text with element.value.toString().substring(element.selectionStart, element.selectionEnd).

The more challenging part is to get the selection of an element that's not an input. It could be a paragraph, a div, a span, doesn't matter, it should work in all cases. For this second case, there are actually 3 scenarios we need to consider. These scenarios need to account for one action: when user drags a selection by mouse, trackpad or keyboard (holding Shift). Our function has the element passed to it, so we get the document selection using element.ownerDocument.getSelection(). Afterwards, we need to check how much of that selection is included in element. We have 3 cases.

1. Whole element is inside the selection.

   • condition is selection.containsNode(element, false)
   • for example, our element is <span> that's contained in a <p> which got a partial or full selection, including the span.
   • we get the selection of the element with selectNodeContents(element) and return it.

2. Element contains the selection.

   • condition is element.contains(selection.anchorNode) && element.contains(selection.focusNode)
   • here we do nothing, since element fully contains selection, no need to change anything in the initial selection.

3. Element contains a partial selection

   • this means the selection either starts in the element, or ends in the element.
   • you can check in the source code from the link above the API used to get that partial selection that's relevant to the element, based on the 2 cases.

With the selection relative to the element received, we will use the already established template to build toHaveSelection and it's job done. However, as I ran the tests, there were a couple of Else branches that were not reached by the unit tests. I realised that with a bit of refactoring getSelection, it would be actually easier to test the changes, so I submitted a slightly different version for the partial selection condition.

Moreover, even though there was a complete coverage on the tests, I added a few more actions to the test cases, which were missing. 100% test coverage does not mean that you are testig your changes fully. However, less than 100% test coverage means most likely you are not fully testing. Consequently, aim for 100% coverage, but stay skeptical even with that percentage, since it's not a guarantee that your feature is fully tested.

OK, so we've written the tests, we refactored the code, we got full coverage. Since the repo is written in JS, we need to provide separate TS support, but luckily that was easy to do, given the templated previous functions alread written. Finally, I've written a README entry to serve as documentation, and this was actually based on the unit tests, given our function was actually going to be used as a unit test assertion.

Changes done, commited on my forked repo, and submitted a PR to jest-dom, asking the primary maintainer to review. I provided all the context, given the situation, so it would help speed up the process. A few days later, the PR was approved, merged, and included in jest-dom@6.6.0.

The Conclusion​

There is a lot of effort which involved so much hard work that is wasted if it's not delivered to your users. We see it all the time, in open source, in a small company that did not finish the product it aimed to deliver, in big tech where there are so many initiatives, hackathon projects and experimental features that do not reach their intended audience. It's probably why I chose to write this article. I want to emphasize that even if your work is not 100% ready to be delivered, that doesn't mean it shouldn't. It's better to aim to finish it 80% feature wise, deliver it and do the 20% later, than implement it 100% and shift focus at 97%. Deliver it at 80%. Hell, maybe even less. Who knows, maybe after reaching the costumers, you may realise that you don't need to do that 20%. Or that the rest of 20% after costumer feedback is now completely different from the initial 20% you initially imagined.

This does not mean that testing, accessibility, telemetry, performance monitoring and all other steps of the software development lifecycle are not important. Far from it. I'm not going to de-emphasize their importance. Just to point out that your effort is only useful when it's used by people, if it makes their life easier or their job less annoying.

Until next time, good luck in delivering great value to the world!

The Odeon of Herodes Atticus.

But anyway, here I was, Syntagma square, baby.

Ever had that urge to just go some place, do nothing but eat, chill, have a few walks with some coffee in between. Well, folks, how about some Athens in February? After enjoying Madrid and Malaga in January and December, I developed quite a passion for Mediterranean destinations during winter. All I wanted was some place that was still warm, not that crowded but still offering relevant stuff to do. And Athens really hit the nail in the head on this one.

Also, as a side note, notice that I'm writing about my February trip at the end of September. I'm quite behind on this little travel blog I have going on, and I decided to cut my articles short. I'll focus only on the good stuff, throw some of the best pictures and I'll wrap it up sooner than expected. I'm not going aiming to turn this blog into the Song of Ice and Fire.

Athens Food & Walks​

So, Athens. A very short flight from Bucharest. The train from the airport to the city center takes longer than the flight, and it's even less enjoyable. That says a lot considering I travelled low cost. But anyway, here I was, Syntagma square, baby. I took my bags and went by bus to Koukaki, this popular neighbourhood right next to old town, with more restaurants, bars and cats than you can count. So, what's so special about the place? Well, it's the chill place full of stuff to eat and drink that I was looking for. Found the local coffee shop, Caffeine Dealer, and realised that Espresso Freddo and Iced Flat Whites are a thing. Completely changed my life, this. As for eating, hmm, I would probably say Karimino, Neratzia and Bite Box are quite nice, with both brunchy things but also late meals.

Building on the Acropolis	View of Athens from the Acropolis

There's also a nice Turkish place just next to Koukaki, Cappadocia Grill Cafe, where you can enjoy a good old Adana Kebab or some chicken if you prefer lighter meat. However, probably the best place to get something to eat is the city center. There's Usurum Brunch & Cocktails, with one of the best pancakes in the world. There's Choureal, with, well, you can figure this one out. And Dope Roasting, with coffee and some quick bites that are also healthy. This place is also quite popular to work remotely. Right next to old town there's also Coffee Joint, where you can eat the most civilized omelette, have an orange juice and be on your way, no fuss included.

But, Silviu, Athens is a great cultural spot, one of the most relevant cities of the Antiquity, with so much to offer in terms of culture and history and much much more. Yeah, I've been to the Acropolis, it was nice, quite well preserved. Oh well, visiting sights and museums was not the point, so I did not bother that much. Anyway, there was another sight, sort of, that I visited as a recommendation from a friend, and that was the Stavros Niarchos Foundation Cultural Center. Apparently, some naval shipping tycoon built this place and, when I first saw it, I was not sure if I was still in Athens. It seemed like a building you would find more likely in Oslo. It's quite huge, with huge glass windows, and with greenery on top of it. Really fancy, I loved it. I also loved the walk from Koukaki to this place, all (ALL) the way throguh all (ALL) of Kallithea. It was refreshing to walk through a neighbourhood that does not probably make the top list of visiting.

View of the Acropolis from a nearby hill	The garden and a view of Stavros Niarchos

I had some other nice walks as well, like the ones in the Athens National Garden, next to the Syntagma square. Or the ones around Kallimármaro and Kolonaki. Overall, the city has that special something, you can feel it has personality and that it has been around for a while. And that brings me to the part where it's falling apart in many places, with so many ruined buildings, unkept streets and sidewalks. You can feel that, from the economical point of view, it's still struggling.

Even with the last downside, I loved my trip to Athens, it was exactly what I needed at the time, and I'm actually looking forward to return soon.

Hilly Landscape in the Village of Şimon.

...there's a lot going on with the attributes and the handlers and the ref and the other properties...

Let's assume that we have the following scenario. We have a custom hook that returns getter props, and we want to make sure that those getter props are called correctly. But, first things first:

What is a getter prop?

It's a function that gets returned from the custom hook, which is supposed to be called and its result used for some reason. Let's take the getInputProps getter prop from downshift:

import * as React from 'react'
import {useCombobox} from 'downshift'

const items = ['red', 'green', 'blue']

const {getInputProps} = useCombobox({
  items,
})

return (
  <div>
    <input {...getInputProps()} />
  </div>
)

The getInputProps result is an object with properties such as: aria-labelledby, aria-expanded, role, onChange, onClick etc. These properties are going to make our input more or less acting like a combobox. The combobox logic is kept inside the custom hook, the inputs are retrieved through the event handler functions (onClick, onChange) and the combobox related information is passed through the other attributes (aria-labelledby, aria-expanded). Of course, there are many more handlers and properties, but we are keeping it simple for now.

There's also the ref property that is going to be returned from getInputProps, and this is needed in order to allow useCombobox to access the input element and perform some custom .focus() actions when needed.

The Problem​

Given that there's a lot going on with the attributes and the handlers and the ref and the other properties, we want to make sure that the getInputProps getter function is called correctly.

• First of all, we want to make sure that it is called.
• Secondly, that is called on an <input> element, or in such a way that it has access to an <input> element.
• Thirdly, in case it is not called correctly, we want to inform the user through a console error and give them enough information to fix the getter function call.
• Moreover, we also want to show the console error in the development environment, not production. -In addition, we would like to show this error only on the first render, as we believe it's enough in terms of checks and informations.
• Last, but not least, we will also provide an escape hatch to avoid getting this error if the consumer just cannot call getInputProps properly on the first render.
  • We are going to document this escape hatch and make sure the consumer knows why we are adding it. Ideally, if a consumer will use the escape hatch, they are aware how getInputProps works, how it should be called, and if they, for some reason, cannot call it on first render (using a Portal for example), they will use the escape hatch to avoid the error, but they will test their implementation to make sure that it works as it would by calling getInputProps normally.

The Solution​

Inside the getInputProps function we return, we would like to have a mechanism that checks whether the function is called withing the right conditions. We can do so with a function to which we supply the call parameters. This function will be called at render time, since getInputProps is called on render time. The actual check happens after the first render, so we will involve a React.useEffect hook. After a bit of thinking, the solution is actually simple: a custom React hook that will keep call information inside a React ref. This call information will be supplied by a function which we will return from the hook. The returned function will store the call information inside that ref. And inside the effect function, we will perform the check and show the errors if needed.

The Tests​

We actually have a good and simple solution in mind, so let's see what do we actually expect from this solution.

• we want an error displayed when getInputProps is not called.
• we want an error displayed if getInputProps is not called with a ref pointing to an element.
• we don't want an error displayed if getInputProps is not called on subsequent renders.
• we don't want an error displayed if getInputProps is called correctly.
• we don't want an error displayed if we use the escape hatch provided and getInputProps is not called with a ref pointing to an element.

We will use React Testing Library renderHook and together with Jest, we will set up our tests suite.

describe('non production errors', () => {
  beforeAll(() => {
    jest.spyOn(console, 'error').mockImplementation(() => {})
  })

  afterAll(() => {
    jest.restoreAllMocks()
  })

  test('will be displayed if getInputProps is not called', () => {
    renderHook(() => {
      // we just render the hook, we don't call getInputProps.
      useCombobox({items})
    })

    expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
      `downshift: You forgot to call the getInputProps getter function on your component / element.`,
    )
  })

  test('will be displayed if element ref is not set and suppressRefError is false', () => {
    renderHook(() => {
      const {getInputProps} = useCombobox({
        items,
      })

      getInputProps()
    })

    expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
      `downshift: The ref prop "ref" from getInputProps was not applied correctly on your element.`,
    )
  })

  test('will not be displayed if getInputProps is not called on subsequent renders', () => {
    let firstRender = true
    const {rerender} = renderHook(() => {
      const {getInputProps} = useCombobox({
        items,
      })

      if (firstRender) {
        firstRender = false
        getInputProps({}, {suppressRefError: true})
      }
    })

    rerender()

    expect(console.error).not.toHaveBeenCalled()
  })

  test('will not be displayed if called with a correct ref', () => {
    // we supply a mock ref function to getInputProps.
    const refFn = jest.fn()
    const inputNode = {}

    renderHook(() => {
      const {getInputProps} = useCombobox({
        items,
      })

      // getInputProps returns a ref function which will make the element
      // usable both outside and inside useCombobox.
      const {ref} = getInputProps({
        ref: refFn,
      })

      // we call the final ref function received with a dummy node.
      ref(inputNode)
    })

    expect(console.error).not.toHaveBeenCalled()
  })

  test('will not be displayed if element ref is not set and suppressRefError is true', () => {
    renderHook(() => {
      const {getInputProps} = useCombobox({
        items,
      })

      getInputProps({}, {suppressRefError: true})
    })

    expect(console.error).not.toHaveBeenCalled()
  })
})

The tests are quite self explanatory given our 5 expected use cases. For now, they will obviously fail, and we will consider our job done once we write the implementation and the tests are green.

The Implementation​

To recap, the getter prop is called on render, so we would like our check to be performed after the render. We will store the call information inside a React ref, and we will check it using a React useEffect. Since we need our check to be performed in development mode, not production, we will define the custom hook like this:

let useGetterPropsCalledChecker = () => {}

if (process.env.NODE_ENV !== 'production') {
  useGetterPropsCalledChecker = () => {
    // the actual implementation.
  }
}

First and foremost, we would like to set up our ref object that we will use for the check.

if (process.env.NODE_ENV !== 'production') {
  useGetterPropsCalledChecker = (...propKeys) => {
    const getterPropsCalledRef = useRef(
      propKeys.reduce((acc, propKey) => {
        acc[propKey] = {}

        return acc
      }, {}),
    )
  }
}

And we will call this hook inside useCombobox like this:

useGetterPropsCalledChecker(
  'getInputProps',
  'getToggleButtonProps',
  'getMenuProps',
)

Notice that we will most definitely want the hook to check that other getter props are called correctly as well. We are going to stick to getInputProps here purely for explanatory purposes. Anyway, for each prop key we pass to the hook, we will create an empty object container inside the ref. We add this empty object as we want, during our checking phase, to be able to tell if the getter prop with that prop name was not called. We cannot perform this check if we do not store any initial information about the getter props. What prop keys should we actually check, right?

Next, we want to give the consumer, which is the getter prop function, to be able to store the call information. For that, we will return a function from the hook, which stores this information within the ref.

if (process.env.NODE_ENV !== 'production') {
  useGetterPropsCalledChecker = (...propKeys) => {
    const getterPropsCalledRef = useRef(
      propKeys.reduce((acc, propKey) => {
        acc[propKey] = {}

        return acc
      }, {}),
    )
  }

  const setGetterPropCallInfo = useCallback(
    (propKey, suppressRefError, refKey, elementRef) => {
      getterPropsCalledRef.current[propKey] = {
        suppressRefError,
        refKey,
        elementRef,
      }
    },
    [],
  )

  return setGetterPropCallInfo
}

And the usage within getInputProps is going to be something like this:

// this is going to end up on the input element via getInputProps
const inputRef = React.useRef(null)

const getInputProps = useCallback(
  ({refKey = 'ref', ref, ...rest} = {}, {suppressRefError = false} = {}) => {
    setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef)

    // rest of the logic

    return {
      [refKey]: mergeRefsUtil(ref, inputNode => {
        inputRef.current = inputNode
      }),
      // the rest of the attributes and handlers that will end on the input
    }
  },
)

In case the above ref logic is not clear, it ensures that all ref objects have access to the same input element. We need the input ref in useCombobox. The consumer might also need the input ref for some additional logic, hence the merge of these ref objects and passing the merged object to the <input> element. Also, suppressRefError is the escape hatch we talked about previously.

Now the checking part. We have the initial object created for each getter prop on render phase, when useGetterPropsCalledChecker is called. We have the call information stored when getInputProps is called, also on render phase. Now we have to check if the function is called correctly, on first render only, so we add a React useEffect hook inside our custom hook:

useEffect(() => {
  Object.keys(getterPropsCalledRef.current).forEach(propKey => {
    const propCallInfo = getterPropsCalledRef.current[propKey]

    if (!Object.keys(propCallInfo).length) {
      // eslint-disable-next-line no-console
      console.error(
        `downshift: You forgot to call the ${propKey} getter function on your component / element.`,
      )
      return
    }
  })
})

Our first test should pass. If the object is empty, then it means that we did not call the getter prop at all, so we show an error. If the getter prop is actually called, then we need to check if the element exists, which means that the getter prop is called correctly on an element.

useEffect(() => {
  Object.keys(getterPropsCalledRef.current).forEach(propKey => {
    const propCallInfo = getterPropsCalledRef.current[propKey]

    if (!Object.keys(propCallInfo).length) {
      // eslint-disable-next-line no-console
      console.error(
        `downshift: You forgot to call the ${propKey} getter function on your component / element.`,
      )
      return
    }

    const {refKey, elementRef} = propCallInfo

    if (!elementRef?.current) {
      // eslint-disable-next-line no-console
      console.error(
        `downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`,
      )
    }
  })
})

Our second test should now pass. The element check is, sure, not ideal, since we're not checking for an actual HTML input element, but let's say it suffices for now. The fourth test which checks that there is no error logged was passing already, but now with the actual element check, we make sure that, when it's passing, it does so for the right reason.

To fix the second test, we need our hook to be called only once, on first render, so we add [] as the second parameter to useEffect.

And to fix the fifth test, which checks the escape hatch, we will also involve the suppressRefError parameter from the call information. Our final implementation will look like this.

if (process.env.NODE_ENV !== 'production') {
  useGetterPropsCalledChecker = (...propKeys) => {
    const getterPropsCalledRef = useRef(
      propKeys.reduce((acc, propKey) => {
        acc[propKey] = {}

        return acc
      }, {}),
    )

    useEffect(() => {
      Object.keys(getterPropsCalledRef.current).forEach(propKey => {
        const propCallInfo = getterPropsCalledRef.current[propKey]

        if (!Object.keys(propCallInfo).length) {
          // eslint-disable-next-line no-console
          console.error(
            `downshift: You forgot to call the ${propKey} getter function on your component / element.`,
          )
          return
        }

        const {suppressRefError, refKey, elementRef} = propCallInfo

        if (suppressRefError) {
          return
        }

        if (!elementRef?.current) {
          // eslint-disable-next-line no-console
          console.error(
            `downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`,
          )
        }
      })
    }, [])

    const setGetterPropCallInfo = useCallback(
      (propKey, suppressRefError, refKey, elementRef) => {
        getterPropsCalledRef.current[propKey] = {
          suppressRefError,
          refKey,
          elementRef,
        }
      },
      [],
    )

    return setGetterPropCallInfo
  }
}

Recap​

Basically, we initialize an empty object for each getter prop we want to check, using the getterPropsCalledRef React ref object. Then we return the setGetterPropCallInfo function that will store information for each getter function when called. Finally, inside the useEffect function, for each getter prop, we get the call info from the ref, we check for an empty object and show the getter function not getting called error. In case we our object in not empty, we get the call information, and do nothing if suppressRefError is true. Otherwise, we check the actual element ref and show an error if it's falsy.

We may go even further with the tests and check if the hook is actually an empty object on production environments, but at this point I'm not sure if it's possible to implement such a test, or if it's even worth it. Bottom line is that, using this custom hook, we are able to perform the function getting called check, or other checks as well, in order to make sure our consumers are doing the right thing and the solution we ship works for them.

View over the lake in Parco del Rotiro.

If you think you know already the meaning of tasteful luxury, visit this place and reset your standards.

Today, damas y caballeros, we stay in beautiful Spain, but this time we leave the sunny South for Mardrid, the capital of football, culture and, well, Spain. It was a long time coming, and I was super excited to start 2024 travelling season with this one. I had high expectations, given the reviews I received from my friends, and, honestly, I was still amazed by what the city had to offer.

Royal Palace and Surroundings​

If you like your trips cultural, you're in the right place. We started the trip with the Royal Palace of Madrid, and, Dios mio, what a start. I've seen palaces and museum, and quite plenty, until that point, but the Royal Palace of Madrid exceeded my expectation by far. If you think you know already the meaning of tasteful luxury, visit this place and reset your standards. Every single piece of furniture, tapestry, design and artwork was exactly where it was supposed to be, and the level of detail for every single one of them was incredible, from engravings to finishing touches. They don't let you take pictures inside, and it's really a shame, as it's probably one of the most exquisite places you could feast your eyes upon.

Catedral de la Almueda	Room inside Royal Palace of Madrid

We left the palace exactly when it was closing time, so there was no more time left to visit the Almueda Cathedral unfortunately, but we did enjoy a very nice walk around Plaza de la Almeria, and took some pictures with Campo del Moro in the background. Quite close to the palace there's the Mercado de San Miguel, which is quite a great place to stop by for an hour or two and enjoy some empanadas and cervejas. Back to the hotel and ready for another day. We stayed at the Room Mate Alba Hotel, which is located in the city center, but in a very quiet area, and the hotel itself is quite nice. Between the Mercado and the hotel we passed through Plaza Mayor, which is another landmark worth checking out, given its surrounding buildings, coffee shops and vibrant atmosphere.

Prado Museum, El Rotiro Park, Food and Coffee​

Prado Museum is probably a must go if you're going to Madrid, and for good reason, since it boasts such a vast collection of art pieces from artists such as Francisco Goya and Diego Velazquez. You could spend a few days here without a doubt, but we also had some other places in mind so we were happy to be done in just a few hours. Outside, there's the beautiful park El Retiro, with its signature pond decorated with the colonnades of the Alfonso XII monument. It was a great walk to bask in the sun and forget that it's the middle of January for a few hours. Right next to the park there's also the botanical garden, which would have been a better pick in any other season, but we still enjoyed the impressive collection of bonsai trees.

Monument of Alfonso XII	Madrid Street at Dusk

After leaving the botanical garden we went for a stroll through the upscale Goya neighbourhood. It's nice over here. All buildings are very, very well maintained, and they are simply beautiful and elegant. The city is just amazing, I don't think I encountered anything that was either bad or at least "could be better". Maybe the coffee was not as great as in other places, but there were some coffee shops that were quite good, for instance the Norah Coffee & Brunch in Goya. Don't forget to try the sweets. Another great option is Pascal Specialty Coffee & Brunch, which was closer to the hotel, and features a brunch selection more on the healthy side. If the coffee could have been better, the food was actually amazing. Spain has great food, without a doubt, and other places we could recommend in Madrid are Los Porfiados, for a cozy dinner, or Fiaschetteria La Saletta, if you crave Italian. Other coffee options worth mentioning are Alchemy and Dale.

Santiago Bernabeu, Sorolla Museum and Gran Via​

I'm not much into football, but when I watch it's most probably a Real Madrid game, either in La Liga or Champions League. Visiting the Santiago Bernabeu was something I really wanted to do, especially now with the updates it received. From the outside it's quite a piece of art, I love the facade with its gray shiny blades. On the inside, well, it's huge there are lots of big screens everywhere and a retractable roof, letting you know that it's proudly representing the 21st century. We could not enter the locker rooms, which was quite a shame, but at least we saw the hall of trophies, and there are a lot of them. This team knows what winning is about.

Santiago Bernabeu Stadium	Gran Via

After we left the stadium we went back towards the city center by foot and we stopped at the Sorolla Museum on the way. It's actually the former house and studio of Joaquin Sorolla, who travelled throughout Spain in order to create a considerable collection of paintings. The art pieces inside the museum are organised in a timeline manner, so we could follow along his interests and favorite places as he aged, from his home city of Valencia, to the Spanish countryside and the capital of Madrid, where he was very passionate about his garden. The garden itself is a great place to relax on a bench, looking at the pond and enjoying the shade of the trees.

Sorolla Museum Garden	Sorolla Museum Interior

The last but not least landmark I would like to mention is the Gran Via, and I would not miss it especially during the night, when I believe it really shines. Both the buildings, the landmarks and the street itself are spoiled by huge amount of light and it's a great way to end the day with a stroll to the shops and just enjyoing the vibrant heart of this otherwise amazing city. It's trully a great city, and probably one of my favorites so far. It's amazingly beautiful, it does not seem to be that crowded, the people are friendly, the food is great, the weather is pleasant and there are so many things to do. I would definitely come back here one day, definitely on a Real Madrid match day. Looking forward, hasta luego!

View of Malaga from the Mirador de Gibralfaro.

Truth be told, I don't mind palm trees with Christmas lights. I could live with that.

Finally, the South of Spain. It took a while to get here, but here we are. It's December, sure, but not in Malaga though. Good thing I brought a couple of T-shirts, otherwise it would have been a tough time. Christmas decorations while the weather's so good is just out of this world. Truth be told, I don't mind palm trees with Christmas lights. I could live with that.

So far so good. It turned out that going to Malaga at the beginning of December is a great idea. That was the good part. The bad part was that also half of Spain thought it was a good idea, and the place was packed with visitors. I believe they also had a day off during the week we chose to visit, and everyone took advantage of it. Our apartment was in the center (Be Mate Malaga Centro, great place, check it out) and we had to park somewhere, but, really, there was absolutely no place to park a bicycle, yet alone a car. We finally found a payed multi level car park nearby, barely. Inside it, we found an empty spot on the last floor. Lucky us.

Malaga by Day​

I believed that using a rental car was the way to go, since we planned to visit at least some other town besides Malaga, but we did not leave the city eventually. However, the car was cheap to hire, and since I used it only to drive from the airport and back, I did not even bother to refuel. Anyway, we got to our apartment, super nice, way above what we got in Naples or Catania. Yes, it was a touch more expensive, but we got a lot for our money. Totally recommend the place, it was spacious, modernly furnished, right in the city center, but in a very quiet area.

Now the city itself. The historical city center is, I would say, a pretty standard Spanish city, and that's a very good thing. It's clean, it's very well maintained, the buildings are superb, and the amount of restaurants and coffee shops is insane. Spain does not offer the best coffee in the world, not even in the specialty coffee shops. It's not bad, by any means, but certainly not the best. On the other hand, the food, well, that's something else. From the standard brunch toasts, Benedicts and avocados to the seafood, meats and deserts, the food in Spain is just glorious. I think Portugal still tops it up, but Spain is definitely top 3 in my book. Definitely check out Next Level Specialty coffee, and you must, absolutely must, get the French Toast: toasted bread with cream, bananas, strawberries, blueberries and honey. Combined: magic.

Walkway to Alcazaba	Catedral de la Encarnacion

Obviously, there are some sights to absolutely deserve a visit. But just walking through the city center is pleasant enough, while going to the stores, getting ice cream, the usual stuff. As we strolled around, we got to the Catedral de la Encarnacion, which is Malaga's main church, and it's imposing both on the outside and on the inside. Definitely worth paying for the entrance. From there, the Alcazaba is just at "a stick throw" distance, and it's the main atraction of the city. For good reason, to be sure. The castle itself is very well preserved, and they are obviously very proud of their monument. And walking through the courtyards is a great experience, especially because of the many beautiful gardens and beautiful architecture. And, of course, the views over Malaga are simply gorgeous.

Right next to the Alcazaba there's the Gibralfaro Castle, and since we visited Alcazaba, we might as well do both simultaneously. Gibralfaro is not as special as the Alcazaba, but it has better views, especially from the Mirador de Gibralfaro. We could not see the Malagueta from there, due to the buildings around the Plaza de Toros. But we did, of course, enjoyed a great view over the stadium for the bullfighting shows.

Gibralfaro view to Malagueta	Alcazaba view to Malagueta

Another point of interest is the Malaga Museum, which definitely has a lot to offer. I found the painints from Moreno Villa particularly interesting, and there should be enough art for everybody. Actually, I think the Spanish museums are the best I visited so far, so if art is your thing, make Spain your priority. I enjoyed museums not only in Malaga, but also Barcelona, Madrid and Zaragoza. One thing that's actually a bit not so great is the fact that, when it's 15 minutes to closing time, they smiply kick you out, without any sign of politeness. It happened to us in Malaga and also in Madrid, and the fact that they insist for you to leave is just, well, not great. On the bright side though, once you exit the Malaga museum, there's a very nice terrace with palm trees that screams Instagram and Vice City, so we definitely took a few pics with the palm trees at dusk.

Malaga by night​

Remember the part when I mentioned half of Spain was in Malaga for the weekend? That was not immediately obvious by day, save for the parking situation. However, by night, it was a completely different story. The whole city center, from the Plaza del Constitution, all the way down the Marques de Larios and towards Malaga park, including it, was so crowded it was just impossible to move. It was quite scary at times since I was not used to these kinds of crowds, but apparently, in Spain, it's completely normal. Nobody was even remotely mad about the whole thing.

Every person in the crowd was happy, everyone was singing, there was a smile on each and everybody's face, and I realised just how happy people are over there. In lived in Bucharest and Prague all my life, and I am mostly used to seeing gloomy faces that were quick to snap and constantly one small second away from getting angry. And it felt good to see happiness, just randomly manifesting itself on the street.

Marques de Larios with Christmas Decorations	Historical Center Building

Probably the holiday also helped to create all this joie de vivre, and we were lucky enough to be in the city center when they blasted music through the speakers, along with a light show using the Christmas decorations. Everyone, obviously, knew the songs, so they were singing along. It was absolutely amazing, probably one of the best feelings I had for a moment, and I will always remember Malaga for that show and for how it made me feel.

One evening we also met with a couple of friends who happened to be around Malaga at that time, and we went for a walk towards the Malagueta and then back to the city center, where we went to a ramen place. I'm not a fan of the soup, but luckily they also served sushi, so it worked out well for me as well.

Since I am also watching games in La Liga from time to time, I know that Malaga has a very famous football team. Consequently, I could not leave before going for a walk to the La Rosaleda stadium. Sadly, it was already dark outside, and could not see much of the stadium, and since it was already evening, visiting it on the outside was not possible either. It did not seem to be as grand as the Bernabeu or the New Camp, but I was happy to see it anyway, as I'm also a fan of its name, La Rosaleda.

Wrapping up​

It was a very short trip, and I'm quite OK with the fact that we did not go other places we planned to, like the Caminito del Rey or Granada, but this leaves us with the opportunity to go back and make up for it. And, most probably, I will be back in Spain multiple times from now on, given its rich history, great Western architecture and Moorish influences, incredible museums, incredible food and good enough coffee. Next on the list was, obviously, Madrid, for a strong 2024 start in the travelling department.

View of Etna from the Ancient Theatre in Taormina.

The food was delicious, from the Tagliere di Salumi e Formaggi to the Pesce Spada a Siciliana.

I had Sicily in mind for some time, and going to Catania was definitely something I looked forward to. Initially, Palermo was the preferred destination, until I realised I bought the tickets for Naples instead. Anyway, Catania was supposed to be better as it was closer to Etna and Taormina, so off we went to this place full of history. And cannoli.

Catania​

After arriving at the airport and getting into the car, I realised that I'm about to drive in Siciliy and that came a bit scary. Oh, and the parking. Bad move. However, after leaving the airport and arriving into town, I realised it's actually pretty straightforward. People are actually quite nice, since I did not know the way and struggled at times. If I was doing the same in Bucharest, outward chaos whould have ensued. Parking was a bit of a hassle, due to the limited space, but once we found a spot, we payed at a nearby parking meter and went on with our business. Quite nice.

The apartment was near the Teatro Massimo Bellini, a very popular and charismatic place with a plaza in front. Apparently, we stayed in (or near, I did not quite understand) a building that was built by Mussolini. Yeaaah. Anyway, it was close to the center, where we could stroll on the Via Etnea and explore the shops and restaurants, and there were quite a few of them. The place was quite popular all day long, and we enjoyed the very lively atmosphere, as well as the nearby monuments of Sant'Agata church, University Square and the Elephant Fountain.

Basilica Cattedrale di Sant'Agata	Teatro Massimo Bellini

Near the Etnea we found a very good (quite excelent, actually) restaurant, Deliziosa, and we enjoyed it so much we went there twice. The food was delicious, from the Tagliere di Salumi e Formaggi to the Pesce Spada a Siciliana. Again, most excelent, would totally return. Also near the center is the fish market, and it's exactly what you would expect from a good ol' Sicilian market. If you're into fried fish, make sure to check out Scirocco. If you're into a coffee spot with a quite charming host that does magic tricks, go to Ciao. I must say, overall, the whole experience was pretty unique.

We also walked away from the center a few times, but the sights were not as impressive. Sure, the city does have its charm, and there's no denying that it has rich history and charm, but it does feel that it needs a little more maintenance. And it's such a shame, given the city's potential. We walked towards the waterfront then through San Cristoforo all the way to the Porta Garibaldi, and although it was a relaxing walk, there was nothing much to see. Also, towards the north, the Piazza Carlo Alberto di Savoia is, again, not the best of sights. We had a pretty standard Italian coffee at a nearby coffee shop, ate a brioche and went back towards San Berillo.

Taormina and Aci Trezza​

The weather proved to be better than expected, so we took the car one day for a trip to Taormina, which was top of the go-to list. Once there, we parked and went into town, and again, even though the place was undenyingly beautiful, it felt that that it was not as great as we had hoped. Maybe the fact that we went there in November did not help either, and many places and restaurants were closed. We did find the Ancient Theatre open, and it was a great sight to see the Etna from this impressive monument built by the ancient Greeks. The weather was sunny and we were lucky to see the wonderful volcano in the distance very clearly. And it was incredible, I could've stared at it forever. The trip was totally worth it, even though we could not find much to do in the town itself.

Taormina Building	Aci Trezza

Consequently, we went back in the car and drove towards Catania, only to stop on the way in Aci Trezza, a small town on the beach. We went for a walk on the waterfront, enjoyed the town'n port and took pictures of the Cyclops. Unfortunately, apart from this, there was nothing else to do, so we turned back and drove all the way to Catania airport.

Wrapping up​

I'm going back to Sicily for sure, and will try to visit Palermo and the surroundings next time, maybe even Syracuse, given its rich ancient history. I did like the trip, for sure, although it was not my favorite out of 2023. Maybe the Palermo option will be different, let's see, there's only one way to find out.

View over the Baiului Mountains.

I've learned to do the Corpse Reviver #2 and the Paloma.

I plan to write each of my year in review articles at the end of December. This one lands at the end of February, so things are not really going as planned so far. To be honest, during the whole year I felt that I've pushed many deadlines, and at times it felt quite overwhelming, but, looking back, my 2023 was not as bad as I thought it would be. Motivation was low throughout the year, sure, but consistency did help quite a lot, and I'm thankful for the habits that helped me decisively.

Goals for 2023​

In my 2022 year in review, I set a list of goals for myself, and I am curious how many did I manage to accomplish. Let's start this article with a disappointment, shall we?

• update Downshift to v8

  Actually, we're at v8.3.1 and, even though we still have some important things to fix, we are React 18 compatible, we support fully the ARIA 1.2 pattern, we have TS type support for the getter props (a long time coming) and overall API improvements. Actually, I'm not very mad with the current of the library.

• finish Marcy's course and 2 more Frontend Masters web development courses.

  The biggest fail for 2023 was in fact the learning aspect. I did not finish Marcy's course, I still have a lot to go, and, obviously, the Frontend Masters courses were out of reach.

• read at least 10 books, starting with Don Quixote.

  I fell short of the number 10, but not by far, and the books I've read were actually quite impressive. More on that later.

• improve to 3 times per week gym schedule.

  Done. Big win. Not that big gains, but still fine.

• attend at least one dancing congress.

  I am going to my first salsa congress in Brasov at the end of January, so let's consider it done.

• visit the south of Spain and New York.

  2023 main achievement was travelling, and yes, I did check Spain and New York, among many others. More on that, later.

• revive the Tab Order Testing library I worked at in Adobe.

  I reviewed the current state of the art in Microsoft and decided that the library is not going to be useful anymore.

Overall, not half bad. Yes, motivation was not my gratest 2023 asset, but it wasn't motivation that helped me achieve my initial 2023 plans, or the things I achieved on top of them. It was consistency, it was habit. Motivation comes and goes. Habit is there once it's built. I heard about it in most motivational content, and 2023 helped me actually understand why it is so valuable.

Coding Stuff​

I've enjoyed quite a successful year at Microsoft, and so far I'm quite happy with the projects I'm contributing to. Microsoft Teams is a very used product, and even though it does have its reputation, it's packed with features and it became better through the years, and I'm happy to contribute to that effort. My favorite part was the March hackathon when I successfully presented my project to the leadership, which got very favorable reviews and we might even see it one day fully implemented in Teams. Super excited about that.

Apart from my normal job, I also continued to code for open source, and updated Downshift to include React 18 and ARIA 1.2 pattern support, among many other fixes. What I'm also proud about is that I continued to write on this blog, and not just tech related articles, but also from my trips, and everything is coming along nicely. Oh, and I also achieved something quite big in the work department, but, at least for now, it's classified.

Hobbies​

Quite a few updates here as well. I've started to go 3 times a week to the gym, and it feels so good. I've also resumed basketball once per week and also running, even though it became mostly a once per week event as well. Overall, I'm quite satisfied with my current active shape, and I look forward too keeping it. I only wish that I've been more times on hiking trails, as 2023 was not my best, so I hope to improve the hiking frequency in 2024.

A big change for me was giving up bachata classes, but, on the flip side, I continued my salsa classes, and I'm having a blast. I'm super happy at my current dance school and I feel that I'm improving. To top it off, I went to my first salsa congress in Brasov in January 2024 and, even though I dislike staying awake at night, doing only that while not doing anything else during the day is, let's say, manageable. The congress itself was super fun, I feel like going again next year.

Algarve Beach Hiking	Guns 'N Roses Concert

Another event worth mentioning for me was the Guns 'N Roses concert from July at the Arena Nationala. I was lucky to receive tickets for the concert and wow, what a show. It was an incredible experience, and a top notch performance from the band. I won't forget it anythime soon. Even though the sound from their microphones was annoyingly cut out many times, the event was unlike anything else.

Oh, and did I mention that my banana bread is probably the best in the world? I perfected my technique quite a bit. Also, I added the lemon and like cakes to my portfolio, so the coffee shop does not sound like a bad idea at all. Oh, and cocktails! I've learned to do the Corpse Reviver #2 and the Paloma.

Books​

I aimed to read at least 10 books during 2023, and I fell short of that number, but not by far. Here's my list:

1. Don Quixote, Miguel de Cervantes. I had so much fun reading this, even though it was quite a long book. It wasn't only fun, but a great insight into human nature, idealism, and reality versus imagination. The other stories inside the book are fun as well, especially the one with the husband that used his friend to check on his wife's loyalty.
2. The Little Prince, Antoine Saint-Exupery. This tiny book is a great opener into subjects such as human relationships, love and innocence.
3. Augustus, Adrian Goldsworthy. I'm a sucker for ancient history and I've previously read Caesar from the same author. Augustus did not disappoint, as it tells the story of Octavian, with his early blunders and not so many achievements, as he took advantage of his situation in the context of the late Roman Republic and became the de facto ruler of the Roman world.
4. Lord of the Flies, William Golding. As with 1984, it reminds us of what human nature really is when left unchecked.
5. Myth of Sysyphus, Albert Camus. I'll be honest, I got nothing here.
6. Invisible Man, Ralph Ellison. I've enjoyed this one quite a lot, as the narrator grappled with racism, injustice and political manipulation as he endlessly searches for his personal identity.
7. The Richest Man in Babylon, George S. Clason. It was a very useful read to refresh my own ideas related to wealth and budgeting.
8. Jane Eyre, Charlotte Brontë. A very refreshing book, as it goes beyond the love story into feminism, the search for identity and social justice.

So, not really 10 books, but not very far off. My favorite was probably Jane Eyre, given the main character's complex journey and the very deep insight of her thoughts. The Invisible Man was not very far off.

Travelling​

If there was a personal highlight of 2023, travelling would have been that one. I love travelling, but 2023 was on a whole different level for me, and, to be honest, it felt really good. I enjoy spending both a few days in a different place, as well as a full 2 week vacation far from home. It helps me clear my thoughts, re-energise and even become more creative within my daily work. I only wish 2024 to be quite similar in this regard. Here it goes, the list of all the places I've been to:

• Prague, January. It "happened" for me to be in Prague for Microsoft's Winter Party. What a coincidence.
• Perugia, March. One of those random destinations you pick because plane tickets are cheap, and it proved to be a very good idea. The biking along the Lago Trasimeno was the highlight, for sure.
• New York & Seattle, April. Best vacation for a while, maybe the best ever. I now have a new favorite city and can't wait to go back there. Seattle is also great, given its laid back atmosphere, greenery and nearby hiking spots.
• Oslo, April. Another random destination, can't wait to go back to Norway for a more hiking & nature oriented experience. Oslo was quite nice as well, and it has great museums too.
• Prague, June. Business trip with a little bit of fun. The biking trip to Karlstejn was, well, quite something.
• Malta, August. It was so hot, but everything else was great. Can't wait to go back to the island, it's full of fun stuff to do. Need to book that Katamaran experience in advance, though.
• Naples & the Amalfi Coast, September. Naples is a great city to visit, as it has a quite strong personality. Also, the beauty of the Amalfi Coast is unrivaled. Can't wait to go back there again, as Capri and Amalfi are next on the list.
• Prague, October. Yeah, it's my favorite place to visit. This time there was no hardcode bike trip, just coffee, food and walks. And I finally went to visit the Prague Castle.
• Lisbon & Algarve, November. The other long 2 week trip, and what a trip it was. Everything was perfect, I hiked on the sea shore, I climbed on top of castles, I rested on the beach surrounded by dramatic cliffs. I also missed Web Summit this year, but really, whatever. I made the most out of it. Oh, and that entrecote, oh my.
• Catania, November. Maybe my hopes for this one were quite high, and it was maybe a bit disappointing, but I would still return to Sicily, maybe in the spring is better.
• Malaga, December. I'm going to return to the south of Spain, for sure. This place is marvellous, the weather is incredible, the people are smiling, and I loved it.

Central Park Selfie

11 trips in total. Not bad. I want more. More is better.

Goals for 2024​

Let's see.

• Finish the A11y course and do 2 more courses on Frontend Masters. Same as last year, but I'll actually do it.
• Read at least 10 books. Again, same as last year.
• Go on a trip to Asia. Anything really, Japan, China, Thailand. All three. I don't care, but I want to go there.
• Bump Downshift to v9. We do have in plan some API changes, apart from the fixes we want to implement.
• Cook 3 new recipes.
• Hike at least 6 times. Once every couple of months. Should not be too difficult.
• Make a big move. It has been quite some time since I did not do anything radical, ever since I came back from Prague in 2020. I feel that it's time I changed something dramatically about myself.
• Start doing yoga.

Praia de Vale Figueiras at sunset.

I deserved the pizza for dinner that evening.

Portugal in November has already become a tradition for me. It's the third time in a row when my friend and I use the Lisbon Web Summit as an excuse to go surfing in Lagos, visit Lisbon and its surroundings, and just enjoy everything that the south of Portugal has to offer. This year was no exception, and we had a blast of a time spanning a couple of weeks, full of surfing, visiting, hiking and just laying on the beach. Are we going to continue the tradition in 2024? Probably.

Lagos Surfing​

This is the main spot where we spent most of our two weeks, in the middle of the Algarve, one of the most beautiful areas I've ever seen, with spectacular scenery, eye candy beaches, the best food in the world (sorry Italy) and great weather. My priorities were, of course, surfing, hiking on the Fisherman Trail, eating the best pancakes in the world and reading on the beach. Not necessarily in that order.

This year, as in previous years, we chose the Surf Academy surf school for our surfing sessions during the weekends. They are great and provide a convenient way to organise the surf sessions, as they will know pretty well which beach to choose during each day. They also know which spot on the beach is better to catch waves, and during which times the tide is the best. I, for one, don't have such expertise, and apparently neither does my friend, as we both found out when we went one day on the beach on our own. It was terrible, we caught nothing, except huge waves straight to the face. Never again.

Since it was already mid November, we avoided the West Coast beaches, as the waves there were pretty huge. The surf school chose a couple of beaches in Lagos, Porto Mos and Meia Praia, where the weaves were a bit more calm and you could actually surf. I did catch quite a few green waves, and I think I improved my technique overall, so next year I actually look forward to be able to also steer on the wave, not just go straight on to the beach. Fingers crossed!

The West Coast​

Praia de Vale Figueiras View

If you're not drinking, then you're not playing. It's my favorite place in the Algarve. The beaches there are just out of this world. We went one evening the Vale Figueiras Beach, and we reached it during the sunset. Wow. Just wow. The lightning was perfect to take the best shots, and I took quite a few. First of all, the ocean put on quite a show for us, the spectators with the jaws dropped. It's probably one of the most relaxing experiences to gaze at the neverending lines of waves, and each and every one of them performing right down the beach. The sleepy sun rays made everything even more spectacular, and even the seagulls seemed to participate in the whole ocean choreography. It was perfect, probably one of the best experiences of my life.

Praia de Vale Figueiras Rocky Hills	View towards the Atlantic from the top of the hill

Another great beach is Praia da Arrifana, and this one was more surfing friendly, as when we got there it was quite full of people, most of them with surf boards. However, the beach is quite huge, so I did not feel crowded or anything. On the hill overlooking the beach there's a small town where we had lunch and coffee, at the Sea You Surf Café, and the whole experience was complete. My friend tried to catch a few waves there, but without much success. I settled just for some beach time and a few pictures on the left end of the beach, where I found a spectacular terrain with rock formations raising up from the shallow waters. It was time for some pictures.

Praia da Arrifana Rock Formations	Praia da Arrifana Steep and Rocky Hills

Trilho dos Pescadores​

The Fisherman's Trail was one of my main objectives for the trip. It's quite a long hiking trail on the West and South coasts, starting at Praia de São Torpes and ending in Lagos. It consists of 226,5 km of trail that takes you through breathtakin scenery on the Atlantic Ocean's coast. Theoretically, you need quite a few days to do it all, maybe 12-15, and pick accomodation in the towns along the way. It does not sound easy, even if it's not taking you through the high mountains, but next to the sea instead. I wasn't planning to go from start to finish, I'm not there yet, but instead I planned to hike specific parts of it, starting backwards from Lagos, march as much as I could until I ran out of daylight, and call my friend to pick me up with the car.

Ponta da Piedade near Lagos	Praia da Luz from near Rocha Negra

I did a couple of such trips by myself, and it was refreshing. Just being on the trail with only a small backpack full of water, sandwiches, sunscreen and oat biscuits is both exciting and relaxing at the same time. My first trip started in Lagos and I managed to go all the way to Praia da Boca do Rio, even though I was hoping to reach the town of Salema. Unfortunately I ran out of sun, and I was quite exhausted, so I called it a day just before the city. It's interesting that this whole trip involves different types of scenery, and no two parts of the hike were the same. I enjoyed steep cliffs and grottos from Lagos to Porto Mos and quite arid cliffs up until Praia da Luz. Starting from Luz and all the way to Burgau, the terrain is still quite arid, but I was delighted to see some beautiful gulfs, and it was quite something to just sit on top of the hills and rest while the ocean was throwing its waves towards the land, over and over.

Gulf near Praia da Zora	Uphill view of a climb near Praia das Furnas

I arrived in Burgau, a very nice town which reminded me of a typical Greek town on the sea, with similar white houses that exuded the salty air of vacation, surrounded by palm trees and paperflower vines. After exiting Burgau, the trail tood me through a field of cacti, and it was pleasant for me to see them out in the wild, as I also have quite a few at home. This part of the trail was my favorite, since it had more greenery and a few spots of forest. It also helped that, being near the end of my trail, the sun was setting and the light became perfect. However, it's also the time I realised that I need to finish the trail or at least go to some place where I could call my friend to pick me up, as ending on the trail during the night, without proper equipment was no joke. So I raced to the finish line, which was the town of Salema, but it was really too late, so I settled for Praia da Boca do Rio and called it a hike. I deserved the pizza for dinner that evening.

Praia das Furnas	Gulf near Zavial
Gulf near Zavial	Cactii in the wild near Burgau

A few days later it was time for part two, so I took the bus that left me in the middle of some road, and I walked from there to Salema and resumed the trail. The plan was to go all the way to Sagres, but I arrived simply too late to start the hike and I was unable to reach it. On the flip side, I did arrive to some great beaches that were absolutely fantastic to look at. The trail also became even better for my taste, as it was even greener and I started to also go through forests and shrubbery. Praia da Figueira was quite a sight, and afterwards the trail had to exit the seaside to go through some countryside instead. Quite an interesting change of scenery, I liked it. After that part of the trail I ended on the Praia das Furnas, and I had the chance to enjoy some art as well. There are some circles made of stone, overlooking a grotto, and the whole scene is picture perfect. Back on the trail and the scenery simply just did not stop amazing me. The highlight was Praia do Zavial, and I had to make a couple of stops to gave upon it, on each of its ends. The lines of waves were pefect, hence the number of surfers in the water.

Praia do Zavial	Uphill trail near Praia do Zavial

After the beach, I went back on the trail and I started to feel the overall exhaustion. I started to realise I was not going to reach Sagres, so I just admitted the fact and did not hurry up the pace, as I was content with the experience up until that point. Nevertheless, I found more spectacular gulfs, like the Forte e Bateria do Zavial, and more beautiful beaches like the Praia da Ingrina, where I raised the white flag and stopped for good. It was enough hiking for one trip, and I enjoyed every bit of it.

Sky seemed to be on fire at sunset, near Praia da Ingrina

Lisbon​

My friend, we meet again. There are some feelings in this wonderful city that are simply unique in the world. Driving on the Vasco da Gama bridge is one of them. Climbing to one of the many view ponints, or miraduros, and enjoying the view of the bay is another. With some pasteis de nata, it's even better. But the best feeling is enjoying them on the spot, with a dash of cinnamon. You can confortably skip the coffee, save it for later. It so happens that each time I'm in Lisbon I discover completely new things about it, and that makes me want to return again and again. This time, for instance, I used the bay area for jogging and it was a breeze. Dad joke out of the way, checked.

Since our apartment was located near the Pantheon, my walks were focused in that area, even though, this time, I did not spend as much time in Lisbon as I din previously. The Pantheon area might seem a bit strange, but it has one of the best places to eat in the city. Hear me out. I tried a couple of local, no fuss restaurants, and the food was delicious. When in Lisbon, always go for seafood and fish. I ordered octopus, shrimp and tuna steak, and all of them were fabulous. These couple of places I tried are called O Tasco do Vigário and A Parreirinha do Paraíso. The people were super friendly and I was treated really well.

Lisbon Pantheon	Lisbon alley

However, the cherry on top was actually nothing related to fish or seafood. When in Lisbon, you must, and believe me, you must go to Affair Restaurante & Bar and get the entrecôte. I never had one in my life, at least not a full one, I am not a fan of beef or fat. But this one, oh my Lord. It was pudding of magic in the mouth. A-ma-zing. The other things I ordered were really good as well. You must try this restaurant when you visit Lisbon, otherwise the trip is a waste.

Equally great about the neighbourhood were the brunch spots, and my favorite was Augusto Lisboa. Not that much to choose from, but everything was spot on. And the coffee, equally perfect. Try the iced latte. Thank me later. Quase Café is also nice, but not nearly as good. You'll figure this out when you'll see the queue.

Now, I did mention that I did not spend too much time in Lisbon this time. That's because I chose to visit a couple of towns near Lisbon that are equally famous and everyone recommended them to me previously: Sintra and Cascais.

Sintra​

Picture this. You are a noble. You have tons of money, lots of style, blue blood and you like castles. You also like going to the beach, get a tan, enjoy the waves. But you also like hiking through forests, maybe go hunting from time to time. You don't want your castle to be isolated either, you also want to go out from time to time, greet the crowds and whatnot. And you want some place to have all of this possible. Welcome to Sintra. It's a hilly landscape, surrounded by trees, 15km from the Atlantic Ocean. And it has, you guessed it, a lot of castles.

Fortunately, getting to Sintra is super easy. You just get the train from Rossio station, and it's a nice ride that lasts less than an hour. Once I got there myself, I quickly understood why it was such a popular place. It's gorgeaus. The town itself is not very big, but it's cosy, with stylishly decorated houses on curvy streets that hug the hills full of forests. The bad news is that the nobles who commissioned the castled did so on the very hilltops. And the train station is at the base of Sintra, so you kind of need to go up and climb a lot. Of course, there's the option of taking a cab.

The Park in Sintra on the way to the castles	The forest surrounding the Sintra Castles

But there's no fun in that, so I grabbed a bottle of water and went for the climb. The first part was the trickiest, since it involved trying to correctly pick the streets in town. I believe at some point the road went straight through a bar. I'm not even joking. But at some point I made a left and I was out of the normal roads and on the actual trail. This first part of the hike was very beautiful, as it went through a botanical garden, and I love them botanical gardens. Sadly, I could not enjoy the place that much, as I had to reach the castles as well, so I went further on the trail and took pictures for later. After a while, the park ended and I found myself in the forest. The trail was still there, but now the landscape turned out to be more natural, and it was equally satisfying. Imagine hiking through the woods, and from time to time you encounter a view point, where there's a clearing, and seeing the castles of Sintra in the distance. Quite a unique experience, if you ask me.

I reached the first of the two main objectives of the day, the Castelo dos Mouros. It's more like a fortress, capable of defending the area as it sits quite high and has great views of its surroundings. It's well worth the visit, not only for the views, but also for admiring a very well maintained fotress, built by the Arabs in the 10th century. It's incredible how well the site has been preserved, you could swear it was built just recently. I ended up doing a full castle circle and admired all the views, since all of them were both incredible and unique. You have a view of the Atlantc Ocean, which is right there, you can probably see Cabo da Roca. Then there are views over Sintra, obviously, and also towards the other atraction of the day, Palácio Nacional da Pena.

The Moorish Castle	View of the Atlantic from the Moorish Castle

Now, this second castle is indeed an actual proper chateau, built for the actual Portuguese royalty. On the exterior, the National Palace of pena is marvelous and it definitely gave me Disneyland vibes, given its architectural style and the rich combination of colours. It's also surrounded by a very large domain that acts as a park, and even though there is more climbing to be done, it's a very pleasant walk. Inside the castle it's nothign that special, but it's nice enough, as there are many rooms that belonged to king Ferdinand and queen Maria and display a generous collection of furniture and decorations. Unfortunately, I was in a queue of people that moves quite slowly during the whole tour, and that part was not exactly my cup of tea, but it's understandable due to the structure of the tour and the number of people wanting to visit.

A view of the Pena Palace from below	Pena Palance from its courtyard

With the tour done, I returned to Sintra by the same road, only this time it was downhill, and stopped at the local Starbucks for some late lunch and a glass of iced matcha latte. It was a very well spent day, I enjoyed the town so much, the castled were impressive and the views even more so. I took the train back to Lisbon and searched for dinner.

Cascais​

My second recomandation to visit near Lisbon is the coastal town of Cascais. The next day after the Sintra trip, I boarded the train from Cais do Sodré and enjoyed a similar trip to the one I had the day before. It was great to be able to use well thought transportation infrastructure in order to get around, so kudos to Portugal for that. In places such as the Amalfi Coast or Sicily, the lack of proper public transportation is pretty annoying, at least to me, but in Lisbon everything was spot on.

I arrived in Cascais and immediately felt in love with it. It's a place where you immediately feel like you're on a proper holiday, and start thinking only about laying in the sand, playing beach volleyball, surfing and long walks by the sea. The town is very pretty overall, and there's a lot of shopping to be done in the center. What I liked very much was the Marina, and I took my time to walk around it and admire the boats that were moored at that time. I continued my walk around the coast and eventually reached Boca do Inferno, which is a very beautiful display of oceanfront cliffs that were carved by the relentless waves into an open cave. A great spot to admire, but, to be fair, the whole coast is equally beautiful, so I exited the main road in order to hop on the cliffs and try to get closer to the water, so I could get a better view.

The Cascais Marina	Boca do Inferno near Cascais

After walking for some time on the coast, I reached Guia Lighthouse and decided to head back to town, as there wasn't anything else on the way to visit, at least not within walking distance. I rented a bike on my way back, parked the thing in a designated parking lot, and went to have a very late brunch. Afterwards, it was back to Lisbon, as I was already feeling a bit tired from all the trips I had during those two weeks.

The End​

Portugal is probably my favorite country to travel to, so far, even though I hardly had a chance to explore it further. On my list there's Madeira, the Azores and Porto at the very least, and I hope to travel to these places soon. It's a very beautiful country, with very friendly people, great infrastructure, the best food in the world (again, sorry Italy), impressive history and with so much more to offer. I love it, and I look forward to visit it at least once every year, kind of like a tradition. Thank you, Web Summit, for giving me the excuse to discover such a great place!

Praia da Arrifana, Portugal.

I don't always do TDD, but when I do, I write about it.

From the GitHub issue to the next library update on npm, we are going to push a feature request via the magic of Test Driven Development. It's easier than you think, and next time when the interviewer asks if you've heard about TDD, you will smile, say yes, then test drive their Leetcode puzzle and bring home the biggest offer they could make. TDD is also great in day-to-day work when adding features for your products, fixing issues and solving open source tickets, which is what we're going to do here.

The Problem​

Let's take the following small feature request from Downshift:

Select element doesn't receive focus when the label is clicked.

Test driving this feature means that we need to write the tests before the feature. And that's a good thing, because writing the tests first will make us ask the most relevant question, what exactly do I want to achieve here.

That usually means drafting a list of requirements, and based on that list of requirements, we will write the tests. Running the tests will result in test failures (at least they should) and by implementing the feature the tests will start turning green. Once all the tests are green, it means our feature is complete. This is called red-green refactoring.

Before making the list of requirements, let's also visualise how this select element is built with Downshift's useSelect.

const {getToggleButtonProps, getLabelProps, getMenuProps, isOpen, ...rest} =
  useSelect({
    items,
  })

return (
  <div>
    <label {...getLabelProps()}>Books:</label>
    <div {...getToggleButtonProps()}></div>
    <ul {...getMenuProps()}>
      {isOpen ? items.forEach(/* render books if open */) : null}
    </ul>
  </div>
)

This will build a markup similar to:

<div>
  <label id="label-id-1" for="toggle-id-1">Books:</label>
  <div
    role="combobox"
    aria-expanded="false"
    tabindex="0"
    aria-controls="menu-id-1"
    aria-haspopup="listbox"
    aria-activedescendant
    aria-labelledby="label-id-1"
  ></div>
  <ul role="listbox" id="menu-id-1" aria-labelledby="label-id-1">
</div>

The Requirements​

1. Clicking the <label> should place the focus on the combobox element.

This would have been done automatically if the labelled element would have been an <input> or a <button>, given how the label's for attribute works by default. However, if the labelled element, here the combobox, is a <div> (ARIA 1.2 spec), the focus must be added manually via a click event. We would have the same issue if we replace the <label> with something else, so another reason to add this behaviour.

2. Passing an onClick to getLabelProps should not interfere with the default focus behaviour we will be adding.

For instance, calling the code below should focus the toggle button and display the log.

<label
  {...getLabelProps({
    onClick() {
      console.log('Clicked!')
    },
  })}
/>

3. Passing an onClick to getLabelProps adds the preventDownshiftDefault attribute on the click event object should not focus the toggle anymore.

It's a practice similar to the event's preventDefault, where we can control the default behaviour of the event. In Downshift's case, we want to be able to stop the Downshift default behaviour.

<label
  {...getLabelProps({
    onClick(e) {
      e.preventDownshiftDefault = true

      document.querySelector('#better-element').focus()
    },
  })}
/>

The Tests​

That's the beauty of drafting a list of requirements, you could use it to write the tests. Downshift is a React library, so we are going to use React Testing Library and Jest in order to check our changes will be correct.

Our first test is going to be easier, since we only want to render the Select, click on the label, and check if the toggle has focus. To render the component, we will use RTL render method with a JSX similar to the example when describing the problem.

function renderSelect() {
  const utils = render(<Select />)

  return utils
}

function Select() {
  const {getToggleButtonProps, getLabelProps, getMenuProps, isOpen, ...rest} =
    useSelect({
      items,
    })

  return (
    <div>
      <label {...getLabelProps()}>Books:</label>
      <div {...getToggleButtonProps()}></div>
      <ul {...getMenuProps()}>
        {isOpen ? items.forEach(/* render books if open */) : null}
      </ul>
    </div>
  )
}

With these abstractions in place, our test becomes:

test('clicking the label moves focus on the toggle element', async () => {
  renderSelect()

  // RTL's user-event tool
  await user.click(screen.getByText('Books:', {selector: 'label'}))

  // RTL jest-dom extends Jest's expectations to include "toHaveFocus".
  expect(screen.getByRole('combobox', {name: 'Books:'})).toHaveFocus()
})

And we're done. We render, we click the label, we check if the focus is where we need it to be. We run the test, it will fail, it's a success, we go grab lunch.

Now, something about the other 2 requirements. These are part of Downshift's API for some time now, and they already have a utility function that chains callbacks together and calls all of them on a event trigger. This utility also knows not to call Downshift's default event handler if "preventDownshiftDefault" has been passed. We are not going to test this utility now, we just want to make sure it works for our callback. Sure, we can just mock that utility and check the call, since we also test the utility in isolation to make sure that it works. But it's better to test for the actual user consequences rather than implementation details, so let's write the tests for these last requirements.

For the second requirement, if we pass our own onClick to getLabelProps, it should get called along with the default handler that sets focus. For this particular test, we don't need to render the whole component, we can just render the hook, like this.

export function renderUseSelect(props) {
  // renderHook from RTL
  return renderHook(() => useSelect({items, ...props}))
}

Now, we need to find a way to check that our custom onClick is called when the label gets clicked. Which, in turn, means that we need to actually trigger that click, since we are not going to render actual markup, we are just testing the hook. We know that getLabelProps will return an onClick that should end on a label element, so all we have to do is to pass a Jest spy as an onClick argument to getLabelProps, then call the onClick returned, and check the spy.

test('event handler onClick is called along with downshift handler', () => {
  const userOnClick = jest.fn()
  const {result} = renderUseSelect()

  const {onClick} = result.current.getLabelProps({
    onClick: userOnClick,
  })

  onClick()

  expect(userOnClick).toHaveBeenCalledTimes(1)
})

Simple! Now we test that whatever we pass in the onClick, it will be called with Downshift's handler. Which is something we don't test at the moment, and that's a huge potential problem over there. We don't want a regression to slip in one day and ruin everyone's Select elements if they also wanted to pass their own event handlers to our prop getters, which is a very common use case.

This is the part of the TDD where we need to think about the implementation. To manually focus the toggle element, we need to use a React ref on the combobox toggle JSX element, and use that ref object to perform a manual .focus(). Consequently, there's going to be a ref object returned by getToggleButtonProps, as it needs to be passed to the toggle element. We will use the ref in the useSelect code in order to perform the focus action. In our test, we just need to grab this returned ref and call it with a mocked object that has a focus function attached to it, which will be a jest spy. If our implementation works, the object we pass as argument to the ref function call is going to be used by the internal code to perform the focus. The test becomes:

test('event handler onClick is called along with downshift handler', () => {
  const userOnClick = jest.fn()
  const mockToggleElement = {focus: jest.fn()}
  const {result} = renderUseSelect()

  const {onClick} = result.current.getLabelProps({
    onClick: userOnClick,
  })
  const {ref} = result.current.getToggleButtonProps()

  ref(mockToggleElement) // simulate that React will add the toggle element in the ref.
  onClick() // now we should have the ref containing the toggle element, we can click the label.

  expect(userOnClick).toHaveBeenCalledTimes(1)
  expect(mockToggleElement.focus).toHaveBeenCalledTimes(1)
})

We also need to check that setting "preventDownshiftDefault" will not focus the toggle element. The test is going to be similar to the previous one, only that the userOnClick implementation will set this attribute on the event object.

test('event handler onClick is called along with downshift handler', () => {
  const userOnClick = jest.fn(event => {
    event.preventDownshiftDefault = true
  })
  const mockToggleElement = {focus: jest.fn()}
  const {result} = renderUseSelect()

  const {onClick} = result.current.getLabelProps({
    onClick: userOnClick,
  })
  const {ref} = result.current.getToggleButtonProps()

  ref(mockToggleElement) // simulate that React will add the toggle element in the ref.
  onClick() // now we should have the ref containing the toggle element, we can click the label.

  expect(userOnClick).toHaveBeenCalledTimes(1)
  expect(mockToggleElement.focus).not.toHaveBeenCalled()
})

We are in a very good spot right now. We have written great tests that communicate exactly what our goal is, and that will only smoothen the implementation process. While deciding on the requirements and writing the tests we can also get better feedback from all stakeholders, since we already have a list of objectives, and it's easier to collaborate on that. We could get extra requirements (more tests) or, even better, some may decide that some requirements are superfluous. So what we may need to remove some already written tests? Less code is good.

Implementation​

The implementation is rather easy. Given the current code, we will add another onClick function to be returned from getLabelProps, and we will use the toggleButtonRef we already have in order to focus the element.

Before:

const getLabelProps = useCallback(
  labelProps => ({
    id: elementIds.labelId,
    htmlFor: elementIds.toggleButtonId,
    ...labelProps,
  }),
, [elementIds]
)

After:

const getLabelProps = useCallback(
  ({onClick, ...labelProps} = {}) => {
    const labelHandleClick = () => {
      toggleButtonRef.current?.focus()
    }

    return {
      id: elementIds.labelId,
      htmlFor: elementIds.toggleButtonId,
      onClick,
      ...labelProps,
    }
  },
  [elementIds],
)

Success! One test is passing already, with 2 more to go. Once these are green, we can agree that our implementation is a success. And that's the easiest part. We will also use our callAllEventHandlers utility in order to chain the callbacks and also check for the "preventDownshiftDefault" property.

const getLabelProps = useCallback(
  ({onClick, ...labelProps} = {}) => {
    const labelHandleClick = () => {
      toggleButtonRef.current?.focus()
    }

    return {
      id: elementIds.labelId,
      htmlFor: elementIds.toggleButtonId,
      onClick: callAllEventHandlers(onClick, labelHandleClick),
      ...labelProps,
    }
  },
  [elementIds],
)

Utility Function for Reference​

The callAllEventHandlers utility will call the functions passed to it, in order, until one of them passes the "preventDownshiftDefault". It's important to pass the focus setting handler at the end. If you need such a function in your life, here it is:

/**
 * This is intended to be used to compose event handlers.
 * They are executed in order until one of them sets
 * `event.preventDownshiftDefault = true`.
 * @param {...Function} fns the event handler functions
 * @return {Function} the event handler to add to an element
 */
function callAllEventHandlers(...fns) {
  return (event, ...args) =>
    fns.some(fn => {
      if (fn) {
        fn(event, ...args)
      }
      return (
        event.preventDownshiftDefault ||
        (event.hasOwnProperty('nativeEvent') &&
          event.nativeEvent.preventDownshiftDefault)
      )
    })
}

You also need to properly compose the ref objects. In our case, the toggle element is going to be used by useSelect, and it may also be used in the component using useSelect. Also for reference, here's the ref composing function and its usage.

const toggleProps = {
  // refKey could be ref, could be innerRef, up to the user
  [refKey]: handleRefs(ref, toggleButtonNode => {
    toggleButtonRef.current = toggleButtonNode
  }),
  // ... the rest of the props returned by getToggleButtonProps
}

function handleRefs(...refs) {
  return node => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(node)
      } else if (ref) {
        ref.current = node
      }
    })
  }
}

Last Changes and Merging​

We can create a new branch and commit our new changes. Given the nature of Downshift, we have TS files separately, and sometimes they also need to be updated. Now it's such a case, given that we changed the type of a return value:

export interface UseSelectGetLabelPropsReturnValue
  extends GetLabelPropsReturnValue {
  onClick: React.MouseEventHandler
}

We also need to update the documentation, to make it clear to our users that we added an event handler to the label props. We also want to mention what the event does.

#### Label

- `Click`: It will move focus to the toggle element.

Finally, we run the validation script, which in Downshift's case, it runs all the unit tests, the coverage check, the e2e tests, linting and all that stuff. Afterwards, we push the changes, create a PR, let the same validation script run via GitHub actions, and if the changes look good, we will merge the PR, close the issue, close the laptop and run. We should get an email from npm that the library has been updated successfully. In our case, it should be a minor version bump, since it's a feature.

Conclusion​

I don't always do TDD, but when I do, I write about it. It's a very neat process, and I am super thankful to Kent and his Testing Javascript teachings. I was always passionate about automated testing, but his course just completely changed everything for me. If you haven't done it yet, I strongly recommend it, it's so worth it. Tip: try to get purchase parity for it if you aim to use it in your own home country only. You will get a discount.

I hope my Downshift TDD experience helps you write better and test better in the feature. If it sparked your interest in using TDD more or just to learn to test better, I declare myself happy for it. Good luck in writing great code and improving the world through your work!