Bouncing Buttons, a Demo

I was browsing through my old demos on CodePen the other day and I found this little experiment. It’s a menu which opens with a bounce effect. It might not be the best of menus from a UX point of view, but on the other hand – I created it just to be able to play around with CSS Animations.

The demo uses a tiny bit of JS to open and close the menu and CSS Animations for the bounce effect.

See the Pen Bouncing Buttons by Christofer Vilander (@c_vilander) on CodePen.

Share Button

Blog Stats, August 2014

It’s time for one of these ‘not so interesting for you, but interesting for me posts’.

Looking back at the August numbers was fun, simply because my latest post ‘Experimenting with the element.animate() function‘ was featured in codrops COLLECTIVE #128 which created a traffic spike.

New vs Returning Visitors
New: 91,4%
Returning: 8,6%

Top 5 Countries (based on sessions)
1. United States
2. Germany
3. France
4. Sweden
5. United Kingdom

Top 5 Browsers (all versions)
1. Chrome
2. Firefox
3. Safari
4. Safari (in-app)
5. IE

… 13.62% didn’t have Flash installed/support.

Top 5 blog posts (based on sessions):
1. Experimenting with the element.animate() function
2. How to maintain the end state in a CSS Animation
3. Animated Submit Buttons
4. Web Development Tools and Resources
5. Tracking Across Synced Devices

Share Button

Experimenting with the element.animate() function

Here’s a short blog post with two simple demos that I’ve created when playing around with the new element.animate() function that was included in Chrome 36, a function which makes it possible to create CSS animations using JavaScript.

Please note that this isn’t a tutorial and the demos might contain errors since they are created in experimental purpose.

As a comparison, the first demo is created strictly using CSS animations and in the second demo I’ve used the element.animate() function.

Demo One, CSS Version

See the Pen No name by Christofer Vilander (@c_vilander) on CodePen.


HTML

<p>Hover over the box ...</p>

<div id="box"></div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #eee;
}  

p {
  font: lighter 24px "Helvetica Neue", sans-serif; 
  color: #222;
  letter-spacing: 2px;
}

#box {
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 75px;
  height: 75px;
  border-radius: 15px;
  border: 1px solid #222;  
}

#box:hover {
  -webkit-animation: rotate 2s linear 2 ;
          animation: rotate 2s linear 2;
}


@-webkit-keyframes rotate {
    0%   {-webkit-transform:rotate(0deg) scale(1.0);transform:rotate(0deg) scale(1.0);}
    50%  {-webkit-transform:rotate(180deg) scale(1.4);transform:rotate(180deg) scale(1.4);}
    100% {-webkit-transform:rotate(360deg) scale(1.0);transform:rotate(360deg) scale(1.0);}
}


@keyframes rotate {
    0%   {transform:rotate(0deg) scale(1.0);}
    50%  {transform:rotate(180deg) scale(1.4);}
    100% {transform:rotate(360deg) scale(1.0);}
}

Demo Two, JS Version

Requires Chrome 36+ to work.

See the Pen element.animate() function by Christofer Vilander (@c_vilander) on CodePen.


HTML

<p>Hover over the box ...</p>

<div id="box"></div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #eee;
}  

p {
  font: lighter 24px "Helvetica Neue", sans-serif; 
  color: #222;
  letter-spacing: 2px;
}

#box {
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 75px;
  height: 75px;
  border-radius: 15px;
  border: 1px solid #222;  
}

JS

(function () {
  
    var box = document.getElementById('box');

    box.onmouseover = function () {

        box.animate([{
            transform: 'rotate(0deg)' + 'scale(1.0)'
        }, {
            transform: 'rotate(180deg)' + 'scale(1.4)'
        }, {
            transform: 'rotate(360deg)' + 'scale(1.0)'
        }

        ], {
            duration: 2000,
            iterations: 2
            
        });

    };

})();

As you can see both demos are more or less working the same, except that the animation in the CSS version will break (stop) on mouse out.

For more detailed information regarding the element.animate() function, please visit html5rocks.com

Share Button

Blog Stats, June 2014

Here’s some stats from the past month, June.

New vs Returning Visitors
New: 62,90%
Returning: 37,10%

Top 5 Countries (based on sessions)
1. Sweden
2. Brazil
3. USA
4. India
5. Canada

Top 5 Browsers (all versions)
1. Chrome
2. Firefox
3. Safari
4. Safari (in-app)
5. IE

… 46.67% didn’t have Flash installed/support.

Top 5 blog posts (based on sessions):
1. How to maintain the end state in a CSS Animation
2. Animated Submit Buttons
3. Tracking Across Synced Devices
4. Web Development Tools and Resources
5. SO Answers

Share Button

Tracking Across Synced Devices

A question came to my mind the other day:

How is a visit treated in Google Analytics (GA) when you move across synced devices? As a new visit or is the cookie shared, keeping the session alive?

My first thought was that the cookie wasn’t shared, although I wouldn’t of been surprised if at least users with Chrome’s Tab syncing feature could be tracked. Simply because they need to op-in to their Google Account (and Google owns GA) to be able to use the feature which basically could identify them across devices. But then again, even if this was possible, I wasn’t sure if this metric would be available to GA to distinguish the users. So I wrote the following tweet:

Nobody seemed to have an answer, so I decided to ask the question on webmasters.stackexchange.com. 10 days later, I’ve only received one answer saying that the visits are most probably treated seperately and if I’m looking for cross-device tracking I should upgrade to Universal Analytics (UA). Even if the answer gave me some valuable insights regarding UA it didn’t answer my question really, so the next step was to test it myself …

I created a new website and implemented GA-tracking. The reason for this was to make sure that no other visitors would access the site during the test. I then enabled iCloud Tabs and Chrome’s Tab feature on my Mac and iPhone. Visiting the website with Chrome and Safari (desktop versions) gave me two active visitors in GA and when I enabled each tab in Chrome and Safari on my iPhone the Real-Time data in GA showed four active visitors, which later also turned out to be four unique visitors.

Ga Visits

So according to my small test it seems that GA treats visits across synced devices separately (Visits 4, Unique Visitors 4).

Share Button

SO Answers

One of my favorite programming resources on the web is without a doubt stackoverflow.com which basically is a gamification based Q/A site for …well, programmers. I use it primary to look up different solutions, but I also try to contribute with answers as much as I can.

Since my programming skills narrows down to front-end development, more specifically HTML and CSS (and a tiny bit of JavaScript), my focus is within in these sections and as a short blog post I thought I’ll share some of my (so far) top voted answers.

/C

Share Button

My Blog Statistics for 2013

I’ve spent the evening digging into Google Analytics and I thought I’ll share some stats from the year that’s gone by. But first I would like to thank you all for visiting my blog.

My most popular blog post (based on visits):
Animated Submit Buttons

.. and second most popular blog post was:
How to maintain the end state in a CSS Animation

Looking at some numbers …

New vs Returning Visitors
Returning: 71,81%
New: 28,19%

Channels (visits)
1. (not set): 54.83%
2. Organic Search: 17.18%
3. Direct: 16.22%
4. Social: 10.62%
5. Referral: 1.16%

Top 5 Countries (visits)
1. Sweden
2. United States
3. United Kingdom
4. Italy
5. Germany

Top 5 Browsers (all versions)
1. Chrome
2. Safari
3. Firefox
4. Internet Explorer
5. Android Browser

No surprises here really. But as a side note, I can mention that 48% of my visitors didn’t have Flash installed. Not bad …

And that’s that, a brief summary of my blog stats for 2013. Now I’m looking forward to 2014.

Share Button

It’s Time to dig Into Preprocessors

With less then 50 days left of the year I’ve set up a new goal. It’s time to start digging into preprocessors, in this case I’ve choosen Sass with Compass and my goal is to be able to create a decent demo by the end of the year. I’ll try to devote as much time as possible, but to be honest I’ll most probably not have the time to code every day. But that’s not the point really, the main reason is to learn something new and having this goal is a great start.

What I’ve done so far …
I used the Terminal (OSX) to set things up, but in retrospect, I realize it might of been smarter to use an application instead. Basically because I’m not comfortable with the Terminal and even if it’s fairly easy with the help of a guide, the application alternatives sounds more efficient. But hey, I got things up and running and that’s the main thing.

Besides this, I’ve been reading through the Sass Documentation, fiddling around with some code examples, basically just to get a grip of what it’s all about.

It’s now 48 days left …

Share Button

How to maintain the end state in a CSS Animation

One thing I’ve noticed is that when it comes to CSS Animations a commonly asked question is how you persist the end state. So I thought a short blog post answering that question might be helpful. The following demo shows a div moving from left: 25px; to left: 300px;. Once it’s complete, it returns to its initial state.

Demo

HTML

<div class="movingbox"></div>

CSS

.movingbox {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    background: #222;
    border-radius: 5px;
    -webkit-animation: move 5s ease-in-out;
            animation: move 5s ease-in-out;
}

@-webkit-keyframes move {
    100% {
        left: 300px;
    }
}

@keyframes move {
    100% {
        left: 300px;
    }
}

Now, let’s say that we want the animation to stop at 100%, persisting the div at left: 300px;, how would we do?

Easy, just add animation-fill-mode: forwards; and the final property defined in the last keyframe rule will be maintained.

In this case, like this:

-webkit-animation: move 5s ease-in-out forwards;
        animation: move 5s ease-in-out forwards;

Here’s an updated demo.

And that’s it, hope this helped!

Share Button

Web Development Tools and Resources

First of all, I’m not a web developer, at least not professionally. But I spend a lot of my spare time digging into code. I do this for two reasons.

1) I work in the eCommerce industry with Conversion Rate Optimization, Analytics, SEO/SEM, WCM and other Marketing and Sales related tasks. This means that a lot of the decisions I make, most probably will affect a web developer in the end, so the least I can do is to understand their reality as much as possible, which hopefully leads to a more efficient process where we minimize the risk of misunderstanding each other.

2) It’s also really interesting and fun, which of course makes it easier to find the time for it.

With that said, I thought that a post with the most common resources that I use might be interesting.

Mozilla Developer Network
A wiki and great resource containing courses, demos, blog posts and more …

Codecademy
Interactive courses covering a lot of different languages. I’m currently going through the JavaScript parts which are educational and challenging.

StackOverflow
StackOverflow is a gamification based Q/A site for programmers. Whether you’re answering, asking or just browsing through the questions you’ll learn something new. My favorite resource!

Can I use
If (when) you need to know the browser support for a specific HTML5 or CSS3 feature caniuse.com has you covered. This is a great site and it’s always up to date.

CodePen
A web based text editor where you can share what you’ve created with others. It’s also a great website if you just want to get inspired. It’s packed with brilliant and amazing demos!

JSFiddle
This is also a web based text editor. I use it for building small code snippets and when I need to share code with others, in general when I need help figuring out a bug (or two).

Update 2013-10-20
ColorZilla
Realized I should add this site as well. A clever, useful and easy tool for generating gradients.

There are of course tons of other websites and resources out there, but these are the ones I use on a daily basis.

Share Button