Sumberdaya segar untuk Desainer dan Pengembang Web (April 2018)

Bulan ini kami melihat beberapa pengumuman dari nama-nama terkemuka di bidang teknologi. Misalnya, Apple membuka sumber sistem database baru, Google merilis alat baru untuk mengukur kecepatan situs web Anda di seluler, dan Github dengan kursus gratis untuk membantu Anda memulai dengan Git, Github, dan pengkodean secara umum.

Juga, dalam posting hari ini, saya juga akan fitur sejumlah alat baru yang saat ini sedang naik daun. Mari kita beralih ke apa yang kita punya lebih banyak dalam daftar.

VuePress

Alat baru dari pencipta Vue, VuePress adalah a generator situs statis dirancang dengan mempertimbangkan Vue.js. Ini menghasilkan dan membuat HTML statis untuk setiap halaman, dan berjalan sebagai SPA (Aplikasi Satu Halaman). Muncul dengan beberapa fitur out-of-the-box termasuk kemampuan untuk menambahkan ID Google Analytics, mencari, selanjutnya dan selanjutnya navigasi, sidebar, dan PWA.

IMG-2

Pustaka JavaScript yang memperkenalkan a elemen khusus, img-2. Elemen baru menambahkan sejumlah optimasi yang tidak datang dengan standar img elemen, meningkatkan cara gambar dimuat untuk pengguna. Dengan elemen kustom, gambar akan di-cache, juga beban malas gambar dan penyajian akan dari cache hanya saat gambar memasuki viewport pengguna. Lihat demo.

Tabler

Panel Dashboard / Admin yang elegan berdasarkan Bootstrap 4. Dasbor menampilkan komponen yang dibuat sebelumnya seperti Bagan, Formulir, Galeri, Tabel Harga, dan yang bagus koleksi Ikon khusus. Titik awal yang bagus untuk membiarkan pengembang membangun Panel Admin dengan cepat. Lihat demo!

DayJS

DayJS Pustaka JavaScript untuk memformat tanggal dan waktu. Bahkan lebih, DayJS fitur API yang mirip dengan Moment.js, namun itu hanya berbobot 2Kb. Mengingat itu, itu bisa menjadi alternatif yang bagus untuk Moment.js, jika Anda ingin perpustakaan yang lebih ringan namun tetap familier dengan apa yang sudah Anda ketahui.

UnifiedArchive

Perpustakaan PHP untuk menangani file terkompresi, UnifiedArchive mendukung berbagai format termasuk RAR, Zip, Gzip, Tar, dan banyak jenis kompresi lainnya. Dengan perpustakaan ini, Anda dapat mengarsipkan dan mengekstrak file atau direktori. Ini menyediakan beberapa API untuk memanipulasi file setelah itu diekstraksi dari arsip. UnifiedArchive tersedia sebagai paket Komposer.

Lab Belajar Github

Github baru saja mengumumkan kursus gratis yang utamanya mencakup Git di Github. Ada 5 kursus saat ini di mana Anda dapat mempelajari beberapa hal berguna seperti cara menggunakan Github untuk meng-host kode Anda, cara menggunakan halaman Github untuk mendapatkan situs atau blog gratis untuk proyek Anda, dan cara mengelola konflik Gabung yang biasa terjadi ketika Anda bekerja dengan banyak pengembang di proyek.

WordPress UnitTest DOM Parser

Tip bagus dari Takayuki Miyauchi menguji DOMElement saat menjalankan UnitTest di aplikasi WordPress. Saya pribadi menemukan ini sangat berguna; harap Anda menemukan hal yang sama.

Popmotion

Pustaka JavaScript untuk animasi halus bermentega di web, “Popmotion” menyediakan API yang disebut Fisika yang memungkinkan Anda untuk membuat dengan efek animasi kehidupan nyata yang dekat. Itu tidak terbuka; perpustakaan sederhana nilai output berdasarkan set konfigurasi tertentu. Ini memungkinkan Anda untuk menerapkan keluaran tersebut untuk menghidupkan media apa pun termasuk CSS, SVG, Three.js dan bahkan React.js.

Driver.js

Pustaka JavaScript yang memungkinkan Anda “mendorong” fokus pengguna pada halaman. Ini sangat berguna jika Anda ingin memperkenalkan fitur-fitur spesifik atau membimbing mereka untuk tugas-tugas spesifik pada halaman. Driver.js adil Berukuran 4 KB, dapat disesuaikan, dan ramah keyboard.

Ganti GIF Animasi dengan Video

GIF ada di mana-mana, setelah kembali hebat. Tapi masalah tentang GIF adalah biasanya sangat besar. Buang-buang bandwidth, namun kualitas grafisnya sering kali mengerikan. Ini pedoman dari Google menunjukkan caranya “Video” dapat mengganti GIF untuk menampilkan grafik beranimasi.

Topeng Teks

Pustaka JavaScript untuk mengubah teks yang memerlukan pemformatan khusus seperti nomor telepon, mata uang, atau nomor kartu kredit. Saat pengguna mengetik teks akan secara otomatis diubah menjadi format yang sesuai untuk meningkatkan pengalaman pengguna. TextMask dapat digunakan dengan React, Vue, atau JavaScript lama yang biasa.

Bandingkan Kecepatan Situs Seluler

Ini adalah alat praktis lain dari Google. Alat ini akan memungkinkan Anda untuk melakukannya periksa kecepatan situs web Anda saat memuat dari seluler dan perkirakan total kehilangan pendapatan saat situs web memuat dengan lambat. Kamu bisa pilih negara dan kecepatan di mana situs web Anda akan diuji.

VueNut

Seorang rekan pengembangan ketika membangun aplikasi web dengan Vue.js dan Vuex, VueNut membuatnya lebih mudah untuk mengeksplorasi status data yang disimpan dan memungkinkan Anda untuk memanipulasi data selama pengembangan dengan mudah. Hal yang keren!

FoundationDB

Baru-baru ini Apple membuat open source FoundationDB di Github. Itu adalah sistem basis data pasangan kunci-nilai yang menjanjikan skalabilitas dan kinerja. Ini keren untuk memiliki perusahaan teknologi besar yang mulai mencurahkan untuk open source beberapa produk mereka.

Buku cerita

StoryBooks adalah alat untuk membangun komponen Bereaksi secara terpisah. Ini memberikan UI pada browser yang memungkinkan Anda untuk melihat berbagai status masing-masing komponen menguji komponen.

GhostText

Ekstensi browser yang akan sinkronkan apa yang Anda tulis di browser ke editor teks Anda atau sebaliknya. Saya menemukan ini pada akhirnya berguna jika Anda ingin dapat menulis di situs web dengan kenyamanan dan fitur editor kode Anda. GhostText tersedia untuk Chrome, Firefox, dan Opera.

Coala

Coala adalah a CLI menyediakan antarmuka untuk linting dan memperbaiki kode terlepas dari bahasa yang digunakan. Anda dapat menggunakan Coala dalam editor kode, mengintegrasikannya dengan CI (Continuous Integration), dan menyesuaikannya dengan sintaks konfigurasi di .coafile. Coala mendukung banyak bahasa seperti CSS, JavaScript, PHP, dan Anda dapat menemukan lebih banyak di direktori ini.

ReactStrap

ReactStrap adalah kumpulan komponen Bootstrap 4 yang diubah menjadi komponen React yang dapat digunakan kembali. Jika Anda ingin memodernisasi situs web Bootstrap lama Anda, perpustakaan ini adalah sesuatu yang mungkin ingin Anda lihat.

Reacto

Alat lain yang berhubungan dengan React, Reacto adalah sebuah IDE dibangun di atas Electron dan dirancang untuk mengembangkan aplikasi web dengan ReactJS. Ini terlihat sangat berguna jika pengembangan utama Anda berputar di sekitar ReactJS.

PicoJS

Pustaka JavaScript itu memungkinkan deteksi wajah. Ini bekerja dengan foto diam atau dari kamera terintegrasi. Sangat menarik bagaimana teknologi web berkembang selama beberapa tahun terakhir.