Responsive google maps
Remember the days we used to put a static image of a roadmap on a website, usually accompanied by silly directions in case you came from the North, South or Mars? It was only some time later, when the web matured and google stopped being just a search engine, that a new corporate ‘how to get here / where are we located’ toy was born. Google invented google maps, pretty soon yahoo followed and Microsoft, well… they tend to do everything the rest does, it only takes them a little longer.
Forget yahoo and bing! maps, only if your a fanboy you’ll use them and even then you’re not sure how long they will be around (- cf. yahoo & geocities). Google maps was and is the way to go. Every post-iPhone smartphone has google maps (except the windows phones who use a mediocre version called bing maps).
Anyway, let’s focus on what this is all about!
Nowadays static maps (drawn by the guy who works at the ‘art department’) aren’t really used anymore. Using google maps is fancy and allows you to zoom in/out, get directions, have a satellite view or even streetview. The sky is the limit and, let’s face it, we all jumped the maps boat.
fast forward to… now!
When we’re developing websites we mostly use google maps somewhere. Inform where an event is held, a company is located or to find the nearest dealer in town. There are many ways to include google maps and the most easy way is to use an iframe with the map embedded. Real men tend to use the maps API to embed the map in the website. It’s al sunshine and lollipops! Until you use a mobile device to surf to the website. Sure the maps work just fine unless the map is too big and you end up in the Maps scrollbar of death™.
So what is the Maps scrollbar of death™ exactly?
When scrolling on your mobile phone or tablet it all works fine, but as soon as your finger hits a google maps you start repositioning the map inside its container. Not a big issue if you have some space around it so you can keep scrolling. Worst case you can usually tap the menu bar on top to regain access to the top of the website, if not: You’re screwed!
So do we need to use the iframe or flash solution? Sure not! You could use the google maps static image API to include the map but then again, we could be using the static image from the guy of the art department, no? So the goldilocks solution is to show the full blown map api on non-mobile / tablet websites and use the static image api on mobile / tablet websites.
Simple solution
The easiest way to achieve this is… to embed both the iframe and the static image and show / hide the appropriate one using some CSS and media query magic.
Plugin solution
Why you should use this plugin? No reason, whatsoever! I just hate it to use the iframe, specially if I have markers and balloons and other stuff to display. That and the fact I hate using the google maps API to geocode addresses and place markers. Therefore I was thinking of a plugin that I could easily pass the address and possible markers to and it would magically show the map or the static image. If I link the static image to maps.google.com with the appropriate address most mobile devices will open their maps application instead! How cool is that!
So without further ado: the jquery responsive google maps plugin (still in progress). The technical mumbo jumbo is on the github readme page, so feel free to comment, add feature requests, fork me or even help me finish this.
A demo can be found here: http://joggink.com/wp-content/uploads/jquerymobilegmaps
Bookmarked responsive web resources
Responsive webdesign has been a hot topic for a while, but I tend to loose track of all useful resources that cross my path. So I’ll try to make list them up.
Feel free to share resources you find useful too!
If you’re not familiar with responsive webdesign I suggest you check out this nice presentation from @bytte:
CSS Frameworks:
HTML5 boilerplate
HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.
Goldengridsystem
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
320 and up
‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.
skeleton
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
Foundation
An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
Gridpack
The Responsive grid generator, created by Erskine Design.
Embedding media
fitvidjs (video)
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Text
letteringjs
A jQuery plugin for radical web typography
fittextjs
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
SVG
raphaël
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Making things work cross browser
selectivizr.js
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Contributions by @baskwalla, @driesdeleay, @wolfr, @bengie & @paulirish
Mobile navigation jquery plugin
Some people like to bitch and whine about a responsive web approach, others embrace it. I can’t blame them, they probably still use ajax to replace iframes…
If you’re anti respsonsive you better stop reading, start looking for your credit card and order one of these wonderful books. If you speak or understand Dutch I would suggest you get out of your cave more often and maybe attend some free fronteers meetups.
Anyway…
Since I started working as a freelance Gorilla I’ve been blessed with the design skills of Jelle. He designs killerwebsites for every possible device. Gorilla has been building responsive websites for a long time, even before it was coined ‘responsive webdesign’. They’ve managed to build a rock solid haml / sass (compass) boilerplate that provides most of their default fallbacks. One of these default fallbacks is the often used horizontal navigation:
So, for desktop users and iPad users this horizontal navigation works fine. There’s a fallback for mobile users so the horizontal list becomes a block list resulting in something like this:
As you can see, it’s not very handy because the content is being pushed down and clicking around on the website doesn’t really give you the feeling that you’re actually changing pages. Therefore we wrote a small jquery plugin. This could be done native but since we’re using jQuery in this (and almost) every project it seemed easier to just write a plugin. The result is something like this:
The plugin and more info on how to use can be found on github: http://github.com/joggink/jquerymobiledropdown
Willistrator: The why
It all started on a sunny day last year. I remember it well, it was pouring rain and freezing like hell. Therefore some friends and I were sitting in “de vooruit” in Ghent, talking about the revolutionary changes in the web scene: HTML5, CSS3, media queries, responsive design, SVG, etc…
It was then that Thomas (Byttebier) mentioned what a big pile of shit SVG was. He was working on a responsive website for some friends who own a B&B named “Sleepstreet“. Because this site was responsive it seemed natural to use an SVG for the logo. Razor-sharp resizing was the game and Illustrator was there to blame!
It felt logical to create a logo in Illustrator and export it as an SVG, but how do you implement this cross browser? Just copy paste the barfed-up SVG code from Illustrator? Hell no!
Javascript to the rescue!
After weeks of sleepless nights, few possibilities were left and Thomas put all his faith in this RaphaelJS library. This seemed to be the best solution possible. Only drawback was that Thomas had to rewrite the entire SVG with Javascript, using Cufon as well for the custom font. This wasn’t logical at all, so I proposed to build an online SVG editor. But as most promises made in a bar, this one too died a silent death… Until now!
If he wasn’t a designer, this would be where the story ends. However…. Take a look a the logo and the different scaling zones:
the red zones should resize in a different way than the center. The center should always stay as big as possible whereas the 2 ribbons can resize to at least a minimum width of the actual ribbon. I know it all sounds a bit complicated but if you see how it works you’ll understand why this should behave like this. Check the sleepstreet website and resize your browser to see the logo scale
Now, the problem is that all the coding for this is done by hand, it’s not rocket science, but enough to have some sleepless nights coding this up. Therefore we started playing with the idea to build an online SVG editor to generate this kind of SVG in a very easy and user-friendly kind of way. Now it’s my job te make it actually happen, and oh boy, I feel as excited as 16 year old waiting on a saturday night to attend hist first party ever.
I know the very basics of illustrator and I must say I hate most of it. I have some ideas about the interface, etc… but this will be posted in an article later this week.
So I won a google chromebook
Google chromebook Samsung series 5
There was a contest at the fronteers conference 2011 where you just had to fill in a form with your name, email address and the reason why you should win it. I wasn’t going to compete but a little voice inside said “why not…” The app I proposed is a simple straightforward online SVG generator / editor. The possibility to add shapes, paths, text, etc.. and choose your output format: SVG or RaphaelJS. (I’ll explain the inspiration for the app in a future blogpost)
So, as you already guessed, I won the chrome book. It’s a pretty neat device, nothing fancy but fast as hell! It has a 16gb SSD which is enough if you know that the OS is just google chrome. I’m very happy I won because now I’m even more motivated to build this SVG tool. I’ve even been thinking about a name and a logo and found the perfect match: since it’s a web based version of Illustrator I’ll coin it Willistrator (Web Illustrator). The logo is very simple, some bezier curves, handlers and a simple font, resulting in something like this:
Codename: willistrator
And before you ask: YES I am serious about the codename, it’s not a spoof and I’ll build it. The logo I’m not really sure…
If all goes well I can kick this project in the groin later this week, I’ll post a follow-up blogpost with the inspiration for the app and a link to the github repository / pre-alpha version.
iPad wifi intercom solution
Before digging into the whole iPad domotica topic I wanted to give you a little background information.
My girlffriend and I use some shared calendars so we can schedule things perfectly, therefore, our paper calendar ended up in the rubbish bin and this was the trigger for my idea. It’s not revolutionary but I’m surprised nobody has started developing descent solutions.
To replace our ‘old paper calendar’ I started playing with the idea to mount a screen on our wall and write a web app that could fetch everything we needed. I could show our appointments, a small clock and maybe some other things too. As most of the sideprojects this one died a silent death too until yesterday… Yesterday, I was sitting at my desk and saw my iPad (1st gen) which I barely use and I started thinking that everything I wanted to show on my webapp dashboard was already an app on the iPad. Even better was the fact is had a touchinterface, allowing us to add or alter scheduled events in our calendar. Bonus points for the image slideshow, because after some time of inactivity it would simply show some of our beloved pictures. Extra bonus points for the remote app and our airport express in the kitchen. We could stream our music and even radio stations to our stereo (which I wanted to replace by a Zeppelin for quite some time now). How’s that for a paper calendar replacement ;-)
After seeing the light I went down to check some empty spaces on our wall where we could mount it. Maybe in the same place the old calendar: next to our intercom for our doorbell… So why not replace the stupid intercom with a nice wifi video intercom solution that could stream our doorbell right to our iPad using push notifications? So I started my search but I couldn’t find any thing that satisfies my needs, I only found 1 crappy solution that doesn’t support push notifications and costs a gazilion!
So what is it I want?
Well, imagine having a doorbell with a camera. You’re sitting in your sofa and someone rings the door. You go to your iPad, check out who’s there have some small talk or even allowing them to come in by unlocking the door with a swipe or any other gesture you can think of. That would be a good start, even better would be that if you’re not at home, the sytem sends a push alert to your iPhone and maybe a snapshot (or video if you’re on wifi) of the person in front of your door, allowing you to do the same as if you were at home: talk to the person and maybe let him/her in. (e.g. we have 2 dogs and it would be nice if my mother in law could enter our house if we’re stuck somewhere so she could feed them or let them out).
All of the above would be splendid, following extras would make me a happy man:
- integrate RFID keys, swipe your card over the doorbel and enter (instead of using the key). Not really necessary, but nice to have, especially if you would use it as a company
- Show a log of the video conversation with a timestamp for every time someone rang your doorbell. Even if you’re on a holiday you could still see who needed you
- If we could integrate the RFID we could even show the log of when someone came at work.
Maybe there are already solutions doing (some) of these things, if you know about it feel free to share!
Standpunt van Belgacom
Belgacom biedt de klant haar verontschuldigingen aan voor het feit dat het contact met onze diensten niet naar wens is verlopen.Bovengenoemde ombudsklacht werd voor onderzoek overgemaakt aan de verantwoordelijke van de technische dienst. Zij sturen volgend verslag:De telefoonlijn van de klant staat op een 9 Meg profiel op adsl2p en de lijn is volledig in orde. Er is dus geen snelheidsprobleem en er zijn ook geen meetfouten over langere periodes. De lijn is volledig stabiel. Uit het onderzoek is wel gebleken dat er VDSL2 beschikbaar is. Indien de klant wenst over te stappen dient hij contact op te nemen met de dossierbeheerder van de ombudsdienst. Belgacom zal dan het nodige doen om de lijn van de klant over te zetten naar een VDSL2 lijn. Tenslotte maken wij de opmerking i.v.m. het gebruik van een server op adsl of vdsl. In deze systemen is de downloadsnelheid vele keren groter dan de upload (bij de klant is dat 9 Megabit tov amper 455 kbits upload – bij vdsl2 kan dit 30 Meg tov 2 Megabit). Bij het aansluiten van een server moet deze al zijn data verzenden via de upload van de verbinding ( en dat is maar 455kbits nu of max 2 Megabit bij vdsl2) en dat is heel wat minder dan de 9 of 30 Mbit. Volgens de technische dienst kan de klant dus overstappen naar VDSL2. Er is geen technisch probleem en qua snelheid zal de klant wel een verbetering merken.Indien de heer Vandendriessche wenst over te stappen op een goedkoper internetabonnement is Belgacom bereid om geen verbrekingsvergoeding aan te rekenen.Wij zijn ervan overtuigd de klant met deze informatie van dienst te zijn geweest en wensen ons nogmaals te excuseren voor de ondervonden hinder.
Mobile banking app
I have never been a true believer of the online banking website. It’s slow, uses unrecognizable icons (which I have to hover over every single time because I still don’t know what they mean), but most of all I hate the fact I have to get their silly cardreader and type these security codes every time I want to do something…
I can hear the critics already yelling that it is necessary to type these codes, otherwise people could just ‘steal’ your money once they get in your account!
Bullshit!
- Everyone who owns a credit card like visa or mastercard can vouch for this. Online payments with a credit card just need the card number, expire date and security code to be valid. Sure, a lot of people get scammed but they get their money back. (the fact that their money is transfered back from the merchant who just sold goods for free is another issue).
- The truth is, if someone malicious gets into your account in the first place, that means he has your cardnumber AND pincode, so why verify that a million?
So back to the story… What if online banking would demand your security code 1 time? You enter your emailaddress (instead of your card number), your password and a one time passcode for which you have to use your cardreader? The reasons I don’t want to enter my cardnumber are:
- I don’t always have my bankcard on me
- Banks seem to focus on major browsers and safari isn’t one of them I guess. My online banking website can’t seem to remember my cardnumber…
Now we have this issue off the table, maybe banks could focus on mobile banking. Not just some fancy mobile site with tons of security checks but just an easy to use zero-bullshit native application that requires a pin code to access it. If they would build something like that, I would even pay for the application! Because right now, I rather go to a bank office because I hate to log in to their online banking system to type a dozen of security codes so I could know how much money is on my account.
Git clients, an overview
I’ve always been intrigued by the number of SVN apps there are , like the beautiful versions app, and the lack of descent GIT clients. Last year I’ve seen some upcoming GIT clients websites all claiming they were building the best GIT client ever. I’ve tried to make a nice list of GIT clients:
- Gity (Mac, open source)
- Gitti (Mac, currently in beta, download available)
- SmartGit (Mac/windows/linux, free for non-commercial use / 55 euro license)
- Gitbox (Mac, free for max. 3 repositories / available in app store)
- GitX (Mac, open source)
- Tower (Mac, 30 day trial available)
- Sourcetree (Mac, also for mercurial, trial available)
- Gitnub (Mac, opensource)
- Sprout (Mac, available in app store)
I’ve bought Tower with a github promo code. Partially because of the clean interface but definitely because it plays nice with Textmate and because I can create a new git repository on my beanstalk app account.
It could be that I missed some git clients, so feel free to let me know.