Lesson Learned from Implementing Accelerated Mobile Pages (AMP) on Karir.com.

About AMP

Recently, google announced their project to improve overall user experience in accessing web. Their project’s name is Accelerated Mobile Pages (AMP). AMP is basically restricted version of HTML. Think of it as Google Weblight, but with more freedom to design user interface and user experience. It’s still like normal HTML, but with some restriction:

  1. Not all HTML tag are allowed. Tag like <img> are replaced with AMP-specific tags .
  2. Javascript are not allowed. Only prebuilt AMP JS are allowed.
  3. External CSS are not allowed.
  4. Maximum size of embeded CSS is 50 kilobytes.

AMP built with 3 components: AMP HTML, AMP JS and AMP Cache. To put it simply, those components work together to create custom Google Weblight pages. Google claims that by using AMP, your page can be loaded instanteniously. You can read more about AMP here.

Rails and AMP

AMP is a trending tech innovation, and I think everyone will start using it and get the benefit of using it especially because the big name of Google backing it. At karir.com, we truly understand the potential of implementing AMP on our platform. So, we decided to give it a try. We found two possible way of doing it:

  1. Using gem. We want a gem that provide robust way of creating amp page with minimal fuss. After searcing for a while, we had 2 possible gem: amp-html and rails_amp.
  2. Just do it our own FTW! We want to avoid this option as much as we could, because do it our own requires ground up aproach and takes more time than using gem.

AMP Using Gem

At the beginning, we tought using gem was the simplest way. At that time (until this story’s written), AMP itself is a relatively new technology and because of that gems about AMP are still in beta development stage.

First try, we choose amp-html gem because it provide us robust way of not only creating amp pages, but also testing it. However, turns out one of our already installed gem broke dependency of amp-html. Next chance, we tried rails_amp gem. It is a nice gem that provide abstraction to create amp page. All you have to do is add new *.amp.erb in your views. However, after trying to implement it, we encountered problem of rails_amp’s inability to use slim instead of erb as template.

To sum up, both amp-html and rails_amp didn’t make it. I think the reason was both amp-html and rails_amp haven’t yet reached stable version. So, they may give solution to amp implementation on rails, but unfortunately in our case it didn’t. We learned that using gem generally makes work simpler, but sometimes when the gem didn’t reach stable version it doesn’t.

Do It Our Own

Making our own AMP pages requires rewrite of our regular page so it can satisfy AMP requirements. We define our AMP pages as sub namespace of our Mobile pages. The route will be https://m.karir.com/amp/pages/:id. Below is step by step on how we’re implementing AMP.

  1. Removing standard HTML that didn’t satisfy AMP. In this step, we removed script, standard css, img tag, form, etc. The goal of this step was to make barebone plain AMP-HTML without style and interaction. To make sure we didn’t mess up, we integrated Node package for AMP called amphtml-validator in our rspec. You can learn more about validating AMP page manually or through CI/CD process here.
  2. Styling. Because AMP can only contain maximum 50 kilobytes CSS, we have to manually select style that was used by particular page. This step was the most tiresome process. You can read more about AMP style and layout specifications here.
  3. Implement custom script. AMP page don’t use standard javascript. By default, there is no way we can capture user interaction through script. However, AMP provide us some simpler way of doing this. We can use their built in interaction by using AMP HTML attributes. You can learn more about capturing user interaction with AMP in this link.
  4. We’re using newrelic tracking gem, and by default it will inject our page with newrelic script. At first, we don’t realize it because the test was green all the time. But, when AMP code deployed to our production, google didn’t reckognize our AMP page. Something didn’t quite right. We decided to check AMP validation manually (not through CI/CD) by using chrome extension AMP validator. Turns out, newrelic script was injected by newrelic gem and that gem only run in production. The solution is to disable script injecting on AMP pages. You can learn more about it in this link.

Conclusion

We’re unable to use gem to implement AMP on our platform. Using gem wasn’t enough. Instead of, we implemented it our own. It was not an easy task, but it wasn’t hard either.

Lesson Learned

  1. We cannot always depend on gem. Gem are built by community and for technology which are new and growing rapidly, finding right gem can be difficult. That case, giving a shot on implementing it your own maybe will give you better solution than using gem. Or even, you can create your own gem if you want!
  2. Some task is hard because it IS hard, others because it actually is a simple task but requires more dedication and boring stuff. We will never know until we try, right?
  3. One hundred test coverage and green tag doesn’t guarantee our application running fine. Always do double check before deploying your code to production.

Why Change?

Redcarpet and Pygments is a widely used markdown parser and highlighter. I have already use it for a long time. Recently, i received many warning email from github regarding the change between Redcarpet to Kramdown. Starting May 1st, 2016, Github only support Kramdown as Markdown parser and Rouge as highlighter. It stated that the use of Kramdown and Rouge boost it performance.

The Problem

It turns out that changing between Redcarpet and Pygments to Kramdown and Rouge is not that simple. You cannot just change _config.yml. There is some issue that should be fixed afterwards.

Resolve

In order to get rid of the problem, one should simply follow these steps.

Modify _config.yml

First you must modify your _config.yml. Change following lines

   highlighter: pygments
   markdown: redcarpet

to

   highlighter: rouge
   markdown: kramdown
   kramdown:
      input: GFM
      auto_ids: true
      syntax_highlighter: rouge

Install Dependency

Dont forget to add following lines to your gemfile.

   gem 'rouge'
   gem 'kramdown'

Update

After all those two steps complete, run

bundle install
bundle update

My Issue

After update, i faced jekyll-pagination issue. It should simply resolved by modifying following lines on your _config.yml

   gems:
      - jekyll-sitemap

to

   gems:
      - jekyll-sitemap
      - jekyll-paginate
I Hate that I Cannot Access Sublime Text Package Controll

This article use Indonesian language. If you prefer English, feel free to visit markdown fundamental guide here or here.

Environment

Penulis menggunakan sistem operasi windows 8.1. Sistem operasi lain bisa menyesuaikan dengan penjelasan dibawah.

Bagian Membosankan: Teori

Apa itu markdown?

Markdown adalah satu bahasa yang diciptakan untuk mempermudah pembuatan dan pembacaan kode HTML. Markdown diciptakan dalam bahasa Perl. Format tulisan markdown sendiri adalah plain-text yang artinya kamu bisa membuat markdown dari text-editor biasa seperti notepad, sublime, emacs, vi, vi, dll. Lisensi markdown sendiri adalah opensource BSD.

Bagaimana cara membuat dokumen markdown?

Caranya mudah. Cukup install perl dan pasang library markdown.

  1. Pertama-tama komputer atau laptop kamu harus sudah terinstall perl, jika belum kamu bisa download dari sini.
  2. Jika sudah terinstall perl, kamu bisa mendownload library markdown dari sini.
  3. Buat file markdown. Jika kamu belum bisa membuat, kamu bisa menggunakan contoh file markdown disini
  4. Compile file markdown dengan perintah perl Markdown.pl --html4tags file_kamu.md Perintah tersebut akan menghasilkan output file html yang dapat kamu buka lewat browser.

Ada nggak cara lain yang lebih mudah?

Ada. Rekomendasi saya adalah dengan menggunakan Sublime Text 3. Dengan menggunakan ST3, kamu dapat menggunakan markdown dengan mudah.

  1. Buka Sublime Text 3. Jika belum download silahkan download dan install ST3 terlebih dahulu disini.
  2. Buka package manager dengan menggunakan perintah ctrl+shift+p. Jika kamu belum memiliki package manager, install terlebih dahulu disini.
  3. Pilih menu Install Package.
  4. Pilih plugin MarkdownEditing.
  5. Buka lagi package manager.
  6. Pilih Markdown Preview.
  7. Buat file markdown. Jika kamu belum bisa membuat, kamu bisa menggunakan contoh file markdown disini.
  8. Untuk melihat hasil markdown dalam bentuk file html, kamu membuka konsol perintah dengan ctrl+shift+p kemudian kamu dapat memilih perintah Markdown Preview: Preview In Browser.
  9. Browser akan terbuka untuk memperlihatkan hasil konversi markdown ke html.

Oke, aku siap untuk membuat markdown. Lalu apa?

Kamu dapat mempelajari syntax markdown. Bagian dibawah akan menjelaskan lebih lanjut tentang syntax markdown.

Fun Time

Paragraf

Membuat paragraf pada markdown sangat mudah. Cukup mengetikkan sesuatu maka apa yang kamu ketikkan akan otomatis dikonversi menjadi paragraf selama kamu belum mengetikkan enter. Jadi enter adalah tanda awal paragraf.

Heading

Heading, biasa juga disebut sebagai judul. Membuat judul cukup dilakukan dengan kode hash #. Contohnya untuk membuat <h1>Ini Judul Paragraf</h1> di markdown syntaxnya adalah # Ini Judul Paragraf. Kamu dapat menggunakan # dari satu sampai 6 yang menandakan level tag h yang akan kamu buat. Contohnya <h3>Ini Heading Level 3</h3> dapat dibuat dengan syntax markdown ### Ini Heading Level 3.

Bold

Efek bold dapat dibuat dengan menggunakan syntax **. Misal untuk membuat <b>Bold</b> digunakan syntax **Bold** pada markdown. Bold

Efek Italyc

Efek italyc dapat dibuat dengan menggunakan syntax *. Misal untuk membuat <i>Italyc</i> digunakan syntax *Italyc* pada markdown. Bold

Blockquote

Blockquote dapat dibuat dengan syntax >this is block quote yang akan menghasilkan <blockquote>this is block quote</blockquote>.

this is block quote

Ordered List

Ordered list atau daftar terurut adalah penomeran dari daftar item. Pembuatan <ol><li>1. List satu</li><li>2. List dua</li></ol> dapat dilakukan dengan sederhana mengetikkan spasi + nomer pada paragraf baru (harus mengetikkan enter terlebih dahulu). Contoh ` 1 List 1` akan menghasilkan 1 List Satu

Unordered List

Unorderet list atau daftar tak terurut dibuat dengan cara yang hampir sama dengan ordered list, namun jika ordered list menggunakan angka unordered list menggunakan *

  • Satu
  • Dua
  • Tiga

Hyperlink pada markdown cukup singkat. Untuk membuat <a href='http://yourlink.com'>Your Link</a> cukup ketikkan syntax [Your Link](http://yourlink.com).

Horizontal Rule

Horizontal rule pada markdown dapat dibuat dengan syntax --- lalu ketik enter. Syntax ini akan menghasilkan: