Catatan Ujung Depan # 1

Di artikel ini, Anda akan menemukan beberapa catatan frontend kecil. Terkadang mereka akan pendek karena topiknya terungkap sepenuhnya dalam beberapa kalimat, dan terkadang karena penulis tidak memiliki cukup pengalaman dan pengetahuan untuk mengungkapkannya secara lebih lengkap. Jika Anda menyukainya, saya akan menulis lebih banyak dan lebih lengkap, dengan tautan dan penelitian.



Ide untuk menulis artikel muncul saat membaca ulang korespondensi dengan seorang teman, pemimpin tim, front-end (Lyokha, halo!), Yang selalu dengan murah hati berbagi pengetahuan, ide, dan masalahnya dengan saya.



Segala sesuatu yang tertulis adalah pendapat pribadi sekelompok kecil orang dan hampir tidak berpura-pura menjadi benar. Ayo mulai.

Cobalah untuk tidak menggunakan transisi: semua

Banyak orang mengetahui hal ini, tetapi saya baru-baru ini menemukan alasan lain mengapa Anda harus sangat berhati-hati saat menggunakan semua nilai dengan properti transisi.



Mari kita bayangkan kita memiliki wadah dengan properti transisi:

.content{
  color: red;
  transition: 1s;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Saat mengarahkan kursor, warnanya berubah:

.content:hover {
  color: blue;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Jika kita bungkus dalam wadah ini, misalnya, svg, yang mengisi milik yang akan sama dengan currentcolor , kemudian di hover, cahaya gambar akan berubah. Tetapi bagaimana jika kita menentukan properti seperti itu di suatu tempat untuk semua svg?

svg {
  transition: 1s;
  fill: currentColor;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Saat mengarahkan kursor, isian akan berubah bukan 1 detik, tetapi sekitar 2, karena transisi pertama akan diterapkan untuk mengubah warna, dan seperti yang saya pahami, untuk setiap perubahan warna bagian luar, perubahan ke bagian dalam akan dipicu, tapi jika ada yang punya penjelasan yang lebih akurat, saya akan dengan senang hati membacanya.



Solusi: secara eksplisit tentukan transisi: isi untuk svg (jika Anda menentukan warna , maka situasinya tidak akan berubah, karenanya keluaran di atas).

svg {
  transition: fill 1.5s;
  fill: currentColor;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mempertahankan proporsi blok

Saya selalu berpikir bahwa semua orang, pengembang front-end yang berpengalaman, tahu tentang peretasan kuno yang memungkinkan Anda mempertahankan proporsi blok, ternyata tidak semua.



Properti padding , jika ditentukan sebagai persentase, didasarkan pada lebarnya, yang memungkinkan kita melakukan trik ini:

.image-container {
  height: 0;
  position: relative;
  /*       */
  padding-top: calc(100% * 9 / 16 );
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Sekarang kita bisa meletakkan gambar di wadah ini, yang tingginya akan dihitung dengan lebar wadah.

.img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

rasio aspek

Belum lama ini, properti rasio aspek ditambahkan, yang memungkinkan Anda membuat semua yang Anda lihat dari atas dalam satu baris.

.image {
  aspect-ratio: 16 / 9;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Yang utama, menurut saya, perbedaan dan kenyamanan properti ini adalah:

1. Kami tidak membutuhkan wadah
2. Jika lebar ATAU tinggi ditentukan, nilai kedua akan dihitung berdasarkan nilai rasio aspek
3. Jika lebar DAN tinggi diberikan, maka properti diabaikan

Dukungan rasio aspek masih jauh dari yang dihargai 95%, jadi gunakan dengan hati-hati

Jangan menunda pagination sampai nanti

Kedengarannya, tentu saja, aneh, tetapi sebagai orang yang membuat tampilan depan beberapa produk dari awal, saya akan mengatakan bahwa selalu ada godaan untuk "mencetak" pada penomoran halaman daftar, opsi di pemilih, tabel, dll. Saya memutuskan sendiri bahwa saya tidak akan pernah meletakkan ini di pembakar belakang, karena begitu pengguna mulai menghasilkan data, halaman mulai melambat, pencarian penyebab rem, tentu saja, tidak terlalu sulit, tetapi kapan mengenai pencarian, situasinya memerlukan solusi segera, dan ini adalah masalah, kode sial, dan hilangnya kredibilitas dengan departemen pengembangan.

Mengontrol tampilan komponen melalui variabel css

Variabel dalam css sudah disukai dan dihormati oleh banyak orang, tetapi pengalaman wawancara menunjukkan bahwa hanya sedikit orang yang menggunakannya, dan bahkan lebih sedikit orang yang tahu tentang kekuatan warisan yang sebenarnya. Sebagian besar tetap menjadi bagian dari dokumentasi di mana mereka berbicara tentang : root (dan ini hanyalah pseudo-class - alias untuk root pohon, paling sering untuk html).



Jadi, bayangkan kita memiliki komponen tombol dengan gaya cakupan (dalam contoh saya menggunakan Vue.js), yang memiliki gaya berikut:

.button {
  color: var(--text-color, #000);
  background-color: var(--bg-color, #444)
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dan kemudian kita cukup mendefinisikan kelas .dark di komponen induk:

.dark {
    --text-color: #fff;
    --bg-color: #333
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dan berikan kelas ini ke komponen tombol:

<my-button class="dark"/>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dan sekarang kontrol gaya sederhana tanpa mengganti gaya CSS di induk tersedia menggunakan mekanisme pewarisan variabel yang kuat.

Bug lucu dan menyiksa

Saya ingin meringkas artikel ini dengan sebuah cerita tentang bug garis depan yang kecil tapi tidak menyenangkan yang saya dan kolega saya tangkap.

Memasukkan gambar ke editor wysiwyg

Di editor teks di browser (kami menggunakan pena bulu), dimungkinkan untuk memasukkan gambar dari situs lain menggunakan ctrl + v. Kami tidak memikirkannya, bahwa setiap orang menggunakan mekanisme yang diterapkan untuk memasukkan gambar, tetapi pengguna adalah pengguna seperti itu. Satu situs, terutama yang sensitif terhadap peminjaman gambar, menentukan dari mana permintaan itu berasal, dan jika domain itu bukan miliknya, memberikan spanduk iklan dari produknya sendiri, yang tentu saja benar, tetapi itu mengejutkan kami. Jadi jika Anda sedang mengembangkan / menggunakan wysiwyg, perhatikan apa dan di mana memasukkan =)

Vue SSR + Cloudflare = <3

Masalah yang dikatakan kamerad tadi memberitahuku.



Hanya jika Anda membuka halaman yang dibuat dan diberikan oleh SSR dan navigasi SPA berikutnya, semua permintaan ke API diduplikasi. Untuk waktu yang lama mereka tidak mengerti apa yang terjadi. Setelah penelitian yang cermat, ternyata footer memiliki bidang standar dengan email perusahaan, tetapi cloudflare mengaburkan email (untuk melindungi dari pengikis). Ketika Vue di server mengumpulkan pohon di js, lalu mendapatkan pohon lain di klien (dengan surat yang tidak cocok), rehidrasi Vue rusak dan rusak, membuat instance vue baru, tetapi tidak mematikan instance lama yang tidak lengkap. Akibatnya, dalam keadaan tertentu, 2 instance Vue berjalan di halaman tersebut pada waktu yang bersamaan.



Itu saja. Komentar, keinginan, kritik keras - Saya akan dengan senang hati membaca semua ini dan menarik kesimpulan.