Langsung ke konten utama

Postingan

Menampilkan postingan dari November, 2016

Membuat Morphing Button Menggunakan CSS & Javascript

Dalam postingan ini kita akan mencoba untuk Membuat Morphing Button Menggunakan CSS Dan Javascript , nantinya yang kita buat akan terlihat seperti musiXmatch Musik Recognizer tapi bukannya menunjukkan hasil di layar penuh, di sini saya akan menunjukkan kartu dengan inforrmasi artis dan judul lagu. Tutorial ini saya kutip langsung dari blog saya karena lagi tidak ada bahan, buat yang mengerti bahasa inggris bisa mampir ke http://muhammadsayuti.com :D. Pertama buatlah file html baru dan beri nama index.html dan kemudian salin template di bawah ini. <!DOCTYPE html> <html> <head> <meta name="author" content="Muhammad Sayuti"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css"...
Posting Komentar
Baca selengkapnya

Javascript Promises

Pada kesempatan kali ini saya akan sedikit membahas tentang Javascript Promises yang saya kutip dari situs Google Developers tentang web dasar yaitu Javascript Promises: an introduction . Javascript adalah pemrograman single threaded, yang berarti bahwa 2 bit script tidak dapat dijalankan secara bersamaan, script tersebut harus dijalankan satu demi satu. Di browser javascript membagi thread dengan hal-hal lain yang berbeda dari browser ke browser. Tapi biasanya javascript berada diantrian yang sama seperti painting/pelukisan, memperbarui gaya (CSS) dan penanganan tindakan pengguna (seperti menyoroti teks dan berinteraksi dengan kontrol form). Aktivitas di salah satu hal-hal ini dapat menunda aktivitas lain. Anda Mungkin telah menggunakan event dan callback untuk hal-hal seperti ini. Berikut adalah contoh event var img1 = document.querySelector('.img-1'); img1.addEventListener('load', function() { // gambar telah dimuat }); img1.addEventListener('error', functi...
Posting Komentar
Baca selengkapnya

Membuat Custom Element Di HTML Menggunakan Javascript

Pada kesempatan kali ini saya akan membahas tentang bagaimana cara Membuat Custom Element HTML Menggunakan javascript. Biasanya banyak developer yang masih kurang puas akan fitur-fitur dari element yang ada di HTML, sehingga kebanyakan dari mereka lebih senang untuk membuat custom elementnya sendiri. Pada postingan kali ini saya akan mencoba membuat conditional element dimanan nantinya element akan menampilkan child element pada kondisi tertentu. Sebelum memulai buatlah file baru dan beri nama index.html kemudian copy template berikut. <html> <head> <meta name="author" content="Muhammad Sayuti"> <title>Custom Elements</title> </head> <body> <input type="checkbox" id="checkbox"> <dev-if if="checkbox is checked"> Checkbox is checked </dev-if> <script src="index.js"></script> </body> ...
Posting Komentar
Baca selengkapnya