JavaScript Color Picker

JavaScript Color Picker

Tampilan.

Sebuah plugin pengambil warna sederhana, ditulis dalam bahasa JavaScript mentah, untuk peramban moderen.

Jumat, 08 Juli 2016

Bricks · Tiny Grid Layout Plugin

Efek Masonry dengan JavaScript mentah.

Rabu, 06 Juli 2016

Ekstraksi HTML dan Teks dengan Regex

Ekstraksi Umum

Memisahkan antara tag HTML dengan teks di sekitarnya:

var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
var results = [];
test.replace(/([^<>]*?)(<\/?[-:\w]+(?:>|\s[^<>]*?>)|$)/g, function(a, b, c) {
    if (b) results.push(b);
    if (c) results.push(c);
});

console.log(results);

Hasil:

[
    'foo ',
    '<a b="c">',
    'bar',
    '</a>',
    ' baz ',
    '<b>',
    ' qux yo"s ',
    '<c>',
    '<d>',
    ' wut?'
]

Dengan cara ini Anda dapat melakukan manipulasi teks dengan aman tanpa harus mempengaruhi tag HTML. Caranya adalah dengan mengecek terlebih dahulu apakah anggota merupakan tag HTML atau teks:

var output = "";
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    // Is this a HTML tag or text?
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // this is a HTML tag …
        output += s;
    } else {
        // do something with text …
        output += s.replace(/"/g, '&quot;');
    }
}

console.log(output);

Hasil:

'foo <a b="c">bar</a> baz <b> qux yo&quot;s <c><d> wut?'

Ekstraksi Spesifik

Kode di bawah ini akan memisahkan antara tag HTML dengan nama tertentu saja, sehingga teks bisa saja berisi tag HTML yang diperbolehkan. Ini berguna jika Anda ingin melakukan manipulasi teks di luar tag tertentu saja, misalnya tag <kbd>, <pre>, <script> dan <style>:

var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? <kbd>ignore this yo"s</kbd>';
var results = [];
test.replace(/(.*?)(<\/?(?:kbd|pre|script|style)(?:>|\s[^<>]*?>)|$)/g, function(a, b, c) {
    if (b) results.push(b);
    if (c) results.push(c);
});

console.log(results);

Hasil:

[
    'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? ',
    '<kbd>',
    'ignore this yo"s',
    '</kbd>'
]

Berikut ini adalah cara mengubah karakter " yang berada di luar tag <kbd> menjadi ":

var output = "";
var skip = false;
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // check whether the HTML tag is an opening or closing tag …
        skip = s[1] && s[1] !== '/';
        output += s;
    } else {
        output += !skip ? s.replace(/"/g, '&quot;') : s; // replace or skip …
    }
}

console.log(output);

Hasil:

'foo <a b=&quot;c&quot;>bar</a> baz <b> qux yo&quot;s <c><d> wut? <kbd>ignore this yo"s</kbd>'

---

Versi PHP

PHP sudah memiliki fungsi khusus untuk menangani tugas ini:

$test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
$results = preg_split('#(<\/?[-:\w]+(?:>|\s[^<>]*?>))#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

var_dump($results);

Untuk melakukan ekstraksi tag HTML secara spesifik:

$results = preg_split('#(<\/?(?:kbd|pre|script|style)(?:>|\s[^<>]*?>))#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

Selasa, 05 Juli 2016

Menerapkan Infinite Scroll Sederhana pada Blogger

Fitur ini merupakan contoh nyata penerapan dari potongan kode ini yang kemudian diaplikasikan untuk membuat navigasi halaman AJAX tanpa jQuery seperti pada contoh sebelumnya.
Infinite scroll adalah teknik desain web yang mencegah bar gulir peramban menggulir ke bagian bawah halaman, membuat halaman tumbuh dengan konten tambahan sebagai gantinya.
Plugin ini mengharuskan Anda untuk menentukan empat elemen sebagai target JavaScript. Posting, wadah posting, wadah navigasi halaman dan tautan navigasi halaman berikutnya. Untuk Blogger, elemen target yang paling umum dapat digunakan adalah sebagai berikut:

• .blog-posts
• .date-outer
• .blog-pager
• .blog-pager-older-link

Anda dapat menyesuaikannya nanti berdasarkan markup HTML pada templat Anda.
Plugin ini pada awalnya merupakan plugin untuk CMS Mecha, tapi sebenarnya ini tetap dapat bekerja pada platform yang lain seperti Blogger, dengan sedikit penyesuaian tentunya.
Untuk menerapkannya pada Blogger, salin kode di bawah ini kemudian letakkan di atas </body>:

<b:if cond='data:blog.pageType in [&quot;index&quot;,&quot;archive&quot;]'>
<script src='//cdn.rawgit.com/tovic/infinite-scroll-plugin-for-mecha-cms/v1.1.0/infinite-scroll/assets/sword/infinite-scroll.min.js'></script>
<script>
//<![CDATA[
/*! Simple AJAX infinite scroll by Taufik Nurrohman <http://latitudu.com> */
var infinite_scroll = new InfiniteScroll({
    type: 2,
    target: {
        posts: '.blog-posts',
        post: '.date-outer',
        anchors: '.blog-pager',
        anchor: '.blog-pager-older-link'
    },
    text: {
        load: '<a class="js-load" href="javascript:;">Muat Lagi</a>',
        loading: '<span class="js-loading" style="cursor:wait;">Memuat\u2026</span>',
        loaded: '<span class="js-loaded">Dimuat.</span>',
        error: '<a class="js-error" href="javascript:;">Kesalahan.</a>'
    }
});
//]]>
</script>
</b:if>

Simpan perubahan.

Konfigurasi

Data

Keterangan

type

Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.

Senin, 20 Juni 2016

Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript

Opsi 1: Dengan Label itu Sendiri

Kekurangan: Nama label harus valid sebagai nama kelas dalam CSS. Satu karakter spasi dalam sebuah nama label akan membuatnya berlaku sebagai dua buah kelas CSS, dua sebagai tiga, tiga sebagai empat, begitu seterusnya.

<div class='post
<b:loop values='data:post.labels' var='label'>
  post-<data:label.name/>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Opsi 2: Dengan Nama Kelas Khusus

Kekurangan: Kondisional untuk menentukan nama kelas adalah hard-coded, karena label tidak memiliki nilai abstrak seperti halnya ID pada posting dan komentar.

<div class='post
<b:loop values='data:post.labels' var='label'>
  <b:switch var='data:label.name'>
    <b:case value='Menyenangkan'/>
post-red
    <b:case value='Jelek'/>
post-green
    <b:case value='Bosan'/>
post-blue
    <b:default/>
post-white
  </b:switch>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Contoh CSS

.post {border-left:4px solid white}
.post-red {border-left-color:red}
.post-green {border-left-color:green}
.post-blue {border-left-color:blue}

---

Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label

Minggu, 19 Juni 2016

Menggunakan `b:with`

Tag b:with tidak memiliki fungsi yang spesial kecuali sebagai placeholder untuk memperpendek deklarasi variabel, dan juga untuk mencegah pengulangan ekspresi fungsi. Berikut ini adalah contoh ekspresi fungsi tanpa bantuan b:with:

<p><img alt='1' expr:src='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 200) : &quot;no-image.png&quot;'/><p>
<p><img alt='2' expr:src='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 200) : &quot;no-image.png&quot;'/><p>
<p><img alt='3' expr:src='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 200) : &quot;no-image.png&quot;'/><p>

Berikut ini adalah contoh ekspresi fungsi dengan bantuan b:with:

<b:with var='src' value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 200) : &quot;no-image.png&quot;'>
  <p><img alt='1' expr:src='data:src'/><p>
  <p><img alt='2' expr:src='data:src'/><p>
  <p><img alt='3' expr:src='data:src'/><p>
</b:with>

Membandingkan dengan bahasa pemrograman yang lain seperti JavaScript, b:with dapat diartikan sebagai variabel yang dibuat untuk memperpendek proses komputerisasi dengan cara menyimpan nilainya terlebih dahulu:

var src = typeof post.thumbnailUrl !== "undefined" ? resizeImage(post.thumbnailUrl, 200) : 'no-image.png';

document.write('<p><img alt="1" src="' + src + '"/></p>');
document.write('<p><img alt="2" src="' + src + '"/></p>');
document.write('<p><img alt="3" src="' + src + '"/></p>');

Sabtu, 18 Juni 2016

Mengubah Ukuran Gambar Mini Tanpa JavaScript

Blogger memperkenalkan satu fitur lagi berupa kemampuan untuk mengubah ukuran gambar melalui sintaks templat:

resizeImage(url, size, ratio);

Berikut ini adalah contoh penerapannya pada widget posting populer. Sebelumnya, di dalam widget posting populer, kita akan melihat kode seperti ini yang berfungsi untuk menampilkan gambar mini:

<img expr:src='data:post.thumbnailUrl'/>

Sintaks di bawah ini memungkinkan kita untuk mengubah ukuran gambar mini ke dalam ukuran selain 72 × 72 piksel:

<img expr:src='resizeImage(data:post.thumbnailUrl, 72)'/>

Alternatif jika gambar utama tersedia di dalam posting (seperti featured image dalam WordPress, tapi sepertinya fitur ini masih draf):

<img expr:src='resizeImage(data:post.featuredImage.isResizable ? data:post.featuredImage : data:post.thumbnailUrl, 72, &quot;1:1&quot;)'/>

Ini berlaku juga untuk keluaran gambar dari data yang lain seperti gambar mini posting atau gambar mini dalam widget profil.
Singkatnya seperti itu.
Diskusi bisa dilanjutkan di bawah. Maaf jadi singkat-singkat, sekarang Saya sudah ada kesibukan tambahan lain di RS.