Ngobrolin Font - Ngobrolin WEB Ep11

2:09Fonts, typography.

2:12Font ini bisa bikin web kita ukurannya membengkap gara-gara kita nggak care gitu ya.

2:19Cuek aja gitu ya, yang penting bagus tampilan.

2:24Tapi bisa juga, ya sebaliknya gitu, kita bisa optimize dengan

2:28membuat tidak mengorbankan tampilan di web kita, performanya juga tetap bagus.

2:36Jadi, win-win, win-win solution ya.

2:38Bisa juga membuat situs kita kalau dia melanggar privacy,

2:44contohnya menggunakan fonts yang dari the party, ya kan?

2:49Bisa melanggar GDPR juga, ya kan?

2:52Kalau nggak, nggak.

2:54Atau malah file fontnya diblokir, jadi nggak muncul.

2:59Textnya nggak bisa dibaca kalau kita salah pakai property font display, ya kan?

3:03Terus fontnya di origin yang diblokir di negara tertentu, misalnya nggak boleh akses domain tertentu.

3:10Nah, terus bisa nggak muncul sama sekali tuh textnya sehalaman, pusing-pusing nggak.

3:16Wih, ada Mas Danang.

3:18Mas Danang nonton.

3:20Hadir.

3:21Kita jadi ngeri.

3:25Harus hati-hati deh, ngomong ya.

3:28Emang biasanya gimana?

3:30Kita mah aman kalau ada bintang tamu baru nih.

3:35Kayak tahun, gara-gara episode Kenaten jadi dipancang.

3:39Dipancang.

3:41Ini juga ada siapa nih?

3:47Gimana ini spelling-nya?

3:49T-H-U-E-J-K-S-I.

3:51Ada Ilham juga.

3:54Halo semuanya, selamat datang.

3:56Oke, Ivan, gimana? Apa yang mau kita bahas pertama nih tentang font?

4:00Oh, itu dulu istilah.

4:02Ada typeface, ada font family, ada font.

4:06Itu dulu.

4:08Typeface dulu lah.

4:11Typeface itu kan kelompok style yang menampilkan huruf.

4:21Jadi kayak misalnya gampangnya typeface itu Helvetica, Arial.

4:25Comic Sans typeface kesukaan kita semua.

4:28Jadi itu bukan nama font tapi nama typeface.

4:33Maksud Sans dan Sans Serif itu typeface?

4:37Itu bukan typeface kan?

4:38Bukan, itu style.

4:40Oh, style.

4:42Ada serif, sans serif, ada display, ada handwriting, ada print.

4:49Mono space ya?

4:51Iya, mono space.

4:56Nah, masing-masing browser, masing-masing OS itu punya typeface bawaan sendiri

5:03yang dipakai kalau misalnya fallbacknya kita pakai sans atau sans serif.

5:08Nah, itu tergantung ke masing-masing.

5:11Jadi kalau kita di Android atau di Mac itu bisa lain-lain.

5:16Typeface, Helvetica itu misalnya Helvetica lah, contohnya atau Comic Sans MS.

5:22Itu kan ada macam-macam, ada yang bold.

5:25Kadang bold juga ada macam-macam kan, ada yang heavy, font weight-nya 900.

5:31Kalau di CSS font weight.

5:33Ada yang tebal banget, ada yang tebal aja, ada yang heavy, black, bold.

5:41Ada yang narrow, kalau narrow beda lagi.

5:44Beda lagi gitu.

5:47Pusing gitu.

5:49Ada yang italic, ada yang miring, ada yang lempeng.

5:53Nah, itu variasi font-nya.

5:57Masing-masing kan ada file-nya tuh kalau jaman masih pakai file.ttf ya.

6:02Nah, ini entar bahas format file juga nggak sih?

6:05Ya boleh, boleh kita bahas ttf, wof, ttf, wof, wof2, ada banyak kan.

6:14OTF, Open Typeface.

6:21Nah, jadi dari satu typeface, dia bisa punya banyak file.

6:28Nah, itu disebut font-file.

6:31Jadi font itu satu typeface bisa punya banyak font-file.

6:36Cuma kalau di CSS kita pakenya apa, property-nya font-family ya.

6:41Kita menyebut typeface itu font-family.

6:44Itu istilah aja.

6:46Terus selanjut, selanjut apa tuh?

6:49Walaupun ada apa ya, ada shortcut-nya kan font.2 sebenarnya bisa kan.

6:54Oh iya, karena ribet ya buat override-nya.

6:58Panjang.

7:02Nah, cara nampilin font gimana kalau di CSS?

7:05Pakai font-family, tapi kan sebelumnya kita harus import dulu kan.

7:10Nah, cara import font itu ada 2 kan ya.

7:14Satu, bisa import via CSS langsung, tapi via URL.

7:20Atau importnya via... yang saya maksud import itu link ya, link URL.

7:28Contohnya kayak Google Fonts, Adobe Fonts, ya kan.

7:32Biasanya dari HTML atau dari CSS dengan @import gitu ya URL-nya.

7:40Sebisa mungkin tips, jangan import dari CSS.

7:45Jangan, karena itu lambat performanya.

7:53Jadi kalau kita import dari CSS yang terjadi saat page load,

7:57dia harus download, si browser harus download dulu file CSS-nya.

8:02Baru dia parsing CSS-nya, baru dia tahu tuh import file CSS.

8:09Kan sebenarnya import CSS dari Google Font itu kan sebenarnya yang diimport CSS kan.

8:13Baru di dalam CSS-nya itu mendefinisikan font file-nya, URL font file.

8:18Jadinya berapa kali loncatan tuh.

8:20Pertama, download HTML-nya kita.

8:22Kedua, download dulu CSS-nya, parsing CSS-nya.

8:27Import CSS dari external, baru manggil font.

8:32Banyak banget, itu sudah render blocking.

8:36Biasanya kalau pakai Lighthouse, sekarang dikasih warning ya, avoid chaining, blablabla.

8:40Ada chaining-nya lah.

8:44Chaining CSS gitu ya.

8:47Nggak tahu lah bahasa internalnya apa.

8:50Itu kan URL, kalau lokal gimana?

8:53Kalau lokal maksudnya font-nya lokal atau?

8:56Font lokal, ya font lokal.

8:58Jadi pakai Arial atau gimana?

9:01Bukan, misalkan kita di server sendiri lah.

9:03Oh, self-hosted, maksudnya.

9:06Maksudnya di folder yang berbeda, misalkan /assets/fonts gitu.

9:10Public /myfonts juga.

9:12Tapi itu kan ini ya, itu langsung file font-nya kan yang kita import.

9:18Kita tetap harus manggil.

9:20Tetap harus pakai.

9:22Tapi import-nya kan ke relative path.

9:26Dan kita self-hosted.

9:28Tetapi di ininya kita, di HTML header-nya kita,

9:33sudah preload duluan font-nya kalau bisa.

9:36Biasanya kalau sudah pakai bundler canggih-canggih kayak Next atau apa,

9:42biasanya dia sudah tambahkan itu, preload font-nya itu.

9:47Sudah otomatis.

9:49Jadi salah satu kelebihan dari kita load font di HTML adalah kita bisa preload.

9:55Ya, karena kita sudah tahu url ke file .tf atau .wav-nya itu kan kita sudah punya.

10:05Jadi kita preload dulu semua.

10:07Jadi waktu CSS-nya didownload, saat definisi typography-nya kita, saat definisi fonts,

10:16file font-nya sudah didownload, definisinya sudah tinggal download, ya tinggal render, jadi cepat.

10:23Jadi kita bypass semua step-step yang chaining tadi itu.

10:27Jadi lebih baik hosted sendiri.

10:30Loh, Mas Tiza-nya hilang, pasti dia refresh tuh.

10:33Loh, kok hilang?

10:35Oh, bentar, low-bad katanya.

10:37Nah, ini nih, mungkin ada yang belum tahu atau buat refresh,

10:42kapan harus menge-import font-file, kapan nggak perlu.

10:46Nah, kita tuh mesti nge-import kalau si font-file-nya nggak ada di sistem atau di device-nya user, ya kan.

10:57Kalau misalnya, nah, masalahnya adalah masing-masing OS itu kan font bawaannya,

11:04font-file yang udah ada tuh lain-lain.

11:06Jadi kayak misalnya kalau di Mac itu di, apa, Mac OS itu sudah ada Helvetica.

11:13Tapi kalau di Windows, Windows, Android nggak ada.

11:19Jadi itu kita harus hati-hati buat nge-set.

11:23Misalnya nih, kita mikir kita pengen, oh, biar loading-nya cepat,

11:26nggak usah loading font yang kayak tadi tuh, nggak usah preload dan import macem-macem,

11:30pakai aja yang udah ada di default OS.

11:35Nah, itu boleh, cuma harus hati-hati dan pastikan font yang kita ingin pakai

11:42itu ada di device-user, karena masing-masing OS lain-lain itu biasanya pakai yang namanya font stack.

11:50Font stack itu jadi font family, apa, value dari font family itu bisa banyak.

11:56Misalnya font A, font B, font C, font D, sampai terakhir, sans serif, fallback terakhir.

12:03Nah, itu banyak tinggal googling aja, tinggal search aja font stack.

12:09Jadi kayak misalnya ada kombinasi antara Arial, Helvetica, Trebuchet,

12:15misalnya Trebuchet itu kalau nggak salah cuma ada di Windows atau semacamnya.

12:20- Jadi itu... - Georgia?

12:22Georgia kayaknya ada di mana-mana deh.

12:25Nggak, Windows juga ada.

12:27Jadi kalau misalnya kita pengen pakai font yang udah ada di system,

12:32itu tetap harus diperhatikan biar semua kurang lebih experience-nya sama.

12:40Tapi kalau misalnya kita pengen, kan apa, kadang ada style tipografi tertentu

12:46atau mungkin ada estetika visual, misalnya untuk artikel long read yang biar dibacanya enak,

12:53itu tetap web font nggak bisa dihindari ya, web font atau custom font sering kali nggak bisa dihindari.

13:02Nah, speaking about ini fonts, yang paling sering itu masalahnya adalah font.

13:09Flash of unstyled text.

13:14Jadi yang terjadi adalah, kalau kita penggunakan terutama nih yang pakainya sebut merek dia Google Fonts,

13:22tetapi nggak tahu nih cara pakainya.

13:24Jadi semua di-load, Roboto di-load, atau Notosans, atau...

13:30Inter.

13:31Pokoknya sampai 5 fonts yang di-load,

13:36berikut dengan style-nya semua, italic, bold 1, bold 2, normal, semuanya di-load.

13:42Yang nanti download-nya itu bisa sampai 1 mega misalnya, contohnya.

13:52Kalau dibuat download size itu bisa 1 mega.

13:55Yang terjadi adalah, apa yang terjadi dengan web kita adalah, pertama itu sudah render blocking.

14:02Kedua, kalau kita bisa pakai display swap, itu bisa terjadi CLS, Layout Safe.

14:09Jadi pertama saat dia download, waktu ngerender, karena kita pakainya mode display font swap,

14:18yang ditampilkan adalah fallback font-nya dulu.

14:22Fallback duluan, yang sudah ada di user.

14:27Lalu waktu di-replace saat font...

14:30Itu kelar download ya, selesai download font file-nya.

14:34Langsung berubah kan.

14:39Kalau mau lebih dalam lagi, kerningnya berbeda, space-nya akhirnya ke push, dan tadinya loncat.

14:46Jadi misalnya ada header-nya tadinya 2 baris, bisa jadi 3 baris.

14:50Ke push kan?

14:52Gimana nih cara menghindari CLS kalau dengan fonts?

15:01Itu bisa buka link-nya dari Smashing Magazine.

15:06Tadi kita belum buka link ya?

15:08Smashing Magazine.

15:10Smashing Magazine, betul.

15:13Yang terakhir yang dari Eka.

15:16Betul.

15:19Jadi kita bisa reduce loading impact-nya pakai CSS font descriptor.

15:28Coba zoom in.

15:30Biar tulisannya kebaca.

15:34Nah itu kan yang awal salah satu cara.

15:38Jadi dulu banget kan masalahnya cuma sederhana yaitu F-O-U-T tadi ya.

15:43Pertama masalahnya cuma satu.

15:46Maksudnya kita cuma mikir masalah utamanya itu.

15:49Itu sudah berhasil diatasin oleh si property font-display itu.

15:54Jadi kalau default-nya kan font-display, value-nya block.

15:59Nah kita bisa akali dengan font-display swap.

16:03Swap yang tadi itu.

16:05Pertama tampilin aja dulu text-nya jadi nggak kosong.

16:08Kalau masih pakai block itu selama file-nya masih downloading itu kosong.

16:13Text-nya nggak ditampilin.

16:15Dan kalau download-nya gagal, bakal kosong kayak yang aku bilang tadi di awal.

16:20Cuma dengan font-display swap, text-nya ditampilin pakai font yang ada aja dulu

16:25di browser atau di OS user, begitu selesai download tadi diganti dengan custom web font yang baru.

16:33Cuma muncul masalah baru, CLS ini kan.

16:35- CLS, betul.

16:37- Jadi kayak mainan, apa itu?

16:39Gua ya di timezone itu di pukul satu, keluar lagi masalah awal diatasin,

16:44sekarang ada masalah baru, CLS ini.

16:47Solusinya ini nih ke bawah.

16:51- Ini saya kena ini di proyek saya di sebulan lalu, dan pusing.

16:56- Oh, optional nih. Ada lagi nih lucu.

17:00Jadi tadinya cuma block sama swap, ada juga optional.

17:04Jadi optional itu, mirip dengan swap, pertama tampilin dulu pakai font yang udah ada.

17:13Cuma ada threshold waktu tertentu, masing-masing browser ngehandlingnya agak berbeda.

17:19Jadi misalnya, kalau setelah 2 detik font file-nya nggak kedownload juga,

17:25ya udah, anggap nggak ada.

17:27Jadi kita tetap pakai font yang default.

17:32Cuma ini masalahnya adalah, mungkin kalau dari kita sebagai web developer yang purely teknis,

17:40nggak masalah ya, yang penting kan tekstnya kelihatan.

17:43Cuma kan nggak bisa kayak gitu ke stakeholder lainnya.

17:46Karena itu tadi typeface atau jenis font itu bisa mempengaruhi user experience dan mungkin branding.

17:56Misalnya ada e-commerce yang jual produk emote unyu-unyu gitu.

18:02Nah, itu kan mood-nya jadi rusak kalau semua jadi areal ya kan.

18:08Padahal dia harus...

18:09- Timeshoman, serius-serius. Kayak baca skripsi ya.

18:14- Iya, nah itu bisa ngaruh ke misalnya jual produk untuk anak-anak atau apalah yang emang cute and fun.

18:23Itu kan bisa bikin website jadi nggak menarik, jadi nggak laku.

18:27Nah, itu bahaya banget.

18:28Jadi itu tetap harus... itu salah satu solusi, cuma bukan solusi final.

18:35Nah, ke bawah lagi coba.

18:37- Jadi kita pakai fallback, tetapi kita atur pakai style matcher.

18:45Jadi dia bisa spacing atau kerningnya serupa.

18:50- Dicek ya miripannya gitu ya.

18:53- Dicari yang mirip-mirip.

18:55Jadi fallback font-nya diatur ke yang...

19:00- Mendekati.

19:03- Mendekati dan diadjust kerningnya supaya jangan sampai terjadi CLS.

19:12- Jadi misalnya asli 4 baris dan setiap... misalnya 1 baris sekitar 1,5 rem.

19:21Terus paragraf itu text-nya di render 4 baris.

19:26Di font yang... font awal, font bawaan. Nah, di web font yang lagi di loading juga harus sama.

19:34Harus 4 baris, karena kalau 5 baris atau 3 baris kan bikin isi di bawahnya loncana.

19:40Jadi ini triknya adalah pakai CSS untuk fine-tuning si fallback font itu atau font yang di load pertama.

19:51Ada link-nya dari EK, bisa dibuka aja langsung.

19:56Pakainya itu namanya...

19:59- Monster Matcher?

20:01- Yang ada monsterat-nya mana ya tadi ya?

20:05- Oh, satunya. Kalau ini, apa? Yang awal, yang lebih lama.

20:11Kalau yang baru itu yang... bukan, yang pakai Netlify pokoknya yang URL-nya nggak niat.

20:17- Ya, Netlify.

20:20- Mana sih? - Udah ilang.

20:23- Udah nggak ada? - Oh iya.

20:25- Oh, di link dari Article Smashing? - Oh, dari Smashing.

20:29- Eh, nggak ada. - Kayaknya iya deh.

20:32- Ini? - Ini dihapus.

20:34- Nggak ya. - Ini, ini, ini, ini.

20:36- Ada, ada. - Ini, ini, ini, ini.

20:38- Ini kan, Mui, ini, ini kan? - Bukan.

20:40- Ini aja nih, gua... - Bukan, ada lagi.

20:42- Oh, ada. Mana? - Ini, gua kirim ini via private chat.

20:45- Very useful tool, coba. - Oh, ini.

20:47- Private chat, private chat.

20:49- Deploy preview. Waduh, ini masih preview ya.

20:53- Emang gitu. URL-nya nggak niat.

20:56- Jadi, contohnya kalau mau pakai IBM PlexSans, itu kan dari Google Font.

21:03- Google Font. - Ya.

21:05- Atau pilih deh. - Ini Google Font sama apa contohnya?

21:07- Ya, contohnya... - Apa?

21:10- Ya, tesarah deh. Ini contohnya IBM PlexSans ya.

21:14- Jadi, kita bisa bikin font-face-nya fallback, terus pakai Size Adjust sama Ascent Override.

21:20- Dan source-nya pakai Arial.

21:24- Gitu. Jadi, dia pakai Arial, terus dibuat...

21:28- Oh, ini ya? - Size Adjust sama Ascent Override.

21:32- Tetapi Arial. Jadi, dia kiri itu. - Arial.

21:35- Betul. Jadi, dia tuh. Jadi, nggak apa namanya?

21:39- Nggak terjadi CLS kan? - Nggak berubah jauh.

21:41- Bahkan kayaknya kalau user yang bukan developer, ini nggak sadar...

21:45- Nggak tahu. - ...bahwa...

21:47- Iya. Ini yang mana? - Kita juga beli...

21:49- Yang mana? - Yang sebelah kanan.

21:51- Yang ini jauh. - Yang sebelah kanan.

21:53- Yang sebelah kanan itu ini. Coba... eh, coba...

21:56- Gua nggak tahu, Inter. Coba ke Roboto. Lu ganti Roboto, biar gua lebih kenal.

22:00- Yang aneh-aneh ini kayak Lobster juga.

22:02- Lobster. Emang ada?

22:04- Ada. - Ada, dong.

22:06- Oh iya, jelas. - Oke. Mati Lobster yang sebelah kiri.

22:12- Tetapi, tetap ininya, size-nya sama ya.

22:17- Beda-beda dikit lah. - Nggak nge-

22:19- Karena dangerous. - Iya.

22:21- Oh, oke. - Jadi nggak terjadi CLS.

22:24- Oh, menarik sekali ini.

22:27- Iya. Untuk yang teman-teman...

22:30...itu bisa buka NPM package-nya juga ada, pakai Fontaine namanya.

22:35- Fontaine. - Link-nya saya, iya.

22:37- Yup. Nah, sama. - Nah, kalau kita nggak mau hitung sendiri...

22:40...pusing, ya kan? Tadi size-nya harus disesuaiin 86,001%.

22:46- Ya, jadi ini sudah otomatis dia bikin fallback-nya...

22:53...dan ngedetek file SES-nya kita...

22:56...langsung otomatis menambahin fallback-nya...

23:00...dan menambahkan. - Oke.

23:03- Intinya, otomatis.

23:05- Nambahin ini ya, sorry, mana tadi? Ini.

23:09Nambahin yang ini, ya. SES aja.

23:12- Betul, betul. Dia dilakukan otomatis...

23:15...oleh Fontaine. - Oh.

23:18- Dan kalau kita pakai... - Itu contohnya.

23:20- Oh, itu contoh.

23:22Kalau kita pakai framework kayak Next.js ini, terutama...

23:25...Next.js yang 13 ini, yang baru itu...

23:29...udah dihandle under the hood lah.

23:32Jadi kayak dibalik layar, itu udah dihandling semua.

23:36Semua, literally semua dari awal sampai akhir.

23:38Jadi contohnya gini, kita pengen pakai Lobster.

23:42Nah, itu kita tinggal import kayak import...

23:45...ya, semacam import Lobster from...

23:48...oh, import Next font.

23:50Jadi kayak Next.js punya font library sendiri.

23:54Terus kita semacam instantiate...

23:58...kayak new web font atau semacamnya.

24:01Kita tinggal specify mau pakai Lobster.

24:04Itu semua dihandle dan bahkan yang menarik...

24:07...walaupun kita pengen pakai Google font...

24:10...oleh Next.js ini, di build time...

24:13...file font-nya akan di download jadi lokal.

24:18Jadi di-serve secara lokal.

24:20Jadi dari origin kita sendiri.

24:22Jadi misalnya ada beberapa negara ya...

24:25...kayak contohnya Tiongkok kalau nggak salah...

24:28...yang nge-block beberapa origin URL-nya Google.

24:33Kayaknya NPM package-nya deh itu.

24:35Gua lupa namanya.

24:36Iya, tapi kan tetap lebih aman dan lebih cepat.

24:39Kalau di lokal kita sendiri.

24:42Maksudnya NPM package yang otomatis...

24:45...misalnya untuk Adobe Fonts atau Google Fonts...

24:52...dia otomatis akan download font-nya...

24:55...simpan di lokal, waktu di build...

24:58...file font-nya itu dia download dan simpan di lokal kita.

25:06Tapi saya lupa namanya.

25:09Sama.

25:10Nah yang di Next.js 13 ini udah nge-gabungin semua...

25:13...nge-download, masukin itu, nge-serve sama...

25:17...termasuk font adjustment matrix-nya ini.

25:20Udah beres semua.

25:22Gila ya, makin fomo aja nih sama Next.js...

25:25...kayaknya banyak banget ya inovasi-inovasinya ya.

25:27Tapi walaupun kita tinggal terima beres...

25:29...ya kita tetap harus tahu kan...

25:31...dibalik itu teknologinya apa.

25:33Karena ya mungkin nggak selamanya kita bisa...

25:36...pakai Next.js untuk semua project dan...

25:39...jadi tetap penting buat tahu.

25:41Jangan jadi implementator.

25:43Jadilah pesan moralnya ya.

25:46Buat engineer yang benar gitu.

25:49Engineer ya, malu sama istilah engineer ya.

25:52Kalau cuma pakai-pakai doang.

25:54Ya jangan implementator ya.

25:57Ya tadi sebenarnya moralnya...

25:59...lebih bagus kita menggunakan font...

26:03...dari Google Fonts atau Adobe...

26:06...atau konten hosting font yang ada di luar sana...

26:09...atau mendingan kita hosting sendiri.

26:12Tapi udah terjawab ya, mendingan hosting sendiri.

26:14Hosting sendiri, hosting sendiri.

26:15Jauh lebih baik dengan hosting sendiri...

26:17...karena kita bisa preload.

26:20Kalau preload itu kan harus...

26:22...preload itu origin.

26:25Oh originnya harus sama ya?

26:27Kalau misalnya ada, kalau kita nggak...

26:29...kalau Google Font mungkin dia sudah atur...

26:32...dengan course ya.

26:33Tapi lebih baik...

26:35...atur dari CDN kita sendiri.

26:40Bisa dikendalikan juga ya?

26:42Ya lebih baik lah.

26:44Lebih cepat juga.

26:45Karena DNS resolve-nya aja sudah...

26:48...sudah udah keskip kan.

26:50Minimal 1 step DNS resolve-nya aja udah...

26:53...sudah kita bisa ilangin.

26:55Okay, okay.

26:57Preface ya.

26:58Gak perlu di preface lagi.

27:00Kalau misalkan kita mau ngelakukan apa...

27:02...yang dilakukan oleh SDS ya...

27:04...mohon-mohon adalah...

27:05...misalkan kita pengen pakai Longstar tadi...

27:08...terus kita download...

27:11...file font-nya...

27:12...dari misalkan Google Font...

27:14...atau dari tempat lain...

27:16...kemudian kita hosting di...

27:18...lokal kita sendiri gitu ya.

27:20Betul, betul.

27:21Plus gini juga...

27:23...kalau yang dilakukan sama teman saya...

27:26...urusan fonts beginian...

27:29...jadi didesain itu misalnya...

27:31...pakai Roboto misalnya.

27:33Tetapi Roboto yang dipakai itu...

27:35...hanya untuk header.

27:37Dan hanya yang bold misalnya.

27:39Hanya yang font weight 700.

27:41Jangan semua di download.

27:43Maksudnya selalu sama ya?

27:45Selalu sama.

27:47Jadi secara design guideline-nya...

27:52...misalnya Roboto hanya dipakai di header...

27:55...dengan font weight 700.

27:57Dia nggak pernah dipakai di normal.

27:59Dan nggak pernah dipakai di normal.

28:01Jadi font yang dipakai...

28:04...itu hanya yang bold aja.

28:06That's it.

28:07Jadi nggak dipakai lagi yang normal.

28:09Kadang di file kita nggak bakal pakai...

28:12...yang size normal.

28:14Jadi lebih irit kan?

28:16Lebih irit.

28:17Jadi nggak perlu ngelod banyak font.

28:19Jadi kita cuma limit 5 font file doang.

28:235 font file.

28:24Dan itu cuma...

28:26...tiga jenis font.

28:28Tiga jenis font.

28:29Tapi apakah dengan kita ngelod apa?

28:32Kita download...

28:33...atau kita gunakan di server state...

28:36...di aplikasi kita.

28:38Kita ikut di aplikasi kita...

28:39...atau server state...

28:40...atau di hosting yang lain yang kita punya.

28:43Apakah fitur-fitur seperti display swap...

28:46...dan lainnya itu tetap bisa dipakai?

28:47Soalnya kalau di Google Font itu kan...

28:49...ada bisa pakai URLnya kita tambahin...

28:51...displace dengan swap, gitu kan?

28:53Itu kan cuma CSS property.

28:56Jadi waktu di...

28:57Dia memanggil file CSS yang ada...

29:00...property swap.

29:02Di Font 10 tadi, persis itu kan...

29:06...font face description-nya.

29:09Ini apa?

29:10Parameternya persis kayak gitu.

29:12Kita initiate sendiri font face yang kita mau.

29:15Iya.

29:16Nah, satu trik lagi yang dari saya...

29:20...itu...

29:21...untuk mempercepat...

29:23...itu bisa pakai yang namanya...

29:25...differ non-critical CSS.

29:27Jadi saya mau...

29:29...kelaskan sedikit...

29:31...bagaimana saya menggabungkan itu.

29:33Coba deh gue yang ini.

29:38Ya, silahkan.

29:40Share screen.

29:41Share screen sedikit aja.

29:44Berbagi pengalaman.

29:47Sambil nunggu.

29:48Kalau hostnya GTP, bisa.

29:50Dimana aja bisa.

29:52Nah, jadi...

29:54Kita bisa differ non-critical CSS.

29:57Jadi ada critical CSS...

29:59...dan non-critical CSS.

30:01Artinya, yang critical CSS itu...

30:03...CSS yang kita load...

30:05...above the fold.

30:08Logo, menu, header...

30:11...title, LCP lah.

30:13Semua yang di atas ya.

30:15Kita hitungannya...

30:17...critical CSS itu yang pakai mobile.

30:21Mobile fold.

30:23Approach-nya.

30:25Jadi yang non-critical, kita differ.

30:27Caranya...

30:29...bisa pakai yang namanya...

30:31...onload.

30:36Jadi kita pertama link preload...

30:38...style CSS...

30:40...as style.

30:42Terus setelah onload, kita...

30:44...rubah rail-nya jadi stylesheet.

30:46Jadi yang pertama terjadi adalah...

30:50...kita preload style-nya.

30:52Jadi dia non-blocking.

30:54Terus kemudian...

30:56...saat dia onload, selesai di load...

30:58...pakai JavaScript...

31:00...kita ganti dari rail preload...

31:02...menjadi rail stylesheet.

31:06Maka yang terjadi, si browser akan...

31:08...ngedetek...

31:10...ada stylesheet baru...

31:12...maka dia akan apply ke tree.

31:14Tetapi yang terjadi...

31:16...sebelum, sorry...

31:18...yang terjadi adalah...

31:20...style yang kita...

31:24...differ tadi...

31:26...itu tidak akan...

31:28...ngeganggu...

31:30...rendering path.

31:32Jadi dia nggak...

31:34...ngge-blocking.

31:36Kalau kita cuma...

31:38...maksudnya kalau kita nge-load CSS ini...

31:40...makanya terjadi dia adalah render blocking request.

31:42Pertama, dia...

31:44...gadetek, oke...

31:46...kita butuh file CSS.

31:48Maka dia download dulu file CSS.

31:50Maka habis itu dia parsing...

31:52...dan dia apply ke...

31:54...CSS tree-nya.

31:56Style tree-nya itu ya.

31:58Yang saya lakukan...

32:02...di...

32:04...semua CSS yang kritikal...

32:06...saya buat jadi inline...

32:08...untuk mempercepat...

32:10...untuk mempercepat...

32:12...FCP sama LCP.

32:14Kita udah pernah bahas juga ya...

32:16...di beberapa MSG.

32:18Saya eliminate render blocking ya.

32:20Jadi saya...

32:22...buat semua...

32:24...kritikal CSS jadi inline.

32:26Termasuk...

32:28...fallback font yang dari...

32:30...fontaine tadi.

32:32Oh fontaine.

32:36Oh ini.

32:38Oke.

32:40Contohnya, yang file ini...

32:42...saya load di kritikal.

32:44Di kritikal CSS...

32:46...ini di-load.

32:48Jadi yang terjadi adalah...

32:50...file font itu saya anggap...

32:52...non-critical.

32:54Jadi dia di-load belakangan.

32:56Jadi saat page load...

32:58...inline CSS sudah ada.

33:00Maka...

33:02...semua FCP langsung muncul...

33:04...kayak begitu HTML selesai...

33:06...kalo misalnya...

33:08...bahasa simpelnya...

33:10...kalo...

33:12...time to force byte-nya saya itu 800ms...

33:14...dan...

33:16...parsing segala macam yang 200-300ms...

33:20...maka 1,1 detik...

33:22...itu content above default...

33:24...sama LCP-nya itu sudah muncul semua.

33:26Karena inline CSS.

33:28Selanjutnya...

33:32...barulah dia...

33:34...download file CSS...

33:36...yang ada font definition...

33:38...dan di swap.

33:40Untuk menghindari CLS...

33:44...saya pakai...

33:46...override ini.

33:48Nah jadinya...

33:50...tetap akan keliatan...

33:52...perubahan cek-cek sedikit ya...

33:54...tetapi tidak dianggap sebagai...

33:56...CLS. Yang terjadi adalah...

33:58...LCP saya...

34:00...dan LCP-nya meningkat tajam...

34:02...dari 2,3 detik...

34:04...LCP...

34:06...itu turun menjadi sekitar 1,6...

34:08...1,5 detik.

34:10Cuma kartafon.

34:12Cuma kartafon.

34:14Big win.

34:16Big win ya.

34:18Gak perlu pusing-pusing...

34:20...saya memikirkan bagaimana...

34:22...dipeliting JavaScript...

34:24...kemudian bla-bla-bla...

34:26...hanya main saya utamakan...

34:28...inline CSS...

34:30...kasih fallback font...

34:32...yang bagus supaya tidak terjadi CLS...

34:34...yang font benerannya...

34:36...saya load belakang.

34:38Jadi CSS splitting.

34:40Itu yang saya lakukan.

34:42Nah ada tips tambahan lagi nih...

34:44...tolong dibuka link-nya.

34:50Kita perlu...

34:52...kadang kita perlu load satu font...

34:54...cuma untuk...

34:56...text yang gak berubah.

34:58Jadi misalnya contohnya...

35:00...nama...

35:02...nama website kita...

35:04...jadi misalnya...

35:06...kalau e-commerce toko ya...

35:08...nama tokonya atau brand...

35:10...kadang terutama font yang fancy ya...

35:12...font yang display style...

35:14...yang semacam lobster gitu...

35:16...itu kan dipakai...

35:18...untuk text yang gak berubah.

35:20Isi text-nya maksudnya...

35:22...gak berubah. Kan kita...

35:24...apa? Kecil kemungkinan kita...

35:26...diba-diba...

35:28...static dan gak berubah. Kecil kemungkinan...

35:30...kita diba-diba ganti nama toko.

35:32Kayak judulnya itu front-end tips...

35:34...contohnya. Nah ya...

35:36...judul website kita. Nah itu...

35:38...kita bisa load beneran literally...

35:40...untuk...

35:42...text itu aja. Jadi itu juga...

35:44...bisa memperkecil...

35:46...ukurannya kan. Oh...

35:48...pakai text ini ya, My Heading. Jadi My Heading...

35:50...ini udah...

35:52...dikasih font itu...

35:54...aja ya.

35:56Atau kalau kita pengen, ini kan...

35:58...nge-load file CSS ya...

36:00...yang tadi udah disebut sama Ivan...

36:02...tetap kurang optimal...

36:04...karna harus nge-load CSS-nya dulu...

36:06...baru...

36:08...baru manggil font-nya.

36:10Itu kita buka aja, terus kita...

36:12...kopas isinya. Kita buka isi...

36:14...fonts Google APIs...

36:16...blah-blah-blah. Kita liat CSS-nya...

36:18...kopas deh. Coba buka...

36:20...masa rica. Menarik...

36:22...ini.

36:24Kita sama...

36:30...ini ya?

36:32Ini apa?

36:34Mana? Yang text My Headingnya...

36:36...gak ada di sini.

36:38Kok bisa jadi begini?

36:42Oh, di sini ya?

36:44Itu di-subset kalau gak salah ya?

36:46Ya, di-subset ya.

36:48Subset atau unicode...

36:50...unicode range mungkin ya?

36:52Mana?

36:56Kirasin tuh...

36:58...apa tuh maksudnya unicode range ya...

37:00...beda lagi tuh. Banyak ya?

37:02Banyak ya. Ternyata ya.

37:04Ya, unicode range.

37:06Ya, unicode range itu juga...

37:08...penting kalau...

37:10...kalau kita kayak ini format...

37:12...Wolf2 ya.

37:14Itu...

37:16Sambil buka CSS-tricks...

37:18...coba di...

37:20...gak cuma ascii karakter.

37:22Lanjut, lanjut.

37:28Ya, gak cuma ascii karakter aja...

37:30...tetapi termasuk unicode karakter.

37:32Cuma kalau website kita itu cuma...

37:34...hanya butuh...

37:36...gak pakai banyak unicode karakter...

37:38...tentu...

37:40...file Wolf yang kita pakai itu...

37:42...sebenarnya gak perlu...

37:44...diluat semua kan?

37:46Jadi kita bisa define...

37:48...unicode range yang kita butuhkan aja.

37:50Itu contohnya...

37:52...kalau misalnya kita cuma A sampai Z...

37:54...tanpa ada spesial karakter.

37:56Kita gak perlu kayak...

38:00...yang ada tanda kutipnya...

38:02...atas itu tahap apa...

38:04Ada titik 2 gitu di atas...

38:06...uruh-uruh yang tidak-tidak...

38:08...gunakan terutama di Indonesia ya.

38:10Terutama negara yang pakai...

38:14...roman karakter. Nah, itu lebih tepatnya.

38:16Oh wow, banyak sekali yang...

38:20...bisa di ok mas ya.

38:22Di ok.

38:24Tapi menurut Eka gimana...

38:28...kalau sebenarnya kalau kayak judul itu...

38:30...perlukan kita load fonts...

38:32...atau mending kita rubah aja jadi SVG?

38:34Nah, iya. Sebetulnya...

38:36...lebih bagus lagi, lebih optimal...

38:38...SVG aja sih.

38:40Tapi bisa dibaca atau SVG?

38:42...sama sesegin.

38:44Sebenarnya sama aja ya, kalau SVG...

38:46ARIA LABEL.

38:48Kita pakai...

38:50...sebenarnya elemen apapun kan...

38:52...bisa dikasih ARIA LABEL.

38:54Kalau ini apa nih?

38:58Ini font ya?

39:00Jadi penasaran ya?

39:02Itu text biasa...

39:04...karena nggak pakai font aneh-aneh.

39:06Sebenarnya kalau dari sisi practical...

39:08...kita sebagai developer kan...

39:10...udahlah nggak usah pakai font aneh-aneh...

39:12...satu macem aja fontnya.

39:14Semua ya, apa? Business Goal...

39:16...website yang kita buat kan...

39:18...nggak bisa dipaksain.

39:20Kita berani terlitar sama bagian desain.

39:22Product design...

39:24...kita dikroyok.

39:26Nah, ini bener banget nih.

39:28Bas font bisa jadi...

39:30...bahan tes interview.

39:32Tau nggak yang gini-gini?

39:34Wah, luar biasa ini...

39:36...kalau pada tahun ini.

39:38Belajar malam hari ini.

39:40Makanya saya bilang...

39:42...waktu ide...

39:44...belajar kita ngomongin font...

39:46...itu sesuatu...

39:48...yang jarang di ngomongin orang...

39:50...tetapi sebenarnya kalau dioptimis dengan benar...

39:52...itu big win.

39:54Karena jarang juga orang kayak...

39:56...nggak begitu peduli.

39:58Load aja lah dari Google Font...

40:00...udah selesai gitu.

40:02Paling sering saya menemukan...

40:04...issue itu...

40:06...Google Font dilod dengan...

40:08...semana-mana.

40:10Begitu saya lihat...

40:12...aduh...

40:14...kok begini sih ngelod-nya?

40:16Akhirnya beresin lagi...

40:18...beresin lagi.

40:20Gimana dengan...

40:22...framework seperti...

40:24...Telwin, yang dia udah...

40:26...beneran berapa font stack kan?

40:28Tadi kita kan...

40:30...berubah font stack juga kan?

40:32Apakah itu berpengaruh atau gimana?

40:34Itu kan dia pakai...

40:36...Dairy System.

40:38Si Telwin itu kan...

40:40...nggak punya opini tentang...

40:42...gimana kita ngeloding web font-nya.

40:44Cuma emang si Telwin itu...

40:46...mereka menyediakan default stack...

40:48...yang ada di masing-masing...

40:50...device.

40:52Kalau kita mau mengkustomize...

40:54...misa kan bisa tuh...

40:56...Telwin juga bisa...

40:58...sans-nya tuh dikasih tambahan...

41:00...font yang kita spesifai sendiri.

41:02Misalnya Lobster.

41:04Lobster lagi.

41:06Atau Comic Sans atau apapun...

41:08...Telwin kan cuma ngelod aja...

41:10...cuma ekspektasinya kita harus...

41:12...ngedefine import sendiri...

41:14...pakai font face cam tadi misalnya.

41:16Ya, kalau misalkan default-nya...

41:18...default-nya dia pakai...

41:20...banyak font...

41:22...atau hanya satu atau apa-apa.

41:24Dia nggak ngelod sih...

41:28...pakai di device-nya.

41:30Emang Telwin ada...

41:32...menganjurkan font tertentu? Kayaknya dia...

41:34Ada, dia ngasih...

41:36...reasonable default yang...

41:38...oke lah, yang di mata cukup enak.

41:40Jadi, ada...

41:42...sans-nya, ada serifnya.

41:44Dia kasih pilihan sebenarnya.

41:50Lobster dan seri stack.

41:52Nah, ini nih.

41:54Belum lagi.

42:02Menarik.

42:06Nah, benar ini dia.

42:10Kurang gede.

42:12Alah.

42:14Ini di gedein malah...

42:16...streaming artinya.

42:18Maaf, maaf, maaf.

42:20Nah, makanya banyak karena dia...

42:32...ngendal macam-macam operating system.

42:34Jadi, kalau kayak gini dibacanya...

42:36...sebenarnya tidak dilod semua, kan?

42:38Dia mencari yang...

42:40Yang pertama, yang pertama matching...

42:42...pertama ada.

42:44Dari paling kiri, ya?

42:46Dari paling kiri.

42:48Misalkan tiba-tiba ketemu SF Mono...

42:50...oh, berarti di Mac nih, ada.

42:52Yang lain udah 2K aja, gitu ya?

42:54Oke.

42:56Jadi, dari si font...

42:58...aman ya? Berarti nggak...

43:00...terlalu utang-atik konfigurasi ya?

43:02Berarti kalau kita mau mengubah.

43:04Kita nambahin...

43:06...custom font kita sendiri.

43:08Oke, noted.

43:10Tadi...

43:12Tadi, oh ya, variable font...

43:14...perlu tahu juga. Jadi, kalau dulu kan...

43:16...OTF, DTF...

43:18...itu masing-masing...

43:20...font...

43:22...masing-masing font style...

43:24...itu ada filenya sendiri. Pusing nggak...

43:26...regular satu font, bold satu font...

43:28...italic satu font...

43:30...bold italic satu font...

43:32...mau ada berapa, ya kan?

43:34Ada semi buat...

43:36...ada medium, ada macam-macam.

43:38Nah, sekarang...

43:40...variable font itu...

43:42...sekarang udah lumayan...

43:44...banyak dipakai. Kalau nggak salah, Google Fonts...

43:46...defaultnya juga sekarang udah...

43:48...variable font. Itu file formatnya...

43:50...biasanya voff...

43:52...sama voff2, voff2.

43:54Kelebihannya adalah...

43:56...dia bisa, dalam satu file...

43:58...jadi satu request kan ya...

44:00...satu request dengan segala prosesnya...

44:02...yang tadi udah dijelasin, Ivan...

44:04...satu file itu bisa menghendal...

44:06...berbagai macam...

44:08...font style tadi. Jadi bold...

44:10...italic, medium, itu dalam...

44:12...satu file.

44:14Oke, nah, namun...

44:16...voff2 itu kalau nggak salah...

44:18...masih belum support di semua browser kan ya...

44:20...kayak yang Mac OS itu...

44:22...lebih support ke TTF kan ya...

44:28...kalau nggak salah, atau...

44:30Makanya keliatannya bisa ada...

44:32...fallback deh voff dan voff2...

44:34...biasanya jadi satu ya di...

44:36Iya, makanya ada TTF kan, dia selalu...

44:38...ke TTF, karena belum tentu...

44:40...coba, can I use...

44:42...use voff...

44:44...soccer compatibility.

44:48Oke, nah, ngomongin...

44:50...web font...

44:52...walk itu web open format...

44:54...open font format.

44:56Oh, baru tau...

44:58...open font format, oke.

45:00Ya, ngomongin...

45:02...web font, salah satu yang paling...

45:04...saya ingat adalah...

45:06...font awesome...

45:08Ya, perlu ngomong, font awesome...

45:10...font awesome...

45:12...itu jangan dipakai.

45:14Jangan dipakai, karena icon...

45:16...jangan dipakai.

45:18Karena icon, udah cocok pakenya...

45:20...SWG saja, ya.

45:22Karena nggak jelas...

45:24...gak jelas bagi saya...

45:26...contohnya...

45:28...hanya pakai 3 icon, tetapi...

45:30...harus load font seabrek-abrek...

45:32...sampai 100 kilobyte...

45:34...itu nggak...

45:36...mening SVG aja.

45:38Kalau bisa SVG-nya, kalau cuma dipakai...

45:40...satu tempat atau dua tempat...

45:42...inline kan...

45:44Ya, vc-nya yang bentuknya ke xml itu...

45:46...dikopy paste aja udah ya.

45:48Eh, cuma font awesome sekarang juga...

45:50...udah evolve...

45:52...udah berevolusi, jadi pakai...

45:54...package-nya yang baru, dia bikin...

45:56...degenerate inline SVG.

45:58Jadi walaupun nama...

46:00...teranjur nama ya font awesome...

46:02...udah nggak bergantung...

46:04...web font lagi.

46:06Kayaknya rata-rata begitu ya...

46:08...ingat nggak jamannya twitter bootstrap itu...

46:10...itu semuanya jumbo tron...

46:12...seabrek-abrek dipakai.

46:14Terus abis itu evolve...

46:16...kita diubah jadi...

46:18...SCSS, kita pilih yang mana...

46:20...komponen yang mau dipakai...

46:22...generate.

46:24Sama font awesome juga sudah berubah.

46:26Sekarang udah 6 loh.

46:30Lucu banget style-nya ya.

46:32Sudah 6 ya?

46:34Sudah berubah juga ya...

46:36...websitenya.

46:38Ada yang berbayar juga ya?

46:40Ada premium-nya.

46:42Oke.

46:44Wah, sedih.

46:46Kalau dulu kan...

46:48...dia udah bundling sama...

46:50...bootstrap kan?

46:52Iya, semuanya di...

46:54Semuanya di download.

46:56Itu jaman kapan itu? Kayaknya jaman...

46:58...berusaha belajar web dev.

47:00Kayaknya sekarang itu...

47:02...orang sudah mulai bergeser...

47:04...sedikit-sedikit, jadi nggak pakai icon...

47:06...dari font awesome atau dari SVG...

47:08...tapi pakai emoji.

47:10Oh, emoji.

47:12Emoji, dijadikan icon sekarang, kan?

47:14Iya.

47:16Banyaknya itu style-style-nya...

47:18...modelnya.

47:20Berarti kalau sekarang kita pakai font awesome...

47:22...berarti aman dong. Maksudnya nggak kayak dulu kan?

47:24Aman, udah.

47:26Kalau dipakai dengan benar.

47:28Oh, iya.

47:30Jadi intinya sebenarnya...

47:32...apapun yang mau kita pakai...

47:34...kita pastikan dia...

47:36...sesuai dengan ekspetasi kita.

47:38Jadi jangan sembarang pakai...

47:40...udah, lupakan.

47:42Jangan plug-and-play.

47:44Coba buka pakai...

47:46...buka konsol-nya, network-nya...

47:48...atau performance insight.

47:50Lihat apa yang render blocked.

47:52Oh, terus juga...

47:54...bisa implementasi itu, kan?

47:56Apa namanya?

47:58Performance budget.

48:00Pastikan kalau mau...

48:02...nambahin fonts atau...

48:04Bukan episode...

48:06...kapan-kapan cocok tuh bagus...

48:08...bahas performance budget.

48:10Iya, boleh tuh.

48:12Performance budget.

48:14Jadi...

48:16...sebelum menambah atau sebelum...

48:18...atau mengganti framework...

48:20...atau mengganti...

48:22...misalnya migrate dari non-tailwind...

48:24...ke tailwind contohnya.

48:26Pakailah performance budget.

48:28Jadi bisa tahu to make sure...

48:30...awalnya berapa...

48:32...hasil akhirnya berapa.

48:34Kalau bisa lebih kurus.

48:36Lebih hard, lebih berkurang.

48:38Jumlah byte yang dikirimkan...

48:40...oleh server.

48:42Hmm, oke.

48:44Siap, siap, siap.

48:46Performance budget.

48:48Oke, ada lagi yang mau kita bahas tentang font?

48:52Ada tuh...

48:54...SVG font.

48:56Iya, bisa tuh, menarik tuh.

48:58Yang mana tuh?

49:00Lika-liku SVG font.

49:02Color V1.

49:04Oke, baiklah, sebentar.

49:06Check screen lagi.

49:08Hilang screennya.

49:10Nah.

49:12Nah, ini juga sebetulnya bagian...

49:14...yang relevan...

49:16...soal web font, walaupun mungkin...

49:18...ya, alternatifnya tadi ya.

49:20Apa?

49:22Kalau kita butuh...

49:24...tampilan yang...

49:26...rich, misalnya yang lebih...

49:28...bukan cuma untuk nampilin text...

49:30...cuma misalnya contoh paling sering...

49:32...emoji atau text dengan style...

49:34...tertentu yang lebih kompleks.

49:36Itu salah satu...

49:38...kemungkinan solusinya adalah...

49:40...SVG font. Itu font yang...

49:42...biasanya, kalau font yang standar...

49:44...kayak Aria, Lobster, Comic Sans...

49:46...dan lain-lain, itu kan satu warna...

49:48...tentu saja ya, kalau ini bisa...

49:50...contain glyph.

49:52Bisa ada gradasi...

49:54...segala macam.

49:56Cuma ini emang...

49:58...bukan penggunaan yang utama...

50:00...mungkin ya, bukan menus font kan...

50:02...karena kita masih punya alternatif...

50:04...berupa ya SVG beneran aja.

50:06Cuma kalau untuk emoji...

50:08...itu kan relevan ya.

50:10Karena emoji bawaan masing-masing...

50:12...OS itu kan lain-lain...

50:14...dan supportnya juga...

50:16...belum tentu merata, misalnya...

50:18...suka ada emoji yang udah disupport...

50:20...misalnya di Mac, cuman Windows belum...

50:22...atau Android belum...

50:24...atau sebaliknya. Jadi tetap ada...

50:26...use case-nya kebutuhannya...

50:28...kadang kita butuh font tertentu...

50:30...untuk tampilan misalnya emoji.

50:32Nah, SVG...

50:34...font SVG ini...

50:36...itu adalah font yang punya...

50:38...kapabilitas khusus...

50:40...si glyph dan gradient...

50:42...dan sebagainya.

50:44Itu landscape-nya...

50:46...sebenarnya masih kayak...

50:48...belum stabil, karena...

50:50...COLR yang...

50:52...versi 0 itu...

50:54...sudah cukup wide-spread...

50:56...supportnya, cuman kurang...

50:58...optimal dan ukurannya besar banget.

51:00Nah, sekarang ada...

51:02...color COLR yang...

51:04...versi 1...

51:06...yang udah improve. Cuma masalahnya...

51:08...sampai sekarang ini masih Chromium only.

51:10Chromium only.

51:12Sebelum ada...

51:14...color V1 ini, ada beberapa...

51:16...format font lain yang punya...

51:18...fungsi mirip. Coba tolong dibuka...

51:20...yang link bawahnya.

51:22Link bawahnya yang adalah...

51:26...pixel...

51:28...nah, bawahnya soal color itu.

51:30Nah, kalau misalnya temen-temen...

51:32...pingin tahu nih...

51:34...jenis-jenis SVG font apa...

51:36...yang disupport di browser...

51:38...di masing-masing browser...

51:40...bisa dicek...

51:42...itu banyak tuh, ada...

51:44...SBIX, itu format lama lah...

51:46...format dari kapan tau. Ada...

51:48...color, ada color V1...

51:50...ada open type SVG...

51:52...bisa kita liat, itu not supported...

51:54...dan seperti biasa...

51:56...Safari...

51:58...Safari maunya ngesupport...

52:00...open type SVG, cuman gak mau...

52:02...support color V1.

52:04Berantem ya, masih berantem.

52:06Pokoknya...

52:08...ini emang agak rumit, jadi...

52:10...belum bisa diandalkan...

52:12...masih belum recommended...

52:14...untuk use case yang...

52:16...harus semua support.

52:18Cuma untuk alternatif...

52:20...bisa, ya bisa...

52:22...dicek lah satu persatu...

52:24...format SVG font-nya.

52:26Cuma kalau untuk grafis, itu...

52:28...cukup menarik sih...

52:30...untuk ke depannya, walaupun mungkin sekarang...

52:32...belum bisa sepenuhnya usable...

52:34...itu...

52:36...bagus banget untuk hal-hal yang...

52:38...sifatnya visual.

52:40Kali grafi.

52:42Kali grafi ya.

52:44Ya, jadi kalau cuma pakai font yang...

52:46...dua dimensi biasa, kan...

52:48...ya bisa, cuma kurang menarik.

52:50Kalau ini menariknya adalah...

52:52...font kali grafi ini, emulate...

52:54...apasih kalau ukir-ukiran gitu loh...

52:56...texture dari ukir-ukiran...

52:58...dan itu untuk branding kan...

53:00...menarik.

53:02Misalnya kita bikin...

53:04...applikasi yang...

53:06...high power, semacam Figma...

53:08...atau Canva, atau...

53:10...semacamnya ya...

53:12...untuk desain grafis, desain visual...

53:14...itu kan bisa berguna juga.

53:16Ada beberapa contoh...

53:18...ada dua contoh...

53:20...font yang menggunakan...

53:22...SVG font teknologi yang baru...

53:24...bisa dilihat di link-nya.

53:26Nah, itu tuh.

53:28Plakato.

53:30Plakato color.

53:32Itu font aja.

53:34Semua ikon-ikon ini font.

53:36Dan termasuk si grafis...

53:38...apa ya, gradient-gradientnya itu...

53:40...bisa kita sesuaikan tuh, bisa real time.

53:42Randomize.

53:44Nice.

53:46Pelangi.

53:48Kalau pelangi, sekarang udah beda ininya.

53:50Beda lagunya.

53:54Beda.

53:56Beda maknanya sekarang.

54:00Nah, itu semua pakai font.

54:02Itu pakai CSS.

54:04Jadi, customize-nya pakai namanya...

54:06...Add Font Palette.

54:08Ya, nanti kalau misalnya...

54:10...bisa diketik.

54:12Bisa, bisa diganti text-nya.

54:14Ngobrolin web.

54:16Wow.

54:18Keren ya.

54:20Plakato color.

54:22Oke, mantap.

54:24Ada lagi? Gini.

54:26Ui, lucu.

54:28Lucu sekali.

54:30Ini juga HP font-nya.

54:32Iya, bisa di-customize.

54:34Itu kayak apa?

54:36Outline-nya sama shadow-nya.

54:38Sama apa? Kayak efek-efek bevel-nya.

54:40Itu di-customize dengan CSS.

54:42Tapi ini Chromium only dulu, mas Yan.

54:48Iya.

54:50Keren ini.

54:54Bisa di-customize ya.

54:56Eh, Safari udah bisa tuh?

54:58Color DX Open Type.

55:00Coba ke atas dulu, mas Riza.

55:02Bisa. Safari.

55:04Safari 11.

55:06Oh, dia punya fallback open type juga...

55:08...soalnya tadi.

55:10Coba dia lihat font-nya tadi.

55:12Unfortunately, this font is not compatible...

55:14...with Adobe Apps yet.

55:16Adobe Apps.

55:18Apa hubungannya?

55:22Sama Adobe Apps.

55:24Gatau.

55:26Oh, mungkin kalau didownload kali...

55:28...itu kan dia font-foundry.

55:30Jadi jualan font.

55:32Yang harus bisa dipakai di...

55:34...perbagai aplikasi.

55:36Mungkin maksudnya nggak bisa di...

55:38...Adobe PDF kali?

55:40Ini free download, tapi...

55:42...misalnya buy it. Oh, ada gratis.

55:44Soalnya...

55:46...lininya buy it.

55:48Keren beli.

55:50Sepertinya...

55:52...kamu mau beli ya?

55:54Free for personal and commercial use.

55:56Including...

55:58...ATF, WoF, WoF2...

56:00...dan 11 color palettes.

56:02Mungkin kalau beli, apa format font-nya...

56:04...lebih macem-macem mungkin.

56:06Oh iya, lucu sekali.

56:08Lucu sekali.

56:10Wala mainan, Mas Lida.

56:12Senangnya.

56:14Maaf, maaf, maaf.

56:16Lanjut, lanjut, lanjut.

56:22Apa lagi dong?

56:24Kalau ini...

56:26...yang saya temukan juga...

56:28...ini apakah...

56:30...font SVG juga?

56:32Nggak tahu ya. Cuman saya ketemu nih...

56:34...wah, ini isometric font.

56:36Apa tuh isometric?

56:38Dari Google font juga ada.

56:40Jadi isometric itu yang kayak...

56:42...dua, sebenernya...

56:44...tapi agak digesak sedikit.

56:46Lucu, lucu. 3D ya?

56:48Ya, hampir 3D. 2,5D lah.

56:502,5D.

56:52Tadi tuh bayangin isomorphic...

56:54...ketuker sama isometric dong.

56:56Makanya nggak make sense tadi.

56:58Ada game yang modelnya kayak gini...

57:00...sebenernya dia dua dimensi kan...

57:02...gak bisa bergerak 3D kan.

57:04Tapi dia bergeraknya...

57:06...gak miring gitu kan.

57:08Iya, ada shade-nya gitu.

57:10Oh, dia nggak bisa rotate ya?

57:12Iya, ini colorface satu juga.

57:14Nggak bisa, nggak bisa rotate.

57:16Dia udah begini aja. Cuma kayaknya...

57:18...dia diatur nih. Apa?

57:20Shade-nya atau sama kayak tadi?

57:22Ya, depth seberapa tebalnya kan?

57:24Iya, dia pakai colorface satu juga.

57:26Berarti benar sama.

57:28Kayak ini, kayak tensorflow.

57:30Punya logo...

57:32...tensorflow.

57:34Oh, iya benar.

57:36Dia ini ada di Google font.

57:40Kalau mau...

57:42...di echo download...

57:44...jangan, jangan download.

57:46Mau di...

57:48...include di web nggak bisa ya?

57:50Bisa.

57:52Ini masih buka di web.

57:54Nah, ini.

57:56Bisa, cuma ya nggak dijamin...

57:58...aman nih semua browser.

58:00Iya, belum di support ke semua kan.

58:02Karena colorfewan ya?

58:04Yes.

58:06Wait, itu fallback-nya ke...

58:08...cursive. Apa sih, cursive?

58:10Cursive gitu, handwriting...

58:12...untuk wisantangan.

58:16Itu jelek banget deh...

58:18...kalau muncul...

58:20...yang fallback aslinya.

58:22Mana dimeterannya?

58:24Cursive kalau yang bawaan, misalnya bawaan...

58:26...Mac atau Windows.

58:28Cursive-nya itu font-nya...

58:30...oh, banyak jelek banget lah.

58:32Oh, jadi CLS-nya bahaya nih ya?

58:34Iya, bahaya.

58:36Cuma kayak gini fallback-nya apa...

58:38...coba yang mirip?

58:40Nggak ada.

58:42Gak ada.

58:44Terus paling disesuaikan sama ukuran font-nya aja.

58:46Iya.

58:48Ini, wait-nya...

58:50...wait-nya itu disesuaikan.

58:52Bisa coba kalau mau...

58:54...mau experiment coba...

58:56...dijelaskan fontaine.

58:58Iya, cuma fontaine kan nggak...

59:00...nyesuaikan style font yang...

59:02...mood-nya kan.

59:04Dia cuma mastiin ukurannya...

59:06...dimensinya, apa?

59:08Ukuran sama...

59:10...panjang lebernya sama.

59:12Turning-nya.

59:14Gap-nya, gap.

59:16Nah, itu diatur.

59:18Iya.

59:20Oke.

59:22Kita sudah berapa lama?

59:24Wah, hampir satu jam.

59:26Ada lagi yang mau dibahas?

59:28Bahas font doang, sejam kita.

59:30Font itu branding...

59:32...tipografi, banyak...

59:34...yang dibaca...

59:36...kita sehari-hari di web.

59:38Kalau...

59:40...kalau kalian mikir web...

59:42...dari awal, pakai font-nya apa?

59:44Bawa until win.

59:46Bawa until win.

59:48Ya, dia punya stack semacamnya...

59:50...yang system safe. Gak tahu sih kalau...

59:52...personally, aku nggak punya...

59:54...sense of aesthetics yang...

59:56...milih font yang tepat gitu, males asli.

59:58Itu ganteng desainer, mah.

1:00:00Nyuruhnya.

1:00:02Saya tinggal minta...

1:00:04...mana desain guideline-nya.

1:00:06Itu yang dibaca...

1:00:08...dulu aja.

1:00:10Jadi mereka harus punya guideline-nya itu.

1:00:12Oke, oke.

1:00:14Oh, cuma kalau milih web font sih...

1:00:16...kayaknya andalan Inter lah ya sekarang.

1:00:18Inter ya sekarang ya.

1:00:20Inter, poppings, gitu-gitu ya.

1:00:22Inter tuh kayak...

1:00:24...profesional, tapi ya lumayan...

1:00:26...ya hipster dikit lah.

1:00:28Agak apa? Stylish.

1:00:30Stylish, cuma tetap profesional.

1:00:32Kalau kayak Roboto sama...

1:00:34...Hevati Kenewa sudah jadul ya?

1:00:36Enggak sih, Roboto masih...

1:00:38Evergreen sih.

1:00:40Cuma kayaknya Roboto ada...

1:00:42...versi baru ya. Kayaknya di...

1:00:44...announce di I/O kemarin ya...

1:00:46...kalau nggak salah.

1:00:48Wah, nggak tahu.

1:00:50Segoey UI.

1:00:52Lato.

1:00:54Ya, Lato tuh jaman-jaman...

1:00:56...kapan?

1:00:58Ada nih Roboto Flex namanya.

1:01:00Oh, baru lagi.

1:01:02Baru yang baru.

1:01:04Tadi kan ngeluarin phone baru juga.

1:01:06Terutama untuk...

1:01:08...kod phone-nya.

1:01:10Kalau nggak salah.

1:01:12ViraCode.

1:01:14Bukan, bukan.

1:01:16Ya, itu udah ini sih.

1:01:18Udah umumnya.

1:01:20Ada kan dia baru ngeluarin namanya apa ya?

1:01:22Lupa.

1:01:24Monotype Corsiva.

1:01:26Ya ampun, itu jelek banget.

1:01:32Ini bukan...

1:01:34...bukan yang...

1:01:36...bukan phone yang dari GitHub.

1:01:38Kalau mau moding ala Minecraft...

1:01:40...biar bisa pakai...

1:01:42...phone.

1:01:44Monocraft namanya.

1:01:46Kalau Minecraft itu.

1:01:48Monocraft.

1:01:50Monocraft.

1:01:52Nah, ini...

1:01:54...monocraft dia.

1:01:56Programming phone based on...

1:01:58...Minecraft.

1:02:00Nah, jadi beneran main game, kan?

1:02:02Bisa, bisa.

1:02:06Lucu itu.

1:02:08Ada...

1:02:10...Comic Sense juga ada yang versi...

1:02:12...monotype-nya.

1:02:14Oh, yang pun super cursed.

1:02:16Iya.

1:02:18Lobster belum ada tapinya.

1:02:20Belum, belum.

1:02:22Mono ini dia.

1:02:24Nah, bentuknya kayak gini.

1:02:28Banyak orang iseng ya.

1:02:30Jadi Comic Sense itu adalah salah satu...

1:02:36...phone favorite dan takut tip...

1:02:38...yang buat bahan...

1:02:40...ejek-ejekan.

1:02:42Tapi diserisin juga ya.

1:02:44Roboto Flex ya.

1:02:46Roboto Flex.

1:02:48Comic Mono.

1:02:50Ya ampun.

1:02:56Menarik ya.

1:02:58Bagus juga.

1:03:00Dan dia udah available sebagai variable phone.

1:03:02Lebih bulet.

1:03:04Lebih soft ya kayaknya.

1:03:06Iya.

1:03:08Dibandingkan Roboto.

1:03:10Coba.

1:03:12Ya kan, lebih soft.

1:03:18Kalau ini bulet ya.

1:03:20Bisa di-compare kok, Mas Riza?

1:03:22Gimana ya?

1:03:24Bisa sih.

1:03:26Pernah lihat ada di-compare.

1:03:28Tapi gimana ya?

1:03:30Oh harus di-add atau save...

1:03:32...atau semacamnya.

1:03:34Ya di-add dulu.

1:03:36Di-add dulu ya.

1:03:38Ini di-remove all.

1:03:40Kemudian cara addnya gimana?

1:03:42Oh di-regularnya.

1:03:44Di-add. Nah dia ini kan.

1:03:46Yang regular ya.

1:03:48Terus ke Roboto.

1:03:50Ke Roboto.

1:03:52Di-add lagi.

1:03:54Di-add.

1:03:58Nah.

1:04:00Sudah. Terus?

1:04:02Terus gimana?

1:04:04Ini ada 2.

1:04:06Gila.

1:04:08Tester tuh ada ga?

1:04:10Tester.

1:04:12Sebelah kiri.

1:04:14Enggak.

1:04:16Enggak ada ya.

1:04:18Setau saya bisa di-test kok.

1:04:20Bisa di-compare gitu.

1:04:22Sudahlah.

1:04:24Kalau dicari biasa ilang.

1:04:26Bisa ilang.

1:04:28Jadi ngobrolin font kemana-mana.

1:04:30Kita ada...

1:04:32...tepit lagi ga? Gak ada ya.

1:04:34Gak ada.

1:04:36Kalau ga ada dari teman-teman mungkin ada.

1:04:38Kita kasih waktu 3 detik.

1:04:401, 2, 3.

1:04:42Tadi ditanya tuh...

1:04:44...materi server send event.

1:04:46Apa itu?

1:04:48Apa ini?

1:04:50Tau ga? SSI.

1:04:52Server send event.

1:04:54Terima kasih.

1:04:56Bisa donate 20 ribu ya?

1:04:58Bisa.

1:05:00Apa itu server send event?

1:05:02Websocket tau?

1:05:06Ya.

1:05:08Sebelum ada websocket itu server send event.

1:05:10Jadi buat real time ya?

1:05:14Kalau websocket...

1:05:16Real time whistler kan?

1:05:18Bedanya server send event itu...

1:05:24...yang ngirim eventnya server.

1:05:26Kalau...

1:05:28...kalo sistemnya websocket...

1:05:30...kalo...

1:05:32...apa? Satu lagi.

1:05:34Temannya websocket apa? Satu lagi, saya lupa.

1:05:36Temannya websocket.

1:05:38RTC.

1:05:40Web RTC kan peer-to-peer.

1:05:42Dengan...

1:05:44...kalau websocket...

1:05:46Long polling.

1:05:50Ya dia bukan terus kan?

1:05:52Sama. Server send event juga...

1:05:54...dia long polling, tetapi...

1:05:56...pakainya HTTP.

1:05:58Kalau websocket...

1:06:00...bukan pakai HTTP.

1:06:02Dia pakai socket.

1:06:04Kalau server send event...

1:06:06...sama kayak...

1:06:08...simkatnya...

1:06:10Ada server yang standby gitu berarti?

1:06:12Anggap aja...

1:06:14...requestnya...

1:06:16...unlimited.

1:06:18Jadi kalo kita request...

1:06:20...ke server...

1:06:22...terus servernya...

1:06:24...kayak keep alive.

1:06:26Oh ini ya...

1:06:28...mungkin perlu dibahas dulu. Kalo misalkan yang...

1:06:30...tradisional, kalo ada request...

1:06:32...di response, tutup, selesai.

1:06:34Ya, jadi request, response.

1:06:36Kalo ini...

1:06:38...request, dia tetep keep listening...

1:06:40...kalo ada data...

1:06:42...data terbaru, dia kirim lewat...

1:06:44...jalur itu. Nah nanti...

1:06:46...di JavaScriptnya ada sendiri...

1:06:48...gue lupa nama. Ada eventnya berarti ya?

1:06:50Ada API-nya.

1:06:52Ada API-nya.

1:06:54Namanya...

1:06:56...tahap...

1:06:58...server send event...

1:07:00...web md ya...

1:07:02Eh, web...

1:07:04Oh web md.

1:07:08Nah...

1:07:10...using server send event...

1:07:14...itu dia pake event source. Nah...

1:07:16...itu namanya. Event source.

1:07:18Ya, event source.

1:07:20Nah, kita bahas lagi...

1:07:22...minggu depan atau kapan...

1:07:24...kita bahas mendalam server send event...

1:07:26...web socket, web RTC.

1:07:28Yuk, compare yuk. Itu lama banget...

1:07:30...berapa jam ya kalo compare itu semua.

1:07:32Hands on, hands on.

1:07:34Jadi waktu saya bikin...

1:07:36Saya bikin collaborative editing...

1:07:38...dulu itu...

1:07:40...saya sempet compare...

1:07:42...kalau saya pake server send event...

1:07:44...gimana, pake web socket...

1:07:46...gimana, pake web RTC, gimana.

1:07:48Ada kelemahan...

1:07:50...paling cepet itu ya...

1:07:52...gak ada. Gak ada bisa ya...

1:07:54...gantung kondisi di lapangan...

1:07:56...butuhnya apa.

1:07:58Itu, jadi itu contohnya...

1:08:00...kalo dari PHP-nya, header-nya...

1:08:02...kirimnya...

1:08:04...text event stream...

1:08:06...konten type-nya, jadi gak.

1:08:08Jadi...

1:08:10...while true, jadi dia...

1:08:12...gak habis-habis tuh, dia tetep listening.

1:08:14Kayak chunks gitu kan ya?

1:08:16Ya, terus dia tetep kirim data...

1:08:18...echo, terus abis itu...

1:08:20...flush, echo, flush, echo, flush.

1:08:22I see.

1:08:24Nanti kalo dari...

1:08:26...sama si event source...

1:08:28...kalo misalnya dari server time out...

1:08:30...atau ketutup, dia open lagi.

1:08:32Buka lagi, pulling lagi.

1:08:34Oh...

1:08:36...ini...

1:08:38...kalo...

1:08:40...dari segi time out itu...

1:08:42...lagi dulu mana sama websock-nya?

1:08:44Kayaknya duluan ini deh.

1:08:46Kayaknya paling pertama ya...

1:08:48...dilihat dari...

1:08:50...sintaksinya sama...

1:08:52Aku tidak mengetahuinya...

1:08:54...sama sekali.

1:08:56Gak pernah ada K...

1:08:58...gak pernah ada K-nya.

1:09:00Ya, langsung ngomongin...

1:09:02...udah bikin chat app, udah sedang gitu.

1:09:04Wow, magic gitu kan.

1:09:06Kalo dulu kan awal...

1:09:08...dari pertama yang kayak tiap 5 detik...

1:09:10...di refresh gitu kan.

1:09:12Apa sentuh terpal ya?

1:09:14Contohnya kalo misalnya di...

1:09:16...kita di...

1:09:18...di belakang CDN kalo pake contohnya...

1:09:20...CloudFront. CloudFront itu kalo...

1:09:22...nggak di setting secara...

1:09:24...customer. Sorry, CloudFront itu...

1:09:26...tidak bisa websocket. Nah...

1:09:28...hanya bisa...

1:09:30...request response.

1:09:32Websocket itu hanya...

1:09:34Websocket itu...

1:09:36Ya, karena...

1:09:38...nggak bisa keep alive itu.

1:09:40Karena kalo...

1:09:42...websocket itu kan harus ada...

1:09:44...socket yang dibuka...

1:09:46...secara lama. Sedangkan CloudFront itu...

1:09:48...nggak bisa, gitu. Jadi...

1:09:50...kalo pake websocket itu...

1:09:52...harus tembusnya langsung ke...

1:09:54...load balancer...

1:09:56...okey.

1:09:58Panjang ceritanya kalo kita bahas ini.

1:10:00Ya, next.

1:10:02Harus banget ke infra soalnya ya.

1:10:04Bergantung sama infra aja.

1:10:06Oke, siap.

1:10:08Ya, jadi kalo buat temen-temen yang...

1:10:10...apa? Yang ada...

1:10:12...topik diskusi atau mau...

1:10:14...saran-saran, gitu ya.

1:10:16Boleh ke bit.ly/ngobroinweb.

1:10:18Ditulis aja disitu.

1:10:20Kita baca kok, dan kita kumpulin.

1:10:22Jadi nanti kita...

1:10:24...bisa merealisasikannya...

1:10:26...secara langsung gitu semuanya.

1:10:28Tapi setahap saat...

1:10:30...satu episode, satu episode.

1:10:32Dan kita butuh apa?

1:10:34Butuh banyak...

1:10:36...ideotopik. Karena kita pengen tau juga...

1:10:38...temen-temen ini tertariknya ke arah...

1:10:40...yang mana, gitu ya.

1:10:42Apakah topik yang beginner...

1:10:44...fundamental, atau apa...

1:10:46...diselingin sama yang intermediate, advanced...

1:10:48...dan lain-lain.

1:10:50Oke, untuk malam ini mungkin...

1:10:52...yang dulu aja. Sekarang udah cukup panjang...

1:10:54...ngomongin phone.

1:10:56Udah kemana-mana juga.

1:10:58Cara compare phone dengan Google phone.

1:11:00Iya.

1:11:02Terima kasih buat teman-teman...

1:11:06...semua yang sudah...

1:11:08...apa? Sudah menemani kita...

1:11:10...ngobrol...

1:11:12...ini memang benar-benar definisi dari...

1:11:14...ngelurngidul, ya.

1:11:16Iya, ngobrol.

1:11:18Ada yang kasih kan nyoboin...

1:11:20...phone.

1:11:22Mainan phone lucu.

1:11:24Mainan phone lucu-lucu.

1:11:26Mudah-mudahan...

1:11:28...apa yang kita sampaikan...

1:11:30...bermanfaat buat teman-teman...

1:11:32...di pekerjaan atau di tugas sekolah...

1:11:34...atau apa, gitu ya. Buat optimize...

1:11:36...websitenya juga.

1:11:38Kita ketemu lagi minggu depan, insyaallah...

1:11:40...dengan topik yang berbeda.

1:11:42Selamat malam, selamat istirahat.

1:11:44Selamat malam, bye-bye.

1:11:46Bye.