10 Alat untuk Anda Coba Berikutnya Dengan Proyek Web

() translation by (you can also view the original English article)

Berikut ini adalah pengelompokan beberapa alat yang Anda, sebagai developer atau desainer, dapat mencoba proyek berikutnya. Daftar ini tidak berarti lengkap, atau "sepuluh besar" dari apa pun, tetapi hanya saran bagi mereka yang mencari sesuatu yang baru. Saya harap Anda menikmati alat-alat yang disebutkan. Mari kita mulai!

1. Inspect

Inspect adalah aplikasi yang menyinkronkan dengan sempurna antara file desain dan peralatan Anda. Ini membantu Anda dengan mudah mempertahankan file desain antara Sketch, inspect dan InVision dan tetap menyingkronkan semua dengan satu klik.

Inspect menjembatani kesenjangan antara designer dan developer. Buat kode kerja sesuai desain Anda, berikan pengukuran, warna, dan desain aset dengan kemudahan asli dan berkolaborasi dengan sitem perpesan dengan tetap memperbarui informasi dan catatan proyek terkini.

Untuk memulai, Anda perlu Sketch. Setelah Anda memasang Sketch, Anda juga membutuhkan Craft.Craft adalah perangkat plugin yang memungkinkan Anda mendesain dengan Buat proyek baru dari inVision dan kemudian beralih kembali ke Sketch . Saya juga menyarankan untuk melihat inVision Studio.

2. Archetype

Archetype adalah desain tipografi yang dibuat mudah. Bekerja sama dengan Google Fonts hidup di browser menggunakan praktik terbaik seperti membuat skala modular dan gird garis dasar yang konsisten dan dapat digunakan kembali.

Semua penataan gaya dengan archetype menghasilkan kode ramah developer untuk memudahkan handoff.

Perubahan dan pembaruan bersifat instan dan mudah dibagikan dengan memungkinkan pengguna mengekspor ke CSS atau ke Sketch. Anda juga memiliki kemampuan untuk mengunduh set font yang Anda pilih yang digunakan untuk desain Anda. Simpan proyek menggunakan akun Google Anda dan kembalilah ke pekerjaan Anda kapan saja.

3. Probot

Jika Anda menggunakan kontrol versi, bekerja pada proyek sumber terbuka, atau melakukan tinjauan kode anggota tim, Probot mungkin malaikat Anda yang menyamar. Probot adalah kumpulan aplikasi berbasis komunitas untuk mengotomatisasi dan meningkatkan alur kerja Anda dengan GitHub.

Anda dapat menjelajahi semua aplikasi sumber terbuka atau membangun aplikasi Anda sendiri. Beberapa aplikasi yang disediakan saat ini adalah Stale, untuk secara otomatis menutup masalah basi dan menarik permintaan yang terakumulasi selama proyek, atau reminders untuk membuat pemberitahuan pengingat untuk masalah proyek Anda dan anggota tim.

Fokus pada apa yang Anda bangun. API langsung (dibangun pada fitur JavaScript ES6) menyembunyikan detail yang tidak Anda perdulikan menggunakan GitHubdan Node.js.

4. PSD ke Sketch

Pernahkan Anda menerima PSD dan berharap Anda dapat mengonversinya menjadi file Sketch? Anda beruntung. Avocode (alat lain untuk mencoba juga) telah cukup baik untuk Jelajahi URL dan unggah PSD Anda. Berikut adalah roadmap dan daftar fitur yang didukung proses konversi.

Juga perlu diingat bahwa Photoshop dan Sketch adalah alat yang sangat berbeda. Ini hanya dapat mengubah elemen desain yang dapat di buat kedua aplikasi desain ini; Sketch dan Photoshop. Tidak dapat mengubah atau meniru fitur Photoshop yang tidak termasuk dalam aplikasi Sketsa.

5. Tes Kecepatan Situs Web Cloud

Mengoptimalkan gambar dapat meningkatkan waktu buka halaman web secara signifikan, sehingga meningkatkan retensi dan kepuasan pengguna. Tes kecepatan Situs Web adalah alat analisis gambar yang dapat memindai situs apa pun dengan URL langsung. Ini memberikan wawasan pengoptimalan terperinci tentang bagaimana perubahan pada ukuran pada gambar, format , kualitas, dan parameter pengkodean dapat meningkatkan kecepatan memuat halaman.

Hasil dapat dibagi dan setelah analisis selesai, setiap gambar yang tercatat dalam.hasil Anda diunduh dalam format yang dioptimalkan atau alternanatif format lain seperti webp atau jpeg-xr.

Untuk mempelajari lebih lanjut tentang layanan ini di atas ke tentang page mereka. Ada juga layanan Cloudinary CDN yang mungkin ingin Anda periksa juga.

6. Animista

Animista adalah tempat di mana Anda bermain dengan koleksi animasi css pra-dibuat menyesuaikannya dan hanya mendapatkan yang benar-benar Anda gunakan. Salin kode yang dihasilkan atau unduh satu file CSS untuk digunakan.

Jika Anda melihat sesuatu yang Anda sukai selama bekerja, klik ikon hati, atau jelajahi favorit Anda kapan saja dengan mengklik ikon corong. Animista memberi Anda semua jenis opsi pra-made dan khusus untuk menyesuaikan urutan gerak Anda termasuk opsi 3D bersama dengan transformasi 2D khas Anda. Kode dapat dikecilkan dan disalurkan melalui Autoprefixer untuk memastikan Anda mendapatkan kode yang paling bisa digunakan untuk dukungan.

7. Hero Patterns

Hero Patterns adalah kumpulan pola background SVG yang dapat diulang untuk Anda gunakan di proyek web Anda. Setiap pola background yang Anda pilih diubah menjadi background yang dapat diulang dan dikodekan dalam base64 untuk digunakan dalam file CSS pilihan Anda. Sesuaikan properti individual seperti warna foreground, warna background, dan opasitas foreground saat Anda membuat keputusan desain.

Saat ini aplikasi ini memungkinkan Anda memilih di antara 87 pola berbeda dan memiliki cukup banyak mengingat sejumlah kecil pola yang disediakan.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg>

Anda juga dapat mengunduh svg tanpa gaya seperti yang dapat Anda lihat dari cuplikan kode di atas. Ini sangat cocok untuk mereka yang tidak ingin menggunakan opsi base64 atau ingin menyesuaikan pola lebih lanjut.

8. Cushion

Cushion membawa kedamaian pikiran individu wiraswata menjalankan bisnis mereka sendiri. Ini membantu untuk memberikan wawasan yang lebih baik dan "membawa ketenangan untuk naik rollercoaster sehari-hari yang bersifat lepas."

Menawarkan uji coba 14 hari (tidak perlu kartu kredit), dan jika Anda kecanduan selama uji coba, paket mulai dari $5 per bulan; juga dikenal sebagai rencana "moonlighter" . Aplikasi ini membantu untuk menutupi basis Anda ketika Anda membutuhkan.

Penjadwalan Proyek
Pelacakan Biaya
Ekspor Spreadsheet
Faktur
Pelacakan Faktur
Tampilan Penghasilan Bulanan
dan banyak lagi ...

Cushion sedang mempertimbangkan aplikasi seluler untuk masa depan, tetapi tidak menawarkan saat ini karena fokusnya adalah membangun aplikasi web berfitur lengkap. Jika anda secara khusus mencari integrasi akun bank (dan ini adalah pemutus kesepakatan untuk Anda), berita yang menyedihkan adalah bahwa aplikasi tersebut tidak memiliki umpan bank, tetapi Anda dapat mengimpor laporan bank Anda sebagai file .cvs. Biarkan itu berjalan sendiri, Anda tidak akan rugi.

9. Launchy

Launchy adalah jendela modal yang dapat diakses. Ini juga jQuery gratis dan hanya 27.7 KB.

Beberapa fitur penting terkait alat ini adalah:

Saat peluncuran, fokus keyboard bergeser ke wadah jendela modal
Jendela modal dijelaskan melaui pos modal opsional
Perangkap fokus keyboard dalam modal saat aktif/terlihat
Menutup jendela pada tekan tombol esc
Menutup jendela pada klik mouse overlay
Setel fokus keyboard kembali ke elemen peluncur di dekat jendela
Tambahkan kontrol dekat Anda sendiri!
Tambahkan kontrol kustom Anda sendiri yang mengirim fokus ke tempat lain di page!
Batas transparan untuk tema Windows High Contras

Launchy juga memiliki banyak kelas CSS yang tersedia pada elemen yang dihasilkan untuk styling kustom. Lihat file style.scss untuk nama kelas dan contoh bagaimana Anda ingin menata model windows Anda. Proyek ini juga tersedia sebagai paket npm : npm i Launchy-modaL-window . Sesungguhnya jendela modal yang dapat diakses dilakukan dengan benar.

10. Formcore

Formcore adalah proyek open-source (digambarkan sebagai "bentuk ringan dan divalidasi") oleh grup Filament dan merupakan seperangkat pola bentuk seperti sandi show / hide, penghitung karakter, input kartu kredit dan validasi, teks multi-baris masukan yang diperluas sebagai jenis pengguna, plus banyak lagi.

Ada sejumlah fitur lain yang dimasukkan seperti normalisasi perilaku bidang <input type="number"> berfungsi untuk menegakkan atribut maxLength , dan juga bekerja di sekitar bug dengan <input type="number"> di Safari 6 dan Firefox desktop untuk disebutkan beberapa.

Jika Anda sedang membangun formulir di web (dan saya bertaruh dengan Anda) maka ini mungkin bagus untuk dicoba dengan proyek Anda berikutnya yang melibatkan input formulir.

Kesimpulan

Sekarang setelah kami mencapai akhir daftar kami, apa pendapat Anda? Apakah salah satu memicu perhatian Anda memicu keinginan Anda untuk mencobanya? Apakah Anda tidak terkesan dan menyarankannya pada orang lain? Beri tahu kami di komentar di bawah ini. Untuk semua orang selamat membangun Web!