Ionic is a cross platform tool to create mobile apps for iOS, Android and Windows Phones. Lets take a look at installing Ionic.
I thought I’d build an app called Dogwalk. I wanted it to run on both Android and iOS phones so I decided to learn Ionic. I also thought I’d blog about all the steps I take to create it. You will get to know more about the app as we go along.
Installing
Start by installing Node.js. After that open up a terminal and use npm to install cordova and ionic:
npm install-g cordova ionic
Creating an app
To create an app using Ionic there are three templates you can start with, blank, tabs and sidemenu. The name of the templates kind of explains themselves.
For dogwalk I’d like to start with the blank template by typing this in the terminal:
ionic start --v2 dogwalk blank
When this is done you can run an almost empty app in the iOS simulator or in your browser. Running it in the browser is a great way to speed up development since you do not have to wait for the simulator to start every time.
Command to run it in your browser:
cd dogwalk
ionic serve
To run the app in ios simulator: (make sure you have it installed)
How to debug javascript in Android browser? The built in Android browser is very limited but this is how I solved the problem.
I had a javascript problem showing up on an old Android phone when using the old built in browser. When googling the problem i got a lot of answers that explained remote debugging with chrome. Which didn’t work out since no problem showed up in chrome.
There was also a few apps that I could install on my Android phone which provided an error console to the old browser or was a browser with a console on their own. But those didn’t work either.
Chromium
The Android browser is built on Chromium. If you type chrome:version into the address field you get to know what version of Chromium it is running.
This is what mine looked like:
Chromium version - android
So at this point I figured I wasn’t going to debug it in the Android browser at all. If you look at the screenshot above you can see i have a Chromium version from 2013 installed.
So I headed over to the Chromium site with all the releases of Chromium, downloaded an old one from 2013 for Windows, started it on my laptop and the same error as on the phone occurred. But this time i had a javascript console which logged the error and its stack trace for me.
You can use initWidgets to reinitialize ratings and reviews from Yotpo if you use javascript/ajax to load new content.
If you for example use javascript/ajax to display more products to the user you probably want to reinitialize Yotpo star- and review ratings as well.
Out of the box Yotpo only supports loading them on the first page load. But there is an undocumented method called initWidgets() that you can invoke instead of reloading the page.
javascript
You can invoke initWidgets() like this:
yotpo.initWidgets();
A big thanks to Richy who also had this problem, found a solution to it and went back to stack overflow to tell others how to solve it.
This plugin extends Jekyll sitemaps and adds support for pages, posts, archives/categories, collections and images.
Before i switched to Jekyll I’ve been spoiled by the sitemaps of the Yoast SEO plugin. So I decided to try to get the same functionality from Jekyll. The goal was also to make it available for people who host their Jekyll sites on Github Pages.
Copy category-sitemap.xml, page-sitemap.xml, post-sitemap.xml, project-sitemap.xml and sitemap.xml to your root folder.
Copy _includes/single-post-sitemap.html to your _includes folder.
Edit images in single-post-sitemap.xml as described under Images below.
If you do not use jekyll-archives plugin disable that as described under Categories below.
Edit or remove collections sitemap as described under Collections below.
Images
Google supports adding images to the sitemap. You need to edit the image url of your post(if any) on line 5 in single-post-sitemap.html. If you do not use images you can remove lines 4 to 8.
This plugin supports jekyll-archives. This sitemap is created with the category-sitemap.xml file. If you do not use the jekyll archives plugin you should delete category-sitemap.xml and remove the following from sitemap.xml:
Since collections are dynamic only an example is added with jekyll-sitemaps. If you do not use collections you can delete project-sitemap.xml and the following from sitemap.xml:
I’m trying to get this site to load as fast as possible. One thing I wanted to try was to use Jekyll instead of Wordpress to achieve this.
I’ve finally made the switch now. The page loads are faster since the site does not go through the Wordpress loop anymore. Jekyll creates static HTML-files that are then uploaded to the web server.
Page loads before and after
Below you can see screenshots of the network tab in Chrome where Christianengvall.se is loaded while being served with Wordpress and with static files created by Jekyll.
You can see that the load time is marked in red. That is because i use Ghostery) to block trackers like Clicky and Google analytics and so on.
This is only two page loads. A better test would be to load it lots of times and compare the average load time. But this is enough to see that a nice change for the better has been accomplished.
Load times Wordpress:
Page load with wordpress
And load times with static files created by Jekyll:
Page load static page with Jekyll
The load time went from 2,04 seconds to 452 ms. It probably loads a bit slower if you do not block trackers.
When then switch to Jekyll was made I’ve also started to delete some Wordpress leftovers in the HTML-markup.
I also skipped the implementation of share buttons for the new site, i’ve never been a fan of their loading times so now I’m skipping them as a test.
I now also use an image lazy loader that is only using vanilla javascript, making it unnecessary to include jQuery or any other framework. That generates fewer bytes to download for the visitor.
Migration tool
I tried using the official tools to migrate posts and pages from Wordpress to Jekyll. That however left me with a lot of html-fixes to do in every post on the site. I ended up using exitwp instead. Still got to do some fixes, but a lot less of them.
Deploy
You can use Github pages to host your jekyll site. A lot of people do this. But i decided to stay with my current host and got the opportunity to write my own deploy script :)
I thought I’d share it with you if you want to build your own from this template. It uses secure copy to upload the files to the server.
It also gzips every html, js and css asset before deploying. I got the script from Dominic Watson But changed it a bit to fit my site.
