HTML

Type
Fri Feb

XebiaLabs Product Diagrams

One of the biggest challenges XebiaLabs faces as a company is that when introducing our offerings to someone who doesn’t know of us they always ask how we fit into the…

diagrams

One of the biggest challenges XebiaLabs faces as a company is that when introducing our offerings to someone who doesn’t know of us they always ask how we fit into the general devops environment. There is a really long and complicated answer to this depending on what tools the person is currently using, the processes / methodologies they embrace, and a number of other factors.

Therefore we decided to come up with an interactive visual that would convey the answer to this question, quickly, efficiently, and even take into consideration some things that we should touch on but don’t always when addressing prospects.

So far the response to these diagrams has been great. The only criticisms they have garnered are that they look static at first. In the future we may add a “pulsing effect” or some other indicator that the diagrams are interactive.

 

Challenges

The biggest challenge with this project was creating the lines between the individual integration categories, as well as gracefully making the diagrams responsive in a way that was still informative.

The diagrams all have a set width and height. The lines are all absolutely positioned divs with a 1px dashed border on the top or right depending on their vertical or horizontal orientation. The integration boxes are also absolutely positioned.

When the browser width shrinks to below a certain level, depending on the diagram we make the integration groups positioned relatively display block. This stacks them in a way that makes them still look appealing, and maintain functionality. Under a certain width we completely hide the lines.

Screen Shot 2015-02-13 at 12.57.10 PM

For the main diagram the responsive version itself was a little too much. For this diagram we hid the diagram, and created a static fallback visual to maintain the meaning behind the diagrams.

Screen Shot 2015-02-13 at 1.00.06 PMSpecial Effects

For all of the visuals I used wow.js and animate.css to provide a “it’s all coming together” effect. When the diagrams come into the viewport the individual elements of the diagram fade in from all directions. I think it’s a pretty cool effect!

 

View
Type
Mon Dec

How to Make Spotify Responsive with Fitvid.js

After trying to make Slideshare presentations responsive with Fitvid.js I tried it with spotify. This is something that I had attempted months before, but to no avail. There are a…

After trying to make Slideshare presentations responsive with Fitvid.js I tried it with spotify. This is something that I had attempted months before, but to no avail. There are a couple of jQuery CSS solutions out there, but none of those really worked all that well either.

Alas, I attempted it again following the same method at Slideshare as seen in this post.

I will repeat the steps here while substituting the Slideshare code with Spotify’s…

Note: Leave in the sizing parameters. No idea why, but this makes the album art show in a more aesthetic way.

Make Spotify Responsive

To make Spotify posts responsive the first thing you need to do is obtain the Spotify embed code available when you right click on a song in the desktop app. Paste it where you would like to have your video, and proceed to open up your Fitvid.js file and locate the following code.

var selectors = [
        "iframe[src*='player.vimeo.com']",
        "iframe[src*='youtube.com']",
        "iframe[src*='youtube-nocookie.com']",
        "iframe[src*='kickstarter.com'][src*='video.html']",
        "object",
        "embed"
      ];

Now you will want to add the following snippet right under the Kickstarter selector (or the Slideshare one if you added that too!)


"iframe[src*='slideshare.net']",

Make sure you include “embed” before the url. After you have added that snippet you should have the following code.


return this.each(function(){
      var selectors = [
        "iframe[src*='player.vimeo.com']",
        "iframe[src*='youtube.com']",
        "iframe[src*='youtube-nocookie.com']",
        "iframe[src*='kickstarter.com'][src*='video.html']",
        "iframe[src*='slideshare.net']",
        "iframe[src*='embed.spotify.com']",
        "object",
        "embed"
      ];

Save the file, make sure you’ve correctly targeted the area you would like to resize the videos in, and you should be all set.

If you would like you can also specify a new selector right in your jQuery code without altering the fitvid file by inserting the following code!

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='embed.spotify.com']"}); 

Let me know if you’re having any trouble int he comment section to the right!

View

Subscribe for More!


I send out a monthly newsletter on various topics.

Take a moment to enter your details, and you can select the news you would like to have delivered to your inbox!