With only two days until we open our doors, SPACE is taking shape more and more every minute. This past Saturday we welcomed a Dinner Lab Chicago into our not yet finished space to host an awesome event and it turned out even better than expected.  Dinner Lab is an organization created to bring strangers around the same dinner table for a social dining experiment that puts the spotlight on up and coming chefs.  The cocktails were well crafted and the tapas style food preparation was absolutely delicious.  I could have easily indulged in two to three rounds of every course.  I got there early to make sure the folks from Dinner Lab were set and ready to go.  The transformation was fantastic. They used our desks as tables lined up down the center of the loft space and delicately set each one with menus and small votive candles.  I took a deep breath and then sat back and watched as group after group filed into our new space.  I’ve spent nine weeks anticipating what it might be like to finally feel the energy that comes from a group of people gathered in one place.  It was more than I had imagined.  I watched as people looked around, marveled at the view, laughed and shared stories under the quaint string lights that dangled above the tables.  The success of this event means there are more to come.  I’m ready.  Let’s open the doors!

SPACE & DinnerLab Collage logoWritten by Heather Bodie

Zhenia Koval


Say you have a responsive website design that very image intensive, as I did recently. You want to ensure the clients images come across clear and sharp on all devices, but you don’t want to have to worry about mobile devices needlessly loading in larger versions of the image that they won’t end up displaying.

Given the slow pace of modern browser adoptation, it will be years before we’re able to widely support to the proposed <picture> and srcset solutions. But here’s a quick look at how these they will work.

The picture element wraps a list of one or more <source> elements declaring a media query and a srcset.
The comma seperated list in the srcset attribute indicates the name of the file to load depending on the pixel density ratio of the display: `large.jpg` for normal screens, `large-@2x` for Retina displays. Below the `source` elements is a fallback image. With this markup, we can expect the following behavior:

  • Mobile devices would load small.jpg
  • Screens larger than 600px load large.jpg,
  • Screens larger than 600px with a screen pixel density ratio of more than 2.0 would load large-@2x.jpg
  • Devices that do not support the picture element will load the small.jpg image by default.

Luckily, through a combination of polyfills, we can reproduce rough the same effect.

DPI

Enter Picturefill.js

Picturefill.js is a Javascript polyfill available in two flavors: Version 2, which mimics the approach used by the <picture> element for use in the here and now and Version 1,
which uses <span> elements and custom data attributes to accomplish the same behavior. Here’s what Picturefill 1.0 looks like in action.

Practical Usage

A lot of my work at Doejo involves building sites on WordPress. Naturally, clients tend to manage these sites on their own after launch and it’s impractical to expect them to upload both a normal and Hi-DPI version of each image they upload in the Media Uploaded.

To assist in the process, I like to install WP Retina 2x. This plugin will generate both versions of on an image in each of the themes specified image sizes, when provided with a quality high resolution source image. WP Retina gives you several options for configuration and my preference is to use the Retina.js option. Retina.js will determine if a visitor is using a Hi-DPI device and if so, will attempt to load Hi-DPI version of each image, assuming they’re named with the standard ‘-@2x’ suffix convention.

So what does that mean? It means we can leave off the redundant data-src <span>s for the Hi-DPI images and get a much cleaner, DRY-er code block.

Now, let’s throw in some WordPress.

Bryan Paronto

Web Developer


We had the greatest pleasure working with host Anna Lyudkovskaya of Вкусный год (Delicious year). Check out the promo video!

Zhenia Koval


Welcome to Terminal Tips, a series where we’ll be sharing some shortcuts and tricks we’ve picked up along the way as we use the command line. Today’s post covers a command that is more frequently associated with a text editor than the command line: “Find and Replace”.  If you need to do a find and replace on a file, especially a large file, it becomes cumbersome to do so in a text editor. Github’s new editor, Atom, won’t let you open files larger than 2MB as of the time of this post.

So let’s say you have a CSV file with a couple hundred thousand rows and you want to change any occurrences of the string ‘old’ to the string ‘new’. You could do this using a word processor or an editor, but it would likely crash before you even got the file open, or it would take forever to actually perform the find and replace. What you need is something that gets the job done without all the overhead of an editor. This is where sed comes in.  A quick look at the manual for sed tells us:

The sed utility reads the specified files, or the standard input if no files are specified, modifying the input as specified by a list of commands.

(If you want to read more, open up the Terminal and run the command ‘man sed’ without the quotes)

So now that we know what we’re working with, let’s start to construct our command.

From the man page, the -i flag edits files in place, allowing you to specify a backup. If you’re not concerned about running out of disk space this isn’t absolutely necessary, so we’ll just leave that blank for now.  Our command now looks like:

sed -i ''

Now we actually have to specify the text we want to find and replace. If we want to replace the word old with the word new, we need to construct a suitable expression to tell sed what it is looking for:

's/old/new/g'

From the manual, the -e flag will “Append the editing commands specified by the command argument to the list of commands.” Sounds perfect.  Our command now looks like this:

sed -i '' -e 's/old/new/g'

Now all we have to is specify the path to the file you want to run the command on.  If we had a CSV file called list.csv in our current directory, we could just append that to the command. Now we have:

sed -i '' -e 's/old/new/g' list.csv

When we run this command and go look in the file, we can see that all instances of ‘old’ have been replaced with ‘new’ and you’ve learned a new shell command!

 

 

Extra Credit

What if you wanted to find and replace a URL? You can’t use a slash as the seperator character, because there will most likely be slashes in your URL. sed uses whatever follows the ‘s’ in the regular expression as the seperator. So, for example, we could use a comma as a seperator.

sed -i '' -e 's,http://www.oldurl.com,http://www.newurl.com,g'

We can really use any symbols we want.

sed -i '' -e 's#http://www.oldurl.com#http://www.newurl.com#g'

 

Keep an eye on the blog in the coming weeks for more Terminal Tricks!

Keanan


I had a little down time on my hands so put together a compilation of some compositing and vfx we’ve done here at doejo as well as an updated logo animation with the help of our summer intern Alex Berkowitz! Check check check it out.

Adam