Categories
Uncategorized

Parallax UITableView Header and Keeping it DRY

Last night I was working on a UITableViewController of a native iOS project. It was all standard stuff, so I feel like adding some eye candy to the view.

Many apps now add a Parallax Effect to their table view header, making the UI more lively and vivid. There are libs out there that do this for you, but then where is the fun in that.

So I went to search for a tutorial, there are some good ones, but I end up using this one from Matthew Cheok. Below is the final product of his tutorial.

alt text

The good things about Matthew’s tutorial is that he uses story board, has video instructions, and utilizes many things like struct and UIBezierPath.

When I applied Matthew’s technique into my project, I had a problem. I want apply this parallax effect to all my table views that has a header background image. As a good software developer, we should always keep our code DRY. So I did it with a some very simple setup.

Create ParallaxTableView class

First we will create a new UITableView subclass containing all the code needed to construct and update a parallax header:

import UIKit

class ParallaxTableView: UITableView {

    // these are public so we can change them in controller when needed
    var kTableHeaderHeight: CGFloat = 300.0
    var kTableHeaderCutAway: CGFloat = 80.0
    var kOverlapRatio: CGFloat = 3

    private var headerView: UIView?
    private var headerMaskLayer: CAShapeLayer?

    func constructParallaxHeader() {
        if self.tableHeaderView !== nil {
            // get the original table header
            headerView = self.tableHeaderView
            // remove the header from table view
            self.tableHeaderView = nil

            // add the header back to table view as a subview
            self.addSubview(headerView!)
            let effectiveHeight = kTableHeaderHeight - kTableHeaderCutAway / kOverlapRatio
            self.contentInset = UIEdgeInsets(top: effectiveHeight, left: 0, bottom: 0, right: 0)
            self.contentOffset = CGPoint(x: 0, y: -effectiveHeight)

            // construct cut away
            headerMaskLayer = CAShapeLayer()
            headerMaskLayer!.fillColor = UIColor.black.cgColor
            headerView!.layer.mask = headerMaskLayer
            // call the update to calculate header size and cut away
            updateHeaderView()
        }
    }

    func updateHeaderView() {
        let effectiveHeight = kTableHeaderHeight - kTableHeaderCutAway / kOverlapRatio
        var headerRect = CGRect(x: 0, y: -effectiveHeight, width: self.bounds.width, height: kTableHeaderHeight)
        if self.contentOffset.y < -effectiveHeight {
            headerRect.origin.y = self.contentOffset.y
            headerRect.size.height = -self.contentOffset.y + kTableHeaderCutAway / kOverlapRatio
        }

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: headerRect.width, y: 0))
        path.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height))
        path.addLine(to: CGPoint(x: 0, y: headerRect.height - kTableHeaderCutAway))
        headerMaskLayer?.path = path.cgPath

        headerView?.frame = headerRect
    }

}

Most of the code is identical to Matthew’s tutorial, which you should definitely take a look if you have any trouble understanding what each line does.

Change the class of UITableView in storyboard

For any UITableView that you want to give it a parallax header, change its class to the ParallaxTableView class you just created.

Connect a IBOutlet from ParallaxTableView to its controller

We need an IBOutlet to the ParallaxTableView so we can call the construct and update functions when the table view is loaded. We do this by Ctrl-Drag, and I will name it parallaxTableView.

Call construct and update function in UITableViewController

Finally, we need to call the ParallaxTableView‘s function in the controller.

class ItemDetailTableViewController: UITableViewController {
    @IBOutlet var parallaxTableView: ParallaxTableView!

    ...

    override func viewDidLoad() {
        super.viewDidLoad()

        ...

        // call the construct function in viewDidLoad()
        parallaxTableView.constructParallaxHeader()

        ...
    }

    ...

    // MARK: - Scroll view delegate

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // call the update function in scrollViewDidScroll()
        parallaxTableView.updateHeaderView()
    }

    ...
}

Done

If you build and run your project now. Your UITableView should have a parallax header. If you want to add this to any other table view in your project, just change the class, add the outlet, and call 2 functions in its controller!

As you can see I have also made the configuration variables in ParallaxTableView to be public, so if you want a shorter parallax header, you simply do:

    parallaxtableView.kTableHeaderHeight = 100.0
    parallaxtableView.constructParallaxHeader()

Then your header will be 100 pixels tall.

Categories
Uncategorized

How to move WordPress to another Server

My friend’s 1 year free tier from AWS just expired. Instead of paying for the subscription, she ask if she can move her WordPress blog to my EC2 server.

I don’t get a lot of traffics on my server, thus hosting another WordPress should be fine.

Backing up WordPress

WordPress is basically a bunch of files and a database. Backing up all the files and database, transferring them to the new server, then we should be good.

Backup Database

WordPress recommend using phpMyAdmin to do this. But I decided to use mysqldump, which should be installed in Ubuntu LAMP server already.

# mysqldump Usage
mysqldump [OPTIONS] database [tables]
mysqldump [OPTIONS] --databases [OPTIONS] DB1 [DB2 DB3...]
mysqldump [OPTIONS] --all-databases [OPTIONS]

As you can see, you need to know your WordPress database name to back it up. My database name is just wordpress, so I ssh to my server and ran:

mysqldump wordpress > wordpress.sql

This creates a wordpress.sql file in the current working directory.

Backup WordPress Files

I installed my WordPress on /var/www/wordpress, so this is the folder I need to backup.

# Mind the dot at the end
tar -zcvf wordpress-backup.tar.gz -C /var/www/wordpress .

This will create a wordpress-backup.tar.gz file that contains all the WordPress file in the current working directory.

Download the Backups

To download the backup files, we need to use SFTP to connect to the EC2 instance. I used Cyberduck, it’s free and easy to use.

Since EC2 uses public key authentication, we need to check the Use Public Key Authentication checkbox at the bottom, then select your instance’s .pem file. Username should be ubuntu if you setup your EC2 using the Ubuntu 14.04 image.

cyberduck

After you connect, simply locate the wordpress.sql and wordpress.tar.gz file and download them to your computer.

Moving to New Server

Using Cyberduck and SFTP, connect to your new server and upload the 2 backup files. The procedure is very similar to how we download the backup files. Just change the server address and .pem file.

Then ssh to your new server.

Restore the Database

We will use mysql to restore the database, but before we do that, we need to create a new empty database.

Login to mysql using:

mysql -u root -p

You will be asked for your MySQL database password.

In the mysql command prompt, we then run:

# you should choose a better database name than wordpress2
CREATE DATABASE wordpress2;

This will be where we save the restored database.
Then we need to create a new user for the restored WordPress, so it can access this database.

# create a new user
CREATE USER [email protected] identified by 'password';

# give the new user access to wordpress2 database
GRANT ALL PRIVILEGES ON wordpress2.* TO [email protected];

# make sure the changes take effect
FLUSH PRIVILEGES;

# exit mysql prompt
exit;

Be sure to match your database name with the one you created in the previous step, and choose a better password.

Now we can restore the database using:

mysql wordpress2 < wordpress.sql

Restore the Files

First, uncompress the wordpress.tar.gz file we uploaded using:

tar -xvzf community_images.tar.gz

This will create the same folder in the current working directory as the one you compressed previously.

If this folder is not in the /var/www/ directory, use the mv command to move it there.

You should also run:

sudo chown -R www-data:www-data /var/www

In case the uncompressed folder has a different ownership.

Add a Virtual Host

Depends how your server is setup, you need to update your apache or Ngnix so it recognizes the newly added WordPress blog. I’m using apache, and this is what I did:

# cd to the vhost config directory
cd /etc/apache2/sites-available

# copy my wordpress's config file for the new wordpress
cp my-wordpress.conf new-wordpress.conf

# edit the new-wordpress.conf
vim new-wordpress.conf

I modified 4 rows in new-wordpress.conf:

// new-wordpress.conf

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName domain-of-my-friends-wordpress.com
    ServerAlias www.domain-of-my-friends-wordpress.com
    DocumentRoot /var/www/wordpress2
    ...

Then reload apache:

sudo service apache2 reload

Change DNS of the domain

You now need to update your DNS with the IP address of the new server. Depends on which domain registrar, you will use different tools. Simply updating the IP address value in the A record to the IP address of the new server should do the job.

See the Result

Wait for your DNS to update, then enter the domain in your browser. You should see the same WordPress site like nothing have changed!

Categories
Uncategorized

Typora – minimalistic markdown editor review

A little review to my favourite Markdown editor, Typora.

I read about Markdown 3 years ago when I was starting this blog. I was looking at the “Markdown Support” option in JetPack, a plugin of WordPress. I wondered what Markdown is and investigated it. No too long until I found its origin along with the Apple-centric blog.

Markdown allows you to write using an easy-to-read, easy-to-write plain text format

I enjoyed writing using Markdown since I discovered it, and I have always been looking for a better Markdown editor. I have tried Mou, MacDown, Byword and many more, but I have yet to find one that I truly love.

Until few months ago, I found Typora.

Typora is a truly minimalistic Markdown Editor. Not like the other editors, Typora doesn’t separate the markdown syntax from the live preview, the two are combined into one editor. As you type, your markdown syntax will be transformed to the actual preview, like a WYSIWYG editor.

Typora offers many other power features that let you take more advantage in using markdown. The one I use the most is the Table feature. Just fill in the row and column size in the popup window, and Typora will generate the table as you wanted. So you don’t need to bother with the crazy table syntax.

Markdown Syntax of table...

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Table

Another feature I use all the time is the Table of Content. As the name suggested, it generates a ToC for you base on your current writing. Obviously, clicking on the links will direct you to the corresponding section.

Table of Content Feature

Last but not least, my favourite function, Themes! Typora uses CSS to theme it’s editor and all the built-in themes are all so beautiful, I am not even kidding.

Typora is currently on beta, and it’s free during beta! So give it a try and tell me what you think!