iOS Development Part 2

I’ve spent the last couple of weeks working my way through the ‘Swift Collections and Control Flow’ course over at Treehouse, and besides that I’ve worked on my app. Basically just to put my knowledge into practise.

The app is still very simple and I haven’t added any new features really, other than it now uses a TableView to present the items and the delete button is gone. Instead, I’ve added functionality that lets you swipe to delete an item.

ToDoApp0.5
The app in action.

The app might be simple, but I can’t say that its been simple to build. One thing that had me lost was figuring out the difference in using a UITableView within a UIViewController instead of just a UITableViewController. And to answer that question I’ll make it simple by linking to this thread over at Stack Overflow.

Another issue I had was that the text that I entered never showed up in the list. I could see that they got stored in the array, but for some reason they wouldn’t show up. But the solution wasn’t far away. I solved it by reloading the UITableView each time an item was added.

    @IBAction func addTask(sender: AnyObject) {
        
        toDoList.append(task.text!)
        print(toDoList)
        table.reloadData()
    }

And last but not least. During the development process I experienced the iOS Simulator to be slow, really slow. I didn’t understand why, and my first guess was that I was running to many programs at a time and that my computer couldn’t cope. But after some searches on google it turned out that I’ve mistakenly hit cmd-t which apparently enabled slow-motion animations. :)

Share This:

Short post …

The bounce rate on this post will most probably be at 100%. Why? Well, I have nothing to say. I just wanted to try WP from my iPhone …

Share This:

iOS Development Part 1

There hasn’t been much coding lately, there’s basically been too much other things todo. But I haven’t been completely away from the text editor, or too be more specific, the IDE. As you may know I’ve been working myself through the JavaScript courses over at treehouse.com, but since a couple of month back, I took a break from JavaScript and switched focus to some iOS development instead. Xcode (the IDE) and Swift (the language) is a completely new environment for me, so it’s been challenging.

So far I’ve only scratched the surface and I haven’t been able to create anything of value other than a really simple todo-list app.

todolist
My first ever iOS App in production.

Next step is to dive into the Swift 2.0 course and then try to add some features to the todo list app.

Share This:

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 …

Share This:

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);
}

Share This:

‘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);
    
})();

Share This:

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 This:

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 This:

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

Share This:

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 This: