Blogs by Magic

Adding interactivity and animations to a design doesn’t have to be complicated or make the website inaccessible when you use modern Web standards. In this article, we’ll explore several examples and theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques you’ll know, others you may not have considered. Let’s start with the basics.

Props to my friend Jason (http://www.kriegsnet.com/) for sending me this article. Really great article that shows you how to pull off some pretty cool effects—many of which might leave you asking, "How did they do that?" Well, here's how.

Why a web app and not a native app?

Back in July we put up a job ad for an iOS developer. We had decided to dive into native apps for the iPhone. We contracted out the back-end development of our iPhone app for Highrise. The project went well, but we felt like we had to have someone in-house to continue the development of the Highrise app and future apps we wanted to build.

And then Android really began to make a run. Android market share increased and more and more customers were asking for Android apps for our web apps. So we stopped and thought about it for a bit. Do we want to have to hire an iOS developer and an Android developer? That’s a lot of specialization, and we’re usually anti-specialization when it comes to development.

Eventually we came to the conclusion that we should stick with what we’re good at: web apps. We know the technologies well, we have a great development environment and workflow, we can control the release cycle, and everyone at 37signals can do the work. It’s what we already do, just on a smaller screen. We all loved our smaller screens so we were eager to dive in. Plus, since WebKit-based browsers were making their way to the webOS and Blackberry platforms too, our single web-app would eventually run on just about every popular smartphone platform.

Comfortable and confident in our decision, we set out to build the best possible mobile web app for our Basecamp customers.

Great example of a company ahead of the curve.

Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify’s partner) for the jQuery and Javascript code.

This is awesome. I'll be using this for sure in the future.

I really love the scrollbar on iOS, and here's a pretty simple way to bring that same kind of scrollbar to any site via JavaScript. Pretty slick... at least until the next OS X refresh, and the iOS scroller replaces the current native scrollbar (here's hoping).

If you have invested in virtualization to meet IT security, compliance, or configuration management requirements and are now looking at the cloud as the next step toward the future, I've got some good news for you.

VM Import lets you bring existing VMware images (VMDK files) to Amazon EC2. You can import "system disks" containing bootable operating system images as well as data disks that are not meant to be booted.

This new feature opens the door to a number of migration and disaster recovery scenarios. For example, you could use VM Import to migrate from your on-premises data center to Amazon EC2.

You can start importing 32 and 64 bit Windows Server 2008 SP2 images right now (we support the Standard, Enterprise, and Datacenter editions). We are working to add support for other versions of Windows including Windows Server 2003 and Windows Server 2008 R2. We are also working on support for several Linux distributions including CentOS, RHEL, and SUSE. You can even import images into the Amazon Virtual Private Cloud (VPC).

Please add Linux support. Please add Linux support. Please add Linux support.

Today we are introducing Amazon Route 53, a programmable Domain Name Service. You can now create, modify, and delete DNS zone files for any domain that you own. You can do all of this under full program control—you can easily add and modify DNS entries in response to changing circumstances. For example, you could create a new sub-domain for each new customer of a Software as a Service (SaaS) application. DNS queries for information within your domains will be routed to a global network of 16 edge locations tuned for high availability and high performance.

Wow. Yet another awesome Amazon web service.

Everyone knows that Amazon is an online retailer. But what most people don't realize that Amazon has been building an empire behind the scenes of, oh, pretty much all of your favorite websites. Double down on Amazon, because they are the company that will make all other companies scale into the future.

If you’re a designer or developer, you’ve probably heard about Git, and you might know that it has become immensely popular, especially among the open source community. Though it may seem cryptic at first, this version control system could change the way you work with text, whether you’re writing code, or a novel.

This article covers why version control is important, how to install the Git version control system, and how to get started with your first repository. Once you start using Git, you’ll want to throw everything into it, from full-blown apps to blog post drafts, because it’s so easy and versatile.

Really great guide to getting started with Git. If you've ever wondered what the hell this Git stuff is and why programmers use it, it's worth a read. FYI, Beanstalk (http://beanstalkapp.com/) has a free plan (100MB/1 user) for Git (and SVN).

In the last year or two we've added free tiers of service to Amazon SQS, Amazon SNS, and Amazon SimpleDB. We have learned that developers like to be able to try out our services without having to pay to do so. In many cases, they have created non-trivial applications that can run entirely within the free tier of a particular service.

Today, we're going to go a lot farther. How far? Really far!

Effective today (November 1, 2010), we're opening up a new free tier for all new AWS developers. Here's what you get each month when you combine the existing free tier with this announcement:

• 750 hours of free time on an Amazon EC2 Micro instance running Linux. You can use this to run one of the Amazon Linux AMIs or any other non-paid Linux AMI. This time cannot be used to run the new SUSE Linux AMIs, the IBM AMIs, or the Microsoft Windows AMIs.
• 10 GB/months of Elastic Block Storage, 1 GB of snapshot storage, and 1 million I/O requests. This is enough space for the Amazon Linux AMI among others.
• 750 hours of Elastic Load Balancer time and 15 GB of data transfer through it.
• 5 GB/months of Amazon S3 storage, along with 20K GETs and 2K PUTs.
• 15 GB of internet data transfer out, and 15 GB of internet data transfer in.
• 100K Amazon SQS requests.
• 100K Amazon SNS requests, along with 100K HTTP notifications and 1K email notifications.
• 25 Amazon SimpleDB machine hours and 1 GB of storage.

Wow. Free. Crazy.

Use Kaleidoscope to spot the differences in text and image files. Review changes in seconds with the world's most advanced file comparison application.

This is seriously one of the greatest applications I've ever used. I've been following the developer, Made By Sofa, for a while now. They've always produced really polished applications, I've just never had a terrible "need" for any of them. But this is different.

If you ever wanted to really quickly compare a bunch of documents (hint: think CSS versioning) or even images, this is an amazing way to do it... fast.

I don't always use a proper versioning tool. I often do things very quickly and monkey patch here and there for things that are non-critical. It's not the best practice to get into, but I do it. Kaleidoscope makes my bad habits suddenly not seem so bad! It has good integration with Git and SVN (and a few others) too, you know, if you want to do it proper.

If you work on a Mac and ever needed to compare to files (or images) quickly (this thing is damn fast), this is the way to do it. I'm using the 30-day trial, but Kaleidoscope is well worth the €29 (about $41 USD). I will buy this, and I'll probably convince a few others too as well... because it's fucking awesome.

Most of the common image formats on the web today were established over a decade ago and are based on technology from around that time. Some engineers at Google decided to figure out if there was a way to further compress lossy images like JPEG to make them load faster, while still preserving quality and resolution. As part of this effort, we are releasing a developer preview of a new image format, WebP, that promises to significantly reduce the byte size of photos on the web, allowing web sites to load faster than before.

Images and photos make up about 65% of the bytes transmitted per web page today. They can significantly slow down a user’s web experience, especially on bandwidth-constrained networks such as a mobile network. Images on the web consist primarily of lossy formats such as JPEG, and to a lesser extent lossless formats such as PNG and GIF. Our team focused on improving compression of the lossy images, which constitute the larger percentage of images on the web today.

Do we really need this? For websites, the solution to the crappy artifacts present in JPEGs is PNG. I don't know of anyone who uses JPEG for page elements. WebP seems like a good format for photos, if it really can provide better image quality at a smaller file size, but that just seems unnecessary somehow.

All the old JPEGs aren't going away, and it doesn't make sense to convert photos to a new format unless you have the RAW file. Unless this become the new standard for digital cameras... I don't get it.