Ngobrolin Layout Email - Ngobrolin WEB
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 KoreksiEpisode 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.
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!
Episode Terkait
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. ...
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. ...
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. ...