it-swarm-id.com

Apa rincian teknis yang harus dipertimbangkan oleh seorang programmer aplikasi web sebelum membuat situs publik?

Hal-hal apa yang harus dipertimbangkan oleh seorang programmer yang menerapkan perincian teknis dari suatu aplikasi web sebelum membuat situs tersebut menjadi publik? Jika Jeff Atwood dapat melupakan HttpOnly cookies , sitemaps , andpermintaan lintas situs pemalsuan semuanya di situs yang sama, hal penting apa yang bisa saya lupakan juga?

Saya memikirkan hal ini dari sudut pandang pengembang web, sehingga orang lain membuat desain dan konten aktual untuk situs tersebut. Jadi, sementara kegunaan dan konten mungkin lebih penting daripada platform, Anda programmer memiliki sedikit suara dalam hal itu. Yang perlu Anda khawatirkan adalah implementasi platform Anda stabil, berkinerja baik, aman, dan memenuhi semua tujuan bisnis lainnya (seperti tidak membutuhkan biaya terlalu banyak, butuh waktu terlalu lama untuk membangun, dan peringkat juga dengan Google sebagai konten mendukung).

Pikirkan ini dari sudut pandang pengembang yang telah melakukan beberapa pekerjaan untuk aplikasi tipe intranet di lingkungan yang cukup tepercaya, dan akan melakukan tembakan pertamanya dan mengeluarkan situs yang berpotensi populer untuk seluruh web yang luas.

Selain itu, saya mencari sesuatu yang lebih spesifik daripada sekadar respons "standar web" yang tidak jelas. Maksud saya, HTML, JavaScript, dan CSS melalui HTTP cukup banyak diberikan, terutama ketika saya sudah menentukan bahwa Anda adalah seorang pengembang web profesional. Jadi lebih dari itu, Yang mana standar? Dalam keadaan apa, dan mengapa? Berikan tautan ke spesifikasi standar.

2187
Joel Coehoorn

Idenya di sini adalah bahwa sebagian besar dari kita harus sudah tahu sebagian besar dari apa yang ada dalam daftar ini. Tapi mungkin ada satu atau dua item yang belum pernah Anda lihat sebelumnya, tidak sepenuhnya mengerti, atau mungkin bahkan tidak pernah mendengarnya.

Antarmuka dan Pengalaman Pengguna

  • Ketahuilah bahwa browser menerapkan standar secara tidak konsisten dan memastikan situs Anda berfungsi dengan baik di semua browser utama. Pada uji minimum terhadap Gecko baru engine ( Firefox ), mesin WebKit ( Safari dan beberapa browser seluler), Chrome , browser IE Anda yang didukung (manfaatkan dari Gambar VPC Kompatibilitas Aplikasi ), dan Opera . Juga pertimbangkan bagaimana browser membuat situs Anda di sistem operasi yang berbeda.
  • Pertimbangkan bagaimana orang dapat menggunakan situs ini selain dari browser utama: ponsel, pembaca layar dan mesin pencari, misalnya. - Beberapa info aksesibilitas: [~ # ~] wai [~ # ~] dan Section508 , Pengembangan seluler: MobiForge .
  • Pementasan: Cara menyebarkan pembaruan tanpa mempengaruhi pengguna Anda. Sediakan satu atau lebih lingkungan pengujian atau pementasan untuk menerapkan perubahan pada arsitektur, kode, atau konten penyapuan dan memastikan bahwa mereka dapat digunakan dengan cara yang terkontrol tanpa merusak apa pun. Miliki cara otomatis untuk menyebarkan perubahan yang disetujui ke situs langsung. Ini paling efektif diimplementasikan bersamaan dengan penggunaan sistem kontrol versi (git, Subversion, dll.) Dan mekanisme pembangunan otomatis (Ant, NAnt, dll.).
  • Jangan tampilkan kesalahan tidak ramah langsung ke pengguna.
  • Jangan masukkan alamat email pengguna dalam teks biasa karena mereka akan dihukum spam.
  • Tambahkan atribut _rel="nofollow"_ ke tautan yang dibuat pengguna untuk menghindari spam .
  • Buat batas yang dipertimbangkan dengan baik ke situs Anda - Ini juga termasuk dalam Keamanan.
  • Pelajari cara melakukan peningkatan progresif .
  • Redirect setelah POST jika itu POST berhasil, untuk mencegah penyegaran mengirimkan kembali.
  • Jangan lupa untuk mempertimbangkan aksesibilitas. Itu selalu merupakan ide yang baik dan dalam keadaan tertentu itu adalah persyaratan hukum . WAI-ARIA dan WCAG 2 adalah sumber daya yang baik di bidang ini.
  • Baca Jangan Membuatku Berpikir .

Keamanan

Kinerja

  • Terapkan caching jika perlu, pahami dan gunakan HTTP caching dengan benar dan HTML5 Manifest .
  • Optimalkan gambar - jangan gunakan gambar 20 KB untuk latar belakang yang berulang.
  • Kompres konten untuk kecepatan, lihat brotli , gzip/deflate (mengempis lebih baik).
  • Gabungkan/gabungkan beberapa stylesheet atau beberapa file skrip untuk mengurangi jumlah koneksi browser dan meningkatkan kemampuan gzip untuk mengkompresi duplikasi antar file.
  • Lihatlah Kinerja Luar Biasa Yahoo situs, banyak panduan hebat, termasuk meningkatkan kinerja front-end dan YSlow alat (memerlukan Firefox, Safari, Chrome atau Opera). Juga, Kecepatan halaman Google (digunakan dengan ekstensi browser ) adalah alat lain untuk profil kinerja, dan juga mengoptimalkan gambar Anda.
  • Gunakan CSS Sprite Gambar untuk gambar terkait kecil seperti bilah alat (lihat titik "perkecil permintaan HTTP")
  • Gunakan sprite gambar SVG untuk gambar kecil seperti toolbar. Pewarnaan SVG agak sulit. Anda dapat membacanya di sini .
  • Situs web yang sibuk harus mempertimbangkan memecah komponen di seluruh domain . Secara khusus...
  • Konten statis (yaitu gambar, CSS, JavaScript, dan umumnya konten yang tidak memerlukan akses ke cookie) harus masuk dalam domain terpisah yang tidak menggunakan cookie, karena semua cookie untuk domain dan subdomainnya dikirimkan dengan setiap permintaan ke domain dan subdomainnya. Salah satu opsi yang baik di sini adalah menggunakan Jaringan Pengiriman Konten (CDN), tetapi pertimbangkan kasus di mana CDN mungkin gagal dengan memasukkan CDN alternatif, atau salinan lokal yang dapat disajikan sebagai gantinya.
  • Minimalkan jumlah total permintaan HTTP yang diperlukan browser untuk membuat halaman.
  • Pilih mesin template dan render/pra-kompilasi menggunakan task-runner seperti tegukan atau mendengus
  • Pastikan ada file _favicon.ico_ di root situs, mis. _/favicon.ico_. Browser akan secara otomatis memintanya , bahkan jika ikonnya tidak disebutkan dalam HTML sama sekali. Jika Anda tidak memiliki _/favicon.ico_, ini akan menghasilkan banyak 404-an, menguras bandwidth server Anda.

SEO (Optimasi Mesin Pencari)

  • Gunakan URL "mesin pencari ramah", mis. Gunakan _example.com/pages/45-article-title_ alih-alih _example.com/index.php?page=45_
  • Saat menggunakan _#_ untuk konten dinamis ubah _#_ menjadi _#!_ dan kemudian pada server _$_REQUEST["_escaped_fragment_"]_ adalah apa yang menggunakan googlebot alih-alih _#!_. Dengan kata lain, _./#!page=1_ menjadi _./?_escaped_fragments_=page=1_. Juga, untuk pengguna yang mungkin menggunakan FF.b4 atau Chromium, history.pushState({"foo":"bar"}, "About", "./?page=1"); Adalah perintah yang bagus. Jadi meskipun bilah alamat telah mengubah halaman tidak memuat ulang. Ini memungkinkan Anda untuk menggunakan _?_ alih-alih _#!_ untuk menjaga konten dinamis dan juga memberi tahu server ketika Anda mengirim email ke tautan bahwa kami berada di belakang halaman ini, dan AJAX tidak perlu untuk membuat permintaan tambahan lainnya.
  • Jangan gunakan tautan yang mengatakan "klik di sini" . Anda membuang-buang peluang SEO dan itu membuat segalanya lebih sulit bagi orang-orang dengan pembaca layar.
  • Memiliki XML ​​sitemap , lebih disukai di lokasi default _/sitemap.xml_.
  • Gunakan _<link rel="canonical" ... />_ ketika Anda memiliki beberapa URL yang mengarah ke konten yang sama, masalah ini juga dapat diatasi dari Google Webmaster Tools .
  • Gunakan Alat Webmaster Google dan Alat Webmaster Bing .
  • Instal Google Analytics tepat di awal (atau alat analisis sumber terbuka seperti Piwik ).
  • Ketahui cara robots.txt dan spider mesin pencari berfungsi.
  • Redirect permintaan (menggunakan _301 Moved Permanently_) meminta _www.example.com_ ke _example.com_ (atau sebaliknya) untuk mencegah pemisahan peringkat google antara kedua situs.
  • Ketahuilah bahwa mungkin ada laba-laba berperilaku buruk di luar sana.
  • Jika Anda memiliki konten non-teks, lihat ke dalam ekstensi sitemap Google untuk video, dll. Ada beberapa informasi bagus tentang ini di Jawaban Tim Farley .

Teknologi

  • Pahami [~ # ~] http [~ # ~] dan hal-hal seperti GET, POST, sesi, cookie, dan apa artinya menjadi "tanpa kewarganegaraan".
  • Tulis hhtml [~ # ~] [~ # ~] / [~ # ~] Anda html [~ # ~] dan [~ # ~] css [~ # ~] sesuai dengan spesifikasi W3C dan pastikan mereka validasi . Tujuannya di sini adalah untuk menghindari mode quirks browser dan sebagai bonus membuatnya lebih mudah untuk bekerja dengan browser non-tradisional seperti pembaca layar dan perangkat seluler.
  • Memahami bagaimana JavaScript diproses di browser.
  • Pahami bagaimana JavaScript, style sheet, dan sumber daya lain yang digunakan oleh halaman Anda dimuat dan pertimbangkan pengaruhnya terhadap persepsi kinerja . Sekarang secara luas dianggap tepat untuk pindahkan skrip ke bawah dari halaman Anda dengan pengecualian biasanya hal-hal seperti aplikasi analytics atau shims HTML5.
  • Pahami cara kerja kotak pasir JavaScript, terutama jika Anda bermaksud menggunakan iframe.
  • Ketahuilah bahwa JavaScript dapat dan akan dinonaktifkan, dan karena itu [AJAX adalah ekstensi, bukan garis dasar. Bahkan jika sebagian besar pengguna membiarkannya sekarang, ingat bahwa NoScript menjadi lebih populer. Meskipun bot perayapan modern mendukung pengindeksan konten yang dihasilkan JavaScript, pertimbangkan untuk menggunakan rendering sisi-server untuk bot perayapan lain atau pengguna yang telah menonaktifkan JavaScript.
  • Pelajari perbedaan antara 301 dan 302 redirect (ini juga masalah SEO).
  • Pelajari sebanyak mungkin tentang platform penempatan Anda.
  • Pertimbangkan untuk menggunakan Atur Ulang Style Sheet atau normalize.css .
  • Pertimbangkan kerangka kerja JavaScript (seperti jQuery , MooTools , Prototipe , Dojo atau YUI 3 ), yang akan sembunyikan banyak perbedaan browser saat menggunakan JavaScript untuk manipulasi DOM.
  • Dengan menggabungkan kinerja yang dirasakan dan kerangka kerja JS, pertimbangkan untuk menggunakan layanan seperti Google Libraries API untuk memuat kerangka kerja sehingga browser dapat menggunakan salinan kerangka kerja yang sudah di-cache daripada mengunduh salinan duplikat dari Anda situs.
  • Jangan menemukan kembali roda. Sebelum melakukan APA SAJA, cari komponen atau contoh tentang cara melakukannya. Ada kemungkinan 99% seseorang telah melakukannya dan merilis versi kode OSS.
  • Di balik itu, jangan mulai dengan 20 perpustakaan bahkan sebelum Anda memutuskan apa kebutuhan Anda. Terutama di web sisi klien di mana hampir selalu pada akhirnya lebih penting untuk menjaga hal-hal yang ringan, cepat, dan fleksibel.

Perbaikan bug

  • Pahamilah bahwa Anda akan menghabiskan 20% dari waktu Anda coding dan 80% dari itu mempertahankan, jadi kode sesuai.
  • Siapkan solusi pelaporan kesalahan yang baik.
  • Memiliki sistem bagi orang untuk menghubungi Anda dengan saran dan kritik.
  • Dokumentasikan cara kerja aplikasi untuk staf pendukung masa depan dan orang-orang yang melakukan pemeliharaan.
  • Sering buat cadangan! (Dan pastikan cadangan itu berfungsi). Memiliki strategi pemulihan, bukan hanya strategi cadangan.
  • Gunakan sistem kontrol versi untuk menyimpan file Anda, seperti Subversion , Mercurial atau Git .
  • Jangan lupa untuk melakukan Tes Penerimaan Anda. Kerangka kerja seperti Selenium dapat membantu. Terutama jika Anda mengotomatisasi pengujian Anda sepenuhnya, mungkin dengan menggunakan alat Integrasi Berkelanjutan, seperti Jenkins .
  • Pastikan Anda memiliki pencatatan yang memadai menggunakan kerangka kerja seperti log4j , log4net atau log4r . Jika ada yang salah di situs langsung Anda, Anda akan perlu cara untuk mencari tahu apa.
  • Saat masuk, pastikan Anda menangkap kedua pengecualian yang ditangani, dan pengecualian yang tidak ditangani. Laporkan/analisis output log, karena akan menunjukkan kepada Anda di mana masalah utama berada di situs Anda.

Lainnya

  • Melaksanakan pemantauan dan analitik sisi-server dan sisi klien (satu harus proaktif daripada reaktif).
  • Gunakan layanan seperti UserVoice dan Intercom (atau alat serupa lainnya) untuk terus berkomunikasi dengan pengguna Anda.
  • Ikuti Vincent Driessen 's Model percabangan Git

Banyak hal yang dihilangkan tidak selalu karena mereka bukan jawaban yang berguna, tetapi karena mereka terlalu rinci, di luar jangkauan, atau terlalu jauh bagi seseorang yang ingin mendapatkan gambaran tentang hal-hal yang harus mereka ketahui. Silakan mengedit ini juga, saya mungkin melewatkan beberapa hal atau membuat beberapa kesalahan.

2655
victoriah