EP 88

Ngobrolin Layout Email - Ngobrolin WEB

Bagikan:

Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.

Ringkasan Episode

Bantu Koreksi

Episode Ngobrolin WEB ini membahas tantangan dan kompleksitas dalam membuat email template HTML. Topik utama meliputi perbedaan antara HTML untuk web dan HTML untuk email, keterbatasan CSS di berbagai email client, serta berbagai tools dan framework yang dapat membantu developer dalam membuat email template yang responsif dan konsisten di berbagai platform.

Poin-poin Utama

  • Email dapat dikategorikan menjadi dua jenis: email transaksional (lupa password, registrasi, invoice) yang dikirim sekali per transaksi, dan email marketing/newsletter yang dikirim secara berkala dengan personalisasi konten.
  • HTML untuk email memiliki keterbatasan signifikan dibandingkan HTML web: CSS harus inline, tidak bisa menggunakan external stylesheet atau script tags, media query sering di-strip, dan layout harus menggunakan table bukan flexbox atau grid.
  • Berbagai email client (Gmail, Outlook, Apple Mail, Thunderbird) memiliki engine rendering yang berbeda-beda dengan dukungan CSS yang tidak konsisten, membuat pengujian lintas platform menjadi sangat penting namun sulit.
  • Foundation for Emails (sebelumnya Ink), MJML, dan React Email adalah beberapa framework yang membantu menyederhanakan pembuatan email template dengan mengkompile syntax modern ke HTML table-based yang compatible.
  • Tantangan lain termasuk dukungan dark mode yang terbatas, gambar yang terblokir oleh beberapa client untuk keamanan, dan kebutuhan link unsubscribe yang wajib untuk menghindari flagging sebagai spam.
  • Tools untuk testing email seperti Litmus, Mailtrap, dan Put menyediakan cara untuk mempreview email di berbagai client, namun seringkali berbayar karena kompleksitas emulasi berbagai email client.
  • VML (Vector Markup Language) kadang digunakan untuk conditional rendering khusus di Outlook, terutama untuk background images, meskipun ini adalah teknologi yang sudah usang dan sulit dikelola.
Transkrip Bantu Koreksi

0:00selamat malam hai hai hai ilang lagi eh ngala lagi Halo halo halo selamat malam semua apa kabar

0:27Selamat berjumpa lagi bersama

0:29Masih bersama kita bertiga ada Ivan

0:31Ada Eka dan ada saya Riza

0:33Seperti biasa kita ketemu

0:35Di selasa malam karena selasa malam

0:37Waktunya

0:38Ngobrolin web

0:40Harusnya dimulai dengan Senin harga naik

0:45Harga naik

0:46Ngobrolin web

0:48Seperti biasa masih dengan kegaringan kita

0:53Iya harap maklum

0:56ini memang identitas saya ini sekarang lagi pre musim ini kan Ayo extended kan sudah mau padang

1:06langgung kan Iya udah bahas apa Gua penasaran loh kalian tuh bahasa apa Oh iya batal semuanya

1:16betul saya tidak ada yang pergi yang Bali nggak jadi Bali nggak jadi Surabaya nggak jadi ya sudah

1:25deh habis faktor yang sama juga yang kemarin kalau Surabaya nggak dikasih izin nggak dikasih

1:33karena karena sudah deket mau ke ayo yang China kan ya konek konek konek Kriston api20 Selamat

1:43pagi ini dari daerah mana ya ini Indonesia mana langsung dari Mountain View ini Asia mungkin lagi

1:57tidak di Indonesia Selamat pagi juga lah ya Selamat pagi eh kalau Eka berarti ngisi di Jakarta Jakarta

2:07Jakarta Surabaya Depok Jakarta Surabaya Depok ketemuan kalian kan kapan depok kapan 13 Juli

2:20gua-gua datang eh kalau sempet datang aja deh jadi penonton asik jadi itu aja itu bawa-bawa

2:30bawa apa bawa kunci-kunci sampai sambil nyanyi depoknya lumayan ramai tahun ini ya maksudnya

2:43banyak kalau kita lihat apa GDE kumpulan GDE nya Google developer expert nya nah sebagai

2:50narasumbernya di sana lumayan banyak dibandingkan tahun-tahun yang lalu kalau Bogor sudah pasti

2:57ada pasanti kegali

3:00ada Imre

3:01ada siapa lagi banyak lah

3:03sudah harus pakai

3:04ini tuh surat kepolisian itu

Lihat transkrip lengkap

3:07itu kan

3:09keramaian kan izin keramaian

3:12kalau ramai ya

3:14iya

3:15bisa berapa ya target mereka kan

3:171500 orang kan ya

3:19wow mantap

3:20bawa bintang tamu

3:24nah teman-teman yang nonton ini

3:27domisilinya dimana? kita pengen tau

3:29siapa tau bisa ketemu di

3:31IOS Tended yang terdekat

3:34terdekat di kota

3:35karena

3:37kali ini topik kali ini kita mau

3:39bahas bagaimana kita bisa

3:41mengirim email

3:44buat kalian

3:44lewat topik kita

3:47email template

3:48ya kalau daftar

3:52Google IOS Tended biasanya

3:53dapat email

3:54ada kontennya Halo nama bla bla bla personalisasi personalisasi kan betul karena enggak mungkin kan

4:15kita ngirimin ke seribuan orang nulis namanya satu persatu capek ada teknologi yang namanya

4:23apa namanya itu kalau di apa Microsoft Word gitu-gitu str-replace kalau di PHP

4:30ya ada mesin mesinnya jadi kita bisa bikin list daftar terus si namanya itu

4:43akan diganti

4:45per dokumen itu diganti

4:47namanya per list itu

4:49kadang kalau informasi

4:51kalau ada

4:53curly bracket name

4:55customer name, kayak lupa diganti

4:57gitu di template nya

4:58iya kadang-kadang lupa

5:01Jakarta nanti ketemu Eka ya

5:03Titip salam

5:06Kalian titip salam dari saya buat Eka

5:09Nanti kalian sampaikan

5:10Setiap minggu ketemu online

5:17Tapi ketemu offline-nya

5:19Setahun dua kali

5:21Atau setahun tiga kali ya

5:23Barusan ketemu Eka

5:25Di Jogja

5:27Oh ketemu

5:28Iya

5:29itu kok ketemu terus kita makan ayam terus kok kaget sama harganya kenapa murah harga

5:39joknya makan berdua berapa ya warintia enggak sampai 40.000 ya makan berdua ya itu udah mahal

5:48jaman-jaman dulu lebih murah lagi itu namanya inflasi tifanya tinggal di Jogja ya ngapain

5:56jauh ya dulu-dulu kesana makan 5000 juga masih dapat zaman tahun berapa ya sebutnya ini 1.500

6:07Sekarang udah Rp2.000 sekarang.

6:11Inflasi ganas.

6:14Ganas ya.

6:14Nah, ngomongin email, mungkin teman-teman ada yang punya pengalaman,

6:20dapat tugas untuk ngirimin email ke customer kah?

6:26Mungkin ngirimin email ke mana lagi ya?

6:29Atau pada saat registrasi, aktifasi lewat email.

6:35ya kan atau forget password juga lewat email email itu bisa dibagi beberapa beberapa kategori

6:46kali ya email transaksional dan non transaksional atau newsletter marketing email marketing email

6:58Kalau transaksional email itu

7:01Sekali aja

7:03Maksudnya login

7:05Lupa password, registrasi

7:07Terus payment

7:09Invoice lah

7:11Invoice, kirim game

7:12Reminder

7:14Sesuatu yang sifatnya

7:21Transaksi

7:23Bisa terjadi hanya sekali saja

7:25Untuk satu urusan

7:27sedangkan kalau newsletter kita biasanya terima bisa berkala dan itu email marketing itu panjang

7:40panjang ceritanya itu bisa bisa kayak seperti daily daily atau weekly digest bahasanya gitu

7:47kalau kalau di kita kita kalian subscribe apa tuh di sebuah konten seperti kalau kita

7:55itu dimana biasanya kalau untuk nulis banyak medium medium medium nah medium itu kan biasanya

8:00ngirim weekly digest kan misalnya berdasarkan topik yang kita suka nanti dikirimkan ini top

8:065 artikel sesuai dengan personalisasi kita terus dikirimkan dengan template yang sesuai branding

8:17terus kemudian mudah dibaca lebih menarik karena judulnya bisa besar terus kemudian ada image-nya

8:25ada title-nya, warnanya sesuai dengan branding,

8:29itu kontennya itu sebenarnya sudah ada, bisa otomatis di otomatisasi.

8:38Jadi, itulah yang disebut namanya templating.

8:42Nah, soalnya email itu sendiri isinya kan bisa dua format ya,

8:47bisa plain text, ya sesuai namanya kalau plain text yaudah beneran literally text doang.

8:53Nah bisa juga HTML tapi ini sebenarnya agak menipu ya

8:58Nah kalau tadi balik ke yang dibahas Ivan kayak apa transaksional email dengan template

9:04Itu ya pada umumnya biasanya templatenya pakai yang HTML

9:09Karena kalau plain text ya nggak bisa kita nggak bisa kasih logo Bisa sebenarnya bisa kalau misalnya cuma mau kirim top 5 bla bla bla Tapi kita nggak bisa masukin logo nggak bisa masukin image thumbnail nggak bisa teks yang ada linknya

9:25Ya, kalau ngirim URL bisa ya, HTTP, bla bla bla, tapi kan jadi panjang.

9:30Nah, nggak bisa kirim teks. Jadi otomatis hampir selalu kalau transaksional email, ya pakai format yang HTML.

9:37Tapi yang nyebelinnya ini kan kita mikir kalau kita bisa bikin, kita selama ini bikin website pakai HTML atau apapun yang compile ke HTML, ya berarti gampang lah.

9:49Tanda kutip gampang kita bisa bikin template HTML email dengan gampang.

9:54Tapi tunggu dulu, tidak semudah itu Merguso.

9:58Bakal banyak pantangannya, nanti ya kita bahas satu persatu aja.

10:02Iya agak unik kenapa karena kita mengira awalnya menulis HTML di email sama di HTML biasa itu sama

10:11Jangan-jangan mereka pakai engine yang sama ternyata enggak ya

10:16Bahkan

10:18Enggak bisa meluat CSS kalau gak salah ya

10:22Iya bahkan kayak Firefox kan mereka punya Thunderbird kan

10:27Di satu perusahaan yang sama mengeluarkan dua produk gitu kan.

10:33Walaupun jenis produknya berbeda tapi sama-sama masih sama-sama klien kan.

10:38Yang satu email klien, yang satu HTML, HTTP klien kan.

10:43Sama-sama render HTML.

10:45Sama-sama render HTML.

10:46Tapi ternyata engine-nya mungkin berbeda.

10:52engine untuk mengumpil HTML menjadi halaman atau menjadi email.

10:58Begitu juga dengan Google.

10:59Google punya Google Chrome dan Google juga punya Gmail.

11:03Itu juga berbeda.

11:05Mungkin ada faktor protokolnya mungkin ya.

11:07Perlakuan protokolnya berbeda kali ya.

11:09Atau gimana ya?

11:10Kenapa bisa berbeda?

11:12Enggak tahu.

11:13Atau jangan-jangan email duluan?

11:15Email duluan.

11:16Karena email duluan kan ya.

11:17Seperti mereka kontainer yang tersendiri gitu ya.

11:20seperti outlook dan misalnya kita buat email template itu di let's say

11:30misalnya kalau kita ngebangun email template kan pasti pakainya browsernya untuk ngelihat hasilnya

11:35ya kan dikurusin misalnya email template itu nggak bisa gede-gede amat

11:41ya apalagi kalau mau bikin fluid-fluid itu susah itu setengah mati

11:44responsifnya setengah mati ya

11:46responsif nggak bisa gitu

11:47kalau misalnya karena nggak bisa grid kalau kalian misalnya ingin grid flex itu udah udah pasti nggak

11:57bisa tuh di internet client tuh jadi misalnya dia table baru nggak bisa ya Iya ya ada tempatnya

12:04table jadi mungkin ada yang bisa ada enggak nah bisa nggak bisanya juga selain nggak terstandar

12:14kurang terdokumentasi dengan baik jadi mungkin ya ada aja klien atau apalah aplikasi email yang bisa

12:22tapi kan karena sulit banget mastiin satu-satu ya udah anggap aja nggak bisa kita akhirnya bikin

12:29pakai table nah betewe sumin coba tuh artikelnya tadi yang tentang HTML atas dikit Zoom ke atas

12:39Hai sulungin ibu tak pas sedikit Nah itu penjelasan ke apa masalah-masalah umum yang di alamin

12:47Google disable most HTML feature from the popular Gmail service that would mean that email marketers

13:00would often have to design the HTML email to either get around some of Gmail blogs or just

13:08to plant x-mail kalau plant x-mail aman ya apalagi yang transaksional tadi kebanyakan

13:14enggak terlalu bermasalah dengan HTML responsif dan lain-lain biasanya teks aja kan klik here

13:23to recover your password untuk gantung ada yang pakai transaksional juga pakai template juga ada

13:31template juga ya tapi kan kalau plaintext straightforward lah maksudnya nggak bisa

13:36dipikir dan tapi itu ya bisa dijadiin opsi kan bisa kita emang cuma mau bikin sistem sign up

13:42buat ngirim OTP gitu terus beneran gak ada resource buat oleh open aneh-aneh ya udah plaintext dulu

13:48aja nah cuma balik ke HTML nah ini Harus di inline CSS CSS harus inline

14:01Itu harus.

14:02Karena dia tidak bisa membaca external file.

14:05Pakai link atau pakai script src itu gak bisa ya.

14:09Jadi harus inline.

14:11Lalu gak bisa ini juga konten media query.

14:16Gak bisa.

14:16Media query gak bisa.

14:17Harus pakai table.

14:19kembali kembali kalau enggak salah ya ini kok mungkin teman-teman bisa bisa benerin kalau enggak

14:26salah dia hanya mensupport CSS 2.1 jadi nggak bisa CSS 3 mungkin saya salah tapi bisa coba cari nanti

14:34saya ingatnya begitu waktu zaman saya buat email template jadi fokus hanya untuk kalau kalau web

14:45ada web standar ya, maksudnya fitur baru

14:48juga relatif terdokumentasi

14:50apalagi sekarang

14:51ada kayak introp, ada kayak

14:54WPT, itu web platform

14:56test, nah masalahnya

14:58kalau si email ini, si HTML

14:59untuk email ini, ya kan

15:01lebih sulit di tracking, misalnya kayak

15:03ya kayak Ivan bilang tadi

15:05terakhir bikin

15:07masih CSS 2.1

15:09tapi ternyata sekarang misalnya

15:11ada yang udah bisa CSS 3

15:13ada yang bisa, ada yang enggak

15:15Nah itu

15:16Bergantung email kliennya

15:18Belum ada konsorsiumnya ya

15:21Kayak web ya

15:22Kalau web kan komunitasnya juga besar ya

15:25Relatif gampang lah

15:27Kalau misalnya mau cari tahu

15:28Kalau email gimana

15:30Belum ada konsorsiumnya ya

15:33Karena tekniknya

15:36Ada di bagian dari web kan sebenarnya

15:39Enggak sih

15:40Email ya email

15:42tapi enggak enggak terkunci ke masa enggak enggak ngikut enggak kunci sama konsternya

15:53jadi itu web tapi bukan bisa dibuat tapi bukan web dalam hal menggunakan teknologi

16:01tapi ya enggak beneran terikat kayak kelompok-kelompok komunitas dan ekosistem

16:10contohnya lihat aja kayak Microsoft dengan outlooknya Firefox dengan Thunderbird terus

16:21kemudian masih ada saya email Yahoo ya Huwira email Yes kudu masih itu yang dirisi penelisi

16:32itu order squirrel segala macam tuh masih ada tuh email client begitu dan selain email beda-beda

16:40gimana biar aman HTML nya nah ini kita ya Iya memang bagi-bagi pengalaman aja ya jadi saat

16:51saya dulu bangun email template it um dari designer itu disoalnya cukup pelihatan yang

16:58Tapi saya bilang ini gimana bikinnya

17:01Karena misalnya

17:02Dia bikin

17:04Apa namanya

17:06Design

17:08Ada header ada footer

17:10Terus disampingnya itu

17:12Ada kayak garis gitu ya

17:14Garis yang kayak

17:16Dia supaya jadi ngekotakin

17:18Jadi imagine aja dia kayak

17:21Ini deh

17:22Tempatnya kayak gini nih

17:24Ya kan ada headernya

17:26Ada bawahnya

17:28terus disininya ada ada garisnya nih nah konten bisa kembang kempis ya enggak kalau misalnya

17:38kontennya nambah ke bawah tentu garis ini kan harus di repeat dipanjangin di repeat ya repeat

17:46kalau misalnya itu ya image dibikin gradient lah gradient contohnya ya kan nggak bisa dibikin

17:55order nah itulah salah satu dulu Oh nggak bisa Oh ini lebih tepatnya begini nah nah enggak

18:03wajah ini kindle header puter nih konten ya kan Nah kalau misalnya kontennya nambah tentu garis

18:12hitam ini anggap aja dari sistem ini gradient ya enggak aja garis hitam ini gradient atau image

18:17ini kan kalau konten nambah sampai bawah si garis ini kan harus di repeat

18:23nah itu susah di email template karena seluruhnya yang di dalam sini itu

18:34ini table 1, table 2, nanti ini dibikin table dengan sale, dibikin banyak,

18:45terus call span, ini satu span, ini satu span, nanti tengahnya sendiri.

18:51Ya seperti itulah, jadi ribet.

18:57Oh ada satu lagi, ini agak out of topic ya, ada satu lagi selain email yang cukup tricky,

19:04zaman dulu reporting crystal report Iya kalau dulu kan PDF tidak semudah sekarang ya kalau

19:13sekarang semua PDF kayaknya udah open standard dalam tanda kutip ya jadi enggak sih dulu kan

19:19susah sekali ya enggak cuman seperti udah jadi apa ya udah jadi de facto format kalau dulu ada

19:26ada ada namanya kristal report kristal report Nah itu yang paling paling ini ya paling bagus tapi

19:33berbayar ya kan berbayar Iya berbayar kalau yang gratis-gratis pakai PDF itu setengah mati itu harus

19:39apa posisinya harus manual itu juga lumayan triki email juga termasuk yang lumayan triki untungnya

19:48sekarang ada beberapa tools yang bisa bantu kita mungkin kita moddingnya itu udah ala-ala modern

19:55tapi dia otomatis convert kayak misalkan jadikan dari CSS file jadi inline

20:01formatnya mungkin dari flex atau grid jadi table gitu ya mungkin ya

20:07kita akan lihat sama-sama teman-teman juga kalau punya tools seperti ini

20:13Alon Inderdad pernah punya pernah coba pakai service email

20:17mereka accept styling email pakai XML dan works well

20:22nah itu boleh di share mungkin kalau tahu namanya ya

20:25kita juga butuh soalnya butuh pengetahuan

20:27salah satu contohnya sih

20:30WML

20:31pasti kalau pernah bikin

20:33template yang kayak built in

20:35di service kayak send grid atau apa

20:38kemungkinan pernah lihat

20:39format itu, coba buka deh yang di chat

20:41yang di

20:44private chat

20:44private chat

20:46agak ajaib

20:50juga sih ini, dan ini artikel

20:52lama, sebenarnya ini artikel lama

20:54cuma emang sampai sekarang pun masih sering dipakai zoom in terus apa lihat atasnya penjelasannya

21:06Oh iya masih bisa detek ini juga ya browser ya Nah ini tuh dulu dipakai buat Outlook nah nggak

21:19sekarang tuh kadang masih lihat format yang kayak gini apakah cuma buat outlook aja atau buat agent

21:25lain atau kayak gimana nggak tahu cuma yang jelas formatnya itu jadi Vector Markup Language

21:33istilahnya kayak XML sebenarnya sih super baru denger ini khusus untuk email doang

21:42Oh coba aja susu alok lebih tepatnya khusus untuk outlook cuma koman ada email aplikasi

21:51lainnya entah apalah yang menggunakan ini pakai pattern kayak gini juga ya mungkin karena dulu

21:56kan Iya 10 tahun lalu aku gitu kan kayak merajai email corporate perkantoran Iya

22:03sambil di zoom in ini kurangnya eh salah salah jumin ini cukup terus ada teksnya itu

22:16itu tuh nggak ngerti sih kurang kurang tahu juga belum pernah testing yang beneran per

22:25per aplikasi ya per per pakai output versi sekian gimana dibandingin satu persatu gitu nggak pernah

22:34cuma kalau ya itu bisa buat ekondisional rendering gitu ya V-shaped ini kayak kayak

22:46SPG bukan ya bentuknya kayak SPG ya ada shape ada feel ada rectangular Nah kalau yang shape

22:57itu jujur baru pernah lihat di sini sih cuma kalau yang per tabel-tabel sama conditionalnya

23:03lumayan sering maksudnya beberapa kali pernah lihat ini lumayan sering kelihatan muncul ya Kayaknya kondisionalnya ini deh apa namanya jadi standar juga di beberapa tempat banyak ini begini

23:18Bisa misalnya Outlook berapa gitu yang bisa support itu bisa begitu.

23:24Itu MSA tuh Microsoft Outlook.

23:26Jadi bukan internet explorer ya.

23:29Beda ya itunya apa engine-nya beda.

23:34nah punya engine sendiri deh kayaknya ya iseng banget sih bikin engine pengaruhnya ke yang tadi

23:44kan soal background kan agak sulit apa CSS background gak bisa dipakai di banyak layout

23:53engine email nah bisa diakalin pakai CVML itu coba buka artikel bawahnya di practice oh snap

24:00sumin lagi biasa ini udah gede kurang ya lagi deh lagi segini nah ya

24:12kalau lainnya sih ya udah ya

24:18tapi sering muncul Iya karena udah bisa bisa harus di-enable dulu kan Iya email-email client

24:36itu kadang suka ngeblok ngeblok blog image karena external image bisa dijadiin untuk tracking bisa

24:45kelihatan tuh email kita dibuka atau tidak.

24:47Ya kayak pixel gitu kan dulu.

24:48Satu pixel gitu ya.

24:50Kan kirim data ke server.

24:55Nah, anyway, kalau ini sih kayak buat kodenya aja.

24:59Kode HTML, XML.

25:03Ini ya.

25:04Oh, boleh tambahin ini.

25:10Ini di HTML biasa nggak bisa ya?

25:12belum pernah coba juga sih dikasih fallback kan sebenarnya style-style atribut hal ini

25:21ya sih fallback ke background Oh ini fallback nya kalau dia bisa nampilin dia pakai yang ini

25:30tapi sama sini ya Oke paling jadi nyimpan nyimpan gitu sih Mas yang mana duluan pakai

25:39itu V image intinya sih yang menarik yang beda kan si V image itu kan

25:52ya ya ya nah itu yang ini ya

25:59cuman sekilas pernah di template-template dari bawaan sendirian ini pernah melihat

26:10pattern seperti ini nah penjelasannya di bawah sih coba sambil Scroll kebawah itu

26:16itu yang standar ya itu standar blablabla ya lanjut nah ini nih yang yang menarik

26:26PML using know that we have our standard background working for our non-outlook email

26:33yang female khusus Outlook ya dan javascript gak bisa jalan kok enggak salah ya di HTML email ya

26:43Oh iya jelas kalau itu bisa oke oke jadi kalau yang pakai ini beneran beneran ngelatih skill

26:59HTML dan CSS dan kesabaran ini justru kalau HTML CSS itu kan standarize ya Nah ini kan

27:08kalau email itu masalahnya adalah dia suka-suka dia mau ngikutin seluruh standar HTML dan CSS

27:15atau pick and choose kayak cuma cherry pick lah yang ini bisa, yang itu enggak,

27:20karena dia enggak mau, dia punya cara sendiri yang nyambul dihitung.

27:25Nah masalahnya kalau di email itu jarang ada praktek kalau misalkan nih,

27:30kalau di browser kan kalau misalkan kita buka dan kita tidak rekomendasikan,

27:36tolong buka ini di browser ini gitu kan.

27:38Kalau di email kan nggak pernah kan? Tolong buka di Outlook.

27:42Oh bentar Enggak Lebih tepatnya kalau misalnya kalau Anda tidak melihat email ini dengan tepat klik klik here nanti ada halaman Kita render web page Jadi HTML

27:56Playback-nya itu.

27:58Iya.

28:02Iya, ini pengalaman-pengalaman ya.

28:05Udah desain cantik-cantik, settingan di Thunderbird gak di-allow image-nya.

28:08Berantakan lah itu ya.

28:11Cuma itu soal komunikasi juga sih ya.

28:13devqe staging gambar email keluar pasti production gambar nggak keluar apa sih

28:19saya I feel you I feel you cuma itu mungkin agak rumit ya kalau e-commerce kan masa yang

28:27ngaruh gitu penting apa gambar produknya harus ada kita ngirim produk produk ini ya produk

28:34contohnya personalisasi ya produk yang kira-kira disukai berdasarkan hasil-hasil searching atau

28:45hasil browsing terkirimkan promosi gitu kalau enggak ada gambarnya kan jadi ini ya jadi kurang

28:54menarik rasa menarik itu tanda tanya atau broken image gitu kan enak kurang menarik dan agak

29:02sulit karena analitik sih juga ya kecuali pakai bisa cuma terbatas dan bisa kalau sekarang kalau

29:09orang perlu analytics pakai layanan ya kayak Mel simsen grid dan lain-lain dari situ kan kita bisa

29:15deteksi seberapa banyak dari user base kita yang pakai upload kalau banyak ya udah suruh dan juga

29:24nggak bisa ini ya nggak bisa dark mode like mode itu susah ya pokoknya nggak bisa aneh-aneh Pak

29:31karena kayak gini misalnya email email kliennya si user contohnya gue di handphone pakainya dark

29:38mode kalau buka Gmail ya dia backgroundnya dark putih oh dark ya ah backgroundnya tulisannya

29:47putih kan tapi dari dari Gmail nya udah ini kok otomatis udah bisa dia dia yang

29:54nge-convert Oh enggak cuma gue pernah kena kasus kayak gitu juga mirip jadi sebetulnya sebisa

30:01mungkin kalau buat ini di luar kasus khusus yang desainnya harus indah banget sih ya kalau yang

30:09practical fungsional sebisa mungkin background dan teks color itu kayak pakai default aja karena ya

30:17itu yang tadi bilang Ivan otomatis di switch tapi misalnya misalnya gini deh kita punya kayak

30:23subtitle atau subcaption atau apa terus kita warnain abu-abu dengan asumsi abu-abu tua ya

30:31abu-abu yang agak strong menyesuksi abu-abu emang monyet abu-abu ya dengan asumsi bukannya

30:39di light mode nah ternyata pasti bukan di dark mode nah itu nggak otomatis ke convert kalau kita

30:45pakai inline style atribut style CSS jadi misalnya span style sama dengan color titik 2 hashtag 333

30:54ini kurang tapi kalau waktu itu sih ngakalinnya buat caption yang agak soft opacity itu aman

31:12Oh mau lebih misalnya kalau di-like mode kan judul utamanya pakai item nih itu karena kalau

31:22bukan kita yang mendefinisikan warna hitam tapi ya udah dari semuanya backgroundnya putih tekst

31:28hitam bawahnya tulisan yang captionnya subtitlenya jadi agak abu-abu sebenarnya

31:34itu bukan abu-abu tapi opacity 0,8 Nah kalau dibuka di darknet ya udah aman teksnya putih

31:41backgroundnya hitam, textnya putih, captionnya abu-abu muda.

31:45Nah, cuma kan kasusnya kalau kebetulan yang desainnya harus estetik banget,

31:51itunya ada brand color lah, misalnya backgroundnya biru, textnya putih.

31:56Nah, kalau kayak gitu, justru kalau warna-warni sekalian gitu boleh sih,

32:00tapi baik background sama text color, dua-duanya harus di-define warnanya

32:05biar nggak ke flip kalau lagi di dark mode.

32:11Nah ini di sini kita coba berbagi pengalaman teman-teman Ivan atau Eka atau saya

32:22yang pernah pakai tools untuk mendesain email terutama email transaction ya kalau kalau email saya sering termarketing itu biasanya ada udah disediakan editornya misalkan teman pakai mailchimp

32:37itu ada tinggal drag and drop bukan tinggal ya bisa drag and drop pilih templatenya mau ada

32:44header ada tiga kolom footer atau mau yang satu kolom dua kolom dan lain-lain itu bisa pilih

32:50nanti yang mau di insert apanya nanti greetingsnya apa halo bla bla bla gitu kan halo nama first name last name gitu

32:59itu bisa dari editornya nah tapi kalau yang programming kita ngirim email kayak lupa password

33:06ya kalau sekarang mungkin service untuk autentikasi udah banyak ya itu udah diurus sama out zero kah clerk kah

33:15atau Firebase dan lain-lain.

33:17Kalau dulu kan kita harus bikin sendiri email transaksi,

33:20juga sendiri.

33:21Atau email onboarding deh.

33:23Begitu ada user registrasi, dia masuk,

33:26terus tiba-tiba ada email,

33:27Halo, selamat datang.

33:28Kalian bisa dikasih rekomendasi.

33:32Silahkan cek.

33:35Nah, itu ada beberapa tools yang bisa kita bagikan.

33:40Yang pertama, saya awal banget tahu

33:43ada framework untuk email template itu nak dari foundation condition itu kan dikenal sama dikenal

33:51dengan ininya kan ya apa CSS framework zerk-zerk polisi pertama kali banget belajar HTML tuh sama

34:01suruh logonya lucunya tif dia ngeluarin framework untuk email dulu namanya singgo pakai-pakai ing

34:10Blue Ink, ya namanya dulu Ink, sekarang berubah jadi Foundation for Emails.

34:15Ini udah versi 2 nih, Foundation for Emails 2.

34:19Yang pertamanya mana ya?

34:21Ya itu Ink, Ink sebelumnya.

34:23Oh, itu Ink.

34:27Enggak, sebelumnya Ink, abis itu berubah jadi Foundation for Emails.

34:32Terus sekarang Foundation for Emails 2.

34:37Ya, gue pernah pakai ini juga, pakai ini.

34:39karena mempermudah hidup mempermudah hidup bisa responsif juga kan ini diatur semua sama dia jadi

34:48kita enggak perlu mikirin Oh kalau ukuran air segini gimana ukuran air segini gimana dulu susah

34:54lo bikin begitu sampai sekarang susah sih kalau email Iya jadi ini sistemnya kayak kompilasi ya

35:03atau transpilasi ya dari kayak gini komponen-komponen jadikan HTML nya

35:08tebel dia dia bubble ya kayak babel babel ya kayak babel kalau kita getting started

35:18kita bisa pilih nih mau yang CSS apa yang sas bahkan udah bisa pakai sas ya

35:22jenis CSS download Oh ya oke suka lupa ya berarti ketahuan nih siapa yang pakai monitor

35:35siapa yang pakai monitor eksternal siapa yang pakai motor laptop kalau pakai monitor eksternal

35:42kelihatan langsung gede kalau monitor laptop kecil ini monitor external iya pakai monitor

35:53ini pakai table terus dia bisa pakai grid tapi ini di convert ya ujung-ujungnya jadi

36:09ya betul jadi kita tetap modenya pakai pakai base seperti biasa ini atau yang mana tadi ya yang ini

36:20layan tadi contoh tadi ya yang dibawah sini ya ini kan kita modenya kayak gini Oke jadi bikin

36:29ini cuma apa sendiri bukan enggak serumit ini tapi behind the scene doang jadi simple sih ini

36:47akal-akalan montir yang montir level paling paling bawah lah bikin storybook isinya react

36:57Ini internal soalnya, isinya react-component, ya udah bikin kolom-kolom masing-masing kolom, dibikin table, dibikin HTML biasa.

37:08mau pakai ya kan storybook kan ada previewnya tuh ada previewnya ya udah langsung ya manual aja

37:15pakai apa DevTools di copy deh HTMLnya isinya oh hasilnya cuma kalau itu sih dalam kasus ini

37:26ini kan itu buat internal pertama for my own sanity ya biar gua nggak gila bikin apa bikin

37:33itu tadi sintaks table-table sama inline CSS buat email, jadi bikinnya enak pakai React biasa,

37:41pakai React sama CSS biasa, itu satu.

37:44Dua, buat feedback, buat preview, maksudnya pas lagi buat tiket internal sama tim,

37:50nunjukin jadinya kayak gini, kayak gimana.

37:53Jadi datanya juga kan, ya karena ini aplikasi React internal, datanya bisa disuplai contoh-contoh data,

37:59bisa langsung nge-fetch data dari apa service yang dipakai juga yang akhirnya bakal dipakai

38:04di integrasi buat sendript juga jadi buat keperluan preview juga pas udah oke terakhir

38:11banget baru ke manual aja copy HTML nya ke sendript sama diganti yang string apa

38:16command option F replace all buat apa template stringnya sama pakai format template stringnya

38:25inggris udah itu cuma kalau-kalau yang ini versi yang revitenya yang dibikin produk ya kalau

38:34pendekatannya yang mirip tapi ya kasar anak apa namanya kalau anak HTML 5 yang zaman sekarang

38:43tuh pusing lihat yang final HTML itu hasil final HTML itu pusing anak HTML 5 kalau anak HTML 1

38:54atau m4 ya kita-kita ini ngerti nih anak Dreamweaver nih hahaha

39:01ya kayak mjml betul ini tools yang saya gunakan bener-bener saya pakai pada saat bikin produk

39:11kalau mjml saya cuman tahu tapi belum pernah pakai kalau ini lebih modern jadi dalam artian lebih

39:21lebih apa hadir setelah si foundation ini muncul mjml ini katanya mirip pria bener gak sih

39:29enggak tahu bener-bener pernah ngomong sama lah ya kurang lebih sama ya kayak ini

39:37ini sama kayak yang gue punya yang gue kasih tadi ya IMP email IMP IMP juga bikin tuh Iya

39:51amp email kalau mp3 masih jalan ya ininya ya untuk iman sejalan pernah nggak di-invite sama Google

40:01pernah nggak di-invite orang di kalender tapi di Gmail nya sudah ada yes no maybe pencetannya

40:08langsung di email langsung di email Iya Iya itu itu itu amp kelebihannya selain itu adalah dia

40:23bisa ngejalanin javascript Gmail tapi hanya bisa jalan Gmail javascriptnya tapi kalau ya normal

40:33kalau di Gmail baik itu di Gmail di Gmail client atau Gmail web bisa jalan ya oke buka bedanya

40:50gini ya Gmail client yang di-info di handphone sebagai app tapi kalau Gmail email di handphone

40:56bisa hanya Gmail yang di desktop yang Gmail web di desktop Gmail email yang di mobile berbeda lagi

41:05itu kayak nggak di-maintain banget ini favorit email data CSS trik ya itu ini apanya HTML header

41:18untuk menyatakan itu Oh iya mirip-mirip lah ya mirip-mirip ya tiga ini ya mgml

41:25foundation sama bedanya kalau AMP ini kita kirimkan AMP si Gmailnya sudah tahu nggak

41:36perlu di compile ya Gmail ya kalau kalau androbusnya otomatis Iya oh tidak at tanda berotomatis ke settingan pabrik ya mungkin enggak muncul kepada hilang mungkin

42:00halo halo oh ada oke sempet terputus-putus tadi

42:06ada ada ada koneksi gue juga kurang oke nih

42:11kok berbarengan gitu ya jadi jadi gue yang curiga jangan-jangan koneksi gue yang kacau

42:21nah balik dulu ke ini dia Inki

42:25tinggi tinggi Nah kalau tadi sasnya gimana bentuknya dia bisa langsung di oleh masing-masing

42:34iya get started Oh jadi stated yang saja get started with sus version harus install dulu

42:54CLI nya

42:55oh kita ngebuild di lokal ya berarti

43:00terus foundation new framework email

43:02running the server

43:04file structure nya ada

43:07asset layout kayak bikin web ya

43:09kayak bikin web app

43:11ada default html

43:14versi yang proper dari

43:16akal-akalan montir gue tadi kan

43:18jadi kan

43:19prosesnya

43:21dibuild nah terus ada

43:23terus mana email klien segi mail and Outlook strip out style from the head

43:34mana stasnya mana keadaan ya itu alfalfa atas-atas ini di paling atas coba ke atas

43:46itu ada using such guys kiri di kiri kiri guys bawa ya nah soya side para namanya ini

44:00Grand Oh pakai masih pakai Grand import-import setting omnision dulu sama grafik penasaran ini

44:13masih di-maintain ya ya harus login gitu karena mau ini karena mau bikin great issue

44:26it up.com slash foundation ini sudah linky ini apa edit ispix foundation foundation email

44:53foundation foundation foundation email pakai es enggak pakai enggak ada es pakai es pakai es

45:13pakai es berdingin dikit ingin nah hahaha dua tahun yang lalu wih masih hidup batik masih dua

45:25tahun itu hitungannya oke ya masih oke stabil email template email template stabil ya maksudnya

45:31enggak berubah-ubah kan mjml berapa nih kitab dua minggu yang lalu lebih aktif ya

45:46lihat dulu komennya jangan-jangan cuma kayak nomor itu depan the board remove

45:54nesting section dokumentasi Oh dia lumayan ini isinya 75 gimana sih JML cara kerjanya tadi

46:07pas lagi nih dokumentasi itu sama kayak AMP dia punya custom komponen juga nanti akan dikonfirm tiga sama ini mirip Jadi install dulu Kita berhenti lokal nanti ada outputnya gitu berupa html yang proper yang mau saya inline style yang label dan lain betul

46:35kalau saya dulu sukanya pakai itu ada drop interface-nya lo coba lihat dong paling

46:43di sidebar paling bawah di sidebar ada paling kiri bawah paling bawah ya itu dia

46:50try passport the email builder based on jml saya dulu suka beli-beli yang di code canyon

47:02jadi email templatenya sudah ada ada builder drag and drop ganti warna jadi terus dijual di

47:08email ya 5 template dipakai di packaging terus dijual zaman dulu ini jadi email kayak gini

47:20sudah sudah dibikin Iya sudah keren kan sudah dibikin jadi saya pernah punya bisnis agensi

47:33tapi bikin produk jualan produk secara online tapi untuk desain-desain email yang sudah di packaging

47:42awalnya bikin manual tuh satu-satu di slicing habis itu lama-lama kok kayaknya nggak pinter-pinter ya

47:50terus akhirnya beli tuh tools-tools yang sebelum ketemu sama Inky beli tuh tools-tools di Codecanyon

47:58yang automatic builder jadi beli agak-agak beberapa yang bagus-bagus kita desain terus kita masukin

48:07desainnya kita kita bagus-bagusin di package jadi jualan 10-25 template $10 $9 ada ada

48:18ada tim marketingnya lah yang nge-package itu dan ngejual itu.

48:22Tugas saya.

48:23Tentu apa?

48:24HTML CSS?

48:26Sudah dikasih PSD-nya.

48:29HTML CSS-nya sudah jadi.

48:31Dikasih sama PSD-nya sekalian.

48:33File PSD-nya.

48:35Nah, itulah yang dijual biasanya.

48:37Ada timnya yang ngejual saya bagian dapur yang ngebikin masakannya.

48:43Gak benar.

48:43Tapi berarti kalau ada kode HTML-nya kan,

48:47kalau PSD kan sudah slicing sudah jadi HTML sudah tinggal pakai jadi HTML CSS sama email template sudah jadi

48:59oke nah ini menarik nih ada MJ breakpoint kita bisa tambahin breakpoint untuk responsif ya

49:08terus ada editornya nih kita bisa coba-coba nih ada button nggak MJ atau ada button tuh klik dong

49:20Hello Hello ingat promenade berapa nih dulu belum ada beginian

49:36coba film HTML nya fit

49:41itu HTML nya style-nya begini bisa ya Bisa bisa bisa bisa bisa bisa lihat ML kan ya

49:52namun ada beberapa nilai klien-klien menghapus ada

49:59kalau Gmail nge-strip sebagian

50:03sebagian loh nyebelin

50:04kalau media query

50:06di-strip

50:07yang gak safe

50:09buat

50:10dia karena dia kan punya

50:14renderer bisa ngerusak

50:17seluruh Gmailnya dia hapus

50:19kayaknya kalau display

50:20misalnya kita display

50:22block inline fax itu display juga

50:24bakal di-strip ya pokoknya dia punya

50:26internal itu sendiri

50:28sistem sendiri ada yang bisa dengkul display nan juga kalau nggak sih strip-distrib karena pernah

50:34bikin juga kayak karena mau bikin kayak bukan kayak image-image tracking atau apalah betul

50:44panjang sekali 155 baris dari itu mso atau AI ini udah ada ya

50:54tuh isinya cuma apa tadi cuma send me money Hello I lingering Prince kita bikinnya begini Wah ini no brainer sekali ya kayaknya kalau misalkan ketemu

51:17project yang seperti ini ya pakai salah yang gua bakal sekarang today Island kalau misal

51:22kalau disuruh bikin lagi email template gua pakai ini MJM ya Oke jauh banget effortnya ya kalau

51:30bikin sendiri begini ya Nah terus ini kadang kan kalau tim kita kan nggak ngerti nih konteksnya

51:36kirain ya musik HTML CSS doang lo kan anak proyek misalnya dianggap jago HTML CSS ya apa yang susah

51:45Apa yang tricky? Padahal email ini kan kasusnya beneran khusus banget.

51:50Jadi ya kita harus dipersenjatai semua link-link referensi dan kita harus mau jelasin di awal

51:56bahwa apa yang bikin gak mungkin itu, itu kayak teknologi email,

52:01klien email itu gak standarize sama sekali.

52:05Jadi gak semua bisa berlaku.

52:07Kita kudu ngomong dulu di depan daripada udah bikin,

52:10kok kurang ini, kurang itu, terus ada request macam-macam yang kita gak bisa implement.

52:15Iya ya bener juga ya kalau kita mau pakai mgml ini kita harus informasikan ke tim

52:21desain mungkin yang mendesain ini bisa nih jangan pakai HTML pakai mbm semuanya Emang

52:28semuanya sebelum ngedesain itu harus diskusi dulu dari skeleton nya sebelum ngedesain

52:34enggak cuma harus belajar dulu dong ininya gimana caranya enggak cuma email Mas web

52:44juga begitu semuanya yang sudah sini asumsinya gini misalkan ada dari designer ya kita sedia

52:54nih HTML CSS CSSnya inline ya kan karena udah tahu email gitu kan kita harus convert lagi ke

53:00mjml kan ribet kan ya dari HTML ke mjml bisa enggak ya ini jadi balik gitu coba aja cari

53:08bisa jadi balik lagi ngapain ya kalau udah jadi HTML ngapain ya kalau ini perspektifnya ya

53:17tergantung ya kalau desainer biasanya kalau terutama di Indonesia kalau desainer kan nggak

53:23bisa bikin bisa sesing ke atem CSS juga kan bikin di Figma kita yang harus itu ya ya front-end ya

53:30ya semuanya satu orang merangkap pinter ya apapun itu punya yang dirol frontend

53:45merangkap jaringan jaringan betulin printer developer peluk gede

53:52php ada enggak php buat ada khusus php gitu mustes

54:05itu kan pen-play tingnya mustahil senyum garis itu gua leblanc customer name kalau sistem PSB

54:15buat email nomornya tengok sih rumah daya Oke terus bahasa pelagi email tadi udah dibahas ya

54:32Oh ya udah deng can I email kan email itu apa ini jatuh kalau lagi bikin email-email itu karena

54:47email itu ya dibilang web ya agak web tapi dibilang web juga gak sebelumnya web

54:54maaf lu gua lupa kalau apple mail itu ada

54:58aku kasih email kan kalau misalnya di macOS ngeklik email link yang muncul kebuka selalu itu tuh annoying

55:08oh iya proton email gua pernah pakai

55:12proton email

55:13one and one

55:15baru one and one itu hosting

55:17hanya web kan

55:19one and one itu hosting loh

55:21hosting gede

55:22hosting provider

55:24web.de, srf, sfr

55:28itu kan sebagiannya utik client ya

55:31kita belum pernah denger

55:33mereka semua punya implementasi sendiri sendiri

55:36knowing kan

55:36orange

55:38Gmail beda lagi mas

55:39Gmail itu di IOS beda lagi

55:42Gmail ada, itu Gmail ada.

55:43Tapi di bawah.

55:45Maksudnya yang nggak pas.

55:47Itu kan ini, Kena email ini kan punya berapa tuh?

55:51Ada fitur, 267 fitur, 284.

55:56Apa itu?

55:59Pakai grid bisa nggak?

56:00Apple bisa.

56:02Alain Atoms bisa dia.

56:05Sama Outlook bisa.

56:06Tapi yang MakeOS.

56:09Yang Windows nggak bisa.

56:11Oh berarti bawaannya si Apple bisa semua bisa OS nya ya OS nya ya berarti ya

56:18agak-agak mainblown engine nya bawaan dari OS ada aplikasi-aplikasi mail-mail.com

56:34yang include sama Mac OS sama iOS apa bukan maksudnya gini ini kan display grade nih kita

56:42cek display grade kan itu semua yang OS nya Mac OS itu bisa Apple Mail juga sih Gmail di

56:51iOS bisa Gmail nggak bisa ya Gmail nggak bisa nggak bisa Gmail nggak ada Mac OS soalnya Gmail

57:02juga nggak bisa Oh iya Outlook iOS ada enggak Oh nggak bisa juga bener cuman

57:09Mac OS aja yang bisa Nah itu Oh 2019 nggak bisa 2024 sudah bisa udah bisa ya

57:22Apple email malah bisa ya pakai grid ya Oh ini aku ingat ternyata paling maju kan tadi tuh di

57:29scoreboard tapi justru banyak-banyak Apple mail loh itu nggak pake-pake email Ico kalau apa

57:40ya ekosistem Apple laptopnya MacBook terus handphonenya iPhone kayaknya mendingan pakai

57:49Apple Mail lebih tentu orang yang anak Apple banget yang semua apa semua pakai produknya

57:56apa Apple sih kayak gitu lah kalau gue kan HPnya Android email utamanya juga email Gmail

58:05sih jadi agak pointless walaupun bisa bisa di apa bisa diintegrate tapi ya masih lebih enak

58:12kalau gue ya lebih enak packaging ya oke pembukaan berbentuk menurut masih ya kirim

58:21udah udah udah sunset masih ya masih nyala ya masih nyala di coba buka scoreboardnya lagi deh

58:29Thunderbird lumayan atas kok.

58:31Yang buat MetaOS ya?

58:33Peringkat 7.

58:35Nah, itu peringkat 7.

58:38Yang buat MetaOS-nya.

58:45Oke, oke.

58:47Nah, ini ada pertanyaan dari Mas Indra.

58:49Kayaknya tadi kita udah bahas ya.

58:51Eka udah bahas tadi ya.

58:52Invert color di email kalian pasti menyadar.

58:56Salah satu tipsnya pasal opacity ya.

58:59Iya cuma kan itu nggak bisa yang rumit ya misalnya kalau brand color kita pengen punya aksen color

59:06warna kalau light mode ungu nya ungu agak tua biar kontras kalau dark mode ungu nya ungu agak muda

59:13Nah kalau yang itu belum nemu jawabannya sih cuma kalau yang tadi simple ya udah pakai warna default

59:18kalau yang mau lebih soft dimainin di opacity nya nah terus balik ke itu tadi style apa style style

59:26yang terpisah kan bisa sebagai dark mode

59:28itu kan media

59:29media preferences

59:32dark blablabla kan

59:33nah kita bisa pakai itu masalahnya

59:36di sebagian besar client email itu bakal

59:38ke strip jadi ya sulit gak bisa

59:40oke

59:43oke

59:46ini ya agak-agak

59:50tricky juga ya sama ya

59:52kalau email clientnya otomatis

59:54dark mode kayak gmail gitu ya

59:56sulit ya Iya ya atau aplikasi apapun yang kalau dibuka di HP terutama yang bisa dark mode

1:00:03otomatis item tuh background-nya hitam atau abu-abu gelap teksnya putih jadi seberat kalau

1:00:10nggak penting amat either sebisa mungkin pakai warna default maininnya di opacity atau kalau mau pakai inline color ya beneran tapi nggak bisa light juga sih Jadi misalnya pengen apalah ada kotak yang mencolok sendiri gitu background ungu tua text putih yaudah di inline color

1:00:30Tapi ya nggak bisa berubah-ubah kalau light mode, dark mode.

1:00:35Nah, coba sambil dibuka aja nih, reverse color scheme.

1:00:40Oh, MJML bisa.

1:00:41Sekadar nyari MJML udah support.

1:00:43Udah support.

1:00:44klien emailnya belum tentu ya tapi coba-coba Woi coba masukin ini tadi ke ke apa namanya ini

1:00:59mungkin ada yang lebih lengkapnya enggak masih lebih lebih banyak coba mungkin render jadi

1:01:07Swap logo for dark mode ini outright live tuh langsung ketik

1:01:17litmus-litmus

1:01:21ya kayaknya terus gimana caranya ini ganti di OS nya iya display apa bukan display

1:01:42apa sih sistem setting-setting sistem setting appearance appearance light nah

1:01:56coba-coba gimana sih dia bikin gimana sih dia bikin

1:02:04menarik sekali Wow lah cuma itu pakai per-apapun reverse color skin nggak Iya pakai itu iya cuma

1:02:20pakai apa sudut pakai root custom CSS variable custom properties belum tentu bisa dibuka di

1:02:27semua email klien ya Iya ada yang support ada enggak coba buka di private chat tuh ada linknya

1:02:33kenai email

1:02:34nah

1:02:4446%

1:02:49support it, jadi yaudah

1:02:5146%

1:02:5244% nya

1:02:55yang bisa menikmati

1:02:56yang bisa menikmati

1:03:00itu tadi misalnya kita udah wih keren bisa begitu email testing email loh kok hilang

1:03:13kok ilang logonya pertanyaan berikutnya ada enggak sih service yang buat ngetes per email

1:03:22kalau browser kan ada itu browser stack kalau email ada email stack

1:03:33coba ya for email

1:03:40oh tadi ada yang mention nih mana bentar Valeria ini apakah ada pilihan email testing yang lebih

1:03:50selain kepit kita aja belum tahu nih melpik itu apa mail-mail STS mtp testing tools itu buat

1:04:04ini dia itu buat dikirim dan kita lihat hasilnya ngirim ya emailnya ini dua es binblok

1:04:16aneh banget main Fit karena email-email dipakai Mas Tiza eh sorry IP IP addressnya mungkin sudah

1:04:33flag ini ada GitHub nya ya kita punya jadi nah

1:04:41kita pian nggak bisa ngeblokir memori zero depresi multiplatform email testing

1:04:47XSS lsd SMT server bisa jadi ada email klien sendiri kan ya Iya bukan testing itu ya bukan testing Oh kalau kelihatan di Gmail apa kelihatan di Yahoo email kayak gimana gitu enggak ya

1:05:09Mailtrap, mailtrap itu buat local host email supaya enggak lari ke email beneran kan?

1:05:15Saya pernah pakai ini mailtrap.

1:05:20Kayak virtual inbox.

1:05:22Kayak local inbox.

1:05:24saya pakainya mailhook mailhook eh tadi mailhook udah nggak di-maintain katanya

1:05:30ya itu tadi di nolonggol maintenance enggak papa tapi tetap stabil tetap stabil selama

1:05:41ya kalau kirim itu kan saya nge-intercept jadi iya di-prep ya ini kayak daripada kita pakai email

1:06:04apa yang share inbox itu lebih bagus pakai ini emailnya beneran tapi nggak dikirim beneran gitu

1:06:12kirim biasanya kalau ngetes di lokal kan kalau misalnya develop di lokal ini emailnya beneran

1:06:18terkirim gak sih gitu dan hasil-hasil emailnya hasil emailnya seperti apa ya jadi meskipun saya

1:06:28bisa lihat hasil panggilan tapi bisa lihat HTML nya bisa lihat isi dalamnya kelihatan itu gunanya

1:06:34di melhock Iya sih Iya sih harus desain beneran juga ya Nah tadi berarti tadi tips yang salah

1:06:43satu yang cukup powerful adalah kalau nggak bisa lihat secara lengkap atau secara bagus

1:06:49silahkan klik untuk buka halaman webnya udah kayaknya udah paling bagus ya sama link unsubscribe

1:06:59itu wajib hukumnya harusnya bisa dirimu mungkin biasanya mungkin kita bilang minta itu dirimu

1:07:06saja biar nggak bisa subscribe nggak boleh itu hukum soalnya masih banyak loyang melakukan itu

1:07:12tapi linknya nggak bisa working di klik tapi kalau service external service karena nggak bisa sih

1:07:22kemel simetris yang gitu mau dia kali mau diseling kayak gimana dia otomatis nge-add

1:07:28nge-add otomatis gampang kalau di Gmail kan tinggal mute udah selesai kirim email tapi

1:07:36kita tidak baca

1:07:38report spam

1:07:39kalau kita ngirim transaksional email

1:07:43yang tidak ada subscribe-nya

1:07:45bakal lebih besar

1:07:46kemungkinan dimasukin ke

1:07:49spam juga kan

1:07:50spam filternya Gmail

1:07:52oh iya ada kemungkinan ke sana

1:07:54ada

1:07:54email dan tidak ada

1:07:59subscribe-nya yang bisa dicurigai

1:08:00sebagai spam

1:08:06melosor ini lagi loh melosornya halo halo email ini tadi semuanya masih

1:08:18koneksi koneksinya saya ya gantian berarti saya yang nggak bisa ya

1:08:28itu di banyak lagi ngerang nggak ada ya

1:08:33kalau browser-browser engine layout engine cuma berapa ya cuma tiga ya dengan semua permutasi

1:08:45device tapi kalau tadi kayak email diskor Word aja banyak banget dan hebat emulatnya tuh lumayan

1:08:53ribet

1:08:54Mas Riza

1:08:58nge-freeze

1:09:00oh react email

1:09:04halo halo halo

1:09:05ada audionya

1:09:07halo aman

1:09:09audionya ada

1:09:12tapi videonya

1:09:14enggak

1:09:15ya video

1:09:17udah ada juga

1:09:17react email ini yang baru ya

1:09:20oh putus

1:09:22Wah bagus akhirnya bisa pusing bisa pakai image as background tidak inverted tapi selalu teks color yang inverted seperti kata mereka prefer call strip out oriak email ya tapi berbayar enggak ini kayaknya cuma ini

1:09:49kan library library open-source Oh iya iya kayaknya Oke di seperti pakai itu aja tadi

1:09:59storybooknya kayak katanya Eka dibikin aja di storybook

1:10:03mdml

1:10:03hasil htmlnya

1:10:06cuma ini programnya

1:10:08ini programnya

1:10:10generate outputnya aja

1:10:12di build

1:10:13ya ya ya ya

1:10:15menarik menarik menarik

1:10:18wah bagus

1:10:21ada integrationsnya lagi

1:10:27email Saurus buat preview di email klien Oke pernah dengar Google Saurus ya ya

1:10:35Mylosaur.

1:10:39Mylosaur.

1:10:41Sebentar, habis di-review.

1:10:43Ini koneksi.

1:10:51HTML button.

1:10:56Wah menarik ini.

1:10:58Komponennya apa aja?

1:10:59Button.

1:11:02Pasti ada button.

1:11:05pasti selalu ada button itu terus bisa diintegrasi ke layanan apa pengiriman email jadi kayak mungkin

1:11:19udah langsung sesuai format template-nya kita enggak usah replace manual untuk variabelnya

1:11:30ya sama mungkin apa API kayak kan bisa tuh programatik lima update template sendript atau lainnya

1:11:42mylosaur Wow bagus email SMS

1:11:51email SMS mesin simple API tampilannya kayak gimana ya penasaran juga nih require

1:12:07harus klien message get expect email subject to be my password reset bukan UI ya konten

1:12:18teksnya ini kayak Cypress gitu Iya enak ya Iya apa sintaksnya tapi ini bukan bisa ngelihat di

1:12:28klien email klien Gmail dan lain-lain bukan ini bukan UI apa review Oh buat ngecek kalau

1:12:40email kita beneran ada subjeknya apa terkirim dengan betul subjeknya sesuaikan kek masai

1:12:46kasus tadi tuh misalnya lo salah salah replace templatenya Hai customer name customer namenya

1:12:53enggak ganti karena misalnya di database soalnya filmnya name doang yang gitu-gitu sih eh bisa

1:13:01katanya bisa juga buat gimana caranya email testing match simple Oh iya ada tuh email

1:13:14di website-nya

1:13:16mana?

1:13:18saya penjelasannya, takas dikit

1:13:20zoom in

1:13:22email preview

1:13:28everything you need to test

1:13:30image

1:13:31ini

1:13:33di home-nya

1:13:37home-nya

1:13:38email preview

1:13:42di home

1:13:44ini kan Oh di sini ini ya itu instan misi how your email will look to recipient coba di coba

1:13:57diproduk mungkin di dalam produk Mas email testing email review review email preview

1:14:06kita cari tapi harganya pasti nggak murah ini pricing hahaha

1:14:16free for free 14 days

1:14:20free for 14 days

1:14:23trial

1:14:24tapi menarik ya ternyata ada ya

1:14:28preview emails

1:14:30selama ada kebutuhan pasti ada solusinya

1:14:34iya

1:14:36tapi gak banyak

1:14:38gak banyak kan

1:14:39gak banyak

1:14:40semua kan di development

1:14:42di product lah

1:14:43di product semua adalah trade off ya kan

1:14:45Ya mungkin ada yang penting banget emailnya dirender secara perfect di semua email klien dan bersedia bayar.

1:14:54Nah kalau kayak misalnya case-nya gue yaudah disimplify desainnya biar bisa ngikutin constraint yang ada tanpa butuh tools kayak gini.

1:15:02Ya kan kebutuhan itu lain-lain.

1:15:06Kebutuhan masing-masing.

1:15:09Lotus Notes.

1:15:12Masih ada Lotus Notes.

1:15:14ini ada tulisannya Hah serius masih ada Oh my God Gmail Kapan itu dari IBM itu cuma dia bikin

1:15:30marketing pasti udah survei audiensnya butuh keterbuat apa dan justru itu orang yang rela

1:15:40bayar itu kan saking susahnya bikin-bikin sendiri susah ya

1:15:44Oh eh eh kan nggak ngalamin ya Lotus 123 nggak ngalamin ya Lotus 123 nggak ngalamin saya pakai Lotus 123 itu spreadsheet

1:15:52Lotus 123 itu email IBM killer application di dos

1:16:00iya adalah spreadsheet tapi jalannya di dos di CLI di terminal sebelum Windows 93 sebelum ada Excel

1:16:09terus dia bikin versi Office suitnya Lotus Office suit tuh ada ada wordnya ada spreadsheetnya habis itu dibeli IBM ada Lotus Notes namanya Lotus Notes itu buat email buat catatan kayak kayak Microsoft Word ya makasih bisa umur Mas Riza umur berapa sih udah tua udah tua hahaha hahaha

1:16:39makanya begitu saya dengar, kok ada Lotus Notes ya ampun

1:16:47dulu pemakai, disini gak ada yang relate nih pasti

1:16:53tapi saya harus ngapalin tuh dulu Lotus 123 itu shortcut-shortcutnya

1:17:00dulu masih ada Quick Basic kan masih ada dulu Quick Basic

1:17:05Hai Cubase Cubase Cubase Cubase atau basic yang buat bahasa Oh ya Cubase batian buat buat kayak

1:17:14Microsoft Word ya yang nulis Cubase bukan Wordstar ya bukan Wordstar Wordstar ada juga Wordstar ada

1:17:22database waster ada juga oke masa-masa itu belum ada belum ada internet belum ada internet CD ROM

1:17:37CD ROM itu dulu barang mewah Oh iya sekarang udah enggak ada mau kemarin itu beli apa ya beli

1:17:47monitor dikasih sini ini bukannya gimana mau Instagram gimana mending gua-gua waktu married

1:17:58eh waktu married terus kan ada tukang-tukang fotonya kan ada tuh jadi hasil fotonya itu dikasih

1:18:08dikasih sini gimana itu gue mandang ke istri kita bukanya gimana ya nggak punya di sini

1:18:18rp-nya lagi nah gue sampai sekarang punya DVD rp eksternal cuman nyebelin sih malah nggak pernah

1:18:26pakai jadi dulu sepanjang sepanjang kuliah ya terus sepanjang ya udah lulus kuliah awal ya punya selalu numpang numpang punya temen atau apalah dulu rajin banget Mp3 bajakan itu ini CD artut peran sama temen dan ngebakarnya ngebakarnya pakai apa Nero

1:18:47sampai punya DVD sama sini tuh kayak berbanyak lah esnya Iya dengerinnya pakai Winem bikin

1:19:03orang miksi di dan lain-lain terus cuma belum pernah punya DVD proper harus mikir wah one day

1:19:10kayaknya harus beli buat ngurus koleksi juga kan buat ngerapi-rapihin dulu ekstralah misalnya

1:19:17apa yang diterima jatuhin lompokin berdasarkan genre atau apa maunya buat ngerapi atau ngasih

1:19:23orang atau biar kalau misalnya ada yang mau numpang nge-burn ya udah di tempat gua aja

1:19:29biar melihat terima kasih baik time akhirnya di dvdrw external yang bagus lama-lama

1:19:36teknologinya sampai sekarang masih punya Oke begitu sebelum semakin terbongkar umur kita

1:19:46mungkin kita udah dulu ini topik yang sangat bahaya buat teman-teman seperti biasa kita

1:19:56tetap mengingatkan untuk mampir-mampir ke sana.internet.com.br dan web

1:20:01kita diskusi-diskusi di sana

1:20:02atau kirim DVD, kirim CD ke kita juga bisa

1:20:07biar apa ya, diskusinya nggak cuma pada saat live aja

1:20:12tapi juga pada saat hari Rabu, Kamis, Jumat, Sabtu, Minggu, dan Senin

1:20:16ke sana.internet.com.br dan web

1:20:18itu GitHub ya

1:20:21kitab Nero win mwmp lasik Windows media player masih ada kan Windows media player

1:20:28pokoknya kalau kalau OSnya Windows itu harus ada antivirus ya

1:20:36kalau sekarang gue yang marahin kalau ada orang masukin ke warnet terus balik masukin ke

1:20:54ke PC udah selesai itu hidup isinya harus format ulang isinya virus semua

1:21:00sekarang udah zamannya ransomware nggak berontok selagi orang-orang nah ini bentuknya begini

1:21:17diskusi ya bentuknya diskusi mungkin ada teman-teman yang enggak yang belum belum

1:21:21tahu ternyata di GitHub itu ada diskusi nah contohnya kayak gini nih http1 vs http2 vs

1:21:27di TP3 tuh ada yang comment tuh terus nanti bisa apa namanya food juga jadi bisa topik kita

1:21:35selanjutnya buat-buat ide topik kita selanjutnya meskipun kita kadang nggak ngambil kadang random

1:21:42gitu ya tapi tetap kita lihat di sini kalau kita sudah apa nanti kalau udah bingung juga

1:21:46bakal meluncur Iya jadi kita diskusi di sini enggak mesti hanya topik tapi bisa yang lain

1:21:52kalau misalkan ada pertanyaan seputar pekerjaan, eh pekerjaan ya maksudnya web,

1:21:58HTML, CSS, JavaScript ya pokoknya berhubungan dengan web, email, dan lain-lain.

1:22:05Siapa tahu punya masalah di kantor yang belum ada solusinya, bisa tanya-tanya.

1:22:10Tapi enggak janji kita bisa jawab ya.

1:22:15Kita bahas di sini, siapa tahu yang di chat bisa jawab.

1:22:19Yes

1:22:21Ngobrolin web

1:22:23Kesana.in slash ngobrolin web

1:22:25Oke mungkin sekian dulu

1:22:27Untuk malam hari ini kita ketemu lagi

1:22:29Minggu depan

1:22:30Nah minggu depan kita undang-undang narasumber ya

1:22:33Insya Allah ya

1:22:34Khusus topiknya juga soal yang

1:22:37Pernah kita bahas belum lama ini

1:22:39Jadi bakal seru

1:22:41Bakal seru

1:22:42Kita belajar hal-hal baru

1:22:44Kita ketemu lagi minggu depan

1:22:47Sampai jumpa

1:22:49Selamat istirahat

1:22:50Bye-bye

Suka episode ini?

Langganan untuk update episode terbaru setiap Selasa malam!

Langganan Sekarang

Episode Terkait

Ngobrolin ViteConf - Ngobrolin WEB
EP 101

15 Okt 2024

Ngobrolin ViteConf - Ngobrolin WEB

Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...

Ngobrolin Deno - Ngobrolin WEB
EP 100

8 Okt 2024

Ngobrolin Deno - Ngobrolin WEB

Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...

Web Performance Update - Ngobrolin WEB
EP 128

13 Mei 2025

Web Performance Update - Ngobrolin WEB

Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...

Komentar