Sumberdaya Segar untuk Desainer dan Pengembang Web (Juni 2015)
Bisakah Anda percaya bahwa seri ini telah berjalan selama hampir 3 tahun? Dalam waktu singkat, kami telah menampilkan setidaknya 30 daftar sumber daya terbaru untuk perancang dan pengembang web. Dan kita akan melanjutkan ini dengan kompilasi baru untuk bulan Juni.
Dalam kompilasi ini, kita akan melihat beberapa perpustakaan JavaScript untuk menampilkan slider, menggulir lebih halus untuk tabel data, efek elevator yang keren untuk tombol gulir-ke-atas, dan banyak lagi.
Mari kita periksa.
Konfirmasi Gaya Sedang
Medium telah dipuji karena desainnya; tata letak dan UI tampaknya telah dipikirkan secara menyeluruh. Selain itu, ini juga menginspirasi pengembang web untuk mengembangkan pustaka JavaScript atau CSS untuk mereplikasi UI. Medium Style Confirm adalah salah satu pustaka JavaScript yang menyerupai kotak dialog yang muncul di Medium.
pinguin
Penguin adalah kerangka kerja front-end baru yang dapat Anda gunakan sebagai landasan situs web Anda. Dengan alat-alat seperti Grunt dan Sass, Anda dapat dengan mudah menambah atau menghapus pustaka atau CSS yang Anda tidak perlu keluar dari kerangka membuatnya seringan mungkin. Ini juga merupakan alternatif yang baik untuk Bootstrap dan Foundation.
Elevator.js
Pernahkah Anda melihat tombol itu di situs web yang memungkinkan Anda meluncur ke atas halaman? Sebagian besar tombol hanya membawa Anda ke atas, tetapi dengan Elevator.js, Anda mendapatkan efek akselerasi geser yang mirip dengan lift, musik, dan “Ding!” terdengar begitu Anda mencapai lantai atas. Sangat bagus!
X-Instagram
X-Instagram adalah elemen khusus Polymer yang menarik dan menampilkan gambar dari Instagram dengan tag. Elemen ini membuat seluruh proses jauh lebih mudah. Kami cukup menambahkan elemen seperti elemen HTML biasa dan menentukan kata kunci tag sebagai atribut elemen.
Dan biarkan keajaiban dimulai!
CamanJS
CamanJS adalah pustaka JavaScript yang bagus untuk manipulasi gambar. Muncul dengan set fitur yang biasanya Anda temukan di editor gambar. Anda dapat mengubah gambar buram, hitam dan putih, dan bahkan meningkatkan kontras.
ClusterizeJS
Clusterize.js adalah pustaka JavaScript yang akan meningkatkan kinerja saat berhadapan dengan banyak data dalam tabel. Saat Anda menggulir ke bawah tabel dengan, katakanlah, 5000 dalam daftar, biasanya pengalaman akan berubah lambat dan tersentak-sentak. Pustaka JavaScript ini akan mengatasi masalah ini, membuat tindakan pengguliran berjalan lancar.
Ikuti Tes
Ikuti Tes adalah kumpulan pertanyaan untuk mengevaluasi keterampilan dan pengetahuan Anda tentang CSS3, HTML5, dan JavaScript. Setiap tes diberikan sejumlah pertanyaan dan waktu terbatas untuk menyelesaikan semua pertanyaan ini. Ini sumber yang bagus untuk mengetahui seberapa bagus kita sebenarnya dengan bahasa-bahasa ini.
Panah HTML
Ini adalah kumpulan simbol Unicode asli khusus yang dapat Anda tanam dalam HTML dan CSS. Karakter-karakter ini termasuk Panah, Mata Uang, dan Tanda Baca. Anda akan menemukan bahwa, kadang-kadang, Anda tidak perlu ikon font untuk menampilkan karakter tersebut.
Flickity
Flickity adalah perpustakaan JavaScript untuk menampilkan korsel, galeri, atau bilah geser di situs web Anda. Ini dioptimalkan untuk layar sentuh; Anda dapat menggeser komidi putar dengan mudah dengan jari, atau trackpad jika Anda menggunakan laptop. Itu juga dilengkapi dengan banyak Pilihan yang memungkinkan kustomisasi penuh dengan cara apa pun yang Anda suka.
Typelab
Typeslab adalah alat yang berguna untuk membuat poster tipe-Slab. Cukup menulis konten dan memilih font, Typeslab akan menghasilkan poster secara instan. Anda kemudian dapat mengunduhnya atau menerbitkannya di Imgur.
MatchMedia
Matchmedia adalah perpustakaan yang mereplikasi kueri media CSS. Perpustakaan itu sebenarnya tidak begitu segar, tetapi itu adalah perpustakaan yang sangat berguna yang saya putuskan untuk dimasukkan dalam daftar. Jika Anda perlu melakukan scripting berdasarkan ukuran viewport pengguna atau jenis media, ini adalah perpustakaan yang Anda inginkan.
Berikut ini adalah contoh yang digunakan untuk menjalankan skrip dalam ukuran viewport 320px dan di bawah ini:
if (matchMedia ('only screen and (max-width: 320px)'). cocok) 
Sass Burger
Sass Burger hadir dengan Mixin yang memungkinkan Anda membuat “roti isi daging” ikon dan mengubahnya menjadi tanda silang dengan lebih mudah.
Marx
Marx adalah kumpulan aturan gaya CSS untuk membuat gaya elemen lebih konsisten. Ini dapat disesuaikan (dengan Sass), ringan, dan bekerja di luar kotak. Alternatif yang baik untuk alat reset CSS yang sudah populer seperti Normalize.css.
CSS.js
CSS.js digunakan untuk mem-parsing file CSS untuk deklarasi gaya. Pustaka awalnya digunakan untuk tim di Jotform untuk membangun pengalaman WYSIWYG untuk mengedit formulir dengan CSS. Sekarang mereka memiliki sumber terbuka untuk kita semua gunakan. Layak ditabung, kalau-kalau Anda membutuhkannya nanti.
