Business, webdev

How to record a Demo/Meeting on MacOS

To record a meeting or a demo on a Mac, you can use the built-in QuickTime Player app.

Here’s how:

1. Open the Quicktime Player app from your Applications folder.
QuickTime Player is the default media player for your Mac.
It lets you record audio and video.
You can use Spotlight (cmd+space bar) to open it.

2. In QuickTime Player, choose File > New Screen Recording.
This will open Screenshot and display the tools.

Continue reading
Advertisement
Standard
JavaScript, webdev

HTML5, CSS3 And Some Tips

First good 28min are on few smart techniques to improve the performance of your web app. Paul Irish (from jQuery fame and now with Google chrome team) describes:

  • CSS re-flows and how to avoid them – single re-flow is better because the browser won’t need to repaint all the elements. Batch the DOM changes before any re-flow-triggering actions is one of the good ways to do it. you can learn a lot from using http://www.browserscope.org/
  • Hardware accelerated CSS – psss… add css property to your element: translate4d(0,0,0) or translateZ(0) and the browser will do hardware accelerated.
  • Animation optimization
  • Web workers – move computation out of the UI thread. Without web workers you can’t… but lucky it’s 2011 and you have them (here and there). I’ve put a simple example in the end of this post. I saw it long time ago (a week?) on Mozilla site – on how to use web workers.
  • Benchmarking and build scripts.
  • Last but not least, try about:flags in chrome… lots of good stuff under the hood.

BTW, his (last?) project html5 boilerplate is great for any developer that want to write efficient web sites/apps that will score more then 90 on page spped and will get an A on y!slow. This project is an ANT ‘build script’ that harness you with:

  1. Cross-browser compatible – IE6 and others IE specific classes for maximum cross-browser control.
  2. HTML5 ready. Use the new tags with certainty.
  3. Optimal caching and compression rules for grade-A performance
  4. Best practice site configuration defaults
  5. Mobile browser optimizations
  6. Progressive enhancement with graceful degredation
  7. A full, hooked up test suite is waiting for you.
  8. iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.

Simple example on web workers
var results = [];

function resultReceiver(event) {
results.push(parseInt(event.data));
if (results.length == 2) {
postMessage(results[0] + results[1]);
}
}

function errorReceiver(event) {
throw event.data;
}

onmessage = function(event) {
var n = parseInt(event.data);

if (n == 0 || n == 1) {
postMessage(n);
return;
}

for (var i = 1; i <= 2; i++) {
var worker = new Worker(“fibonacci.js”);
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n – i);
}
};

Standard