Stay Productive & Creative with Online Collaboration Tools

Whether you are learning, looking for inspiration, or building a project, collaborating with other developers provides valuable experience. The first part of this talk discusses how to use four major collaborative programming tools. In the second half of the talk, we do a collaborative live coding session on CodeSandbox, implementing quick performance and accessibiliy fixes that significantly improve our demo web page.

Originally presented at Women Techmakers and GDG Jogjakarta International Women’s Day 2020. https://www.youtube.com/watch?v=PCZlH6T-rJQ

Transcript

1. Eka @ekafyi - IWD 2020 Women Techmakers Jogjakarta Stay Productive & Creative with Online Collaboration Tools
2. Hi, I’m Eka Working from home before it was cool (frontend web dev @ AtmaConnect) github.com/ekafyi dev.to/@ekafyi eka@eka.fyi
3. Online Collaboration
4. Online Collaboration Untuk apa? Work, learn, side projects, products. Di mana? Di lokasi fisik yang sama atau berbeda. Mengapa? Lebih efisien, melewati batasan geografis, menghadapi pandemi.
5. bit.ly/eka-iwd-2020 Collaborative Coding
6. Collaborative Coding Tools
7. Collaborative Coding Tools GitHub CodePen Glitch CodeSandbox Free tier Yes Basic functionalities Search and browse projects View source code of public projects Like and fork/clone/remix projects Explore github.com/explore codepen.io/popular/pens glitch.com/@glitch codesandbox.io/explore Platform type Version control + social hub IDE IDE IDE Live project URL (view, share, embed) ❌ GitHub Pages (static) ✔ ✔ ✔ Collaboration Issues Pull Requests ❌ (Pro only) Invite others to edit Invite to edit Chat Classroom mode
8. 1. Github Issues untuk tracking bug dan tasks.
9. 1. Github Setelah bekerja di branch kita sendiri, buat Pull Request. Bisa request review dari user lain dan berdiskusi.
10. 1. Github Reviewer bisa mengomentari baris kode tertentu.
11. 1. Github Lihat sejarah modifikasi kode di history.
12. 2. Glitch Request to join untuk ikut bekerja di project user lain. Icon/avatar semua collaborator ditampilkan di kiri atas.
13. Invite others to edit untuk mengajak orang lain bekerja sama di project kita. 2. Glitch
14. 2. Glitch Lihat sejarah modifikasi kode di bagian Rewind.
15. 3. CodeSandbox Tab Live → copy link invite untuk mengajak orang lain bekerja sama di project kita.
16. 3. CodeSandbox Ada fitur chat antar collaborator. Ada dua mode yaitu standar (semua langsung bisa mengedit) dan Classroom Mode (admin memilih user yang bisa mengedit).
17. bit.ly/eka-iwd-2020 Today’s mission: Collaborate to improve this website’s performance and accessibility 4 basic improvements in < 4 minutes Let’s code together!
18. Source: https://web.dev/vitals Core Web Vitals Standar ukuran dasar untuk memastikan halaman web kita memberi pengalaman yang baik untuk pengguna. Tiga aspek: loading, interactivity, dan visual stability.
19. Let’s code together! - CodeSandbox: codesandbox.io/live/lYkYll - Login dengan akun Github - Chat di CodeSandbox untuk ikut mengedit
20. Image Area 1 / 4 Ukuran image terlalu besar. Image tidak dilengkapi beberapa atribut. File besar = boros data, loading lambat. Membuat layout bergeser. Akses screen reader terganggu. Masalahnya?
21. Image - before & after <img src="large.jpg"> <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="" width="300" height="100" >
22. Responsive image with srcset Memuat file yang paling mendekati ukuran layar. Alt text attribute Digunakan oleh screen reader, menjelaskan isi gambar (boleh berisi ""). Width and height attributes Memastikan ukuran image tidak banyak berubah sebelum & sesudah loading. Image improvement Area 1 / 4
23. Typography Area 2 / 4 Harus menunggu loading file web font. Ukuran teks tidak bisa mengikuti setting browser. Teks “hilang” sampai font selesai loading. Pengguna tidak bisa mengatur ukuran teks dari browser. Masalahnya?
24. Typography - before & after body { font-family: 'Roboto'; font-size: 16px; line-height: 24px; } body { font-family: 'Roboto', Arial, sans-serif; font-display: swap; font-size: 1rem; line-height: 1.5; }
25. Properti CSS font-display swap = Gunakan fallback font selama font utama masih loading. Jika sudah siap, tukar dengan font utama. rem (unit relatif) untuk font-size dan numeric line-height Ukuran teks menyesuaikan setting browser (tidak selalu 16px) dan line-height menyesuaikan parent element. Typography improvement Area 2 / 4
26. Color Area 3 / 4 Kontras warna terlalu rendah. Sulit dibaca. Masalahnya?
27. Color - before & after body { background: #fff; color: #777; } body { background: #fff; color: #757575; }
28. Color improvement Area 3 / 4 Web Content Accessibility Guidelines 2.0 Level AA Minimal 4.5:1 untuk teks standar, 3:1 untuk heading. Cara memeriksa kontras: - Browser DevTools (Elements → Styles → color picker) - Online tools eg. accessible-colors.com
29. Rendering isi halaman terhambat. Note: Yang menghalangi render adalah <script> dan <link>. Di demo ini, kita fokus pada <script> dulu. Render-Blocking File Area 4 / 4 Harus menunggu loading file JS. Masalahnya?
30. Render-Blocking File - before & after <html> <head> <title>Halamanku</title> <script src="script.js"></script> </head> <body> ... </body> </html> <html> <head> <title>Halamanku</title> <script src="script.js" defer></script> </head> <body> ... </body> </html>
31. Render-Blocking File improvement Area 4 / 4 File JS & CSS external menghalangi (blocking) render isi halaman. Atribut defer File script di-download di background, dan browser bisa lanjut merender isi halaman. Script dijalankan setelah selesai download dan setelah DOM siap.
32. Conclusion Ada banyak tools untuk kolaborasi online, termasuk di bidang pemrograman. Pilih tool yang sesuai dengan kebutuhan kolaborasi dan project-mu. DISCUSS: How do you plan to use online collaboration tools?
33. Matur nuwun Terima kasih Thank you Eka @ekafyi
34. Extra: Audience Question Ada pertanyaan dan komentar audience terkait gambar responsif, kenapa tidak menggunakan @media query CSS atau ukuran berdasarkan viewport (vw vh). Karena keterbatasan waktu, pertanyaan tersebut tidak dapat dibahas mendalam. Selengkapnya dapat disimak di artikel ini: “Perjalanan menuju gambar responsif: CSS width, media query, sampai img srcset”