Library Animasi - Ngobrolin WEB

1:50coba aja

1:51ya ya ya

1:55saya sendiri sudah gantel banyak lms.jax itu satu itu udah sudah-sudah saya publish cuma

2:08apa namanya tujuannya tercapai masih tujuan saya belajar coding eh apa file coding dan

2:21tujuan produknya sudah tercapai jadi sudah stabil pakai Oke terus yang terakhir itu ya apa persona

2:29ya persona itu pertama persona itu Oh itu yang lmsj itu persona ya Iya saya malah ngulik ini

2:42coding agent tapi malah bikin sendiri jadinya

2:45nyoba-nyoba

2:47pengen tau

2:49gimana cara

2:50bikin agent

2:53jadi karena si LLM nya

2:56udah pinter

2:57kerja beratnya di LLM

3:00kita cuman kasih

3:01saya tuh coba sampai

3:03kasih cara untuk

3:05baca file dan nulis file

3:07udah

3:08looping nya itu

3:10reasoning looping nya itu dari LLM nya

3:12Jadi kerja beratnya itu sudah di LLM.

3:19Mau kasih akses base, takutnya kelewat.

3:24Over kan? Bahaya.

3:27Jadi kasih read sama write aja.

3:28Itu sudah lumayan.

3:30Maksudnya dia sudah bisa saya bikin test case,

3:34terus tolong bikin implementasi code.

3:36Itu dia sudah bisa.

3:37Tapi kan baru baca satu file, belum baca satu project.

3:42Oh ibaratnya Mas Deja sudah membuat seperti copilot zaman dulu ya waktu awal-awal

3:48Yes, yang buka tab ya, yang tabnya kebuka itu ada konteksnya disitu, itu doang

3:54Yang kebuka saja, terus apa yang biasanya yang di select sama user

4:00Lainnya, lain berapa aja

4:02Lain berapa, betul

4:04Ya baru sampai situ sih, gara-gara kemarin itu meetup kursor kan

4:09tiba H berapa tuh jadi pembicara ya katanya mau keliaktifkan terus bahas apa ya bahas coding agent Akhirnya malah ngulik ke situ

4:19Ah sekalian lah

4:20Ternyata feedbacknya lumayan

4:23Banyak yang apa namanya, yang appreciate juga kan

4:25Akhirnya

4:26Hmm, kayaknya seru nih

4:28Bisa dibikin sesuatu

4:29Mudah-mudahan teman-teman yang gak datang kemarin bisa

4:32Nanti bisa baca juga artikelnya

4:35Sama ini satu hal apa

4:38kayak kadang ada feeling bercampur aduk nih antara feeling FOMO FOMO sama ber-out enggak

4:50sama Jomo Jomo Joy of missing out Iya jadi itu ada bukunya saya sudah mulai beralih ke Jomo sekarang

5:00kayak misalnya masih udah main opencloud saya gak ikut ikutan lagi opencloud yang lain pada

5:05saya sampai sekarang belum sentuh opencloud loh

5:07jadi kayak satu-satu dulu deh ini aja belum kelar nih gue bikin gue punya aplikasi gitu

5:14satu-satu difokusin

5:16kalau kita nggak prioritaskan bener jadi burnout

5:20saya burnout ya

5:22ini masalah apa ya?

5:25problem juga karena kan kita punya apa ya?

5:28punya nafsu yang besar untuk bikin-bikin dulu

5:31tapi nggak punya bandwidth kan

5:33sekarang hanya berbekal prompting kita sudah bisa mewujudkan ide yang ada di kepala kita

5:39jadi kayaknya terlalu gampang untuk mewujudkan sesuatu

5:42akhirnya, wah masih ada token gratis nih

5:45bikin ini, bikin itu, bikin ini

5:47aku ingin begitu jadi gede sih

5:49jadi kayak, ya ini kurang, ini kurang

5:51akhirnya, apa namanya

5:54kayak saya bisa sampai jam 3, jam 4 pagi

5:57kayak, eh dikit lagi ah dikit lagi

5:59terus dipantengin ininya si

6:01ini nya si lagi ya si buatnya Iya buatnya jalan terus jengen apa gitu ya kepo ya terus habis tuh

6:11kayak diselang-seling supaya di orchestrate lagi orchestrate alurnya yang bagus terus pasti ada

6:18yang ada yang bikin masalah emosi terus benerin lagi memorinya segala macam ah panjang lah ceritanya

6:26akhirnya ah udahlah saya nggak ini udah mulai meninggalkan daripada stress sendiri

6:33ternyata capek juga ya mantegin si AI ini ya

6:37iya jadi dia banyak melakukan kesalahan-kesalahan yang aneh-aneh ya

6:43namanya juga AI ya

6:44dia cuma gak ada pintar-pintarnya disitu dia cuma the best predictor

6:51the next world

6:52The best next word predictor.

6:55Next token ya.

6:57Itu aja. Iya.

6:59Kalau sudah mengerti itu, oh ya begini cara kerjanya.

7:02Mungkin ini jadi ini ya kali ya, curse buat kita developer kali ya.

7:08Kita nggak bisa meninggalkan begitu aja. Jadi kita harus kepo kan.

7:12Wah dia ngapain nih? Wah itu.

7:14Kalau misalkan buat entrepreneur mah dia happy banget.

7:17Bikin ini, selesai, nggak peduli dia kodenya mau spaghetti kayak apa.

7:21seperti apa, terus dia deliver ke user, dapat feedback, dia bikin lagi, kayaknya pada happy gitu.

7:27Kalau kita pada stress malah ya.

7:30Kan, iya, apa ya, pernah nggak sih sebenarnya as simple as kayak contohnya generate gambar deh pakai Gemini Nano.

7:43terus hasil pertama

7:46bagus nih

7:47cuma ada

7:49bagus, hasilnya bagus, cuma ada

7:51satu atau dua area

7:53yang kira-kira

7:55nggak pas gitu

7:57mungkin karena

7:59kurang perfect lah gitu ya

8:01kurang perfect dikit gitu

8:02terus kita prompting, suruh dia benerin

8:04makin lama hasilnya

8:05jadi yang bener

8:10kalau kan lo sudah tahu

8:12cara gunakannya yang bener adalah kalau sudah yang pertama sudah bagus tapi ada gak perfect gak usah dibikin perfect

8:23buang bikin baru karena si LLM atau AI ini lebih bagus generate saat konteksnya kosong

8:35Kalau konteksnya sudah ada sebelumnya, dia makin halu.

8:41Justru kalau kita biarkan dia yang pertama langsung jadi, bagus.

8:45Makanya sekarang saya kalau misalnya ada feature,

8:48yang kira-kira feature-nya cukup besar,

8:53Either saya breakdown kecil-kecil

8:56Atau saya tandingin

8:58Di dua sesi yang berbeda

9:01Mumpung tokennya masih ada

9:02Di dua sesi yang berbeda

9:05Dan saling

9:06Nanti sudah selesai

9:08Minta

9:09Agent yang berbeda

9:12Untuk nge-quote review

9:13Jadi dengan fresh context

9:19Mereka justru lebih

9:20Otaknya lebih fresh

9:21Jadi kayak

9:22Anggap aja seperti manusia

9:26Yang baru bangun

9:29Di sore hari disuruh bikin sesuatu

9:31Eh tergantung orang ya

9:32Tapi di sore hari

9:33Anggap aja normalnya

9:35Seger di pagi sore sudah capek

9:38Di sore hari dibikin sesuatu

9:40Pasti pengennya cepat kelar pengen cepat pulang

9:43Jadi banyak kesalahan gitu ya

9:45Sudah banyak konteks dari pagi

9:47Sedangkan kalau disuruh bikin

9:49benerin atau buat feature dari pagi atau saat datang kantor bikin-bikin feature lebih lebih

9:58fresh lebih banyak akurasinya lebih tinggi daripada akurasi di setelah penat satu harian

10:08mungkin itulah sebabnya apa eh metode rafwigum looping itu efektif ya karena setiap kali bikin

10:21satu sesi baru di atas sesi dia akan kosong session Iya makanya sih cloud code pertama

10:28kali di play mode setelah play mode dia bilang mau dieksekusi clear context eksekusi clear

10:35konteks dulu ya jadi plan modnya disimpan habis itu clear clear konteks ya teman-teman yang nonton

10:43pada pakai enggak sih jangan-jangan kita hidup di babel nih teman-teman yang lain masih ngoding

10:49biasa ada iya nanti lagi bahas mungkin anti jadi jauh melenceng kita melenceng ya padahal opik

11:00ini berbeda ya, bukannya AI ya

11:02kita kayaknya tiap kali, tiap

11:03episode itu pasti ada sesuatu yang dibahas

11:06karena kita lagi ngulik banget

11:07tapi sebelum kita ke topik utama

11:10saya mau share tentang

11:12apa

11:13kolaborator kita malam ini yaitu Dominisia

11:15jadi kalau teman-teman punya

11:17website

11:19yang belum di hosting

11:21masih di local host, hosting aja di Dominisia

11:24teman-teman bisa pakai

11:25diskon 10% untuk web hosting

11:27promo codenya ngobrolin

11:29main webdn Nah kalau yang mau main-main apa Cloud opencloud ya bisa pakai ya jadi bisa pakai itu tuh

11:42bisa domenesia sekarang di VPS nya udah dikabarin nih sempat cetoknya pasitifnya sudah bisa nn8n

11:50kalau nggak bisa di kayaknya sudah bisa karena neva cloud sudah bisa di domainnya sudah bisa ya

12:01n8n dan sudah bisa juga ya karena VPS Open Cloud ya paling cocok jangan di install ya

12:10lebih aman ya betul Jadi kalau misalkan mau coba-coba apa sih itu Open Cloud apa sih

12:17ini sama istri

12:19barusan

12:20sponsor tuh sponsor

12:25kebetulan

12:27gak disuruh

12:28jadi kalau teman-teman

12:31mau coba ya ada diskon 50%

12:3350% loh

12:34cloudvps.dominisia

12:37itu promo codenya

12:39pake aja ngobrolin vpsdn diskonnya berlaku untuk semua paket semua siklus bisa dipake lebih dari satu kali akunnya nggak usah diganti nggak usah pakai email baru pakai email yang sama aja

12:49itu bisa dapat promo 50% saya keman pakai juga buat acaranya Dominis ya saya hosting di sana

12:58jadi sama ini loh kalau tinggal kalau pasang opencloud tinggal kayaknya nyampe gak nyampe

13:07150.000 rupiah ya kalau main-mainnya kimi kan 0,99 tuh anggap 1,99 kalau kalau udah capek banget

13:16nggak dianggasi jadi 2,2 dollar plus harga VPS berapa sekarang kalau udah dipotong 50%

13:25kalau nggak salah 150.000 bagi dua 75.000 jadi cuma 100.000 udah bisa mainnya Open Cloud

13:31Open Cloud, menarik sih Open Cloud.

13:35Menarik.

13:37Nanti lah kita bahas tentang itu ya.

13:41Tapi sebelum itu ya, terima kasih buat Dominicia untuk kolaborasinya malam hari ini.

13:47Dan malam-malam selanjutnya mudah-mudahan ya.

13:49Dan kalau teman-teman ada yang pakai servisnya Dominicia, tolong kita dikasih tahu.

13:54Jadi kita bisa kasih feedback juga ke mereka bahwa penonton-penonton kita ternyata banyak juga yang pakai dominisi ya

14:02Thank you

14:04Oke malam ini kita akan bahas tentang animasi

14:08Jadi di web itu biasanya kalau mau menarik ya

14:14Itu biasanya ada, sebenarnya ada beberapa ya

14:17Ada beberapa kategori atau beberapa tujuannya lah

14:23misalkan ada animasi untuk interaksi misalkan micro animation lah istilahnya gitu ya

14:33terus misalkan kayak button hover gitu tiba-tiba ada ting gitu kan

14:38atau ada geser warnanya berubah untuk on hover dan lain-lain

14:43itu kan termasuk animasi tapi yang micro lah ya jatuhnya ya

14:47terus juga ada transition antar satu page ke page yang kedua kayak view transition itu masuknya jadinya animasi juga kelihatannya

14:57walaupun sebenarnya itu transisi ya istilahnya

15:01terus ada yang scroll driven yang bisa di scroll gitu kan yang suka di demoin sama padika tuh

15:09yang kayaknya yang saya takjub dengan animasi yang scroll driven itu adalah di website nya Apple

15:17karena itu ininya mereka kayak

15:19apa namanya

15:21kayak sebuah

15:25trademark

15:26bukan trademark lah, jiwanya

15:28situsnya Apple, setiap kali ada produk baru

15:31Mac mini lah, atau Mac lah

15:33atau iPhone, setiap kali kita

15:35scroll

15:35produknya bisa

15:39beranimate

15:40sesuai dengan konteks

15:42di page itu

15:45jadi kita bacanya pun jadi kayak

15:46kayak presentasi jatuhnya ya bukan kayak halaman web ya kayak video kali ya kayak video ya

15:57masih ada sekarang yang di Apple enggak kan masih

16:07Nah disini teman-teman ada yang pakai nggak sih library-library untuk animasi kalau ada

16:24boleh di-share pakai apa dan di-share juga pengalamannya yang mana Oh ini kali ya salah

16:31produknya aja klik aja MacBook Pro 14

16:34landmark ini lebih motion gak nih

16:38Oh iya reduce motion dulu ya

16:42reduce motion nyalain eh nggak nyala kan

16:46lagi nggak nyala ini

16:49ini ya itu turun lagi turun lagi

16:54turun lagi

16:59Oh iya bener

17:01Cakep ya

17:02Ini saya sambil scroll

17:04Oh jadi ini

17:07Perkenalan M5 ya

17:08Kalau di scroll

17:10Ini animasinya

17:12Terus apa

17:14Kelebihan utamanya apa

17:17Wah 6 kali lebih cepat dari M1

17:19AI nya

17:22AI nya

17:24Oh jadi ini peruntukannya buat AI ya

17:29dan game ada tenser dia ada tenser library nya khusus Oh saya taunya dari whisper whisper.cpp

17:37ada kalau si library si M5 M series itu namanya metal untuk Oh ya metal ya ya ya benar-benar

17:48terus di metal setting itu ada tensor Nah karena saya punya nya cuma M3 nggak bisa pakai library

17:57yang tenselnya itu hanya bisa M5

18:01saya baru merasakan M1

18:06sekarang sudah M5

18:09oke, nah ini salah satunya

18:14GSAP

18:14GSAP itu dulu namanya Green Shock

18:18kalau tidak salah ya, dan dulu berbayar

18:20terus habis itu mereka diakusisi

18:22sama Weflow dan akhirnya dikasih gratis

18:25enak ya?

18:26ini cakep ya kita bisa bikin slide dari sini

18:32tinggal kasih sama video si Anfu pakai ini enggak ya Oh ya digabungin sama ini kali ya

18:41udah pakai ini apa pakai satu lagi yang si framer Oh iya ada framer motion yang ini ya

18:50ada dua dulu ada juga sih lebih animasi ada dulu saya sering apa melihat ini anime.js

19:10anime.js ya betul ya anime.js ini bukan komik ya tapi animasi engine

19:20kalau 3ds lebih 3ds ya 3ds ya kalau 3ds lebih ke 3d ini buat animasi

19:30tuh cakep banget sekarang perasaan dulu anime.js cuman buat yang simple-simple kayak scroll terus

19:40yang buat fade in fade out sekarang udah super canggih ya Iya udah lama banget nggak ngikutin

19:49Oh ternyata ini nasib backend begitu tuh

19:57tapi kita masih coba ya sebagai sebagai apa namanya orang yang berkuar-kuar untuk

20:17Hai performance performance animation itu sebenarnya performance Killer

20:21dan secara US kalau too much animation juga jadi ilfil ya Iya apa sih semuanya goyang-goyang gitu

20:33ya ya ya ya secukupnya aja sih sebenarnya tujuannya ya satu ya buat feedback jadi misalkan on click

20:43atau yang tadi loading state gitu ya ada perubahan state misalkan kalau sekarang kan serba SPA

20:53single-page application jadi misalkan ada email baru kalau misalkan tiba-tiba emailnya muncul di atas gitu kan

21:00kalau tidak ada apa-apa gitu kan user bisa jadi nggak notice kan mungkin diganti warnanya dulu

21:07atau ada tulisan ada label new gitu kan terus munculnya juga dari bawah ke atas misalkan gitu atau gimana yang menarik ke atensi dari user

21:19salah satunya itu sih

21:23dan terakhir ya pasti

21:26mata kita cepat menangkap sesuatu yang bergerak

21:30udah itu ini ya

21:32ya berubah warna bergerak

21:34ya gitu lah

21:38jadi sebenarnya enggak mesti harus kayak seheboh ini ya kalau ini mungkin lebih ke mau bikin jadi

21:50kayak zaman dulu ya teman-teman ngalamin gak sih kalau zaman-jamannya itu makromedia flash bikin

22:00website yang animasinya gila-gilaan gitu Wah itu jaman itu kayak itu ya kayak apa tuh namanya ada

22:07iklannya yang di video apa tuh yang seorang yang lagi nge-launching sesuatu dia pencet ke

22:14TV gitu ya 3 doang dia pencet terus itu video bukan beneran video hahaha

22:26oke oke berarti beda kayaknya nggak ada yang ngalamin ya Ivan dulu ngalamin

22:38gak sih makromedia flash bikin-bikin website gitu dulu saya inget banget

22:44tapi harus loading dulu kan karena syf-nya harus di-download kan dulu

22:52jadi sambil loading itu ya kita animasi habis itu nanti itu sangat tidak ini ya

22:57accessibility sangat tidak bagus ya karena disatu frame pernah bikin jaman waktu kuliah

23:04saya pernah bikin website pakai makromedia flash kok jadi memang jadi aplikasi-aplikasi yang

23:12lucu-lucuan SPA kan jatuhnya kan SPA jadi kayak iya jadi satu aplikasi single-page application

23:21bisa tuh di di download berarti menjaga terus kalau diklik ya Nah zaman dulu itu saya baru

23:32ingat ini yang jadi acuan namanya orange dan padahal dibaca orang Edan gitu ya Iya

23:41dari zaman dulu dipakai flash saya baru cek tadi ternyata masih ada websitenya dan ini

23:47dan bukan flash lagi ini

23:48ini jaman saya kuliah dulu

23:51ini udah

23:52populer ini

23:54tapi dulu gak kayak gini ya

23:56dulu gak kayak gini website nya

23:59dan itu gak ada apa-apa website nya

24:01cuma gini doang

24:02ini kayaknya

24:05sebuah perusahaan dari tahun 2000an

24:072000-2025

24:09ini memang

24:11padahal orang edan ya

24:12kayaknya sih

24:14namanya lucu Iya mungkin teman-teman gak rilet ya karena enggak ada yang hidup di jaman dulu banyak

24:23game loh game lucu banyak banyak Iya karena dulu JavaScript dulu nggak bisa nggak mampu jadi mau

24:33nggak mau kita harus menggunakan terparty salah satunya flash ya jadi ada beberapa ya ada anime

24:43terus ada tadi

24:45framer motion yang cukup terkenal

24:47ada gsap tapi juga

24:49kalau misalkan teman-teman mau

24:50animasi yang sederhana gitu ya

24:53gak terlalu

24:54gimana-gimana kayak gsap gini

24:56atau kayak framer motion

24:58atau bahkan kayak anime

25:00itu sebenarnya

25:03sekarang udah bisa kan

25:05pakai vanilla javascript atau

25:06bahkan css doang kan

25:08keyframe

25:10ya itu animation

25:12transition kan positioning library animation ini dimana karena secara web API sudah mulai lebih modern kan sekarang kan Iya sih udah banyak yang disupport ya misalkan kayak button

25:33apa button on click atau disable enable itu aja pun dari CSS juga udah bisa kan sebenarnya

25:40nggak butuh kita nggak usah pakai library ini kalau hanya sekedar anime-anime yang

25:46sederhana ya micro interaction kayaknya masih bisa di handle sama CSS atau JavaScript anila kali ya

25:54tapi ini kayaknya pada bikin apa namanya kayak game web interaktif misalkan buat dekorasi buat

26:09interior gitu bisa yang bisa di rotate mungkin gitu ya

26:14Hai coba aja klik satu yang lucu tutup school mana tutup school deskripsi

26:27Hai ini apa yang dianimasi Hai bentar masih loading

26:31Hai lama-lama juga ya Iya lama juga lebih cepat ngobrolin wc eh eh eh eh eh eh eh eh eh eh

26:45fun thing studio

26:53Yes Yes call jets book of life ini animasinya yang belakang

27:01Hai kek traveloka bisa-bisa diapain wuih skoran vision

27:08skoran vision Wih cakep udah keren banget

27:17serius nih keren banget Nah kalau ini kan nggak bisa kan pakai SSI paskipan hilang nggak bisa eh

27:28Scroll animationnya bisa, tapi sampai segini, kayak sedetail gini sih gak nyokap.

27:36Tapi sebenernya bisa sih, zoom kan sudah bisa juga, zooming objects segala macem.

27:40Bisa ya.

27:41Bisa tapi su-

27:42Ini gak tau ya, buahnya aja mungkin skill issue gak bisa.

27:44Effortnya, ya effortnya mungkin terlalu tinggi kali ya kalo harus pake vanilla semua.

27:51Ada saatnya kita harus pake library ya.

27:55Jangan semuanya vanilla.

27:58jadi kayak website-website yang butuh interaksi interaktif gitu ya sama visual itu sangat ya

28:10mungkin di beberapa Circle ya kayak misalkan jualan tiket konser gitu ya mungkin itu perlu

28:18tapi ini ada speaker

28:20apa ini

28:20oh ini conference kali ya

28:25iya

28:25AI native

28:28dari semua tulisannya

28:30yang gue ngerti AI native

28:32open source

28:33ini video

28:35ini video tapi

28:37ini animasi apa

28:39transisinya sedikit ada

28:41animasi ya

28:42keren ya

28:47Kenapa butuh animasi ya buat menangkap ini ya memberi atensi activity lebih fit experience lebih

28:57tepatnya ya kalau experience bagus ada hubungan sama branding juga ya betul betul ya tergantung

29:08tergantung target user nya juga

29:14kalau target user nya mementingkan visual

29:18misalkan tadi tiket pesawat

29:21bahkan ini tag kan

29:24kayaknya tag conference kan ya

29:27event conference kan

29:29tapi ini animasi juga

29:31visual designer

29:38juga visual designer ya ya ya Hai saya Apple dia sampai bikin website nya eksklusif seperti itu kan juga memberi kesan

29:48mewah kan ya

29:50ada misinya, kalau misalnya kayak

29:52produk mahal tapi website nya

29:56biasa biasa aja gitu ya

29:58kerasa biasa gimana ya pasti

30:00orang gak relate

30:02dengan experience

30:04yang di dapatkan

30:08Ini website nya Apple yang dibikin pakai yang sempat viral itu nggak sih?

30:14Saya lupa.

30:15Sempat viral kan?

30:17Websitenya gede banget ya.

30:18Jadi kayaknya nggak cuma satu sistem deh.

30:20Jadi setiap kali menu-menunya itu bisa jadi microapp juga.

30:25Microfrontend ya.

30:27Ini satu app sendiri.

30:28Maybe. Saya nggak tahu ya di mana ini.

30:30Tapi kalau landing page mah kayaknya nggak deh.

30:34Masa sih harus microfrontend?

30:37bisa jadi beda tim Oh ya ya i don't know kalau saya di Apple

30:47mau dong apply saya

30:53tinggal pakai itu aja si Claudia nya Mas Riza

31:02mana bisa motion one ini saya dapat juga nih dari motion one ini rekomendasinya ya udah

31:12arsena sudah si Claudia kris dark FB Kenapa diangkat enggak ada alasan

31:19Hai tuh Hai terakhir update dua tahun yang lalu udah loti itu isu mungkin isu repositor

31:30online roti-roti sekarang lagi banyak lagi banyak juga pakai loti do maksudnya ini

31:37Master dan Loti Animation

31:39Tapi sponsornya Salt

31:41Mana Loti?

31:43Ini

31:45Bawah bawah, Loti Files

31:47Oh Loti Files namanya

31:49Oh

31:51Kalo ini sifatnya embed

31:53Ini sifatnya embed

31:55Embed itu maksudnya gimana?

31:57Embedding, kayak Twitter embed

31:59Kayak

32:01Instagram, jadi mereka udah bikin

32:03Jadi yang bisa dibikinin jadi bisa keren loh

32:05kalian loh masih kayak kayak ya grafik bisa animasi kayak gini bisa di itu ada gojek tuh

32:14tuh jawabannya tuh powerpoint.com namanya dot loti

32:22jadi tadi Iwan nanya kan apa namanya kenapa butuh animasi itu optimal performance and

32:35user experience

32:36tapi Gojek bukannya bukannya pakai native ya enggak pakai web ya

32:45ada service gojek yang bisa diakses lewat web enggak enggak kan ini native kan tuh yang ini

32:56Hai yang ini kan aplikasi native

33:00Hai baby bisa jalani native apa jangan-jangan ada yang native Oh iya kayaknya ada deh bisa

33:08karena dia dia kayak file sendiri jadi kayak Oh iya benerin dia punya runtime to doti.com

33:15Oh oh ngerti-ngerti Oh kayak flash juga jadinya ya

33:24Hai tapi beda engine jadi nggak perlu download ya kita harus download

33:30kan suef playernya ya ya ya masing-masing kan betul

33:37Oh ini ada yang pengalaman nih Mas Muhammad Farhan lhoti bisa custom

33:44sendiri di webnya lalu export.com atau Jason Oh jadi disediakan ininya ya

33:50kita animasi pakai editornya layak gitu ya pakai playernya terus habis

33:58download terus habis itu kita bisa jalanin di website Wah menarik ya

34:02Hai ini ya platformnya ya ada kreatornya

34:07Hai uh seru iya Wow tuh bisa bikin begini tuh kan kan keren kan Oh jadi kayak bikin iklan ya

34:18iklan ya bener salah satunya bisa bener kalau yang di tempat yang klien saya buat itu dia buat

34:31infografik buat hasil pemilu salah infografik infografik tetap tentang kondisi pemilu saat itu

34:43Jadi masing-masing ada penjelasannya dengan Lottie file.

34:48Itu yang saya ingat.

34:51Ada lagi yang namanya Flower apa gitu ya?

34:56Menarik ya. Ini image ya? Berarti ini GIF gitu?

35:01Eee... iya. Kayak GIF tapi bukan. Lottie file. Lottie.

35:09Oh, ada encoder sendiri berarti ya? PNG?

35:16Iya, dia punya engine sendiri ya.

35:21Coba aja cari contoh yang live-nya.

35:26Sample, Lottie Sample.

35:30Cari aja. Itu tuh tadi, tools, customer.

35:37customer itu build with lotis itu paling kanan bawah iya

35:47Google AI itu

35:51AI lagi

35:56visit website

35:57Hai e-idol Google Hai kayaknya ini ini roti ya coba klik wow

36:11Hai SPG Oh iya loh container-container SPG Oh oke oke jadi lebih lebih nanti perasaannya kan jadi

36:22ya seperti saya bilang di embed terus di jalan runtime nya sendiri di web

36:28untuk ngeanimate ini

36:31ini menarik sih yang terutama yang ada creator bikin

36:36yang bikin loti file nya sendiri itu menarik karena selama ini saya mencari-cari apa ya

36:43motion graphic motion graphic kayak gini

36:48ini maksudnya yang simpel ya yang dua-dua dimensi tapi enggak serumit kalau produknya Adobe apa tuh

36:55yang buat motion mesinnya motion yang buat bikin animasi sudah anak after effect Iya tarif itu kan

37:04terlalu rumit ya Saya pengen yang simpel-simpel aja kayak menjelaskan misalkan gimana proses

37:09request response gitu misalkan kayak di apa di slide atau dimana gitu pengen di pengen tahu

37:18ada tools yang kayak gini juga ternyata ada iya karena kita ngomong motivas satu lagi yang saya

37:26disuruh oleh klien untuk integrasi juga florist to the florist.studio

37:34Hai lebih satu lagi saat yang masih klien yang sama satu dia menjelaskan tentang tentang

37:41infografik dan macam satu lagi dia Oh ini bukul kan datanya memunculkan datanya pakai

37:48Flourish lebih khusus untuk animasi-animasi buat

37:56Data ya menampilkan data

37:58Chart data

38:00Lebih indah daripada Chart.js

38:04Oh iya ini salah satu use case juga animasi itu bisa dipakai untuk menampilkan atau meng data lah gitu oke kayak

38:21vibe-nya itu kayak D3 ya

38:25kayak D3 kayak high charge tapi Flourish ini embed juga

38:30Oh modelnya sama kayak kalau kita bawa jasnya ke tempat kita kita build di sistem kita kalau

38:38Flores mirip kayak loti jadi kita nge-embed dia aja Hai bahwa masih begini pernah pakai di Flutter

38:48buat nyalain lampu kamera gerakan frame nya bisa di reverse on off sini Jason Oke ini Mas Yogi tadi

38:58website yang pakai gshp

39:00nanti kita lihat ya

39:01boleh di share ini ya

39:03di share pengalaman penggunaan gshp

39:06saya belum pernah soalnya

39:08terakhir tau

39:09green shock itu

39:11sempat tau ada

39:13buat animasi, buat charting

39:16terus tiba-tiba

39:18denger berita

39:19dia diakuisisi terus dikasih gratis

39:21gitu

39:22cuman baru sampai situ sih

39:25learn nya mana

39:28unlock the power of gas

39:32oh video ya

39:34getting started

39:35install

39:37nah abis itu saya lihat video ini

39:40video ibu-ibu ini

39:43oh banyak ya

39:46dia ya

39:47kita tinggal pilih ya

39:49bisa mau semua atau

39:50salah satu ya

39:52misalkan kita mau bikin game

39:55kita bisa pilih satu

39:56ini agnostik kan ya

39:59gak berhubungan sama

40:01library lain

40:02kalau motion kan react kan

40:07react

40:07motion bisa

40:10bisa vanilla

40:12karena saya pakai di astro saya

40:14oh

40:16menarik

40:17halo

40:19clean boys

40:21ini kok bajunya familiar ya

40:24ya ya ya Hai rubah dari mana tuh kayak baik itu yang sering saya pakai

40:34kayak gitu kok sama bajunya

40:37kayak GitHub GitHub kan bukan rubah kita octopus-octopus

40:45firefox yang bahaya firefox Oke

40:54mana disini ada demo nya enggak enggak ada ya dia kasih video doang ya Masa kita nonton video sih

41:07Hai web demo itu Scrolls Reader karya demo-demo

41:16Hai menentu saja demos Oh iya

41:25Hai nah demo all demo Hai kursor tep-tep trail

41:30wiggle your your mouse around eh gimana Oh ini belum ya review mode

41:38begini ini lebay nggak sih lebih demo ya Iya ini demo kalau ini kan bintang-bintang atau

41:53kalau lagi acara-acara Oh kita bisa gitu kitlet mungkin lagi kalau gonya apa yang dekat malah

42:05imlek mungkin pada belakang barang say gitu jaman dulu banget kayak zaman-jamannya Friendster

42:16hahaha

42:19nggak ada yang tahu disini Friendster

42:22oke preview ini apa restart reverse scrap pin Oh bisa ganti kalau over

42:37Kalau pindah-pindah.

42:40Apa namanya? Kursornya pindah.

42:44Terus, make OS dock effect.

42:48Bisa ya?

42:52kalau mau bikin saya tahu bikin operating system web operating system simple animation kita coba

43:02lihat ya twinners ini kan buat jangan Oh kalau on ini ya klik ya tuh bisa lagi sekali doang

43:11kita lihat kodenya ya

43:15box-nya

43:22oh ini kan dia panggil box ini kan

43:26posisi X-nya berapa

43:29rotation-nya 360

43:30oh ini menuju ke

43:33dari kotak ini menuju ke sini

43:35ke X200 ya

43:37rotasinya

43:41360 scale 1,2 kalau kita bikin misalkan 2,2 jadi gede dong gimana dia animasinya Oh nggak jalan

43:51Hai harus dipel dulu Hai lebih langsung harus lihat rantai itu udah orangnya itu buatnya

43:58nah udah Hai Woi gede-gede terus habis selesai dia back out the outnya mana udah

44:10kan dia balik-balik posisi balik gitu repeat satu kalau repit 10 berarti 10 kali gitu ya

44:17kok kayak gampang ya cuma di s.p.do to doang segini doang nih yang justru kalau ada justru

44:36karena ada library begini untuk mempermudah jadi bisa dimasukin ke

44:40kita tinggal bilang AI nya mau bikin animasi kayak gimana

44:43oh iya zaman sekarang

44:47sudah lebih gampang ya

44:51mau belajar juga gampang ya

44:53kalau kita gak ngerti tinggal tanya

44:55saya mau gini

44:57gimana cara implementnya

44:58oh iya make sense yaudah implement deh

45:00yang kerja dia

45:04yang kerja si AI ya

45:06luar biasa

45:10kembali ke kebanggaan beli-beli mulai lagi ini iya dong yang kita mau bandingin sama

45:20framer Oke keyframe respons anime kita saya diperlu mention juga loh ini karena

45:28gsm ini kan Kenapa bisa muncul ini karena dia sudah mau Open di udah di open di open

45:34di-resource kan oleh dengan syarat dengan syarat produk yang kita buat tidak compete dengan webflow

45:43jadi kalau mau bangun no code ya mau bangun yang sama dengan webflow nggak boleh pakai jpsp

45:54Oh oke

45:56Apa yang menariknya

46:03Contoh-contohnya

46:06Extreme-extreme semua

46:08Jadi susah memahami penggunaannya

46:10Apa

46:11Ini buat toggling doang

46:14Begini

46:15Gak ada

46:18Micro

46:18Ini ya

46:20Contohnya di bawah tuh

46:23itu kan build with flow tuh

46:26coba

46:28eee

46:30eee

46:30eee

46:32apa ini

46:34apa ini

46:35sama datang baru bisa nyambung karena kita orang bikin ngomongin frontend nah gue juga nggak ngerti ini tapi kanvas enggak kanvas ini bukan kanvas

46:58animation-animation library aja

47:04ini react ya

47:08just the button to toggle a timeline

47:13weh weh nama kayaknya cuma kayak jasad timeline tuh tuh reverse itu doang ya

47:26terus ada timeline box nol itu X nya berapa rotasinya mau muter berapa kali

47:37box satunya dari

47:39X-nya minus sekian, rotasinya

47:42kebalik, dan seterusnya, dan seterusnya.

47:45Udah.

47:46Segini doang ya.

47:50Nah, terus

47:52kalau gue malah mikir

47:54dari, yaudah kalau ini sih

47:56oke ya. Terus kayaknya

47:58G-SAP itu salah satu yang

48:00apa sih?

48:02Establishkan library yang

48:04dari dulu udah ada.

48:05Nah terus tiba-tiba sekarang ya bukan tiba-tiba ya kan kebutuhan animasi sebenarnya animasi simple

48:12ya ini animasi UI yang simple ya kebutuhan itu kan udah ada puluhan belasan tahun ya itu udah

48:18sold in a way sama library kayak gini terus tiba-tiba muncul view transition nah agak

48:25dilema juga ya maksudnya mau sebetulnya kalau mau perfect maksudnya performance misalnya cara

48:32kerjanya kan lebih pasti lebih oke view transition lah tapi prakteknya kalau harus rewrite semua ya

48:39pasti males juga kan orang-orang yang kebiasa udah terhancur kebiasa pakai ya library kaya motion

48:47kaya gsap itu ya pasti kalau tiba-tiba suruh melajarin sintaks baru lagi mungkin agak males ya

48:54kenapa Ivan jadi ada ide sederhana kayak misalnya kita punya membership kan membership site atau

49:07punya situs aplikasi yang ada membershipnya jadi button untuk cancel membershipnya itu

49:13begitu orang hover mau dihover dia pindah ke tempat lain gitu kan jadi pernah pernah tahu

49:20ada yang bikin kayak gitu bisa cancel bercandaan dark pattern ada yang bikin cuma kayak

49:29do you want to cancel your subscription? are you sure? tapi kalau itu triknya macam-macam sih ada

49:39yang kayak confirm terus kayak harus ada captcha cuma captcha nya sulit banget cuma salah satunya

49:44nggak itu mau diklik gerak masih enggak dibikin animasi kalau klien nggak bayar ya Oh ada yang

49:53bikin di-fade out siapa ya dulu ada kan ya ketweet jadi kayak apa bikin kalkulasinya pertama

50:01kurangin ya semakin lama nggak bayar semakin

50:06ada feedback nih ada feedback Ivan katanya suaranya agak kecil

50:18ya thank you thank you terima kasih tadi mau apa Eka kan tadi sebutin view transition tadi kita

50:34sempet bahas jadi tipe-tipe atau jenis-jenis animasi itu sebenarnya ada beberapa ternyata

50:41ada untuk micro interaction misalkan button klik terus loading gitu ya ada buat transition ada buat

50:48animasi jadi animasi sama transition itu mungkin mirip tapi bisa dibilang ada perbedaan kalau animasi

50:57misalkan kayak tadi di halaman ini ini animasi bukan transisi kan transisi kan antar page

51:04kalau page transition ya maksudnya ya oh enggak view transition yang level 1 itu ya buat use page

51:10kayak gini apapun itu pokoknya jadi namanya emang agak misleading ini karena dulu pernah

51:17talk view transition dua setengah tahun yang lalu pas masih belum ngetrend jadi emang itu salah satu

51:24hal yang misleading karena di transition itu eh eh apa sih kodenya kita mau ngedefine gerakannya

51:32gimana itu pakai CSS animation bingung nggak lu Oh iya iya jadi animasi kalau transisi itu kan cuma

51:40kayak from this to that kalau animasi animasi CSS keyframe keyframe kita bisa nentuin presentasenya

51:47sama kayak hal-hal yang di-animate juga bisa banyak, maksudnya propertinya bisa macam-macam

51:54yaitu view transition tuh literally nge-custom-nya ya pakai CSS animation

52:00terus kenapa namanya bukan view animation? Entahlah

52:02tanya mas Bremus

52:05kalau page transition, kalau misalkan kita mau bikin kayak gini berarti

52:12misalkan dari sini ya, ini state awalnya, page 1 misalkan

52:16Pages 2-nya kita bikin gini, terus tiba-tiba dia bisa animasi kayak gitu, bentuknya kayak gini gitu.

52:21Kalau antar page itu view transition level 2, jadi sebetulnya itu kayak ada dua hal yang mirip.

52:28Mungkin maksudnya kalau teknologi di browsernya ya, cara kerjanya itu mirip.

52:33Tapi penggunaannya beda, view transition itu ada level 1 sama level 2.

52:37Nah kalau level 1 itu intinya yang client-side, yang browser only.

52:42Ya kayak gitu tuh, kayak exactly yang di demo ini.

52:46apapun itulah kita klik togel timeline itu kan boxnya muter-muter atau naik turun atau apa

52:52Nah kalau yang level 2 disebutnya apa multi-page animation atau apalah pokoknya view transition yang

52:59multi-page animation eh multi-page transition oh iya multi-page transition itu ngedetect

53:06navigation event jadi cara browser menangkapnya itu kalau kita ngeklik kan sebenarnya ada event

53:13fire ya navigation event kita pindah halaman Nah itu baru dia ngedetect gitu sih Oh oke jadi kalau

53:23kalau yang kayak di halaman ini itu head to head nya sama view transition yang level 1 yang udah

53:30yang udah baseline eh baseline atau belum ya pokoknya udah di support semua sudah-sudah

53:35kalau ngomong-ngomong g-sub jadi inget ini nih ada apa ada sintaks FM episode podcastnya jadi

53:53ada di geser itu ada defrel nya yang namanya Mbak Casey gitu ada di sini ada di sini ada

54:00disini tadi kita udah lihat di sini bukan ke sini di cloud ya Nah mana ya ada punya

54:10video-nya Oh karena ini kan orangnya pernah ya tapi apa obrolannya yang seru itu maksudnya

54:22kalau orang presentasi sendiri sama ditanya-tanya kan lain kan Nah salah satu yang seru itu dia

54:28di Sintax.fr Iya dia sampai bikin video apa video apa explainer itu pakai gsap jadi bukan pakai slide

54:45udah segitunya apa tadi gsap yang ini ya

54:50eh si Evan

54:52cuma emang demo-demonya yang apa punya animation centric banget lah emang kayak

55:01bikin wow banget itu salah satu area yang kurasa insecure karena belum mendalami maksudnya tahu cara kerjanya ya kayak Hello world nya cara bikinnya misalnya di Tentung Pestol harus bikin button ini muter gitu yang nggak usah di Tudung Pestol lah disuruh bikin button ini muter bisa tapi kalau buat orchestrate yang enak dilihat yang wow ada wow efeknya tau kan kayak ya itu kayak demo si ya orang Devrel GSAP itu nah itu belum bisa dan belum pernah mungkin harus mulai belajar

55:33Belum dapat case-nya aja kali Eka.

55:38Belum, karena semua produk yang dibikin di kerjaan,

55:41semua straightforward,

55:42emang gak boleh terlalu banyak flare.

55:46Gak boleh terlalu banyak wow effect.

55:49Mungkin perlu bikin project, belajar sama AI.

55:54Kalau React Transition Group sama atau beda?

55:57Gak tahu, belum pernah.

55:58Apa itu React Transition Group?

56:01Coba googling aja.

56:03ini ada react-page-transition

56:07oh ini page transition sama kayak tadi

56:09itu nge-wrap doang mungkin

56:11react-page-transition

56:12ini beda

56:15ini ada header

56:18ada router

56:19entar routernya apa

56:21itu di atas

56:27yang di atas itu ada boxes

56:28di JSAP di menu di atas

56:31boxes

56:32klik

56:33udah Oh kalau kalau school trigger Hai nah gitu tuh weh

56:41kodenya gimana transition komponen apa ya Emang dikasih dari sana

56:50switch transition on enter bisa per page jika pindah page nge-transition gitu yaitu dia

57:04nangkep cara kerjanya sama dengan sama ya kayaknya nah terus kayak banyak hal lainnya

57:13ya kayak di apa web plan itu kayaknya kan front-end web teknologinya baru bagus dan

57:21maju kan kayak lima tahun ya tiga tahun empat tahun terakhirlah ya kayaknya yang ada fitur-fitur yang

57:26beneran berguna bayangin dong kita baru punya popover sekarang baru punya view transition juga

57:31belum lama ini nah kayak belasan tahun sebelumnya ya semua kan apa memenuhi gap itu ya dengan cara

57:38bikin JavaScript library kan betul jadi ini buat memenuhi yuskes yang diperluin banget

57:46hai oke ya cukup ya kita bahas gsap sekarang kita ke motion ini awalnya namanya framer motion kan

57:55sekarang dia motion doang ya sekarang ganti nama ganti nama ya ini branding Oh ini saya pakai ini

58:03Iya saya pakai

58:05Dan

58:06Ini pengalaman pribadi

58:10Karena saya sangat concern dengan

58:13Berapa jumlah

58:14Javascript yang kepakai

58:16Dan frameworknya

58:17Cukup gede loh

58:19Kalau full size nya

58:22Bukan

58:24Bisa trace checking

58:26Jadi full size nya itu

58:27Kalau semuanya diambil seabrek-abrek

58:30Uncompress itu bisa 500 KB

58:32500 KB

58:35Setengah

58:36Kalau semua

58:36Semuanya

58:37Library nya doang

58:39Kalau gak tree shaking

58:41Jadi

58:42Akhirnya

58:44Karena saya pakai

58:45Kok ini

58:45Apa

58:46Meskipun sudah di tree shaking

58:48Kok ininya saya

58:49Masih gede banget ya

58:50Masih kayak 90 KB

58:52Gitu

58:53Apa masalahnya

58:54Akhirnya saya nemu

58:55Ternyata ada motion

58:57Mini

58:57Jadi

58:58Bisa

58:59Bisa pakai

59:00Yang

59:01yang sub library nya dia masih tetap pakai package-packagenya tetap motion

59:06tapi diimportnya dari yang mini jadi nggak dipanggil yang sangat berabruk

59:10jadi lebih kecil sekarang cuma 40an 50an KB

59:14kayak momen JS tapi ada yang kecil-kecil ya

59:18iya

59:19itu bedanya di browser support ya maksudnya fitur yang dipakai yang dipakai di halaman itu setelah diganti itu kan ada semua kan Ya

59:32Maksudnya tanpa ngorbanin, jadi kayak bukan jadi nggak bisa pakai ini atau nggak bisa pakai itu dibanding yang fitur yang sama sebelumnya,

59:40cuma mungkin browser support kali ya? Ya kayak momen JS juga gitu kan?

59:45Iya, iya. Betul, betul.

59:45Oh ini tadi ada pertanyaan yang kelewat

59:49Kita ngomongin back end, front end ya

59:52Struggle ke back end

59:54Tapi yang dapat spotlightnya front end terus

59:57Terus belajar front end

1:00:00Bentar lagi back end, front end udah

1:00:03Gak relevan semua

1:00:04Kita semua jadi

1:00:05Kita semua jadi

1:00:08Prom engineer

1:00:09Prom engineer

1:00:11Jadi product manager kita

1:00:14cuma nyuruh-nyuruh doang itu ide topik juga tuh kayak gimana karena dunia perkodingan

1:00:21berubah banget kebek and front-end infra kayak itu semua definisi sama lingkupnya

1:00:28bergeser kan semua orang back-end sekarang bisa ya bisa bikin front-end sebaliknya juga

1:00:34terus nanti kita semua digantiin AI

1:00:38kelar

1:00:38terkena kelelih aja kita

1:00:43motion

1:00:46VSAP versus motion

1:00:48itu perbandingannya ada tuh

1:00:52tapi yang bikin perbandingannya

1:00:54motion sih jadi mungkin bias ya

1:00:57ya tapi gak apa-apa buat

1:01:00dilihat

1:01:04adoption licensing performance features features adopsi okelah motion kayaknya duluan ya

1:01:14jstap udah lama tapi motion tuh yang yang eksponensial soalnya di kalau di apa ekosistem

1:01:26JS, emang framer motion

1:01:28itu kayaknya emang naik ya

1:01:29sekian, ya 5 tahun lalu atau

1:01:31berapa lah, segituan

1:01:33gue juga pernah pake, gue pernah pake

1:01:35framer motion, gak pernah pake, belum pernah

1:01:38pake GSAP

1:01:39MIT license

1:01:42ternyata

1:01:42oh mereka MIT license

1:01:45oh

1:01:48oh pantes

1:01:48jadi lebih ramah

1:01:51buat ini ya

1:01:52boleh dipaket ulang

1:01:56boleh package ulang bisa dijual lagi gitu ya asal book bukan asal dan dijual produknya bukan

1:02:04mau ini ya library-nya ya ya ya sama pengaruh pengaruh nggak langsungnya di ekosistem developer

1:02:14lebih banyak yang bikin tutorial dan apa sampel dan lain-lain kan ya sedangkan gsap close source

1:02:22sekarang masih closed source, tadi kata Ivan udah di open

1:02:24udah

1:02:24gak tau, antara boleh pake

1:02:30antara boleh pake atau

1:02:31atau boleh ini

1:02:33free to use, cuma mungkin source nya gak

1:02:35free to use

1:02:36GitHub, coba kita liat GitHub nya ya

1:02:39nah itu udah

1:02:41iya, berarti sudah open kan

1:02:46iya, berarti itu artikelnya

1:02:48kena license nya

1:02:49gak ada license disini

1:02:51Bawa kali di readme

1:02:54Coba

1:02:55Is GSAP open source

1:02:58Wait wait wait

1:02:59GSAP is free

1:03:00To use

1:03:02Iya berarti bukan open source

1:03:05Nah tapi ada

1:03:07Free to use

1:03:09Bukan open source

1:03:10Iya ini bukan open source

1:03:12Iya

1:03:14Free to use

1:03:15Cuman bisa dipakai doang

1:03:19standar no charge license

1:03:22ada ya

1:03:24baru tau

1:03:26lama lagi buka standar

1:03:31license doang

1:03:32ada animasinya mungkin

1:03:35masa ya enggak aku nggak cowok aku ngarang ya ini yang tadi ya kompetitif produk yang nggak boleh bikin yang seperti Webflow

1:03:53kalau mau bikin kompetitornya Webflow, pakailah Framer Motion

1:03:58iya

1:04:00ya kan, pakai GSAP

1:04:02Oke Wah menarik juga ya ini perbandingannya oke performance

1:04:10is more than just smooth animation

1:04:16menurut motion performa mereka lebih baik menurut minimal bundle size tapi menurut Ivan tidak ya

1:04:26karena belum pakai gsap ya belum pakai gsap

1:04:29coba lihat di npm nya coba lihat npm.js

1:04:38buka tab baru aja tab baru npm.js npmjs.com

1:04:43coba lihat gsap dia banyak kan yang utamanya aja

1:04:54aja ya turun-turun sampai size 6,26

1:05:03Hai frame kalau frame kalau motion tadi 500 kilobytes cuma motion ini kalau minifight

1:05:11620 ya masih masih besar juga sih jauh batin lebih lebih rich animation si si j-shape Iya

1:05:24terus dia hardware acceleration

1:05:29apa bedanya nih? oh block javascript

1:05:35oh kalau block javascript yang di block dia tetap bisa jalan

1:05:38karena pakai CSS mungkin

1:05:41coba

1:05:42nggak tau, klik aja

1:05:44ini apa? coba ya

1:05:46to illustrate in the following example the ball on the left is animated with motion

1:05:52and the ball on the right is traditionally animation library press the block JavaScript

1:05:58button to block JS execution for two seconds Oh dibikin sleep ya di set time out Iya Iya

1:06:08terus gimana?

1:06:11kok gak ngaruh?

1:06:13ngaruh, yang ini berhenti itu

1:06:15oh

1:06:16ya itu buttonnya

1:06:19gak dikasih state sih

1:06:20iya

1:06:22jadi katanya

1:06:26di browser

1:06:27yang umum

1:06:29yang major itu

1:06:31pada umumnya

1:06:32bola yang sebelah kiri

1:06:34terus melakukan animasi

1:06:37sedangkan yang disebelahkan walaupun websitenya jadi and respon sih Oh jadi di blog itu maksudnya

1:06:46blog bukan ya kayak wild wild truk itu di semuanya enggak Oh bikin sibuk bikin sibuk

1:06:56dia mendemonstrasikan bahwa cara dia cara motion menganimasi itu enggak jalan di main thread

1:07:04ya betul sih dia pakai request animation frame berarti di level rendering bukan di level JS

1:07:14jadi poinnya threadnya terpisah enggak mengganggu apapun aktivitas main thread

1:07:19ya intinya ini ya

1:07:21oke scroll animation juga lebih bagus

1:07:27startup times

1:07:29oke

1:07:31call start

1:07:34oke

1:07:35ini saya penasaran apakah

1:07:37di motion.dev itu dia

1:07:39akan ada

1:07:42gshp yang menang

1:07:43gak bakal ya semua

1:07:45kayak comparison

1:07:46apalah framework itu next.js

1:07:49atau berat tubuh atau apapun kalau di halaman landing page

1:07:56bercat itu kan pasti mereka yang kenal

1:07:58iya

1:08:00kita bikin yuk framework

1:08:02tapi ini

1:08:03lebih lambat dari semua

1:08:05gane pake

1:08:07ada nanti namanya itu

1:08:10yang apa

1:08:11yang bikinan Indonesia

1:08:13itu yang kayak

1:08:15muliono.js

1:08:18prabugu

1:08:20prabugu

1:08:26dibikin lebih lambat semuanya gitu web framework yang tidak terlalu cepat kalau mau cepat

1:08:35kenapa ini dibuat ya biar lucu aja gitu ya

1:08:45feature-feature

1:08:50tinggal pakai motion.div beres

1:08:55oh sistemnya gitu jadi misalkan dari div tinggal tambahin motion.

1:09:03habis itu tambahin property-nya gitu ya

1:09:05jadi bisa di komponen level ya sedangkan gsap itu harus di javascript level

1:09:13impor-impor macem-macem

1:09:15ada hubnya

1:09:17oke

1:09:19wah menarik

1:09:21lebih ramah

1:09:23developer

1:09:25lebih ramah untuk anak frontend ya

1:09:27berarti ya

1:09:33wow

1:09:35perbandingannya

1:09:37GSAP paling jelek nih

1:09:39hahaha

1:09:41ya anime-anime itu tadi anime.js bilang ya motion yang ini ya motion Oh yang ini yang mini size ya

1:09:59jadi yang yang subnya ini gue pakai sekarang anime dari apa motion yang versi mini itu size cuma dua

1:10:06habis baca ini tuh ada beginian setelah baca beginian baru instruksikan si coding

1:10:15agennya pakai mini aja gitu akhirnya dia roba semua harus masukin di rules itu atau

1:10:21skill status macunda sudah besok lagi ambil yang besar lagi dokumentasi udah di udah dibenerin

1:10:28kita jadi pakainya simpel-simpel Iya kerja aja nulis markdown sama nge-review markdown

1:10:39akhirnya skill bukan prom engineer gua prom monkey

1:10:46skill baca dan tulis bahasa manusia akhirnya kepake lagi syukurlah

1:10:51Iya apa materi kuliah di kampus kepake ya Eka ya enggak sih sih hanya nggak bisa dikasih puisi

1:11:00puisi-puisi yang gitu sastra-sastra Jawa sastra Inggris gitu ya gue kuliahnya sastra Inggris sih

1:11:11Oh berarti gak ada bahas kayak tenggelamnya kapal Van Der Wey kayak gitu-gitu

1:11:16Bahasanya Shakespeare

1:11:22Hamlet gitu

1:11:28Oke

1:11:35Nah tadi siang tadi sore

1:11:40ada yang ngepost siapa disini tadi yang masih Oggy dia ngepost ininya portfolio nya

1:11:46kita lihat portfolio kecil saya varian saat ini GSAP combat style hit tiga kali langsung

1:11:59keluar jurus kultivasi God Emperor tapi keren sih website sih keren sih itu animasinya ya Welcome ada introduction Oh ini Scroll animation ya apa tadi diklik tiga kali dimana klik tiga kalinya ini

1:12:20kecil thing game gitu ya ada Oh iya bener bisa klapausius enggak atau Rosebud infinite

1:12:27manichi gede ini keren banget maksudnya ini temanya tema terminal gitu kan terminal kayak

1:12:35metriks gitu kan warnanya ya kita game deh terus ada itu itu kayak side-side apa sosialnya di

1:12:45kanan tuh Oh ada suaranya juga eh nyalain dong kedengeran ya harus share tab baru bisa kedengeran

1:12:57Mari kita share tab dulu.

1:13:00Hah?

1:13:01Share.

1:13:03Kalau share desktop gak bisa ya?

1:13:06Gak bisa.

1:13:07Chrome tab also

1:13:09enable audio.

1:13:13Oke. Tuh ada suaranya.

1:13:17Kedengeran gak?

1:13:18Enggak. Suara keyboardnya yang kedengeran.

1:13:22Perlu digedein gitu.

1:13:24Gak kedengeran ya?

1:13:27silahkan buka sendiri yogideveloper.com

1:13:35terus gimana itu tadi yang kayak kayak perang itu mau lihat

1:13:41di bagian yang mana

1:13:47coba kita baca lagi ya

1:13:53varian saat ini

1:13:57gshp combat style hit 3x

1:13:59langsung keluar jurus kultivasi

1:14:01yang dimana

1:14:03dulu sempat nyerah ngulik gshp

1:14:07tapi sekarang berkat bantuan AI

1:14:08akhirnya bisa

1:14:10juga

1:14:13imajinasiin file

1:14:14.frag dari top 10 gshp web

1:14:17untuk animasi gara-gara gshp jadi

1:14:1820 git pull request isinya cuman modifikasi

1:14:21gshp tiap hari ganti

1:14:23Oke nah itu berapa token itu habis berapa token tagihan apa extra usage cloudprone nya berapa itu

1:14:33tapi bentar mana yang di tiga kali gue juga mau 123 oh enggak activity belum ngaruh

1:14:42buat ngaruh gimana yang klik sekali finding enggak Oh ini nebel heker kompeten ke bawah

1:14:54kanan ya iya iya enable hacker combat animation eh lucu keluar itunya keluar apa search Odi itu

1:15:04tembak-tembak dia nyatanya pakai tujuh-tujuh

1:15:07gimana cara tembaknya?

1:15:08di kanan

1:15:09spasi mungkin?

1:15:13enggak

1:15:13spasi nggak?

1:15:16kirain kayak jumping dino gamenya chrome

1:15:19pakai space drop

1:15:19enable romance sky drive

1:15:23eh eh eh eh eh lo

1:15:25siapa yang ditembak?

1:15:26oh my trips

1:15:29terus klik 3 kali ini di mana?

1:15:32cuman penasaran sama klik-klik aja ya bagus sih cuma enggak tahu cara pakainya ini di

1:15:42maksudnya ini random move atau ini kayak atau dikontrol nggak ada

1:15:50nggak bisa ya ada skenario itu

1:15:55entah kalau baik-baiknya posisinya sih kayaknya skenario ya kayaknya skenario ya udah dibikin

1:16:02nanti dia akan ke sini terus dia akan nembak gitu ya tapi ini keren banget

1:16:08ya paling itu typo solve kenapa ada S atau mungkin sengaja biar unik Banyak problem banyak problem di solve Ya SD di problem set Jadi problemnya satu tapi menyelesaikannya banyak

1:16:31Ya gak bisa.

1:16:32Menyelesaikan berkali-kali.

1:16:36Asalnya dipindah tuh dari belakangnya solve ke problem.

1:16:41Keren banget ini mah.

1:16:44Keren, keren. Ini bikinnya berapa lama ini?

1:16:46Oh tadi pake AI ya?

1:16:47ya itu tadi kan dia bilang tapi udah sekian hari berhari-hari saya mau cari combo nya nih nggak

1:16:55ketemu ya Nah itu paling kritiknya kalau lagi apa yang yang shooter mode nya nyala itu sih

1:17:03teksnya dibikin nggak bisa di-select nggak bisa select aja Iya kalau kegiatan ya Iya

1:17:10nggak ganggu pas ngeklik-ngeklik itu malah select text pakai pointer events non

1:17:17Hai pointer events non-word was all Hai nih ngerjain begini nah harus passion ini namanya

1:17:25passion dan vision wuih sabar dengan senang ini Desainnya bagus banget sumpah serius ini bikin

1:17:37sendiri apa ada template atau gimana kayak nggak percaya gitu atau minta minta problem

1:17:43kalau bagus kalau bagus kalau minta pro

1:17:55bentar masih aja nggak nih kita udah ada mungkin lagi AFK lagi nonton bola kali

1:18:11katanya lagi menang lawan Jepang yang mana emang ada Indonesia jalan Jepang

1:18:19lagi nggak ada International break kali Asian Cup Oh kalah enggak enggak enggak enggak tahu

1:18:32kapan enggak ada ya ada Indonesia lawan Jepang 53 futsal futsal AFJ futsal futsal

1:18:43Oh nggak ngikutin Oh ya nih Captain Jepang masih terpukul di sini kirkan

1:18:51tim nasional Indonesia yg loh bukannya Jepang menang Indonesia kalah katanya Indonesia kalah

1:19:01kita menang futsal futsal menang menang kalah 35 kita menang Oh oke oke cukup ya

1:19:14oke minggu depan bahas apa oke udah ini belum udah puasa 17 belum belum belum

1:19:3118 kalau nggak salah setelah tiba-tiba ngedo Oh iya Eh kan belum ditentukan harus lihat

1:19:41hilang salah tadi kalau nggak benar kalau nggak bener sama ya mau jawab ya itu kayak kayak wild

1:19:49Oke yang ini kita close dulu ya ya ya biar eh udah di ini belum di repopulate

1:20:04sudah sudah otomatis coba aja dia jam 7 dia sudah repopulate

1:20:11Oh iya ya ya udahlah kalau ke pilih lagi ya tinggal di roll tinggal Spin lagi kerennya

1:20:19Mbak Spin tuh sama aja sama aja cuma habis lihat tadi yang yang ini terus ke sini nanti

1:20:32kita kita kita suruh aja wainya ngeliat situsnya Yogi terus kita suruh tiro udah oh iya bener bisa ini sama pick random sama spin the wheel

1:20:46enggak beda kan

1:20:47storybook

1:20:49spin the wheel ada

1:20:51kalau spin the wheel ada ini

1:20:53udah ya

1:20:54kalau pick random langsung

1:20:58eh bentar, pernah gak ya?

1:21:00pernah, episode 136

1:21:02Udah ya? Berarti di-close dulu ya? Ini udah close. Berarti populetnya semua ya? Tidak close ya?

1:21:14Oke, next. Oh nggak bisa ya? Oh bisa.

1:21:21Dia challenge sendiri tuh.

1:21:22Stack dan tools sehari-hari.

1:21:26Boleh, teh.

1:21:27Mau.

1:21:29ya paling opencode cloud code kodex di ai-ai film supercode ghost ghosty ghosty timaks ya

1:21:47Oh ya boleh ya kayaknya seru ya bahas-bahas ya gua doang yang enggak canggih stek ya udah

1:21:54apa sih? VS Code, bukan soal canggih-canggihan. Ini kan belajar satu sama lain.

1:22:02Cuma maksudnya apa, paling nggak menarik, maksudnya paling predictable.

1:22:08Tapi ya nggak apa-apa.

1:22:11Zaman sekarang mah pamernya bukan itu, pamernya token berapa.

1:22:17Pamer CloudMax.

1:22:20Pamer CloudMax.

1:22:22Kalau CloudMax itu nggak ada barang mingguan ya? Nggak ada yang penuh rata kanan?

1:22:27Ada.

1:22:29CloudMax ada. Ada weekly limit sama.

1:22:31Ada. Tetap ada, cuma nggak segampang penuh.

1:22:38Siapa bilang? Kalau sudah pakai agent multi-team, cepat juga penuhnya nih.

1:22:45Iya, cuma mesti dibanding kalau pro.

1:22:49Iya.

1:22:50kalau multi-agent baru apa baru main agennya baru begitu bro abis menurut saya kalau pakai

1:22:59Pro hangga gak cocok untuk coding agent jadi seperti kayak pakai pakai cpt aja buat nge-chat

1:23:07soal apa namanya exploring sama-sama chatting chatting aja seperti kayak pakai cpt Gemini web

1:23:18khusus hanya untuk nanya-nanya aja baru 10 dollar gak gak itu ya nggak bisa ngapa-ngapain lagi

1:23:26kalau pakai opus ya hampir-hampir bisa ya bis opus lu juga kurangnya

1:23:33kurang emang ada $10 yang antropis ya 20 20 20 pakai code kalau cuma kalau berkali-kali kita

1:23:46bikin akun kloningan sampai banyak konon katanya di band sekarang ya mereka bisa tahu ya ya mungkin

1:23:55deteksi IP IP atau GitHub sama session-session Hai sama session-sessionnya satu di folder

1:24:05Kalaupun kita ganti

1:24:06Oh iya di laptopnya ya

1:24:09Ketahuan

1:24:11Ini ya berarti deal ya

1:24:16Deal

1:24:16Veto ya

1:24:18Alright kalau gitu cukup

1:24:22Cukup

1:24:23Terima kasih buat teman-teman

1:24:26Semuanya yang sudah meramaikan

1:24:28Kita ketemu lagi minggu depan

1:24:30Selamat malam

1:24:31Bye bye

1:24:35melihat tayangan dan halaman ini?

1:24:37Atau mungkin telah kesekian kali melihat

1:24:39untuk membandingkan kembali dengan lainnya?

1:24:41Jika Anda mencari tahu mengenai layanan web hosting terbaik,

1:24:45kami pastikan Anda berada di tempat yang tepat.

1:24:47Dengan Domain Asia, dapatkan pengalaman

1:24:50menggunakan layanan web hosting yang lebih baik.

1:24:52Dengan SSD berperforma tinggi,

1:24:55dalam infrastruktur cloud yang telah dioptimalkan untuk kebutuhan personal maupun bisnis.

1:25:00Teknologi ini memungkinkan Anda memperoleh layanan yang lebih stabil serta proteksi dari korupsi data.

1:25:06Hosting Domain Asia juga telah mendukung Node.js, Python, Ruby, Go, PHP, Java, serta Binary Linux.

1:25:14Lebih dari 200 ribu pelanggan telah mempercayakan layanan hosting di Domain Asia.

1:25:18Kepercayaan yang kami jaga dengan garansi uptime 99,9% serta garansi uang kembali 100%

1:25:25Buat website Anda lebih mendunia, segera beralih ke web hosting Domain Asia