We create the world

The best part of my profession is that we can create whatever our heart desires. If it doesn’t exist, we can bring it into existence.

Our home is protected/monitored by both cameras (motion activated) and a central station. This camera notifies us via email whenever motion is detected along with data from the motion. This system works fantastically, but we came across a bit of a nuisance factor. Whenever we bring in the groceries or do something that involves walking in front of the camera multiple times, we’re left with dozens upon dozens of notifications.

My solution: to only activate the camera when our homes security system is turned on. There is no feature to do this out of the box, so I had to get creative. The best part of programming is the ability to logically figure things out and create functionality where none exists.

I did this by getting my monitoring company to notify my server whenever the system is armed or disarmed (securely), and send some information. The server takes this information in, analyzes the situation (for example: are we gone or home, are we secured?) and stores the knowledge in a secure file. Whenever the camera detects motion, instead of emailing us, it now sends the email to my server. The server grabs the email content with images/data and checks the status of the alarm. If it is armed, the motion is probably of interest to us and it is sent on its way. Otherwise, the server throws out the message and just places a log of the data in a file for later viewing if necessary.

This is an unofficial method to a problem that both companies have not solved (which is fully understood, since they’re unrelated). They both simply had some tools that I found a use for. One of the best parts of being an artist/programmer is the ability to solve problems where other people may go “someone should do that.”

It’s really a great profession.

Crystal Clear Retina

Update: Innisfil Dental Centre’s website is now updated with Retina support!

I finally went through and updated my entire site to Retina-ready images. It was a bit of a bigger effort than I had thought (even though there aren’t many resources that needed to be upgraded).

Why?

Icon is from Analog, a really cool app. Check it out!

The decision to make my website Retina-ready came from me browsing other sites over the past little while and realizing how much better websites that were Retina-optimized looked on my laptop. It had a massive impact on my opinion of the company/person who owned the website. For example, a software company was much more likely to get my purchase if they had a Retina based website. When going back to check in on my site (a whole re-write is in progress as well, hopefully launching within the next month or two)– I had noticed that my website looked dreadful on Retina displays (and decent on non-retina displays).


How?

I decided to re-write my pages to use divs for images instead of  tags. This allowed me to make use of WebKits new CSS4 image-set rule (-webkit-image-set). This makes it easy to serve up non-Retina images to non-Retina displays, and Retina images to Retina displays without wasting bandwidth. My previous Retina implementation involved sending pixel-doubled images to all users (@2x). This resulted in more bandwidth used, and scaling down being done on non-Retina displays which made the image look awful. I now have two versions of every image on this site. One at regular resolution, and one @2x the resolution.My whole website is now Retina optimized with all images using div’s and the -webkit-image-set property. This means that the Retina imagery is only available on Safari/Chrome/other WebKit based browsers at this time. Other browsers do not currently support the image-set implementation. Therefore, if you’re using a browser other than a WebKit based browser, you’ll be served a non-Retina image regardless of your display.The other benefit of this approach is that it will render and update dynamically based on the screen you’re using. For example, an external monitor that’s not Retina will show the lower resolution image. However, if you drag at least 50% of the browser over to a Retina display on the same machine– the browser will load the high resolution images without reloading the page.

Where am I taking this?
I plan to make all future websites, and updates to this site– Retina ready. It really makes me look better as a developer, and allows me to be happy when looking at my own site. I also plan to bring these changes over to some freelance websites I’ve done, including Innisfil Dental’s website.

What? Retina?! What the heck is that? And why do you need to optimize?
A “Retina” screen is a screen where the human eye cannot discern pixels at a normal viewing distance. Retina displays run at double the resolution, or 4 pixels per CSS pixel. This means that if a website is serving a 300×300 picture, a Retina display is actually rendering that image at 600×600, scaling up. This would result in a seemingly blurry picture on these ones since WebKit needs to guess the additional pixels it’s missing. Websites should detect the screen pixel multiplier, and serve the appropriate image (300×300 to non-Retina screens, and 600×600 to Retina screens).

I am still experimenting with this, but please contact me if you have any input.

Retina Comparison Image
Comparing a non-retina image to a Retina image (2x the resolution)