Latest post

React Image Filter

02 Sep 2017

Muffin Man's writings

or the front end playground

Front end development, maybe occasional rants and music.

React Image Filter

On the project I’m currently working on, client’s logo is displayed in two versions, black on the white background and vice versa. To make their life easier, so they don’t have to upload two assets, I suggested SVG. Alas they can’t use SVGs (kinda long story), so I just applied CSS filter: invert(1);, but…

…you guessed it - it doesn’t work in IE and Edge :(

So I started reading about SVG filters and found a way to invert a image. But it got me interested, so I kept going and made a React component for all sorts of color filters.

Play with the interactive demo.

Documenation available on GitHub and npm.

Demo

Read more

How to update npm using nvm

If you are JavaScript developer and not using nvm you might want to look at it. Node Version Manager is easy way to install, manage and work with multiple node versions.

And I recently got npm update notification, that looks like this:

npm update notification

This is image from the internet.

nvm doesn’t let you update only npm, but just a node+npm version. But there is a really easy way to do it:

# navigate to nvm's node lib folder
# (replace v8.4.0 with your version)
cd ~/.nvm/versions/node/v8.4.0/lib/

# update npm right there
npm install npm

# reopen your terminal

That’s it. Great thing is that npm can update itself. And this works for any other global npm package.

localStorage and sessionStorage in Safari's private mode

If you didn’t know, in Safari’s private mode both localStorage and sessionStorage are not working. To be exact, Safari sets storage’s limit to 0, so you can’t write anything to it. I keep forgetting this, until QA people report it at some point.

So I quickly wrote a small facade for it, which fails silently in this case. That means it still doesn’t work but it won’t throw an error and break your application.

This is the version for localStorage, just replace it with sessionStorage if you need it.

const LS_TEST_KEY = 'ls-test';
let isLocalStorageSupported = typeof localStorage === 'object';

// Try to
try {
  localStorage.setItem(LS_TEST_KEY, 'test');
  localStorage.removeItem(LS_TEST_KEY);
} catch (e) {
  isLocalStorageSupported = false;

  // If we get error that we exceeded storage's quota
  // but storage is still empty we are in private mode
  if (e.code === DOMException.QUOTA_EXCEEDED_ERR && localStorage.length === 0) {
    // Private mode
  } else {
    throw e;
  }
}

const LocalStorage = {
  getItem: (key) => {
    if (isLocalStorageSupported) {
      return localStorage.getItem(key);
    }

    return null;
  },

  setItem: (key, value) => {
    if (isLocalStorageSupported) {
      localStorage.setItem(key, value);
    }
  },

  removeItem: (key) => {
    if (isLocalStorageSupported) {
      localStorage.removeItem(key);
    }
  },
};


export default LocalStorage;

Get element offset in JavaScript

When we left jQuery behind and embraced modern JavaScript frameworks, we thought we would never touch DOM directly again. Well that is not entirely true. There are a lot of cases when you need to get some DOM element size. For element’s dimensions .offsetWidth and .offsetHeight are great way to do it.

But one of the other common tasks is getting element’s offset, top and left. I’ll show you two ways to get those.

Read more

Plx - React parallax component

I’m becoming predictable. Again, I haven’t found component I like, so I wrote my own.

This time, I’ve build React component for parallax (on scroll) effects. Check the live demo. It is called Plx, it is open source and available on GitHub and npm.

What it does

So far in my career, I’ve built so many parallax components. Parallax is actually wrong term here1, but it got accepted by development community.

Designers love them and users are fascinated by fancy effects. Simply explained as you scroll the page down something is changed relative to the scroll position. For example, as you scroll down clock arms are rotating. Just check the demo.

There is a lot of solutions out there, but IMHO they are usually bloated or not performant or complicated to use. And as I’m using React a lot, I decided to collect what I have learned about implementing on scroll effects in React and create standalone component. Most of the code in this component is pulled out from my existing projects and glued together.

1 the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g. through the viewfinder and the lens of a camera.

Read more