Articles in Development

Iframe tables cause overflow scrolling on iOS

At Shopify, we have something we call the assets gem. It’s a collection of our core styles that we can use on any project not hosted directly in our admin. Many of our channels (Amazon, Facebook, etc) use this assets gem in their projects which are then loaded in an iframe inside of our admin.

Automate iTerm 2 Setup With Alfred Workflow

I rarely restart my computer, mainly because I hate having to set up all my iTerm tabs again. On any given day, it usually looks something like this:

iterm2-typical

I like to use the split screen feature to run tasks in one and GitHub commands in the other. I also like to label each tab for easy reference. Doing this manually is a little more cumbersome than I’d like, so I fixed up an Alfred workflow so now all I have to do is use a quick keyword trigger:

Alfred iTerm2 Workflow

Instagram API Limits Valid Use Cases

As of November 17th, 2015, Instagram updated their Platform Policy and instituted a Permission Review that is mandatory for any app or plugin that uses their API. The changes are wide reaching, addressing issues their development team surely had high on the list of things to tackle to give their platform more structure and stability. Unfortunately for those using the API, it places tight restrictions on what it can be used for.

SVG Icon Workflow with Gulp and Shopify

We are no longer developing our free Shopify themes to support IE8 and it has been fantastic so far. No more media query polyfills (an absolute nightmare when dealing with a CDN – though Gavin Ballard figured it out) and no more fear of CSS3 selectors has been great. One of my favourite perks, however, is leaving behind icon fonts and moving toward SVG icons.

We’re currently using a few Gulp tasks for our themes development process right now, but in this post I’ll focus on how we generate an SVG sprite sheet with the help of Gulp and gulp-svg-sprite and gulp-cheerio.

CSS display:table-cell child width bug in Firefox and IE

While working with a grid of product images that could vary in height, I wanted to vertically align them in their respective containers. I chose to use display: table and display: table-cell with a max-width on each image, but Firefox and IE ignored the max-width.

While browser testing, I realized the images ignored max-width: 100% if it was inside an element with display: table-cell. See the image below for an example.

css-table-cell-bug

View the problem code in this JSFiddle. Try it in Chrome/Safari or Firefox/IE to see the differences.