15+ Alat Ujung Depan Yang Harus Anda Ketahui: Temuan Favorit Saya untuk 2020

Satu tahun lagi telah berlalu dan jika Anda menyukai banyak pengembang web di industri ini, Anda mungkin telah menemukan banyak alat front-end baru yang Anda pertimbangkan untuk dimasukkan ke dalam alur kerja Anda. Saya berada di kapal yang sama, terutama karena saya sangat terlibat dalam meneliti apa yang baru lanskap alat.


Dalam posting ini, Saya akan mengumpulkan (dengan beberapa tangkapan layar dan demo) beberapa alat front-end paling menarik yang saya temukan bahwa saya pikir Anda akan menemukan berguna di tahun 2020. Ini bukan alat yang paling populer atau alat terpanas, tapi saya pikir masing-masing adalah unik dalam hal penggunaannya dan pantas mendapat sedikit perhatian. Ini pada dasarnya milik saya penemuan favorit tahun ini di alat front-end.

Alat Front-End Terbaik

Hotkey

Alat Front-End: Hotkey

Mendeteksi penekanan tombol dengan JavaScript bukanlah tugas yang terlalu rumit, tetapi utilitas kecil ini dari tim di GitHub menjadikannya super sederhana.

Dengannya, Anda dapat memicu aksi pada elemen dengan pintasan keyboard.

Jenis cara pintas termasuk kunci, kombo kunci, atau bahkan urutan tombol. Anda juga dapat memiliki beberapa pintasan untuk satu tindakan.

JavaScript hanyalah satu deklarasi bersama dengan impor:

impor {install} dari ‘./hotkey.js’;

for (const el document.querySelectorAll (‘[data-hotkey]’)) {
pasang (el)
}

Setelah kode itu di tempat, pekerjaan utama dilakukan dalam HTML. Berikut daftar tautan yang saya buat untuk menampilkan beberapa konten tergantung pada pintasan yang digunakan:

  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh

Perhatikan atribut hotkey data yang ditambahkan ke masing-masing tautan. Inilah yang memungkinkan hotkey untuk tindakan yang ditargetkan (dalam hal ini, memicu pemilih target: melalui CSS). Beberapa hotkey dipisahkan oleh koma; kombinasi tombol dipisahkan oleh simbol plus; dan urutan kunci dipisahkan oleh spasi.

Ini demo langsung:

Cobalah setiap pintasan dan perhatikan bahwa kode di panel JavaScript minimal. Sangat mudah diatur, setelah modul diimpor. Dan sebagai titik samping di sini, jika Anda memiliki aplikasi dengan beberapa tombol cara pintas yang ingin Anda tampilkan di jendela modal (seperti yang dilakukan di Twitter, GitHub, dll.), Anda mungkin ingin memeriksa QuestionMark.js, dan proyek lama saya.

Tentu saja, dengan pintasan keyboard, Anda ingin mencatat masalah aksesibilitas jadi pastikan untuk memeriksa README repo untuk info tentang itu.

Freezeframe.js

Alat Front-End: Freezeframe.js

Menyematkan video singkat di halaman web adalah hal biasa untuk menunjukkan tindakan yang terjadi. Terkadang GIF animasi juga sesuai. Tetapi GIF cenderung mengganggu karena mereka memutar konten mereka secara otomatis.

Utilitas kecil ini memungkinkan Anda untuk menambahkan fungsionalitas seperti video ke GIF animasi yang tertanam di HTML Anda.

Setelah Anda memasukkan sumber Freezeframe.js di halaman Anda, Anda hanya perlu satu deklarasi JavaScript:

Freezeframe baru (‘. freezeframe’, {
pemicu: ‘arahkan’,
hamparan: salah
});

Jika Anda mengabaikan argumen kedua (mis. Freezeframe baru (‘. Freezeframe’)), maka akan default ke tidak ada tombol putar dan animasi dipicu pada hover. Satu-satunya kelemahan dengan ini adalah bahwa, karena ini adalah GIF animasi, Anda secara teknis tidak bisa "jeda" itu, kamu hanya bisa "berhenti" itu (yang artinya dimulai lagi dari awal). Tetapi biasanya dengan GIF, ini bukan masalah besar.

Inilah demo dengan tiga contoh berbeda:

Menggunakan alat ini saja, bagaimanapun, mungkin tidak menghemat kinerja karena tampaknya beban penuh GIF di belakang layar. Tapi saya berasumsi ini bisa digunakan bersama dengan pustaka pemuatan malas jika GIF dimatikan saat laman dimuat.

ARC Toolkit

Alat Front-End: ARC Toolkit

Alat go-to front-end Anda harus mencakup banyak opsi aksesibilitas.

Ini adalah ekstensi Chrome yang menambahkan tab ke alat pengembang Anda untuk membantu Anda menemukan kesalahan aksesibilitas dan peringatan yang terkait dengan pedoman WCAG 2.1 Level A dan AA.

Dua alasan mengapa alat ini sangat bagus:

  • Ini terintegrasi dengan alur kerja pengujian / debugging yang ada di dalam alat pengembang
  • Itu dibuat oleh The Paciello Group, yang terkenal di komunitas pengembang untuk wawasan aksesibilitas mereka

Fitur ARC Toolkit

Setelah ekstensi diinstal, cukup pilih tab di alat pengembang Anda dan pilih "Jalankan Tes". Output awal akan mirip dengan apa yang Anda lihat di screenshot sebelumnya. Dari sana Anda dapat menelusuri untuk melihat potensi masalah aksesibilitas apa pun yang terkait dengan fitur tertentu, seperti yang ditunjukkan pada tangkapan layar berikutnya:

ARC Toolkit Fitur Menjelajahi

Perhatikan "Tautan" Opsi di sebelah kiri memiliki tanda centang di sebelahnya. Itulah yang saya pilih untuk diperiksa dalam hal ini. Ini juga menambahkan hamparan pada halaman yang menunjukkan di mana semua objek yang dipilih, seperti yang Anda lihat di atas alat pengembang di halaman langsung.

Scene.js

Alat Front-End: Scene.js

Setiap tahun tampaknya ada semacam perpustakaan animasi baru di lanskap alat front-end.

Pilihan saya untuk tahun ini adalah Scene.js.

Ini bukan salah satu yang bisa kamu ambil dan kerjakan dalam hitungan menit seperti yang lainnya sejauh ini.

Ada kurva belajar untuk terbiasa dengan API, yang terlihat seperti ini:

let scene = Scene baru ({
".kotak pencarian": {
"0%" : "lebar: 50px",
"70%": "lebar: 300px",
},
".baris": {
"30%" : "lebar: 0%",
"100%": "lebar: 100%",
}
}, {
Durasi: 1,
pelonggaran: Adegan.EASE_IN_OUT,
pemilih: benar,
}). exportCSS ();

scene.setTime (0);
biarkan toggle = false;

document.querySelector (".Kirimkan") .addEventListener ("klik", function () {
toggle =! toggle;
scene.setDirection (beralih ? "normal" : "balik");
scene.play ();
});

Itulah kode untuk salah satunya contoh di halaman rumah. Ini kotak pencarian kecil yang sederhana. Ini demo CodePen mereka:

Sekali lagi, ini tidak akan menjadi alat yang mudah untuk dipelajari dengan cepat, tetapi jika Anda tertarik untuk mencoba perpustakaan animasi baru dengan apa yang tampaknya menjadi API yang cukup mudah, ini mungkin merupakan pilihan yang baik.

Komentar

Alat Front-End: Commento

Lansekap online yang sadar privasi saat ini dapat menggunakan lebih banyak alat seperti ini. Saya telah mempertimbangkan opsi untuk sistem komentar yang ditingkatkan di situs WordPress saya untuk sementara waktu sekarang dan Commento terlihat solid.

Saya suka fungsionalitas seperti Disqus (upvotes / downvotes, komentar top, dll.) Tetapi ada terlalu banyak kembung.

Saya juga suka bahwa komentar WordPress di-hosting sendiri secara default, tetapi mereka tidak memiliki fitur-fitur tambahan Disqus. Saya pikir Commento adalah langkah ke arah yang benar untuk memperbaiki masalah ini.

Jika Anda mempertimbangkan untuk beralih dari platform komentar yang ada ke Commento, itu adalah sedikit kerja dari apa yang saya baca, jadi itu kerugian besar.

Juga, walaupun Commento memungkinkan Anda untuk mengimpor dari Disqus, Anda tidak akan dapat mengimpor "suara" pada komentar lama dari Disqus atau avatar dari pengguna yang memposting komentar.

Juga tidak ada cara untuk mengimpor komentar WordPress lama ke dalam Commento kecuali jika Anda terlebih dahulu mengekspor ke Disqus, kemudian mengimpor dari Disqus ke Commento (yang dapat dilakukan menggunakan alat impor Disqus ketika Anda mendaftar untuk Commento).

Kelemahan terakhir adalah fakta bahwa Commento tidak gratis kecuali jika Anda meng-host-nya sendiri. Tetapi ketika Anda mempertimbangkan masalah kembung dan privasi Disqus, biaya bulanan yang kecil bermanfaat.

Sejarah Git

Alat Front-End: Git History

Meskipun ini tidak semata-mata dalam kategori alat front-end, ini adalah salah satu favorit saya dalam daftar ini karena kesederhanaan dan kebaruan dalam cara kerjanya.

Git History memungkinkan Anda untuk melihat histori untuk file apa pun di repo Git publik (GitHub, GitLab, atau Bitbucket).

Misalnya, katakanlah Anda ingin melihat riwayat perubahan pada sumber data untuk Normalisasi.css. File ini terletak di:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Untuk melihat riwayatnya, ganti github.com di URL dengan github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

Output di URL baru memuat cara yang rapi dan interaktif untuk melihat perubahan file dari waktu ke waktu. Beberapa animasi keren dipicu setiap kali Anda memilih titik riwayat, memungkinkan Anda untuk melihat perubahan mana yang terjadi dan pengguna mana yang menyetujuinya.

Beralih Fitur CSS

Front-End Tools: Fitur CSS Beralih

Jika Anda masih bekerja di lingkungan di mana Anda harus melakukan beberapa pengujian browser lama, ini mungkin ekstensi Chrome kecil yang bagus untuk ditambahkan ke kotak alat pengujian Anda.

Toggles Fitur CSS, mirip dengan ARC Toolkit yang disebutkan di atas, menambahkan tab baru ke alat pengembang browser Anda.

Di tab, Anda akan melihat daftar fitur CSS modern.

Fitur CSS Tersedia untuk Beralih

Anda dapat beralih ini untuk langsung melihat bagaimana halaman Anda terlihat ketika pengguna mengunjungi halaman di browser yang tidak mendukung fitur tertentu. Ini adalah cara yang bagus untuk mendapatkan gambaran umum singkat tentang bagaimana tata letak Anda menurun di lingkungan yang lebih tua.

Saat memilih berbagai fitur, halaman akan diperbarui secara otomatis untuk menampilkan perubahan. Situs yang dibangun dengan Flexbox, misalnya, akan mendapat manfaat dari beberapa CSS yang lebih lama agar tata letak tetap waras sementara semakin disempurnakan di peramban yang lebih baru.

Buat Aplikasi

Alat Front-End: Buat Aplikasi

Tidak diragukan lagi alur kerja alat front-end Anda mencakup banyak opsi untuk pembuatan. Situs web ini adalah kombinasi dari situs pembelajaran dan alat pembangkit proyek untuk pengembang yang menggunakan (atau ingin mempelajari cara menggunakan) webpack atau Parcel, bundler aset populer.

Telusuri ke dalam kategori di sebelah kiri untuk memilih opsi yang Anda inginkan untuk bangunan Anda, kemudian lihat file yang diperlukan dan opsi konfigurasi muncul di jendela utama.

Buat Opsi Konfigurasi Aplikasi

Halaman ini sepenuhnya interaktif, sehingga Anda dapat mengklik salah satu file virtual untuk melihat kontennya, atau Anda dapat mengarahkan kursor ke opsi yang dipilih untuk melihat deskripsi bersama dengan bagian-bagian yang disorot dari build yang relevan dengan opsi itu.

Sangat berguna untuk pembelajaran dan untuk membuat proyek baru!

CSSJanus

Alat Front-End: CSS Janus

Di bidang internasionalisasi, ini adalah alat online yang memungkinkan Anda untuk mengubah stylesheet dari kiri ke kanan ke kanan ke kiri, dan sebaliknya.

Ini memungkinkan Anda untuk dengan mudah membuat stylesheet untuk bahasa kanan-ke-kiri (rtl) seperti Arab dan Ibrani.

Ini contoh CSS:

.contoh {
mengapung: kiri;
perataan teks: kiri;
padding: 1px 2px 3px 4px;
margin-kiri: 1em;
posisi latar belakang: 5% 100px;
kursor: ne-resize;
border-radius: 1px 2px;
}

Di atas akan dikonversi menjadi yang berikut:

.contoh {
mengapung: benar;
perataan teks: kanan;
padding: 1px 4px 3px 2px;
margin-right: 1em;
posisi latar belakang: 95% 100px;
kursor: nw-ubah ukuran;
border-radius: 2px 1px;
}

Perhatikan bahwa perbedaannya tidak hanya mencakup baris seperti float: left dan text-align: left tetapi yang lain menyukai deklarasi padding horizontal dan nilai posisi latar belakang.

Dan bermanfaat, jika Anda ingin alat mengabaikan blok gaya atau deklarasi tunggal, Anda dapat menggunakan direktif @noflip:

/ * @noflip * / .ignored {
mengapung: kiri;
}

.tidak-diabaikan [
mengapung: kiri;
/ * @noflip * / background: #fff (poster-ltr.png);
}

Pencuri warna

Alat Front-End: Pencuri Warna

Pencuri Warna benar-benar rapi dan cukup mudah digunakan tetapi sangat spesifik dalam kasus penggunaannya.

Pada dasarnya, menggunakan utilitas ini, Anda dapat menggunakan JavaScript untuk mengambil palet warna di mana saja dari 2 hingga 20 warna berdasarkan gambar yang diberikan.

Ini bukan sesuatu yang akan Anda gunakan di setiap situs web atau aplikasi, tetapi itu ide yang bagus dan tampaknya telah ada selama beberapa waktu dan telah diperbarui selama setahun terakhir..

Menggunakan API sederhana, Anda bisa mengambil palet dari gambar dengan satu baris:

biarkan myPalette = colorThief.getPalette (img, 10);

Dari sana, itu hanya masalah memanipulasi array yang dikembalikan. Anda dapat melihat demo yang saya buat di CodePen di bawah ini yang mengambil sejumlah warna yang dimasukkan pengguna dari gambar yang ditampilkan. Kode yang saya gunakan pada array adalah:

myPalette.forEach (
elemen => colors.innerHTML + = ""
);

Saya membangun palet menggunakan elemen dan gaya inline. Warna dikembalikan sebagai nilai RGB.

Dalam demo CodePen, saya menggunakan solusi untuk mengatasi masalah lintas-asal yang saya alami di CodePen, tetapi biasanya Anda tidak akan memerlukan baris tersebut (dikomentari) di lingkungan biasa.

RegexGuide

Alat Front-End: RegexGuide

Sepertinya setiap tahun saya menemukan aplikasi interaktif yang keren untuk ditambahkan ke koleksi alat ujung depan saya yang membantu membangun ekspresi reguler, jadi inilah entri tahun ini. Dan jika Anda menyukai saya, Anda akan mengambil semua bantuan untuk membangunnya.

Yang ini agak aneh untuk mendapatkan kepala Anda pada awalnya karena melewati langkah-langkah satu per satu, seperti penyihir.

Ketika Anda selesai dan memiliki semua kondisi di tempat, Anda dapat mencoba nilai yang berbeda untuk memenuhi kondisi yang ditentukan dan halaman akan secara interaktif menunjukkan apa yang berfungsi.

Alat-alat semacam ini selalu menjadi favorit saya karena mereka berfungsi tidak hanya sebagai cara untuk membuat kode yang seharusnya membosankan, tetapi mereka juga membantu Anda mempelajari sintaks juga.

Alat front-end: sebutan terhormat

Jadi menurut saya, itulah beberapa alat front-end yang lebih menarik yang saya temukan yang saya pikir tidak mendapatkan cukup perhatian selama setahun terakhir. Saya yakin Anda memiliki temuan Anda sendiri, jadi silakan taruh di komentar di bawah. Sementara itu, berikut adalah daftar hal-hal terakhir yang tidak masuk daftar utama tetapi saya pikir layak disebutkan:

  • wehatecaptchas – Alternatif captcha tanpa gambar atau huruf / angka menguraikan, bahkan kotak centang untuk "konfirmasi saya bukan robot"
  • simpleParallax – Cara mudah untuk melakukan efek paralaks dengan JavaScript.
  • Embed YouTube Lite – Rupanya 224X lebih cepat dari kode embed tradisional.
  • Gaya Default Peramban – Masukkan elemen HTML apa saja dan alat ini akan memberi tahu Anda CSS default browser untuk elemen itu.
  • Siapa yang Bisa Menggunakan – Masukkan kombinasi dua warna dan alat ini akan memberi tahu Anda jenis pengguna tunanetra mana yang dapat menggunakan kombo itu untuk teks / latar belakang.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Tata ruang dan presentasi oleh Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map