Milk, Cookies & SegFaults…

Category: Front-end programming

  • Framework-agnostic, ad-hoc image cropper

    Framework-agnostic, ad-hoc image cropper

    Today, I’m releasing a framework-agnostic, in-browser image cropper. The motivation is that I need this on a regular basis in multiple projects, across multiple frameworks and – while I’m aware of existing tools like Cropper.js and others – quite frankly, to me they seem too complex to setup especially depending on the front-end framework I’m dealing with. I needed this problem reduced to a simple JS call.

    (more…)

  • Dynamic custom data via OAuth with Laravel Socialite

    If you’ve ever done authentication in a Laravel-based project then you probably had to deal with the Socialite extension, which enables OAuth-based authentication using third-party services (like Google or Facebook).

    Passing dynamic data to the external OAuth system and getting that data back to your application, using Socialite, is something neither easily done nor well documented and given that I’ve seen a lot of people wasting time on this, I want to try and shed some light on it here.

    (more…)

  • Remember last value in React functional components

    Sometimes it can be very useful to save previous values of props (or state) in a React component.
    Perhaps this is easier to be imagined in a class component, but in a functional component, less so.

    However, we can use the useRef() React hook to achieve that quite efficiently.

    Less talk, more code (typescript)…

    const someFunctionalComponent = (p: {index: number}) => {
  // Keep the last positive value around.
  const lastPositiveIndexRef = React.useRef<number>(Math.max(p.index, 0));
  if (p.index >= 0) {
    lastPositiveIndexRef.current = p.index;
  }

  // Here, the ref will always have the last positive input.
  const positiveIndex = p.index >= 0 ? p.index : lastPositiveIndexRef.current;
  return <span>I'm only allowing positive numbers to be shown: {positiveIndex}</span>
}

    Here’s a working sample (JSFiddle).

    I found the following comment from the React documentation, quite illuminating:
    However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

    Enjoy!