Teknologi Informasi

Postingan

Windows Presentation Foundation Vs Windows Forms

Dari sekian banyak lingkungan pengembang untuk platform windows beberapa pengembang mungkin akan memilih .NET sebagai framework untuk membuat aplikasi, selain kemudahan yang diberikan dalam proses pembuatan aplikasi dan banyaknya komponen pihak ketiga yang dapat Anda gunakan dalam proyek Anda. Framework .NET sendiri memliki beberapa GUI Framework yang berbeda. Tapi apa itu GUI Framework? GUI adalah singkatan dari Graphical User Interface, dan Anda mungkin melihatnya sekarang. Windows memiliki GUI untuk bekerja dengan PC Anda, dan browser yang Anda gunakan untuk membaca artikel ini memiliki GUI yang memungkinkan Anda untuk menjelajahi web. Sebuah GUI Framework memungkinkan Anda untuk membuat aplikasi dengan berbagai elemen GUI, seperti label, teks dan lain sebagainya. Tanpa GUI Framework Anda harus membuat elemen antar muka ini secara manual dan menangani semua skenario interaksi pengguna seperti input teks dan mouse. Ini pekerjaan yang sangat banyak, selain membuat proses aplikasi Anda...

Baca selengkapnya

Pengenalan Service Worker

Pada beberapa postingan sebelumnya saya telah membahas tentang Javascript Promise, dan pada postingan kali ini yang akan dibahas adalah tentang Service Worker. Apa Itu Service Worker ? Service Worker adalah sebuah script yang dijalankan browser Anda di latar belakang, terpisah dari halaman web, membuka pintu untuk fitur yang tidak memerlukan halaman web atau interaksi pengguna. Saat ini, Service Worker sudah termasuk fitur seperti push notification dan bakground synch. Di masa yang akan datang Service Worker akan mendukung hal-hal lain seperti sinkronisasi periodik atau geofencing. Fitur inti yang dibahas dalam tutorial ini adalah kemampuan untuk mencegat dan menangani permintaan jaringan, termasuk mengelola cache. Yang membuat Service Worker menarik adalah API ini memberikan dukungan untuk pengalaman offline kepada pengguna, memberikan kontrol penuh kepada pengambang/developer atas pengalaman pengguna. Sebelum Service Worker ada satu API yang memberikan pengalaman offline kepada pengg...

Baca selengkapnya

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"...

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...

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> ...

Baca selengkapnya

Membuat SlidingUpPanel Dengan HTML,CSS Dan Javascript Bagian 4

Setelah sebelumnya di postingan Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 3 kita telah membuat pemutar musiknya, maka pada postingan terahir di dalam topik ini kita akan memperbaiki beberapa element serta sedikit memberi efek untuk mempercantik tampilan antarmuka. Pertama-tama kita akan mengedit pada bagian panel header dimana content dari panel header akan kita bagi menjadi 2, yaitu panel header saat posisi SlidingUpPanel terbuka dan panel header saat posisi SlidingUpPanel tertutup atau berada dibagian dibawah layar. Ubah bagian sliding-up-panel-header menjadi seperti berikut SlidingUpPanel Music Player Sekarang tambahkan css berikut kedalam file sliding-up-panel.css . #sliding-up-panel-header.expanded .panel-header-content__expanded{ transition:opacity 300ms; opacity:1; } #sliding-up-panel-header .panel-header-content__expanded{ position: absolute; transition: opacity 300ms; opacity:0; text-align: le...

Baca selengkapnya

Membuat SlidingUpPanel Dengan HTML,CSS Dan Javascript Bagian 3

Pada postingan sebelumnya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 2 kita telah selesai SlidingUpPanel, di postingan kali ini kita akan membuat javascript untuk memainkan lagu dari yang disimpan dalam folder songs . Buatlah file javascript baru di dalam folder proyek Anda beri nama player.js . Seperti sebelumnya ssaat membuat sliding-up-panel.js buatlah class MusicPlayer pada file tersebut kemudian tambahkan constructor pada kelas MusicPlayer dan inisialisasikan variable yang akan digunakan. 'use strict'; class MusicPlayer{ constructor(){ this.player = document.querySelector('audio'); this.playlist = document.querySelector('.playlist'); this.playPauseBtn = Array.from(document.querySelectorAll('.play-btn')); this.nextBtn = document.querySelector('.next-btn'); this.prevBtn = document.querySelector('.prev-btn'); this.songs = Array.from(document.querySelectorAll(...

Baca selengkapnya