Tim desain dan desain web di Canonical membuat dan memelihara semua situs web Canonical dan antarmuka web produk pada iterasi dua mingguan. Berikut adalah beberapa sorotan dari pekerjaan kami yang telah selesai dari iterasi ini.
Situs web
Tim web mengembangkan dan memelihara sebagian besar situs Canonical seperti ubuntu.com, canonical.com, dan lainnya.
Halaman aplikasi untuk kandidat pekerjaan Canonical
Kami sedang mengerjakan sistem yang memungkinkan kandidat yang telah melamar posisi di Canonical untuk melihat status aplikasi mereka serta informasi tentang tahap mereka saat ini dalam proses perekrutan di Canonical.
Berikut adalah contoh proses perekrutan yang menunjukkan tahap apa mereka berada dan wawancara masa lalu dan masa depan mereka:
Halaman baru di ubuntu.com
Kami telah meluncurkan banyak halaman baru. Halaman untuk mengunduh Ubuntu untuk papan RISC-V diterbitkan dalam iterasi ini. Selain itu, Canonical telah merilis versi baru Charmed Kubeflow beta 1.6, jadi kami membuat spanduk di halaman AI dan halaman Apa itu Kubeflow, serta situs Charmed Kubeflow untuk mendukungnya. Kami juga mulai mengerjakan halaman HPC (komputasi kinerja tinggi) dengan formulir kontak baru. Terima kasih kepada semua manajer produk yang berpartisipasi dalam menyusun halaman ini.
MAAS
Tim MAAS mengembangkan antarmuka pengguna proyek MAAS.
Meningkatkan proses pengujian dan mempersiapkan upgrade React v18
Sebagian besar pekerjaan UI kami dalam iterasi ini berada di belakang layar. Tugas penting adalah memigrasikan pengujian dari Enzyme ke React Testing Library dan menyelesaikan tugas pemeliharaan. Memindahkan pengujian ini akan memungkinkan kami untuk menguji komponen kami dengan cara yang jauh lebih berpusat pada pengguna dan aman, dan pada akhirnya akan memungkinkan kami untuk meningkatkan ke React v18.
Pencarian dan filter perangkat sisi server
Kami menerapkan pencarian sisi server dan pemfilteran mesin di dasbor MAAS. Ini sangat meningkatkan fungsionalitas daftar mesin saat menggunakan MAAS dengan ribuan mesin.
Sebelumnya, semua mesin harus dimuat oleh klien browser sebelum berinteraksi dengan daftar mesin dan melakukan pencarian atau penyaringan. Kami telah mendesain ulang ini sehingga halaman mesin tertentu diminta oleh klien dan pencarian dan penyaringan dilakukan pada pengontrol zona sebelum hanya mengirim data yang diperlukan ke klien.
Manajer situs MAAS
Seiring pertumbuhan perusahaan, jumlah wilayah MAAS dan pusat data juga meningkat secara bersamaan. Pada siklus terakhir, kami telah melakukan penelitian ekstensif untuk memahami berbagai cara perusahaan yang berbeda menggunakan MAAS, dan dalam siklus ini kami melihat bagaimana tim internal kami menggunakan MAAS. Kami dapat mengkategorikan penggunaan menjadi 3 kategori.
- Menggunakan AWS sebagai pengontrol zona
Cara pertama pengguna kami menyiapkan MAAS adalah menghilangkan kebutuhan untuk mengelola Postgres itu sendiri dan membuat pengaturan MAAS semi-terpusat dengan menginstal pengontrol zona di AWS. Dalam skenario contoh ini, ada 4 instance MAAS yang didistribusikan oleh 4 lokasi geografis di dunia. Jadi instans MAAS bertindak sebagai PoP untuk semua pusat data dan ada sekitar 20-60 mesin di setiap pusat data. Secara total, mereka mengelola sekitar 200-500 perangkat per PoP.
Salah satu poin rasa sakit terbesar di sini adalah manajemen gambar, khususnya, gambar khusus.
Cara pengelolaan gambar saat ini mengharuskan Anda mengunggah gambar ke zona, kemudian gambar dikirimkan ke RDS. Dari sini terjadi proses sinkronisasi antara MAAS dan RDS, sehingga semua rack controller di PoP harus mendownload semua image dari database tersebut. Kemudian ketika Anda memasuki PoP berikutnya, Anda harus melalui langkah yang sama persis.
Ada 2 masalah di sini:
1. Berurusan dengan gambar manual itu mubazir
2. Ada banyak lalu lintas dari data yang sama yang disimpan beberapa kali dalam database
Basis data di cloud itu mahal
Kasus penggunaan cloud Telco menarik karena ada tujuan berbeda untuk Bare Metal yang telah kami identifikasi. Bagian pertama adalah situs mini yang disebut MEC dan RAN di mana mereka memasang menara seluler ke stasiun pangkalan. Ada antara 5-15 mesin per situs dan satu situs mewakili 1 instans MAAS. Pada pengaturan saat ini di atas, kami dapat memprediksi bahwa situs kecil ini akan tumbuh menjadi sekitar 60.000 situs di seluruh negeri. Bagian kedua adalah jaringan utama mereka yang mereka butuhkan untuk menjalankan layanan mereka. Dalam contoh penyiapan, ada antara 100-300 mesin per situs inti dan situs inti dapat dikelola oleh 1 atau 2 instans MAAS. Mengingat ini adalah skala, manajemen gambar masih menjadi masalah, tetapi alih-alih berurusan dengan 4 instance MAAS, kita berbicara tentang 25 situs cloud inti + 60 ribu situs mikro. Sangat sulit untuk bekerja dengan gambar dengan cara saat ini.
Selain manajemen gambar, pengguna Telco juga sangat peduli dengan instruksi pengoperasian, pemantauan, dan pemecahan masalah, karena mereka memiliki protokol yang sangat ketat tentang cara merawat semuanya, karena jika listrik padam, akan menjadi bencana jika ponsel kita tidak berfungsi. .
Jadi nilai penting di sini adalah mereka harus dapat menghubungkan semua jenis manajer untuk berintegrasi dengan sistem apa pun seperti MAAS di NOC mereka.
- Menggunakan MAAS sebagai pengontrol area dan rak
Kasus penggunaan terakhir adalah kasus penggunaan tipikal kami di mana MAAS digunakan sebagai pengontrol Rack+region. Zona MAAS mewakili 1 pusat data. Di beberapa lingkungan, perusahaan dapat menyebarkan beberapa instans MAAS untuk melayani satu pusat data untuk tujuan yang berbeda. Misalnya, pusat data dapat memiliki 3 pengaturan zona MAAS untuk tujuan pengujian pengguna, tujuan pengujian pengembangan, dan produksi. Selain itu, untuk membuat pengaturan ketersediaan tinggi ini, kita dapat mengonfigurasi 3 pengontrol rak+wilayah untuk 1 MAAS.
Berdasarkan apa yang kami pelajari dari skenario ini, rencana kami saat ini adalah fokus pada tiga fitur besar untuk proyek ini. Ada 3 tahapan MVP yang penting bagi kami. Fase pertama dan fokus kami saat ini adalah mengelola dan mengonfigurasi area. (Seperti yang ditunjukkan pada nomor di bawah ini.)
Manajemen dan konfigurasi zona
Desain konsep pertama dan paling kasar kami berfokus pada bagaimana menampilkan informasi yang sesuai untuk gambaran umum area. Dengan asumsi pengguna memiliki beberapa wilayah di setiap negara, peta di bawah ini menunjukkan lokasi yang berbeda di negara tersebut dan jumlah situs MAAS di lokasi tersebut. Pengguna dapat secara manual mengkonfigurasi jenis situs MAAS yang ada di lokasi tersebut. Misalnya, pada kartu di bawah ini, ada 2 jenis situs. Situs mikro (3-10 mesin per situs) dan situs utama (25-100 mesin untuk komputasi inti).
Pengguna kemudian dapat menelusuri ke lokasi tertentu untuk menemukan informasi tentang area MAAS tertentu. Gambar di bawah ini menunjukkan data dummy untuk situs kecil yang tidak aktif yang terletak di Inggris Timur.
Sistem desain
Tim Vanilla mendesain dan memelihara sistem desain Vanilla dan pustaka kerangka kerja. Mereka memastikan gaya yang konsisten di seluruh aset web.
Animasi dan transisi vanilla yang ditingkatkan
Meningkatkan interaksi pengguna dengan animasi halus adalah fokus utama dari pekerjaan front-end dalam iterasi ini.
Animasi yang diterapkan dengan baik tidak hanya dapat membuat antarmuka pengguna lebih menyenangkan, tetapi juga berpotensi meningkatkan aksesibilitas. Kecuali jika seseorang umumnya mengalami kesulitan mengelola gerakan, transisi dapat mengurangi beban kognitif—menjadi lebih mudah untuk melacak elemen pada halaman dan berkomunikasi di antara mereka saat bergerak.
Kami telah menambahkan transisi halus yang dapat diperluas ke template yang ada seperti Accordion atau yang baru seperti Navigasi Samping yang Dapat Diperluas.
Pola akordeon dengan transisi diterapkan dalam ekspansi
Semua animasi menghormati pengaturan gerakan penurunan preferensi CSS dan oleh karena itu akan dinonaktifkan jika itu adalah preferensi pengguna.
Pengujian integrasi dengan Cypress
Untuk memastikan komponen vanilla tidak hanya diuji terhadap visual (kami sudah menggunakan Percy), kami memperkenalkan Cypress dan mulai menambahkan tes integrasi ke komponen kami.
Lulus tes akordeon dengan sukses menggunakan kueri semantik
Ini memungkinkan kami untuk membuat pengujian yang meniru cara pengguna sebenarnya berinteraksi dengan komponen.
Peningkatan berbasis penelitian di masa depan untuk navigasi utama di ubuntu.com
Kami sedang berupaya memperbarui navigasi utama di ubuntu.com. Saat pengguna menguji penawaran baru, tim peneliti UX kami memperhatikan bahwa pengguna perlu beberapa detik untuk memahami hierarki menu tarik-turun. Kami ingin meningkatkan ini dan membuat 3 tingkat navigasi lebih jelas (item menu tingkat atas horizontal, diikuti oleh pengguliran sisi vertikal di sembulan terbuka, diikuti oleh konten bersusun di area navigasi utama). Untuk melakukan ini, kami sedikit meningkatkan penonjolan area utama dengan membuat latar belakang lebih cerah.
Desain ulang elemen bentuk dan tombol
Kami sudah lama memiliki keluhan tentang bidang teks dan tombol yang terlihat serupa. Ada perbedaan kecil – misalnya bayangan bagian dalam pada bidang teks, dan sudut membulat kecil pada tombol, tetapi sangat halus sehingga mudah untuk dilewatkan. Untuk mengatasinya, kami telah membuat proposal untuk mendekatkan bidang teks ke gaya Desain Material. Selain membuat input dan tombol terlihat sangat berbeda, perpindahan dari batas di semua sisi ke batas di bagian bawah hanya membuat bentuk besar jauh lebih sedikit “berisik”. Ini memungkinkan kita untuk meningkatkan kontras batas dari minimum WCAG 3:1 menjadi 4,5:1 dan mencocokkan warna batas dengan warna teks.
Spesifikasi UX diterbitkan
Dalam iterasi ini, desainer UX tamu kami mengerjakan dan menerbitkan spesifikasi UX untuk 3 komponen vanilla – Matrix, Buttons, dan Slider.
Pasar
Tim Marketplace bekerja sama dengan tim Store, Snapcraft, Snapd, dan Desktop untuk mengembangkan dan memelihara Snap Store dan Charmhub.
Gabungkan lembar ikhtisar dan dokumen dalam detail yang menarik
Kami dulu memiliki dua tab ikhtisar dan dokumentasi yang berbeda pada halaman detail yang menarik.
Tab “Ringkasan” pada halaman detail atraksi di Charhub.io berisi beberapa metadata (deskripsi dari metadata.yamlTautan). Konten utamanya diisi oleh file ReadMe Charm.
Tab “Dokumen” diisi oleh Wacana. Banyak pesona yang didokumentasikan dengan baik, tetapi tidak di sini (lebih banyak di ReadMe sebagai gantinya).
Untuk konsistensi, sementara tim dukungan kami bekerja untuk mengintegrasikan dokumentasi/deskripsi charm ke dalam charm itu sendiri, kami telah membuat iterasi pertama untuk menggabungkan tab ikhtisar dan dokumentasi di bawah satu “deskripsi”.
Saat ini, konten akan berasal dari file “readme”. Nantinya, itu akan konsisten di semua pesona dengan struktur yang ditentukan yang berasal dari pesona saat diterbitkan.
Jika tidak ada dokumentasi, kami menyediakan CTA untuk mendorong penerbit menyediakan dokumentasi berbasis wacana.
Ketika dokumentasi wacana hadir, itu ditampilkan sebagai scroller samping, setelah tab ikhtisar, yang berisi konten file “readme” default.
Juga kompatibel di halaman Bundel.
Daftar objek wisata di tampilan detail paket
Sebagai bagian dari pekerjaan terintegrasi untuk meningkatkan cara didokumentasikan pesona, kami telah menggunakan integrasi yang sama dari tab “Ringkasan” dan “Dokumentasi” untuk paket.
Selain itu, kami sekarang menampilkan daftar Mantra yang berisi Bundel.
Halaman antarmuka
Sebagai bagian dari pekerjaan baru-baru ini, kami sedang mengerjakan desain visual halaman antarmuka. Langkah selanjutnya adalah implementasi.
Riset pengguna
Tim Riset Pengguna bekerja dengan desain dan manajemen produk untuk memberi tim wawasan tentang kebutuhan dan alat pengguna kami untuk melakukan penelitian mereka.
Replikasi dalam tampilan berlangganan UA
Tampilan langganan UA adalah tempat Anda dapat memilih dan membeli langganan UA dari situs web. Kami telah menguji versi terbaru dari desain dan memberikan tantangan kepada pengguna kami untuk diselesaikan dengan berlangganan desain yang optimal untuk setiap skenario. Kami menemukan bahwa pengguna umumnya merasa mudah untuk menavigasi desain baru kami, tetapi mereka membutuhkan lebih banyak informasi untuk mengidentifikasi produk yang mereka inginkan. Dengan UX dan tim manajemen produk, kami akan bekerja untuk memastikan bahwa pengguna diberikan detail lebih lanjut tentang berbagai opsi cakupan dan mempersempit kemungkinan kombinasi keamanan dan cakupan dukungan untuk memfasilitasi pemilihan paket yang optimal.
Posisi tim:
Datang dan bergabunglah dengan tim. Jika Anda ingin tahu lebih banyak tentang tim, silakan baca blog dan deskripsi tim kami.
Dengan dari Tim Web Canonical.
