Tag Archives: UI

Video: Performant UIs Using CSS Magic

Performance doesn’t end with making our sites load fast it’s also crucial in improving perceived speed and creating delight with silky smooth animations that creates beautiful UX for our websites and web apps.
In this talk we’ll explore how you can identify and improve performance using the various dev tools as well as techniques used to make sure animations run at the golden standard of 60fps.

Ryan is a Tech Lead at Zendesk. Hailing from Melbourne Australia, he has an unnatural obsession with CSS, JavaScript and the many places it runs. In his spare time he’s either hiking, writing for his blog thecssninja.com or committing code to github.

CSSConf.Asia – Bridging Design and Implementation. Amara Sanctuary, Singapore – 19 November 2014.

Source: http://2014.cssconf.asia/#speakers
Slides: http://ryanseddon.github.io/css_magic…

Asynchronous execution pattern

Asynchronous execution pattern

Before we go thought this pattern, lets cover some basic notes about JavaScript timers:

1. There two kinds of timers in JavaScript:

  • setTimeout
  • setInterval
2. Both take two arguments, a function to invoke and a delay period
3. setTimeout will execute the function once
4. setInterval will execute continuously with the specified delay between each execution
5. Delays < 4ms will be bumped to 4ms
6. Important: Timers wont start until the outer most function is finished

Browsers are typically single threaded, they either update the UI or executing JavaScript. Long running JavaScript blocks the UI and browser is unresponsive.

Splitting long-running code over setTimeout blocks releases the thread:

  • While processing a loop limit the scope to a small time window
  • Ensure that there is enough of a gap between timeouts restarting
So let’s see a basic example:

Video: Abusing phones to make the internet of things

Firefox OS is marketed as an OS for mobile phones. Cool. But what if we do one step back and omit the UI layer. Then a Firefox OS phone is a handset that’s cheaper (25$) than a bare-bone Raspberry Pi, that includes a ton of sensors, GPS, network connectivity, a battery and a screen. And on top of that it’s running the Gecko render engine that has APIs to access all that goodness. It’s time to take some phones apart, start hacking and roll our own OS on top of Gecko. Internet of things FTW!

What about a Firefox OS based doorbell system over bluetooth? A jacket tracker with GPS in case you go out and your jacket gets jacked? A small device that tracks how much you drink during a party? Home surveillance using a network of phones and a bluetooth speaker for an alarm? In this session we’ll see some crazy hacks, and you’ll should be all set to start hacking yourself!

Transcript & slides: http://2014.jsconf.eu/speakers/jan-jo…

Creating Progressively Enhanced UI Elements with JavaScript

Creating Progressively Enhanced UI Elements with JavaScript

Ideally, developers should use the principles of progressive enhancement andgraceful degradation when using both & . In turn, these best practices create several implications for development:

  1. As much as possible, content should be accessible to users and search engines with or without JavaScript.
  2. The presentation of that content should be enhanced with CSS.
  3. If a UI element requires JavaScript to function, it should be generated with JavaScript.

JavaScript is brittle and intolerant of faults: place a curly brace in the wrong place and the entire thing will quit and die. Using progressive enhancement principles protects both the user and ourselves as developers: if our code fails for any reason, the basic functionality of the site should remain unaffected.

Progressive enhancement sometimes means applying a little lateral thinking to your development process. As a simple example, let’s create a simple button on the page. I recommend working directly in the console to start: that way you can see changes line by line, rather than trying to get an entire script right the first time.

First, we’ll need a basic HTML page to start. It’s common to use a container as a “reference element” from which to spawn JavaScript-generated controls; our page will use a <div>. For the sake of convenience, call the page test.html.



Today’s post will show you how to build a very simple application using Java EE 7 andAngular JS. Before going there let me tell you a brief story:

I have to confess that I was never a big fan of Javascript, but I still remember the first time I have used it. I don’t remember the year exactly, but probably around mid 90′s. I had a page with 3 frames (yes frames! remember those? very popular around that time) and I wanted to reload 2 frames when I clicked a link on the 3rd frame. At the time, Javascript was used to do some fancy stuff on webpages, not every browser have Javascript support and some even required you to turn it on. Fast forwarding to today the landscaped changed dramatically. Javascript is a full development stack now and you can develop entire applications written only in Javascript. Unfortunately for me, sometimes I still think I’m back in the 90′s and don’t give enough credit to Javascript, so this is my attempt to get to know Javascript better.

Why Java EE 7?
Well, I like Java and the new Java EE version is pretty good. Less verbose and very fast using Wildfly or Glassfish. It provides you with a large set of specifications to suit your needs and it’s a standard in the Java world.

Why Angular JS?
I’m probably following the big hype around Angular here. Since I don’t have much experience with Javascript I don’t know the offers very well, so I’m just following advice of some friends and I have also noticed a big acceptance of Angular in the last Devoxx. Every room with an Angular talk was full, so I wanted to give it a try and found out for myself.

The Application

For the application, it’s a simple list with pagination and a REST service that feeds the list data. Every time I start a new enterprise project it’s usually the first thing we code: create a table, store some data and list some random data, so I think it’s appropriate.

The Setup

Videos: JavaFX Scene Builder 2.0 – Building an app UI

Demonstration of JavaFX Scene Builder 2.0 where I make an aeronautical themed demo app, showing how to build layout, apply CSS and connect code.