Kompres dan Tata Ulang Kode CSS, HTML dan JavaScript Kalian dengan Alat Ini

Saya membuat proyek baru berupa situs web berisi kumpulan alat untuk mengompres kode HTML, CSS dan JavaScript secara daring. Saat ini sudah tersedia alat pengompres kode HTML, CSS, JavaScript dan JSON. Untuk ke depannya mungkin akan Saya tambahkan alat-alat kompresi yang lain. Halaman web alat dapat kamu kunjungi melalui tautan https://minify.js.org

Selain alat pengompres, alat untuk menata ulang kode-kode yang sudah dikompres juga tersedia. Saat ini sudah tersedia alat penata kode HTML, CSS, JavaScript dan JSON. Halaman web alat dapat kamu kunjungi melalui tautan https://tidy.js.org

Berikut ini adalah kode-kode pihak ke tiga yang Saya gunakan untuk membuat alat-alat tersebut:

• Query String Parser
• HTML Minifier
• UglifyJS
• CleanCSS
• JS Beautifier

Sebelumnya Saya pernah membuat situs web kumpulan alat serupa pada repositori https://github.com/taufik-nurrohman/mini-web-tools. Tapi dengan adanya situs web yang baru, repositori tersebut kemungkinan besar akan Saya arsipkan. Silakan beri komentar dan saran mengenai alat-alat ini, simpan tautan ke penanda buku, dan bagikan ke teman-teman yang lain kalau kamu merasa bahwa alat-alat ini bermanfaat untuk kamu dan untuk mereka. Terima kasih ♥

Unduh CMS Mecha Versi 2.3.0

Mecha 2.3.0 tersedia untuk diunduh!

Kanal YouTube DTE :]

Sekarang kita punya kanal resmi! 👏

CKEditor 5 Image Upload Adapter

Sumber gambar: CKEditor

Menggunakan kode JavaScript <ES6 untuk mengaktifkan fitur pengunggah gambar di CKEditor 5 tanpa layanan Easy Image.

Pembaharuan 2018/12/24: Paket CKEditor 5 Custom Builder untuk pemula sudah tersedia di https://github.com/mecha-cms/c-k-editor.5.

Google Custom Search API

Google Penelusuran kustom.

Implementasi dasar API Google Custom Search untuk menampilkan hasil pencarian pada halaman yang sama tanpa harus memuat ulang halaman, dengan HTML formulir yang dibuat secara terpisah dari hasil penelusuran. Selengkapnya bisa dilihat pada kode sumber.

---

Referensi: Custom Search Element Control API · Google Custom Search

Query String Parser

JavaScript dengan ukuran kurang dari 1 KB untuk mengubah format teks kueri menjadi objek. Berkas ini akan menambahkan fungsi global bernama q2o yang kemudian dapat Anda gunakan seperti ini:

console.log(q2o('?foo=1&bar=2')); // {"foo":1,"bar":2}

Cara Menggunakan CMS Mecha

Halaman awal.

Dalam buku ini kita akan membahas tentang bagaimana cara menginstal SMK Mecha pada peladen web baik secara luring maupun daring. Namun di sini penulis tidak akan menjelaskan secara panjang lebar mengenai apa itu peladen web (web server) dan bagaimana cara kerjanya. Dengan membaca buku ini, penulis menganggap Anda sudah mengerti hal-hal tersebut. Minimal Anda sudah mengetahui fungsi dari folder www dan di mana Anda dapat menemukan folder tersebut.

JavaScript Rich Text Editor

Tampilan.

Sebuah plugin editor teks WYSIWYG yang didesain untuk menerima tag HTML inline saja. Mengapa?

JavaScript Text Editor

Tampilan.

Sebuah plugin editor teks tingkat lanjut, ditulis dalam bahasa JavaScript mentah, untuk peramban moderen.

JavaScript Color Picker

Tampilan.

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

Bricks · Tiny Grid Layout Plugin

Efek Masonry dengan JavaScript mentah.

Bagaimana Sebenarnya jQuery Bekerja

Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jatuh cinta karena efek animasi yang diberikan; mereka jatuh cinta kepada slideshow, kepada efek dropdown menu, kepada efek gambar kabur, dan lain sebagainya; sebegitu jatuh cintanya mereka hingga mereka sanggup untuk duduk berlama-lama di depan komputer, ketagihan menggoyang-goyangkan pointer mouse mereka di permukaan menu navigasi dropdown berkali-kali hanya demi melihat efek slide-up dan slide-down yang begitu indah…

Parser Markdown Paling Sederhana

Dukungan Markup

Mendukung hampir semua markup seperti yang dinyatakan dalam dokumentasi Markdown Extra, kecuali markup catatan kaki, abbreviasi, daftar definisi, tautan ber–referensi dan gambar ber–referensi.

JavaScript Tag Picker

Interaksi yang lebih baik pada masukan berupa data tag dengan JavaScript.

Unduh Berkas Presentasi Perkenalan HTML untuk Pemula

Aslinya ini adalah tugas bebas yang Saya dapat dari kampus, akan tetapi karena Saya merasa berkas ini cukup bermanfaat jadi Saya bagikan saja untuk kalian.

Kompresi Kode HTML, CSS dan JavaScript dengan PHP

Berikut ini adalah fungsi PHP terpisah yang telah Saya gunakan untuk mengompresi kode HTML, CSS dan JavaScript pada CMS Mecha.

Range Slider Kustom Sederhana

Dapat digunakan sebagai alternatif jQuery UI Slider atau plugin-plugin sejenis yang memiliki ukuran berkas cukup besar. Terkadang Saya memerlukan sesuatu yang sejenis dengan itu, tetapi dengan fitur yang lebih sederhana. Asalkan bisa digunakan untuk memperbaharui nilai dengan cara menggeser-geser dragger maka itu sudah cukup. Jadi Saya membuat ini…

Generator HTML Peta Gambar Palsu

Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam gambar. Mengenai elemen apa yang akan Anda gunakan dan bagaimana Anda memodifikasi tampilannya, itu terserah Anda:

Coba Alat

Bagi para pembaca yang belum mengerti apa itu image map, kalian bisa memulai mempelajarinya di sini. Dan berikut ini adalah contoh gambar yang dihasilkan dari alat yang Saya buat di atas. Coba letakkan pointer mouse Anda di atas wajah-wajah atau badan tokoh kartun di bawah ini untuk mengetahui nama mereka:

Cara Menggunakan

Ambillah sebuah foto atau gambar dimana di dalamnya terdapat beberapa bagian yang memerlukan detail khusus. Misalnya foto keluarga atau peta negara, lalu unggah foto atau gambar tersebut pada blog Anda. Ambil URL gambarnya, kemudian letakkan di dalam input URL yang tersedia. Setelah itu klik tombol Create. Klik tombol Add Location untuk menambahkan lokasi/koordinat baru pada gambar. Geser dan ubah ukurannya sesuai keinginan. Kode HTML akan tampil di bagian area teks sebelah kanan.