Cara Mempercepat Proses Loading Dengan Bootstrap 2021 – Bootstrap adalah salah satu kerangka kerja yang paling banyak digunakan untuk membangun aplikasi web. Ini terdiri dari komponen HTML dan CSS untuk tipografi, formulir, tombol, navigasi, slider, dan antarmuka pengguna lain yang dapat Anda pikirkan yang membuat proses pengembangan lebih mudah dan lebih cepat.
Cara Mempercepat Proses Loading Dengan Bootstrap 2021
Anda dapat berulang kali menggunakan pola tata letak yang sama di seluruh aplikasi web menggunakan kelas dan tema yang telah dibuat sebelumnya langsung dari kotaknya. Karena itu, Anda dapat mempercepat perkembangan Anda sambil menjaga koherensi setiap elemen.
allfreebackgrounds – Meski begitu, Anda dapat menjadi pengembang terbaik di dunia dan pada saat yang sama Anda dapat memiliki alat terbaik yang dimiliki pengembang, tetapi Anda tidak akan memiliki banyak waktu untuk mengembangkan Desain. Waktu dalam proses pembangunan sangat penting dan menjadi perhatian utama dalam industri ini. Semakin cepat Anda berkembang, semakin cepat Anda menerapkan.
Tujuan saya dalam tutorial ini adalah untuk memandu Anda dalam beberapa cara untuk mempercepat tidak hanya proses pengembangan web Anda menggunakan kerangka kerja Bootstrap 5 tetapi juga membantu Anda membuat situs web atau aplikasi yang cepat dan efisien tanpa kehilangan fitur dan kemampuan kerangka kerja front-end. Ini akan memungkinkan Anda sebagai pengembang untuk merencanakan penyiapan Desain Anda dengan hati-hati tanpa menghabiskan terlalu banyak waktu dalam proses pengembangan.
Memanfaatkan pelari Tugas, Preprocessor, dan Alat Sinkronisasi saat mengembangkan dengan Bootstrap
Jika Anda telah mengembangkan situs web atau aplikasi berbasis Bootstrap cukup lama, kemungkinan besar Anda akan menemukan konsep preprocessor seperti Sass. Gabungkan dengan runner tugas seperti Gulp JS atau Grunt JS, alur kerja Anda pasti akan meningkat dan dapat mempercepat proses pengembangan. Selain itu, menambahkan BrowserSync JS di bagian atas alat ini pasti akan menghemat banyak waktu Anda dengan pengujian browser tersinkronisasi.
Pembuat Template Email Online
Dengan Kartu Pos, Anda dapat membuat dan mengedit templat email online tanpa keahlian pengkodean! Menyertakan lebih dari 100 komponen untuk membantu Anda membuat template email ubahsuaian lebih cepat dari sebelumnya.
Apa itu Task Runner?
Pelari tugas persis seperti namanya, ia menjalankan tugas. Anda dapat memilih tugas mana yang Anda inginkan untuk dijalankan oleh pelari tugas, dan itu akan mengotomatiskan semua pekerjaan untuk Anda seperti menyusun kode Anda dari Sass ke CSS atau bahkan Typecript ke JavaScript.
Penggunaan umumnya adalah saat Anda mengonfigurasi tugas yang dijalankan setiap kali file tertentu diubah, Anda tidak perlu mengompilasi ulang secara jelas setiap kali atau memulai ulang server untuk melakukannya. Pelari tugas juga sering digunakan dalam menyalin file dari satu direktori ke direktori lain, memperkecil ukuran file, menggabungkan file dan melayani file di port komputer lokal.
Dua pelari tugas paling populer di dunia pengembangan web modern adalah Gulp JS dan Grunt JS. Keduanya melakukan hal yang sama dan baik dalam membuat skrip otomasi mereka sendiri tetapi berbeda terutama dalam bagaimana otomatisasi suatu proses diimplementasikan. Gulp JS didasarkan pada platform JavaScript Node.js sementara Grunt JS bekerja sangat baik dengan lingkungan templatingnya. Saya tidak akan membahas lebih dalam perbedaannya karena ini bukan tujuan utama artikel ini, tetapi pada saat penulisan ini Gulp JS menawarkan proses yang lebih terstandarisasi dibandingkan dengan Grunt JS dan merupakan runner tugas yang paling disukai oleh sebagian besar developer. Faktanya, ia telah memperoleh 32.179 bintang di GitHub dan dalam hal tren Google, Gulp JS juga memimpin.
Gulp adalah runner tugas baris perintah yang terutama didasarkan pada aliran modul Node.js. Ini mengotomatiskan tugas melalui memori dan menulis file secara instan sehingga menghasilkan build yang jauh lebih cepat karena tidak perlu membaca dan menulis file output di dalam drive komputer. Hanya dengan membuat file instruksi kecil, gulp dapat melakukan hampir semua pengembangan tugas yang ingin Anda lakukan. Gulp menggunakan file konfigurasi package.json dan gulpfile.js untuk mengubah dan memproses file Desain Anda. Alat-alat ini membantu gulp menerapkan dan mengatur semua hal luar biasa yang memberdayakan pengembang untuk dilakukan.
Sass atau Syntactically Awesome Style Sheets adalah bahasa skrip preprocessor yang dikompilasi menjadi Cascading Style Sheets yang membantu pengembang membuat stylesheet yang lebih baik dengan sedikit usaha. Sass membebaskan developer dari pengulangan dengan memperluas CSS melalui metode yang berbeda seperti variabel, impor inline, peta bersarang, dan banyak lagi. Dengan ini, menerapkan perubahan jauh lebih cepat dan Anda bebas mengambil risiko dan lebih fokus pada desain Anda. Sass berfokus pada cara membuat lembar gaya yang efisien, bukan apa yang membuat lembar gaya Anda lebih teratur dengan cara tertentu.
Browsersync JS adalah alat berbasis Node.js yang menyinkronkan pengujian browser dengan melakukan seperti perantara antara server dan browser. Dengan alat ini, Anda tidak perlu menekan tombol segarkan browser berulang kali setiap kali Anda mengedit kode hanya untuk melihat perubahannya karena alat ini mendukung pemuatan ulang langsung dan sinkronisasi interaksi. Ini berarti bahwa semua aktivitas Anda ditampilkan di setiap browser. F paling revolusioner.
Di terminal Anda, jalankan perintah berikut untuk menginstal Gulp CLI secara global
Di terminal Anda, jalankan perintah berikut untuk membuat direktori untuk Desain Anda dan arahkan ke sana
Untuk demo kami, kami akan memiliki struktur file berikut. Buat folder dan file berikut terlebih dahulu
Menggunakan perintah di bawah ini, mari instal semua dependensi pengembangan yang diperlukan untuk Desain ini melalui NPM di terminal kami. Kami akan menggunakan tanda –save untuk menyimpan semua paket ini sebagai dependensi pengembangan.
Di dalam gulpfile.js, kita perlu menambahkan perintah berikut untuk tidak hanya mengawasi perubahan pada file Sass tetapi juga untuk mengkompilasinya menjadi CSS biasa. Kami juga akan mengizinkan BrowserSync JS untuk melayani keluaran file kami melalui alamat server lokal.
Mari kita lihat lebih dekat kode kita di atas. Pada beberapa baris pertama kode kami, kami memerlukan paket gulp, sass, dan browserSync ke kode kami.
Selanjutnya, kami memanggil dua fungsi: compileCSS dan watchChanges. Fungsi compileCSS menangani semua kompilasi dari semua file .scss di dalam folder app / scss menjadi file .css yang dipetakan di dalam folder app / css.
Fungsi watchChanges menangani semua sinkronisasi (menggunakan BrowserSync JS) dengan browser dan memantau perubahan di dalam folder / app melalui file index.html.
Beberapa baris terakhir dari kode kita dengan gulp.watch () API memungkinkan menonton globs dan menjalankan semua tugas fungsi saat “perubahan” terjadi. Jika tugas tidak memberi sinyal Penyelesaian Asinkron, tugas tersebut tidak akan dijalankan untuk kedua kalinya. API ini menyediakan penundaan dan antrian bawaan berdasarkan default.
Hal berikutnya yang perlu kita lakukan adalah menginstal Bootstrap 5 dan mengimpornya ke dalam file custom.scss kita. Menggunakan perintah berikut, mari instal Bootstrap 5 melalui npm.
Sekarang kita hanya perlu mengimpor Bootstrap 5 di dalam file custom.scss menggunakan pernyataan import berikut.
Di dalam index.html, kita perlu menyertakan tautan ke file custom.css agar gaya kita berfungsi. Selain itu, untuk tujuan demonstrasi, mari tambahkan elemen formulir Bootstrap 5 dasar hanya untuk mengonfirmasi bahwa CSS Bootstrap kami berfungsi.
Untuk memastikan bahwa pengaturan kami berfungsi, kami perlu menjalankan perintah gulp di terminal kami. Ini harus membuka tab baru ke browser default Anda dengan alamat http: // localhost: 3000 / local server.
Saat ini, Anda akan melihat markup dan elemen bentuk Bootstrap kami muncul di layar browser. Ini hanya konfirmasi bahwa Gulp JS menjalankan tugas di dalam file gulpfile.js dan BrowserSync JS melayani keluaran melalui file index.html.
Dari sini, Anda sekarang dapat mulai menambahkan kode Sass Anda sendiri atau menimpa variabel Bootstrap 5 Sass default di dalam file custom.scss. Anda akan melihat bahwa itu akan secara otomatis mengkompilasi file Sass Anda ke file CSS dan menyinkronkan dengan output browser.
Secara opsional, Anda mungkin juga ingin menyertakan file _variable.scss untuk mengatur variabel Anda. Ini semua tergantung pada ukuran dan kompleksitas Desain Anda.
Kustomisasi Bootstrap 5 Build melalui Sass
Meskipun tidak ada yang salah dengan menyertakan semua fitur dan komponen Bootstrap 5 pada Desain Anda, terkadang Anda hanya menggunakan sedikit kelas dan fitur yang disediakannya seperti sistem kisi.
Sebagai contoh, jika Anda memuat 152 KB dari file sumber yang diperkecil Bootstrap 5 CSS, itu masih terdengar seperti banyak. Ingatlah bahwa CSS adalah bagian yang sangat penting dari situs web atau aplikasi karena dimuat di head dan berfungsi sebagai sumber daya pemblokiran render, yang berarti browser tidak akan merender konten yang diproses apa pun hingga CSS dimuat.
Baca Juga : Cara Instal phpBB MOD Dan Tutorial phpBB AutoMOD 2021
Bootstrap 5 menawarkan beberapa opsi pemanfaatan melalui Sass dan memanfaatkan variabel, peta, mixin, dan fungsi untuk membantu Anda membangun lebih cepat dan menyesuaikan Desain Anda dan juga menurunkan beberapa ukuran file untuk membuat situs web atau aplikasi Anda lebih cepat. Selain itu, pada dasarnya Anda melakukan salah satu praktik CSS terbaik dengan hanya memasukkan yang Anda perlukan saat mengembangkan karena Anda tidak ingin membuat paket kode yang membengkak yang penuh dengan kode yang tidak digunakan.
Untuk melakukan ini dengan Sass, Anda dapat menyertakan salah satu dari komponen dan fitur Bootstrap 5 berikut sesuai dengan kebutuhan Anda di dalam file Sass kustom Anda di mana Anda ingin membangun file CSS pada Desain Anda.