Wanted to speak to the Argentine or French A17ers today? They’ll be quiet because its International Workers’ Day or Labour Day, or what we Brits call May Day. Although we’re not celebrating it this year. Or even mentioning it.
Welcome to another edition of Mike’s Historical ½ Truths!
Want to speak to the American A17ers today? Can’t because its still Thanksgiving I think. This Friday is also known as Black Friday.
Want to speak to the American A17ers today or tomorrow? Can’t because its Thanksgiving.
Want to speak to the French A17ers today? Can’t because its Feast of the Ascension day.
Want to speak to the American, Argentinian or British A17ers today? They’ll be quiet because its Memorial Day in the United States, May Revolution in Argentina and Spring Bank Holiday in the UK.
Introducing “Mike’s Historical Half Truths” to Optical Cortex.
Part of what makes AREA 17 brilliant is our international mix of nationalities and office locations. I love the differences of cultures and ideas and what that brings to creative discussions. Something that always interested me is that different countries have different public holidays. Sometimes they have the same days but for different reasons. And so, I began researching some of these public holidays and I decided to share what I’d learned in a series of emails to all-staff.
As a web developer, over the years I’ve asked the producers/project managers I’ve worked with “and what browsers are we supporting?” more than once, for every project I have worked on as though its fine to think there are some browsers we just don’t support. We understood that the internet is accessed by a wide range of browsers, it should be accessible and inclusive and project’s content should be viewable for as many people as possible. But, we have a limited about of time and resources and there was only so much graceful degradation and progressive enhancement we could do.
For a recent Facebook Stories post, we were asked to allow quotes to be attributed to a person. The Stories site uses Markdown for text formatting which does not have a method for blockquote attribution within its syntax. To add support I mixed some regex and Ruby on Rails together.
AREA 17 operates primarily out of studios in New York and Paris. But we also have satellite offices in several other parts of the world. At times there can be a nine hour time differential between staff members. Thankfully email, Hipchat, Google Hangouts, Skype, and a few years of practice means this isn’t much of a problem for us. However, I sometimes still have problems with doing the mental arithmetic necessary to calculate what time it is for everyone everywhere else—especially when organising meetings. To try and alleviate this, I built a web app over the holidays that displays all of the primary timezones in which AREA 17 operates so with quick glance you can see what time it is in those places.
On a recent static style guide build I got tired of manually inserting sample code content into <code> tags; especially as I hadn’t fully made up my mind on exactly what the markup should be. Each change meant I was copy and pasting the new markup into a new window in my text editor and search and replacing the < and > so that it would render as expected in the browser. I see most problems as a Front End problem so I wrote a quick function to do this for me. I’m writing this down and sharing because a quick Google search didn’t reveal any similar functions.
Recently I was asked to build a holding page that included an animating CSS gradient. My first reaction was: “Easy. CSS animation.” And I was quite wrong. JavaScript to the rescue!
The first time I used jQuery on a website was June 2007; I used it for an image carousel that faded between sponsor logos. During the rest of 2007 and 2008 I used jQuery, MooTools and Prototype.js until settling on jQuery for everything in 2009. And I’ve been using jQuery on every site since. Until now.
Instagram: @inthefrow
Recently a friend of mine and fashion blogger, @inthefrow, asked me if I’d help her determine who her most popular Instagram followers are. I knew Instagram had an API so I assumed the task would be trivial. Of course, it wasn’t as straight forward as I first assumed…
TL:DR
From a sample of 21,239 Instagram users:
SVG markup
About a year ago, Ned proposed the idea of switching our method of displaying icons and other small graphics in websites that didn’t use sprites. He suggested we used individual SVGs instead.
At the time we were making sprites and had become become quite adept at building them; though they were a constant source of frustration. In the middle of 2012 Apple released the Mac Book Pro with a Retina screen, which added new impetus to seek out ways of making sprites appear sharp on high resolution screens. Our first solution was to make double size sprite files and resize them with CSS for high resolution screens. This solved the problem; but gave us more problems. Now we had two sprites to maintain and more frustration.
So an SVG solution was worth seeking out.
It turns out re-rendering or rendering ajax’d into place Pinterest buttons is quite straight forward. Not that you can find this in the Pinterest docs…
Update the way you include the Pinterest js:
<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>The defer defers loading of the script until after the page has loaded. The important bit is the data-pin-build attribute. This makes the pinit.js expose its internal build function as parsePins on the global window object.
And then to use:
// parse a DOM element
window.parsePins($("#element")[0]);
// parse the whole page
window.parsePins();The function is looking for a DOM node and not a jQuery object which is an array like object; so selecting the DOM node the jQuery object wraps is needed.
And thats it.
For years I’ve been saving out graphics for websites as either 8-bit PNG or 24-bit PNG. Photoshop always gave me just those two options and so I assumed they were the only two options; if we needed fully transparent backgrounds we used 24-bit and if we didn’t we used 8-bit. IE6 had trouble with 24-bit PNG with the alpha channel so we often just fell back to 8-bit with 1 colour transparent backgrounds. And thats the way things where.
So recently I’ve seen a bunch of tweets/blogs touting the end of skeuomorphic design and the rise of flat design. Also a bunch of tweets/blogs using the word skeuomorphic, which previously I’d never seen and consequently had no idea what it meant. And then I saw this website: {404} PageFound!.
Is it time we build websites for retina displays first and then, maybe, optimise for sub-retina displays afterwards?
Much to my annoyance, lightboxes have become pretty ubiquitous on the internet. I’m bored of seeing them and bored of making them. And the more I use my phone for viewing websites, I’m frustrated that the vast majority of sites use them regardless of the device accessing the site.
For Facebook Stories I decided I would act upon my frustrations. When building the site I included simple conditionals in the JavaScript that enabled the lightbox, based on screen size and if the device was a touch screen.
The English chain restaurant Pizza Expresshas long been praised for its email campaigns (well for at least over a year now, so file this under “not new news”). The praise comes largely because of how the emails appear with images disabled. From my understanding of how email is read these days, images being disabled is an increasing problem.
I’m currently working on a new feature for Facebook Stories which involves using the Facebook Graph API to search content on Facebook. The results of a search are going to be displayed, with the search query highlighted in the results using the HTML5 tag.