backspace

Introduction This weekend I've made a GTK+ application, I've done my best to make it responsive by applying my old Android development experience. Android make it clear that you should not block UI thread (main thread) not non-UI tasks like: disk IO (read a file) network IO (request remote API) internal SQLite database intensive computations  Let me quote : "You should not perform the work on the UI thread, but instead create a worker thread and do most of the work there." private class MyTask extends AsyncTask... { protected Long doInBackground(URL... urls) { // worker thread } protected void onProgressUpdate(Integer... progress) { // ui thread } protected void onPostExecute(Long result) { // ui thread } } GTK+ GTK+ is not threadsafe, in the sense all calls to GTK+ should be from a single thread that is the main thread or the UI thread, which seems similar to Android. We have a class that loads the glade XM...

Back in my first days of Linux I had a bootable floppy disk with fully functional Linux distro (a kernel, a shell and busybox tools and lua scripting). Maybe that was not much, but it was less than 2MB and would work on an old 386 PC with 4MB of RAM. But shell is boring, graphical minimal Linux distros was several hundreds of mega bytes and need hundreds of MB of RAM. Embedded devices typically have a minimal Linux with busybox or alike running with no graphical interface but instead they have some sort of web interface exposed to some port. If you tried to run a minimal graphical Linux distro let's say XFCE on an embedded device (let's say a raspberry pi) you would notice that most of its limited resources are taken by Xorg the legacy graphical server. Introducing Wayland Wayland is a new different approach to graphical interface, instead of sending drawing instruction over a legacy protocol (with so many extensions) to a legacy daemon (with so many extensions) that ...

Some times you want to show a pop-up in HTML (something like jquery fancy box , light box , flowplayer overlays ). The trick to make an overlay is to add a div at the end of the body DOM tree, this semi-transparent block would cover the entire screen to prevent interaction with content beneath it, this can be done by having a semi-transparent png image as background or a using RGBA background (background-color:rgba(255,255,255,0.75);) or using a opacity ...etc. Usually div is created in JS when the library is initialized. Let's assume we want to show a box at the top, this is very easy by having top:0 To make it at the bottom we can't set top:100% because then it's top corner will be place at the bottom of the screen, but we can set bottom:100% ie. place the bottom corner of the box at the bottom which is what we want. If we have a box 200px in height, and we want to center it vertically we can not simply say top:50% nor bottom:50% and there is no such thing as middl...

I've asked this question to Timothy Jordan from google, he told me canvas is for interactive graphics while SVG otherwise. I've been searching which of the two to use in my mobile app (using phonegap) and why ? The first thing I noticed is that most common mobile browsers does not support SVG at all (eg. android < 3.x ) The second thing I noticed that they support canvas very well. http://caniuse.com/#feat=svg-html5 http://caniuse.com/#feat=canvas SVG is an xml graphical format, so you might use usual DOM manipulations, on the other hand, Canvas is a set of methods you call to draw things (works like this: clear, draw, clear, draw ...etc). In short if you want to create both web and mobile apps and cares for browser compatibility you might consider some api like dojo.gfx , if you just want a rich mobile app then you go with canvas.

Introduction Given a static image like this one We might apply many kinds of transformations on it using CSS3 "transform" like rotate and scale, skew or any transformation matrix. How to apply it ? You can rotate gear by 120 degrees using the following css .my_class { -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -ms-transform:rotate(120deg); -o-transform:rotate(120deg); transform:rotate(120deg); } You may scale to be 50% smaller using a similar sytax: .my_class { -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); } you may also specify different factor for X-axis and Y-axis using scale(X,Y); You may specify two transformations like this .my_class { -webkit-transform:rotate(120deg) scale(0.5); -mox-transform:rotate(120deg) scale(0.5); } Here is an example How to animating it ? we can use "@-moz-keyframes" and "@-web...

Introduction In the last posts we have shown how to create some animation using CSS3 transitions (to make buttons that animate moving object or to create an animated slider ). Transitions are triggered in Javascript by a timer or by some action handler (eg. "onclick") that apply some change (change left or change CSS class) and the change will be animated. In this post we will show how to create animations, just animations! For example one might need to animate an bouncing arrow next to some button or pulse current tab in menu. How To ? First you create a CSS selector (eg. a class called "bounce" or "animate_me"), then we need to pick a name for your animation let's say "bounce" .bounce { animation-name: bounce; -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; } and then specify all animation factors you want like animation-duration in seconds iteration-cou...

You may use the CSS3 transitions we discussed in our previous post to implement slider by having the slides besides each other using float:left then change the left position of their container, the div containing the slides have sufficient width to make the slides lies beside each other and the div that contains it got overflow:hidden and that's the trick, as we can change left to show the slide we want. See the live demo for the most simple slider with CSS3 transitions We have used onmouseover/onmouseout to set a flag that disable the slider while the mouse is inside the box so that user won't get disturbed by the slider movement when he want interact with the active slide content (eg. trying to click the link in first slide). You may use jQuery or ZeptoJS or any JS framework to generalize the code and you may put onclick on the buttons to make it move to some slide (onlclick=" slide_cur=X; ").

Some people might use setTimeout to do animations in Javascript, and many people use jQuery just to do some simple animation (fade, expand, ...etc). In this post I'm going to show how you can achieve this without any JS at all, just a simple CSS3 transitions. Just add the " .ani " class to your " div " and it will be animated where " ani " is defined below .ani { -moz-transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -ms-transition: all 0.75s ease; -o-transition: all 0.75s ease; transition: all 0.75s ease; } Almost any thing you do to divs carrying this class will be animated. You can replace 0.75 seconds with any duration you want for the animation to last. Flow the link below to see a live demo Live demo for CSS3 based animation Try to click links in the bottom left box, also try to change the class of the green box from "ani box1" to "ani box2" by doing right click then choose "inspect element...