Ghostlab 2 is here

We’re excited to announce that Ghostlab 2 is now available! Let us give you a quick tour of what’s new, and what’s the same.

As in version one, Ghostlab 2 focuses on helping you making responsive and multi-device testing much faster and more convenient. It lets you browse any site you’re interested in, keeping any number of connected clients in sync by propagating scrolling, clicking, and any other site interactions it discovers. This works for local browsers and mobile devices on your network. It lets you (validly!) fill out forms automatically within a fraction of a second, lets you keep track of all connected clients, and offers you the ability to identify problems and fix them on any of them.

At the same time, we’ve introduced many changes in version 2 – some of them significant, some of them more on the minor-but-useful side. We’d like to present three of them that we’re particularly happy to share with you.

Client inspection

In Ghostlab 1, we’ve included Weinre, an awesome project that allowed us to remotely inspect the DOM on any connected device. However, we wanted to do more than that, and decided we’d have to rethink how we provide remote inspection tools. In Ghostlab 2, we are including the developer tools you know from Google Chrome – with some tweaks of our own. You are still able to inspect any connected client – but in addition, you can now inspect all of them synchronously.

That means that when you remotely “fix” that CSS property that destroys your page in Chrome or Firefox, you’ll immediately also see what the consequences are for any other connected browser or device.

On top of that, we decided that inspecting CSS is often not enough – especially after some bad experiences finding JavaScript bugs on mobile phones. So we’ve come up with a solution that lets you remotely debug JavaScript on any client that is connected to Ghostlab – be it a browser, a tablet, a mobile phone or even a TV set. We’ve even been told it works on IE8!

Preprocessors

To allow Ghostlab to further integrate into the workflow, we’ve also added the ability to compile several languages. Initially, we’re shipping support for Sass / Less / Stylus, Jade / Haml, and CoffeeScript / Typescript. When you’re using Ghostlab with your local site, it will now be able to compile all these source files into browser-ready HTML/CSS/JS and then automatically refresh the page on your devices.

We’re not including binary compiler packages in our distribution, rather, Ghostlab will attempt to install them them should they not be present on your system. We’re using npm and gem for that purpose. This makes it easy to offer a wide range of preprocessors in the future while not making the Ghostlab distribution too heavy. While the initial set of precompilers may seem limited, we’ll constantly be on the lookout for interesting candidates to include.

Redirection service

We’ve been told by several customers that when working in a team, pointing mobile devices to the Ghostlab server can be cumbersome. Of course, in order to avoid having to enter the URL on every one of them each time (which is slow even using the provided QR Code), they had bookmarked the Ghostlab server URL on every device. but: which URL? Several developers means several computers means several IP addresses – so each developer has a different (and potentially changing) IP address and the device bookmark will ever so often point to the wrong URL.

The idea of the redirection service is simple. A redirection bookmark is just a URL, looking something like http://302.pm/ABC677. It redirects to an IP address in your local network, like http://192.168.2.3:8005. The redirection bookmark has an access token, and using that access token, Ghostlab is able to update the redirection bookmark to the current IP and port where Ghostlab runs. When on a device, you access the bookmark, you will always be redirected to the up-to-date Ghostlab address. This way, you can either share redirection bookmarks within a team (by sharing the access token), or simply create your individual and permanent Ghostlab URL for your devices to use.

Enough said. Give it a spin!

So much from us. You can have a look at the Ghostlab website, where you can download a full-featured and completely free 7-day trial!

Inside Ghostlab Podcast

This month Andi (one of the brains behind Ghostlab App) got the chance to be a guest on responsivedesign.is podcast. He talks about what we do at Vanamco, coming into web design from a industrial design background, Ghostlab App and the open source wrapper Zephyros we use for it and all thing responsive.

Enjoy

 

 

 

Transcripts and links can be found on http://responsivedesign.is/articles/rwd-podcast-episode-27-andi-dysart
Inside Ghostlab Podcast

I love my team – Convince your boss to buy the Device Lab

One of our biggest client sectors are agencies, they kitting out in-house developers with our complete testing solution called the Agency package. Even though they sell well and the package suites the agencies, developers working for these agencies keep asking us for a little help to convince the boss that they need this tool.

Below are only a few reasons why you need the Device Lab and we have also packaged them into a PDF: Convince your Boss PDF

 

1_ Bring order to chaos

Instead of having mobile devices floating around in your office, establish a professional setup with one or several mobile testing stations that keep your devices systematically organized, easily available and readily charged.

2_ Speed up your development

The Device Lab helps you go from landscape to portrait on all attached devices in two seconds – simply turn it around on your table (it has a small footprint) and you’re all set! Plus, you’re looking at your devices like if they were a display – that means you won’t have to clumsily switch from operating keyboard and mouse to holding your 599$ device.

3_ Don’t miss out on bugs

By keeping a full mobile testing environment readily available for everyone, there’s no excuse for not testing your projects on the platforms you require. For your developers, mobile testing will become easy and hassle-free, since they can simply grab the lab and have a go!

4_ Circulate your Lab

The Device Lab is portable, so once you’ve set it up, it is not bound to a specific desk. Any developer can simply pick it up and take it to her workplace, then pass it on once she’s done testing.

5_ Impress your clients

Show your clients you mean business with your responsive strategy and explain to them how awesome mobile testing has become since introducing the Device Lab. They will be thrilled when they see all their target platforms lined up and ready for testing in a stylish manner!

6_ Add some style

Besides saving you a great deal of time and hassle, the Device lab stands proud and stylish on any developers desk. You don’t develop your awesome projects on a rusty 486 computer either, right?

7_ Make a testing statement

Ever thought about why your developers miss out on testing for mobile platforms? It’s not because they’re lazy, it’s because they lack infrastructure. Invest into your Device lab and show your people that after building the latest and greatest of frontend fancy, it’s just as important to make sure it actually works!

 

I love my team you say? Show them!

How has the Device Lab helped you? Let me know in the comments below

 

Responsive web design tutorial – infographic – 8 reasons to use responsive web design

 

In this responsive web design tutorial we look at a cool infographic

8 reasons to use responsive web design

 

Web Design Inspiration – Collective #4

A collection of discoveries from the web design & web development community, curated by the Vanamco team. Enjoy it!

Read more

Web Design Inspiration – Collective #3

 

A collection of discoveries from the web design & web development community, curated by the Vanamco team. Enjoy it!

1) Web Design Inspiration

Take your pulse

Great and modern way to present a product in a very interactive way, find out yourself!

2) Development

Bootmetro

Bootmetro is a new metro style web framework. Try it out.

3) Industry

First person hyperlapse videos

First-person video transformed into hyper-lapse videos with a smoothly moving camera. 

4) Resource

Front end tools

Front end tools is a great resource of tools for you to use on your workflow.

5) Design

Dribbbleboard

Dribbbleboard is a collection of the best of Dribbble, surely a great place to find inspiration

 

If you enjoyed this collective, sign up below to receive a weekly one. You won’t regret it.

The Vanamco team.

DeviceLab workstations

We love our community!

Take a look at the following workstations sent by our favorite customers and partners. It makes us happy to know you guys are rocking the world and we are proud to work with you.

If you use Device Lab and Ghostlab, we would love to see how your workstation looks like too.

Don’t hesitate to send us your workstation photos. Don’t have a Device lab? Visit devicelab.vanamco.com to order.

You can tweet them here: @ghostlabapp

Let the sharing begins!
01 02 03 04  06 07 08 09 10 12 13 14  16 17 18@_Mr_Spike_

 

Device Lab and ghostlab

 

devicelab

 

Now it’s your turn!
Share your workstation with us:
You can tweet it here: @ghostlabapp

Get yours at devicelab.vanamco.com

See you on the other side!

The DeviceLab team

Web Design Inspiration – Collective #2

web-design-inspiration-2

A collection of discoveries from the web design & web development community, curated by the Vanamco team. Enjoy our second collection!

1) Web Design Inspiration

Socialist

A beautiful and minimal website for the news socialist app. Organize the things you love.

socialist

2) Development

Free Responsive Dashboard

SVG pattern background, packed in a single CSS/SCSS file, yes please! Check out this site and try out the demo.

A simple and free responsive dashboard made with Angular JS & Bootstrap. Elegant and easy to slice and use today.

responsive-dashboard

3) Industry

YOLO and other apps that parody YO!

Yo Is Trying To Get Parody App YOLO & Others Pulled From The App Store.

yolo

4) Resource

BitcoinJS

The pure JavaScript Bitcoin library for node.js and browsers. A continued implementation of the original 0.1.3 version used by over a million wallet users; the backbone for almost all Bitcoin web wallets in production today.

bitcoinJS

5) Design

TEAGUE X – Denny Bicycle Design, changing cycling forever

Possibly the best bike design ever!? The model sports a minimalist frame, which belies all the tech packed inside. There’s an electric motor on the front hub (with a removable battery) to boost your hill-climbing, for starters. That’s married with a computer controlled automatic shifter that automatically adjusts to ride conditions for a “hassle-free riding experience.” To combat the constant showers, meanwhile, it uses a simple device with rubber bristles to break up the water, rather than a fender.A very beautiful designed layout from Cosmin Capitanu. Check out his portfolio on Dribbble.

denny

 

If you enjoyed this collective, sign up below to receive a weekly one. You won’t regret it.

The Vanamco team.

Javascript Quiz – Win a FREE Ghostlab License

 

We recently worked with Chris Coyier at CSS-Tricks.com to create an in-depth tutorial on Javascript Events!

To further test your knowledge of Javascript we put together a quiz with two awesome prizes!

The quiz for a Ghostlab licence is now closed.

Two winners were chosen to win a free Ghostlab license and one winner was chosen for an upcoming blog interview:

1st place: Sergio Lopes

2nd place: Mark Nicholson

CSS Transition Tips

css-transition-tips

CSS Transition Intro

 

The transition property is a shorthand property used to represent up to four transition-related longhand properties.

[css]
.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
[/css]

These transition properties make it possible to change element values over a specified duration, animating the property changes, rather than having them occur instantly. Here is a simple example on an animation on hover.

[css]
div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}
[/css]

That element in this instance a div takes half a second when moused over to turn from red to green. Here is the transition, hover over it.

See the Pen zqpEg by Louis Lazaris (@impressivewebs) on CodePen.

You can specify a particular property as above, or use “all” to refer to the transition properties entirely. div { transition: all 0.5s ease; background: red; padding: 10px; } div:hover { background: green; padding: 20px; } In this example, the background and padding will change, because of the “all” for the transition-property portion of the shorthand. You can comma separate value sets to do different transitions on different properties. div { transition: background 0.2s ease, padding 0.8s linear; }

State Jumping, Hardware Acceleration, Animating Origin, and More

 

Jump to another state mid-animation

CSS animation allow you to transition properties to a new value over a specific time. You also have the option to jump properties to a new value instantly. The key is to use two keyframes with a very tiny change, around .001% will work well.
[css] @keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off */ 50.001% { opacity: 0.4; } /* Keep off state for a short period */ 52.999% { opacity: 0.4; } /* Turn back on */ 53% { opacity: 1; } }[/css]
 Here we are toggling opacity and a text-shadow to look like a flickering billboard. See the Pen No Vacancy 404 CSS Only by Zach Saucier (@Zeaklous) on CodePen.

Hardware Acceleration

Transitioning some properties, such as left and margin mean the browser is recalculating styles every frame. This is very heavy, and can lead to unnecessary re-paints. This is especially noticeable in less powerful devices, such as phones.

This best work around is to offload the rendering to the GPU using CSS transformations. This turns the element into an image during the transition, stopping any style recalculations which increases performance. A simple way of forcing the browser to hardware render an element is to set the transformation’s z axis, which you can do with translate3d:

[css]
transform: translate3d(0,0,0);
[/css]

This isn’t a complete fix and has some issues too. Don’t use this for every element and only use it when you really need to.

Hardware acceleration can cause subtle font issues, such as a font looking like a different weight. This is due to a bug where subpixel anti-aliasing isn’t supported when an element is being hardware accelerated.

One fix is to disable subpixel anti-aliasing. This is how.

[css]
font-smoothing: antialiased;
[/css]

However different browsers use different hardware acceleration, this can cause cross-browser issues. For example, whilst Chrome and Safari are both built on WebKit, Chrome uses Skia for graphics rendering while Safari uses CoreGraphics.

You can use Chrome’s Inspector to Profile the page, showing all the repaints. Additionally you can show paint triangles in the Inspector’s options, and even turn on Composited Render Layer Borders in about:flags to see which layers are operating on the GPU. The key is to reduce paints by batch updating the DOM, and move as much as possible to the GPU.

Changing transform-origin mid-animation

You can change the transform-origin and even animate it with css3! In the example below, we create one animation using rotations on different axes instead of using four separate animations.

See the Pen Change transformation-origin mid animation by Zach Saucier (@Zeaklous) on CodePen.

The bad side of this hack is that you can not use animation-mode: forwards; for only a part of an animation. Meaning that we need to re-position the element to an equivalent of its state before applying the change in transformation-origin. In the above example, this is done by using translates to mimic the rotation’s effects.

Using pseudo-elements

Pseudo elements can be made to add more content to the appearance of a single element. They can have different animations from their parent, their own box-shadows, and are very much the same to being child elements of without the HTML markup. This let’s us create amazing single element creations like the one below. See the Pen Single Element gif Recreation by Zach Saucier (@Zeaklous) on CodePen.

In the example, all of the large circles around the middle flashing circle, as well as two of the smaller circles on the rim (opposite from each other) are box-shadows on the main element. The other two small circles are part of a pseudo-element’s box-shadow and the ring made of dashes is an SVG applied as a background on the other pseudo element.

Redrawing

When transitioning, you may have two sets of CSS properties. The first set of properties that the animation starts at, and the final set of properties the transition ends on.

[css]
$(.element).css({left: 10px})
.transition({left: 20px});
[/css]

However, you’ll find that if you apply both sets of properties, one immediately after the other, then the browser tries to optimize the property changes, ignoring your initial properties and preventing a transition. Behind the scenes, browsers batch up property changes before painting which, while usually speeding up rendering, can sometimes have adverse affects.

The solution is to force a redraw between applying the two sets of properties. A simple method of doing this is just by accessing a DOM element’s offsetHeight property, like so [demo]:

[javascript]
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
[/javascript]

This will work in most browsers, but I’ve had occasions in Android where this hasn’t been enough. The alternative is to either use timeouts, or by toggling a class name.

[javascript]
$(.element).css({left: 10px})
.redraw()
.transition({left: 20px});
[/javascript]

I hope you enjoyed this deeper look into css transitions. If you know someone learning front end development, do them a favour, share it with them and help them level up too.