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.

Ghostlab & Unic browser testing, behind the scenes

We are proud to work with Unic

It is always great to know a client is happy using our products to do browser testing, and Unic is a very special one.

Using Ghostlab has made the iteration between Unic front-end engineers and designers more efficient and to prove that, the guys at Unic created a great video to showcase how Ghostlab has uniquely created a more effective workflow. Check it out below.

Making of Unic Device Lab from Unic on Vimeo.

Browser testing – who is Unic?

Unic is a leading provider of high-quality e-business solutions in Europe. With solutions for communication, sales and cooperation, we increase our customers’ success. Unic provides integrated solutions from one source: we combine competencies in consulting, creation, implementation and operation. Unic solutions create measurable added value, quality and stability. As an owner-managed group, Unic relies on independence in the strategic and operating management. Unic has been successful in the market since 1996 and is today represented in three countries with 260 employees.

We evaluated Software for our Device Lab. The Ghostlab developer team was quick to understand our specific issues, and was able to present us with solutions expertly and constructively at all times.

We hope that this story has inspired you and we want to thank Unic and wish to always collaborate with them on their exciting new projects!

If you guys want to check their work, you can head over to Unic

The Ghostlab team

Efficiency Rethought: Meet Matthias the Ghostlab Architect

A new kind of efficiency: how we work

One of our most important values at Vanamco is the focus on improving efficiency and workflow. So it makes sense that our Ghostlab browser testing app is designed to do just that. By enabling seamless testing across all devices simultaneously, Ghostlab reduces avoidable workloads and frees up development teams to focus on the thing that really matters – their creativity. This in turn streamlines the process and boosts productivity, leaving more room for innovation and saving money for our users’ businesses.

How do we know? Because we count ourselves among Ghostlab’s users – as you’ll be hearing in a moment from our own coder Matthias Christen, whose ideas are making developers’ lives easier every day. But first we’d like to give you an insight into our in-house development and teamwork culture at Vanamco, and explain how a team-wide collaborative approach is central to our own creative process.

Why it makes sense

Between the moment when an idea is born and the point where it comes to life in a tangible product, the timeframe depends on how effective our team is at working together. The complexities involved in designing, developing and implementing ideas mean that transparency and integrated teamwork at every step of the process is absolutely crucial. Even small decisions made now can have a knock-on effect through the entire chain, setting the team back and creating workloads of sideways and backwards steps.

By learning to think collectively as a team, engaging in constant feedback and discussion, and taking group responsibility for each decision, we can build trust and create the forward momentum for the big picture. Keeping everyone in the loop and actively involved, breaking deliverables down to be more lightweight, and closing the efficiency gaps throughout the team means that we’re able to be more efficient – so that Ghostlab can make businesses more efficient for its users.

Learning to think collectively

It’s no longer good enough to assign boilerplate tasks to individual colleagues and expect them to reveal their efforts at the next group meeting. That way of working leaves too many gaps for miscommunication, wasted time and potential dead-ends. It’s why on all our projects, we encourage pooling ideas and decisions, and learning to think collectively.

To create a steady flow of meaningful work, and to avoid backwards steps, every member of the team needs access to brainstorms, discussion of ideas and decision-making. When small problems are solved as a team along the way, it makes overall challenges more hassle-free and more manageable, which results in better products and services at the end of the line.

However, our idea of collaboration is not a rule, but more an environment. It’s about creating the opportunity for more focused teamwork across an entire project, and a space that allows every member the freedom to express their own ideas, without the frustration of reworking and taking backwards steps. This way, everyone’s skill sets are put to their best use – which ultimately makes team members feel more integral and hopefully happier!

Keeping in the loop

With the exponential growth in new systems for devices emerging all the time, it’s crucial that we’re able to cover all bases. That’s why a tandem approach to solving problems, big or small, is so much more effective than previous models. Creating unified solutions across all devices means a unified approach must be encouraged within the team at every step, which means keeping every member in the loop at all times.

The old ways of delegating checklist jobs to workers who perform each task and wait around impatiently for the next assignment, are thankfully disappearing. But plenty of opportunity is still wasted through outdated and time-intensive meetings where those not in the loop need to be brought up to speed. By keeping everyone within communication loops at all times, feedback becomes an ongoing process which actually helps a project to gather more momentum, rather than slowing things down.

This enabling of a continuous back-and-forth between different parts of the team, of course, is a process that requires some commitment and can take some getting used to. Everyone needs to be onboard – otherwise it can have a knock-on effect that slows the project and adds avoidable hours onto timesheets. That’s why it’s vital that any potential complexities within the project are communicated right away, and team members get together regularly to discuss ideas.

And last, but certainly not least – having people on the same page from the start to finish of a project also takes the pressure off individuals, whose work everyone is up to speed on, without the need for grand unveilings further down the line.

Breaking problems down and building trust

Of course, bringing ideas to life involves showing new work to colleagues from time to time – but the key here is to ensure that any such deadlines are frequent and that deliverables are kept lightweight. This means encouraging the team to always keep up to date by sharing sketches and first-step ideas with colleagues, rather than waiting to reveal the fully-formed solution.

By enabling team members to stay on-track with the progress of a project, right through design and development, it means we can engage in meaningful debate along the way and identify any potential spanners in the works. As soon as it’s possible to present a basic example of a new idea, we check to see if it fits with the shared collective idea of where the project should be headed.

Colleagues are invited to discuss the pros and cons of prototype ideas though bite-size sketches, allowing feedback before anyone works in the wrong direction. This is a huge advantage when looking for a more efficient workplace set-up. Crucially though, it’s also about creating trust within the team – if a new idea comes to fruition that might affect the team’s work, the whole team needs to be involved, through a transparent creative process.

Closing efficiency gaps

Efficiency gaps can rear their ugly heads whenever teamwork starts to stutter. This can be a result of a multitude of sins – not enough communication, or motivation, or simply not being on the same page. And these gaps can grow quickly on a fast-moving project, which is why it’s doubly vital that feedback loops are free-flowing between designers, developers, and everyone else on the team.

Accountability for workloads and decision-making is made easier if we can track what everyone else on the team is up to. This creates room for more innovation and less backtracking, so that the team can focus on what they really love – making better products and helping users gain a richer understanding of what Ghostlab can do for them.

One such key player in our team is Matthias Christen. Since joining to work on Ghostlab at the beginning of 2013, Matthias has played a central role in the app’s development, and in last month’s blog Matthias was described by our frontend developer Andi Dysart as “the genius that codes the products and brings ideas to life”.

We caught up with Matthias to find out his thoughts on how the project is making headway:

1. What’s your name, how did you come to Ghostlab and what is your role?

My name is Matthias Christen, and on my first day at Vanamco in January 2013 I received Florian’s prototype of what was later to become Ghostlab. Today I’m responsible for the architecture and most of the coding of Ghostlab, which ranges from the low-level native C++/ Objective C code, up to the JavaScript/HTML5/CSS frontend code.

2. How does your role fit into the team?

It’s my job to come up with new ideas, and also to listen to new ideas from other team members and our users. The next stage is about thinking how those ideas might fit into Ghostlab, how they could be integrated technically, and then finally carrying out the actual implementation. I also answer technical support tickets, but I’m glad I can leave all the marketing and sales to Andi because he’s doing such a good job at it.

3. What’s your favorite part of your job?

I enjoy trying out and prototyping new ideas, and integrating them further down the line as new features in Ghostlab. Overall, I also enjoy the everyday process of creating a user-friendly software architecture.

4. Can you describe some of the professional challenges in your role?

Ghostlab has grown into a pretty complex project over the last one and a half years. For me personally, this has been both a challenge and a great chance to hone my software architecture and engineering skills.

5. What’s been your proudest achievement project-wise whilst working with on Ghostlab?

I’m proud of having grown the prototype code into a full app which our users find useful today – and which we ourselves use all the time when we develop webapps.

 

If your friends are trying to become more efficient in their jobs or business, share this article with them now and help them out.

Each month we’ll be introducing you to some of the faces in our eclectic team here in Zurich, to open the doors on Ghostlab and hopefully give insights into what motivates us behind the scenes. As ever, we’d love to hear your thoughts on Facebook, Twitter and Youtube and below, and hear your stories about how efficiency and Ghostlab have affected you.

 

Chris Harris is the winner of the Geek Quiz!

Chris Harris will be rewarded with a FREE Ghostlab license.

Well done Chris, you have completed the Geek quiz and got all the answers correct.

Here is a bit more about him:

“I am a musician (most recently of Destroyer (http://www.mergerecords.com/destroyer)) and student in the Bachelor of Science (Computer Science) program at Simon Fraser University in Burnaby, BC, Canada.

I am also a freelance web developer, currently working for the Internet Society, with a passion for all things front-end. For personal projects I like to use Node, AngularJS, Jade, SASS, Gulp, Bower and some combination of PhantomJS/CasperJS/Karma/Jasmine/Mocha for testing.

I’m grateful to Vanamco for the license and excited to start integrating GhostLab into my development and testing workflow!”

If you want to connect with Chris, you can reach him at:

 

Here is the questions and Chris’s answers for all of you who completed the quiz.

 


Read more