feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>CatCyb.org Logs</title>
  <subtitle>Written by an Engineer</subtitle>
  <id>http://nyan.catcyb.org/</id>
  <link href="http://nyan.catcyb.org/"/>
  <link href="http://nyan.catcyb.org/feed.xml" rel="self"/>
  <updated>2014-08-03T07:00:00+07:00</updated>
  <author>
    <name>CatCyborg</name>
  </author>
  <entry>
    <title>Rolling Your Own Loading Indicator Using Core Animation</title>
    <link rel="alternate" href="/2014/08/03/rolling-your-own-loading-indicator-using-core-animation/"/>
    <id>/2014/08/03/rolling-your-own-loading-indicator-using-core-animation/</id>
    <published>2014-08-03T07:00:00+07:00</published>
    <updated>2014-08-03T07:00:00+07:00</updated>
    <author>
      <name>CatCyborg</name>
    </author>
    <summary type="html">&lt;p&gt;If you're bored seeing that default &lt;code&gt;UIActivityIndicator&lt;/code&gt; over and over again, it is time to create your own activity indicator. You might think rolling your own activity indicator is a huge hassle. In reality, a loading indicator is made of combination...&lt;/p&gt;</summary>
    <content type="html">&lt;p&gt;If you&amp;#39;re bored seeing that default &lt;code&gt;UIActivityIndicator&lt;/code&gt; over and over again, it is time to create your own activity indicator. You might think rolling your own activity indicator is a huge hassle. In reality, a loading indicator is made of combination of shapes being animated. This can be done in your iOS code without animated gif or fancy video!&lt;/p&gt;

&lt;p&gt;Generally, you will need to have some mockups in mind, decompose the shapes and animation, then create the implementation. As an example, we&amp;#39;ll dabble with &lt;code&gt;Core Animation&lt;/code&gt; (pure iOS codes!) to make our loading indicator.&lt;/p&gt;

&lt;h2&gt;Setting Up the Loading Indicator Class&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;How do we decide necessary the abilities of our loading indicator?&lt;/strong&gt; Let&amp;#39;s mimic &lt;code&gt;UIActivityIndicator&lt;/code&gt; class definition to provide the properties and methods needed for our loading indicator.&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="k"&gt;@interface&lt;/span&gt; &lt;span class="nc"&gt;MyLoadingIndicatorView&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;UIView&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;readonly&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;getter&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;isAnimating&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;BOOL&lt;/span&gt; &lt;span class="n"&gt;animating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;startAnimating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;stopAnimating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@end&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;The &lt;code&gt;startAnimating&lt;/code&gt; method initiates infinite animation of the indicator. The &lt;code&gt;stopAnimating&lt;/code&gt; method terminates the infinite animation, preferably using some animation too. The &lt;code&gt;animating&lt;/code&gt; property explains the indicator state whether it is indeed animating.&lt;/p&gt;

&lt;h2&gt;&lt;s&gt;Creating&lt;/s&gt; Copying a Loading Indicator (from QuizUp)&lt;/h2&gt;

&lt;div style="text-align: center; margin-top: 1em;"&gt;
  &lt;a href="http://cl.ly/2u1O241x2t2c/QULoadingIndicatorView.mov" target="_blank" alt="A Replica of QuizUp Loading Indicator"&gt;
    &lt;img src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/QULoadingIndicatorView.gif" alt="A Replica of QuizUp Loading Indicator" class="no-border" /&gt;
  &lt;/a&gt;
  &lt;p style="font-style: italic; font-size: 0.9em;"&gt;A Replica of QuizUp Loading Indicator&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;When I saw &lt;a href="https://www.quizup.com/en"&gt;QuizUp&lt;/a&gt; for the first time, I found its loading indicator really interesting! The indicator consists of two main &lt;strong&gt;shapes&lt;/strong&gt;: &lt;em&gt;circles&lt;/em&gt; and &lt;em&gt;triangles&lt;/em&gt;. By observing, we can find that...&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The &lt;em&gt;circles&lt;/em&gt; scale in turns, changing colors based on an array of colors, cycling back when reaching the end of array.&lt;/li&gt;
&lt;li&gt;The thunder consists of two &lt;em&gt;triangles&lt;/em&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Is everything doable in code? Yes! We can draw the shapes above using &lt;code&gt;CALayer&lt;/code&gt;, and perform the animation using &lt;code&gt;CAAnimation&lt;/code&gt;. Here are overall steps.&lt;/p&gt;

&lt;h3&gt;1. Creating a Container View for Both Shapes&lt;/h3&gt;

&lt;p&gt;&lt;img title="The Container View" alt="The Container View" src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/1-the-container-view.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Constraints for the container view:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Top: 120&lt;/li&gt;
&lt;li&gt;Width: 100&lt;/li&gt;
&lt;li&gt;Height: 100&lt;/li&gt;
&lt;li&gt;Horizontal Center in Container: 0 (Centered Horizontally)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img title="The Container View Constraints" alt="The Container View Constraints" src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/1-the-container-view-constraints.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Let&amp;#39;s call this container view &lt;code&gt;QULoadingIndicatorView&lt;/code&gt;. We need it because of the following reasons.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;For sake of sanity, the animating circles should be grouped together and separated from the thunder.&lt;/li&gt;
&lt;li&gt;The thunder shape can have different &lt;code&gt;CGRect&lt;/code&gt; size from the circles.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;// QULoadingIndicatorView.h
&lt;/span&gt;&lt;span class="k"&gt;@interface&lt;/span&gt; &lt;span class="nc"&gt;QULoadingIndicatorView&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;UIView&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;readonly&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;getter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;isAnimating&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;BOOL&lt;/span&gt; &lt;span class="n"&gt;animating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;startAnimating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;stopAnimating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@end&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;In the loading indicator implementation file, we will put empty methods for now. These empty methods will forward to our shapes later, once they are ready.&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="cp"&gt;#import "QUThunderView.h"
&lt;/span&gt;
&lt;span class="k"&gt;@interface&lt;/span&gt; &lt;span class="nc"&gt;QULoadingIndicatorView&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="k"&gt;@end&lt;/span&gt;

&lt;span class="k"&gt;@implementation&lt;/span&gt; &lt;span class="nc"&gt;QULoadingIndicatorView&lt;/span&gt;

&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;awakeFromNib&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;super&lt;/span&gt; &lt;span class="nf"&gt;awakeFromNib&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;setColors&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Sets colors of animating circles
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Returns colors of animating circles
&lt;/span&gt;    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BOOL&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;isAnimating&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Returns animation status of the animating circles
&lt;/span&gt;    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;NO&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;startAnimating&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Start animating circles and set thunder to be visible
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;stopAnimating&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Stop animating circles and set thunder to be invisible
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;@end&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;h3&gt;2. Animating Circles&lt;/h3&gt;

&lt;p&gt;Let&amp;#39;s prepare a view for the animating circles, &lt;code&gt;QUAlternatingCirclesView&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;img title="The Alternating Circles View" alt="The Alternating Circles View" src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/2-the-circles.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Constraints for the alternating circles view (to fill the container):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Top: 0&lt;/li&gt;
&lt;li&gt;Left: 0&lt;/li&gt;
&lt;li&gt;Right: 0&lt;/li&gt;
&lt;li&gt;Bottom: 0&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img title="The Alternating Circles View Constraints" alt="The Alternating Circles View Constraints" src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/2-the-circles-constraints.png?1433645361" /&gt;&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="k"&gt;@interface&lt;/span&gt; &lt;span class="nc"&gt;QUAlternatingCirclesView&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;UIView&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;readonly&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;getter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;isAnimating&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;BOOL&lt;/span&gt; &lt;span class="n"&gt;animating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;startAnimating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;stopAnimating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@end&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;div style="text-align: center; margin-top: 1em;"&gt;
  &lt;a href="http://cl.ly/2u1O241x2t2c/QULoadingIndicatorView.mov" target="_blank" alt="A Replica of QuizUp Loading Indicator"&gt;
    &lt;img src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/QULoadingIndicatorView.gif" alt="A Replica of QuizUp Loading Indicator" class="no-border" /&gt;
  &lt;/a&gt;
  &lt;p style="font-style: italic; font-size: 0.9em;"&gt;A Replica of QuizUp Loading Indicator&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;Let&amp;#39;s observe the animation again. When &lt;code&gt;startAnimating&lt;/code&gt; is invoked, the circles are scaled alternately from 0 to its container size, 100x100. This means we do scale transform from 0 to identity on each of the circles.&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;// Circle shape
&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;colorLayerIndex&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;colorIndex&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="nf"&gt;CGColor&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;frame&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;masksToBounds&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;YES&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cornerRadius&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;frame&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CATransform3DMakeScale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt; &lt;span class="nf"&gt;addSublayer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="c1"&gt;// Scale animation
&lt;/span&gt;&lt;span class="n"&gt;NSTimeInterval&lt;/span&gt; &lt;span class="n"&gt;duration&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;CABasicAnimation&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CABasicAnimation&lt;/span&gt; &lt;span class="nf"&gt;animationWithKeyPath&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s"&gt;@"transform"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;timingFunction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CAMediaTimingFunction&lt;/span&gt; &lt;span class="nf"&gt;functionWithName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;kCAMediaTimingFunctionEaseOut&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fromValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;NSValue&lt;/span&gt; &lt;span class="nf"&gt;valueWithCATransform3D&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;CATransform3DMakeScale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)];&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;toValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;NSValue&lt;/span&gt; &lt;span class="nf"&gt;valueWithCATransform3D&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;CATransform3DIdentity&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;duration&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;removedOnCompletion&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;NO&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fillMode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;kCAFillModeForwards&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;delegate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayer&lt;/span&gt; &lt;span class="nf"&gt;addAnimation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt; &lt;span class="nf"&gt;forKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;keyPath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;The nagging question that popped to my head was how many &lt;code&gt;CALayer&lt;/code&gt; is needed to make smooth alternating circles. We don&amp;#39;t need layers as many as the colors. Imagine if we want to have 100 colors; having 100 layers is a little bit overkill.&lt;/p&gt;

&lt;p&gt;Now let&amp;#39;s change the question. How many is the least number of layers we need? We know at least there should be at least 2 (it can be 3 or more though), because we see that one acts as the background, and another one is animating.&lt;/p&gt;

&lt;h4&gt;Experiment 1: Two Instances of CALayer (Back and Animating Layers)&lt;/h4&gt;

&lt;p&gt;After the first layer is scaled from 0 to its original size, the second layer should immediately scale from 0 to its original size. After the second layer is scaled, the first one is swapped immediately to be on top of the second one. Unfortunately, during this swapping process, the loading indicator looks &lt;strong&gt;blinking&lt;/strong&gt;. This gives the impression that the animation is not smooth...&lt;/p&gt;

&lt;h4&gt;Experiment 2: Three Instances of CALayer (Back, Animating, and Front Layers)&lt;/h4&gt;

&lt;p&gt;This approach is a superset of the first experiment. In addition to the two layers, we have a third layer behind the second layer.&lt;/p&gt;

&lt;p&gt;We will still have the same mechanism as experiment 1. The difference is, after the first layer is send to back of all layers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the second layer acts as the first layer&lt;/li&gt;
&lt;li&gt;the third layer acts as the second layer&lt;/li&gt;
&lt;li&gt;the first layer acts as the third layer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In other words, regardless of the layers&amp;#39; sequence, we always have animating, front, and back color layers.&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="k"&gt;@interface&lt;/span&gt; &lt;span class="nc"&gt;QUAlternatingCirclesView&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;getter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;isAnimating&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;BOOL&lt;/span&gt; &lt;span class="n"&gt;animating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;readonly&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;backColorLayer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;readonly&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;readonly&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;frontColorLayer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;nextColorIndex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;


&lt;span class="k"&gt;@end&lt;/span&gt;

&lt;span class="k"&gt;@implementation&lt;/span&gt; &lt;span class="nc"&gt;QUAlternatingCirclesView&lt;/span&gt;

&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;backColorLayer&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;backLayerIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;backLayerIndex&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;backLayerIndex&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;backLayerIndex&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayer&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;animatingColorLayerIndex&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;frontColorLayer&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;frontLayerIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;frontLayerIndex&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// ...
&lt;/span&gt;
&lt;span class="k"&gt;@end&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;We also have to make sure that the colors assigned to those layers are in sequence of colors given by &lt;code&gt;QULoadingIndicatorView&lt;/code&gt;.&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;// QUAlternatingCirclesView.m
&lt;/span&gt;
&lt;span class="k"&gt;@implementation&lt;/span&gt; &lt;span class="nc"&gt;QUAlternatingCirclesView&lt;/span&gt;

&lt;span class="c1"&gt;// ...
&lt;/span&gt;
&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;startAnimating&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;prepareLayers&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animating&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;YES&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;animateFirst&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// ...
&lt;/span&gt;
&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;prepareLayers&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="nf"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="nf"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="nf"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;]];&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;clipsToBounds&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;YES&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="n"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;colorsCount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;colorIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;colorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;colorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;colorLayerIndex&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;colorLayerIndex&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;colorIndex&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="nf"&gt;colorsCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="nf"&gt;CGColor&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;frame&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;masksToBounds&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;YES&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cornerRadius&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;frame&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CATransform3DMakeScale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt; &lt;span class="nf"&gt;addSublayer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="n"&gt;colorIndex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;animateFirst&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nextColorIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;animateColor&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;animateNext&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;backColorLayer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;backColorLayer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;backColorLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CATransform3DMakeScale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;layer&lt;/span&gt; &lt;span class="nf"&gt;addSublayer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;backColorLayer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;frontColorLayer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;frontColorLayer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;frontColorLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CATransform3DMakeScale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;frontColorLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nextColorIndex&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="nf"&gt;CGColor&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayerIndex&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nextColorIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nextColorIndex&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colors&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;animateColor&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;animateColor&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;NSTimeInterval&lt;/span&gt; &lt;span class="n"&gt;duration&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;CABasicAnimation&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CABasicAnimation&lt;/span&gt; &lt;span class="nf"&gt;animationWithKeyPath&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s"&gt;@"transform"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;timingFunction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CAMediaTimingFunction&lt;/span&gt; &lt;span class="nf"&gt;functionWithName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;kCAMediaTimingFunctionEaseOut&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fromValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;NSValue&lt;/span&gt; &lt;span class="nf"&gt;valueWithCATransform3D&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;CATransform3DMakeScale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)];&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;toValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;NSValue&lt;/span&gt; &lt;span class="nf"&gt;valueWithCATransform3D&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;CATransform3DIdentity&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;duration&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;removedOnCompletion&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;NO&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fillMode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;kCAFillModeForwards&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;delegate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;animatingColorLayer&lt;/span&gt; &lt;span class="nf"&gt;addAnimation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt; &lt;span class="nf"&gt;forKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;keyPath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="cp"&gt;#pragma mark - CAAnimationDelegate
&lt;/span&gt;
&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;animationDidStop&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;CAAnimation&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;anim&lt;/span&gt; &lt;span class="n"&gt;finished&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BOOL&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;finished&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;finished&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;isAnimating&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;animateNext&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;CALayer&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;colorLayer&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;colorLayers&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;colorLayer&lt;/span&gt; &lt;span class="nf"&gt;removeFromSuperlayer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;@end&lt;/span&gt;

&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;The result of experiment 2 is smoother alternating circles than that of experiment 1.&lt;/p&gt;

&lt;div style="text-align: center; margin-top: 1em;"&gt;
  &lt;a href="http://cl.ly/2u1O241x2t2c/QULoadingIndicatorView.mov" target="_blank" alt="A Replica of QuizUp Loading Indicator"&gt;
    &lt;img src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/QULoadingIndicatorView.gif" alt="A Replica of QuizUp Loading Indicator" class="no-border" /&gt;
  &lt;/a&gt;
  &lt;p style="font-style: italic; font-size: 0.9em;"&gt;A Replica of QuizUp Loading Indicator&lt;/p&gt;
&lt;/div&gt;

&lt;h3&gt;3. Making the Thunder Using Triangles&lt;/h3&gt;

&lt;p&gt;Prepare &lt;code&gt;QUThunderLayer&lt;/code&gt; for displaying the thunder.&lt;/p&gt;

&lt;p&gt;&lt;img title="The Thunder View" alt="The Thunder View" src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/3-the-thunder.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Constraints for the alternating thunder view (to make it look okay on top of the circles):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Top: 20&lt;/li&gt;
&lt;li&gt;Left: 30&lt;/li&gt;
&lt;li&gt;Right: 30&lt;/li&gt;
&lt;li&gt;Bottom: 20&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img title="The Thunder View Constraints" alt="The Thunder View Constraints" src="/images/2014-08-03-rolling-your-own-loading-indicator-using-core-animation/3-the-thunder-constraints.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;The thunder consist of one triangle on the left and another one on the right. We can use two &lt;code&gt;UIBezierPath&lt;/code&gt; to create the two triangles.&lt;/p&gt;
&lt;div class="highlight objective_c"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;// QUThunderView.m
&lt;/span&gt;
&lt;span class="c1"&gt;// ...
&lt;/span&gt;
&lt;span class="k"&gt;@implementation&lt;/span&gt; &lt;span class="nc"&gt;QUThunderLayer&lt;/span&gt;

&lt;span class="c1"&gt;// ...
&lt;/span&gt;
&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;setupLeftTriangle&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;leftTriangleLayer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CAShapeLayer&lt;/span&gt; &lt;span class="nf"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;leftTriangleLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fillColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;UIColor&lt;/span&gt; &lt;span class="nf"&gt;whiteColor&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;CGColor&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;UIBezierPath&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;UIBezierPath&lt;/span&gt; &lt;span class="nf"&gt;bezierPath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="n"&gt;CGFloat&lt;/span&gt; &lt;span class="n"&gt;minX&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;minY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;CGFloat&lt;/span&gt; &lt;span class="n"&gt;maxX&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CGRectGetMidX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;CGFloat&lt;/span&gt; &lt;span class="n"&gt;maxY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CGRectGetMaxY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;66&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;moveToPoint&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="n"&gt;CGPoint&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="n"&gt;maxX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;minY&lt;/span&gt;&lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;addLineToPoint&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="n"&gt;CGPoint&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="n"&gt;maxX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;maxY&lt;/span&gt;&lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;addLineToPoint&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="n"&gt;CGPoint&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="n"&gt;minX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;maxY&lt;/span&gt;&lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;closePath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;leftTriangleLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;triangle&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;CGPath&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;addSublayer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;leftTriangleLayer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;setupRightTriangle&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rightTriangleLayer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;CAShapeLayer&lt;/span&gt; &lt;span class="nf"&gt;layer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rightTriangleLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fillColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;UIColor&lt;/span&gt; &lt;span class="nf"&gt;whiteColor&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;CGColor&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="n"&gt;UIBezierPath&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;UIBezierPath&lt;/span&gt; &lt;span class="nf"&gt;bezierPath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="n"&gt;CGFloat&lt;/span&gt; &lt;span class="n"&gt;minX&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CGRectGetMidX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="n"&gt;minY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CGRectGetMaxY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;33&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;CGFloat&lt;/span&gt; &lt;span class="n"&gt;maxX&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CGRectGetMaxX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;CGFloat&lt;/span&gt; &lt;span class="n"&gt;maxY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;CGRectGetMaxY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bounds&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;moveToPoint&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="n"&gt;CGPoint&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="n"&gt;minX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;minY&lt;/span&gt;&lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;addLineToPoint&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="n"&gt;CGPoint&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="n"&gt;maxX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;minY&lt;/span&gt;&lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;addLineToPoint&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="n"&gt;CGPoint&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="n"&gt;minX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;maxY&lt;/span&gt;&lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triangle&lt;/span&gt; &lt;span class="nf"&gt;closePath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rightTriangleLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;triangle&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;CGPath&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt; &lt;span class="nf"&gt;addSublayer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rightTriangleLayer&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;@end&lt;/span&gt;


&lt;span class="k"&gt;@implementation&lt;/span&gt; &lt;span class="nc"&gt;QUThunderView&lt;/span&gt;

&lt;span class="k"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;awakeFromNib&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;super&lt;/span&gt; &lt;span class="nf"&gt;awakeFromNib&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="c1"&gt;// Add an instance of QUThunderLayer to this view's layer
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;@end&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;h2&gt;Full Source Code&lt;/h2&gt;

&lt;p&gt;The rest of the details (like implementation details of &lt;code&gt;stopAnimating&lt;/code&gt; and &lt;code&gt;QULoadingIndicatorView&lt;/code&gt;) are available as full source code in &lt;a href="http://git.io/CyQvSw"&gt;this GitHub repository&lt;/a&gt;. Feel free to run the project to play around with the loading indicator. If you want to use it, copy &lt;code&gt;QULoadingIndicatorView.*&lt;/code&gt;, &lt;code&gt;QUThunderView.*&lt;/code&gt;, and &lt;code&gt;QUAlternatingCirclesView.*&lt;/code&gt; to your project.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Ways to Display Tabular Data on iOS</title>
    <link rel="alternate" href="/2013/12/04/ways-to-display-tabular-data-on-ios/"/>
    <id>/2013/12/04/ways-to-display-tabular-data-on-ios/</id>
    <published>2013-12-04T07:00:00+07:00</published>
    <updated>2013-12-04T07:00:00+07:00</updated>
    <author>
      <name>CatCyborg</name>
    </author>
    <summary type="html">&lt;p&gt;Recently, I work on an iOS app that helps its users to learn stock trading through simulation. I discovered that numbers, charts and tabular data are the most commonly used on the user interface. &lt;/p&gt;

&lt;p&gt;Well, that looks like quite a retarded discovery I...&lt;/p&gt;</summary>
    <content type="html">&lt;p&gt;Recently, I work on an iOS app that helps its users to learn stock trading through simulation. I discovered that numbers, charts and tabular data are the most commonly used on the user interface. &lt;/p&gt;

&lt;p&gt;Well, that looks like quite a retarded discovery I&amp;#39;ve ever made...&lt;em&gt;but probably not really!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;For the past 2 years, I worked on entertainment-related web/mobile apps. Usage of tiles and images are usually very prominent for this case, compare to the stock trading app.&lt;/p&gt;

&lt;p&gt;In stock trading and other finance-related areas, displaying numbers in tables is very important. These numbers are used by traders to decide quickly whether they have to buy, sell, or do nothing with certain stocks. Traders rely on Ms Excel sheets everyday; Excel is one of the best tools for them. Using Excel, they can make charts from tables, and many more.&lt;/p&gt;

&lt;p&gt;Then there are users who would like to learn to be traders. They need to get acquainted with these tools too. Numbers, tables, charts...&lt;/p&gt;

&lt;h3&gt;What are all these things have to do with displaying tabular data on iOS?&lt;/h3&gt;

&lt;p&gt;If let&amp;#39;s say we build an iOS app for these people, we do need to make sure it somewhat simulates the tools they are already familiar with. Tables in Excel are aligned, from column to rows.&lt;/p&gt;

&lt;p&gt;How can we code nicely aligned numbers on iOS? How can we make their alignments and values easy to change when we need to?&lt;/p&gt;

&lt;p&gt;For example, we want to display data that looks like the following.&lt;/p&gt;
&lt;div class="highlight plaintext"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;

  Stock Symbol: LNKD
  Price Bought: USD 300
 Current Price: USD 300
      Quantity: 10

&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;There are at least three possible approaches to implement this kind of display on iOS.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Using Static Labels (&lt;a href="http://git.io/Hbjfmg"&gt;Code on GitHub&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Using Outlet Collections of Labels (&lt;a href="http://git.io/MK5ZZw"&gt;Code on GitHub&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Using Table View (&lt;a href="http://git.io/JJsNSg"&gt;Code on GitHub&lt;/a&gt;)&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Using Static Labels&lt;/h2&gt;

&lt;p&gt;&lt;img title="Static Labels - Storyboard" alt="Static Labels - Storyboard" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/static-labels-manual-alignments.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;With this approach, number description labels are hardcoded, and number values are bound manually. All labels&amp;#39; coordinates are defined on storyboards/xibs, or perhaps hardcoded on the code.&lt;/p&gt;

&lt;p&gt;&lt;img title="Static Labels - Storyboard" alt="Static Labels - Storyboard" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/static-labels-hardcoded-bindings.png?1433645361" /&gt;&lt;/p&gt;
&lt;div class="highlight ruby"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="no"&gt;SLViewController&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;m&lt;/span&gt;

&lt;span class="c1"&gt;#import "SLViewController.h"&lt;/span&gt;

&lt;span class="vi"&gt;@interface&lt;/span&gt; &lt;span class="no"&gt;SLViewController&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;weak&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutlet&lt;/span&gt; &lt;span class="no"&gt;UILabel&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;symbolLabel&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;weak&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutlet&lt;/span&gt; &lt;span class="no"&gt;UILabel&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;priceBoughtLabel&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;weak&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutlet&lt;/span&gt; &lt;span class="no"&gt;UILabel&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;currentPriceLabel&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;weak&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutlet&lt;/span&gt; &lt;span class="no"&gt;UILabel&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;quantityLabel&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;span class="vi"&gt;@implementation&lt;/span&gt; &lt;span class="no"&gt;SLViewController&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;viewDidLoad&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt; &lt;span class="n"&gt;viewDidLoad&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="no"&gt;Hardcoded&lt;/span&gt; &lt;span class="nb"&gt;binding&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;symbolLabel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"RKUNF"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;priceBoughtLabel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"USD 15.75"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;currentPriceLabel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"USD 14.98"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;quantityLabel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"100"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img title="Static Labels - iOS Simulator" alt="Static Labels - iOS Simulator" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/static-labels-on-simulator.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;This is the first approach that probably most iOS developers can think of. Very nice for building prototypes or quickly hack something.&lt;/li&gt;
&lt;li&gt;Easy to implement at first, for very small set of labels&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Aligning labels are done manually.&lt;/strong&gt; Wow, that&amp;#39;s hard and tedious. As you can see from the screenshots above, the alignments don&amp;#39;t look quite right.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Adding or removing labels requires aligning labels manually.&lt;/strong&gt; Lots of manual work here. If there is not enough space, rearranging all the labels is necessary. Try adding a new row for &lt;code&gt;Profit/Loss: -USD 77&lt;/code&gt;, and see how long you spend to align the labels.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;UI and data binding is hardcoded.&lt;/strong&gt; If you add &lt;code&gt;Profit/Loss: -USD 77&lt;/code&gt; as a new row, most chances are that you will add two UILabel, one for &lt;code&gt;Profit/Loss:&lt;/code&gt; and &lt;code&gt;-USD 77&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;When there are set of similar data to be displayed, there is tendency to duplicate the codes and the labels&lt;/strong&gt;. This is because sharing same set of data requires more typing than copying and pasting labels with existing alignment.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="http://git.io/Hbjfmg"&gt;Feel free to download the code from GitHub.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Using Outlet Collections of Labels&lt;/h2&gt;

&lt;p&gt;&lt;img title="Outlet Collections of Labels - Manual Alignments" alt="Outlet Collections of Labels - Manual Alignments" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/outlet-collections-of-labels-manual-alignments.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;With this approach, number description labels are not hardcoded, and number values are bound dynamically. However, all the labels&amp;#39; positions are defined on storyboards/xibs, or perhaps hardcoded on the code. Overall, this is a slightly more dynamic approach than using static labels.&lt;/p&gt;

&lt;p&gt;&lt;img title="Outlet Collections of Labels - Dynamic Bindings" alt="Outlet Collections of Labels - Dynamic Bindings" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/outlet-collections-of-labels-dynamic-bindings.png?1433645361" /&gt;&lt;/p&gt;
&lt;div class="highlight ruby"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="no"&gt;OCViewController&lt;/span&gt;

&lt;span class="c1"&gt;#import "OCViewController.h"&lt;/span&gt;

&lt;span class="vi"&gt;@interface&lt;/span&gt; &lt;span class="no"&gt;OCViewController&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutletCollection&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;UILabel&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;nameLabels&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;strong&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutletCollection&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;UILabel&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;valueLabels&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;span class="vi"&gt;@implementation&lt;/span&gt; &lt;span class="no"&gt;OCViewController&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;viewDidLoad&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt; &lt;span class="n"&gt;viewDidLoad&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="no"&gt;Names&lt;/span&gt; &lt;span class="n"&gt;and&lt;/span&gt; &lt;span class="n"&gt;values&lt;/span&gt; &lt;span class="n"&gt;are&lt;/span&gt; &lt;span class="n"&gt;easily&lt;/span&gt; &lt;span class="n"&gt;modifiable&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;
    &lt;span class="no"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;names&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Symbol =&amp;gt; "&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Bought =&amp;gt; "&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Current =&amp;gt; "&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Qty =&amp;gt; "&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="no"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;values&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"LNKD"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"USD 350"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"USD 300"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"80"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;NSInteger&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;names&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="p"&gt;[(&lt;/span&gt;&lt;span class="no"&gt;UILabel&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;nameLabels&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="n"&gt;setText&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;names&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]];&lt;/span&gt;
        &lt;span class="p"&gt;[(&lt;/span&gt;&lt;span class="no"&gt;UILabel&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;valueLabels&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="n"&gt;setText&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;values&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]];&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img title="Outlet Collections of Labels - iOS Simulator" alt="Outlet Collections of Labels - iOS Simulator" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/outlet-collections-of-labels-on-simulator.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Changing labels only requires changing the code (the name and value arrays)&lt;/strong&gt;; storyboards/xibs don&amp;#39;t need to be modified.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Sharing similar set of row data is a little bit easier than the static labels approach.&lt;/strong&gt; Imagine if you have similar kind of table somewhere and you want to use the same calculations for the values.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Aligning labels are still done manually.&lt;/strong&gt; Good luck with that!&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Adding or removing labels still requires aligning labels manually.&lt;/strong&gt; If there is not enough space, you will need to rearrange all the labels by hand again...&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;When there are set of similar data to be displayed, there is tendency to duplicate the labels&lt;/strong&gt;. Notice that it&amp;#39;s a little bit cleaner here than in the previous way; here there&amp;#39;s less tendency to copy the codes...but duplicating the labels is still pretty bad, especially if there&amp;#39;s a way not to do so.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="http://git.io/MK5ZZw"&gt;Feel free to download the code from GitHub.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Using Table View&lt;/h2&gt;

&lt;p&gt;&lt;img title="Table View" alt="Table View" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/table-view.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;In this approach, we view each row as a UITableViewCell that has a left label and a right label. The left and right label data are stored in a 2d array of row name and value pairs. This is so far the most flexible way, compare to the other two approaches.&lt;/p&gt;

&lt;p&gt;&lt;img title="Table View - Dynamic Bindings" alt="Table View - Dynamic Bindings" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/table-view-dynamic-bindings.png?1433645361" /&gt;&lt;/p&gt;
&lt;div class="highlight ruby"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="no"&gt;TVViewController&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;m&lt;/span&gt;

&lt;span class="c1"&gt;#import "TVRowTableViewCell.h"&lt;/span&gt;
&lt;span class="c1"&gt;#import "TVViewController.h"&lt;/span&gt;

&lt;span class="vi"&gt;@interface&lt;/span&gt; &lt;span class="no"&gt;TVViewController&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;
    &lt;span class="no"&gt;UITableViewDataSource&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="no"&gt;UITableViewDelegate&lt;/span&gt;
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="vi"&gt;@property&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;weak&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nonatomic&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="no"&gt;IBOutlet&lt;/span&gt; &lt;span class="no"&gt;UITableView&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;span class="vi"&gt;@implementation&lt;/span&gt; &lt;span class="no"&gt;TVViewController&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;viewDidLoad&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt; &lt;span class="n"&gt;viewDidLoad&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tableData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
                       &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
                         &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Stock Symbol:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"LNKD"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
                         &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Price Bought:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"USD 300"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
                         &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Current Price:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"USD 300"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
                         &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Quantity:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"10"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
                        &lt;span class="p"&gt;],&lt;/span&gt;
                       &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
                         &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"Profit/Loss:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"0"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
                         &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"ROI:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"0%"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
                        &lt;span class="p"&gt;]&lt;/span&gt;
                      &lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="n"&gt;dummy&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;#pragma mark - UITableViewDataSource&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;NSInteger&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;numberOfSectionsInTableView&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;UITableView&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tableData&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;NSInteger&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;UITableView&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt; &lt;span class="n"&gt;numberOfRowsInSection&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;NSInteger&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;section&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tableData&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;section&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;UITableViewCell&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;UITableView&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt; &lt;span class="n"&gt;cellForRowAtIndexPath&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;NSIndexPath&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;indexPath&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;static&lt;/span&gt; &lt;span class="no"&gt;NSString&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;cellIdentifier&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="s2"&gt;"TVRowTableViewCell"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="no"&gt;TVRowTableViewCell&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;cell&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt; &lt;span class="n"&gt;dequeueReusableCellWithIdentifier&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;cellIdentifier&lt;/span&gt; &lt;span class="n"&gt;forIndexPath&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;indexPath&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;cell&lt;/span&gt; &lt;span class="n"&gt;bindRowData&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tableData&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;indexPath&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;section&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="n"&gt;indexPath&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;row&lt;/span&gt;&lt;span class="p"&gt;]];&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;cell&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;#pragma mark - UITableViewDelegate&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;UIView&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;UITableView&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;tableView&lt;/span&gt; &lt;span class="n"&gt;viewForFooterInSection&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;NSInteger&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;section&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="no"&gt;UIView&lt;/span&gt; &lt;span class="n"&gt;alloc&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="n"&gt;initWithFrame&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="no"&gt;CGRectZero&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img title="Table View - Row" alt="Table View - Row" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/table-view-row.png?1433645361" /&gt;&lt;/p&gt;
&lt;div class="highlight ruby"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10
11
12
13&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="sr"&gt;//&lt;/span&gt; &lt;span class="no"&gt;TVRowTableViewCell&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;m&lt;/span&gt;

&lt;span class="c1"&gt;#import "TVRowTableViewCell.h"&lt;/span&gt;

&lt;span class="vi"&gt;@implementation&lt;/span&gt; &lt;span class="no"&gt;TVRowTableViewCell&lt;/span&gt;

&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;bindRowData&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="no"&gt;NSArray&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="n"&gt;rowData&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;leftLabel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;rowData&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;rightLabel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;rowData&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="vi"&gt;@end&lt;/span&gt;

&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img title="Table View - iOS Simulator" alt="Table View - iOS Simulator" src="/images/2013-12-04-ways-to-display-tabular-data-on-ios/table-view-on-simulator.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pros:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Align the cell once, and its alignment is applied for the rest of the table rows.&lt;/strong&gt; Compare this to the previous two approaches where you have to align all labels manually.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Adding more name value pairs only requires code change&lt;/strong&gt;; storyboard/xib changes are not required.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;There is less tendency to copy-paste labels than the previous two approaches.&lt;/strong&gt; When you need to display this thing elsewhere, similar data -&amp;gt; Can share data+calculation at least&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;This approach gives the least number among the possible three approaches&lt;/strong&gt; if there are plenty of name value pairs (&amp;gt; 5).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cons:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;It takes some time to setup the table view and cell.&lt;/strong&gt; However, this is one-time setup for all rows, so...it&amp;#39;s not so bad.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;This is probably not the first approach iOS developers can think of.&lt;/strong&gt; This pattern is more common in JavaScript chart libraries; you &amp;quot;plug&amp;quot; 2d arrays of table data to display a fancy chart or table.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="http://git.io/JJsNSg"&gt;Feel free to download the code from GitHub.&lt;/a&gt;&lt;/p&gt;

&lt;hr&gt;

&lt;p&gt;Those are the three ways I can think of. While there are pros and cons for each of the approaches, I prefer using the table view.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>4 Tips to Build Fast Websites</title>
    <link rel="alternate" href="/2013/07/09/4-tips-to-build-fast-websites/"/>
    <id>/2013/07/09/4-tips-to-build-fast-websites/</id>
    <published>2013-07-09T07:00:00+07:00</published>
    <updated>2013-07-09T07:00:00+07:00</updated>
    <author>
      <name>CatCyborg</name>
    </author>
    <summary type="html">&lt;p&gt;Sometimes, you need to build websites for showcasing company information, team details, product information, etc. Once you&amp;#39;ve done your beautiful sites, you wonder why the page loads slowly. There is very little database calls and small amount of back-end web app work.&lt;/p&gt;

&lt;p&gt;Take a deep breath.&lt;/p&gt;

&lt;p&gt;I&amp;#39;m gonna explain 4 common tips to help you build fast websites, and show you the tools related. Be happy, most of the tools are free. Sit back and grab some chips!&lt;/p&gt;

&lt;p&gt;</summary>
    <content type="html">&lt;p&gt;Sometimes, you need to build websites for showcasing company information, team details, product information, etc. Once you&amp;#39;ve done your beautiful sites, you wonder why the page loads slowly. There is very little database calls and small amount of back-end web app work.&lt;/p&gt;

&lt;p&gt;Take a deep breath.&lt;/p&gt;

&lt;p&gt;I&amp;#39;m gonna explain 4 common tips to help you build fast websites, and show you the tools related. Be happy, most of the tools are free. Sit back and grab some chips!&lt;/p&gt;

&lt;p&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The 4 Tips:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Sanity Check&lt;/li&gt;
&lt;li&gt;Optimize Images&lt;/li&gt;
&lt;li&gt;Optimize Javascript and CSS: Combine, Minify and GZip Them&lt;/li&gt;
&lt;li&gt;Cache Static Assets Using HTTP Cache Headers and/or CDN&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Sanity Check&lt;/h2&gt;

&lt;p&gt;Are you sure the problem is in the front-end and not on the hosting server? Check it out just to be sure! You will need to examine the network from your website via a development tool in a web browser of your choice.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Google Chrome: &lt;a href="https://developers.google.com/chrome-developer-tools/"&gt;Use DevTools&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Firefox: &lt;a href="http://getfirebug.com/html"&gt;Use Firebug&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Internet Explorer &amp;gt;= 9: &lt;a href="http://www.sitepoint.com/debug-faster-with-f12-developer-tools-in-internet-explorer-9/#one"&gt;Use the Network Inspection Tab&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Safari: &lt;a href="https://developer.apple.com/technologies/safari/developer-tools.html"&gt;Enable the Develop Menu in Safari’s Advanced Preferences&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Reload your page and see which requests take the most time. Out of the slow requests, there are at least three categories below which can be improved.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The request roundtrip time to your site&amp;#39;s page (most probably the HTML markup)&lt;/li&gt;
&lt;li&gt;The request roundtrip time to get images on your site&lt;/li&gt;
&lt;li&gt;The request roundtrip time to get Javascript/CSS files needed by your site&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In addition to the development tool, use &lt;a href="https://developers.google.com/speed/pagespeed/"&gt;Google PageSpeed&lt;/a&gt; to get to know your page score. A good score is at least close to 90. If you&amp;#39;ve already done the next three sections I&amp;#39;m gonna explain, you can get around 70-90, which is very close! If you haven&amp;#39;t done any optimization, your page scores can be around 30-60.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you already get score above 90 but the request time is slow due to slow HTML page response time, feel free to ignore this article!&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;Optimize Images&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;If your sites don&amp;#39;t have any images, feel free to skip to the next section.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Why should we think that images can be the culprit of slowness? First of all, if you reach this point, it seems that you use some or plenty of images in your site. Second, their sizes are big if they are not optimized for the web.&lt;/p&gt;

&lt;p&gt;Where did you get your images? Image software, your camera, or somewhere online? Chances are images from those sources contain extraneous metadata and lots of colors. Some of these metadata aren&amp;#39;t necessary for the web, and some colors can be &amp;#39;compressed&amp;#39; with other colors. These extraneous data can be removed from the image and save lots of bytes, without actually affecting the image quality so much.&lt;/p&gt;

&lt;p&gt;Alright. That&amp;#39;s complicated. Why do we even care?&lt;/p&gt;

&lt;p&gt;Remember that the Internet speed varies among different regions and countries; some have blazing fast speed, some have moderately slow speed. If your goal is to serve lots of Internet users, you need to consider the number of bytes transferred. You might actually find out that images take lots of bytes and slow down your whole site!&lt;/p&gt;

&lt;p&gt;Don&amp;#39;t worry! Plenty of free tools for image optimization are available. If you already have images you showcase publicly, you will need some script to automate optimizing existing images and the new ones. The automation can take quite some effort. Nevertheless, it is so worthed when your site has a few big images or lots of small ones.&lt;/p&gt;

&lt;p&gt;Before using any tools to optimize images, please make sure that exact image sizes are used on your site. They should not be scaled (down) at all, if possible.&lt;/p&gt;

&lt;p&gt;Alright. These are the tools for compressing or optimizing images.&lt;/p&gt;

&lt;h3&gt;Command Line&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://pmt.sourceforge.net/pngcrush/"&gt;PngCrush&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://advsys.net/ken/utils.htm"&gt;PNGOUT&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.lcdf.org/gifsicle/"&gt;Gifsicle&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://freecode.com/projects/jpegoptim"&gt;JpegOptim&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;...&lt;a href="https://www.google.com.sg/search?q=image+optimization+command+line&amp;amp;oq=image+optimization+command+line&amp;amp;ie=UTF-8"&gt;and many more!&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Desktop&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://imageoptim.com/"&gt;ImageOptim&lt;/a&gt; for Mac&lt;/li&gt;
&lt;li&gt;&lt;a href="http://pnggauntlet.com/"&gt;PNGGauntlet&lt;/a&gt; for Windows&lt;/li&gt;
&lt;li&gt;&lt;a href="http://trimage.org/"&gt;Trimage&lt;/a&gt; for Linux&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Online&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://www.smushit.com/ysmush.it/"&gt;Smush.it&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://tinypng.org/"&gt;TinyPNG&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Optimize Javascript and CSS: Combine, Minify and GZip Them&lt;/h2&gt;

&lt;p&gt;This can seem tedious at the first glance. Thankfully, there are tools that can combine and minify assets (CSS, Javascript).&lt;/p&gt;

&lt;p&gt;But wait! Why should we do this in the first place?&lt;/p&gt;

&lt;h3&gt;Why Combine?&lt;/h3&gt;

&lt;p&gt;Say, you have the habit of separating Javascript files into different concerns such as model, views, controllers, helpers, widget X, widget Y, etc. Or, you have the habit of separating CSS files for the base layout, sections, widgets, etc. That is great. Keep it up!&lt;/p&gt;

&lt;p&gt;Then, in your HTML views, you reference all those files one by one like this…&lt;/p&gt;
&lt;div class="highlight plaintext"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&amp;lt;link href="style1.css" /&amp;gt;
&amp;lt;link href="style2.css" /&amp;gt;
&amp;lt;link href="style3.css" /&amp;gt;
&amp;lt;link href="style4.css" /&amp;gt;
...
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;Imagine if the browser fetches all your Javascript and CSS files one by one...Wait...how many of those files do you have? 10? 20? Whoa, the browser&amp;#39;s gonna create a lot of requests! &lt;strong&gt;One browser can only do 4-6 requests concurrently&lt;/strong&gt;, so please make sure you make use of that limitation effectively.&lt;/p&gt;

&lt;p&gt;It would be great if the browser only need to fetch once for a combined Javascript file, and another one time for a combined CSS file (instead of 10, 20, or a lot). This means, effort to combine those files is necessary. Combining files is as easy as copying and pasting everything to a brand new file. You get what I mean. And of course that&amp;#39;s really tedious to do if you do it by hand for lots of files.&lt;/p&gt;

&lt;p&gt;You can use &lt;code&gt;cat&lt;/code&gt; or other command-line tools, but you might want a more elegant way of doing this than creating custom scripts.&lt;/p&gt;

&lt;p&gt;Continue to the next section!&lt;/p&gt;

&lt;h3&gt;Why Minify?&lt;/h3&gt;

&lt;p&gt;Now that you saved the number of requests on your site by combining assets, you can compress the content further. In your CSS files, do you see whitespaces? In your Javascript files, do you see whitespaces and long variable/method names? We all do. Getting rid of those unnecessary whitespaces and compressing long names (while maintaining the same code behavior) can reduce the overall file size. &lt;a href="http://en.wikipedia.org/wiki/Minification_(programming)"&gt;That is what minification does, generally.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Of course, you can remove whitespaces with your custom scripts, but compressing long names need some effort. &lt;a href="https://developers.google.com/closure/compiler/"&gt;Google Closure Compiler&lt;/a&gt; and &lt;a href="http://yui.github.io/yuicompressor/"&gt;YUI Compressor&lt;/a&gt; are some of the most popular tools to help you do minification. Give the CSS or Javascript file name you want to compress and voila, the corresponding compressed file will be created!&lt;/p&gt;

&lt;p&gt;While you&amp;#39;re pretty sure that minification can save lots of bytes, sometimes you aren&amp;#39;t quite satisfied with the result. There are a few ways to optimize your code for minification, &lt;a href="http://www.edave.net/2009/10/18/maximising-javascript-minimisation-and-readability/"&gt;as mentioned in this blog post&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Why GZip?&lt;/h3&gt;

&lt;p&gt;After minification, the content can be compressed further by GZipping the file. Some browsers and servers might not support this, but the amount of bytes transferred can be reduced significantly if GZip is supported by both parties.&lt;/p&gt;

&lt;p&gt;You can GZip on the fly using your web server (Apache, &lt;a href="http://wiki.nginx.org/HttpGzipModule"&gt;Nginx&lt;/a&gt;, etc.), or just provide the gzipped version of your assets in your web application.&lt;/p&gt;

&lt;h3&gt;The Tools!&lt;/h3&gt;

&lt;p&gt;Now comes the fun part. There are tools which can combine, minify and gzip your CSS and JavaScript assets.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you use Ruby:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://documentcloud.github.io/jammit/"&gt;Jammit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/sstephenson/sprockets"&gt;Sprockets&lt;/a&gt;&lt;br/&gt;&lt;a href="http://rubyonrails.org/"&gt;Rails&lt;/a&gt; or &lt;a href="http://middlemanapp.com"&gt;Middleman&lt;/a&gt; already include this!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Most of the tools above also come with CSS preprocessors (SASS, SCSS) and a JavaScript preprocessor (CoffeeScript) too!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you use ASP.NET:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://getcassette.net/"&gt;Cassette&lt;/a&gt;&lt;br/&gt;This comes with CSS and Javascript preprocessors!&lt;/li&gt;
&lt;li&gt;Asset bundle&lt;br/&gt;This is already provided by default.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Cache Static Assets Using HTTP Cache Headers and/or CDN&lt;/h2&gt;

&lt;p&gt;You might think that the above optimizations are enough. You already cut the number of bytes transferred from your web server to the browser. You already minimize the number of requests from the browser to the web server. What else can you save?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The distance of bytes transfers!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The way a byte travel from your site to the browser is not like a straight line. It looks more like a graph a connections; there are intermediate servers between your web server and the browser.&lt;/p&gt;

&lt;p&gt;Just by distributing your assets closer to your visitors, you can speed up your website response times…at least according to those visitors. This can be done using &lt;strong&gt;Content Delivery Network&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;But that can be a little bit overkill for sites with small number of visitors…&lt;/p&gt;

&lt;p&gt;Don&amp;#39;t start distributing just yet. There is a trick you can use. Tell browsers to cache resources so that they don&amp;#39;t do requests unless necessary! We can tell them just by setting HTTP Cache Headers via web applications or web servers.&lt;/p&gt;

&lt;p&gt;Let&amp;#39;s talk about the HTTP Cache Headers first.&lt;/p&gt;

&lt;h3&gt;HTTP Cache Headers&lt;/h3&gt;

&lt;p&gt;The fastest way to make a request faster is not to do the request at all. Obviously.&lt;/p&gt;

&lt;p&gt;As long as your web server (like Apache, Nginx, etc.) obeys HTTP server spec, you can apply HTTP Cache Headers for your assets and web pages. Those headers can tell the gateway or browser so that those files are cached until certain time or until the file content is changed. How?&lt;/p&gt;

&lt;p&gt;There are two types of cache headers.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Expiration: Tells the browsers or gateway to expire cached resources at certain time. This uses Expires or Cache-control header. This could be more suitable for dynamic HTML pages.&lt;/li&gt;
&lt;li&gt;Validation: Tells the browsers or gateway to get the new resources if Last-Modified header from the client side is stale, or ETag header value is different from the actual server. This is very suited for static assets (like static HTML, Javascript, CSS, and image files)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There are lots of more headers &lt;a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html"&gt;in the spec&lt;/a&gt; or &lt;a href="http://www.mnot.net/cache_docs/"&gt;some other docs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;You can set these headers from your web server (&lt;a href="http://httpd.apache.org/docs/current/mod/mod_expires.html"&gt;Apache&lt;/a&gt;, &lt;a href="http://wiki.nginx.org/HttpHeadersModule"&gt;Nginx&lt;/a&gt;, etc.) or your web application (&lt;a href="http://guides.rubyonrails.org/caching_with_rails.html#conditional-get-support"&gt;Rails&lt;/a&gt;, &lt;a href="http://rtomayko.github.io/rack-cache/"&gt;Rack&lt;/a&gt;, etc.). Setting the headers is trivial effort, but it impacts greatly on performance.&lt;/p&gt;

&lt;p&gt;If you don&amp;#39;t want to do that setup for your static assets, use &lt;a href="http://pages.github.com/"&gt;GitHub Pages&lt;/a&gt; to host your files. It already applies HTTP Cache Headers for each of the files.&lt;/p&gt;

&lt;h3&gt;CDN&lt;/h3&gt;

&lt;p&gt;Alright. After you apply the proper cache headers, you think that things are going well. That is true, until you see visitors from the other side of the world complaining your site is slow. Or, you see for yourself in another country that the site is slow. For this case, you might want to cut the round trip time a little bit more by hosting those static assets (CSS, Javascript, images) on Content Delivery Network (CDN).&lt;/p&gt;

&lt;p&gt;What is that CDN thing?&lt;/p&gt;

&lt;p&gt;CDN is just like your server (for assets), with a lot more other servers are sitting in different countries and regions. So, they are actually a network of servers. Once you upload your files to the CDN, it will distribute them to the different locations. When a request to your file come from a browser, the CDN will respond from a server closest to where the request come from. This reduces the travelling time of the actual file bytes; instead of from your server in Tokyo all the way to Berlin, the file just travels within Berlin. Well, there are some small bytes from the browser, CDN server, and the actual CDN server in Berlin. Luckily, that&amp;#39;s pretty short and fast trip!&lt;/p&gt;

&lt;p&gt;There are &lt;a href="https://en.wikipedia.org/wiki/Content_delivery_network#Notable_content_delivery_service_providers"&gt;plenty of CDNs&lt;/a&gt; like &lt;a href="http://aws.amazon.com/cloudfront/"&gt;Amazon CloudFront&lt;/a&gt; and &lt;a href="https://www.cloudflare.com/"&gt;CloudFlare&lt;/a&gt;. They usually have certain pricing. They can be really big help for speeding up your site. You can also configure HTTP Cache Headers for each file on CDN. Feel free to refer to the specific CDNs documentations to learn more.&lt;/p&gt;

&lt;hr/&gt;

&lt;p&gt;Congratulations! You have reached the end of article. If you try all the above tips, your site should respond faster and have a better Google PageSpeed score than before.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>My Stages of Studying Web Design</title>
    <link rel="alternate" href="/2013/05/09/my-stages-of-studying-web-design/"/>
    <id>/2013/05/09/my-stages-of-studying-web-design/</id>
    <published>2013-05-09T07:00:00+07:00</published>
    <updated>2013-05-09T07:00:00+07:00</updated>
    <author>
      <name>CatCyborg</name>
    </author>
    <summary type="html">&lt;p&gt;This was all started with my desire to &lt;a href="/2013/01/30/learning-design/"&gt;learn design for web/mobile apps&lt;/a&gt; and understand color theory, like color schemes, color meanings, etc. It turned out that I had hard time to remember and apply the theory for the context of making websites. Still...&lt;/p&gt;</summary>
    <content type="html">&lt;p&gt;This was all started with my desire to &lt;a href="/2013/01/30/learning-design/"&gt;learn design for web/mobile apps&lt;/a&gt; and understand color theory, like color schemes, color meanings, etc. It turned out that I had hard time to remember and apply the theory for the context of making websites. Still, my wonder of how web designers can put together colors and textures gorgeously did not stop. Because of that, I have been trying out colors, textures, spacing, and other things like those for &lt;a href="about.html"&gt;a couple of sites&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I found out I needed a starting point like everyone else, so that I could continue digging a little bit more. &lt;strong&gt;These were stages of how I dived a bit into designing websites.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;Plain Page and Gray Colors&lt;/h2&gt;

&lt;p&gt;I really love gray! I have gray t-shirts, hoodies... I am not going to talk so much about that.&lt;/p&gt;

&lt;p&gt;For me, the easiest starting point to pick color was to use monochrome color scheme. I started with gray combinations, trying to remember simple color hex codes like &lt;code&gt;#333&lt;/code&gt;, &lt;code&gt;#888&lt;/code&gt;, etc. I found that was the fastest way I could build prototype of web pages.&lt;/p&gt;

&lt;p&gt;I was inspired by Ryan Singer&amp;#39;s &lt;a href="https://peepcode.com/products/ryan-singer-ux"&gt;UX Sketching&lt;/a&gt; and &lt;a href="https://peepcode.com/products/ryan-singer-ii"&gt;UI Prototyping&lt;/a&gt; screencasts. In those videos, he used lots of grays for UI Prototyping.&lt;/p&gt;

&lt;h2&gt;A Bit of Shadow and Gradients&lt;/h2&gt;

&lt;p&gt;It was hard for me to make site exciting with just gray and monochrome scheme. I was stuck on that stage quite a while until I read &lt;a href="http://nathanbarry.com/webapps/"&gt;Nathan Barry&amp;#39;s book&lt;/a&gt; and watched his video. He demonstrated how to make buttons or texts look embossed or recessed by adding 1px shadow.&lt;/p&gt;

&lt;p&gt;With the previous stage plus playing around with gray/white/black gradients... things were starting to get exciting!&lt;/p&gt;

&lt;h2&gt;Grays with One, Two Saturated Colors. Hello, Blue!&lt;/h2&gt;

&lt;p&gt;Somebody has ever told me that gray color generally does not excite. So, maybe, if I used simple color together with grays, I could make interesting sites.&lt;/p&gt;

&lt;p&gt;I really love how Nathan Barry used blue on &lt;a href="http://nathanbarry.com/webapps/"&gt;his book and video tutorials&lt;/a&gt;. So, I tried to remember &lt;code&gt;#000022&lt;/code&gt;, &lt;code&gt;#000088&lt;/code&gt;, etc. Maybe, apply colors just for header text.&lt;/p&gt;

&lt;p&gt;I tried using &lt;a href="http://colorschemedesigner.com/"&gt;Color Scheme Designer&lt;/a&gt; to pick colors. I was not quite happy because I need to use Internet for this.&lt;/p&gt;

&lt;p&gt;Photos can be source of good color pallete too. No one will sue you if you&amp;#39;re taking color from your own photo (like this site&amp;#39;s font colors).&lt;/p&gt;

&lt;h2&gt;Buttons, &lt;a href="http://codepen.io/"&gt;CodePen&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;I subscribed to Mighty Deals, bought stuff from UIParade... Wow, those stuff made me really happy. And I got happier when I tried to steal them and put in &lt;a href="http://codepen.io/nmutiara"&gt;my CodePen&lt;/a&gt;. It was really fun. But of course, ain&amp;#39;t got no time fo&amp;#39; stealin&amp;#39; everythin&amp;#39;.&lt;/p&gt;

&lt;h2&gt;Subtle Animations&lt;/h2&gt;

&lt;p&gt;Yep, fading is the easiest. What else? Rotate, glow... That was all I could think of. When I run out of inspirations, I take a look at bunch of video clips on YouTube and try to steal some slick animations. Anyway I didn&amp;#39;t really do much of animations but the subtle ones were pretty important.&lt;/p&gt;

&lt;p&gt;Interestingly, I found animations work the same as in iOS too..although in iOS, things are really verbose.&lt;/p&gt;

&lt;h2&gt;Regular Fonts, Spacing, Rhythm&lt;/h2&gt;

&lt;p&gt;I would say this was the time I started to learn typography. The learning process is still ongoing. I think spacing is fundamental, and I still have trouble getting this right. Until I get this, I won&amp;#39;t touch custom fonts pairing. I do not think I have talent in sense of space, rhythm, and whatever else the design terms are.&lt;/p&gt;

&lt;p&gt;So, how do I deal with this? I picked existing stylesheets I like. I picked Github stylesheets and saw line-height is 1.6. Ok, maybe line-height is supposedly more than 1. That was my guess. How about headings? I still guess and experiment a lot right now...&lt;/p&gt;

&lt;h2&gt;Exciting Background Images&lt;/h2&gt;

&lt;p&gt;Bored with using solid colors on backgrounds? Try using patterns. I did. It might work. There are free and gorgeous stuff like in &lt;a href="http://subtlepatterns.com/"&gt;Subtle Patterns&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;img title="Subtle Patterns" alt="Subtle Patterns" src="/images/subtle-patterns.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Another choice is to use &lt;a href="http://www.noisetexturegenerator.com/"&gt;Noise Texture Generator&lt;/a&gt; for really small image size. This is useful for replacing your solid color to be slightly different.&lt;/p&gt;

&lt;p&gt;&lt;img title="Noise Texture Generator" alt="Noise Texture Generator" src="/images/noise-texture-generator.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Blurred background photos are another option, but I find they are too big and can make web pages slow.&lt;/p&gt;

&lt;h2&gt;Buying Colorful Clothes. Taking Pictures of Ads.&lt;/h2&gt;

&lt;p&gt;You&amp;#39;re gonna laugh on this one. There are lots of art forms out there that you can &amp;#39;steal&amp;#39;. I really mean it, you can &amp;#39;steal&amp;#39; them. &amp;#39;Steal&amp;#39; whatever you love, because I heard great artists steal. Of course, not literally steal. Just steal a bit of the idea but not obviously copy the whole thing.&lt;/p&gt;

&lt;p&gt;This site has colors that I like. Apparently, they are not necessarily gray!&lt;/p&gt;

&lt;p&gt;There are other inspirations other than clothes. You can also look at ads. How amazing an ad could pick two opposite color in one go.&lt;/p&gt;

&lt;h2&gt;Boosting Page Load Time with &lt;a href="https://developers.google.com/speed/pagespeed/"&gt;Google PageSpeed&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;Most of the things above are on website, so of course, web pages are accessed through the Internet. If my web pages takes 10s to load (or maybe render), most people will leave with bad impression. Well, most people leave anyway.. but at least we can leave with hopefully better impressions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developers.google.com/speed/pagespeed/"&gt;Google PageSpeed&lt;/a&gt; is very simple to use. &lt;a href="https://developers.google.com/speed/pagespeed/"&gt;Visit the site&lt;/a&gt;, then follow its suggestions, especially the high priority ones. Once the high priority stuff is solved, page score can be significantly high. It is that simple.&lt;/p&gt;

&lt;p&gt;&lt;img title="Google PageSpeed" alt="Google PageSpeed" src="/images/pagespeed.png?1433645361" /&gt;&lt;/p&gt;

&lt;p&gt;Most of the time, I get better score when I use flat design and zero images (no background images, at least). With that, I am going back to trying to understand color theory and typography. Both concepts are enough to make sites looking good with fast speed.&lt;/p&gt;

&lt;hr/&gt;

&lt;p&gt;The above are all my stages of studying web design until now. At least, it&amp;#39;s something!&lt;/p&gt;

&lt;p&gt;&lt;img title="It's something!" alt="It's something!" src="/images/something.jpg?1433645361" /&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Extending Sets in Redis</title>
    <link rel="alternate" href="/2013/03/15/extending-sets-in-redis/"/>
    <id>/2013/03/15/extending-sets-in-redis/</id>
    <published>2013-03-15T07:00:00+07:00</published>
    <updated>2013-03-15T07:00:00+07:00</updated>
    <author>
      <name>CatCyborg</name>
    </author>
    <summary type="html">&lt;p&gt;I seem to encounter some patterns where I need to have Hash data structure in Redis. I sometimes need their values as a list or a set.&lt;/p&gt;
&lt;div class="highlight ruby"&gt;
&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;
&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5&lt;/pre&gt;&lt;/td&gt;
&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;# ruby&lt;/span&gt;
&lt;span class="nb"&gt;hash&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="ss"&gt;cheez: &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'burger'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="ss"&gt;hello: &lt;/span&gt;&lt;span class="no"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'world'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'yay'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;Hash in Redis does not support...&lt;/p&gt;</summary>
    <content type="html">&lt;p&gt;I seem to encounter some patterns where I need to have Hash data structure in Redis. I sometimes need their values as a list or a set.&lt;/p&gt;
&lt;div class="highlight ruby"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;# ruby&lt;/span&gt;
&lt;span class="nb"&gt;hash&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="ss"&gt;cheez: &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'burger'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="ss"&gt;hello: &lt;/span&gt;&lt;span class="no"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'world'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'yay'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;Hash in Redis does not support the above structure by default. However, by using Set and another data structure, we can simulate it.&lt;/p&gt;

&lt;h2&gt;First Approach&lt;/h2&gt;

&lt;p&gt;First, we are going to implement naive approach like below.&lt;/p&gt;
&lt;div class="highlight plaintext"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;HSET "hash", "cheez", "burger"
HSET "hash", "hello", "world,yay"
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;Alright, those can solve our problem here but... we need hack for the above structure to work. &lt;/p&gt;

&lt;p&gt;Let&amp;#39;s look at &lt;code&gt;cheez&lt;/code&gt;. Imagine we will have array of values of &lt;code&gt;&amp;quot;cheez&amp;quot;&lt;/code&gt;, then we need long comma-separated values for that. Ok, maybe we can use JSON, but again, it&amp;#39;s another hack just to parse the stored JSON. And those are not including some concurrency issues that might appear someday...&lt;/p&gt;

&lt;p&gt;Now, let&amp;#39;s check &lt;code&gt;hello&lt;/code&gt;. It has the same problems with &lt;code&gt;cheez&lt;/code&gt;, but with an addition. Anytime we need to add a new value, we need to make sure the added value does not exist in existing list.&lt;/p&gt;

&lt;h2&gt;An Extensible Approach Using Sets&lt;/h2&gt;

&lt;p&gt;Let&amp;#39;s go back to definition of Hash in Ruby. Hash contains arbitrary key and value pairs, and the keys are unique. In other words, we can represent Hash keys in Ruby as one Set in Redis.&lt;/p&gt;
&lt;div class="highlight plaintext"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;SADD "hash", "cheez"
SADD "hash", "hello"

RPUSH "hash::cheez", "burger"
SADD "hash::hello", "world"
SADD "hash::hello", "yay"
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;So, what we did was storing Hash keys in Redis set, then we store the values using another Redis data structure. Not so bad, eh?&lt;/p&gt;

&lt;p&gt;This approach looks complete. Though, sometimes we do need to care a bit about concurrent access and modification, especially when later on you want to change or delete the &lt;code&gt;hash&lt;/code&gt; often.&lt;/p&gt;

&lt;h2&gt;Ensuring Atomic Operation&lt;/h2&gt;

&lt;p&gt;This step is not necessary if your app does not need the above stuff as atomic operation.&lt;/p&gt;

&lt;p&gt;Let&amp;#39;s step back a bit. This is what we want.&lt;/p&gt;
&lt;div class="highlight ruby"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;&lt;span class="c1"&gt;# ruby&lt;/span&gt;
&lt;span class="nb"&gt;hash&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="ss"&gt;cheez: &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'burger'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="ss"&gt;hello: &lt;/span&gt;&lt;span class="no"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'world'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'yay'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;Anytime you set key-value pair to hash, you want it to be (as if) one batch of operation. To make multiple commands work as one unit, use multi/exec.&lt;/p&gt;
&lt;div class="highlight plaintext"&gt;&lt;table style="border-spacing: 0"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="gutter gl" style="text-align: right"&gt;&lt;pre class="lineno"&gt;1
2
3
4
5
6
7
8
9
10&lt;/pre&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;pre&gt;MULTI
SADD "hash", "cheez"
LADD "hash::cheez", "burger"
EXEC

MULTI
SADD "hash", "hello"
SADD "hash::hello", "world"
SADD "hash::hello", "yay"
EXEC
&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

&lt;p&gt;There is another term called pipelining, which is similar to multi/exec. &lt;a href="https://groups.google.com/forum/?fromgroups=#!topic/redis-db/zVXsg0bjrbg"&gt;Pipelining is for batch of Redis commands, multi/exec is good for atomicity&lt;/a&gt;.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Playing with PageSpeed</title>
    <link rel="alternate" href="/2013/03/14/playing-with-pagespeed/"/>
    <id>/2013/03/14/playing-with-pagespeed/</id>
    <published>2013-03-14T07:00:00+07:00</published>
    <updated>2013-03-14T07:00:00+07:00</updated>
    <author>
      <name>CatCyborg</name>
    </author>
    <summary type="html">&lt;p&gt;How is design related to &lt;a href="https://developers.google.com/speed/pagespeed/"&gt;PageSpeed score&lt;/a&gt;? After playing around with &lt;a href="/about.html"&gt;a bunch of side projects I built&lt;/a&gt;, I discovered these 4 things.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;More images can mean lower PageSpeed score, especially if the images are not optimized. So, if your site has images...&lt;/li&gt;
&lt;/ol&gt;</summary>
    <content type="html">&lt;p&gt;How is design related to &lt;a href="https://developers.google.com/speed/pagespeed/"&gt;PageSpeed score&lt;/a&gt;? After playing around with &lt;a href="/about.html"&gt;a bunch of side projects I built&lt;/a&gt;, I discovered these 4 things.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;More images can mean lower PageSpeed score, especially if the images are not optimized. So, if your site has images, be sure that they are optimized.&lt;/li&gt;
&lt;li&gt;&lt;a href="http://fltdsgn.com/"&gt;Flat design&lt;/a&gt; uses color combination, but very few texture background, gradients, and other kinds of images. This can lead to high score. Of course, if images are used, number 1 above has to be fulfilled.&lt;/li&gt;
&lt;li&gt;Although you use CDN for your Javascript or CSS, the score will be a lot lower if they&amp;#39;re not gzipped.&lt;br/&gt;I had 200kb scripts hosted on somebody else&amp;#39;s CDN. Then, I gzipped it and hosted those on GitHub. The final size became 20-30kb, but I thought DNS lookup could be a lot slower. Anyway, just by gzipping those scripts, Google PageSpeed gave my site score higher by 30.&lt;/li&gt;
&lt;li&gt;Look at &amp;quot;Critical Path Explorer&amp;quot; to check how and how long your site assets are downloaded. Though your score is so-so, maybe your site is actually quite decent.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;No wonder Gmail page design looks so clean, and it is very performant as well.&lt;/p&gt;
</content>
  </entry>
</feed>