Get best of the week

Pengembang CSS - mengapa dunia membutuhkannya?

Versi audio dalam bahasa Rusia (Yandex.Music) / iTunes

Dalam sepuluh tahun terakhir, CSS telah tumbuh secara eksponensial dengan menambahkan lebih banyak fitur, sehingga secara bertahap menjadi sangat rumit dan membingungkan. CSS zaman kita sangat berbeda dengan CSS dekade 2001-2010.

Sebelum saya mulai menjelaskan mengapa dunia membutuhkan pengembang CSS, kita perlu kembali dan melihat sejarah CSS.

Sampul pos bebek kuning

Disclaimer:
.
 .
 , , .


CSS


Pada dekade 2001-2010, ketika Internet menaklukkan dunia, CSS diam. Internet Explorer 6-7-8 adalah browser terkemuka. Microsoft pada waktu itu tidak terlalu memperhatikan spesifikasi CSS, tidak menunjukkan minat untuk menambahkan fitur baru ke dalamnya. CSS tetap di versi 2.1 selama bertahun-tahun.

Sejak 2007, browser modern Firefox dan Chrome mulai muncul. Bahkan saat ini, kami masih harus mendukung Internet Explorer. Ini menghambat perkembangan kami. Sebagai browser utama yang mengatur pada saat itu, IE menginstal hampir tidak ada, kecepatan pengembangan CSS hampir nol. Itu adalah "zaman kegelapan" Internet.

Ilustrasi Dark Times CSS

Acara Fundamental Era Baru CSS


Saya adalah seorang pengembang pada saat itu, dan karenanya melihat dua peristiwa penting yang mengubah dunia CSS dan web secara keseluruhan:

  1. Awal era smartphone (29 Juni 2007) - semuanya dimulai dengan rilis iPhone pertama. Rilis ini mengharuskan dukungan fitur CSS baru yang sesuai dengan kategori baru perangkat web.
  2. Rilis Browser Chrome (2 September 2008) - Chrome adalah browser baru yang dimulai sebagai aplikasi desktop. Sampai saat itu, Internet Explorer adalah penguasa utama Internet dan menentukan perkembangannya.

Browser Chrome dan Steve Jobs dengan iPhone pada konferensi 2007, kolase

Mengapa pengembang Frontend berurusan dengan CSS dan JavaScript


Pada saat itu, gagasan bahwa pengembang Frontend harus mengelola semua kemampuan klien cukup umum. Kemudian hanya ada beberapa aturan CSS. CSS sekarang telah berkembang, dan visi seperti itu tidak lagi relevan.

CSS 3, HTML 5, dan JavaScript: Era Baru


Sulit untuk mengatakan dengan tepat kapan CSS 3 muncul, karena telah dikembangkan sejak 1999. Dukungan nyata di Internet dimulai pada tahun 2011. Chrome & Firefox meningkatkan pangsa pasar mereka pada saat itu. Smartphone menjadi sangat populer. Dengan browser mereka sendiri, mereka semua mulai mendukung fitur baru CSS 3.

Perubahan ini mengurangi popularitas Internet Explorer. Pada saat itu, itu masih browser yang signifikan, namun, Microsoft menyadari bahwa itu harus mulai memperhatikan spesifikasi dan pengembangan CSS. Mereka merilis Internet Explorer 9.

CSS baru


CSS 3 sekarang berumur 10 tahun, mengapa tidak CSS 4? CSS 3, tidak seperti CSS 2.1, adalah standar terbuka. Berkat ini, terus diperbarui. Tidak perlu menyebutkan versi baru "CSS 4", karena CSS 3 adalah pengembangan berkelanjutan, versi untuk semua waktu.
gambar

Sejak 2011, setiap pembaruan browser menyertakan fitur CSS baru. Dalam beberapa tahun terakhir, sebagian besar browser - Chrome, Firefox, Opera, Edge - diperbarui hampir setiap bulan (Safari diperbarui terutama sekali setahun). Frekuensi ini berarti kita mendapatkan fitur CSS baru segera setelah muncul.

Apa yang baru dalam CSS selama 10 tahun terakhir


Selama sepuluh tahun terakhir, banyak spesifikasi baru telah muncul untuk berbagai jenis
modul CSS, misalnya:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

Anda mungkin memperhatikan bahwa banyak fitur baru berada di bawah tanggung jawab pengembang frontend. Ini berarti bahwa ia harus mendapatkan pengalaman dalam semua itu. Tetapi ini bahkan bukan daftar lengkap.

Dalam kehidupan nyata, seorang pengembang web hampir tidak mungkin memiliki tingkat pemahaman dasar tentang semua fitur baru ini. Selain itu, JavaScript dikembangkan secara paralel. Dan dia berkembang, bahkan mungkin lebih dari sekadar CSS. Ini membuat semakin sulit bagi seseorang untuk mengikuti perkembangan.

Industri web kesalahan besar


Situasi ini, di mana pengembang frontend tidak dapat mengatasi kompleksitas baru dalam CSS, menciptakan gerakan baru yang disebut "Bagaimana tidak belajar CSS."
Sebuah gerakan baru yang disebut "Don't Learn CSS"

Kerangka kerja CSS pertama


Kesalahan ini dimulai dengan kerangka kerja seperti Bootstrap dan Foundation. Rilis pertama dari masing-masing berlangsung pada tahun 2011. Tanggal khusus ini tidak disengaja - ini adalah tahun-tahun pertama CSS3, desain responsif, situs web seluler, dan pengaturan huruf lintas-browser.

Saya tidak pernah mencoba menyelam jauh ke dalam Bootstrap, karena saya tidak pernah menyukai konvensi penamaan CSS non-semantik. Membantu pengembang web lain di komunitas , saya segera menyadari bahwa Bootstrap hanya cocok untuk kasus-kasus ketika Anda menggunakannya sebagaimana adanya, tanpa mencoba untuk menyesuaikannya sendiri.

Tangkapan layar markup bootstrap
Bootstrap HTML - sebagian besar kelas non-semantik.

Sudut 2: kerangka kerja yang sesuai dengan JavaScript pertama


Angular baru adalah yang pertama memperkenalkan gaya enkapsulasi. Itu adalah cara untuk menyingkirkan pengembang web yang tidak berpengalaman dari kebutuhan untuk memahami cascading CSS. Dengan menggunakan metode ini, Anda dapat membuat gaya global dan masih memiliki gaya lokal untuk setiap komponen.

Dari semua berbagai ide pengembangan, ide gaya enkapsulasi, menurut pendapat saya, bagus karena Anda masih dapat membuat gaya global serta gaya enkapsulasi untuk komponen. Selain itu, kami masih memiliki pemisahan kekhawatiran untuk CSS / SASS, untuk HTML, dan untuk JavaScript. Kita dapat menikmati cara sederhana untuk mengunduh hanya gaya yang diperlukan.

Cuplikan layar dari struktur file dalam proyek dengan Angular

Bereaksi - kematian semantik!


Bereaksi mengambil ide ini lebih jauh dan menulis semua HTML dan CSS di dalam JavaSscript. Tujuan menciptakan gaya yang dapat digunakan kembali mati bersama React. Secara otomatis menghasilkan nama kelas CSS; dengan demikian, kode menjadi tidak dapat dibaca dan tidak dapat dipahami, baik karena nama kelas CSS dan karena HTML non-semantik. Dari sudut pandang saya, ini mirip dengan bagaimana CSS dan HTML ditulis pada awal Internet ketika tidak peduli bagaimana CSS atau HTML terlihat saat mereka bekerja.

Bereaksi tangkapan layar markup kode
Bereaksi - nama kelas css yang tidak dapat dibaca

Mengapa begitu buruk? Ketika Anda memiliki masalah CSS nyata dan pengembang frontend biasa tidak dapat menyelesaikannya dan membutuhkan pengembang CSS yang berpengalaman, kode Bereaksi yang membingungkan akan menghalangi. Ya, kedua pengembang web dapat menyelesaikannya bersama, tetapi butuh waktu dari dua pengembang web yang berpengalaman.

Bangun!


Pengembang frontend tidak menarik CSS! Seseorang harus mengatakannya dengan lantang! Ya, saya tahu bahwa ini adalah generalisasi kasar dan karenanya tidak 100% benar, tetapi saya tidak mencoba untuk menjadi 100% benar.
Sebelum saya melanjutkan, Anda harus tahu sedikit tentang saya.

Ayam di latar belakang matahari terbit, foto
Bangun - pengembang frontend tidak menarik CSS!

Siapa saya


Saya mulai sebagai pengembang frontend pada awal 2007.
Pada awal 2012, saya hampir sepenuhnya berhenti menulis JavaScript, alasan utamanya adalah saya sangat menyukai CSS, dan JavaScript jauh lebih sedikit.

Dari 2012 hingga sekarang, karena saya hanya fokus pada CSS, saya telah mengembangkan keunggulan di bidang ini. Selama bertahun-tahun, saya telah menulis banyak artikel tentang CSS , mendirikan komunitas CSS lokal dengan 5.000 anggota, dan mengadakan banyak sekali percakapan di berbagai pertemuan, seminar, dan konferensi.

Saya dengan mikrofon di sebuah konferensi, foto
Saya berbicara di ConFrontJS 2019 di Warsawa, Polandia.

Mengapa saya menceritakan semua ini kepada Anda?Karena saya masih semacam unicorn di negara saya dan di industri web. Ya, saya mendapat banyak terima kasih, tetapi ada yang besar tapi! Meskipun ini bekerja untuk saya karena saya terkenal di industri web negara saya, sulit bagi orang lain untuk menjadi sama karena industri web masih berusaha mempertahankan "nama lama pengembang Frontend" (yang berarti mencoba menulis JavaScript dan CSS kelas satu) .

Di negara saya, saya tahu pengembang Frontend terbaik. Karena saya tertarik untuk memahami industri web, saya selalu bertanya kepada talenta Frontend top ini apakah menurut mereka bagus dalam CSS. Jawaban mereka terus membuat saya takjub - kebanyakan dari mereka merasa tidak aman tentang CSS, dan mereka selalu terkejut dengan pengembang seperti saya yang menyukai CSS.

Industri web perlu berubah


Terlepas dari kenyataan bahwa ini bekerja hingga 2010, itu tidak dapat dilanjutkan pada tahun 2020. Industri web telah berubah, dan inilah saatnya untuk menjadi dewasa dan meninggalkan jabatan awal di industri web dan beralih ke pemosisian baru.
Posisi yang akan memenuhi kebutuhan zaman kita. Pada awalnya, perusahaan besar. Lalu untuk semua orang.

Angka 2020 font yang indah, ilustrasi

Apa kepentingan perusahaan?


Pada tahun 2020, CSS adalah keterampilan yang penting. Sementara perusahaan berusaha untuk menghemat uang, mereka mungkin akhirnya menghabiskan lebih banyak uang. Selama bertahun-tahun bekerja sebagai pengembang web, saya melihat bagaimana pengembang menghabiskan terlalu banyak waktu pada apa yang bisa diselesaikan oleh pengembang CSS khusus dalam 10 menit dan dengan kode yang lebih produktif.
Pada tahun 2020, CSS adalah keterampilan yang penting.

Apa yang bisa menjadi jabatan baru?


Selama delapan tahun terakhir, saya telah berganti posisi beberapa kali. Saya melakukan ini untuk menjelaskan kemampuan saya kepada orang-orang yang melihat profil LinkedIn saya .

Pada awalnya saya menyebut diri saya CSS Master (dengan nama komunitas yang saya dirikan - CSS Masters Israel ). Menyenangkan melihat tak lama setelah pengumuman pekerjaan ini dengan tajuk utama. Saya menyadari bahwa ada perusahaan yang membutuhkan pengembang CSS, tetapi tidak tahu cara menyebutkannya secara memadai.

Foto selembar formulir lamaran kerja, gambar yang tidak berarti

Kemudian, saya mengubah nama posting saya beberapa kali (UI / CSS - Pengembang / Pengembang Antarmuka / Insinyur / Arsitek / Pakar), mencoba menyesuaikan kemampuan saya dengan nama pekerjaan.

Jangan Hanya Pengembang CSS


Saat ini kami memiliki beberapa jenis pengembang yang berspesialisasi dalam bagian visual, seperti CSS dan, misalnya, SVG. Saya akan mencoba mendefinisikan jenis ini di sini :

Pengembang CSS - Nama ini untuk profesional tingkat menengah CSS. Ini adalah pengembang yang dapat mengambil desain dan dengan mudah mengubahnya menjadi CSS.

Arsitek CSS- Kategori ini ditujukan untuk pengembang, seperti saya, yang, selain membangun CSS secara efisien, adalah ahli dalam perencanaan pemisahan CSS dan membangunnya menjadi struktur bangunan yang kompleks. Tidak seperti pengembang CSS, arsitek CSS lebih berpengalaman dan tahu bagaimana skala proyek-proyek besar dengan cerdas, dengan pengembang CSS tambahan bekerja di tim mereka. Selain itu, mereka berkomunikasi dengan pengembang web lain, manajer proyek, dan perancang web.

Banyak bebek karet kuning yang memamerkan berbagai profesi, ilustrasi
Varietasnya luar biasa!

Pengembang Animasi CSS - Saat ini, kami dapat meningkatkan pengalaman pengguna hampir tanpa kesulitan menggunakan animasi CSS atau animasi SVG, sehingga mengubah proyek yang bagus menjadi yang fantastis. Pekerjaan ini mungkin cocok untuk perusahaan besar.

Ini adalah kebutuhan paling umum untuk tahun 2020, tetapi ada jenis pengembang khusus lainnya, seperti:


Mungkin ada lebih - kemungkinan tidak terbatas!

Akhirnya


Dalam artikel ini, saya berusaha meningkatkan kesadaran tentang subjek yang, menurut saya, belum dibahas. Tujuan saya adalah untuk mendapatkan industri web di jalur.

Selain artikel saya, ada juga artikel tentang topik ini dari sudut pandang lain:


Pada akhirnya


Jika Anda menyukai artikel ini, saya akan sangat menghargai jika Anda membaginya dengan orang lain sehingga ide ini dapat meningkatkan kesadaran baru di industri web.

Siapa saya?


Nama saya Elad Shechter, saya adalah pengembang Web yang berspesialisasi dalam arsitektur CSS dan HTML. Saya bekerja untuk invest.com .

Saya twitter dan situs .

Saya di latar belakang proyektor, berbicara tentang proyek, fotografi

More articles:


All Articles