Codewheel Sam Margalit

A few experiments

August 23rd, 2016

Here are a few small side-projects I’ve been working on:

http://www.coolaccidents.com/bowiealbumtoalbum/

An illustrated discographic walkthrough for the Cool Accidents blog

http://codewheel.com.au/demo/gallery/

A little demo gallery averaging about 60fps during animation

http://whls.tumblr.com/

A tumblr theme using spring animations with Rebound.js

https://time-mustang.hyperdev.space/

A postcard maker, made with hyperdev using stripe.com and dispatched with lob.com

Drag to crop cover images

June 29th, 2016

Websites like Facebook and Twitter allow you to upload an image and drag to crop it in a preview.

Updating the background-position property is notoriously slow so I’ve come up with an alternative way to position images using a percentage value. If you offset the image by x% from the top and also transform the image on the y axis by -x% you get the same effect.

Drag the slider to see how the image is repositioned as a percentage.

.image {
top: 50%;
transform: translateY(-50%);
}

The way it works is that the top % is relative to the container while the transform % is relative to the image itself. So, we can tell the image to offset the height of the container with top: 100% then we can tell it to offset the other way by 100% the height of itself.

The cool thing about this method is you can show a preview of what will be cropped out.

How to fix Stripe Checkout on Chrome for iOS when using react

June 29th, 2016

Stripe Checkout uses a pop up when on mobile browsers to improve the checkout experience. Unfortunately, to block against unwanted pop ups Chrome for iOS has some very strict rules about when you can redirect users to another window or tab.

As a general rule you can only programmatically redirect users on Chrome for iOS when your redirect is directly inside an event handler and not in a callback. The logic being that the user has performed an action and this redirect is an intentional consequence.

Because react.js uses ‘Synthetic’ event handlers—when you attach a function to an ‘onClick’ handler in jsx it doesn't actually attach the listener directly to the DOM node but instead registers the handler as a callback to the ‘Synthentic’ event.

Chrome for iOS treats this callback as a side-effect to the event thereby blocking the redirect from firing in the onClick handler.

The solution is to attach the event directly to the DOM node using react’s ‘ref’ property which can take a function and will pass the DOM node as it’s first argument.

<button ref={function(node) {
node.onclick = this.handleClick.bind(this)}} />
Codewheel
19–21 Johnston St
Collingwood, VIC
Australia 3066

I tweet the occasional bad joke on Twitter. I’m best reached by email at sam@margalit.com.au.

The source code for this website is annotated and freely available over on the Codewheel GitHub.