Tip Cepat: Membuat CSS Inline AMP Lebih Mudah dengan Jade atau PHP

() translation by (you can also view the original English article)

Proyek AMP menyediakan cara yang relatif bebas tangan untuk menerapkan beberapa jenis pengoptimalan halaman web. Anda dapat membaca ikhtisar lengkap tentang apa proyek itu dan apa yang dilakukannya di Proyek AMP: Akankah Membuat Situs Anda Lebih Cepat?

Untuk meringkas bagaimana AMP diimplementasikan, Anda akan:

Mulailah dengan beberapa kode boilerplate standar yang dimuat di JavaScript yang diperlukan
Menggunakan beberapa elemen HTML kustom
Ikuti beberapa peraturan praktik terbaik

Setelah Anda melakukan tiga hal di atas, sisa proses pengoptimalan ditangani untuk Anda di belakang layar. Selain itu, halaman AMP harus lulus tes validasi, dan untuk lulus tes ini semua aturan praktik terbaiknya harus dipatuhi.

Salah satu peraturan AMP bisa menjadi sedikit berat selama pengembangan, dan itu adalah persyaratan bahwa semua CSS kustom dimuat secara inline di bagian head antara sebuah set tag <style amp-custom>...</style>.

Jika Anda secara manual menulis CSS Anda langsung ke bagian head halaman Anda, Anda akan menghadapi masalah dan keterbatasan. Jika Anda perlu mengubah CSS di beberapa halaman situs, itu akan sangat sulit, dan Anda tidak akan memiliki pilihan untuk menggunakan perangkat tambahan CSS seperti preprocessors atau minifiers.

Untuk alasan ini, jika Anda akan membuat lebih dari satu template AMP, Anda pasti ingin menemukan cara untuk menulis CSS Anda dalam stylesheet eksternal sehingga alur kerja Anda tetap terjaga, namun masih lulus validasi AMP dengan memindahkan semua CSS Anda ke dalam bagian head.

Dalam tip cepat ini, Anda akan mempelajari dua cara untuk melakukannya.

Metode 1: Dengan Jade

Jade adalah bahasa yang bisa Anda anggap sama seperti preprocessor untuk HTML. Ini memungkinkan Anda menulis HTML dalam bentuk ringkas dan singkat yang mengkompilasi ke dalam HTML biasa, namun yang terpenting untuk subjek yang ada, juga memungkinkan Anda untuk mengimpor file CSS dan memiliki output konten penuh di manapun Anda suka.

Dengan metode ini, Anda akan menulis template AMP Anda dengan menggunakan sintaks Jade, dan mengimpor file CSS eksternal ke bagian head dari setiap template Anda. Ini adalah salah satu metode terbaik yang dapat Anda gunakan untuk membuat halaman AMP jika Anda ingin menampilkan HTML statis. Inilah cara melakukannya.

Membuat Stylesheet Eksternal

Hal pertama yang harus Anda lakukan adalah menyiapkan stylesheet eksternal yang ingin Anda impor ke dalam template AMP Anda. Buat folder untuk menampung proyek Anda, lalu di dalamnya buat stylesheet baru dan beri nama "style.css".

Tambahkan beberapa CSS dasar ke stylesheet Anda, apapun yang Anda pilih selama file Anda berukuran tidak lebih dari 50kb, sesuai dengan peraturan validasi AMP.

Jika Anda hanya ingin beberapa tes CSS untuk Anda mulai, tambahkan yang berikut ini:

1	body { background: #3498db; color: #fff }

Boilerplate AMP Jade dengan Import CSS

Langkah selanjutnya adalah menambahkan kode boilerplate AMP, namun dengan dua perbedaan yang signifikan. Satu, kita akan menggunakan sintaks Jade dan bukan HTML langsung, dan dua, kita akan mengimpor file "style.css" eksternal kita.

Buat file baru di folder proyek Anda yang bernama "index.jade" dan tambahkan kode berikut ini:

doctype
html(amp, lang="en")
  head
    meta(charset="utf-8")
    title AMP via Jade
    link(rel="canonical", href="/index.html")
    meta(name="viewport", content="width=device-width,minimum-scale=1,initial-scale=1")
    script(type="application/ld+json").
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    | 
    |<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    script(async, src="https://cdn.ampproject.org/v0.js")
    style(amp-custom)
      include style.css
  body
    h1 This is a Jade based AMP page.

Kode di atas sama dengan yang Anda temukan di dokumentasi AMP, hanya saja diubah menjadi sintaks Jade.

Anda akan melihat ke bagian bawah kode ini:

1	style(amp-custom)
2	include style.css

Baris yang dibaca style(amp-custom) akan menampilkan tag <style amp-custom>...</style> yang diperlukan. Indentasi pada baris berikut yang akan Anda lihat include style.css. Ini memanfaatkan fungsionalitas include dari Jade, dan akan mengimpor semua konten file "style.css" Anda dan menampilkannya di antara tag style.

Kompilasi Jade dengan Prepros

Sekarang Anda telah menyiapkan semua kode yang diperlukan untuk metode ini, dan Anda hanya perlu mengkompilasi template Jade Anda. Anda bisa melakukan ini baik melalui task runner seperti Gulp atau Grunt, atau melalui aplikasi kompilasi.

Untuk proyek yang relatif sederhana dimana Anda hanya ingin mendapatkan file yang dikompilasi, sebaiknya menggunakan aplikasi yang disebut Prepros. Anda hanya memerlukan versi percobaan/gratis untuk tujuan metode ini.

Setelah Anda menginstal dan menjalankan Prepros, yang harus Anda lakukan adalah menyeret folder proyek Anda ke antarmukanya dan akan menemukan file Jade Anda. Secara otomatis akan mulai mengawasi proyek Anda untuk perubahan, jadi simpan saja file Jade atau CSS Anda dan akan memicu Prepros untuk mengkompilasi template Anda.

Anda sekarang akan melihat file baru muncul di proyek Anda yang bernama "index.html", dan di dalamnya Anda akan melihat kode boilerplate HTML yang terkompilasi lengkap dengan CSS kustom:

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP via Jade</title>
    <link rel="canonical" href="/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script> 
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-custom>body { background: #3498db; color: #fff }
    </style>
  </head>
  <body>
    <h1>This is a Jade based AMP page.</h1>
  </body>
</html>

Pratinjau Situs dengan MAMP

Hal berikutnya yang akan Anda lakukan adalah memeriksa pratinjau situs Anda. Meskipun memungkinkan untuk melihat file AMP Anda di browser yang dimuat langsung dari hard drive Anda, ada baiknya Anda melakukan pratinjau situs Anda dengan localhost, yaitu mensimulasikan host web di komputer Anda.

Prepros datang dengan pratinjau localhost yang disertakan yang otomatis di-refresh saat ada perubahan dalam proyek Anda. Namun, Anda tidak akan bisa menggunakannya dengan AMP (sayangnya). Alasan mengapa Prepros memasukkan beberapa JavaScript ke pratinjaunya agar mengaktifkan reload secara langsung, namun karena tidak boleh ada JavaScript kustom yang diizinkan di halaman AMP maka validator akan mendeteksi skrip ini dan kemudian melempar kesalahan.

Untuk alasan ini, pendekatan yang saya sarankan adalah menata pratinjau situs Anda dengan menggunakan MAMP untuk Mac atau Windows. Anda akan mengikuti proses yang sama dengan yang kami lakukan di atas, satu-satunya perbedaan adalah Anda akan membuat folder proyek Anda di dalam folder "htdocs" MAMP Anda sebelum menyeretnya ke antarmuka Prepros Anda. Saat MAMP berjalan, akan memungkinkan Anda untuk melihat pratinjau di URL seperti http://localhost:8888/myproject.

Dengan pendekatan ini, Anda mendapatkan yang terbaik dari kedua dunia: pratinjau localhost tanpa kesalahan validasi melalui MAMP, dan kompilasi Jade otomatis melalui Prepros.

Metode 2: Dengan PHP

Jika Anda tidak butuh membuat template HTML statis, Anda memiliki pilihan untuk menggunakan PHP untuk menampilkan stylesheet Anda secara dinamis di bagian head Anda. Pendekatan ini mungkin memerlukan sedikit keributan, tapi hanya sesuai jika kebutuhan proyek Anda (dan host Anda) memungkinkan untuk PHP.

Kebetulan, kalaupun Anda belum pernah menggunakan PHP sebelumnya dan hanya ingin menulis dengan HTML langsung daripada menggunakan sintaks Jade, Anda tetap bisa menggunakan teknik ini.

Mulailah dengan membuat file index dengan kode boilerplate standar AMP yang ditambahkan padanya, tapi bukannya memberi nama file "index.html" beri nama "index.php":

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Jika Anda sudah mengerjakan template AMP, Anda juga bisa mengganti nama file-nya, mengubah ekstensinya menjadi ".php", sehingga mengubahnya menjadi file PHP. Misalnya, "about.htm" akan diganti namanya menjadi "about.php". (Pastikan Anda juga mengubah ekstensi pada tautan internal apa pun.)

Sekarang, buat stylesheet eksternal bernama "style.css" di folder root Anda. Jika Anda memiliki template yang sudah Anda kerjakan, potong CSS yang Anda miliki yang berada di antara tag <style amp-custom>...</style> dan tempelkan ke stylesheet eksternal Anda.

Untuk menarik CSS eksternal Anda ke bagian head file AMP Anda, cukup tempelkan potongan satu baris PHP ini di antara tag <style amp-custom>...</style>:

1	<?php readfile( getcwd() . "/style.css"); ?>

Rincian

Jika Anda tidak terlalu tertarik dengan PHP, Anda dapat meninggalkannya saat mengetahui bahwa potongan tersebut akan memungkinkan PHP untuk mengambil stylesheet Anda dari server, membaca isinya, lalu menampilkannya secara inline. Namun jika Anda ingin tahu lebih banyak tentang potongan tersebut, mari kita memecahnya.

Pertama, kita memiliki tag pembuka dan penutup PHP <?php ... ?>. Ini menjadikan server mengetahui bahwa apa yang ada di antara tag ini adalah PHP dan bukan HTML biasa.

Kemudian kita menggunakan fungsi readfile(). Fungsi ini melihat file yang ditentukan di antara tanda kurung, mengambilnya dari server, membaca isinya lalu mengeluarkan kontennya inline.

Di antara tanda kurung kita memiliki fungsi getcwd(). Fungsi ini mendapatkan path ke direktori kerja saat ini, yaitu direktori file PHP kita berada.

Setelah itu kita memiliki string-nya (teks biasa) "/style.css" yang menentukan nama stylesheet kita, relatif terhadap lokasi file PHP kita. Kemudian di antara string ini dan fungsi getcwd() kita menempatkan sebuah titik . yang menggabungkan (menghubungkan) keduanya bersama-sama untuk menciptakan path lengkap ke stylesheet kita. Misalnya, dalam pratinjau MAMP path-nya akan seperti "/Applications/MAMP/htdocs/myproject/style.css".

Anda dapat menggunakan potongan ini dalam sebanyak mungkin template PHP yang Anda butuhkan, dan setiap perubahan pada stylesheet eksternal Anda akan menjadi keluaran di semua template Anda.

Pratinjau Situs dengan MAMP

Seperti metode Jade, cara yang bagus untuk melihat pratinjau halaman AMP berbasis PHP Anda adalah menggunakan MAMP, yang memiliki dukungan penuh untuk PHP. Instal MAMP dan buat folder proyek Anda di dalam folder "htdocs" dan Anda dapat melihat pratinjau situs Anda di URL seperti http://localhost:8888/myproject tanpa pengaturan tambahan.

Merangkum

Kita sekarang telah mencakup dua cara untuk menjaga stylesheet eksternal dan alur kerja pengembangan CSS normal Anda, namun tetap meluluskan validasi AMP Anda dengan memindahkan inline CSS Anda. Mari kita meringkas masing-masing dengan cepat.

Metode 1: Jade
Tuliskan template Anda dalam sintaks Jade dan gunakan include untuk mengeluarkan stylesheet eksternal di bagian head. Kompilasi dengan Prepros dan pratinjau dengan MAMP.
Metode 2: PHP
Tuliskan template Anda dalam sintaks HTML di dalam file dengan ekstensi ".php". Sertakan potongan PHP untuk menampilkan stylesheet eksternal Anda di bagian head. Pratinjau dengan MAMP

Adapun metode mana yang akan dipilih, itu tergantung pada spesifikasi proyek Anda, namun secara umum:

Jika Anda bekerja di situs statis dan Anda menggunakan Jade atau tertarik untuk mempelajarinya, metode satu adalah pendekatan terbaik Anda.
Jika situs Anda akan (atau bisa) menjadi dinamis dengan akses ke PHP, atau Anda tidak tertarik untuk menggunakan Jade, potongan kecil metode dua adalah solusi cepat dan mudah.

Dengan salah satu dari metode ini, Anda dapat mengembangkan CSS seperti biasanya, dengan perubahan langsung tercermin di semua template dan akses ke alat preprocessors dan pengoptimalan, sambil tetap inline CSS Anda dengan cara yang sesuai dengan AMP.

Saya berharap itu bisa membantu proses pengembangan AMP Anda menjadi sedikit lebih lancar!