From HTTP to HTTPS 🔒

The content on this site is now served over HTTPS, meaning that all communication between your browser and this website should be encrypted, using Rapid SSL as certificate provider.

The switch was fairly easy since a lot of the setup was automatically handled by my web hotel, but some things needed manual work, like updating internal links and moving the media library from a subdomain to /wp-content/uploads/

I used a tool called SSL Check by JitBit to crawl the site, making sure all images, scripts and CSS files are retrieved over HTTPS.

Except bumping up the security, the switch should also give the site a minor ranking boost on Google. I’ll keep an extra eye on the Search Console and GA and report back if I see any changes and maybe you can report back if you find any broken links or other errors breaking the SSL-certificate?

Thank you!

AMP (Accelerated Mobile Pages)

There’s been a lot of buzz around the AMP Project lately, especially outside the development community. One reason for this is the news that Google will prioritize AMP pages over mobile apps in mobile search results. Site owners, SEO experts, digital marketers and so on are all trying figure out how to approach this. Me included. So I do what I usually do when I want to understand something technical related – I get my “hands dirty”, which in this case means building a web site using the AMP approach.

Web Site
www.spaghetticode.se

There is not much to see at the moment (2016-09-30). So far it’s a basic AMP page, with some basic styling and analytics. Most of it is pretty straight forward, except that external stylesheets are not permitted and adding Google Analytics is a bit different to the usual approach. You can’t for example just copy and paste the tracking code – it requires a different set up.

I won’t go into any more details, instead I’ve added a bunch of useful link if you are interested in learning more.

AMP Project
AMP in Mobile Search Results
AMP Analytics

A Simple To-Do List

I feel pretty confident when it comes to HTML(5) and CSS(3), but when it comes to JavaScript I’ve always found myself pretty lost. Sure, I can write small snippets, modify a code block hear and there, but I’ve never really drilled any deeper. But a couple of month back I decided it was time to take on the challenge by signing up on Treehouse. I’ve worked myself through two courses so far and I must say that I’m really impressed how professional the content is. Each course have been very easy to follow.

Anyway. After these two courses I felt it was time for a break to see what I could come up with on my own. So I decided to create a to-do list. I know, how original of me …

I kept the scope small.
– It had to be possible to add and remove items from a list.
– Each item should be stored, even when the tab or browser is closed.
– No design requirements other then it should look like a to-do list.
– The code had to pass jshint validation.

Demo:

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

Since this isn’t a tutorial I won’t go into detail on how it was created. Feel free to look at the code if you want. But there is one tricky part I want to touch upon in this post. How I solved storing …

Since the to-do list would be more or less useless if the items weren’t stored I had to find a solution for this. My first thought was to use cookies, but after some reading I choose to use local storage instead. Local storage lets you store data, locally, in the browser. Simple and clever, but there are security implications with this approach, which you can read about here. I also might add that my solution isn’t fully optimized and there are surely better ways to do this.

Looking at the importent parts in the code

Before we jump into the code I just want to add what happens when you enter a text into the input field and click add.

1. A list item is created.
2. The value from the input field is stored in an array called ‘listBucket’.
3. The function storage() is executed.

The storage() function is pretty straight forward. When the function executes it stores the array. One thing to point out though is that you can only save strings into local storage which is why I’ve used JSON.stringify. The principle is pretty much the same when you delete an item. The deleted item gets removed from the array and the storage() function is run again.

    // Stores the array 'listBucket' in localStorage.

    function storage() {
        localStorage.setItem('savedItems', JSON.stringify(listBucket));
    }

The next part is how I restore the data. If you for example reload the to-do list the function printStorage() is run. This function gets the data and prints out the list items one by one using a for loop.

// Creates a list of what's stored in localStorage. 

function printStorage() {
    var getData = localStorage.getItem('savedItems');
    var items2 = JSON.parse(getData);

    for (var i = 0; i < items2.length; i++) {
        var li = document.createElement('li');
        listBucket.push(items2[i]);

        li.appendChild(document.createTextNode(items2[i]));
        todoList.appendChild(li);
        li.setAttribute('id', 'list' + i);

        li.onclick = itemDone;
        console.log(listBucket);
    }
}

And that’s about it. Like I said, this wasn’t a tutorial and there are better ways to solve this so please don’t use this code in a live environment.

My quest to learn JavaScript continues …

Singel HTML Element Heart

Since it is Valentine’s Day. Here’s a single HTML element of a heart that I’ve created.

See the Pen CSS Heart (Single element) by Christofer Vilander (@c_vilander) on CodePen.

HTML

<div class="heart"></div>

Without going into any details. What makes it possible to create a shape like this, with just one HTML element, is the use of the :before and :after pseudo-elements.

CSS

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.heart {
  position: absolute;
  left: -50px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 100px;
  background: transparent;
  border-top-left-radius: 950px;
  border-bottom-left-radius: 1300px;
  transform: skew(0deg,15deg);
  box-shadow: rgba(230, 76, 69, 0.8) -7px -3px 10px -2px;
}

.heart:before {
  position: absolute;
  top: -18px;
  left: 62px;
  width: 100%;
  height: 100%;
  content: '';
  background: inherit;
  border-top-right-radius: 950px;
  border-bottom-right-radius: 1300px;
  transform: skew(0deg,-30deg);
  box-shadow: rgba(230, 76, 69, 0.8) 7px -3px 10px -2px;                       
}

.heart:after {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 0%;
  height: 0%;
  content: '#';
  color: #000;
  font-size: 70px;
  transform: skew(-1deg,-15deg);
  text-shadow: 72px 4px 3px rgba(230, 76, 69, 0.8);
}

‘Play’ and ‘Reverse’ an Animation

As a part of the Web Animations spec, Chrome 39 has added a set of playback control features which, for example, makes it possible to pause(), and reverse() web animations. Interesting of course, and since I’ve written a post where I played around with the element.animate() function I had to give this a try as well.

But please note that this isn’t a tutorial and the demo might contain errors since it’s created in experimental purpose.

Basically what I’ve done is an animation that you can play and reverse. Make sure that you are using Chrome 39+ when you view the demo.

Demo

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

JS

(function () {
   
    var box = document.getElementById('box'),
        start = document.getElementById('start'),
        reverse = document.getElementById('reverse');
 
    start.addEventListener('click', function() {
 
        var player = box.animate([{
            transform: 'rotate(0deg)' + 'scale(1.0)'
        }, {
            transform: 'rotate(180deg)' + 'scale(1.4)'
        }, {
            transform: 'rotate(360deg)' + 'scale(1.0)'
        }
 
        ], {
        duration: 1000,
        iterations: 1
             
        });
          reverse.addEventListener('click', function() {
          player.reverse();
    }, false);
 
    }, false);
    
})();

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.

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 or https://developer.mozilla.org

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

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 …

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 to stop a CSS animation at 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.

Update 2015-05-21
Chrome 43 now lets you use CSS animations without the -webkit prefix.

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!