Sumberdaya Segar untuk Desainer dan Pengembang Web (Maret 2019)

Banyak yang telah terjadi selama beberapa bulan terakhir di dunia pengembangan web. Pertama, yang baru editor berbasis blok, nama kode Gutenberg, akhirnya digabung menjadi WordPress 5.0. Ini adalah perubahan yang sangat besar sejak awal saat ia menetapkan landasan baru bagi WordPress untuk berkembang di masa depan dan akan mengubah cara pengembang mengembangkan fungsionalitas WordPress..

Kedua, beberapa rekan pengembang kami telah menciptakan beberapa alat yang sangat berguna seperti yang memungkinkan lihat JSON di terminal dan beberapa React libraries yang dapat membuktikan bantuan besar dalam desain web dan proyek pengembangan.

Dan terakhir, beberapa yang paling efektif sumber daya, referensi, dan plugin telah diluncurkan untuk membantu Anda memperbarui proyek Anda sesuai dengan tren yang lebih baru.

Mari kita dapatkan daftar sumber daya pengembangan web segar yang paling komprehensif.

Buku Pegangan Gutenberg

Buku pegangan WordPress resmi tempat Anda dapat mencari referensi untuk desain, contoh kode untuk membuat blok dan lainnya dan panduan untuk berkontribusi pada proyek. Ini adalah referensi pertama Anda untuk berkembang bersama Gutenberg.

Blokir perancah

Dengan editor berbasis blok, WP-CLI sekarang menyediakan cara yang nyaman untuk memulai membuat Gutenberg Block dengan perintah CLI baru, blok perancah wp. Anda dapat membuat dan memasukkannya ke plugin dan tema yang ada.

CGB

Cara lain untuk memulai blok Gutenberg dengan mudah adalah Buat Blok Guten (CGB) adalah alat untuk menghasilkan boilerplate untuk mengembangkan blok Gutenberg. Ini terdiri dari alat-alat modern seperti React.js, Webpack, ESLint, Babel, dll. Bagian terbaiknya adalah Anda tidak perlu mengkonfigurasi alat-alat ini sehingga Anda bisa fokus pada penulisan kode Anda.

Blok Elementor untuk Gutenberg

Plugin WordPress yang memungkinkan Anda masukkan semua template Elementor dan pratinjau langsung di dalam editor. Plugin ini dilengkapi dengan banyak kompatibilitas lain yang menyediakan pengalaman mengedit mulus antara Elementor dan Gutenberg. Lihat video ini untuk melihat bagaimana tindakannya.

Blok Atom

Satu set blok Gutenberg dengan semakin banyak koleksi. Pada saat penulisan ini, ia menyediakan “Blok Kotak Pos” yang memungkinkan Anda untuk tambahkan daftar posting situs Anda dalam tata letak kisi. Ada juga a “Blok Kesaksian” yang, seperti namanya, untuk memasukkan Testimonial ke dalam halaman. Lihat preview penuh Blok di halaman ini.

Blokir Galeri

Blok menarik untuk menyisipkan galeri gambar Anda, Blok Galeri memberikan pengalaman tanpa batas untuk menambahkan gambar ke posting Anda. Cukup letakkan gambar Anda, tata gaya tampilan galeri (gaya Masonry, Korsel, atau Layar Penuh), dan semuanya siap. Ini, saat ini, hanyalah Blok Galeri terbaik untuk WordPress.

CoBlocks

Serangkaian blok dari penulis yang sama yang mengembangkan Galeri Blok yang disebutkan di atas, CoBlocks terdiri dari sejumlah Blok yang akan meningkatkan konten situs Anda dengan seperti Akordeon, Tabel Harga, Gif, Klik untuk Tweet, dan lebih banyak Blok yang akan ditambahkan.

StagBlocks

Paket lain dari Blok Gutenberg. Plugin ini membawa sejumlah Blok menarik yang akan Anda hargai. Ini termasuk Blok Stat yang memungkinkan Anda untuk menyesuaikan statistik dalam posting dan halaman Anda. Blok Kartu Situs Web yang akan pratinjau situs web dengan gaya Kartu mewah. Blok Kode yang akan membuat kode dengan warna yang disorot.

Berang-berang Blok

Juga, koleksi Blok Gutenberg seperti “Blok Google Maps” untuk memasukkan peta, “Blok Layanan kami” untuk masukkan daftar layanan dengan tombol dalam tampilan kisi, dan “Blok Area Testimonial” untuk memasukkan daftar testimonial. Otter Block adalah kumpulan Blok Gutenberg yang akan dihargai oleh bisnis dan pengembang tema.

Blok Gutenberg Lanjutan

Plugin ini hadir dengan beberapa Blok lanjut untuk memperkaya konten Anda seperti daftar isi yang dibuat secara otomatis, “Blok Giphy” untuk memasukkan gambar GIF dari Giphy.com, “Batalkan Blokir” untuk memasukkan gambar dari Unsplash.com, “Blok Iklan Spanduk”, WooCommerce “Blok Tombol Tambah ke Keranjang”, dan masih banyak lagi.

Block Lab

Block Lab memudahkan pengembang untuk membuat Blok Gutenberg. Plugin memungkinkan Anda untuk melakukannya mendaftarkan Blok baru dengan GUI yang mudah digunakan dan templat dalam PHP. Anda bahkan tidak perlu belajar React.js.

Blok EDD

Plugin yang memungkinkan Anda untuk membuat produk Easy Digital Downloads di editor Gutenberg. Tidak seperti menggunakan Shortcode, blok akan menampilkan tampilan produk.

Tes Gutenberg

Belum siap memasang plugin Gutenberg atau memperbarui situs Anda ke WordPress 5.0? Anda bisa saja muat situs ini untuk mencoba editor baru.

Gutenberg Cloud

Ini seperti AppStore untuk Blok Gutenberg. Tempat sentral di mana Anda bisa mendapatkan Blok Gutenberg yang dapat digunakan di WordPress dan Drupal. Ya, Drupal juga akan mengadopsi editor Gutenberg untuk editor mereka.

Contoh Gutenberg

Repositori sampel kode Github untuk membuat Blok Gutenberg. Di sini Anda dapat menemukan Blok paling sederhana ke contoh yang lebih kompleks, seperti yang membuat “Blok resep” yang menetapkan templat di editor untuk ditambahkan pengguna resep konten. Referensi yang bagus untuk mereka yang lebih suka belajar dari contoh nyata, daripada buku teks.

GutenbergJS

Versi JavaScript khusus untuk Gutenberg. Ini tersedia sebagai paket NPM yang memungkinkan Anda untuk mengintegrasikan Gutenberg ke salah satu aplikasi JavaScript Anda.

Nonaktifkan Gutenberg

Meskipun Gutenberg membawa kemungkinan baru ke WordPress, tetapi tidak semua orang siap untuk itu. Jika situs Anda yang ada tidak berfungsi dengan baik dengan Gutenberg, Anda dapat menginstal plugin ini. Itu memungkinkan Anda untuk nonaktifkan editor Gutenberg untuk posting tertentu, jenis posting, peran pengguna, tema, serta menonaktifkan stylesheet Gutenberg di front-end.

Editor Klasik

Sebagai alternatif, Anda dapat menginstal plugin ini sehingga Anda dapat terus diperbarui ke WordPress 5.0 sambil tetap menggunakan editor klasik lama. Plugin ini akan didukung hingga 2022.

ClassicPress

Alternatif lain adalah beralih ke garpu WordPress, ClassicPress. Fokus ClassicPress aktif bisnis, stabilitas dan keamanan. Ini kompatibel dengan plugin WordPress dan berencana untuk menghadirkan fitur baru yang menarik di rilis mendatang. Lihat pos kami: ClassicPress: Alternatif ke WordPress tanpa Gutenberg & React.js

Mempercepat WordPress

Karena WordPress telah menjadi sangat besar; lebih dari sekadar platform blogging. Gutenberg, terutama, telah menambahkan beberapa beban tambahan, kode, file ke situs Anda yang dapat memperlambat situs Anda. Ini adalah detail yang dapat Anda rujuk untuk membantu Anda mengidentifikasi titik nyeri di situs Anda dan mengatasinya dengan praktik terbaik terbaru di industri ini.

Pratinjau Browser Visual Studio Code

Editor Visual Code yang menambahkan browser nyata yang didukung oleh Chrome Headless di dalam Visual Studio Code. Ini memungkinkan Anda untuk pratinjau pekerjaan Anda secara realtime tepat di dalam editor kode dan mengaktifkan fitur seperti debugging dalam-editor.

Bundel

Bundlesize adalah alat untuk simpan file JavaScript Anda bundling ukuran di cek. Anda dapat menentukan ukuran maksimum dari masing-masing file yang dibundel Anda dan itu akan memberi tahu Anda bila sudah mencapai atau melampaui ukuran maksimum yang ditentukan. Bundlesize dapat diintegrasikan dengan layanan CI seperti TravisCI dan CircleCI untuk penyebaran alur kerja yang mulus di proyek Anda.

WP Emerge

Modern Kerangka tema WordPress berdasarkan pola MVC. Jika Anda terbiasa bekerja dengan kerangka kerja PHP seperti Laravel dan Slim, saya yakin Anda akan sangat menghargai kerangka kerja ini. Anda dapat menggunakan hal-hal seperti Router dan Controller, DI Container, dan Middlerware.

Mercusuar Bot

Alat utilitas yang memungkinkan Anda menjalankan Mercusuar dalam layanan CI menggunakan Docker. Ini alat yang bagus untuk mengotomatiskan pemeriksaan kinerja situs web Anda setiap kali Anda mendorong perubahan baru ke kode situs web Anda.

Pelajari Bereaksi Aplikasi

Learn React App adalah sumber untuk mempelajari React.js. Tetapi tidak seperti sumber daya lain di luar sana, ini seharusnya diinstal secara lokal di komputer Anda. Itu tidak hanya berisi materi pembelajaran tetapi juga kode dan sampel interaktif. Bagian terbaiknya adalah Anda dapat melakukannya saat offline setelah diinstal.

Penerimaan WP

WP Acceptance adalah alat baru yang memungkinkan Anda untuk melakukan tes penerimaan. Sederhananya, Tes Penerimaan adalah serangkaian tes untuk meniru perilaku pengguna. Ada sejumlah kerangka kerja di luar sana untuk melakukan tes jenis ini.

Namun, jika Anda terutama bekerja dengan WordPress, Anda akan menghargai alat ini untuk kemudahan penggunaan karena dirancang dan disesuaikan dengan kebutuhan proyek WordPress yang khas..

Berkilau

Pustaka JavaScript untuk meniru pantulan cahaya pada situs web Anda ketika dilihat pada perangkat seluler. Anda dapat melihat demo di https://pqina.nl/shiny/. Perlu dicatat bahwa itu hanya akan berfungsi di perangkat seluler karena bergantung pada API tertentu yang hanya tersedia di perangkat seluler.

Bereaksi Lucid

ReactLucid adalah alat untuk membantu Anda debug aplikasi Bereaksi dan GraphQL dengan cara yang lebih interaktif. Ini memungkinkan Anda untuk melihat hierarki komponen, perubahan status / properti dalam aplikasi Bereaksi Anda serta skema GraphQL, kueri, dan mutasi secara real-time.

Fitur CSS Beralih

Ekstensi Chrome yang memungkinkan Anda nonaktifkan fitur CSS tertentu di Chrome. Dengan ini, Anda dapat melihat bagaimana situs web Anda akan membuat dan berperilaku ketika fitur-fitur tertentu tidak ada. Cukup bermanfaat untuk membantu Anda menerapkan fitur CSS baru yang mungkin tidak diterapkan di semua browser.

Blendy

Alat yang dapat membantu Anda sesuaikan mode campuran latar belakang CSS dengan gambar Anda. Anda dapat mempratinjau mode campuran, mengubah warna, dan menerapkan gradien. Anda dapat menggunakan gambar dari Unsplash atau mengunggahnya dari komputer.

Bereaksi Elemental

Kumpulan elemen Bereaksi yang bekerja tepat di luar kotak. Tidak ada CSS eksternal untuk mengimpor atau menyesuaikan konfigurasi untuk ditambahkan di Webpack. Muncul dengan komponen-komponen penting seperti Tombol, Kotak Centang, SelectList, Tab, Tooltip, dan banyak lagi.

FX

Jika Anda sering berurusan dengan format JSON, saya yakin Anda akan menghargai alat ini. fx adalah alat baris perintah yang memungkinkan Anda untuk memvisualisasikan data JSON di Terminal dengan mode interaktif. dengan cara yang Anda dapat memperluas atau menciutkan data. fx dapat diinstal melalui NPM atau Homebrew.

Monica

Monica cukup pada kategorinya sendiri. Ini semacam CRM (Customer Relationship Manager) tetapi dimaksudkan bukan untuk pelanggan Anda tetapi untuk orang yang Anda cintai seperti keluarga dan teman-teman Anda.

Seperti CRM, ini memungkinkan Anda untuk melacak hal-hal seperti aktivitas Anda dengan mereka, dan ketika Anda terakhir memanggil mereka dll. Bahkan lebih, itu dapat diatur untuk mengingatkan Anda untuk memanggil seseorang yang Anda belum bicara dalam beberapa saat. Mereka menyebutnya PRM (Personal Relationship Manager).

Kerangka Ionik

Kerangka ion sebenarnya telah ada untuk sementara waktu. Namun belakangan ini, ia telah membuat lompatan yang cukup besar dalam fungsinya. Sekarang bukan hanya lebih cepat tetapi juga ionik sekarang kompatibel dengan dua kerangka kerja bintang naik: React.js, dan Vue.js.

Ini meletakkan dasar bagi Ionic menjadi alat kerangka agnostik. Jadi tidak hanya itu bekerja untuk kerangka kerja tertentu tetapi juga dapat bekerja dengan yang baru seiring perkembangan front-end di masa depan.

Penting

Yang perlu diperhatikan adalah aplikasi desktop pencatat. Tidak seperti aplikasi serupa lainnya, itu tidak datang dengan pemformatan eksklusif, WYSIWYG, atau lonceng dan peluit khas lainnya. Itu editor aplikasi sebagian besar ditenagai oleh Markdown rasa Github. Catatan disimpan dalam file datar .md file serta lampiran. Itu hanya bekerja dan sederhana.

TipTap

TipTap adalah editor WYSIWYG yang dibangun di atas ProseMirror dengan Vue.js. Terlepas dari mewarisi sejumlah fitur dari ProseMirror di luar kotak, seperti dukungan sintaks Markdown yang mengagumkan, TipTap membawa beberapa fitur modern seperti Bubble Menu di mana menu format akan muncul ketika menyorot teks, fitur Saran tempat Anda dapat memberi tag atau menyebutkan seseorang dalam konten, dan ekspor kemampuan untuk mengekspor konten dalam format JSON.

Restplain

Restplain adalah plugin WordPress yang memungkinkan Anda untuk dengan mudah menghasilkan dokumentasi titik akhir API REST WordPress Anda termasuk titik akhir khusus di situs Anda serta membuat panggilan API dari dalam dokumen. Satu hal yang perlu diperhatikan adalah bahwa itu bergantung pada skema titik akhir untuk menghasilkan dokumentasi, jadi pastikan Anda telah menambahkan skema yang tepat untuk titik akhir kustom Anda.

Bereaksi Konten Loader

Bereaksi Konten Loader adalah komponen kustom Bereaksi yang memungkinkan Anda menampilkan placeholder konten saat konten aktual sedang dimuat. Ini mirip dengan jenis pemuat yang Anda lihat di Facebook dan Instagram .

Mythic

Mythic adalah tema pemula WordPress dengan praktik terbaik modern seperti Injeksi Ketergantungan, Tampilan, dan Pengendali, serta perkakas modern seperti penggunaan Webpack, Sass, Linting, PHP7 persyaratan minimum, dan BEM. Ini adalah tema yang bagus untuk meningkatkan keterampilan Anda sebagai pengembang tema.

Github halus

Ekstensi peramban untuk menyempurnakan pengalaman Anda saat menggunakan Github. Ini menambahkan beberapa hotkey praktis, memperbaiki beberapa tata letak dan UI, secara otomatis menambahkan tautan ke masalah dan PR, dan banyak lagi.

Buka WC

Open WC adalah seperangkat alat yang memungkinkan Anda membuat Komponen Web Kustom. Ini termasuk perpustakaan utama untuk membuat Komponen Web, generator Yeoman untuk dengan cepat menghasilkan “Buka WC” proyek, yang meliputi perancah untuk pengujian, linting, dan melanjutkan integrasi.

Open WC bisa menjadi alternatif yang baik jika Anda mau lebih suka menerapkan dengan fitur web asli daripada menggunakan kerangka kerja seperti Vue.js atau React.js.

Gridsome

Gridsome adalah a alat untuk membangun situs web dan aplikasi web statis dengan Vue.js dan GraphQL. Itu dapat menangani beberapa aliran data seperti dari CMS seperti WordPress dan Drupal, file lokal seperti Markdown atau Yaml, atau API eksternal seperti AirTable dan Contentful. Ini adalah alternatif yang sangat bagus untuk Gatsby.js, terutama jika lebih suka Vue.js daripada React.js.

Browser

Ini adalah browser yang dibayangkan oleh penemu World Wide Web sendiri, Tim Berners-Lee. Itu adalah browser sederhana untuk membuat HTML dan tidak menampilkan bilah alamat seperti browser modern tetapi Anda dapat melihatnya dengan menavigasi ke Dokumen> Buka dari referensi dokumen lengkap dan rekatkan di URL dan klik Buka. Dan di sana Anda akan melihat bagaimana situs Anda akan merender dengan browser asli.

Raster

Raster adalah kerangka kerja grid modern yang dibangun dengan spesifikasi HTML dan CSS modern seperti CSS Grid, CSS Custom Property (Variable), dan elemen kustom. Kerangka yang sempurna bagi mereka yang suka hidup di pinggiran.

Angsa liar

Komponen Vue.js untuk menambahkan Carousel atau Slider. Ini dapat diakses dan dapat digunakan melalui Touch, Keyboard, Roda Mouse, dan navigasi bantu lainnya, mendukung RTL dan arah vertikal, dapat diperluas, dan tentu saja respons.