Blogs

By Daniel Truninger 12th February 2013 Events

Yesterday saw the first Web Monday of the year, hosted by Elance. It took place at The HUB with about 120 attendees joining for another familiar get-together with lots of networking and learning opportunities.

This edition featured talks by Steffen Hedebrandt (Elance), Reto Lämmler (Remember The Name) and Adrian Bührer (Skim).
 
Here are some impressions of the event:
 
 
 
 
 
 
Additional images, by Boris Baldinger, of this edition can be found in the dedicated Flickr set.
 
By Boris Baldinger 11th February 2013 Drupal

While working on LikeMag, one of our most recent releases, we were confronted with a challenge: loading ads during a Drupal AJAX (Asynchronous JavaScript and XML) call. This is how we solved it.

The issue

By definition synchronously loaded JavaScript can only add objects like files, content or ads to a page's structure until it is entirely rendered. An additional complexity that can occur while working with third-party advertising providers is that you can not control the performance of their infrastructure. Which means either you accept this risk or try finding a way to mitigate it. We went for the latter.

At this point it is important to stress that it is common practice for third party ads to use the document.write method which only works for the synchronous loading approach. To learn more about the synchronous and asynchronous loading of remote tags I suggest you read the article "synchronous vs. asynchronous tags - what’s the big deal?" on the krux blog. In our case however it became apparent that our solution had to include the asynchronous approach.

While researching possible solutions I found the following tools:

The issue with the the majority of them were, that active development or support wasn't visible, except for PostScribe. This solution offers the following features:

"Krux PostScribe enables the type of tag execution required by most ad formats in an easy-to-use-and-deploy format. It leverages innerHTML to ensure reliable, fast ad delivery."

"Unlike other innerHTML-based solutions (e.g., writeCapture, ControlJS, and OpenTag), Krux PostScribe seamlessly enables the “immediate writes” upon which most ad formats depend."

Which in plain English enables the quick rendering of the page to the user and allowing the ads to respond in their own time without reducing the user's experience.

How to use PostScribe

Download PostScribe directly from its github repository.

Include these files in your project:

/htmlParser/htmlParser.js
/postscribe.js

Here is a small example:

<div id="myAd"></div>
<script type="text/javascript">
  $(function() {
    postscribe('#myAd', '<script src="remote.js"><\script>');
  });
</script>

Our use case

As mentioned in the introduction this solution stems from LikeMag which, besides utilizing PostScribe, is a responsive website and uses the Isotope library to arrange items over the screen automatically depending on the viewport.

Since there are no free lunches on the web, LikeMag has to monetize too and one of their models is built around ads. So in order to deliver the perfect balance between content and ads for every viewport, we had to find a way to render the perfect amount after the identification. And that is moment the where PostScribe comes into play.

Instead of injecting the ads right into the Drupal view and slowing down the loading of the rest of the page, we just print the standard items. In a next step the system iterates over the items and adds the appropriate amount of ad containers to the content with jQuery. (These containers can be addressed with PostScribe, because PostScribe works best when the DOM is ready.)

LikeMag.com Ad

"But where is the AJAX you mentioned in the title?", I hear you cry. So let's talk about it right now. When we scroll down on LikeMag, which besides being responsive is a smart infinite scroll site too, new items will be loaded through an AJAX call. So here we can use PostScribe as we did before. The only thing that we have to check, is that we do not add ads to already "adified" content. In our case we can check if the view-item was already processed by Isotope.

Code from View, partially modified by isotope and postscribe

See the code as an example:

Drupal.behaviors.ViewsLoadMore = { attach: function(context, settings){
      if ($(context).hasClass('view')) {
        $isotope = $('.view-id-articles .view-content');
        $isotope.isotope('insert', $('.view-id-articles .view-content .views-row:not(.isotope-item)'), function(){
          isotop_load_more_init(settings);
          Drupal.behaviors.advertisment.loadads()
        });
      } else if ($(context).find("html").length == 1){
        // If it contains html, it is the first behavior call.
        isotop_load_more_init(settings)
      }
   }
  }
loadads: function(){      $('.view-articles .views-row.views-row-ad').once('postscribe',function(){
        if(typeof(cachebuster) == "undefined"){var cachebuster = Math.floor(Math.random()*10000000000)}
        if(typeof(dcopt) == "undefined"){var dcopt = "dcopt=ist;"} else {var dcopt = ""}
        if(typeof(tile) == "undefined"){var tile = 1} else {tile++}
        var string = '<scr'+'ipt src="http://ad-emea.doubleclick.net/adj/likemag.ch/;' + dcopt + ';tile=' + tile + ';sz=300x250;ord=' + cachebuster + '?"></scr'+'ipt>';
        postscribe($(this), string);
      });
    }

As you can see we process only the newly loaded items from the Drupal view and exclude the already processed items.

With this solution we are very flexible to deliver the page content as fast as we can while not depending on the speed of an ad-provider.

 

It is Saturday and hence time for our weekly reflection. Unsurprisingly two major events contributed to the majority of this week's issue. Enjoy!

Drupal

DrupalCon Sydney 2013: Keynote: Dries Buytaert

This week saw the first DrupalCon take place in Down Under. Here is the traditional keynote by Drupal Founder Dries Buytaert which takes a look at Drupal 8.

Social Media

Deadspin: The Ravens Won The “Fuck” Bowl, Too: An Analysis Of Twitter Profanity During The Super Bowl
One of the great things about social media is that many contributions are made in the heat of the moment. Ever wondered how often the F Word was mentioned at key moment of this year's Super Bowl?

Marketing Land: Game Over: Twitter Mentioned In 50% Of Super Bowl Commercials, Facebook Only 8%, Google+ Shut Out
The Super Bowl ads are a good indication to see how important a social network is to those companies' strategy. There is no question about the flavor of the moment.

Responsive Design

Template Monster: Responsive Web Design Interactive Infographic
This topic is close to our heart. If you need some further facts and figures on Responsive Web Design this interactive infographic is something for you. 

Jobs

Working with Amazee Labs
Want to be a part of our team? Check out our latest opening.

By Daniel Truninger 4th February 2013 Team

If you were to draw a Venn diagram of a web veteran, a cosmopolitan and an adventurer the intersection of these three circles would represent our new team member, Dagmar Muth.

Dagmar holds a master in management and has earned her stripes by working as product manager for web companies Xing and local.ch. Naturally she joins us as a project manager.
 
When not organizing time, budgets and scopes, she can be found grinding the Swiss hilltops with her outdoor equipment and trotting the globe.
 
Welcome to the A-team, Dagmar!
 

Dear reader, yet another week has passed and it is time to reflect on the five stories which stood out for us this week. Enjoy!

Drupal

Dries Buytaert: Radio France sponsors Spark Drupal 7 work
Contributions to Drupal or any other open-source project are vital for their survival and progression. Besides individuals devoting time and work, organisations can support the cause by dedicating workforce or simply by sponsoring to create a lasting impact on the community. Here is an example of Radio France doing the latter.

Social Networks

Tweet ping
Paris based front-end developer Franck Ernewein has created a neat real time visualisation of Twitter's global activity.

Opinion

Brad Frost: Performance As Design
The second front-end developer to contribute to this week's issue is the respected Brad Frost, who makes a point that performance optimisation should not neglect the effect of a design can have on it.

Development

.net magazine: 5 things you didn't know Sublime Text 2 could do
Remember our three part series on Sublime Text 2? If you enjoyed it this article might be something for you.

Zurich

Open Device Lab
In a previous issue we applauded the initiative by a Helsinki based agency to help developers test their responsive websites on physical devices. Now Zurich has got an Open Device Labs too by courtesy of Flipnation.

By Oriana Pivetta 28th January 2013 Business, Drupal

Our servers are buzzing with joy! Amazee Labs' youngest project, The Voice of Switzerland, is online.
 
This weekend the singing competition made its debut on the national broadcasting station SRF 1. The TV franchise stages four Swiss musicians as coaches: Marc Sway, Stress, Stefanie Heinzmann and Philipp Fankhauser. They will have the difficult task to find THE Voice of Switzerland, whereas the candidates will have to wrestle through the infamous blind auditions, battles and semi finals in order to land in the grande finale on Saturday 16th of March.
 
The Swiss broadcasting corporation decided to call upon our developing rather than our singing talents for our second collaboration.
 
Besides being built on Drupal 7 and the responsive powers of Omega 4 the platform's true strengths become visible during the broadcasting of the shows. It is designed as second screen medium, which empowers the viewers to interact with the TV show and provide exclusive views behind the scenes.
 
But enough of the talking. Allow us to save our voice and recommend you to experience it for yourself.
 

 

Dear reader, here is the weekly selection of stories which caught our attention. Enjoy!

Events

Amazee Labs Events
The registration for the annual StartupCamp in Basel opened on Friday - high time to grab your seat and a new dose of entrepreneurial energy!

Opinion

Wired.co.uk: Fitness trackers are long on hype, short on credibility
Gadgets like the Nike Fuel Band are awesome - or are they? Daniela Hernandez points out that there are still some question marks over the trend's long-term sustainability.

Technology

Business Insider: Why Programmers Work At Night
One of the stereotypes attached to developers it that they work at night. Swizec Teller tries clarify this perception.

Food For Thought

x-surface.tumblr.com: Don’t believe everything you read.
Interesting insight in the ways some tech blogs operate with alleged inside information of new products. Introducing the "new Xbox".

Drupal

Digett: The Benefits of Drupal Contributions
A swift reminder why contributing to the Drupal community yields benefits for the contributor too.

By Oriana Pivetta 22nd January 2013 Business, Drupal

 

LikeMag, our youngest client release, has hit the web and is ready to receive YOUR contribution. It is a platform for sharing the best and funniest social media content that you can find out there. Just post your gems on the LikeMag page and add to the commons of endless amusement, infinite scrolling functionality included.

The website's inspiration hails from a previous project, Mag20, which we developed for Markus Bucheli. The motivation remains the same. Instead of sharing stories this time visual content takes center stage and is presented and elaborated in a new way. First and foremost, LikeMag is about crowdsourcing social media output online, however, there will also be a monthly print issue containing the best of the web shared on LikeMag.
 
From a technical point of view LikeMag is a device-agnostic responsive website and is built on the foundations of Drupal 7 and Omega 4. One of the highlights of this solution is the implantation of asynchronously loading ads of which the frequency varies depending on the user's view port. (We will expand on this subject in a further blog post in the near future.)
 
Have you liked and shared your post yet?
 

Here is this week's selection of the stories that caught our attention. Including items from the world of technology, key rules for successful business, the launch of Facebook's Graph Search, the importance of CRM and some birthday wishes.

Drupal

Our favorite Content Management Framework turned twelve this week! Let's hope it won't turn in to a moody teenager soon.

Technology

Techcrunch: How Facebook's Graph Search just Replaced a Major Chunk of Google
How could we not mention this! Yes, Facebook Graph Search was launched this week. Is this the beginning of a new way of searching?

CRM

crmtrends.com: CRM Best Practices
Sometimes one might underestimate the power of a Customer Relationship Management tool. Here is an overview of best practices, which can improve the performance and marketing strategies of your company.

Food For Thought

co.exist: 10 resolutions for Social Entrepreneurs in 2013
We surely know most of these tips, but it never hurts to revise them.

Design vs Technology

The New York Times: Disruptions: Design Rivals Technology in Importance
Nick Bilton claims that we have reached a point where technology has provided engineers the skills to make anything possible. Take the Nike FuelBand, it's all about product design and emotive experience.

By Kathryn McClintock 14th January 2013 Drupal

We've been big cheerleaders for Omega as a responsive base-theme for Drupal for a while now… since around the time of DrupalCon London. And although the community has HUGELY embraced Omega… making it the second-most-installed Drupal theme after Zen, there has always been a bit of controversy surrounding Omega 3 in terms of how it approached responsive web design.

Some of those critiques included:

  • Omega 3 was more "adaptive" than truly responsive (due to the definition of set breakpoints based on device widths).
  • Configuring Zones and Regions was confusing and laborious.
  • Omega 3 did not take a mobile-first approach.

The good news is that Omega 4 has addressed these issues of its predecessor head-on. In fact, Omega 4 looks quite a bit different than Omega 3.

If you're more of a skimmer, here's a quick overview (in list-form) of how Omega 4's changed:

  • Zones & regions: GONE
  • SASS out of the box
  • A new (pluggable!) layout & grid system
  • Optional polyfills for CSS3 & HTML5 support in older browsers

Zones & Regions

For starters, zones and regions have been totally abandoned. There have been many folks who have tried to explain how to wrap your head around how to configure these things. Remember this screen?

Well, no more. Omega 4 has gone back to the tried and true page.tpl.php file which is a) standardized for Drupal and b) better for markup control. Themer purists will undoubtedly appreciate this reversion.

Edit: For those that want the old UI we are working on it to make that an option and will allow you the same power that to control things as was in 3.x but now we're not forcing it on everyone. This is largely what's holding back the RC release but we're working quick to fix that! (See excerpt from Cellar Door's comment below.)

SASS

Omega 4 ships with SASS out of the box. This addition will be hugely important for keeping Omega a cutting-edge contender as a popular Drupal base-theme.

And for those looking to improve their SASS skills, the media queries, variables, and mixins that ship with Omega 4 are a great learning tool for novice or intermediate SASS-ers:

Just look at all that SASSY goodness!

Pluggable Layouts

In the Omega 4 theme settings, you can now choose to enable layouts. Layouts are a new feature that provide functionality much like what the Delta and the Context modules achieved together. Essentially, you can have completely unique layouts for different sections or pages of your site.

There is currently only one available layout, Epiqo, to use as a starting point, but it's chock-full of more SASS techniques.

If you'd like to employ this built-in feature in an upcoming Omega 4 project, simply copy the Epiqo layout into your sub-theme, and rename it and its contents much in the same way you would when manually creating a sub-theme. From there, you should add only layout-specific code, and nothing relating to styles (colors, typography, etc...).

Polyfills

For anyone responsible for browser testing or device testing, polyfills are becoming essential scripts to include on your site. Polyfills provide themers the ability to quickly enable CSS3 and HTML5 technologies in legacy browsers, saving hours of testing and work-arounds.

In Omega 4, there are already 5 optional scripts available to enable across your site:

While this certainly doesn't mark every improvement, these are the changes we felt most during the development of our first and second Omega 4 projects.

Pages

Subscribe to Amazee Labs Blog

Latest comments

  • home business software programs's picture

    Good day! I simply wish to give a huge thumbs up for the nice info
    you have got here on this post. I will probably be coming again to your weblog for more soon.

    home business s...
  • Agentur Typo3 Programmierung at Steilstarter's picture

    Hello,

    I must say that you are going great. you are sharing your information with us so thanks for that.

    Agentur Typo3 P...
  • Daniel's picture

    By the way, by "no documentation" I´m referring to Views Autorefresh. It is either not complete or conflicting.

    Daniel