Blog

How to never lose form content in your browser

Lazarus Form Recovery Example Screenshot Google

We’ve all been there. You’re typing up a long comment on that blog you like or maybe you’re entering shipping details so you can get that über-geeky but yet somewhat fashionable and undoubtedly funny t-shirt already. Your browser decides it’s time to bash it’s head against a wall for a while and subsequently die. When you revive that S.O.B. (Son Of a Browser), your [comment/shipping details/whatever else] are long gone. You curse the day software maker X decided not to auto-save your content, and as the rage flows through your veins like a stream of hot lava down a meteor crater in the Hadean time period you may be inclined to do one of the following:

  1. Accept your fate and begin typing up your content once again. Likely in a more brief fashion than before, and most probably also by trying to physically hurt your keyboard (note: computer peripherals are stationary objects, unable to feel emotion).
  2. Throw your pen/coffee mug/mouse/computer into the wall and call it a day. Maybe pick up carpentry. You start by creating small wooden shelves for your plants and in time you may move on to making plain looking coffee tables (that don’t work).

What if your computer peripherals could live? What if coffee tables are not your true calling? What if you just wanted the darned thing to remember what you were typing?

Lazarus Form Recovery Logo/SymbolLazarus Form Recovery

Lazarus is one of those hidden gems that everyone needs but few have heard of. It’s a must-have for any one of the browsers it supports – as soon as you install it you can forget about it. Next time your browser freaks out and eats your content, you’ll be ready. It sits quietly in the background and saves what you type securely. To retrieve anything, just go to the page you were on last and click the icon above the field to recover your data.

Install Lazarus for Chrome

Install Lazarus for Firefox

It literally takes 10 seconds to install, so do it now!

Also:

Lazarus
an abbreviation of Eleazar, whom God helps. (1.) The brother of Mary and Martha of Bethany. He was raised from the dead after he had lain four days in the tomb (John 11:1-44). This miracle so excited the wrath of the Jews that they sought to put both Jesus and Lazarus to death.
Easton’s 1897 Bible Dictionary

Cast Drop Shadow With CSS3

CSS3 Cast Drop Shadow Effect Demo and Code

View DemoGet Code

There are many neat things you can do with the box-shadow property in CSS. Many of them we see almost everywhere now, including the famed paper curl effect.

One effect I haven’t seen around though is a cast drop shadow, the kind you usually see under a device shot – for example an iPhone 5. I recently had the opportunity to create such a shadow for the refresh of the WordPress for Android home page.

The Idea

A drop shadow that’s more blurry towards the right and left sides, automatically adjusts to its parent element for width, and has a subtle skew for depth. Preferably using CSS pseudo elements rather than adding to the markup.

CSS & Markup Walkthrough

Skip ahead to final result

You need a parent element that is not a <img /> tag, since pseudo elements won’t work on the image itself. Other than that the HTML is pretty straightforward:

<div id="device">
<img src="#" width="#" height="#" alt="#" />
</div>

The #device element should have the same constraints as the image inside it, otherwise the shadow won’t be aligned properly. Relative positioning is also needed so that the pseudo element’s x/y coordinates are taken from the parent element and not the HTML body. The perspective property is important, it tells the browser how big the 3D space is.

#device {
width: 312px;
height: 264px;
position: relative;
perspective: 600px;
}

The image needs to be positioned above the pseudo element which is easily accomplished with this CSS:

#device img {
position: relative;
z-index: 2;
}

Now we’re getting to the good stuff. The pseudo element that will create the device shadow! First the basics. Pseudo elements are meant to be used for adding things like quote marks to a paragraph of text, but with a little trickery you can make it act like any other HTML element: add content: ""; and display: block;. Position absolute and a z-index means it’ll show up below the image, and the height + bottom px value sets it’s alignment with the bottom edge of the element.

content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 1px;
height: 2px;

The shadow size settings is the tricky part. Since the shadow is scaled up 10x later to make it extra blurry on the right and left sides, you need to enter a tenth of the width you ultimately want here. You also have to make sure that the left value (X axis) is a negative half of the width.

/* Shadow size */
width: 8%;
left: -4%;
margin: 0 0 0 50%;

The transform property scales the element to be 10x wider, while making it slightly thinner, greatly exaggerating the drop shadow’s blurriness on the left/right sides compared to top/bottom. RotateX(45deg) gives the element a slight depth.

transform: rotateX(45deg) scale(10, .75);

Time to fill the element, both in and around. The solid black background color and multiple layered box shadows make the element easier to work with in different environments where you may want a different weight to the entire shadow. Thanks to the first few drop shadows being tight around the shape of the element and then branching out, there’s no hard line in between where the element stops and the drop shadow begins.

background: #000;
box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;

Finally, setting the opacity property to the entire pseudo element allows us to change the weight of the drop shadow on the fly and easily adapt it in animations and similar.

-moz-opacity:.65;
filter:alpha(opacity=65);
opacity:.65;

The Result

This is what all the CSS looks like combined (View Demo):

#device {
    width: 312px;
	height: 264px;
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-ms-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600px;
}

#device img {
	position: relative;
	z-index: 2;
}

#device:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 1px;
	height: 2px;
	
	/* Shadow size */
	width: 8%; /* Add a 10th of the width you want (scaled up later) */
	left: -4%; /* Half of the 10th of the width! */
	margin: 0 0 0 50%; /* Centers element before it's upscaled, don't change this */
	
	/* Transform: rotateX to create depth, scale to 10x to make left/right more blurry than top/bottom */
	-moz-transform: rotateX(45deg) scale(10, .75);
	-ms-transform: rotateX(45deg) scale(10, .75);
	-o-transform: rotateX(45deg) scale(10, .75);
	-webkit-transform: rotateX(45deg) scale(10, .75);
	transform: rotateX(45deg) scale(10, .75);

	/* Apply shadow & background */
	background: #000;
	-moz-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-o-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-webkit-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-ms-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	
	/* Change opacity of entire element to tint shadow */
	-moz-opacity:.65;
	filter:alpha(opacity=65);
	opacity:.65;
}

That’s it for today. Hope this helps!

Samsung Galaxy S3 PSD Template

Samsung Galaxy S3 PSD Template

The Samsung Galaxy S3 is one of the most sold high-end Android devices on the market which makes it perfect for showcasing apps and websites. This is a simple PSD template based on a device shot of the app, but still has all the bells and whistles:

  • Embedded instructions.
  • Screen size at exactly 720x1280px which is the screenshot size of the device, with guides and a smart object to help alignment.
  • Two shadow options and a reflection.
  • Bundled backgrounds.
  • Three slices for easily exporting device shots.

Download PSD Template

Download Samsung Galaxy S3 PSD Template (zipped .psd, ~11MB)

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. You’re free to use the artwork and modify it however you want for both personal and commercial use.

Information

These instructions are also embedded in the PSD template itself.

  • Right-click on the Smart Object the PSD opens to in the Layer palette and choose Replace Contents to fit your screenshot snugly in the frame.
  • The guides in the PSD are fitted to be exactly 720x1280px.
  • There are three pre-set slices in the PSD, two for exporting the entire device with padding and one for exporting the screen only.
  • There are two device shadows included: one that indicates a device balancing on it’s edge and one for when it’s laying flat on a surface.
  • There are backgrounds bundled, disable all to get a transparent backdrop.
  • A device reflection is also included. Use in moderation!

I, for one, welcome our Android overlords.

WordPress is Mobile – 2012 WordCamp Netherlands presentation

Last year I presented at WordCamp Netherlands for the second year in a row. It’s one of my favorite WordCamps mainly because of the incredible community that surrounds it. Dutch people just seem to be on the ball with almost everything that’s going on at any given point.

It’s taken a while for the video to surface, and while the audio isn’t great it’s a presentation I’m proud of nonetheless.

[wpvideo raZQlGdN w=640]

If you’re interested, the slides are available on SlideShare.

Get Notified about Keyword Mentions in Skype Group Chats

Here’s a little trick that might come in handy for those that use Skype as a group messaging tool: set up the chat to only notify you about specific keyword mentions and mark other messages as read immediately.

This guide is for Skype 6.1+ on Mac OS X 10.8 Mountain Lion (untested on other platforms but might work).

How to change Notification Settings in Skype

  1. skype-group-chat-notification-settings-sidebarOpen Skype and find the group chat you want to change Notifications for in the sidebar.
  2. Right-click on the conversation and choose “Notification Settings…”.
  3. A dialogue lets you set your Notification Settings.
    • Notify me: default, get notified about every new message.
    • Do not notify me: turn off notifications altogether – you’ll see new messages only if you go directly to the group chat.
    • Notify me only if these words are mentioned: allows you to specify specific keywords for which you want to be notified about, separated by spaces.
    • Mark unread messages as read immediately will clear the badge count on the app icon.

    skype-group-chat-notification-settings-dialogue

Props Joen Asmussen for the post idea.

WordPress Advice for Beginners

Smashing Magazine published an article titled “The WordPress Community Offers Advice To Beginners” a few days ago. Written by WP community rockstar Siobhan McKeown it’s a comprehensive guide to WordPress for the newcomer. So comprehensive, in fact, that I’ve yet to read the whole thing!

I was lucky to be a part of the article with one small quote on how to get started with… Well, anything:

“Just jump in. If you have an idea for a great blog or website, set something basic up quickly (there are good free or cheap WordPress hosts out there) and start writing. As you go, you’ll learn more about what works and what doesn’t, as well as what your readers like the most. There really is no time like now, and too many great ideas never see the light of day because their inventor didn’t take that first step.”

I’m glad that I’m finally following my own advice.

Read the full article on Smashing Magazine.

Hopes & Dreams

This year I vowed to blog more. It’s something most of us want to get better at, and when the clock strikes midnight on New Year’s Eve it seems like a reasonable promise to make: “in 2013 I want to blog more than I did the previous year”.

Given that I published only a handful of posts in 2012 it seems reasonable.

Blogging is however not an easy task. Especially when you’re posting on a site that bears your name. It’s your credibility, your personal brand. “Anything you say can, and will, be used against you.”

Therefore I’m approaching this goal in a very humble way. I only want to post at least one great post every month. One that I don’t mind being quoted from, one that I feel reflects my beliefs and hopes, one that I can truly stand for. In between these posts of great insight and clever interpretation there’ll be a lot of posts about music that I like. Blog posts and articles I found to be interesting. Comments on the news as they change the world. Pictures from my life.

Here’s to 2013, the year of blogging.

iPhone 5 PSD Template

iPhone 5 Device PSD Template

The iPhone 5 is an amazing, well-designed, and versatile device. However, as usual, it’s extremely hard to find good lossless pictures of the device for use in promotions, blog posts, and on websites. The press graphics provided by Apple itself have very strict licensing and only scale so far since they’re already rendered and you don’t get access to the source files.

Given that most of this iPhone’s design will most likely stick around for at least 2 years to come, I thought it made sense to spend some time on making a fully vector based replica of it to save time for designers working on apps and websites for the iPhone 5.

This illustration was made in Photoshop to ensure pixel perfection but is composed entirely of vector based or scalable elements. You can literally use Image Resize to scale this image up to be as tall as yourself at 300dpi with the same level of detail and no pixelation. For convenience the template is fitted at Retina resolution, so you can easily drop in iPhone 5 screenshots of apps/websites into the template without having to resize the device itself to fit.

Download PSD Template

Download iPhone 5 PSD Template (zipped .psd, ~54MB)

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Couldn’t find any better license than this. You’re free to use the artwork and modify it however you want for both personal and commercial use.

Information

These instructions are also embedded in the PSD template itself.

  • Right-click on the Smart Object the PSD opens to in the Layer palette and choose Replace Contents to fit your screenshot snugly in the frame.
  • The guides in the PSD are fitted to be exactly 640x1136px.
  • There are three pre-set slices in the PSD, two for exporting the entire device with padding and one for exporting the screen only.
  • A sample status bar exists in the “Screenshots” folder, use it to apply a custom carrier, time, and battery life.
  • There are two device shadows included: one that indicates a device balancing on it’s edge and one for when it’s laying flat on a surface.
  • Three backgrounds are bundled, disable all to get a transparent backdrop.
  • A device reflection is also included. Use in moderation!

Enjoy and happy shoppin’.

New Gravatar

For some reason the lovely Sheri Bigelow of DesignSimply just takes the best candid portrait pictures. Attending WordCamp San Francisco and the subsequent Hack Day a few weeks back she was roaming the halls taking pictures of everything that moved. Or hardly moved at all, in my case. This is my favorite:

Isaac Keyet - portrait by Sheri Bigelow
Image courtesy of Sheri Bigelow

The photos are upp on Matt’s blog, take a visit!

Side note: this post is a complete ego-trip if you hadn’t noticed already.

I’m speaking at WordCamp San Francisco!

Boom, done. Finally submitted the title and description of my State of the Mobile Word talk for WordCamp San Francisco ’12. It feels good to have it over with. Oh wait, the presentation itself is still only drafted and I need to practice lots more. Dang.

In all seriousness it’s going to be awesome to attend the grand daddy of all WordCamps again. Last time I was on the attendees list was back in 2010 and I thoroughly missed participating last year. But no hard feelings! I know you still love me, SF. I’m going to rock your trolley.

Preparing for my trip I should probably do something about this blog. As in actually posting more often, maybe posting about stuff that actually matters (this would be great), perhaps even a refresh or dare I say a new theme? While edgy and innovative, this blog’s design is, to put it bluntly, undigestible and rather ugly. The notion that line breaks are evil and uncool definitely didn’t help.

Yes, it is time for something new.