Simplenote Featured as a Best Mac App of 2013

Each year Apple pick out their favorites out of all new apps available in the Mac App Store. This is not just a marketing boost for the creators of such apps, it invokes a sense of accomplishment and validates their efforts. In short, it’s an honour.

simplenote-featured-best-mac-app-2013

This year Automattic was fortunate enough to have one of our very own apps featured. Simplenote is the simplest way to keep notes. It allows you to synchronize any piece of text seamlessly across devices, regardless of platform. There’s also a web interface, and my favorite: the ability to publish any note on-the-fly should you need to show something to someone else quickly. This ties in well with Simplenote’s collaborative functions where if you add another user’s email address as a tag in any note it’ll show up in their list and they’ll be able to make edits.

The Simplenote app suite was recently reimagined by a few key people who are the ones to thank for creating great, reliable, and over all else simple apps that are now a key part of my work flow. So major props to Michael Johnston, Tom Witkin, Dan Roundhill, and Beau Collins for making it happen.

WordPress 3.8 is Here and Why It’s a Big Deal

Version 3.8 of WordPress was a long time coming. It may seem like yesterday that 3.7 came out, but the 3.8 dev cycle started many months ago in parallel.

WordPress-3-8-is-here-overview

I contributed to the MP6 plugin a little early on, mainly helping make the admin responsive. Others became more involved and crafted a truly beautiful experience. That’s WordPress, we’re all in it together.

A New Release Strategy

wordpress-plugin-dev-cycle

The most interesting part about the 3.8 release is the way it was created. It was the first time the core WordPress group tried developing in separate plugins that could then be merged into a full release. If a plugin wasn’t ready by the time the code freeze rolled around, it would simply be punted to the next release. This is clever because it allows WordPress to be developed more fluidly and should result in more frequent and refined releases over time.

Updating a large software project can easily become a drawn-out process when large groups of people have to sign off on every decision. Thanks to smaller teams based around plugins much of this could be sped up in 3.8, and the barrier to entry was significantly lower as a result. Most of the everyday discussions could happen in realtime and decisions were generally reported upon instead of being surveyed for.

If the model is kept, more users will be able to get involved as contributors. They will have the power and incentive to do better work and to contribute more often. This will enable WordPress to stay as active as possible while making sure the quality of the product doesn’t devaluate over time.

We’re doing something similar with the mobile WordPress apps: major iterations and feature additions are developed in parallel so that they can be merged whenever they’re ready, which marks the next point release. This has worked great for us as well.

A Responsive Admin

WordPress-3-8-responsive-admin

It’s as important that you can access your entire site from mobile as it is for your visitors to be able to read your content. 3.8 makes this possible. It’s not a perfect experience (lots of information in a small space!) but it’s a great first step.

The beauty of any responsive interface is that it doesn’t just benefit one particular set of devices, but does its best to stay usable wherever in any context it’s displayed. This means that the WordPress admin is now fully functional on any smart phone, tablet or computer. For example if you resize your browser window on your laptop to be able to see both the Post Editor and the preview at the same time, you now won’t feel claustrophobic since the editor resizes beautifully.

A Professional Default Theme

WordPress-3-8-twenty-fourteen-theme

The Twenty Fourteen theme is an unprecedented occurrence: it’s an out-of-the-box gorgeous magazine-like theme that is especially well suited for businesses and publications. It’s responsive, powerful, and versatile. Where previous themes shipped with WordPress have been gorgeous on their own, they’ve also been either focused on bloggers or site owners willing to get down into the gritty details to make it their own. Twenty Fourteen stands out and is the perfect companion for 3.8.

We’ve Only Just Begun

Go update WordPress now. Then go make the future happen.

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.

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.