Satu tahun telah berlalu dan saya sekali lagi dihormati untuk mengkaji semula arkib surat berita mingguan Web Alat selama 12 bulan yang lalu, mencari beberapa pembaca alat depan yang paling menarik yang dicari pada tahun 2021. Oleh itu, untuk memulakan 2022, saya telah menyusun senarai 60 alat yang paling popular. Saya percaya terdapat sekurang-kurangnya satu atau dua alat di sini yang boleh anda gunakan dalam projek front-end anda bermula hari ini.

Sesetengah alat front-end sangat praktikal, sementara yang lain mungkin berada dalam senarai hanya kerana rasa ingin tahu (saya menilai dengan jumlah klik sahaja). Oleh kerana banyak alat yang membuat senarai tahunan saya agak baru, saya fikir ini adalah petunjuk yang baik tentang alat-alat depan yang akan menjadi popular pada tahun yang akan datang.

Kira dari atas ke bawah!

- 60. Prop terbuka

• 59. Nextui
• 58. Dopefolio
• 57. Vizzu
• 56. 10015 Alat
• 55. Snoweb
• 54. Ekor
• 53. Maplibre
• 52. SVG Repo
• 51. Latar belakang animasi
• 50. Pico.css
• 49. Fon pengekodan
• 48. Ui-neumorphism
• 47. Butang CSS yang indah
• 46. Pembentuk
• 45. Prestij
• 44. Html.cafe
• 43. Charts.css
• 42. Generator Butang
• 41. Penjana corak doodad
• 40. Kaboom
• 39. Skuawk
• 38. Glassmorphism CSS Generator
• 37. Kalia
• 36. Adminjs
• 35. Pancake
• 34. Mosaic lite
• 33. Iconduck
• 32. Luxa CSS
• 31. Glitter
• 30. Komponen ai
• 29. Anak panah Unicode
• 28. Jenis penjana pengapit skala
• 27. Animxyz
• 26. Frontend Toolkit
• 25. colorspalettes.earth
• 24. Tidak dipotong
• 23. Lowdefy
• 22. JavaScript Booster
• 21. Corak susun atur
• 20. Remover latar belakang asas
• 19. Theatre.js
• 18. Peralihan.css
• 17. Galeri Komponen
• 16. parti.js
• 15. UI tanpa kepala
• 14. Turbo
• 13. rapi.js
• 12. Ekor-kit
• 11. Komponen Tailwind
• 10. Pikaday
• 9. HTML boilerplates
• 8. Pusaran
• 7. Riju
• 6. DEVUI
• 5. Debunga
• 4. Alternatif
• 3. Uisual
• 2. Supabase UI
• 1. Penjana susun atur CSS
• Apakah alat front-end kegemaran anda untuk 2021?

### 60. Buka alat peraga

Props Open menyediakan satu set token reka bentuk buatan tangan yang terdiri daripada sifat tersuai CSS. Oleh kerana ciri CSS khas ini, saya dapat melihat bahawa alat tersebut akan menjadi lebih dan lebih biasa. Mereka membolehkan anda memperkenalkan koleksi atribut tersuai yang kecil dan berguna seperti animasi.css, sempadan.css, fonts.css, zindex.css, dan banyak lagi akan tersedia tidak lama lagi. Atau anda hanya boleh menggunakan fail prop terbuka utama untuk mendapatkan semuanya sekaligus.

Ini pastinya alat depan untuk diperhatikan, dan ia juga merupakan matlamat sumbangan yang baik jika anda ingin membantu membina perpustakaan token yang tersedia.

59. Nextui

Perpustakaan React Modern yang menggunakan jahitan penyelesaian CSS-in-JS yang popular dan termasuk komponen cahaya dan komponen UI yang gelap bersama-sama dengan palet warna lalai, yang boleh berguna untuk membina halaman log masuk dengan cepat atau kandungan lain yang tidak pada asalnya dikaitkan dengan mana-mana jenama.

Ia kini disenaraikan sebagai fasa pembangunan alpha, jadi ia adalah satu lagi alat yang patut diberi perhatian pada tahun yang akan datang.

58. Dopefolio

Jika anda mencari cara untuk membuat portfolio pemaju anda sendiri, Dopefolio adalah penyelesaian cepat yang dioptimumkan untuk SEO dan mempunyai skor rumah api yang tinggi dari kotak.

Demo langsung memberitahu anda apa yang kelihatannya (responsif, dan lain -lain), dan ia mengandungi komponen pemilih warna supaya anda dapat menguji warna utama templat pilihan anda sendiri dalam masa nyata.

57. Vizzu

Ini adalah alat yang unik pada senarai alat front-end tahun ini. Vizzu adalah perpustakaan JavaScript sumber terbuka untuk mencipta cerita dan visualisasi data animasi. Mungkin popularitinya adalah kerana keperluan untuk membuat dan menanamkan data perubatan hari ini.

Perpustakaan ini membolehkan anda dengan mudah membina carta data statik, carta animasi, dan cerita data. Anda boleh melihat beberapa contoh langsung carta animasi atau cerita data, termasuk cerita data yang menunjukkan watak Cameo yang mempunyai garis paling banyak sepanjang seluruh run dari siri TV Friends.

56. 10015 alat

Saya seolah-olah mencari beberapa alat front-end seperti ini setiap tahun. Alat 10015 adalah satu set alat front-end, bukan satu alat. Ia termasuk alat teks, alat imej, alat CSS, alat pengekodan (seperti minifiers), alat warna, alat media sosial, dan alat di bawah beberapa kategori lain.

Ini pastinya salah satu penyelesaian all-in-one yang lebih komprehensif yang saya lihat, jadi saya pasti anda akan dapati beberapa alat depan yang berguna di sini yang anda boleh kembali menggunakannya.

55. Snoweb

Set ikon sentiasa popular dan saya menjumpai sekurang -kurangnya sedozen ikon baru setiap tahun. Set ikon ini mengandungi ikon SVG yang dioptimumkan, yang kebanyakannya mempunyai animasi terbina dalam apabila anda melayang ke atasnya (seperti ikon sampul pembukaan/penutup).

Seperti banyak laman ikon, anda boleh mencari mengikut kata kunci atau penapis mengikut kategori, salah satunya adalah kategori jenama, yang mengandungi ikon untuk Twitter, Facebook, Vimeo, YouTube, Snapchat, dan banyak lagi.

54. Ekor

Ini adalah alat berasaskan tailwind pertama untuk membuat senarai ini; Alat front-end ini adalah pembina halaman drag-and-drop untuk projek menggunakan CSS Tailwind.

Ia mengandungi dua "blok" percuma untuk setiap 15 kategori, jadi terdapat banyak barangan percuma di sini yang anda boleh bayar untuk membuka kunci yang lain setiap bulan.

53. Maplibre

Galeri peta sumber terbuka ini dilancarkan pada bulan Mac dan telah menjadi popular sepanjang tahun. Ia mengandungi perpustakaan JavaScript dan SDK untuk memaparkan peta dalam aplikasi iOS dan Android.

Jika anda ingin memahami kemungkinan alat front-end berasaskan web, dokumentasi ini mengandungi banyak contoh menggunakan JavaScript.

52. SVG Repo

SVG Repo berada dalam senarai sepenuhnya berdasarkan nombor. Ia adalah perpustakaan lebih daripada 300,000 grafik dan ikon berasaskan SVG yang dioptimumkan, yang kebanyakannya dibenarkan untuk kegunaan komersil.

Setiap ikon yang anda pilih akan memberitahu anda lesen mana yang dimilikinya. Anda boleh mencari dengan kata kunci dan "simpan" ikon kegemaran anda untuk kegunaan kemudian (tiada login diperlukan).

51. Latar belakang animasi

Alat ini berada di Top 60 tahun ini, tetapi ia mungkin bukan alat front-end yang paling praktikal di kalangan mereka. Seperti yang saya katakan pada mulanya, ada perkara yang diklik daripada rasa ingin tahu yang tulen. Ia adalah perpustakaan latar belakang animasi, dari pelbagai demonstrasi codepen.

Perpustakaan ini berguna kerana ia memaparkan latar belakang sebagai video pra-rakaman, jadi anda tidak perlu bimbang tentang semua demo memuatkan dan menyebabkan tab penyemak imbas jatuh. Gunakan alat ini dengan teliti (jika ada) kerana mereka biasanya menggunakan banyak JavaScript dan CSS.

50. Pico.css

Ini berbeza dengan kerangka CSS yang popular hari ini. Ia agak seperti alat anti-ekor, lebih seperti fail CSS permulaan (seperti Reset) daripada rangka kerja penuh.

Pico.css menyediakan gaya lalai yang elegan untuk semua elemen HTML asli (anda boleh pratonton di sini) tanpa menambah banyak kelas ke tag anda - dan keseluruhan fail lebih kecil daripada 10kb selepas gzip.

49. Fon pengekodan

Fon pengekodan seolah-olah menjadi trend baru yang menarik akhir-akhir ini, dan CSS-Tricks mengambil kesempatan ini untuk membuat aplikasi maklumat interaktif kecil ini.

Pilih fon di sebelah kiri untuk memaparkan kod sampel, maklumat fon (tanda hubung, italik, dan lain -lain), kos (kebanyakannya percuma), dan pilihan untuk memaparkan kod sampel HTML, CSS, atau JavaScript.

48. UI-Neumorphism

Perpustakaan React ini didasarkan pada trend simulasi lama yang kelihatan ketinggalan zaman beberapa tahun yang lalu. Adakah trend ini akan kembali? Mungkin tidak. Malah, walaupun saya berkongsi perpustakaan React ini untuk kali pertama tahun lepas, sudah ada selama dua tahun.

Perpustakaan mengandungi sejumlah besar komponen yang berbeza, yang semuanya mencapai penampilan "simulasi baru". Menariknya, tetapi mungkin tidak sesuai untuk banyak projek.

47. Butang CSS yang indah

Hampir setiap aplikasi atau laman web memerlukan butang, jadi koleksi seperti itu sentiasa popular. Banyak butang ini berbeza dari apa yang anda lihat di tempat lain.

Banyak butang mengandungi kesan hover yang menarik, dan anda boleh menyalin dan menampal HTML dan CSS dengan mudah dari mana -mana butang tunggal secara langsung pada halaman.

46. ??Shaper

Alat interaktif ini membolehkan anda menyesuaikan pelbagai tetapan UI pada halaman dalam masa nyata untuk membina elemen halaman yang berbeza. Sebaik sahaja anda telah menyesuaikan kandungan untuk keutamaan anda, anda boleh mendapatkan kod yang menggunakan sifat tersuai CSS.

Anda boleh bertukar antara paparan demo dan paparan "spesifikasi" (iaitu kod dan maklumat berguna lain). Alat ini memberi tumpuan kepada tipografi dan seluruh gaya UI, yang merupakan bahagian penting dalam membuat susun atur kelihatan betul.

45. Prestige

Ini adalah pelanggan HTTP berasaskan teks dalam postman seperti pelayar, tetapi tanpa antara muka. Ia membolehkan anda menentukan permintaan dalam teks biasa, yang boleh anda pilih untuk menyimpan sebagai intipati. Ia termasuk pengurusan kuki terpencil dan mempunyai mod cahaya dan gelap.

Seperti yang dijelaskan oleh penulis, "Saya mencipta Prestige kerana saya memerlukan aplikasi seperti ini apabila saya bekerja ... dan berinteraksi dengan API luaran."

44. html.cafe

Ini mungkin alat paling mudah di seluruh senarai. Html.cafe lebih kurang codepen yang rendah hati, kurang istilah yang lebih baik. Saya tidak fikir orang akan berminat dengan perkara seperti ini kerana ada alat yang sudah berkuasa untuk melakukan apa yang boleh dilakukannya. Walau bagaimanapun, ia adalah editor HTML yang sangat mudah dengan keupayaan pratonton masa nyata.

Ia tidak mempunyai tetingkap CSS atau JavaScript yang berasingan seperti Codepen, tetapi anda boleh melakukannya dengan mudah