Sumber Sumber Daya untuk Pereka dan Pembangun Web (Mac 2019)

Banyak yang telah berlaku dalam beberapa bulan kebelakangan ini dalam perkembangan web dunia. Pertama, yang baru editor berasaskan blok, diberi nama Gutenberg, akhirnya telah digabungkan menjadi WordPress 5.0. Ia adalah perubahan yang sangat besar sejak penubuhannya kerana ia menetapkan asas baharu untuk WordPress berkembang pada masa akan datang dan akan mengubah cara bagaimana pemaju melanjutkan untuk fungsi WordPress.

Kedua, beberapa pemaju sesama kita telah mencipta beberapa alat yang sangat berguna seperti yang dibenarkan lihat JSON di terminal dan beberapa perpustakaan React yang boleh membuktikan bantuan hebat dalam reka bentuk dan projek pembangunan web.

Dan akhirnya, beberapa yang paling berkesan sumber, rujukan, dan plugin telah dilancarkan untuk membantu anda mengemas kini projek anda mengikut trend yang baru.

Mari kita dapatkan senarai sumber web pembangunan yang paling komprehensif.

Buku Panduan Gutenberg

Buku panduan rasmi WordPress di mana anda boleh mencari rujukan untuk reka bentuk, contoh kod untuk membuat blok dan lain-lain dan panduan untuk menyumbang kepada projek. Ia adalah rujukan pertama anda untuk membangunkan dengan Gutenberg.

Sekat perancah

Dengan editor berasaskan blok, WP-CLI kini menyediakan cara yang mudah untuk bermula mewujudkan Blok Gutenberg dengan arahan CLI baru, blok perancah wp. Anda boleh membuat dan memasukkannya ke pemalam dan tema anda yang sedia ada.

CGB

Cara lain untuk mudah memulakan blok Gutenberg ialah Buat Guten Block (CGB) adalah alat untuk menjana boilerplate untuk membangunkan blok Gutenberg. Ia terdiri daripada alat-alat moden seperti React.js, Webpack, ESLint, Babel, dan lain-lain. Bahagian yang terbaik ialah anda tidak perlu mengkonfigurasi mana-mana alat ini jadi anda hanya boleh memberi fokus pada menulis kod anda.

Blok Elementor untuk Gutenberg

Plugin WordPress yang membolehkan anda masukkan sebarang templat Elementor dan pratontonnya tepat di dalam editor. Plugin ini dilengkapi dengan banyak kompatibilitas lain yang disediakan pengalaman penyuntingan lancar antara Elementor dan Gutenberg. Lihat video ini untuk melihat bagaimana ia melakukan tindakan.

Blok Atom

Satu set blok Gutenberg dengan jumlah koleksi yang semakin meningkat. Pada masa penulisan ini, ia menyediakan “Blok Blok Pos” yang membolehkan anda untuk tambah senarai siaran tapak anda dalam susun atur grid. Terdapat juga a “Blok Testimonial” yang, seperti namanya, menyertakan Testimoni dalam halaman. Lihat pratonton penuh Blok dalam halaman ini.

Blok Galeri

Blok menarik untuk memasukkan galeri imej anda, Blok Galeri menyediakan pengalaman lancar untuk menambah imej pada catatan anda. Hanya letakkan imej anda, gaya paparan galeri (Gaya Masonry, Carousel, atau Fullscreen), dan semuanya ditetapkan. Pada masa ini, hanya Blok Galeri terbaik untuk WordPress.

CoBlocks

Satu set blok dari pengarang yang sama yang mengembangkan Galeri Blok yang disebutkan di atas, CoBlocks terdiri daripada beberapa Blok yang akan meningkatkan kandungan tapak anda dengan seperti Akordion, Jadual Harga, Gif, Klik untuk Tweet, dan lebih banyak Blok yang hendak ditambah.

StagBlocks

Satu lagi suite Blok Gutenberg. Plugin ini membawa beberapa Blok menarik yang banyak di antara anda akan menghargai. Ia termasuk Stat Block yang membolehkan anda menyesuaikan statistik dalam jawatan dan halaman anda. Blok Kad Laman Web yang akan laman web pratonton dalam gaya Kad mewah. Blok Kod yang akan menyebabkan kod dengan warna yang diserlahkan.

Blok Otter

Juga, koleksi Blok Gutenberg seperti “Blok Peta Google” untuk memasukkan peta, “Blok Perkhidmatan kami” kepada masukkan senarai perkhidmatan dengan butang dalam paparan grid, dan “Blok Kawasan Testimoni” untuk memasukkan senarai testimoni. Blok Otter adalah koleksi Blok Gutenberg yang perniagaan dan pemaju tema akan menghargai.

Blok Gutenberg Lanjutan

Plugin ini datang dengan segelintir Blok maju untuk memperkayakan kandungan anda seperti jadual kandungan yang dijana secara automatik, “Blok Giphy” untuk menyertakan imej GIF dari Giphy.com, “Blok Unsplash” untuk memasukkan imej dari Unsplash.com, “Blok Iklan Banner”, WooCommerce “Blok Butang Add-to-Cart”, dan banyak lagi.

Blok makmal

Block Lab memudahkan para pemaju membuat Blok Gutenberg. Plugin ini membolehkan anda daftar Blok baru dengan GUI yang mesra pengguna dan template dalam PHP. Anda tidak perlu belajar React.js.

Blok EDD

Plugin yang membolehkan anda membuat produk Mudah Digital Downloads dalam editor Gutenberg. Tidak seperti menggunakan Shortcode, blok tersebut akan memaparkan pandangan produk.

Uji Gutenberg

Tidak bersedia untuk memasang plugin Gutenberg atau mengemas kini tapak anda kepada WordPress 5.0? Anda boleh jadi memuat laman ini untuk mencuba editor baru.

Gutenberg Cloud

Ia seperti AppStore untuk Blok Gutenberg. Tempat utama di mana anda boleh mendapatkannya Blok Gutenberg yang boleh digunakan di WordPress dan Drupal. Ya, Drupal juga akan mengadaptasi editor Gutenberg untuk editornya.

Contoh Gutenberg

Satu repositori Github contoh kod untuk membuat Gutenberg Blocks. Di sini anda boleh mencari Blok paling mudah kepada contoh yang lebih kompleks, seperti yang hendak dibuat “Blok Resipi” yang menetapkan templat dalam editor untuk pengguna menambah resipi kandungan. Rujukan yang baik untuk mereka yang lebih suka belajar dari contoh sebenar, dan bukan buku teks.

GutenbergJS

Versi Gutenberg sahaja JavaScript. Ia boleh didapati sebagai pakej NPM yang membolehkan anda mengintegrasikan Gutenberg ke mana-mana aplikasi JavaScript anda.

Lumpuhkan Gutenberg

Walaupun Gutenberg membawa kemungkinan baru ke WordPress, tetapi tidak semua orang bersedia untuk melakukannya. Sekiranya laman web anda tidak berfungsi dengan baik dengan Gutenberg, anda boleh memasang plugin ini. Ia membolehkan anda untuk lumpuhkan editor Gutenberg untuk jawatan tertentu, jenis pos, peranan pengguna, tema, serta melumpuhkan gaya Gutenberg di bahagian hadapan.

Editor Klasik

Selalunya, anda boleh memasang plugin ini supaya anda dapat terus dikemas kini ke WordPress 5.0 sambil terus menggunakan editor klasik lama. Plugin ini akan disokong sehingga 2022.

ClassicPress

Alternatif lain adalah beralih ke garpu WordPress, ClassicPress. Fokus ClassicPress aktif perniagaan, kestabilan dan keselamatan. Ia serasi dengan plugin WordPress dan ia merancang untuk membawa ciri menarik baru dalam siaran masa depan mereka. Semak pos kami: ClassicPress: Alternatif untuk WordPress tanpa Gutenberg & React.js

Mempercepat WordPress

Sebagai WordPress telah menjadi begitu besar; lebih daripada sekadar platform blog. Gutenberg, terutamanya, telah menambah beberapa beban tambahan, kod, fail ke laman web anda yang mungkin melambatkan laman web anda. Ini adalah perincian yang boleh anda rujuk untuk membantu anda mengenal pasti kesakitan di tapak anda dan mengatasi amalan terbaik terkini dalam industri.

Pratonton Pelayar Kod Studio Visual

Editor Kod Visual yang menambah penyemak imbas sebenar yang dikuasakan oleh Chrome Headless di dalam Kod Visual Studio. Ini membolehkan anda pratonton kerja anda secara realtime tepat di dalam editor kod dan membolehkan ciri-ciri seperti debugging dalam-editor.

Bundlesize

Bundlesize adalah alat untuk simpan fail JavaScript anda pembungkusan saiz di cek. Anda boleh menentukan saiz maksimum setiap fail bundled anda dan ia akan memaklumkan kepada anda apabila ia mengenai atau meluluskan saiz maksimum yang ditetapkan. Bundlesize boleh diintegrasikan dengan perkhidmatan CI seperti TravisCI dan CircleCI untuk penempatan kerja alir yang lancar dalam projek anda.

WP Emerge

Moden Kerangka tema WordPress berdasarkan corak MVC. Sekiranya anda terbiasa dengan rangka kerja PHP seperti Laravel dan Slim, saya pasti anda akan sangat menghargai rangka kerja ini. Anda boleh menggunakan perkara seperti Router and Controller, DI Container, dan Middlerware.

Bot Merah

Alat utiliti yang membolehkan anda menjalankan Lighthouse dalam perkhidmatan CI menggunakan Docker. Ini alat yang hebat untuk mengautomasikan pemeriksaan prestasi laman web anda setiap kali anda menolak perubahan baru ke kod tapak web anda.

Belajar React App

Learn React App adalah sumber untuk belajar React.js. Tetapi tidak seperti sumber lain di luar sana, ini sepatutnya dipasang secara setempat di dalam komputer anda. Ia bukan sahaja mengandungi bahan pembelajaran tetapi juga kod dan sampel interaktif. Bahagian yang terbaik adalah bahawa anda boleh melakukannya semasa offline setelah dipasang.

Penerimaan WP

Penerimaan WP adalah alat baru yang membolehkan anda melakukan ujian penerimaan. Untuk meletakkannya dengan mudah, Ujian Penerimaan adalah satu siri ujian untuk mencontoh tingkah laku pengguna. Terdapat beberapa kerangka di luar sana untuk melakukan ujian jenis ini.

Walau bagaimanapun, jika anda bekerja dengan WordPress terlebih dahulu, anda akan menghargai alat ini untuk kemudahan penggunaan kerana ia direka bentuk dan disesuaikan dengan keperluan projek WordPress biasa.

Berkilat

Pustaka JavaScript kepada meniru pantulan lampu di laman web anda apabila dilihat pada peranti mudah alih. Anda boleh melihat demo di https://pqina.nl/shiny/. Perlu diperhatikan bahawa ia hanya akan berfungsi dalam peranti mudah alih kerana ia bergantung pada API tertentu yang hanya tersedia dalam peranti mudah alih.

React Lucid

ReactLucid adalah alat untuk membantu anda debug React dan aplikasi GraphQL dalam cara yang lebih interaktif. Ia membolehkan anda melihat hierarki komponen, perubahan negeri / prop dalam aplikasi React anda serta skema, pertanyaan, dan mutasi GraphQL secara real-time.

Ciri CSS Togol

Pelanjutan Chrome yang membolehkan anda lumpuhkan ciri CSS tertentu dalam Chrome. Dengan ini, anda dapat melihat bagaimana laman web anda akan membuat dan bertindak apabila ciri-ciri tertentu tidak wujud. Sangat berguna untuk membantu anda melaksanakan ciri CSS baru yang mungkin tidak dilaksanakan dalam semua penyemak imbas.

Blendy

Alat yang boleh membantu anda menyesuaikan mod campuran latar belakang CSS dengan imej anda. Anda boleh pratonton mod gabungan, menukar warna, dan memohon kecerunan. Anda boleh menggunakan imej dari Unsplash atau muat naik dari komputer.

React Elemental

Satu koleksi elemen React yang berfungsi keluar dari kotak. Tiada CSS luaran untuk mengimport atau menyesuaikan konfigurasi untuk ditambahkan pada Webpack. Ia dilengkapi dengan komponen penting seperti Button, Checkbox, SelectList, Tab, Tooltip, dan banyak lagi.

FX

Jika anda sering berurusan dengan format JSON, saya pasti anda akan menghargai alat ini. fx ialah alat baris arahan yang membolehkan anda untuk memvisualisasikan data JSON di Terminal dengan mod interaktif. dengan cara yang anda boleh mengembangkan atau meruntuhkan data. fx boleh dipasang melalui NPM atau Homebrew.

Monica

Monica adalah kategori sendiri. Ia sejenis CRM (Pengurus Perhubungan Pelanggan) tetapi tidak dimaksudkan untuk pelanggan anda tetapi untuk orang yang anda sayangi seperti keluarga dan rakan anda.

Seperti CRM, ia membolehkan anda menjejaki perkara seperti aktiviti anda dengan mereka, dan apabila anda menelefon terakhir dan sebagainya. Lebih banyak lagi, ia boleh ditetapkan untuk mengingatkan anda untuk memanggil seseorang yang anda tidak pernah berbual dengannya. Mereka memanggilnya PRM (Personal Relationship Manager).

Rangka Ionik

Kerangka ionik sebenarnya telah lama wujud. Tetapi akhir-akhir ini, ia telah membuat lompatan besar dalam fungsinya. Sekarang bukan sahaja ia lebih cepat tetapi Ionic sekarang serasi dengan dua kerangka bintang yang semakin meningkat: React.js, dan Vue.js.

Ini meletakkan tanah untuk Ionic menjadi a alat agnostik rangka kerja. Jadi bukan sahaja ia berfungsi untuk kerangka kerja tertentu tetapi juga dapat bekerja dengan yang baru sebagai pembangunan front-end berkembang di masa depan.

Terkenal

Terkenal ialah aplikasi desktop yang mengambil nota. Tidak seperti mana-mana aplikasi lain yang serupa, ia tidak datang dengan pemformatan proprietari, WYSIWYG, atau lain-lain loceng dan peluit biasa. The Editor app terutamanya dikuasai oleh Markdown yang berperisa Github. Nota disimpan dalam fail rata .md fail serta lampiran. Ia hanya berfungsi dan mudah.

TipTap

TipTap adalah editor WYSIWYG yang dibina di atas ProseMirror dengan Vue.js. Selain mewarisi beberapa ciri dari ProseMirror keluar dari kotak, seperti sokongan sintaks Markdown yang hebat, TipTap membawa beberapa ciri moden seperti Menu Bubble di mana menu pemformatan akan muncul ketika menyoroti teks, ciri Cadangan di mana anda boleh menandai atau sebutkan seseorang dalam kandungan, dan mengeksport keupayaan untuk mengeksport kandungan dalam pemformatan JSON.

Rests

Restplain adalah plugin Wordpress yang membolehkan anda dengan mudah menghasilkan dokumentasi titik akhir API REST API anda termasuk titik akhir tersuai di tapak anda serta membuat panggilan API dari dalam dokumen. Satu perkara yang harus diperhatikan ialah ia bergantung kepada skema titik akhir untuk menghasilkan dokumentasi, jadi pastikan bahawa anda telah menambah skema yang sesuai untuk titik akhir tersuai anda.

React Content Loader

React Content Loader adalah komponen khusus Reaktik yang membolehkan anda memaparkan pemegang tempat kandungan semasa kandungan sebenar dimuatkan. Ia serupa dengan jenis pemuat yang anda lihat di Facebook dan Instagram .

Mythic

Mythic adalah tema starter WordPress dengan amalan terbaik moden seperti Suntikan Ketergantungan, Pandangan, dan Pengawal, serta perkakas moden seperti penggunaan Webpack, Sass, Linting, PHP7 keperluan minimum, dan BEM. Ia adalah tema yang hebat untuk meningkatkan kemahiran anda sebagai pemaju tema.

Github dimurnikan

Sambungan penyemak imbas untuk memperbaiki pengalaman anda apabila menggunakan Github. Ia menambahkan beberapa hotkey berguna, menapis beberapa susun atur dan UI, secara automatik menambahkan pautan kepada isu dan PR, dan banyak lagi.

Buka WC

WC Terbuka adalah satu set alat yang membolehkan anda membuat Component Web Custom. Ia termasuk perpustakaan utama untuk membuat Komponen Web, penjana Yeoman untuk menghasilkan dengan pantas “Buka WC” projek, yang termasuk perancah untuk ujian, linting, dan terus integrasi.

WC terbuka boleh menjadi alternatif yang baik jika anda mahu lebih suka melaksanakan dengan ciri web asli bukannya menggunakan rangka seperti Vue.js atau React.js.

Gridsome

Gridsome adalah a alat untuk membina laman web statik dan aplikasi web dengan Vue.js dan GraphQL. Ia dapat mengendalikan pelbagai aliran data seperti dari CMS seperti WordPress dan Drupal, fail tempatan seperti Markdown atau Yaml, atau API luaran seperti AirTable dan Konten. Ini adalah alternatif yang sangat baik untuk Gatsby.js, terutama jika lebih suka Vue.js over React.js.

Penyemak Imbas

Ini adalah penyemak imbas yang dilihat oleh pencipta World Wide Web sendiri, Tim Berners-Lee. Ianya adalah pelayar mudah untuk menjadikan HTML dan tidak menunjukkan bar alamat seperti penyemak imbas moden tetapi anda boleh melihat dengan menavigasi Dokumen> Terbuka dari rujukan dokumen penuh dan tampal dalam URL dan klik Buka. Dan di sana anda akan melihat bagaimana laman web anda akan dipaparkan dengan pelayar asal.

Raster

Raster adalah kerangka grid moden yang dibina dengan spesifikasi HTML dan CSS moden seperti CSS Grid, CSS Custom Property (Variable), dan elemen adat. Rangka kerja yang sempurna untuk mereka yang suka hidup di tepi.

Hooper

Satu komponen Vue.js untuk menambah Carousel atau Slider. Ia boleh diakses dan boleh digunakan melalui Sentuhan, Papan Kekunci, Roda Tetikus, dan navigasi bantuan lain, ia menyokong arah RTL dan menegak, diperluas, dan tentunya tindak balas.