Bagaimana saya bisa menulis HTML, CSS, dan JavaScript untuk membuat pengembang back-end bekerja lebih mudah?

Ketika saya mendapatkan desain dari seorang desainer, saya mendapatkannya sebagai file PSD (Photoshop). Saya selalu mengharapkan nama layer dan folder yang tepat, pada dasarnya PSD yang bersih dan terkelola. Dari desigbn ini saya mengembangkan HTML, CSS dan JavaScript dan mengirimkannya ke pengembang back-end. Untuk memudahkan mereka untuk mengerti, saya

• tulis kode semantik,
• menjaga JavaScript dan CSS di file eksternal,
• menambahkan komentar yang berguna dalam file HTML, CSS dan JS,
• gunakan sprite CSS (meskipun pengembang tidak menyukainya),
• menggunakan pelat boiler HTML5,
• gunakan jQuery untuk JavaScript,
• coba gunakan tag HTML5 dan CSS3 baru bila memungkinkan dan
• mengirim file Zip yang berisi HTML, CSS, JS dan gambar.

Saya berharap bahwa jika perubahan kecil perlu dilakukan pada tata letak, pengembang dapat mengatasinya.

Saya ingin mendengar dari pengembang back-end dan ninja CSS lainnya apa lagi yang bisa dilakukan dalam hal pengorganisasian file dan mark-up untuk mempermudah integrasi dengan sistem back-end (mis. Teknologi back-end, PHP, .NET , Ruby, dll.) Klien yang berbeda menggunakan sistem yang berbeda.

Banyak dari jawaban ini akan mencakup sebagian besar ide, tetapi inilah jawaban pribadi saya:

• Tinggalkan ruang dalam desain formulir untuk pesan kesalahan.
• Jangan letakkan label di kotak input!
• Masukkan CSS dan JavaScript Anda dalam file terpisah, kecuali Anda tahu apa yang Anda lakukan dan merasa benar-benar buruk tentang hal itu.
• Jaga agar elemen desain tetap sama di antara halaman. Ini menyebalkan ketika komponen desain (seperti kotak "baru dilihat") memiliki markup yang berbeda pada setiap halaman.
• Jangan lakukan apa yang mudah bagi Anda, lakukan apa yang benar. <button>tag menghisap. backround-imageuntuk hal-hal yang benar-benar harus <img>menyedot tag.
• Pastikan bahwa jika Anda membuat komponen halaman, ia dapat menskala. Saya tahu sebagian besar pengembang front-end yang baik melakukan ini, tapi saya punya banyak contoh di mana seseorang menggunakan satu gambar dalam apa yang seharusnya menjadi situasi topi atas / bawah. Programmer tidak suka membuka Photoshop.
• Baca ulang templat Anda. Programmer (yang baik) adalah orang-orang yang berdedikasi, berorientasi pada detail. Jika mereka mulai melihat masalah dalam desain Anda (mungkin navigasi footer memiliki kesalahan ejaan atau ejaan tidak konsisten) itu akan membuat mereka mengajukan pertanyaan dan memperlambat pekerjaan mereka.

Akhirnya, dan mungkin yang paling penting:

• Pelajari konvensi dasar bahasa yang sedang dikembangkan di back-end. Mampu melihat templat PHP dan memahami sintaks dasar di balik foreachsuatu ifpernyataan atau bagaimana memformat echopernyataan atau memindahkan <?php ?>tag akan sangat meningkatkan nilai Anda sebagai pengembang front-end - Saya suka ketika pengembang front-end membutuhkan untuk membuat perubahan sederhana dan dapat melakukannya di template alih-alih memberikan saya zip baru dari semua file mereka.
• Sebagai tambahan, belajar menggunakan perangkat lunak kontrol versi. Anda tidak perlu menjadi seorang ahli, tetapi jika saya bisa melihat perbedaan daripada harus mencoba dan mencari tahu apa yang berubah antara dua file zip itu membuat pekerjaan saya seratus kali lebih mudah.

Itu hanya beberapa - saya yakin masih banyak lagi, tetapi jika Anda menyelesaikan semua ini, Anda pasti akan mendapatkan rasa hormat dan penghargaan dari siapa pun yang mengubah templat Anda menjadi situs web.

Hal-hal yang jelas bisa saya pikirkan yang akan membuat hidup seorang pria yang lebih mudah adalah kesederhanaan dalam perilaku. Saat mendesain elemen halaman web yang memiliki berbagai perilaku (roll-overs, menu, dll), semua perilaku ini harus distandarisasi secara umum sehingga pengembang tidak harus terus menerus kembali ke beberapa bagan untuk menentukan fungsi mana yang dia gunakan. perlu menelepon untuk memiliki halaman berperilaku.

Kisi seharusnya tidak memerlukan manipulasi sel atau data dengan fungsi. Elemen blok halaman harus mudah didefinisikan sebagai elemen umum sehingga mereka dapat dengan mudah tersegmentasi dalam kode di belakang. Ini akan membantu pengembang dengan menggunakan kembali kode dan / atau memfasilitasi komunikasi antara berbagai sisi halaman.

Area halaman tidak boleh melewati batas desain tertentu. Item dari satu elemen tidak boleh mengganggu item dari elemen lain.

Namun, ada satu titik di mana Anda tidak bisa menghindari membuat para pengembang melompati lingkaran pembakar. Beberapa elemen antarmuka hanya akan sulit dibangun berdasarkan sifatnya.

Perhatikan bahwa kadang-kadang, Anda harus melakukan pilihan antara membuatnya mudah untuk memodifikasi solusi untuk pengembang back-end dan membuat sesuatu dioptimalkan.

Sprite CSS yang Anda kutip adalah contoh yang bagus. Saya tidak mengerti bagaimana seseorang dapat membuat situs web ketika skalabilitas dan kinerja penting dan memiliki tautan ke 100 gambar, 5 file CSS dan 15 JavaScript dari setiap halaman. Di sisi lain, sprite CSS tidak mudah dipelihara, dan sedikit perubahan dalam desain mungkin membutuhkan banyak pekerjaan.

Misalnya, jika Anda memiliki tiga ikon negara, satu di bawah yang lain, dan Anda harus menambahkan negara keempat, apakah Anda menambahkan ikon keempat di bagian bawah gambar, secara terpisah dari tiga lainnya? Atau Anda menambahkannya setelah ikon ketiga, memindahkan semua yang lain ke bawah untuk memiliki ruang kosong untuknya?

Hal yang sama datang dengan menggabungkan dan memperkecil file CSS dan JavaScript. Anda harus melakukannya untuk situs web dengan skala tertentu, tetapi akan membutuhkan usaha ekstra.

Itu persis sama untuk CDN. Anda harus menggunakannya untuk situs web besar, tetapi perubahan akan lebih sulit dilakukan. Misalnya jika Anda mengubah file CSS, Anda harus memaksa browser untuk mengunduh yang baru, dengan memodifikasi URI ke file cdn.example.com/g.css?r=2, lalu cdn.example.com/g.css?r=3, dll.

Juga, "lebih mudah" adalah relatif . Lihat, misalnya, pedoman untuk menulis kode CSS: secara pribadi, saya lebih suka satu gaya per baris, tanpa spasi putih:

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

sementara kebanyakan orang akan membenci sintaksis ini, dan lebih suka sintaks yang saya benci dan sulit dibaca (tidak, saya tidak gila):

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

Dengan cara yang sama, menggunakan jQuery tidak berarti Anda akan memudahkan pengembang back-end untuk memodifikasi file Anda, karena beberapa pengembang lebih berpengalaman dengan Prototipe atau kerangka kerja lainnya.

Dalam semua kasus, dokumentasi terperinci sangat membantu, jika pengembang ingin membacanya (kebanyakan tidak). Anda juga dapat membuat kehidupan seorang pengembang lebih mudah dengan bertanya secara tepat kepada pengembang tertentu bagaimana ia lebih suka hal-hal yang harus dilakukan, dan dengan bekerja berdampingan di awal, sambil membangun kerangka kerja (misalnya merancang alur kerja yang digunakan untuk meminimalkan) dan gabungkan file).

Yang terbaik dari semua dunia adalah ketika desainer tidak melemparkan file zip di atas tembok dan benar-benar bekerja di proyek sebagai salah satu pengembang. Membutuhkan sedikit pegangan untuk pengaturan, tetapi itu benar-benar hebat ketika tidak ada terjemahan antara desain dan dev dan semua orang dapat mengambil bagian dalam iterasi yang sama. Jika Anda memiliki proses gesekan tanpa gesekan yang baik, itu tidak terlalu sulit untuk terjadi.

Saya biasanya puas dengan desainer yang bekerja dengan cara yang dikontrol versi dan menggunakannya sebagai mekanisme distribusi. Saya benar-benar tidak ingin berurusan dengan file zip besar dan gemuk setiap kali ada perubahan kecil.

Fleksibilitas untuk Anda adalah fleksibilitas untuk mereka. Semua praktik terbaik yang Anda ikuti adalah kemenangan di kedua sisi aplikasi.

Namun, satu poin penting dan sering terlewatkan adalah menulis UI yang kuat. Terlalu banyak komponen UI yang terlalu berlabuh ke satu konteks atau set HTML yang terlalu rumit dan mereka memiliki CSS yang diatur untuk gagal.

Jika Anda memiliki dropdown, misalnya, jauh lebih sedikit pekerjaan JS untuk memasang komponen menjatuhkan yang diposisikan absolut di dalam wadah yang diklik relatif-set (tidak diperlukan koordinasi) daripada mengeluarkan palu JQuery dan mendapatkan koordinat untuk mengarahkannya atas elemen dan hanya menempelkannya di tempat. Ini juga jauh lebih kecil kemungkinannya untuk putus dalam kasus-kasus di mana halaman bergeser atau beberapa fitur browser baru membuang info penentuan posisi. Semakin Anda mengandalkan keterampilan HTML / CSS untuk menghindari kerja JS, semakin kuat UI Anda biasanya.

Sebagai aturan umum, saya mencoba memastikan satu-satunya hal yang dibutuhkan komponen UI saya adalah tag HTML untuk hidup dengan ID atau kelas yang sesuai. Semakin banyak hal yang dapat Anda lakukan dengan wadah tanpa UI di dalam pecah atau dengan wadah benar-benar menampung seperti memperluas / menyusut agar sesuai dengan dimensi wadah berubah, semakin dapat dengan mudah diimplementasikan pada bagian mana pun dari aplikasi tanpa perlu sisi klien ahli. Yang harus mereka lakukan adalah menempel kelas di atasnya.

Lebih suka delegasi acara pada wadah ui untuk menempatkan pendengar secara langsung ke titik akhir seperti tombol. Komponen UI itu mungkin berfungsi dengan HTML statis sekarang, tetapi Anda tidak pernah tahu kapan seseorang ingin dapat merobek dan menulis ulang HTML di dalamnya dengan innerHTML atau sesuatu. Jika wadahnya utuh dan semua acara didelegasikan (lihat metode jquery 'on') Anda tidak perlu khawatir tentang hal itu dan mereka mungkin tidak akan pernah belajar cara yang sulit untuk mengganti HTML merusak pendengar.

Demi menjaga agar delegasi tetap ada sebagai pilihan, jangan gunakan stopPropagate di mana pun kecuali node titik akhir dan kirim email kebencian ke pengembang kerangka kerja bodoh yang mengirim spam ke mana-mana.

Sejauh tata letak, pertahankan HTML minimal, semantik, dan hindari pembungkus div. Semakin sedikit HTML yang ada, masalah tata letak yang lebih mudah adalah untuk mendiagnosis pemula tata letak.

Gunakan nama kelas yang jelas untuk CSS utilitas. Kelas "baris" cenderung lebih jelas untuk noobs CSS daripada "clearfix."

Selalu berikan elemen bagian yang unik, ID unik. Itu membuatnya lebih mudah untuk mengidentifikasi di mana hal-hal khusus untuk bagian terjadi, lebih mudah untuk menimpa barang-barang, dan itu juga bisa menjadi keterbacaan dan kinerja yang dimenangkan JS.

Jelas itu berita buruk untuk menjadi berlebihan dengan skema kelas, tetapi semakin banyak dev back end dapat diatur hanya dengan menambahkan kelas yang tepat untuk hal-hal, semakin mudah bagi mereka untuk membuat perubahan pada halaman yang ada.

Dan tentu saja pada awal proyek membuat mereka untuk menyetujui setidaknya satu hal ini: Back dan front end terhubung melalui HTML dan JSON saja. Jangan biarkan mereka menggunakan hal-hal yang "menulis JavaScript untuk Anda!" Ini adalah kekacauan berdarah dan mimpi buruk pemeliharaan.

Seperti halnya semua hal yang terkait dengan pengembangan, lebih suka KERING, dan minimalis.

Itu masih tidak akan membiarkan saya hanya berkomentar (sangat bodoh) tetapi sebagai catatan pribadi, saya akan menyebutkan, saya bekerja kembali dengan PHP coder setiap hari (serta membantu dalam pekerjaannya) dan alat termudah yang kami temukan adalah untuk menggunakan kotak alat Komodo dan mendaftarkan variabel "yang ditransfer" dari setiap tampilan / pengontrol / model di toolboxx, sehingga kapan saja, jika saya sedang mencari merancang halaman di sekitar set data yang dikirim ke halaman itu, saya dapat melihat di kotak peralatan dan melihat dengan tepat data apa yang sedang dikirim dan "tipe" apa yang dikirim, dan juga sebaliknya di ujungnya.