🚀10 Trending project di GitHub untuk pengembang web – 23 April 2021

Trending Projects tersedia sebagai buletin mingguan, harap daftar di www.iainfreestone.com untuk memastikan Anda tidak pernah melewatkan satu masalah pun.

1. git-tips

Tip dan trik git yang paling umum digunakan.

2. Pkg

Antarmuka baris perintah ini memungkinkan Anda untuk mengemas proyek Node.js Anda menjadi sebuah executable yang dapat dijalankan bahkan pada perangkat yang tidak memasang Node.js.

Logo GitHub vercel / pkg

Kemas proyek Node.js Anda menjadi file yang dapat dieksekusi

Penafian: pkg dibuat untuk digunakan di dalam kontainer dan tidak dimaksudkan untuk digunakan di lingkungan tanpa server. Bagi mereka yang menggunakan Vercel, ini berarti tidak ada persyaratan untuk menggunakan pkg dalam proyek Anda karena manfaat yang diberikannya tidak berlaku untuk platform tersebut.

Status Bangun Status Ketergantungan DevDependency Status

Antarmuka baris perintah ini memungkinkan Anda untuk mengemas proyek Node.js Anda menjadi dapat dieksekusi yang dapat dijalankan bahkan pada perangkat tanpa Node.js diinstal.

Gunakan Kasus

  • Buat versi komersial aplikasi Anda tanpa sumber
  • Buat versi demo / evaluasi / uji coba aplikasi Anda tanpa sumber
  • Secara instan membuat file yang dapat dieksekusi untuk platform lain (kompilasi silang)
  • Buat semacam arsip atau penginstal yang mengekstrak sendiri
  • Tidak perlu menginstal Node.js dan npm untuk menjalankan aplikasi yang dikemas
  • Tidak perlu mengunduh ratusan file melalui npm install untuk menerapkan aplikasi Anda. Terapkan sebagai satu file
  • Letakkan aset Anda di dalam file yang dapat dieksekusi untuk membuatnya lebih portabel
  • Uji … Anda

3. React & Redux di TypeScript – Panduan Lengkap

Panduan lengkap untuk mengetik statis di aplikasi "React & Redux" menggunakan TypeScript

Logo GitHub piotrwitek / react-redux-typescript-guide

Panduan lengkap untuk mengetik statis di aplikasi "React & Redux" menggunakan TypeScript

React & Redux di TypeScript – Panduan Lengkap

"Panduan ini adalah ringkasan hidup yang mendokumentasikan pola dan resep paling penting tentang cara menggunakan React (dan Ekosistemnya) dalam gaya fungsional menggunakan TypeScript . Ini akan membantu Anda membuat kode Anda sepenuhnya aman untuk mengetik sambil berfokus pada menyimpulkan jenis dari implementasi sehingga lebih sedikit gangguan yang berasal dari anotasi jenis yang berlebihan dan lebih mudah untuk menulis serta mempertahankan jenis yang benar dalam jangka panjang. "

Bergabunglah dengan komunitas di Spectrum Bergabunglah dengan obrolan di https://gitter.im/react-redux-typescript-guide/Lobby

Merasa berguna? Ingin pembaruan lebih lanjut?

Tunjukkan dukungan Anda dengan memberikan ⭐

Belikan Aku Kopi Menjadi Pelindung

Apa yang baru?

🎉 Sekarang diperbarui untuk mendukung TypeScript v3.7 🎉 🚀 _Diupdate ke typesafe-actions@5.xx 🚀

Tujuan

  • Keamanan tipe lengkap (dengan --strict flag) tanpa kehilangan informasi tipe di hilir melalui semua lapisan aplikasi kita (mis. Tidak ada pernyataan tipe atau peretasan dengan tipe any
  • Buat anotasi jenis ringkas dengan menghilangkan redundansi dalam jenis menggunakan fitur Bahasa TypeScript lanjutan seperti Type Inference dan…

4. Bereaksi Kawaii

React Kawaii adalah pustaka ilustrasi SVG yang lucu (komponen reaksi). Ideal jika Anda ingin memberikan kelucuan dan kepribadian pada aplikasi reaksi Anda.

Logo GitHub miukimiu / react-kawaii

Komponen Bereaksi SVG Lucu

React Kawaii

React Kawaii adalah pustaka ilustrasi SVG yang lucu (komponen reaksi). Ideal jika Anda ingin memberikan kelucuan dan kepribadian pada aplikasi reaksi Anda.

Versi: kapan npm

Contoh

Contoh React Kawaii

Install

Dengan npm:

 npm install --save react-kawaii

Dengan benang:

 benang tambahkan react-kawaii

Cara Penggunaan

 impor { Planet } dari 'react-kawaii' ;
const Contoh = ( ) => < Planet size = { 200 } mood = "blissful" color = "# FDA7DC" / > ;

Cara menggunakan dengan React Native

 impor { Planet } dari 'react-kawaii / lib / native /' ;
const Contoh = ( ) => < Planet size = { 200 } mood = "blissful" color = "# FDA7DC" / > ;

Bergantung pada react dan react-native Anda, Anda mungkin perlu menginstal paket react-native-svg :

Dengan npm:

 npm install react-native-svg

Dengan benang:

 benang tambahkan react-native-svg

Tautkan react-native:

 link react-native react-native-svg

Baca dokumentasi react-native-svg jika Anda membutuhkan bantuan.

Pengembangan

Begitu…

5. react-textarea-autosize

Drop-in pengganti untuk komponen textarea yang secara otomatis mengubah ukuran textarea sebagai perubahan konten.

Logo GitHub Andarist / react-textarea-autosize

<textarea /> komponen untuk React yang tumbuh dengan konten

versi npm npm

react-textarea-autosize

Drop-in pengganti untuk komponen textarea yang secara otomatis mengubah ukuran textarea sebagai perubahan konten. Versi React asli dari jQuery Autosize yang populer! Beratnya sekitar 1.3KB (diperkecil & di-gzip).

Modul ini mendukung IE9 ke atas.

 impor TextareaAutosize dari 'react-textarea-autosize' ;
// Jika Anda menggunakan sintaks CommonJS:
// var TextareaAutosize = membutuhkan ('react-textarea-autosize'). default;
Bereaksi . renderComponent ( < div > < TextareaAutosize / > < / div > , dokumen . getElementById ( 'elemen' ) ,
) ;

Install

npm install react-textarea-autosize

Demo

https://andarist.github.io/react-textarea-autosize/

Atribut

Alat peraga khusus:

menopang Tipe deskripsi
maxRows number Jumlah baris maksimum di mana textarea dapat berkembang
minRows number Jumlah baris minimum yang akan ditampilkan untuk textarea
onHeightChange func Fungsi dipanggil pada perubahan ketinggian area teks, dengan ketinggian sebagai argumen pertama. Argumen fungsi kedua adalah objek yang berisi informasi tambahan yang mungkin berguna untuk perilaku kustom. Opsi saat ini termasuk { rowHeight: number } .

6. Pengukir Gambar JS

Pengubah ukuran gambar yang sadar konten berdasarkan algoritma Seam Carving

Logo GitHub trekhleb / js-image-carver

🌅 Pengubah ukuran gambar dan penghapus objek yang sadar konten berdasarkan algoritma Seam Carving

JS IMAGE CARVER

Pengubah ukuran gambar yang sadar konten

JS IMAGE CARVER

Gambar latar belakang oleh Ian Dooley

Mengubah ukuran gambar sesuai konten

Mengubah ukuran gambar yang sadar konten mungkin diterapkan ketika harus mengubah proporsi gambar (yaitu mengurangi lebar sambil mempertahankan tinggi) dan saat kehilangan beberapa bagian gambar tidak diinginkan. Melakukan penskalaan gambar secara langsung dalam hal ini akan mendistorsi objek di dalamnya. Untuk mempertahankan proporsi objek sambil mengubah proporsi gambar, kita dapat menggunakan algoritma Seam Carving .

Pada contoh di bawah ini, Anda dapat melihat bagaimana lebar gambar asli dikurangi hingga 50% menggunakan pengubahan ukuran sadar konten (gambar kiri) dan penskalaan langsung (gambar kanan). Dalam kasus khusus ini, gambar di kiri terlihat lebih alami karena proporsi balon dipertahankan.

Mengubah ukuran gambar sesuai konten

Ide algoritma Seam Carving adalah menemukan …

7. Deno yang mengagumkan

Daftar pilihan hal-hal keren yang berhubungan dengan Deno

Logo GitHub denolib / awesome-deno

Daftar pilihan hal-hal keren yang berhubungan dengan Deno

Deno yang mengagumkan Mengagumkan

Deno adalah runtime sederhana, modern dan aman untuk JavaScript dan TypeScript yang menggunakan V8 dan dibangun di Rust.

Daftar ini adalah kumpulan modul dan sumber daya Deno terbaik.

Isi

Docs

Dokumen Resmi

Dokumen Eksternal

Taman Bermain Online

Asisten

Modul

PEMBERITAHUAN : Deno memiliki beberapa modul resmi yang dapat ditemukan di deno_std Pertimbangkan untuk mengirimkan ke registri deno.land/x.

  • abc – Kerangka Deno yang lebih baik untuk membuat aplikasi web.
  • aleph.js – Sebuah kerangka kerja React di Deno, terinspirasi oleh…

8. Howler.js

Pustaka audio Javascript untuk web modern.

Logo GitHub goldfire / howler.js

Pustaka audio Javascript untuk web modern.

howler.js

Deskripsi

howler.js adalah pustaka audio untuk web modern. Secara default ke API Audio Web dan kembali ke Audio HTML5 . Hal ini membuat bekerja dengan audio di JavaScript menjadi mudah dan andal di semua platform.

Informasi tambahan, demo langsung dan tampilan pengguna tersedia di howlerjs.com .

Ikuti di Twitter untuk howler.js dan diskusi terkait pengembangan: @GoldFireStudios .

fitur

  • API tunggal untuk semua kebutuhan audio
  • Default-nya adalah API Audio Web dan kembali ke Audio HTML5
  • Menangani kasus edge dan bug di berbagai lingkungan
  • Mendukung semua codec untuk dukungan lintas-browser penuh
  • Caching otomatis untuk meningkatkan kinerja
  • Kontrol suara secara individu, dalam kelompok atau secara global
  • Putar ulang beberapa suara sekaligus
  • Definisi dan pemutaran sprite suara yang mudah
  • Kontrol penuh untuk memudar, menilai, mencari, volume, dll.
  • Tambahkan suara spasial 3D atau panning stereo dengan mudah
  • Modular – gunakan apa yang Anda inginkan dan mudah diperluas
  • Tidak ada ketergantungan luar, hanya JavaScript murni
  • Seringan…

9. party.js

Perpustakaan JavaScript untuk mencerahkan pengalaman situs pengguna Anda dengan efek visual!

Logo GitHub yiliansource / party-js

Perpustakaan JavaScript untuk mencerahkan pengalaman situs pengguna Anda dengan efek visual!

InstalasiPenggunaanBerkontribusi

npm Bintang GitHub Repo Status Pembuatan GitHub Status Dokumen GitHub download npm Lisensi

Instalasi

Pustaka ditulis dalam TypeScript dan dikompilasi ke modul UMD untuk memungkinkan integrasi ke lingkungan yang berbeda.

Browser

Anda dapat mengambil versi terbaru dari jsdelivr .

 < script src = " https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js " > </ script >

Instance perpustakaan dimuat ke objek party

Node.JS

Jika Anda menggunakan lingkungan yang dikelola paket, Anda juga dapat menginstal versi terbaru melalui npm .

 npm instal party-js
benang tambahkan party-js

Untuk menggunakannya, cukup require atau import .

 const party = membutuhkan ( "party-js" ) ;
pihak impor dari "party-js" ;

Pemakaian

Pustaka pada dasarnya menawarkan implementasi sistem partikel yang dapat disesuaikan sepenuhnya ke dalam dokumen HTML. Pengguna perpustakaan memiliki kemampuan untuk membuat dan menyesuaikan efek sesuai keinginan masing-masing. Pustaka ini menawarkan beberapa efek sederhana langsung dari kotaknya, jadi Anda tidak perlu membuang waktu untuk membuat ulang efek sederhana.

 dokumen . querySelector

10. Choc UI

Komponen Urutan Tinggi Chakra UI Prebuilt

Logo GitHub anubra266 / choc-ui

Komponen Urutan Tinggi Chakra UI Prebuilt

Lisensi Penulis

Tentang Choc UI

CHOC adalah singkatan dari Chakra Higher Order Components. Choc UI adalah kumpulan komponen, yang terinspirasi oleh banyak sumber komponen web yang digunakan dengan baik, yang dibangun kembali berdasarkan pustaka Chakra UI.

Dokumentasi Resmi

Lihat aksinya di Situs Choc-UI.

Komponen

  • Elemen
    • Header
    • Kartu-kartu
    • Peringatan
    • Penomoran halaman
    • Lencana
    • Ikon Gradien
    • Korsel
    • Kosong – Antd
    • Hasil – Antd
    • Elemen Khusus
  • Bagian Halaman
    • Pahlawan
    • Bagian Fitur
    • Bagian CTA
    • Bagian Penetapan Harga
    • Bagian Klien – WickedBlocks
    • Bagian Konten
    • FAQ
    • Bagian Buletin
    • Statistik
    • Testimonial
    • Bagian Blog –
    • Bagian Kontak
    • Footers – Meraki UI
    • Logo Awan
  • Navigasi – TailwindUI, Meraki UI
    • Navbar
    • Navigasi Vertikal (Menu)
    • Navigasi Sidebar
  • Judul – TailwindUI
    • Judul Kartu
    • Judul Bagian
    • Judul Halaman
  • Halaman Contoh – Meraki UI, Kutty
    • Halaman Arahan
    • Halaman Kontak
    • Halaman Kesalahan
    • Layar Beranda
    • Layar Detail
    • Layar Pengaturan
  • Membentuk Tailwind
    • Tata Letak Formulir – Tailwind
    • Masuk dan Pendaftaran – WickedBlocks
  • Membuat daftar Tailwind
    • Tabel
    • Daftar Bertumpuk
    • Kisi…

Melihat bintang 📈

Anak tangga teratas selama 7 hari terakhir

  1. Coding Interview University +2.110 bintang
  2. React Flow +1.904 bintang
  3. Supabase +1.589 bintang
  4. 30 detik kode + 1.525 bintang
  5. Clone Wars +1.031 bintang

Pertumbuhan teratas (%) selama 7 hari terakhir

  1. Aliran Reaksi + 61%
  2. Status Lebih Sederhana + 45%
  3. Basis data + 21%
  4. Superplate + 15,46%
  5. Perang Klon + 11%

Anak tangga teratas selama 30 hari terakhir

  1. Coding Interview University +7.827 bintang
  2. Clone Wars +4.717 bintang
  3. API Publik +4.522 bintang
  4. Algoritma JavaScript +4.146 bintang
  5. Buku Pemrograman Gratis +3.172 bintang

Pertumbuhan teratas (%) selama 30 hari terakhir

  1. Appsmith + 104%
  2. Status Lebih Sederhana + 95%
  3. Perang Klon + 85%
  4. Aliran Reaksi + 71%
  5. UI tanpa kepala + 53%

Trending Projects tersedia sebagai buletin mingguan, harap daftar di www.iainfreestone.com untuk memastikan Anda tidak pernah melewatkan satu masalah pun.

Jika Anda menikmati artikel ini, Anda dapat mengikuti saya di Twitter di mana saya secara teratur memposting tip ukuran gigitan yang berkaitan dengan HTML, CSS, dan JavaScript.

April 23, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *