Saturday, December 20, 2014

Lollipop CSS effects.

CSS transitions based on Android 5.0

(If you simply want to see and read the finished code, just see the fiddle:
Android 5.0 introduced a pretty slick looking effect when you click on certain controls. If you haven't seen it yet, the effect basically is a growing circle that appears while holding down a control. Here's an example: Image

After seeing it, I figured it would be pretty simple to translate that to the web. It's a refreshing change from simply changing an element's background color or similar.

The Idea

As basic implementation goes, the process is simple enough. We'll have some element, and that element will have a child. The child will be transparent, but the same width and height. We will then apply a background to the child, starting at 0px x 0px, and will increase it substantially.
  <div id="parent"> 
    <div id="circle"> </div> 
  #parent {
    height: 200px;
    width: 400px;
    background-color: lightgray;

  #circle {
    background-image: url("
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0 0;
    transition: .3s ease-in;

  #parent:hover #circle {
    background-size: 600px 600px;

That gives us the following result:
Which does look quite nice. However, I then desired a way to make this even cooler. What if the effect started where you clicked?

Improving the Effect

Using that as the basis for the future, I figured the first thing I needed to do is first find a way to detect the position of the mouse when we need to mousedown. Turns out one of the easier solutions is to simply set up a mouse movement listener:
  document.onmousemove = getMouseXY; 
  var tempX = 0; 
  var tempY = 0; 

  function getMouseXY(e) { 
    tempX = e.clientX + document.body.scrollLeft; 
    tempY = e.clientY + document.body.scrollTop; 
This is when things get slightly messy. We want to move the #circle's background position relative to itself, we can't simply set the position equal to the mouse coordinates. Therefore, I did what any reasonable engineer would do; Make a sketch:
So basically we want the vertical and horizontal components from the center of #circle to offset your background-image. To do this, we require the distance from the top of #circle to the top of the document, as well as the distance from the left of #circle to the left of the document.

Unfortunately that's not super easy to do (assuming we want this to work even if responsive). We basically need to loop through all the parent elements and obtain offset distances so we can get the total. In code:
  function getPos(el) {
    for (var lx=0, ly=0;
             el != null;
             lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
      return {
        x: lx,
        y: ly
We now have everything we need to actually implement the touch code. The implementation is fairly simple, we obtain most of the data that was in the graph, which we can now do using our getPos() function. After that we apply a background-position style of 50% (the center of #circle) - x/y. Here's that:
  function itTouched() {
    var someElement = document.getElementById("parent")
    var circle = document.getElementById("circle");
    var xValue = getPos(someElement).x + (someElement.offsetWidth / 2) - tempX;
    var yValue = getPos(someElement).y + (someElement.offsetHeight / 2) - tempY;
    var theString = "background-position: calc(50% - " + xValue + "px)" + " calc(50% - " + yValue + "px);";
    circle.setAttribute("style", theString);
Yay! Now all we have to do is call that onmousedown and onmouseup and change the transition to happen on background-size only. The finished product is shown in this JSFiddle: (Blogger apparently is doing stupid hacks that break this, so I can't integrate into the post.) I also have an example version on my website here:

Note about the circles

I strongly suggest using an .svg graphic like I did for two reasons. A) Scaling works flawlessly, so the edges don't look horrific. B) You can easily edit the .svg file to change the color. That allows it to fit into whatever theme you want.

Saturday, December 14, 2013

Using CSS Variables

Using CSS Variables

I'm very excited to say that as of Firefox 29, CSS variables are a reality.

For years web developers have been plauged with the unfortunate realization of not being able to store colors/sizes/images/etc in their code for re-use. Instead, the best one could do is create a ton of classes to store whatever shared properties you had. E.G.
      .sharedBackground {
        background-color: red;

      <div class="sharedBackground" id="boxA"> Hello </div>
      <div class="sharedBackground" id="boxB"> World </div>
Which is fine, except for when you want to share a bunch of different attributes. Then this happens:
<div class="sharedBackground sharedColor sharedFont etc" id="boxA"> Hello World </div>
That's pretty ugly.

Good news is though, CSS variables are coming (eventually to all platforms), but you can try them out now in the current Firefox Nightly!


As usage goes, it's pretty simple. Variables are declared like: --something. You then use these variables with the syntax: var(--something); And these variables inherit from their parents, so a simple example of CSS variables would be:
      .main {
        --mainBackground: red;
      #boxA {
        background-color: var(--mainBackground);
      #boxB {
        background-color: var(--mainBackground);

    <body class="main">
      <div id="boxA"> Hello </div>
      <div id="boxB"> World </div>
It's as easy as that!

Friday, August 16, 2013

New Compose Window UI coming soon to Thunderbird! Sneak Peak

New Compose Window UI soon, take a sneak peak

I'm a guy who likes esthetics. Nice looking apps make me happy. Fortunately I'm also a programmer, so this results in a fantastic combo. Therefore I decided to redo TB compose window. The OS X version is just about finished, and the other platforms should be done within a few weeks. However, I decided to showcase the final compose window look on OS X sooner.

First examine the old version:

Meh. Looks pretty lousy. Now feast your eyes upon the new look:

Make sure you're viewing at full size for best results. Hope you like it!

Saturday, July 13, 2013

The state of the Thunderbird Team and Mozilla

The state of the Thunderbird Team and Mozilla

Recently I was emailed by a user slightly frustrated by two things: 1. The lack of Thunderbird advancements and 2. Mozilla becoming a "dictator" essentially to their users.

Sadly, there are really no ways for any of our users to know we are doing differently, so I responded to the email explaining the state of Thunderbird and Mozilla. Here is that conversation for future reference:

Because of privacy I will not give all details in the email. I will however, supply the main points [paraphrased]

Green = User, Blue = Myself

"...Which lead me to the conviction that TB development/enhancement is slowly dying and that other mailclients better suit my and my customer's needs.  Mailclients are for us one of the most important working tools which cannot be beaten by any web-based mailservice."

"I understand the lack of confidence in TB development,
and even we worry about this. But let me tell you
something that may (or may not) help you with your confidence level.

Mozilla itself stopped development of Thunderbird awhile ago. Since then
only volunteers continue it's development. As of lately, our "active"
contributors are less than 20 people. Of those, there are probably about 10 

people that really spend almost every day on Thunderbird. The
people that are left are forced to make the choice between what bugs to
fix, and what not to. Unfortunately sustaining development is very
difficult with only 10 people. And of course, we can't all work on
everything. Each person has specific areas they work in, which means
each person's load is a lot more in that area. As much as I don't like
it, fixing bugs takes precedence over adding features, so that is why we
can't add things as quickly as we would like.

Just be aware that the remaining 10 people spend almost ALL their free
time devoted to Thunderbird. We make no profit whatsoever. Pretty much
everyone has actual jobs, families, etc that are more important. But
just know that those of us that are left work very hard and will
continue to bring the best product we can. It's just not easy, and the
more volunteers we get, the better off we'll be."

"This is not only an issue with TB, but also with FF. Lately I have the impression that the Mozilla Foundation's developments are lead by some kind of "arrogance" to tell their users what's good for them (a thing that is usually attributed to big
commercial companies) instead of hearing from the users what they want."

"Many (power-users/development-minded) people have been under the
impression that Mozilla is now dictating what users get and what they
don't. I myself do some work for Mozilla and the "Australis" project, so
I just want to clarify that this statement is simply not true. Although
it may seem like we don't care, we actually do more than ever. But our 

user base has grown rapidly over a few years and to make "most" of our
users happy, making the browser faster, more stable, and less dangerous
is what we want. That's what we've been targeting recently. Firefox
hasn't changed much in the past few years, mostly because of the amount
of work and time it takes to keep track of all the little features we
support. We just recently decided that some things need to go in order
to advance.

Simply making everything an about:config preference isn't actually that
helpful, since we still must support that preference. This would leave
us with hundreds of things to test, which makes everything much harder. So
you see, just because a small percentage of our users want these little
details, doesn't mean we can make it happen. As much as we would LOVE to
make everyone happy, it unfortunately isn't a reality. "

So there you have it, both Thunderbird and Mozilla work very hard to make their users happy and we will continue to do that until, well, the web becomes a thing of the past. Cheers!

I am only a volunteer for Mozilla, not an employee. My thoughts do not necessarily reflect Mozilla's. I don't agree with everything they do, but no one ever agrees with everything.

Thursday, July 4, 2013

New Firefox branding

New Firefox Branding

If you haven't noticed already, Firefox now has a new logo. This logo is cleaner, flatter, and more modern. Take a look:

 The logo is definitely different and even I must admit to flinch a little when I saw it. However, after looking at it for a while, you definitely get used to it.

Of course, this is just the first step to the new Australis UI coming in Firefox 25 (If things go smoothly). For those of you who don't know what Australis is, I'll tell you. Australis is the name of Firefox's future UI-refresh that aims to make Firefox lighter, cleaner, and easier to customize. Here's a screenshot of the latest progress.
You can try out Australis by downloading the UX build of Firefox here: UX Nightly Download Page

And if you aren't using Firefox currently, you should. Firefox is extremely fast, customizable, and respects your freedom! Get it via this link: or by using the Mozilla tab at the top of this page.

Tuesday, June 4, 2013

Real world phone statistics

So I currently am on vacation in Florida. Today I spent almost the entire day at Islands of Adventure and carefully examined every smartphone I saw. (It's possible people thought I was creepily staring at them, but they would be wrong)

Now of course, with hundreds and hundreds of smartphones on the market and me being around hundreds and hundreds of people, I assumed I would see a large range of phones. I was quite wrong.

In fact the results where surprisingly unsurprising. Apple and Samsung dominated the Park. Here’s the ratios of my observations.

iPhone to Galaxy S - 10:1
Galaxy S to other Androids - 5:1

These results really demonstrate what "real" people are using. Whether or not you think Android is better than iOS or that Apple makes better products than Samsung, the results stand. iOS is still by far the most popular Smartphone.

However what we can observe is Samsung's high abilities here. Hundreds of Android phones, but there where 5X as many Galaxy S's as there where other android phones. These are incredible results and I have to give Samsung credit for making the Galaxy S series really a brand of its own, separate from Android.

Of course, this does not mean the iPhone is the best smartphone or that the Galaxy S's are the best Android handsets. These are simply the most well known, best advertised, and the phones that "just work" for people.

Monday, April 29, 2013

New Thunderbird Icons now in the current Daily!

New Thunderbird Icons now in the current Daily!

I recently finished my bug up that adds new Thunderbird icons.

As you all know, the Australis UI-change for Firefox is a pretty big deal, and should arrive in Firefox 24. However, as seen from some of my other blog posts, I have been pushing some theme changes for TB as well. The changes will not be nearly as drastic, but the more major ones will include.

  • New TB Icons - Will arrive in the next version of Thunderbird
  • Tabs in the titlebar - May arrive in the next version of Thunderbird.
  • New Three-pane vertical view - May arrive in the version proceeding the next TB version.
  • New Composer Window UI - Unknown. Hopefully sooner rather than later
 So as you can see, the changes won't be nearly as rapid as the Australis is, and for the most part TB will stay familiar.

Anyway, today I am pleased to inform you all that the TB icons have arrived in the current Daily. Take a look!

Pretty nice eh? This is just a small change, but eventually things should look pretty awesome.

(Don't have Thunderbird or Firefox. Go get it! Use the "mozilla" link in the top-right corner for more information on Mozilla products.)