Sumberdaya Segar untuk Desainer dan Pengembang Web (Oktober 2017)

Bulan ini Fresh Resouces akan sedikit berbeda dari bulan-bulan sebelumnya. Kami, pengembang web, mencari nafkah di industri yang cepat berubah, dan saya telah melihat banyak pengumuman dari beberapa perusahaan teknologi terbesar seperti Google, Microsoft, Firefox, dan PHP, yang akan mengubah cara kami membangun Web.

Dalam angsuran ini, setengah dari daftar kami adalah tentang pengumuman ini. Jadi, bersiaplah untuk menyapa masa depan!

Optimalisasi Gambar Esensial

Itu adalah artikel lengkap untuk mengoptimalkan gambar untuk web ditulis oleh Addy Osmani. Ini tidak seperti artikel lain yang berkisar tentang cara melakukannya, atau hanya yang boleh dan tidak boleh dilakukan.

Artikel ini sebenarnya memandu Anda melalui rincian teknis dan juga ilmu di balik optimasi. Anda juga akan menemukan informasi menyeluruh tentang beberapa pendekatan optimasi dan format gambar, alat, tips, dan beberapa contoh dunia nyata.

PHP 7.2

A komprehensif referensi tentang apa yang datang ke PHP 7.2. Selain penambahan yang meningkatkan kinerja aplikasi PHP, PHP 7.2 juga dilengkapi penyusutan di mana beberapa hal akan dihapus dan seharusnya tidak lagi digunakan.

Dalam PHP 7.2, ada dua fungsi yang akan ditinggalkan yaitu create_function () dan __autoload (). Jika Anda seorang pengembang web, tinjau kode Anda dan buat perubahan yang diperlukan. Saya telah melihat banyak plugin WordPress yang masih menggunakan dua fungsi ini.

API Berbagi Web

Jujur saya tidak melihat API ini datang ke web. Namun, setengah dari interaksi kami di web adalah tentang “berbagi”, API ini akan sangat membantu lebih mudah bagi pengembang web untuk membangun pengalaman berbagi asli, khususnya pada platform seluler.

API ini saat ini hanya tersedia di Google Chrome untuk Desktop dan Android. Lihat video Youtube ini untuk melihatnya beraksi.

Atribut Async Gambar

Hal lain yang akan merevolusi web adalah async atribut untuk elemen img. Pada saat penulisan, ada beberapa pendekatan untuk memuat gambar secara asinkron yang melibatkan sedikit trik JavaScript. Kami akan segera bisa menambahkan async = aktif ke img elemen.

Firefox Quantum

Mozilla telah secara agresif mendorong pembaruan ke Firefox dengan beberapa perbaikan, diberi nama kode “Project Quantum”. Ini termasuk Quantum CSS - mesin baru untuk rendering CSS yang sangat cepat, UI baru, dan DevTools baru.

Rilisnya adalah mendapatkan traksi di pengembang web dan beberapa sudah beralih browser utama mereka ke Firefox. Ada banyak lagi yang akan datang dalam proyek ini termasuk Quantum DOM dan WebRender. Apakah kita akan melihat pesaing Node.js berdasarkan mesin Quantum Firefox? Mungkin ya.

MS Edge untuk iOS dan Android

Microsoft baru saja mengumumkan untuk lepaskan peramban terbarunya, Edge, ke iOS dan Android. Ini berarti ada satu lagi browser untuk diuji dengan situs web Anda.

Gutenberg

WordPress saat ini sedang mengerjakan proyek ambisius, kode bernama Gutenberg. Gutenberg adalah seorang facelift untuk editor WordPress dibangun hampir seluruhnya dengan JavaScript.

Pada titik ini, Gutenberg adalah dibangun dengan React tetapi proyek ini sedang mempertimbangkan kerangka kerja lain seperti Preact, Vue, atau yang lainnya. Ini situasi yang rumit untuk saat ini. Jadi, untuk pengembang WordPress membangun tema dan plugin, awasi proyek Anda itu akan mengubah cara kita membangun WordPress selamanya.

FoitFout

FoitFout adalah alat yang berguna untuk membandingkan dua pendekatan berbeda yang disebut FOIT dan FOUT memuat font khusus di web. Dengan alat ini, Anda dapat meniru dua pendekatan dan memutuskan pendekatan mana yang paling cocok untuk situs Anda.

Vuera

Vuera adalah a Pustaka JavaScript yang memungkinkan Anda menggunakan Vue dan Bereaksi bersama. Anda dapat memasukkan komponen Vue dari a .vue atau gunakan komponen Bereaksi dalam Vue. Tim Anda sekarang bisa lebih produktif dengan kerangka kerja apa pun bahwa mereka lebih suka menggunakan.

Dapat diseret

“Dapat diseret” adalah perpustakaan yang fantastis dari Shopify. Itu dibangun di atas browser asli Seret-n-Drop API dan memungkinkan Anda menggunakan API yang luas. Jika tidak menyediakan sesuatu yang Anda butuhkan, Anda dapat menulis modul khusus untuk memperluas fungsinya. Lihat demo untuk melihat cara kerjanya.

Bagan AlirJS

Seperti namanya, FlowchartJS adalah a perpustakaan yang memungkinkan membangun diagram alur seperti di PowerPoint. Demikian pula, Anda dapat membuat berbagai bentuk bagan termasuk lingkaran, elips, persegi, berlian, segitiga, dll.

QuickBill

Ringan dan aplikasi web langsung untuk membuat faktur. Ini menggunakan teknologi browser asli dan API untuk menjalankan sehingga tidak diperlukan akun. Cukup buka situs web, tambahkan item ke faktur, dan hasilkan file PDF. Itu dia!

Mocka

Mocka adalah seorang placeholder konten yang dapat Anda gunakan untuk membuat prototipe situs web. Ini hanya 500 byte dan sepenuhnya dapat disesuaikan. Anda dapat dengan mudah memasukkannya ke file CSS proyek Anda dengan menggunakan Sass mixin.

Itu CSS menyediakan sejumlah kelas termasuk media mocka untuk membuat placeholder gambar, heading mocka untuk membuat Tajuk, dan teks mocka untuk membuat teks arbitrer.

VueStar

VueStar adalah a Komponen Vue untuk menambahkan efek kilau ketika Anda mengklik ikon, mirip dengan apa yang dilakukan Twitter dengan “jantung” ikon di aplikasi seluler mereka. Komponen memperkenalkan elemen baru bernama bintang-bintang di mana Anda dapat menambahkannya di era web. Dan kamu sudah selesai!

Grid Playground

CSS Grid memperkenalkan konsep baru di web untuk membangun tata letak dan agak rumit pada pandangan pertama mengingat banyak properti baru yang dimilikinya..

GridPlayground pada dasarnya adalah a Inisiatif Mozilla untuk mengajarkan CSS Grid dan mendorong adopsi CSS Grid ke depan. Bahkan Firefox membawa alat baru ke DevTools untuk memeriksa tata letak Grid.

Pengelola Cuplikan

“Pengelola Cuplikan” sederhana aplikasi untuk menyimpan dan mengelola cuplikan kode. Anda dapat membuat item baru, menempelkan kode, dan mengatur titik. Pada titik ini, tidak ada yang terlalu mewah dan hanya menyediakan kode sumber yang Anda perlu kompilasi menggunakan NPM.

Antarmuka Tab

Besar walk-through untuk membangun navigasi tab yang progresif dan dapat diakses dengan penggunaan JavaScript yang minimal. Sumber yang bagus untuk mereka yang ingin mempelajari lebih lanjut tentang desain yang dapat diakses.

SwissInCSS

SwissInCSS memamerkan beberapa desain poster Swiss klasik dengan menggunakan CSS. Kode sumber tersedia di CodePen.