On a recent project we came across an issue where user initiated popups get blocked in Safari when being called by an AS3 Flash app. The issue doesn’t happen in AS2 and I’d not come across it before, but when I did and I researched it I found it was a well documented issue with no solution. Most popup blockers are able to distinguish between a user initiated popup and an automatic one, and this is the case with all browsers with AS2 or all browsers except Safari with AS3. But what do you do if a popup is an integral part of your design and you’re using AS3? As far as I can tell there is no fix for this issue, we found some apparent solutions but when when tested them they failed.
What I came up with isn’t a fix so much as a working solution. When you initiate a popup in Flash it’s done by calling a JavaScript function called window.open(). This function returns a boolean of True upon success or False upon failure. So programmatically this gives us a way of knowing if the popup has been blocked. In which case we offer the user up an HTML link to the popup that we know won’t get blocked. I believe that when designed well and with thought this can be an elegant solution for a small base of users who are probably already used to seeing certain functionality across the web fail for them.
There’s obviously a number of way to implement this, but as a quick and dirty example lets create a hidden HTML block to appear if the popup fails:
The window was unable to open, possibly due to your popup blocker. Click here to open.
Okay now lets look at the popup JavaScript function that Flash calls:
function shareFacebook(){
success=window.open('http://www.facebook.com/sharer.php?u=http://richie-p.com/blog','FacebookShare','toolbar=0,status=0,width=626,location=no,menubar=no,height=436');
if (!success){
document.getElementById("popupMessage").style.display="block";
}
}
So basically what’s going to happen is that the hidden window appears only if the popup failed, thus allowing for the user to click the HTML which doesn’t get blocked.
But what if we have multiple popup windows? We need a way to have one message div that can trigger an endless number of popups. And why does the message have to remain forever visible once it appears?
Bearing this in mind here’s an example of a more elegant generic version. Again it’s quick an dirty code and I wouldn’t necessarily expect it to be in a production environment in its current state:
This time we have the popupMessage call a generic function:
The window was unable to open, possibly due to your popup blocker. Click here to open.
The actual popup JavaScript function that Flash calls is the same, but this time we need it to set global variables:
var popupFunc="";
var popupTimer="";
function shareFacebook(){
p=window.open('http://www.facebook.com/sharer.php?u=http://richie-p.com/blog','FacebookShare','toolbar=0,status=0,width=626,location=no,menubar=no,height=436');
if (!p){
popupFunc="facebookShare";
clearTimeout(popupTimer);
$("#popupMessage").slideDown("slow");
popupTimer=window.setTimeout('$("#popupMessage").slideUp("slow")',10000);
}
}
So what basically happens is if the popup fails we set the name of the popup function that failed into a global variable called popupFunc. We use the jQuery slideDown() method to gracefully make the message appear. We also use a global variable called popupTimer to hide the message after 10 seconds. And in case the message is already showing from a different request we clear the popupTimer so it doesn’t disappear too quickly.
And finally lets look at the generic popup function:
function launchPopup(){
$("#popupMessage").slideUp("slow");
eval(popupFunc+"()");
}
We hide the message and call the popup function.
Like I say this is all quick and dirty for display purposes. But I really believe this to be a solid and elegant solution to a frustrating and problematic situation.
We’ve got this project going on where users can create their own artwork which is saved to the server as an image, and we want them to be able to post it into Facebook. At first I thought it was going to take some effort and have to use the Facebook Connect API. But I was hoping for something easier, kind of how easy it is on Twitter to just tag a status GET string onto the URL. Then I remembered Facebook recently released something that does exactly this. It’s all very simple and pretty cool really, check it out here.
I’m doing something simple so I didn’t really need the share count. So I threw together a super simple JavaScript implementation:
function fbshare(url,title){
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url)+'&t='+encodeURIComponent(title),'FacebookShare','toolbar=0,status=0,width=626,height=436');
}
As you can see there’s nothing to it. It’s nice because it sends the user directly to Facebook, and if they are already logged-in then they are instantly presented with the familiar form.
Something to note is that if you are posting a web page then the title will likely be overridden and pulled directly from the page title (just as the page description and thumbnail images). But if you are posting an image or another URL then the title will definitely come in handy.
I’m loving what Marvel has been doing lately with their movies. Yes the Spider-man movies have been okay-ish, and sure they screwed up Daredevil something chronic, the Ghost Rider and Punisher movies were terrible (for me as comics they aren’t so hot either), the first Fantastic Four was alright whilst the second sucked, but the X-Men series has been pretty good, and whilst I hated the graphic novel I found the X-Men Origins: Wolverine movie to be pretty great in it’s own way. And though the Ang Lee version of Hulk was a confusing mess we’d rather forget ever existed, Marvel more than made up for it with the Louis Leterrier sequel The Incredible Hulk which was out last year. He really understood that the Hulk is a lame character that only ever turns interesting when the story is about his Dr Bruce Banner alter ego, even the TV series from the seventies got that, it was only ever really for a few minutes a show that the Lou Ferrigno incarnation of Hulk graced the screen with his presence. And even more than with The Incredible Hulk movie, Marvel really hit a home run with the Iron Man movie that came out earlier that same summer. It was the perfect comic to screen adaptation – the perfect story, the perfect cast, the perfect sprinkle of mega stars, and CG animations had advanced to the point where this whole thing was fantastic and yet completely believable. They’d finally cracked it, and just in time, cos things we’re just getting interesting…
Throughout the brilliant Iron Man movie there is some kind of federal agent whose continually trying to speak with Tony Stark, he keeps referring to his agency as ‘Strategic Homeland Intervention, Enforcement and Logistics Division’, those who are much more cunning than I might have picked up on this immediately, but I didn’t catch on until the very end when it gets referred to in it’s acronym form of ‘S.H.I.E.L.D.’. Aha, there’s our first clue as to this being something bigger than just this one movie. Then at the end, and even though I own the DVD I’m ashamed to say I’d never watched it all the way through the credits to get to a hidden scene and hadn’t come across this until just recently, the infamous Nick Fury himself (played by none other than the infamous Samuel L Jackson) presents himself to Tony Stark to talk about the ‘Avengers initiative’:
Exciting huh? And then I came across a clip that points out what appears to be Captain America’s shield on Tony Starks basement workbench, which is curious but sort of bizarre as their paths don’t seem to have crossed at this point. Is it just an easter egg to tease the fans or will it explain itself in a future movie?
Then at the end of The Incredible Hulk movie which was launched a month or so later the same summer, and was equally as good in its own right and Marvel had shown us that they’d got two straight movies right and that they’d finally figured out the winning formula, there’s a cameo by Tony Stark who talks to General Ross about how he’s putting a team together. I can’t find a good clip of this, but it’s not a hidden scene and it was actually in one of the TV trailers so I’m sure you’ve all seen it.
So that’s where we’re at now. We know that Marvel has figured out how to make killer adaptations of their characters onto the big screen and we know that they are leading up to The Avengers movie, which looks to be one of the most epic movies of all time. But what else do we know? I’ve scoured the web a little, and whilst my time is limited and my detective skills are possibly not what they once were, I think from what I can tell at lot of it is still shrouded in mystery and no one really knows exactly what is going down and when, or how, but I’ve uncovered some info:
We do know that Iron Man II is out next May and is currently in post production and stars amongst others Scarlett Johansen as The Black Widow, and apparently she’s been cast to continue that role in the Avengers movie and there’s talk of her possibly getting her own movie. But there’s not much secrecy left behind this movie, we all know it’s coming and you can see photos from the set and all kinds of other goodies out there, so lets concentrate on some of the lesser known movies in the pipeline.
Then it looks like Thor is next on the release list. As everyone knows Thor is an actual character of Norse myth – the god of thunder, son of Odin ruler of all the Norse gods, and brother of Loki god of mischief. And possibly because of this as a character he has never truly jived with me, the way that they tried to meld science fiction with classic fiction, I never had much interest in the character and barely ever bought a Thor comic, only really knowing him from his time with the Avengers and stints on crossovers. So I’m quite intrigued to see what Marvel does with this movie. The cast has already been assembled with Natalie Portman and Anthony Hopkins taking leading roles, filming starts in January and the release date is May of 2011.
Next on the release schedule it appears The First Avenger: Captain America gets the slot. It could actually make for a pretty damn interesting movie as his origins lie in World War II, I wonder if they’ll have him kicking Hitlers ass like in the early comics? No real cast information available as of writing this, obviously Samuel L Jackson as Nick Fury is rumored to be a cast member. Filming is scheduled to begin next summer and the release date is for July of 2011.
Then it gets a bit blurry, we have three movies scheduled for release in 2012, which looks to be the mother of all years for movie releases and could truly change the way movies work forever more, but the order of their release isn’t specified.
I guess the Ant-Man movie might be first. Ant-Man aka Henry Pym, aka Giant-Man, aka Goliath, aka Yellowjacket, aka Doctor Pym, aka The Wasp, aka Scientist Supreme is one of the most morphed characters in the Marvel universe, and by that I don’t mean shape shifting is a super power of his, but that over the years he has taken on many persona’s and characteristics, most controversial of all perhaps being the time he beat his wife. As of now the script is still being written and there is no cast information to speak of, but Edgar Wright of Shaun of the Dead and Hott Fuzz fame appears to be locked down as director which is somewhat tantalizing.
I imagine that next would be the Nick Fury movie as they don’t even have a director locked down. Obviously Samuel L Jackson is rumored as being cast for the role. All I can tell you is the short plot listed on IMDB “A daring amateur boxer from Hells Kitchen is recruited by the Army for some top-secret assignments. He soon is promoted to captain, where he puts together the First Attack Squad, a group of elite soldiers who carry out elite missions.“. Interestingly enough I’ve read stories involving this character my whole life but have never been exposed to his early years, unaware he was an amateur boxer from Hells Kitchen. I wonder if they’ll tie-in some relationship with Jack Murdoch – Daredevils dad, who was also an amateur boxer in Hells Kitchen I imagine around the same time.
And then comes The Avengers, the big one, the mother of all movies. This has to be the most insane blockbuster movie of all time. By then it would have had over a half dozen prequels, which while being blockbusters in their own right, were merely paving the way to set up this one. Every one of these ‘prequels’ was a star studded affair, and looking at the IMDB page they are bringing back every single one of them to star alongside each other for what has to be the most ridiculous epic movie to ever grace the silver screen. There is nothing on the actual plot, which is being penned by Zak Penn (The Incredible Hulk, The X-Men: Last Stand, Fantastic Four, Electra, X2), but from what I can gather they are basing the characters on the Ultimates version. Edward Norton as Hulk is only rumored to be in the cast, and there are also whispers in the winds that he may even be a villain. There is actually a release date of May 2012 listed for this movie, so it could be this gets released prior to the other two that same year.
So there you have it, some movies in post production, some about to go into filming, and some that are still drafting the screenplays. It’s truly epic what Marvel are looking to accomplish, and will accomplish. It’s sick, it’s nuts, it’s insane! This has the potential to completely change forever how we look at movies, how we interact with movies, and how they interact with us. And also it is making me drool!
And a little bonus I’ll tack here on the end. I’ve come across an IMDB entry for one of my personal favorite Marvel characters of all time Dr Strange. To me the great sorcerer never quite fit into the Marvel universe, just as with The Swamp Thing who never quite seemed right when he crossed with Batman or any of the other DC characters in a story arc, and with The Sandman they barely even tried (which is fitting to mention as the screenplay is by Neil Gaiman!). So this is likely a stand alone movie, hopefully brilliant in it’s own right, but who knows what these freakin geniuses will dare to accomplish.
Measuring the success of social media efforts can be automated to a certain extent, but also needs human analysis to really be able to assess the tone and brand positioning across the various targeted social media platforms. There is no industry standard for measurement and ROI but the introduction of standardized measurement by UKOM in the UK may lead to better benchmarks.
Before a campaign starts its goals need to be properly understood:
If the goal is qualitative then we consider the campaign a success if we have been successful in building better relationships with our key audiences, have been able to participate in conversations where we previously lacked a voice, and if we were able to engage in a meaningful dialogue with our customers.
If the goals are quantitative then assessing the results can be more automated as we can use analytics to measure traffic, Feedburner to measure the reach of our feeds and podcasts, YouTube to determine how successful our videos have been, Facebook to determine the popularity of our apps, Delicious and other bookmarking sites to measure the popularity of our content, and work with the various search engines to see how much we are mentioned and linked to, and to see if our rankings have improved.
It is important to measure sentiment before, during, and after campaigns, this can be somewhat automated with a tool such as BuzzMetrics. Measuring constantly during the campaign allows us to react quickly to counter a negative reaction or enhance a positive one, maximizing opportunities and driving strategy.
I came across a cool article the other day which had some examples on how to go a little crazy with your Facebook profile picture, so I can’t take full credit for this. In fact I might not be able to take any credit at all, I just got done reading the article when my good friend (and awesome photographer) Doug was walking by, he had his full set of equipment with him that day and the next thing I knew I was hanging from the drywall down the hall with a flash on either side of me, I’m just glad I opted to wear underwear that day! He did his Photoshop thing and placed the photo over a Facebook profile background template, and added what I can only assume if what he perceives Twitter to think of me, he even added a splat of bird crap to my lid – nice! I uploaded it to my Facebook profile and I think it turned out great. The deal is basically that Facebook allows your profile picture to be up to 200 x 600 pixels and if you overlay it onto the background before uploading then you can make it seemingly interact with or come out of the page.
A few of things to keep in mind:
The position of the photo is dependent on how many lines your status message occupies. The image isn’t pushed down with the rest of the page content, so the more lines your status occupies the more of the upper gray needs to be added to the image. The majority of my status messages seem to take up two lines, so I have my image defaulted to that, and I also have a one line version uploaded to my profile pic album and could switch to that if I really wanted to.
The position of the photo is dependent on the text size of your status message, which is a similar issue to above, but actually a much bigger problem. This is to do with how the browser chooses to render that font, so it is a platform and browser problem. We have already noticed differences from Mac to Windows to Safari – each one was a pixel off even though we used Firefox to test on all three platforms. I currently have mine set to look good in Windows which covers the majority of web users, but of course the people that really care about pixel perfect positioning are all on Macs. We thought about getting creative to try and work around this and have the wall appear to tear, this might work out fairly nicely on a picture like mine where I’m hanging so it makes sense, but wouldn’t work for all cases.
The image doesn’t always appear over the exact background it’s been created to appear over. For example if you look at my public Facebook profile (make sure you are not logged in) it’s pushed way down, or if you look at my profile in the Facebook iPhone app it’s a similar deal. It’s not necessarily bad but something to keep in mind.
If you go with a long profile picture as I have then it will push down the content within the left column.
The thumbnail that accompanies your Facebook feed items is only 50 x 50 pixels so if you have a long picture it won’t all fit. I found that Facebook has quite a nice thumbnail feature that allows you to pick an area of a smaller version of your profile picture so you’ll probably find it works out quite well.
I conclude that it’s all a bit gimmicky now, at least for a personal profile page, it might work well for a fan page that doesn’t have to worry about a status message and the page looks the same whether you are logged in or not. If Facebook were to allow PNGs with transparency to be uploaded then it would solve the issue of not having to worry about where the background meets. But there would still be the issue of positioning, for example in my picture my hands hanging from the exact position of the background seem still wouldn’t be controlled. Facebook would need to allow for liquid positioning of the image – just as the rest of the page moves with the text then so should the image. And I don’t see any reason why they couldn’t allow for us to use a different image for the thumbnail than the one used for the profile picture. None of this is hard to do from a coding perspective, but I imagine Facebook is a lot more concerned with their branding, trying to stay away from the horrors of MySpace. One of the things I’ve always loved about Facebook over MySpace is exactly that – the clean organized look and feel, but c’mon Facebook give us the chance to somehow add just a little personality to our profile page!
For the last couple of years we’ve been using modal layers where it made sense, basically most places where we would’ve used pop-ups in the old days, i.e. modal layer is to Web 2.0 what the pop-up was previously. But all the while I never felt like I was able able to lock down any solid way of doing this. Every time the issue came up I’d re-visit the functionality, never overjoyed with my latest implementation, so I never came up with a final solution. Depending on the website I was working with and the libraries they were already using I’d sometimes use Prototype or YUI, or if it was a good fit I’d implement a pre-built lightbox gallery, or even just code up something quick and simple from scratch.
And it’s not just me, I’ve noticed throughout the web bad implementations of this technology. I won’t get specific with names but I’ve seen some funky stuff even on well-known popular sites when it comes to the modal layer. Typical issues I’ll see is where the grayed out background doesn’t fill the whole screen, or it fills too much of the screen and triggers scrollbars, or if the page is really long you can still scroll and the modal layer isn’t sticky and you can lose where it’s at.
So the solution sort of hit me when I was having trouble graying out the background – when calculating the width some browsers include the vertical scrollbar in the result where as other browsers don’t, so in some cases it was overflowing and actualy creating a horizontal scrollbar. This is not surprising as we have made a career out of fighting the various browser discrepancies and it would be normal to have multiple javascript conditions to query the user agent and modify the width accordingly. But as I started to write those conditionals I watched my nice simple code quickly get complex and it suddenly hit me – why have the horizontal scrollbar at all? Really it was that simple. Good UI design dictates that if the modal content is bigger than the screen space available then a modal box is not the right approach, at which point the content does in fact require its own page (or dare I say a popup), or in cases where it is acceptable for the modal content to be bigger than the screen space available then the modal box itself should have the scrollbars. So why even have it? There’s no reason, and I would even go as far as saying that if there is no reason for having it then it is better UI design to actually remove it.
Okay so here’s the code, I used jQuery but it would be simple to convert it to any library or even make it stand alone:
An example of where I’ve used this code is on the CCS donation page, but it’s not that great of an example because the page content isn’t long enough to trigger scrollbars.
Okay so this is really fun. Just over four years ago I was working at a popular mortgage company as a back-end Tech Lead and was tasked with developing a PHP web framework to replace the dated and abominable system they currently had in place. Their current “framework” was like the ugly bastard child of an MVC with grade three burns. In other words it was total shit (all these years later and I still seem to harbor a great hate for it). The web had been advancing quite nicely and we were now looking at the birth of Web 2.0, so not only was it a misery for us developers to code in the current system, but it had now become a hindrance on what we were able to accomplish. So management finally understood the necessity to invest in a new system and I was charged with leading it’s development, I was finally able to realize a vision for a framework I’d been dreaming up for a while.
The first step of course was to come up with a cool name for the framework. After much brainstorming with the front-end Tech Lead (who was the co-creator of the framework) we finally came up with a name we both agreed on – Skeletor – not only a powerful villain from one of my favorite childhood toy franchises, but the name just seemed so damn appropriate for a framework. I was super excited with the name and the project, and I wanted everyone else to get on board and be as excited as I was. I also had the vision that the framework would belong to a web suite and comprise of various user interfaces to manage things like the URL catalog, error reporting, and debugging.
So the following is the very first piece of work I did for the project. The document was put together before the project was completely sold to management and definitely helped seal the deal. I also had the requirement to teach the rest of the team the fundamentals of OO programming and MVC frameworks. So my idea here was that each member of the team would get a character from the MOTU world, which represented a module within the framework, and they would have to become that character and learn everything about the purpose of that character, and understand it well enough to present it to the rest of the team, and eventually develop-out their module. In the end it was only two of us that were assigned to developing the framework, which we did and we did well, and that same framework now serves up over a half a dozen websites with over five million page impressions a month. So this is just a mock-up for something that never really paned out as planed, in the end we never really fleshed out and finished what I was attempting here, but even still I think I came up with a really fresh approach to teaching the concepts of OO development, or teaching anything for that matter, and to this day I still look back and try to match that same vision I had then with the work I do now. Enjoy!
A Web Systems Suite
The web systems suite comprises of everything involved in the website process:
Framework
Framework Objects
CMS Application Interface
SKELETOR – The Framework
The framework for the web applications. All applications live within an instance of the framework. It consists of libraries, classes and run-time infrastructure.
Logical and concise directory structure
Extends PEAR
I HAVE THE POWER – Master File
The master file for the SKELETOR framework. Mod rewrite points to this.
Controls environment and global settings
Initializes common global objects
Routes, dispatches and renders the browser call
QUEEN MARLENA – The Model
The model defines the properties of an object.
ETERNIA – The View
The view contains all the output for the page call, with defined placeholders for logical driven content. An object may have multiple views.
KING RANDOR – The Controller
The controller contains the default behaviour and helper classes of an object. All Skeletor objects extend the Skeletor controller.
EVIL-LYN – The Error Handler
The error handler takes care of where to log, and how to react to an error.
TRAP JAW – The Database Abstraction Layer
The database abstraction layer sits between the framework and the databases and handles all queries and results.
MAN-AT-ARMS – The Security Layer
The security layer controls access and permissions for the user.
BATTLE CAT – The Content Catalog
The content catalog is both a CMS interface and a stored representation the its data. It defines what view and model a URL should dispatch.
RAM MAN – The Forms Catalog
The forms catalog is a CMS interface used to build the web forms and define how the captured data is stored.
CASTLE GRAYSKULL – The Session Handler
The session handler controls how session data is stored (e.g. serializing objects) and where it is stored to (e.g. written to the file system or a database).
STRATOR – Redirect Handler
The redirect object handles how all the various possible redirect types are handled. It will consult with the content catalog to know how to handle a URL redirect (301 moved permanently, 302 temporarily redirected, etc.)
TEELA – Form Handler
The form handler consults with the Forms Catalog
PANTHOR – The Request Dispatcher
Consults the catalogue hash map and calls the appropriate object.
SORCERESS – The AJAX Handler
Enables a page to speak telepathically with the server.
SNAKE MOUNTAIN – The Skeletor Control Center
GUI to configure and control many core aspects of the framework.
Generates new applications
Control user access
Control error handling
TRI-KLOPS – The Search API
The search appliance interface.
ORKO – Documentation System
This represents the importance of both automatically generated code documents (PHPDocs), and manually generated user-friendly documentation (HOWTOs).
I was working on something where I wanted to explore the idea of multi-column layouts, newspaper style if you will. For years people have tried to do this in websites with not much luck – lots of messy JavaScript yielding unpredictable results. But as with most things like this I’ve been trying to do lately I figured there might be a solution in CSS3, and a quick search showed me there was. Just like when I was looking into overriding the default text selection color it took just a few lines of code to see the power of the multi-column layout module.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit hendrerit eros, ac ultrices libero ullamcorper id. Pellentesque aliquet, felis quis imperdiet tincidunt, nisi lorem commodo felis, non varius tellus turpis eget nisl. Pellentesque est purus, sagittis ultricies dictum vel, volutpat sed urna. In ante dui, ultricies in pharetra non, pulvinar tincidunt felis. Nullam sed nisl ipsum, eget pulvinar leo. Phasellus pulvinar faucibus dui sit amet scelerisque. Pellentesque malesuada pellentesque turpis, a eleifend nulla mattis non. Integer commodo est quis elit mollis accumsan. Sed eu metus sed nulla aliquet facilisis. Mauris viverra sollicitudin rhoncus. Nam luctus dictum nulla. Morbi vel mollis leo. Aliquam erat volutpat. Maecenas ultricies nulla sollicitudin tortor interdum non fermentum purus tincidunt. Vivamus luctus turpis ut diam suscipit eget suscipit neque lobortis. Nam fermentum faucibus augue quis tincidunt. Vestibulum urna ante, adipiscing non dignissim a, dignissim sed augue. Curabitur dignissim viverra magna tincidunt fringilla. Phasellus ultricies pharetra enim quis facilisis. Pellentesque vitae massa sed elit mollis imperdiet.
God knows why but Safari and Mozilla both have their own special prefixes (-webkit- and -mozilla-) and then there’s the standard declaration, so using all three should make all your work forwards compatible.
You can also set the column width and it calculates the number of columns for you:
Again, you will need Firefox or Safari to see the effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit hendrerit eros, ac ultrices libero ullamcorper id. Pellentesque aliquet, felis quis imperdiet tincidunt, nisi lorem commodo felis, non varius tellus turpis eget nisl. Pellentesque est purus, sagittis ultricies dictum vel, volutpat sed urna. In ante dui, ultricies in pharetra non, pulvinar tincidunt felis. Nullam sed nisl ipsum, eget pulvinar leo. Phasellus pulvinar faucibus dui sit amet scelerisque. Pellentesque malesuada pellentesque turpis, a eleifend nulla mattis non. Integer commodo est quis elit mollis accumsan. Sed eu metus sed nulla aliquet facilisis. Mauris viverra sollicitudin rhoncus. Nam luctus dictum nulla. Morbi vel mollis leo. Aliquam erat volutpat. Maecenas ultricies nulla sollicitudin tortor interdum non fermentum purus tincidunt. Vivamus luctus turpis ut diam suscipit eget suscipit neque lobortis. Nam fermentum faucibus augue quis tincidunt. Vestibulum urna ante, adipiscing non dignissim a, dignissim sed augue. Curabitur dignissim viverra magna tincidunt fringilla. Phasellus ultricies pharetra enim quis facilisis. Pellentesque vitae massa sed elit mollis imperdiet.
Pretty cool huh? I love the instant gratification this CSS3 stuff gives. To do the same in Javascript would take a ton of thought and work and a bunch of fuckin around, and even then it would probably still need to be fine tuned on a case by case basis. Of course it was quick to pick-up but there is a lot more to it, PPK worked it all out really well a whole 10 months ago now, so if you’re gonna use it then read up on it, and be conscious about the ramifications of what it will look like in a non supported browser.
Also I think it’s worth noting, be careful when using this. Don’t get me wrong I think it’s really cool and will have a lot of use for it, but the web as a platform is way different than a newspaper, don’t make your users scroll up and down a bunch of times to read an article!
We just recently launched a microsite for the College of Creative Studies to introduce their new Taubman Center. Renamed from the old historic Argonaut building and renovated in 2009 this new addition to the college campus not only provides an amazing new facility for the students, but also offers great promise to extend the renaissance that Detroit is currently undergoing.
The site is pretty bare as of now, though the gallery documenting the construction process over the past year is pretty interesting, this is just a phase one and we will be adding videos and other more interesting content over the next several weeks. For the most part the sites primary function is to raise donations to help fund the reconstruction.
For me it’s pretty cool to be involved with this as it is one of the top design schools in the world, and certainly up around the very top of the list nationally. It’s well known in design circles and I am lucky to have some good friends who are talented enough to have graduated from there.
From a technology standpoint it’s been kind of cool, I got to run jQuery alongside MooTools and I also finally figured out the best way to implement a modal overlay (will talk about this in an upcoming post). It’s also cool how the overlay launches automatically if the anchor tag is present in the URL, I can’t remember the last time I did something like that.