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.
CSSConf.Asia – Bridging Design and Implementation. Amara Sanctuary, Singapore – 19 November 2014.
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
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:
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…
- The presentation of that content should be enhanced with CSS.
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.
<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:
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?
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.
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.