Ngobrolin Layout Email
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.
selamat malam hai hai hai ilang lagi eh ngala lagi Halo halo halo selamat malam semua apa kabar
Selamat berjumpa lagi bersama
Masih bersama kita bertiga ada Ivan
Ada Eka dan ada saya Riza
Seperti biasa kita ketemu
Di selasa malam karena selasa malam
Waktunya
Ngobrolin web
Harusnya dimulai dengan Senin harga naik
Harga naik
Ngobrolin web
Seperti biasa masih dengan kegaringan kita
Iya harap maklum
ini memang identitas saya ini sekarang lagi pre musim ini kan Ayo extended kan sudah mau padang
langgung kan Iya udah bahas apa Gua penasaran loh kalian tuh bahasa apa Oh iya batal semuanya
betul saya tidak ada yang pergi yang Bali nggak jadi Bali nggak jadi Surabaya nggak jadi ya sudah
deh habis faktor yang sama juga yang kemarin kalau Surabaya nggak dikasih izin nggak dikasih
karena karena sudah deket mau ke ayo yang China kan ya konek konek konek Kriston api20 Selamat
pagi ini dari daerah mana ya ini Indonesia mana langsung dari Mountain View ini Asia mungkin lagi
tidak di Indonesia Selamat pagi juga lah ya Selamat pagi eh kalau Eka berarti ngisi di Jakarta Jakarta
Jakarta Surabaya Depok Jakarta Surabaya Depok ketemuan kalian kan kapan depok kapan 13 Juli
gua-gua datang eh kalau sempet datang aja deh jadi penonton asik jadi itu aja itu bawa-bawa
bawa apa bawa kunci-kunci sampai sambil nyanyi depoknya lumayan ramai tahun ini ya maksudnya
banyak kalau kita lihat apa GDE kumpulan GDE nya Google developer expert nya nah sebagai
narasumbernya di sana lumayan banyak dibandingkan tahun-tahun yang lalu kalau Bogor sudah pasti
ada pasanti kegali
ada Imre
ada siapa lagi banyak lah
sudah harus pakai
ini tuh surat kepolisian itu
Lihat transkrip lengkap (817 segmen lagi)
itu kan
keramaian kan izin keramaian
kalau ramai ya
iya
bisa berapa ya target mereka kan
1500 orang kan ya
wow mantap
bawa bintang tamu
nah teman-teman yang nonton ini
domisilinya dimana? kita pengen tau
siapa tau bisa ketemu di
IOS Tended yang terdekat
terdekat di kota
karena
kali ini topik kali ini kita mau
bahas bagaimana kita bisa
mengirim email
buat kalian
lewat topik kita
email template
ya kalau daftar
Google IOS Tended biasanya
dapat email
ada kontennya Halo nama bla bla bla personalisasi personalisasi kan betul karena enggak mungkin kan
kita ngirimin ke seribuan orang nulis namanya satu persatu capek ada teknologi yang namanya
apa namanya itu kalau di apa Microsoft Word gitu-gitu str-replace kalau di PHP
ya ada mesin mesinnya jadi kita bisa bikin list daftar terus si namanya itu
akan diganti
per dokumen itu diganti
namanya per list itu
kadang kalau informasi
kalau ada
curly bracket name
customer name, kayak lupa diganti
gitu di template nya
iya kadang-kadang lupa
Jakarta nanti ketemu Eka ya
Titip salam
Kalian titip salam dari saya buat Eka
Nanti kalian sampaikan
Setiap minggu ketemu online
Tapi ketemu offline-nya
Setahun dua kali
Atau setahun tiga kali ya
Barusan ketemu Eka
Di Jogja
Oh ketemu
Iya
itu kok ketemu terus kita makan ayam terus kok kaget sama harganya kenapa murah harga
joknya makan berdua berapa ya warintia enggak sampai 40.000 ya makan berdua ya itu udah mahal
jaman-jaman dulu lebih murah lagi itu namanya inflasi tifanya tinggal di Jogja ya ngapain
jauh ya dulu-dulu kesana makan 5000 juga masih dapat zaman tahun berapa ya sebutnya ini 1.500
Sekarang udah Rp2.000 sekarang.
Inflasi ganas.
Ganas ya.
Nah, ngomongin email, mungkin teman-teman ada yang punya pengalaman,
dapat tugas untuk ngirimin email ke customer kah?
Mungkin ngirimin email ke mana lagi ya?
Atau pada saat registrasi, aktifasi lewat email.
ya kan atau forget password juga lewat email email itu bisa dibagi beberapa beberapa kategori
kali ya email transaksional dan non transaksional atau newsletter marketing email marketing email
Kalau transaksional email itu
Sekali aja
Maksudnya login
Lupa password, registrasi
Terus payment
Invoice lah
Invoice, kirim game
Reminder
Sesuatu yang sifatnya
Transaksi
Bisa terjadi hanya sekali saja
Untuk satu urusan
sedangkan kalau newsletter kita biasanya terima bisa berkala dan itu email marketing itu panjang
panjang ceritanya itu bisa bisa kayak seperti daily daily atau weekly digest bahasanya gitu
kalau kalau di kita kita kalian subscribe apa tuh di sebuah konten seperti kalau kita
itu dimana biasanya kalau untuk nulis banyak medium medium medium nah medium itu kan biasanya
ngirim weekly digest kan misalnya berdasarkan topik yang kita suka nanti dikirimkan ini top
5 artikel sesuai dengan personalisasi kita terus dikirimkan dengan template yang sesuai branding
terus kemudian mudah dibaca lebih menarik karena judulnya bisa besar terus kemudian ada image-nya
ada title-nya, warnanya sesuai dengan branding,
itu kontennya itu sebenarnya sudah ada, bisa otomatis di otomatisasi.
Jadi, itulah yang disebut namanya templating.
Nah, soalnya email itu sendiri isinya kan bisa dua format ya,
bisa plain text, ya sesuai namanya kalau plain text yaudah beneran literally text doang.
Nah bisa juga HTML tapi ini sebenarnya agak menipu ya
Nah kalau tadi balik ke yang dibahas Ivan kayak apa transaksional email dengan template
Itu ya pada umumnya biasanya templatenya pakai yang HTML
Karena 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
Ya, kalau ngirim URL bisa ya, HTTP, bla bla bla, tapi kan jadi panjang.
Nah, nggak bisa kirim teks. Jadi otomatis hampir selalu kalau transaksional email, ya pakai format yang HTML.
Tapi 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.
Tanda kutip gampang kita bisa bikin template HTML email dengan gampang.
Tapi tunggu dulu, tidak semudah itu Merguso.
Bakal banyak pantangannya, nanti ya kita bahas satu persatu aja.
Iya agak unik kenapa karena kita mengira awalnya menulis HTML di email sama di HTML biasa itu sama
Jangan-jangan mereka pakai engine yang sama ternyata enggak ya
Bahkan
Enggak bisa meluat CSS kalau gak salah ya
Iya bahkan kayak Firefox kan mereka punya Thunderbird kan
Di satu perusahaan yang sama mengeluarkan dua produk gitu kan.
Walaupun jenis produknya berbeda tapi sama-sama masih sama-sama klien kan.
Yang satu email klien, yang satu HTML, HTTP klien kan.
Sama-sama render HTML.
Sama-sama render HTML.
Tapi ternyata engine-nya mungkin berbeda.
engine untuk mengumpil HTML menjadi halaman atau menjadi email.
Begitu juga dengan Google.
Google punya Google Chrome dan Google juga punya Gmail.
Itu juga berbeda.
Mungkin ada faktor protokolnya mungkin ya.
Perlakuan protokolnya berbeda kali ya.
Atau gimana ya?
Kenapa bisa berbeda?
Enggak tahu.
Atau jangan-jangan email duluan?
Email duluan.
Karena email duluan kan ya.
Seperti mereka kontainer yang tersendiri gitu ya.
seperti outlook dan misalnya kita buat email template itu di let's say
misalnya kalau kita ngebangun email template kan pasti pakainya browsernya untuk ngelihat hasilnya
ya kan dikurusin misalnya email template itu nggak bisa gede-gede amat
ya apalagi kalau mau bikin fluid-fluid itu susah itu setengah mati
responsifnya setengah mati ya
responsif nggak bisa gitu
kalau misalnya karena nggak bisa grid kalau kalian misalnya ingin grid flex itu udah udah pasti nggak
bisa tuh di internet client tuh jadi misalnya dia table baru nggak bisa ya Iya ya ada tempatnya
table jadi mungkin ada yang bisa ada enggak nah bisa nggak bisanya juga selain nggak terstandar
kurang terdokumentasi dengan baik jadi mungkin ya ada aja klien atau apalah aplikasi email yang bisa
tapi kan karena sulit banget mastiin satu-satu ya udah anggap aja nggak bisa kita akhirnya bikin
pakai table nah betewe sumin coba tuh artikelnya tadi yang tentang HTML atas dikit Zoom ke atas
Hai sulungin ibu tak pas sedikit Nah itu penjelasan ke apa masalah-masalah umum yang di alamin
Google disable most HTML feature from the popular Gmail service that would mean that email marketers
would often have to design the HTML email to either get around some of Gmail blogs or just
to plant x-mail kalau plant x-mail aman ya apalagi yang transaksional tadi kebanyakan
enggak terlalu bermasalah dengan HTML responsif dan lain-lain biasanya teks aja kan klik here
to recover your password untuk gantung ada yang pakai transaksional juga pakai template juga ada
template juga ya tapi kan kalau plaintext straightforward lah maksudnya nggak bisa
dipikir dan tapi itu ya bisa dijadiin opsi kan bisa kita emang cuma mau bikin sistem sign up
buat ngirim OTP gitu terus beneran gak ada resource buat oleh open aneh-aneh ya udah plaintext dulu
aja nah cuma balik ke HTML nah ini Harus di inline CSS CSS harus inline
Itu harus.
Karena dia tidak bisa membaca external file.
Pakai link atau pakai script src itu gak bisa ya.
Jadi harus inline.
Lalu gak bisa ini juga konten media query.
Gak bisa.
Media query gak bisa.
Harus pakai table.
kembali kembali kalau enggak salah ya ini kok mungkin teman-teman bisa bisa benerin kalau enggak
salah dia hanya mensupport CSS 2.1 jadi nggak bisa CSS 3 mungkin saya salah tapi bisa coba cari nanti
saya ingatnya begitu waktu zaman saya buat email template jadi fokus hanya untuk kalau kalau web
ada web standar ya, maksudnya fitur baru
juga relatif terdokumentasi
apalagi sekarang
ada kayak introp, ada kayak
WPT, itu web platform
test, nah masalahnya
kalau si email ini, si HTML
untuk email ini, ya kan
lebih sulit di tracking, misalnya kayak
ya kayak Ivan bilang tadi
terakhir bikin
masih CSS 2.1
tapi ternyata sekarang misalnya
ada yang udah bisa CSS 3
ada yang bisa, ada yang enggak
Nah itu
Bergantung email kliennya
Belum ada konsorsiumnya ya
Kayak web ya
Kalau web kan komunitasnya juga besar ya
Relatif gampang lah
Kalau misalnya mau cari tahu
Kalau email gimana
Belum ada konsorsiumnya ya
Karena tekniknya
Ada di bagian dari web kan sebenarnya
Enggak sih
Email ya email
tapi enggak enggak terkunci ke masa enggak enggak ngikut enggak kunci sama konsternya
jadi itu web tapi bukan bisa dibuat tapi bukan web dalam hal menggunakan teknologi
tapi ya enggak beneran terikat kayak kelompok-kelompok komunitas dan ekosistem
contohnya lihat aja kayak Microsoft dengan outlooknya Firefox dengan Thunderbird terus
kemudian masih ada saya email Yahoo ya Huwira email Yes kudu masih itu yang dirisi penelisi
itu order squirrel segala macam tuh masih ada tuh email client begitu dan selain email beda-beda
gimana biar aman HTML nya nah ini kita ya Iya memang bagi-bagi pengalaman aja ya jadi saat
saya dulu bangun email template it um dari designer itu disoalnya cukup pelihatan yang
Tapi saya bilang ini gimana bikinnya
Karena misalnya
Dia bikin
Apa namanya
Design
Ada header ada footer
Terus disampingnya itu
Ada kayak garis gitu ya
Garis yang kayak
Dia supaya jadi ngekotakin
Jadi imagine aja dia kayak
Ini deh
Tempatnya kayak gini nih
Ya kan ada headernya
Ada bawahnya
terus disininya ada ada garisnya nih nah konten bisa kembang kempis ya enggak kalau misalnya
kontennya nambah ke bawah tentu garis ini kan harus di repeat dipanjangin di repeat ya repeat
kalau misalnya itu ya image dibikin gradient lah gradient contohnya ya kan nggak bisa dibikin
order nah itulah salah satu dulu Oh nggak bisa Oh ini lebih tepatnya begini nah nah enggak
wajah ini kindle header puter nih konten ya kan Nah kalau misalnya kontennya nambah tentu garis
hitam ini anggap aja dari sistem ini gradient ya enggak aja garis hitam ini gradient atau image
ini kan kalau konten nambah sampai bawah si garis ini kan harus di repeat
nah itu susah di email template karena seluruhnya yang di dalam sini itu
ini table 1, table 2, nanti ini dibikin table dengan sale, dibikin banyak,
terus call span, ini satu span, ini satu span, nanti tengahnya sendiri.
Ya seperti itulah, jadi ribet.
Oh ada satu lagi, ini agak out of topic ya, ada satu lagi selain email yang cukup tricky,
zaman dulu reporting crystal report Iya kalau dulu kan PDF tidak semudah sekarang ya kalau
sekarang semua PDF kayaknya udah open standard dalam tanda kutip ya jadi enggak sih dulu kan
susah sekali ya enggak cuman seperti udah jadi apa ya udah jadi de facto format kalau dulu ada
ada ada namanya kristal report kristal report Nah itu yang paling paling ini ya paling bagus tapi
berbayar ya kan berbayar Iya berbayar kalau yang gratis-gratis pakai PDF itu setengah mati itu harus
apa posisinya harus manual itu juga lumayan triki email juga termasuk yang lumayan triki untungnya
sekarang ada beberapa tools yang bisa bantu kita mungkin kita moddingnya itu udah ala-ala modern
tapi dia otomatis convert kayak misalkan jadikan dari CSS file jadi inline
formatnya mungkin dari flex atau grid jadi table gitu ya mungkin ya
kita akan lihat sama-sama teman-teman juga kalau punya tools seperti ini
Alon Inderdad pernah punya pernah coba pakai service email
mereka accept styling email pakai XML dan works well
nah itu boleh di share mungkin kalau tahu namanya ya
kita juga butuh soalnya butuh pengetahuan
salah satu contohnya sih
WML
pasti kalau pernah bikin
template yang kayak built in
di service kayak send grid atau apa
kemungkinan pernah lihat
format itu, coba buka deh yang di chat
yang di
private chat
private chat
agak ajaib
juga sih ini, dan ini artikel
lama, sebenarnya ini artikel lama
cuma emang sampai sekarang pun masih sering dipakai zoom in terus apa lihat atasnya penjelasannya
Oh iya masih bisa detek ini juga ya browser ya Nah ini tuh dulu dipakai buat Outlook nah nggak
sekarang tuh kadang masih lihat format yang kayak gini apakah cuma buat outlook aja atau buat agent
lain atau kayak gimana nggak tahu cuma yang jelas formatnya itu jadi Vector Markup Language
istilahnya kayak XML sebenarnya sih super baru denger ini khusus untuk email doang
Oh coba aja susu alok lebih tepatnya khusus untuk outlook cuma koman ada email aplikasi
lainnya entah apalah yang menggunakan ini pakai pattern kayak gini juga ya mungkin karena dulu
kan Iya 10 tahun lalu aku gitu kan kayak merajai email corporate perkantoran Iya
sambil di zoom in ini kurangnya eh salah salah jumin ini cukup terus ada teksnya itu
itu tuh nggak ngerti sih kurang kurang tahu juga belum pernah testing yang beneran per
per aplikasi ya per per pakai output versi sekian gimana dibandingin satu persatu gitu nggak pernah
cuma kalau ya itu bisa buat ekondisional rendering gitu ya V-shaped ini kayak kayak
SPG bukan ya bentuknya kayak SPG ya ada shape ada feel ada rectangular Nah kalau yang shape
itu jujur baru pernah lihat di sini sih cuma kalau yang per tabel-tabel sama conditionalnya
lumayan 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
Bisa misalnya Outlook berapa gitu yang bisa support itu bisa begitu.
Itu MSA tuh Microsoft Outlook.
Jadi bukan internet explorer ya.
Beda ya itunya apa engine-nya beda.
nah punya engine sendiri deh kayaknya ya iseng banget sih bikin engine pengaruhnya ke yang tadi
kan soal background kan agak sulit apa CSS background gak bisa dipakai di banyak layout
engine email nah bisa diakalin pakai CVML itu coba buka artikel bawahnya di practice oh snap
sumin lagi biasa ini udah gede kurang ya lagi deh lagi segini nah ya
kalau lainnya sih ya udah ya
tapi sering muncul Iya karena udah bisa bisa harus di-enable dulu kan Iya email-email client
itu kadang suka ngeblok ngeblok blog image karena external image bisa dijadiin untuk tracking bisa
kelihatan tuh email kita dibuka atau tidak.
Ya kayak pixel gitu kan dulu.
Satu pixel gitu ya.
Kan kirim data ke server.
Nah, anyway, kalau ini sih kayak buat kodenya aja.
Kode HTML, XML.
Ini ya.
Oh, boleh tambahin ini.
Ini di HTML biasa nggak bisa ya?
belum pernah coba juga sih dikasih fallback kan sebenarnya style-style atribut hal ini
ya sih fallback ke background Oh ini fallback nya kalau dia bisa nampilin dia pakai yang ini
tapi sama sini ya Oke paling jadi nyimpan nyimpan gitu sih Mas yang mana duluan pakai
itu V image intinya sih yang menarik yang beda kan si V image itu kan
ya ya ya nah itu yang ini ya
cuman sekilas pernah di template-template dari bawaan sendirian ini pernah melihat
pattern seperti ini nah penjelasannya di bawah sih coba sambil Scroll kebawah itu
itu yang standar ya itu standar blablabla ya lanjut nah ini nih yang yang menarik
PML using know that we have our standard background working for our non-outlook email
yang female khusus Outlook ya dan javascript gak bisa jalan kok enggak salah ya di HTML email ya
Oh iya jelas kalau itu bisa oke oke jadi kalau yang pakai ini beneran beneran ngelatih skill
HTML dan CSS dan kesabaran ini justru kalau HTML CSS itu kan standarize ya Nah ini kan
kalau email itu masalahnya adalah dia suka-suka dia mau ngikutin seluruh standar HTML dan CSS
atau pick and choose kayak cuma cherry pick lah yang ini bisa, yang itu enggak,
karena dia enggak mau, dia punya cara sendiri yang nyambul dihitung.
Nah masalahnya kalau di email itu jarang ada praktek kalau misalkan nih,
kalau di browser kan kalau misalkan kita buka dan kita tidak rekomendasikan,
tolong buka ini di browser ini gitu kan.
Kalau di email kan nggak pernah kan? Tolong buka di Outlook.
Oh 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
Playback-nya itu.
Iya.
Iya, ini pengalaman-pengalaman ya.
Udah desain cantik-cantik, settingan di Thunderbird gak di-allow image-nya.
Berantakan lah itu ya.
Cuma itu soal komunikasi juga sih ya.
devqe staging gambar email keluar pasti production gambar nggak keluar apa sih
saya I feel you I feel you cuma itu mungkin agak rumit ya kalau e-commerce kan masa yang
ngaruh gitu penting apa gambar produknya harus ada kita ngirim produk produk ini ya produk
contohnya personalisasi ya produk yang kira-kira disukai berdasarkan hasil-hasil searching atau
hasil browsing terkirimkan promosi gitu kalau enggak ada gambarnya kan jadi ini ya jadi kurang
menarik rasa menarik itu tanda tanya atau broken image gitu kan enak kurang menarik dan agak
sulit karena analitik sih juga ya kecuali pakai bisa cuma terbatas dan bisa kalau sekarang kalau
orang perlu analytics pakai layanan ya kayak Mel simsen grid dan lain-lain dari situ kan kita bisa
deteksi seberapa banyak dari user base kita yang pakai upload kalau banyak ya udah suruh dan juga
nggak bisa ini ya nggak bisa dark mode like mode itu susah ya pokoknya nggak bisa aneh-aneh Pak
karena kayak gini misalnya email email kliennya si user contohnya gue di handphone pakainya dark
mode kalau buka Gmail ya dia backgroundnya dark putih oh dark ya ah backgroundnya tulisannya
putih kan tapi dari dari Gmail nya udah ini kok otomatis udah bisa dia dia yang
nge-convert Oh enggak cuma gue pernah kena kasus kayak gitu juga mirip jadi sebetulnya sebisa
mungkin kalau buat ini di luar kasus khusus yang desainnya harus indah banget sih ya kalau yang
practical fungsional sebisa mungkin background dan teks color itu kayak pakai default aja karena ya
itu yang tadi bilang Ivan otomatis di switch tapi misalnya misalnya gini deh kita punya kayak
subtitle atau subcaption atau apa terus kita warnain abu-abu dengan asumsi abu-abu tua ya
abu-abu yang agak strong menyesuksi abu-abu emang monyet abu-abu ya dengan asumsi bukannya
di light mode nah ternyata pasti bukan di dark mode nah itu nggak otomatis ke convert kalau kita
pakai inline style atribut style CSS jadi misalnya span style sama dengan color titik 2 hashtag 333
ini kurang tapi kalau waktu itu sih ngakalinnya buat caption yang agak soft opacity itu aman
Oh mau lebih misalnya kalau di-like mode kan judul utamanya pakai item nih itu karena kalau
bukan kita yang mendefinisikan warna hitam tapi ya udah dari semuanya backgroundnya putih tekst
hitam bawahnya tulisan yang captionnya subtitlenya jadi agak abu-abu sebenarnya
itu bukan abu-abu tapi opacity 0,8 Nah kalau dibuka di darknet ya udah aman teksnya putih
backgroundnya hitam, textnya putih, captionnya abu-abu muda.
Nah, cuma kan kasusnya kalau kebetulan yang desainnya harus estetik banget,
itunya ada brand color lah, misalnya backgroundnya biru, textnya putih.
Nah, kalau kayak gitu, justru kalau warna-warni sekalian gitu boleh sih,
tapi baik background sama text color, dua-duanya harus di-define warnanya
biar nggak ke flip kalau lagi di dark mode.
Nah ini di sini kita coba berbagi pengalaman teman-teman Ivan atau Eka atau saya
yang 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
itu ada tinggal drag and drop bukan tinggal ya bisa drag and drop pilih templatenya mau ada
header ada tiga kolom footer atau mau yang satu kolom dua kolom dan lain-lain itu bisa pilih
nanti yang mau di insert apanya nanti greetingsnya apa halo bla bla bla gitu kan halo nama first name last name gitu
itu bisa dari editornya nah tapi kalau yang programming kita ngirim email kayak lupa password
ya kalau sekarang mungkin service untuk autentikasi udah banyak ya itu udah diurus sama out zero kah clerk kah
atau Firebase dan lain-lain.
Kalau dulu kan kita harus bikin sendiri email transaksi,
juga sendiri.
Atau email onboarding deh.
Begitu ada user registrasi, dia masuk,
terus tiba-tiba ada email,
Halo, selamat datang.
Kalian bisa dikasih rekomendasi.
Silahkan cek.
Nah, itu ada beberapa tools yang bisa kita bagikan.
Yang pertama, saya awal banget tahu
ada framework untuk email template itu nak dari foundation condition itu kan dikenal sama dikenal
dengan ininya kan ya apa CSS framework zerk-zerk polisi pertama kali banget belajar HTML tuh sama
suruh logonya lucunya tif dia ngeluarin framework untuk email dulu namanya singgo pakai-pakai ing
Blue Ink, ya namanya dulu Ink, sekarang berubah jadi Foundation for Emails.
Ini udah versi 2 nih, Foundation for Emails 2.
Yang pertamanya mana ya?
Ya itu Ink, Ink sebelumnya.
Oh, itu Ink.
Enggak, sebelumnya Ink, abis itu berubah jadi Foundation for Emails.
Terus sekarang Foundation for Emails 2.
Ya, gue pernah pakai ini juga, pakai ini.
karena mempermudah hidup mempermudah hidup bisa responsif juga kan ini diatur semua sama dia jadi
kita enggak perlu mikirin Oh kalau ukuran air segini gimana ukuran air segini gimana dulu susah
lo bikin begitu sampai sekarang susah sih kalau email Iya jadi ini sistemnya kayak kompilasi ya
atau transpilasi ya dari kayak gini komponen-komponen jadikan HTML nya
tebel dia dia bubble ya kayak babel babel ya kayak babel kalau kita getting started
kita bisa pilih nih mau yang CSS apa yang sas bahkan udah bisa pakai sas ya
jenis CSS download Oh ya oke suka lupa ya berarti ketahuan nih siapa yang pakai monitor
siapa yang pakai monitor eksternal siapa yang pakai motor laptop kalau pakai monitor eksternal
kelihatan langsung gede kalau monitor laptop kecil ini monitor external iya pakai monitor
ini pakai table terus dia bisa pakai grid tapi ini di convert ya ujung-ujungnya jadi
ya betul jadi kita tetap modenya pakai pakai base seperti biasa ini atau yang mana tadi ya yang ini
layan tadi contoh tadi ya yang dibawah sini ya ini kan kita modenya kayak gini Oke jadi bikin
ini cuma apa sendiri bukan enggak serumit ini tapi behind the scene doang jadi simple sih ini
akal-akalan montir yang montir level paling paling bawah lah bikin storybook isinya react
Ini internal soalnya, isinya react-component, ya udah bikin kolom-kolom masing-masing kolom, dibikin table, dibikin HTML biasa.
mau pakai ya kan storybook kan ada previewnya tuh ada previewnya ya udah langsung ya manual aja
pakai apa DevTools di copy deh HTMLnya isinya oh hasilnya cuma kalau itu sih dalam kasus ini
ini kan itu buat internal pertama for my own sanity ya biar gua nggak gila bikin apa bikin
itu tadi sintaks table-table sama inline CSS buat email, jadi bikinnya enak pakai React biasa,
pakai React sama CSS biasa, itu satu.
Dua, buat feedback, buat preview, maksudnya pas lagi buat tiket internal sama tim,
nunjukin jadinya kayak gini, kayak gimana.
Jadi datanya juga kan, ya karena ini aplikasi React internal, datanya bisa disuplai contoh-contoh data,
bisa langsung nge-fetch data dari apa service yang dipakai juga yang akhirnya bakal dipakai
di integrasi buat sendript juga jadi buat keperluan preview juga pas udah oke terakhir
banget baru ke manual aja copy HTML nya ke sendript sama diganti yang string apa
command option F replace all buat apa template stringnya sama pakai format template stringnya
inggris udah itu cuma kalau-kalau yang ini versi yang revitenya yang dibikin produk ya kalau
pendekatannya yang mirip tapi ya kasar anak apa namanya kalau anak HTML 5 yang zaman sekarang
tuh pusing lihat yang final HTML itu hasil final HTML itu pusing anak HTML 5 kalau anak HTML 1
atau m4 ya kita-kita ini ngerti nih anak Dreamweaver nih hahaha
ya kayak mjml betul ini tools yang saya gunakan bener-bener saya pakai pada saat bikin produk
kalau mjml saya cuman tahu tapi belum pernah pakai kalau ini lebih modern jadi dalam artian lebih
lebih apa hadir setelah si foundation ini muncul mjml ini katanya mirip pria bener gak sih
enggak tahu bener-bener pernah ngomong sama lah ya kurang lebih sama ya kayak ini
ini sama kayak yang gue punya yang gue kasih tadi ya IMP email IMP IMP juga bikin tuh Iya
amp email kalau mp3 masih jalan ya ininya ya untuk iman sejalan pernah nggak di-invite sama Google
pernah nggak di-invite orang di kalender tapi di Gmail nya sudah ada yes no maybe pencetannya
langsung di email langsung di email Iya Iya itu itu itu amp kelebihannya selain itu adalah dia
bisa ngejalanin javascript Gmail tapi hanya bisa jalan Gmail javascriptnya tapi kalau ya normal
kalau di Gmail baik itu di Gmail di Gmail client atau Gmail web bisa jalan ya oke buka bedanya
gini ya Gmail client yang di-info di handphone sebagai app tapi kalau Gmail email di handphone
bisa hanya Gmail yang di desktop yang Gmail web di desktop Gmail email yang di mobile berbeda lagi
itu kayak nggak di-maintain banget ini favorit email data CSS trik ya itu ini apanya HTML header
untuk menyatakan itu Oh iya mirip-mirip lah ya mirip-mirip ya tiga ini ya mgml
foundation sama bedanya kalau AMP ini kita kirimkan AMP si Gmailnya sudah tahu nggak
perlu 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
halo halo oh ada oke sempet terputus-putus tadi
ada ada ada koneksi gue juga kurang oke nih
kok berbarengan gitu ya jadi jadi gue yang curiga jangan-jangan koneksi gue yang kacau
nah balik dulu ke ini dia Inki
tinggi tinggi Nah kalau tadi sasnya gimana bentuknya dia bisa langsung di oleh masing-masing
iya get started Oh jadi stated yang saja get started with sus version harus install dulu
CLI nya
oh kita ngebuild di lokal ya berarti
terus foundation new framework email
running the server
file structure nya ada
asset layout kayak bikin web ya
kayak bikin web app
ada default html
versi yang proper dari
akal-akalan montir gue tadi kan
jadi kan
prosesnya
dibuild nah terus ada
terus mana email klien segi mail and Outlook strip out style from the head
mana stasnya mana keadaan ya itu alfalfa atas-atas ini di paling atas coba ke atas
itu ada using such guys kiri di kiri kiri guys bawa ya nah soya side para namanya ini
Grand Oh pakai masih pakai Grand import-import setting omnision dulu sama grafik penasaran ini
masih di-maintain ya ya harus login gitu karena mau ini karena mau bikin great issue
it up.com slash foundation ini sudah linky ini apa edit ispix foundation foundation email
foundation foundation foundation email pakai es enggak pakai enggak ada es pakai es pakai es
pakai es berdingin dikit ingin nah hahaha dua tahun yang lalu wih masih hidup batik masih dua
tahun itu hitungannya oke ya masih oke stabil email template email template stabil ya maksudnya
enggak berubah-ubah kan mjml berapa nih kitab dua minggu yang lalu lebih aktif ya
lihat dulu komennya jangan-jangan cuma kayak nomor itu depan the board remove
nesting section dokumentasi Oh dia lumayan ini isinya 75 gimana sih JML cara kerjanya tadi
pas 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
kalau saya dulu sukanya pakai itu ada drop interface-nya lo coba lihat dong paling
di sidebar paling bawah di sidebar ada paling kiri bawah paling bawah ya itu dia
try passport the email builder based on jml saya dulu suka beli-beli yang di code canyon
jadi email templatenya sudah ada ada builder drag and drop ganti warna jadi terus dijual di
email ya 5 template dipakai di packaging terus dijual zaman dulu ini jadi email kayak gini
sudah sudah dibikin Iya sudah keren kan sudah dibikin jadi saya pernah punya bisnis agensi
tapi bikin produk jualan produk secara online tapi untuk desain-desain email yang sudah di packaging
awalnya bikin manual tuh satu-satu di slicing habis itu lama-lama kok kayaknya nggak pinter-pinter ya
terus akhirnya beli tuh tools-tools yang sebelum ketemu sama Inky beli tuh tools-tools di Codecanyon
yang automatic builder jadi beli agak-agak beberapa yang bagus-bagus kita desain terus kita masukin
desainnya kita kita bagus-bagusin di package jadi jualan 10-25 template $10 $9 ada ada
ada tim marketingnya lah yang nge-package itu dan ngejual itu.
Tugas saya.
Tentu apa?
HTML CSS?
Sudah dikasih PSD-nya.
HTML CSS-nya sudah jadi.
Dikasih sama PSD-nya sekalian.
File PSD-nya.
Nah, itulah yang dijual biasanya.
Ada timnya yang ngejual saya bagian dapur yang ngebikin masakannya.
Gak benar.
Tapi berarti kalau ada kode HTML-nya kan,
kalau PSD kan sudah slicing sudah jadi HTML sudah tinggal pakai jadi HTML CSS sama email template sudah jadi
oke nah ini menarik nih ada MJ breakpoint kita bisa tambahin breakpoint untuk responsif ya
terus ada editornya nih kita bisa coba-coba nih ada button nggak MJ atau ada button tuh klik dong
Hello Hello ingat promenade berapa nih dulu belum ada beginian
coba film HTML nya fit
itu HTML nya style-nya begini bisa ya Bisa bisa bisa bisa bisa bisa lihat ML kan ya
namun ada beberapa nilai klien-klien menghapus ada
kalau Gmail nge-strip sebagian
sebagian loh nyebelin
kalau media query
di-strip
yang gak safe
buat
dia karena dia kan punya
renderer bisa ngerusak
seluruh Gmailnya dia hapus
kayaknya kalau display
misalnya kita display
block inline fax itu display juga
bakal di-strip ya pokoknya dia punya
internal itu sendiri
sistem sendiri ada yang bisa dengkul display nan juga kalau nggak sih strip-distrib karena pernah
bikin juga kayak karena mau bikin kayak bukan kayak image-image tracking atau apalah betul
panjang sekali 155 baris dari itu mso atau AI ini udah ada ya
tuh 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
project yang seperti ini ya pakai salah yang gua bakal sekarang today Island kalau misal
kalau disuruh bikin lagi email template gua pakai ini MJM ya Oke jauh banget effortnya ya kalau
bikin sendiri begini ya Nah terus ini kadang kan kalau tim kita kan nggak ngerti nih konteksnya
kirain ya musik HTML CSS doang lo kan anak proyek misalnya dianggap jago HTML CSS ya apa yang susah
Apa yang tricky? Padahal email ini kan kasusnya beneran khusus banget.
Jadi ya kita harus dipersenjatai semua link-link referensi dan kita harus mau jelasin di awal
bahwa apa yang bikin gak mungkin itu, itu kayak teknologi email,
klien email itu gak standarize sama sekali.
Jadi gak semua bisa berlaku.
Kita kudu ngomong dulu di depan daripada udah bikin,
kok kurang ini, kurang itu, terus ada request macam-macam yang kita gak bisa implement.
Iya ya bener juga ya kalau kita mau pakai mgml ini kita harus informasikan ke tim
desain mungkin yang mendesain ini bisa nih jangan pakai HTML pakai mbm semuanya Emang
semuanya sebelum ngedesain itu harus diskusi dulu dari skeleton nya sebelum ngedesain
enggak cuma harus belajar dulu dong ininya gimana caranya enggak cuma email Mas web
juga begitu semuanya yang sudah sini asumsinya gini misalkan ada dari designer ya kita sedia
nih HTML CSS CSSnya inline ya kan karena udah tahu email gitu kan kita harus convert lagi ke
mjml kan ribet kan ya dari HTML ke mjml bisa enggak ya ini jadi balik gitu coba aja cari
bisa jadi balik lagi ngapain ya kalau udah jadi HTML ngapain ya kalau ini perspektifnya ya
tergantung ya kalau desainer biasanya kalau terutama di Indonesia kalau desainer kan nggak
bisa bikin bisa sesing ke atem CSS juga kan bikin di Figma kita yang harus itu ya ya front-end ya
ya semuanya satu orang merangkap pinter ya apapun itu punya yang dirol frontend
merangkap jaringan jaringan betulin printer developer peluk gede
php ada enggak php buat ada khusus php gitu mustes
itu kan pen-play tingnya mustahil senyum garis itu gua leblanc customer name kalau sistem PSB
buat email nomornya tengok sih rumah daya Oke terus bahasa pelagi email tadi udah dibahas ya
Oh ya udah deng can I email kan email itu apa ini jatuh kalau lagi bikin email-email itu karena
email itu ya dibilang web ya agak web tapi dibilang web juga gak sebelumnya web
maaf lu gua lupa kalau apple mail itu ada
aku kasih email kan kalau misalnya di macOS ngeklik email link yang muncul kebuka selalu itu tuh annoying
oh iya proton email gua pernah pakai
proton email
one and one
baru one and one itu hosting
hanya web kan
one and one itu hosting loh
hosting gede
hosting provider
web.de, srf, sfr
itu kan sebagiannya utik client ya
kita belum pernah denger
mereka semua punya implementasi sendiri sendiri
knowing kan
orange
Gmail beda lagi mas
Gmail itu di IOS beda lagi
Gmail ada, itu Gmail ada.
Tapi di bawah.
Maksudnya yang nggak pas.
Itu kan ini, Kena email ini kan punya berapa tuh?
Ada fitur, 267 fitur, 284.
Apa itu?
Pakai grid bisa nggak?
Apple bisa.
Alain Atoms bisa dia.
Sama Outlook bisa.
Tapi yang MakeOS.
Yang Windows nggak bisa.
Oh berarti bawaannya si Apple bisa semua bisa OS nya ya OS nya ya berarti ya
agak-agak mainblown engine nya bawaan dari OS ada aplikasi-aplikasi mail-mail.com
yang include sama Mac OS sama iOS apa bukan maksudnya gini ini kan display grade nih kita
cek display grade kan itu semua yang OS nya Mac OS itu bisa Apple Mail juga sih Gmail di
iOS bisa Gmail nggak bisa ya Gmail nggak bisa nggak bisa Gmail nggak ada Mac OS soalnya Gmail
juga nggak bisa Oh iya Outlook iOS ada enggak Oh nggak bisa juga bener cuman
Mac OS aja yang bisa Nah itu Oh 2019 nggak bisa 2024 sudah bisa udah bisa ya
Apple email malah bisa ya pakai grid ya Oh ini aku ingat ternyata paling maju kan tadi tuh di
scoreboard tapi justru banyak-banyak Apple mail loh itu nggak pake-pake email Ico kalau apa
ya ekosistem Apple laptopnya MacBook terus handphonenya iPhone kayaknya mendingan pakai
Apple Mail lebih tentu orang yang anak Apple banget yang semua apa semua pakai produknya
apa Apple sih kayak gitu lah kalau gue kan HPnya Android email utamanya juga email Gmail
sih jadi agak pointless walaupun bisa bisa di apa bisa diintegrate tapi ya masih lebih enak
kalau gue ya lebih enak packaging ya oke pembukaan berbentuk menurut masih ya kirim
udah udah udah sunset masih ya masih nyala ya masih nyala di coba buka scoreboardnya lagi deh
Thunderbird lumayan atas kok.
Yang buat MetaOS ya?
Peringkat 7.
Nah, itu peringkat 7.
Yang buat MetaOS-nya.
Oke, oke.
Nah, ini ada pertanyaan dari Mas Indra.
Kayaknya tadi kita udah bahas ya.
Eka udah bahas tadi ya.
Invert color di email kalian pasti menyadar.
Salah satu tipsnya pasal opacity ya.
Iya cuma kan itu nggak bisa yang rumit ya misalnya kalau brand color kita pengen punya aksen color
warna kalau light mode ungu nya ungu agak tua biar kontras kalau dark mode ungu nya ungu agak muda
Nah kalau yang itu belum nemu jawabannya sih cuma kalau yang tadi simple ya udah pakai warna default
kalau yang mau lebih soft dimainin di opacity nya nah terus balik ke itu tadi style apa style style
yang terpisah kan bisa sebagai dark mode
itu kan media
media preferences
dark blablabla kan
nah kita bisa pakai itu masalahnya
di sebagian besar client email itu bakal
ke strip jadi ya sulit gak bisa
oke
oke
ini ya agak-agak
tricky juga ya sama ya
kalau email clientnya otomatis
dark mode kayak gmail gitu ya
sulit ya Iya ya atau aplikasi apapun yang kalau dibuka di HP terutama yang bisa dark mode
otomatis item tuh background-nya hitam atau abu-abu gelap teksnya putih jadi seberat kalau
nggak 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
Tapi ya nggak bisa berubah-ubah kalau light mode, dark mode.
Nah, coba sambil dibuka aja nih, reverse color scheme.
Oh, MJML bisa.
Sekadar nyari MJML udah support.
Udah support.
klien emailnya belum tentu ya tapi coba-coba Woi coba masukin ini tadi ke ke apa namanya ini
mungkin ada yang lebih lengkapnya enggak masih lebih lebih banyak coba mungkin render jadi
Swap logo for dark mode ini outright live tuh langsung ketik
litmus-litmus
ya kayaknya terus gimana caranya ini ganti di OS nya iya display apa bukan display
apa sih sistem setting-setting sistem setting appearance appearance light nah
coba-coba gimana sih dia bikin gimana sih dia bikin
menarik sekali Wow lah cuma itu pakai per-apapun reverse color skin nggak Iya pakai itu iya cuma
pakai apa sudut pakai root custom CSS variable custom properties belum tentu bisa dibuka di
semua email klien ya Iya ada yang support ada enggak coba buka di private chat tuh ada linknya
kenai email
nah
46%
support it, jadi yaudah
46%
44% nya
yang bisa menikmati
yang bisa menikmati
itu tadi misalnya kita udah wih keren bisa begitu email testing email loh kok hilang
kok ilang logonya pertanyaan berikutnya ada enggak sih service yang buat ngetes per email
kalau browser kan ada itu browser stack kalau email ada email stack
coba ya for email
oh tadi ada yang mention nih mana bentar Valeria ini apakah ada pilihan email testing yang lebih
selain kepit kita aja belum tahu nih melpik itu apa mail-mail STS mtp testing tools itu buat
ini dia itu buat dikirim dan kita lihat hasilnya ngirim ya emailnya ini dua es binblok
aneh banget main Fit karena email-email dipakai Mas Tiza eh sorry IP IP addressnya mungkin sudah
flag ini ada GitHub nya ya kita punya jadi nah
kita pian nggak bisa ngeblokir memori zero depresi multiplatform email testing
XSS 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
Mailtrap, mailtrap itu buat local host email supaya enggak lari ke email beneran kan?
Saya pernah pakai ini mailtrap.
Kayak virtual inbox.
Kayak local inbox.
saya pakainya mailhook mailhook eh tadi mailhook udah nggak di-maintain katanya
ya itu tadi di nolonggol maintenance enggak papa tapi tetap stabil tetap stabil selama
ya kalau kirim itu kan saya nge-intercept jadi iya di-prep ya ini kayak daripada kita pakai email
apa yang share inbox itu lebih bagus pakai ini emailnya beneran tapi nggak dikirim beneran gitu
kirim biasanya kalau ngetes di lokal kan kalau misalnya develop di lokal ini emailnya beneran
terkirim gak sih gitu dan hasil-hasil emailnya hasil emailnya seperti apa ya jadi meskipun saya
bisa lihat hasil panggilan tapi bisa lihat HTML nya bisa lihat isi dalamnya kelihatan itu gunanya
di melhock Iya sih Iya sih harus desain beneran juga ya Nah tadi berarti tadi tips yang salah
satu yang cukup powerful adalah kalau nggak bisa lihat secara lengkap atau secara bagus
silahkan klik untuk buka halaman webnya udah kayaknya udah paling bagus ya sama link unsubscribe
itu wajib hukumnya harusnya bisa dirimu mungkin biasanya mungkin kita bilang minta itu dirimu
saja biar nggak bisa subscribe nggak boleh itu hukum soalnya masih banyak loyang melakukan itu
tapi linknya nggak bisa working di klik tapi kalau service external service karena nggak bisa sih
kemel simetris yang gitu mau dia kali mau diseling kayak gimana dia otomatis nge-add
nge-add otomatis gampang kalau di Gmail kan tinggal mute udah selesai kirim email tapi
kita tidak baca
report spam
kalau kita ngirim transaksional email
yang tidak ada subscribe-nya
bakal lebih besar
kemungkinan dimasukin ke
spam juga kan
spam filternya Gmail
oh iya ada kemungkinan ke sana
ada
email dan tidak ada
subscribe-nya yang bisa dicurigai
sebagai spam
melosor ini lagi loh melosornya halo halo email ini tadi semuanya masih
koneksi koneksinya saya ya gantian berarti saya yang nggak bisa ya
itu di banyak lagi ngerang nggak ada ya
kalau browser-browser engine layout engine cuma berapa ya cuma tiga ya dengan semua permutasi
device tapi kalau tadi kayak email diskor Word aja banyak banget dan hebat emulatnya tuh lumayan
ribet
Mas Riza
nge-freeze
oh react email
halo halo halo
ada audionya
halo aman
audionya ada
tapi videonya
enggak
ya video
udah ada juga
react email ini yang baru ya
oh putus
Wah 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
kan library library open-source Oh iya iya kayaknya Oke di seperti pakai itu aja tadi
storybooknya kayak katanya Eka dibikin aja di storybook
mdml
hasil htmlnya
cuma ini programnya
ini programnya
generate outputnya aja
di build
ya ya ya ya
menarik menarik menarik
wah bagus
ada integrationsnya lagi
email Saurus buat preview di email klien Oke pernah dengar Google Saurus ya ya
Mylosaur.
Mylosaur.
Sebentar, habis di-review.
Ini koneksi.
HTML button.
Wah menarik ini.
Komponennya apa aja?
Button.
Pasti ada button.
pasti selalu ada button itu terus bisa diintegrasi ke layanan apa pengiriman email jadi kayak mungkin
udah langsung sesuai format template-nya kita enggak usah replace manual untuk variabelnya
ya sama mungkin apa API kayak kan bisa tuh programatik lima update template sendript atau lainnya
mylosaur Wow bagus email SMS
email SMS mesin simple API tampilannya kayak gimana ya penasaran juga nih require
harus klien message get expect email subject to be my password reset bukan UI ya konten
teksnya ini kayak Cypress gitu Iya enak ya Iya apa sintaksnya tapi ini bukan bisa ngelihat di
klien email klien Gmail dan lain-lain bukan ini bukan UI apa review Oh buat ngecek kalau
email kita beneran ada subjeknya apa terkirim dengan betul subjeknya sesuaikan kek masai
kasus tadi tuh misalnya lo salah salah replace templatenya Hai customer name customer namenya
enggak ganti karena misalnya di database soalnya filmnya name doang yang gitu-gitu sih eh bisa
katanya bisa juga buat gimana caranya email testing match simple Oh iya ada tuh email
di website-nya
mana?
saya penjelasannya, takas dikit
zoom in
email preview
everything you need to test
image
ini
di home-nya
home-nya
email preview
di home
ini kan Oh di sini ini ya itu instan misi how your email will look to recipient coba di coba
diproduk mungkin di dalam produk Mas email testing email review review email preview
kita cari tapi harganya pasti nggak murah ini pricing hahaha
free for free 14 days
free for 14 days
trial
tapi menarik ya ternyata ada ya
preview emails
selama ada kebutuhan pasti ada solusinya
iya
tapi gak banyak
gak banyak kan
gak banyak
semua kan di development
di product lah
di product semua adalah trade off ya kan
Ya mungkin ada yang penting banget emailnya dirender secara perfect di semua email klien dan bersedia bayar.
Nah kalau kayak misalnya case-nya gue yaudah disimplify desainnya biar bisa ngikutin constraint yang ada tanpa butuh tools kayak gini.
Ya kan kebutuhan itu lain-lain.
Kebutuhan masing-masing.
Lotus Notes.
Masih ada Lotus Notes.
ini ada tulisannya Hah serius masih ada Oh my God Gmail Kapan itu dari IBM itu cuma dia bikin
marketing pasti udah survei audiensnya butuh keterbuat apa dan justru itu orang yang rela
bayar itu kan saking susahnya bikin-bikin sendiri susah ya
Oh eh eh kan nggak ngalamin ya Lotus 123 nggak ngalamin ya Lotus 123 nggak ngalamin saya pakai Lotus 123 itu spreadsheet
Lotus 123 itu email IBM killer application di dos
iya adalah spreadsheet tapi jalannya di dos di CLI di terminal sebelum Windows 93 sebelum ada Excel
terus 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
makanya begitu saya dengar, kok ada Lotus Notes ya ampun
dulu pemakai, disini gak ada yang relate nih pasti
tapi saya harus ngapalin tuh dulu Lotus 123 itu shortcut-shortcutnya
dulu masih ada Quick Basic kan masih ada dulu Quick Basic
Hai Cubase Cubase Cubase Cubase atau basic yang buat bahasa Oh ya Cubase batian buat buat kayak
Microsoft Word ya yang nulis Cubase bukan Wordstar ya bukan Wordstar Wordstar ada juga Wordstar ada
database waster ada juga oke masa-masa itu belum ada belum ada internet belum ada internet CD ROM
CD ROM itu dulu barang mewah Oh iya sekarang udah enggak ada mau kemarin itu beli apa ya beli
monitor dikasih sini ini bukannya gimana mau Instagram gimana mending gua-gua waktu married
eh waktu married terus kan ada tukang-tukang fotonya kan ada tuh jadi hasil fotonya itu dikasih
dikasih sini gimana itu gue mandang ke istri kita bukanya gimana ya nggak punya di sini
rp-nya lagi nah gue sampai sekarang punya DVD rp eksternal cuman nyebelin sih malah nggak pernah
pakai 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
sampai punya DVD sama sini tuh kayak berbanyak lah esnya Iya dengerinnya pakai Winem bikin
orang miksi di dan lain-lain terus cuma belum pernah punya DVD proper harus mikir wah one day
kayaknya harus beli buat ngurus koleksi juga kan buat ngerapi-rapihin dulu ekstralah misalnya
apa yang diterima jatuhin lompokin berdasarkan genre atau apa maunya buat ngerapi atau ngasih
orang atau biar kalau misalnya ada yang mau numpang nge-burn ya udah di tempat gua aja
biar melihat terima kasih baik time akhirnya di dvdrw external yang bagus lama-lama
teknologinya sampai sekarang masih punya Oke begitu sebelum semakin terbongkar umur kita
mungkin kita udah dulu ini topik yang sangat bahaya buat teman-teman seperti biasa kita
tetap mengingatkan untuk mampir-mampir ke sana.internet.com.br dan web
kita diskusi-diskusi di sana
atau kirim DVD, kirim CD ke kita juga bisa
biar apa ya, diskusinya nggak cuma pada saat live aja
tapi juga pada saat hari Rabu, Kamis, Jumat, Sabtu, Minggu, dan Senin
ke sana.internet.com.br dan web
itu GitHub ya
kitab Nero win mwmp lasik Windows media player masih ada kan Windows media player
pokoknya kalau kalau OSnya Windows itu harus ada antivirus ya
kalau sekarang gue yang marahin kalau ada orang masukin ke warnet terus balik masukin ke
ke PC udah selesai itu hidup isinya harus format ulang isinya virus semua
sekarang udah zamannya ransomware nggak berontok selagi orang-orang nah ini bentuknya begini
diskusi ya bentuknya diskusi mungkin ada teman-teman yang enggak yang belum belum
tahu ternyata di GitHub itu ada diskusi nah contohnya kayak gini nih http1 vs http2 vs
di TP3 tuh ada yang comment tuh terus nanti bisa apa namanya food juga jadi bisa topik kita
selanjutnya buat-buat ide topik kita selanjutnya meskipun kita kadang nggak ngambil kadang random
gitu ya tapi tetap kita lihat di sini kalau kita sudah apa nanti kalau udah bingung juga
bakal meluncur Iya jadi kita diskusi di sini enggak mesti hanya topik tapi bisa yang lain
kalau misalkan ada pertanyaan seputar pekerjaan, eh pekerjaan ya maksudnya web,
HTML, CSS, JavaScript ya pokoknya berhubungan dengan web, email, dan lain-lain.
Siapa tahu punya masalah di kantor yang belum ada solusinya, bisa tanya-tanya.
Tapi enggak janji kita bisa jawab ya.
Kita bahas di sini, siapa tahu yang di chat bisa jawab.
Yes
Ngobrolin web
Kesana.in slash ngobrolin web
Oke mungkin sekian dulu
Untuk malam hari ini kita ketemu lagi
Minggu depan
Nah minggu depan kita undang-undang narasumber ya
Insya Allah ya
Khusus topiknya juga soal yang
Pernah kita bahas belum lama ini
Jadi bakal seru
Bakal seru
Kita belajar hal-hal baru
Kita ketemu lagi minggu depan
Sampai jumpa
Selamat istirahat
Bye-bye
Deskripsi asli dari YouTube
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.
Episode Terkait
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
23 Jul 2025
Bedah Buku Problem Solving 101
Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini seba...
22 Nov 2022
Ngobrolin Viteconf
Episode ini membahas Vite dan ViteConf yang baru saja digelar. Dimulai dari pertanyaan mendasar: kenapa kita butuh bundl...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .