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.

HTML canvas video player

This is the one of my most popular repos. Once client asked for inline video that works on iPhone too. As Apple doesn’t allow that (all videos are full screen in native player, and autoplay is not supported),. There was no easy solution, so this player was born.

It uses HTML video and canvas. Script picks up the frame from the video and draws it on the canvas. For sound, there is audio element using video files (you can provide different audio file for it).

HTML canvas video player - Demo

Play, pause, jump to time and autoplay are all supported. But please check the documentation and demo.

You shouldn’t use this on any device that supports HTML video natively, but as a fallback.

Grab the code on GitHub.

My favorite bash oneliner

This simple bash command finds all of the files matching *~ recursively, executes rm on them and prints out which files are affected.

You can replace file matching pattern, and command you want to execute.

  find ./ -name '*~' -exec rm '{}' ';' -print

Custom scroll bars

1 Comments

Generally when comes to replacing native UI components, I’m strongly against it. But, we’ve all been there, when the client insists on it.

You’ll see how to style it via CSS (webkit only), apply pure JavaScipt plugin with native scrolling or apply simple CSS hack.

Well, let’s go :)

Read more

Simple React slider with touch support

I needed simple React slider component, as we are building our new website as a universal React application. But I did not find anything lightweight. There is a crazy trend in JavaScript world - add gazillion dependencies.

So again, I made something myself.

Demo - React slider with touch support

Check the demo.

It has no dependencies, and about 200 lines of code. Very simple and extensible. Every modern browser is supported and IE10+.

IE9 should work (if you adapt the CSS), but I didn’t test it.

Grab the code on GitHub.

What is the point of the website if it kills my laptop?

People need to realize that is not enough to have a nice website with a ton of animations and effects. There is no point having such website if I can’t scroll it, while CPU and coolers go crazy. And I use latest MacBook with maxed hardware. Can’t imagine trying to use those websites on the old machine (or IE8-9).

Get your performance together.