Making Use of Amazon Web Services for Your Web Development

 

You, as a web developer, may very well be aware of Amazon’s Web Services for hosting web sites and services. Depending on your skill level, some of what Amazon has to offer may seem daunting or out of reach. I’m here today to give you an idea of some rather novel uses of AWS that require a minimal skill level to attain. This can range from hosting files to hosting a complete site merely by dropping files into your AWS account. The best part is that most of what I will go over will be covered in Amazon’s free tier of service, meaning the service will be entirely free for the first year.

First you will need to create your AWS account which can be done here. From there you will want to go into your console, which can be accessed at the same page once you have an account. There is a wide variety of services whose uses range from deploying virtual servers, managing DNS, to deploying entire virtual networks of machines. We are just going to focus mainly on Amazon’s S3 service here which is used for scalable cloud storage, so you may ignore the plethora of other offerings for the time being.

Once you have made it to your S3 console there will be a button that says “Create Bucket”. S3 buckets are essentially places for you to store various files. Once you create a bucket you can store all sorts of files there with the ability to make them public or private. We will go ahead and create a bucket and give it a name that makes sense (this will be part of the URL at which you access these files). ┬áDo not worry about logging, I will not cover this but you will want to look into AWS Cloudwatch to manage logging and the availability of these files.

Being developer you may be wondering what use you will have for yet another cloud storage service, but since AWS is publicly accessible at and essentially static domain (or even your own domain name, which I will cover briefly in a moment) you can use S3 to access files in other websites you are creating or maintaining. To do this we will want right click the bucket we created and click the website tab. Click “Enabled” and for the Index document, type in “index.html” and for the Error document type in “error.html”. If you are looking to host a website here in S3, you will want to actually create and upload these files, but if you are just looking to host files, they do not necessarily have to exist. Also, take not of the endpoint, this is now the link to your site or the domain prefix for the files you host. Next you will want to upload files which you would like to host, then once they appear as files in your bucket, right click the files and choose “Make Public”. They are now accesible via the browser or from other sites at amazon-endpoint-domain/your-file-name. If you would like to make this a site on its own with a domain name you own, you will need to make a DNS CNAME record pointing www.yourdomain.com to your S3 buckets domain name. You can find out how to do this by contacting your current host or registrar.

What you can do now is create webpages or Javascript libraries or files of your own using Dreamweaver and host them at your new Amazon S3 site. This is great for hosting a static website (no php or server side languages, just html, css, and javascript) or even as a CDN. CDN’s or content delivery networks are a common place to hold libraries of scripts in a single place. Giving you access to your scripts on multiple sites and aiding in cacheing these scripts for your end users.

A New Way to Debug your Website on Many Devices

Adobe Shadow Icon

 

Adobe has just released a public beta for yet another useful application for web development. The current title is Adobe shadow. Now I haven’t had much time to play around with it as of yet, but I’ll provide the run down.

 

What Adobe Shadow is used for is previewing your website on not only your browser, but also any mobile devices you can find. The application has two pieces: the application itself, which can be downloaded as a beta currently at Adobe Labs; and second is a Google Chrome extension. This means you will need to use Google Chrome currently when debugging your website, but if you aren’t already using Chrome, you should be. It is in my opinion the best browser and is also rated as the most secure browser.

 

Once you have installed both pieces, you then register all of your mobile devices. iPhones, iPads, and Android devices are currently supported. After the setup you can view and debug your website simultaneously on your computer and all your devices. This is great to not only see how your site works on all of your testing devices but also debugging your Javascript and other code that exists on your website.

 

This will work great testing your HTML 5 and jQuery applications and will also be quite powerful in conjunction with Dreamweaver CS5.5 and it’s mobile support.

Turns out LESS really is more

 

Today I will briefly go over a new means to style your webpage. You most likely have some experience or familiarity with CSS, but for those who do not, CSS (cascading style sheets) is the web standard for giving design to your page. The problem I have found with CSS in the past has been that it is very much so static, meaning that everything you want your CSS to do with your elements of the page you have to write out specifically. I want my styles to be dynamic, I want elements to be styled differently under different circumstances, and I don’t want to have to type the same thing over and over again just because I have elements that require similar styling. With LESS, this is no longer a problem. What LESS is essentially is a language to program you CSS instead of writing static stylesheets. LESS follows similar syntax as CSS but allows for things such as variables and functions, making your styles take shape according to output (desktop, mobile, etc.) or other conditions and also allows for reusable code and styles. Even better on the reusable code, you can import other LESS stylesheets into your styles. Why would you want to do something like that? Well what this will let you do is build a series of functions and styles that you know you will be using in pretty much every web project so you dont have to rewrite the styles at all. For those of you who are programmers, it’s the same a building libraries. Also, since the language is so similar to CSS, you will be able to take advantage of some of your code hints in Dreamweaver or the IDE of your choosing.

LESS is very easy to use. By only importing the less.js javascript file and a slight change on your typical linking of stylesheets, you can bring in your LESS styles.

Adobe MAX 2010

Adobe MAX was two weeks ago, but it has been a busy two weeks since. So, finally, you will get a glimpse of all that I saw at the MAX conference.

To start, aside from the Jobs bashing and many discussions on the Flash vs. HTML5 situation, a major topic of discussion at MAX was multiplatform development. Adobe AIR has made it easier to deploy to different platforms like iPhone, Android, and Google tv.

I saw, first hand, how easy it was to create applications for Android using Actionscript 3.0 with both Flex and Flash. A few new additions to the API and some sleek new features soon to come to the masses in upcoming updates to Flash Builder and Flash Professional.

As for HTML5 vs. Flash, Adobe made it clear that the two were not interchangeable, but also that there is no reason that the two could not be use to supplement each other. They even showed off a tool that was being worked on that essentially took Flash animations and translated them to HTML5 as CANVAS.

Now for some neat sneaks:
-Dreamweaver is going mobile with some upcoming mobile site templates. Adobe is working with the guys from jQuery to get jQuery mobile fully operational.
-A really cool mobile media player with a working title of video tapestry was very cool and could potentially reinvent media playback on mobile devices
-3D animation in Flash with a new API built on top of mole hill

I’m sure there is more that I am just forgetting about but I’ll update the post with anything else I remember.