Ngobrolin URL
Ringkasan Episode
Bantu KoreksiEpisode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-alih terus mengejar yang sedang ramai. Alasannya sederhana — framework datang dan pergi, sementara yang mendasar bertahan; bentuk URL yang kita pakai hari ini sudah ada sejak awal 90-an, dirumuskan Tim Berners-Lee. URL dibedah bagian per bagian: skema di depan seperti HTTP, HTTPS, atau FTP; informasi pengguna yang jarang dipakai kecuali untuk basic auth; host yang sendirinya terdiri dari subdomain, nama domain, dan top level domain; lalu port yang biasanya tersembunyi karena 80 dan 443 sudah jadi nilai bawaan, jalur, parameter kueri, dan fragment di paling belakang. Fragment ternyata punya kemampuan bawaan yang sering dilupakan: menautkan ke penanda yang cocok dengan id sebuah elemen membuat browser menggulir ke sana sendiri, tanpa pustaka apa pun. Alasan kenapa ini perlu dipahami juga dijelaskan dengan membumi: tanpa tahu nama bagiannya, kita tidak bisa bertanya dengan jelas saat minta bantuan. Bagian penutupnya meluruskan istilah yang sering tertukar — URI adalah payungnya, URL hanya salah satu jenisnya yaitu yang menunjuk berdasarkan lokasi, sementara URN menunjuk berdasarkan nama dan lazim dijumpai pada berkas konfigurasi SAML untuk single sign-on. Disebut juga bahwa panjang maksimum URL berbeda jauh antar Chrome, Firefox, dan Safari — peringatan yang relevan saat orang tergoda menyelipkan JWT ke dalamnya.
Poin-poin Utama
- •Topik mendasar sengaja diselipkan rutin karena framework datang dan pergi sementara yang mendasar bertahan — bentuk URL hari ini sudah dirumuskan Tim Berners-Lee sejak awal 90-an
- •Sebuah URL terdiri dari skema, informasi pengguna, host, port, jalur, parameter kueri, dan fragment — masing-masing punya pemisah dan aturannya sendiri
- •Menautkan ke fragment yang cocok dengan id sebuah elemen membuat browser menggulir ke sana sendiri, tanpa pustaka tambahan apa pun
- •Port 80 untuk HTTP dan 443 untuk HTTPS tersembunyi karena sudah jadi nilai bawaan, dan skema lain seperti FTP masih bisa dibuka langsung dari browser
- •Segala sesuatu setelah tanda tanya bukan lagi bagian jalur, sehingga garis miring di dalam parameter kueri tidak dianggap sebagai jalur
- •Panjang maksimum URL berbeda jauh antara Chrome, Firefox, dan Safari — jadi berhati-hatilah menyelipkan JWT panjang ke dalamnya
- •URI adalah payungnya: URL menunjuk berdasarkan lokasi, sedangkan URN menunjuk berdasarkan nama dan lazim dijumpai pada berkas konfigurasi SAML untuk single sign-on
Loh kok sudah live, ya pra-pra kaget.
Loh bar mo, bar mo.
Kan, bingung kan.
Biar beda, biar beda.
Halo, halo, halo semuanya, selamat malam.
Selamat malam.
Selamat hari selasa, karena selasa malam waktunya kita.
Waktunya ngobrolin web.
Gimana kabarnya teman-teman, mudah-mudahan sehat semua ya.
Sehat-sehat selalu.
Sehat-sehat selalu.
Seperti biasa.
Kita sudah bukan pandemi lagi kan ya?
Endemi.
Eh, apa nggak tahulah.
Sudah tidak pandemi, tapi kabar-kabar terakhir mengenai apa?
Cuaca, bukan cuaca ya.
Apa, yang oksigen-oksigen itu di Jakarta terutama ya, seperti kabut ya.
Bukan oksigen kali, apa tuh?
Udara.
Partikel.
Partikel.
Iya, partikel udara yang membahayakan buat pernafasan.
Iya, itulah pokoknya.
Jadi kayak kabut gitu ya.
Tapi sebenarnya itu bukan kabut, polusi.
Lebih tepatnya ya.
- Itu ada yang aturannya. - PM 2.5 index.
Ini maksudnya apa kita nggak ngerti.
Ini indexnya.
Lihat transkrip lengkap (1464 segmen lagi)
Itu ukuran informasi, konsentrasi, partikulat.
Tunggu, apa ini?
Ya, jenis polusi lah.
Ya, mudah-mudahan teman-teman sehat-sehat terus, jaga kesehatan.
Kita kejarnya index, index Core Web Vital Lighthouse 100.
Iya, oke, jadi malam hari ini masih bersama kita bertiga, ada Eka, ada Ivan, dan saya Riza.
Ngobrol-ngobrol.
Iya, ngobrol-ngobrol seputar web karena kita adalah Google Developer Expert di area web.
Di area konsentrasinya web, jadi web teknologis.
Kalau Ivan itu performance ya.
Betul.
Kalau saya sama Eka, Capabilities.
Beberapa kali kita udah bahas tentang Capabilities, terutama waktu bahas tentang project Fugu.
Performance juga beberapa kali juga.
Malam ini sedikit berbeda karena kita ingin kembali ke dasar, ingin kembali ke fundamental.
Kita bahas yang fundamental, salah satu yang fundamental di web adalah tentang URL.
- URL. - Penyeleng URL apa?
- Universal, universal. - Iya, di chat lah ya.
Ada yang ngulis di komen, jangan gitu-gitu sendiri.
Ada URI, ada URL.
Nah itu bedanya apa ya? Kita bahas bareng-bareng.
URI dan URL.
Iya, kita juga mungkin kayak apa ya, kita tahu fungsinya apa.
Tapi mungkin penamaannya, istilahnya itu banyak yang kita belum familiar kali ya.
Termasuk saya juga.
Kalau dulu malah beneran nggak tahu sih, dan pertama kali ketemu kat istilah URI, itu new WordPress.
Kalau di setting-setting itu pasti ada URI gitu kan.
Lupa deh, di settingnya pasti ada deh.
Beneran pertama kali banget ketemu URI something-something.
- Lupa. - Tiba gitu.
Nah, terus soal fundamental ini, kedepannya sih kita kayak berharap bakal rutin ya.
Maksudnya walaupun kita selang-seling juga dengan misalnya API terbaru,
kadang bahas framework atau library, atau mungkin event-event terkait web.
Tapi semoga kedepannya ya minimal sebulan sekalilah kita bisa bahas yang fundamental banget.
Yang mendasar, balik ke asalnya.
Iya, jangan bahas yang hype-hype terus.
Kita bahas yang fundamental, karena yang bisa bertahan adalah yang fundamentalnya.
Framework bisa datang dan pergi, library bisa datang dan pergi.
- Tapi fundamental... - URL dari tahun 1990 sampai sekarang masih dipakai kan?
Betul, betul, betul.
Kita udah sempat bahas yang fundamental juga di JavaScript tentang loop-loop itu.
- Event loop sih. - Event loop.
Event loop.
Terus ada beberapa lah ya.
Terus sekarang kita mulai ingin setidaknya sebulan sekali bahas fundamental.
Ini adalah mungkin bukan yang pertama ya.
Mungkin yang kesekian gitu.
Tapi kita mau bahas malam ini adalah tentang URL.
Awalnya kirain typo, URI itu.
Iya, ini sama L itu hampir sama ya.
Guru besarnya itu kayak L ya.
Kirain lupa mencet shift ya. Lupa mencet shift, nge-tick L.
- Asal bisa lolos buat press tapi nggak mungkin banget. - Betul.
Nah, jadi pertanyaannya URL itu apa?
Nah, ini ada sedikit penjelasan dari...
Welcome to the jungle.
- Namanya... - Ini...
Iya, domainnya lucu ya.
Nah, ada URL, ada domain.
Nah, kita lihat di sini ada gambarnya kan, ada ilustrasinya.
Jadi URL itu ada terdiri dari beberapa komponen.
Yang pertama adalah skima.
Kalau sekarang mungkin semua teman-teman udah familiar dengan HTTPS.
Kalau dulu ada HTTPS, mungkin dulu ada FTP.
Kita bisa FTP dari browser kan.
- Walaupun hanya untuk baca misalnya. - Sampai sekarang pun bisa.
Masih ya.
Ada banyak, skima itu ada banyak FTP, SMTP.
- Terus kemudian... - Protokol ya sebenarnya? Benar nggak sih?
Protokol.
Tapi kalau buat alamat web kan, skimanya cuma bisa HTTPS.
Protokolnya bisa macam-macam.
Iya, bisa SSH juga.
Bisa banyak, cuman yang bisa dibuka di web browser ya mungkin hanya beberapa.
Kayak SSH ya, kayaknya nggak bisa ya.
Nggak bisa.
- FTP bisa? - Nah, FTP bisa.
Nah, setelah skima, terus kemudian ada titik 2.
Itu titik 2 termasuk skima nggak?
- Tidak ya? - Tidak.
Itu separatornya.
Itu udah default bawaan dari spesifikasi nanti kita bakal lihat.
Nanti ada ya.
Ya, titik 2 slash slash, kemudian ada host.
Host ini domain kali ya.
- Mungkin bisa dipecah lagi ya. - Ya, sebelum host itu...
Host sebelum itu bisa ada sebenarnya kayak itu user info.
- Kalau misalnya... - Itu tuh di atasnya.
Di URL Syntax itu bisa user info.
Oh ya, kalau kita pakai FTP ya.
FTP atau basic out.
- Atau HTTPS? - Basic out.
Basic out, ya basic out.
Kalau misalkan kita mau akses admin site yang tidak ada login page-nya, kita bisa pakai ini kan.
- Salah satu atau dua server ya. - Oh iya, kalau tergantung servernya ya.
- Itu yang dari server kan? - Tergantung servernya.
- Ya, apakah Apache atau nginx. - Ya, kalau pakai basic out dan...
Authentication pakai basic out dan itu datanya disimpan di HTPathWD.
- Bahasa Indonesia aja ya, HTPathWD. - HTPathWD.
- HTPathWD. - HTPathWD.
Ya, ada juga HTAccess kalau zaman dulu main-main sama Apache itu ada HTAccess ya.
- Dot, dot HTAccess. - Iya, dot HTAccess.
- Tidak sengaja kaplos. - Tapi itu plain text ya.
Ya, hati-hati. Dan habis itu baru masuk ke host.
Host ini biasanya kalau kita develop itu localhost atau 127.0.0.1.
- Atau domain kalau di... - Atau .local.
- .local. - Atau IP address.
Ya, IP address komputer yang mau diakseskan.
- Domain juga bisa. - IP address rumah apa ya?
- Huh? - IP address...
- 192.168.0.0.1. - Bukan, 127.0.1.
127.0.0.1.
Ya, itu localhost.
Terus diikuti dengan port, port ini juga...
- Optional juga. - Optional.
Kalau defaultnya itu 80 untuk HTTP dan 443 untuk HTTPS.
Terus kalau kita nggak pakai port, ya kalau HTTPS berarti dia langsung 443.
Kalau HTTP dia 80.
- Kemudian... - Boleh nggak HTTP tapi pakai 443?
- Coba. Nggak tahu. - Boleh.
- Boleh aja. - Boleh di portnya tapi kan?
- Iya. - Tapi nggak ada SSL-nya.
Yes.
Kemudian baru ada path, ya.
Kemudian ada path, path ini bisa dari /n/jobs/apa gitu kan.
Setelah itu dengan separator tanda tanya baru ada namanya query params ya.
Query parameter.
Ada yang kubuk search query, search query parameter.
Nah, ini ada breakdown yang lebih bagus di link satunya nanti aja.
Terus ada fragmentnya berarti.
- Fragment itu hash. - Fragment itu hash anchor.
Anchor atau pakai tagar, tanda tagar.
Ini juga cukup familiar, cukup sering digunakan dulu awal-awal ketika kita bermain-main dengan single page application.
Lama dulu sebelum se-keren sekarang kita pakai hash.
Routingnya pakai itu.
Routingnya pakai hash.
Oke. Dan sampai sekarang pun itu si fragment bisa dipakai apa?
By default kalau kita punya element dengan ID tertentu.
Misalnya kita punya element ID-nya foo gitu.
Nah, terus itu otomatis tanpa pakai routing library tambahan apapun.
Kalau kita pakai hash foo itu browser akan otomatis langsung ke bagian itu, ke element itu.
Terus biasanya ditambah smooth scroll.
Ya, boleh. Kita juga javascript pakai web API scroll into view ya.
Scroll into view.
Ada banyak API menarik ya. Ada view transition yang lagi hot ya.
Jadi multi-page application juga sudah seperti itu ya.
Keren, keren.
Sebetulnya tanpa javascript tambahan apapun,
kalau kita nge-link ke encore dan ada matching ID-nya itu otomatis bakal langsung scroll ke situ.
Walaupun tanpa tambahan.
Oke. Nah, mungkin tadi ada yang sedikit terlewat tentang alasan.
Kenapa kita perlu tahu tentang API ini?
API URL ini.
Bukan API ya. URL maksudnya.
Oh, tapi nanti dibahas tentang API yang javascript punya ya.
Ini masih penjelasan tentang URL-nya sendiri ya.
Tapi perlu juga, maksudnya kenapa kita perlu tahu ini host-nya apa atau path-nya apa.
Yang paling simpel, misalnya kalau kita ngikutin tutorial,
atau kita perlu bantuan, kita tanya di stack overflow atau semacamnya,
kalau kita tanya ke teman kerja sendiri atau siapa lah, ke komunitas discord dan lain-lain,
kalau kita nggak bisa, kita nggak tahu host-name-nya apa, path-nya apa,
kita kan nggak bisa berkomunikasi dengan jelas ya.
Kita nanya-nanya nggak jelas, nggak bakal dapet bantuan yang relevan.
Atau kalau misalnya kita baca artikel,
kalau kita nggak tahu path-nya apa, yang dimaksud path itu apa, query parameter apa ya,
yang kita tahu URL-nya aja gitu ya.
URL-nya atau link-nya, nah link itu apa kan nggak jelas.
Dan biasanya query parameter ini juga bisa digunakan,
kalau kita pakai form dengan tipenya get, dia akan menambahkan query parameter kan.
Bukan otomatis pas di-submit masuk ke URL itu lagi dengan query parameter isian form itu tadi.
Dan query parameter ini tanpa perlu menggunakan framework atau library JavaScript apapun.
Jadi vanilla pun udah bisa melakukan ini.
Dan formatnya itu key value store, ini key-nya, ini value-nya.
-Boleh nggak lebih dari satu? -Boleh nggak lebih dari satu?
Query sama dengan developer, no, query sama dengan ek, boleh nggak?
-Poleh, jadinya array. -Boleh aja.
Yes, jadinya array.
Jadinya nanti query string, kalau kita ambil query string query, jadinya hasilnya array.
Dan bahkan, ini kan key value pair nih, contoh yang di sini query sama dengan developer.
Dan page sama dengan satu, jaman dulu banget.
Jadi originally key-nya doang juga nggak apa-apa. Sampai sekarang juga nggak apa-apa sih.
-Jadi kosong aja ya? -Iya, kosongan pun boleh.
Ada penyelasannya tuh di link satunya.
-Boleh nggak di query string ada slash? -Boleh nggak sih, belum pernah nyoba.
-Di encode nggak sih, dia otomatis ke itu encode. -Oh iya, kita bisa bahas encode juga.
Kayaknya nggak boleh ya?
-Boleh, karena sudah ada tana tanya. Setelah tana tanya, apapun bukan path lagi.
-Apapun ya, apapun. -Iya, jadi delimiternya itu tana tanya.
Kalau sudah tana tanya, ke belakang itu slash itu udah nggak dianggap path lagi.
-Berarti, oh iya sering deh, kan pasti kalau redirect tuh.
Biasanya kalau route yang protected, terus kan redirect dulu ke login.
Biasanya redirect-nya ada semacam query parameter redirect after.
Jadi setelah berhasil login, kalau di redirect balik ke path yang tadi mau diakseskan,
itu biasanya ada slash-nya kan.
-Iya. -Ada pertanyaan, ada maksimum karakternya nggak?
-Ada. -Ada, pasti ada.
-Kalau domain, 63 maksimal, nggak tahu kenapa apa lah. Kayaknya dulu pernah.
-Kalau url, ada maksimum url. Itu ada, makanya nggak bisa JWT kepenyaman.
-Kalau 28 bit atau byte?
-Kalau di Chrome, 283 karakter. Kalau di Firefox, 65 ribu karakter.
Kalau di Safari, 80 ribu karakter.
-Itu berarti nggak standar ya? -Beda-beda.
-Nggak ada standar, maksudnya terserah browser.
Kirain maksudnya ada memory limit-nya yang standar gitu.
-Makanya kadang kalau bawa JWT di query string, hati-hati.
-Kadang bisa kelupanya, kan? Bisa terangkit.
-Jangan seluruh user data dimasukin JWT.
-Itu tadi url. -Ini ada yang ketinggalan tadi.
Ada yang ketinggalan nih. Ada subdomain juga. -Ini sebenarnya sama sih.
-Gak, itu kan masuk hostname. Hostname terdiri dari subdomain, domain name,
sama tld-nya, top level domain-nya.
-Kalau URI apa? -Itu ada jawabannya di link satunya.
Ternyata URI itu... -Resource Identifier.
-Kepanjangannya. URI itu adalah term yang paling luas ternyata.
Paling generic. Paragraf ketiga itu.
Any character string that identifies a resource.
Jadi itu kayaknya superset-nya.
Terus salah satu subset dari URI adalah url.
Uri adalah URI yang mengidentifikasikan resource berdasarkan lokasi.
Makanya ada l-nya kan. Uniform Resource Locator.
-Urn? -Urn? Gak tahu.
-Urn. -Paling pertama ya? Paling pertama banget.
-Dia uniform resource locator. Kalo l kan locator.
Kalo n urn urn uniform resource name.
Ini buka link-nya. Lebih enak penjelasannya.
Eh bentar, bentar. Salah.
Ini dia.
Jadi URI itu paling atas, term paling atas. Dibawahnya ada url dan urn.
Itu dia. Turun, turun, turun. Stop. Ini dia.
URI, url, dan urn.
-Berut tahu ada. -Urn. Biasanya urn.
Urn-nya apa? Gitu. Nah kita bahas.
Jadi kita sudah bahas yang url kan. Kalo urn itu gini.
Kalo identifier itu sama kayak tadi.
Jadi depannya schema yang gak peduli.
User, password, host, port, path, query string, fragment.
Sama gitu ya. Terus ada schema di depan.
Makanya kalo misalnya kalo urn-nya apa?
Kalo urn itu mau identified dengan lokasi yang kita tuju.
Kalo urn itu contohnya kayak tadi telnet, ssapah, itu termasuk di urn.
Dan schema itu bisa apa aja ya.
Gak mesti HTTPS, HTTPS. Bisa bikin.
Custom schema bisa kayak kita mau bikin telegram kan ada.
Contohnya tel, mail2, ada kan?
Tel, mail2 itu URI.
Dan setelah diadopsi, terserah browser mau behavior-nya gimana ya?
Karena kan misalnya kalo kita mail2, itu otomatis ngebuka default mail application di OS.
WhatsApp apa ya? WhatsApp kalo gak salah, WhatsApp.2 ya?
No, no, WhatsApp.2.
Itu akan membuka aplikasi WhatsApp.
Sedangkan kalo urn, biasanya dipakai kalo untuk single sign-on.
Kebanyakan. Jadi resource namenya kemana.
Jadi nanti XML-nya blablabla, urn nanti jenis, jenis entity-nya apa?
Panjang tuh. Urn, example, animal, da-da-da.
Jadi nanti, gue harus buka VSCode.
Anyway, bisa panjang tuh nanti untuk entity namenya.
Nah itu dijelasin pake urn.
Itu yang mem-parsing siapa, misalnya itu ditaruh di mana?
Di XML, biasanya untuk single sign-on untuk ke Active Directory.
Jadi pake, mumpung buka VSCode dan ada project-nya nih, gue lupa.
Gw sih langsung minta, liatin di sensor dulu.
Gak boleh buka sih, jadi gue cuma bilangin aja namanya IDP Metadata.
Jadi namanya Entity Descriptor.
Nanti ada u, entity ID-nya apa?
Terus dia urn, oasis, names, tc.
Samel, nah itu deh, pake untuk single sign-on, pake samel 20 metadata.
Jadi biasanya pake gini nih.
Samel metadata.
Urn, titik 2, oasis, titik 2, names.
Jadi sebenarnya ini nama separatif pake tanda titik 2.
Makanya namanya urn.
Sedangkan kalau url ngacu ke fokasi.
- Yes. - Nice, baru tau. Temen-temen di chat ada yang pernah pake urn?
Atau coba di-share pengalamannya?
- Urn. - Urn.
- Gue bacanya urn, sebenarnya bacanya urn sih. - URN.
- Kalau urn kan bukan url. - URN. Url.
Dan kalau temen-temen mau lihat spesifikasi aslinya, ini dia.
Kalau mau baca, silahkan. Yang bikin apa?
- Pak Ser Tim Berners-Lee. - Tim Berners-Lee yang dulu bikin browser pertama kali ya.
Eh, kok browser sih? WWW ya?
- Web Developer. - Web Developer. The Real Web Developer.
Jadi dia yang membangun jaringan.
Secara harfiah yang mau bangun platform web.
- Dan dia yang bikin sendiri. - Nah, karena ini spesifikasi teknis.
Berarti bisa kita undang dong kesini yang ngobrolin web ya.
- Oh, boleh, boleh. - Minta aja dulu nanti.
- Iya, diterima atau enggaknya belakangan yang penting ngundang. - Iya, itu ada penjelasannya uri, url, urn.
Ada yang sering pakai email tuh?
Katanya, ini kata damar bahaya. Bisa scraping.
Bahaya scraping email.
Di website ada mel2-nya kan gampang banget kan pakai regex kan langsung dapet tuh.
Untuk dapet, ya itu kembali ke...
Oh, scraping alamat emailnya ya.
Kalau memang udah ditaruh publik, ada alamat email ditaruh publik, ya berniat untuk ditunjungi kan.
Oh, kan sempetnya ternyata mel2 misalnya titik 2, Eka, remove this text please at example.com.
Jadi apa, kalau pakai buat scraping, text-nya jadi apa, itu kan alamatnya bukan itu sebetulnya.
- Masih banyak yang pakai kan ya? - Itu akal-akalan.
Iya, akal-akalan nontir. Tapi misalnya kalau kita, kita yang prof level lah, production level banget,
ya mungkin bisa pakai kapcah buat refill.
Di YouTube pakai itu kan? Jadi kalau misalnya YouTube channel, ada above, terus ada alamat emailnya,
kan ada itu security check-nya, refill email address, kita kayak nge-click button dulu, ada JavaScript check-nya,
baru dimunculin alamat emailnya.
- Jadi target spam. - Itu kayaknya berlekuat alamat email string apapun ya,
bukan cuma protokol mel2 aja.
Betul, semuanya bisa di, selama publik ya, udah harus menerima resiko di spam.
Ya itu, atau kita protect, kita protect pakai cara lain ya, sama kayak memprotect resource apapun yang...
- Kan sudah ada spam assassin. - Oh iya, iya.
- Semua email sekarang... - Masih hidup nggak sih? Masih hidup nggak sih project itu spam assassin?
- Wah nggak tahu deh. - Apa itu? Belum pernah pakai.
Sekarang kayaknya pakai Gmail pakai itu kayaknya udah built-in ya, jadi nggak perlu pakai.
- Itu project-nya apa, C? Spam assassin. - Oh.
Iya, pernah dengar, pernah dengar.
Nah, berikutnya, ini yang mungkin sebagai orang juga belum familiar dengan API ini,
jadi si web itu punya JavaScript API untuk menguruskan semua urusan tentang URL.
Jadi kalau misalkan, ya misalkan teman-teman dulu kalau misalkan, wah mau cara manual nih,
mau parsing, misalkan parsing...
- Query parameter. - Query parameter.
- Wah diparsing, apa, cari... - Kurang ming.
Split, split tanda tanya, terus split sama dengan, wah.
Eh, bukan sama dengan. Seprit ini dulu dong, tandadan.
- Seprit tanda tanya dulu. - Oh iya tanda tanya dulu dan...
...habis itu sama dengan, iya kan?
Atau mau construct URL, dia tambahin domain-nya, terus slash sendiri pakai concat string,
terus parameter-nya tambahin lagi sendiri, itu cara dulu.
- Cara manual, sangat manual. - Pusing sendiri.
Atau pakai regex, lebih pusing lagi ya.
Atau...
Oh iya.
Ya.
Ya, jadi API yang sudah built-in di browser.
Betul. Jadi kalau misalkan kita mau berurusan dengan URL,
baik itu mau parsing atau mau bikin URL baru yang valid, gitu ya.
Biasanya kan kita mau bikin apa, mau arahkan seseorang dari halaman satu ke halaman lain kan pakai URL.
Biasanya kita pakai string aja. Dan itu belum tentu valid kan.
Mungkin ada error-kah atau apa, mungkin tiba-tiba HTTP-nya kurang H, gitu kan.
Jadi nggak valid dan akhirnya jadi broken kan link-nya.
Nah, kita bisa manfaatkan si API ini untuk memastikan bahwa HTTP-nya itu udah valid.
Dan kita juga bisa baca. Misalkan ini, kita masukkan sebuah URL.
Misalkan contohnya kita bikin form lah ya.
Masukkan alamat website kamu, gitu kan. Dia masukkin tuh.
Mungkin dia masukkinnya beda-beda. Ada yang pakai HTTPS, ada yang nggak pakai,
ada yang pakai www, ada yang nggak pakai, ada yang pakai /tandatanya, pakai macem-macem lah ya.
Terus kita mau ngambil. Mau ngambilnya hanya sebagai hianya aja.
Misalkan host-nya atau pathname-nya atau query-nya dan lain-lain.
Nah, itu kita bisa gunakan seperti ini.
Biasanya mau get current URL.
Nah, itu udah API lain lagi.
Jadi sebetulnya URL API ini terdiri dari dua interface.
Yaitu URL sendiri, sama yang kedua nanti kita bakal lihat URL Search Param.
Nah, kalau si URL API ini, coba ada interface-nya di Table of Content deh.
Mana Table-nya? Nggak kelihatan. Oh, ini.
Nggak tahu.
Kalau di layer besar sih bisa.
Oh ya, nah, nah, nah. Bawah, bawah, bawah.
URL dan URL Search Param.
Nah, dua-duanya ini interface-nya ada bisa dipakai buat constructor, ya.
Yaitu bisa new URL.
Nah, new URL itu argumennya bisa berupa string.
Yang tadi kan kita lihat contohnya string-nya.
Bisa, sebetulnya bisa objek apapun sih.
Objek apapun yang bisa di stringify.
Contoh gampangnya ada location object.
Nah, kalau kita pengen get current location, ini agak-agak menipu juga sih.
Jadi URL interface itu untuk memanipulasi atau untuk bekerja dengan URL apapun.
Sedangkan ini terpisah.
Kepisah dari URL API, ada juga interface lainnya namanya location.
Location itu untuk current location.
- Nyambungnya gimana? - Windows location.
Karena top-level context kalau di browser, di DOM kan Windows ya.
Windows itu brand.
Windows.location.
Nah, kalau kita pengen dapetin URL dari lokasi saat ini, kita pakai constructor URL tadi.
New URL dalam kurung argumennya, window.location.
Coba aja buka console, apa? Ketik di console log, di DevTools.
Console, new, new URL.
URL dalam kurung window.location.
- Gini? - Enter.
Ya, kita dapat origin-nya.
Origin-nya mana aku, origin-nya di bawah.
- Origin, host, hostname. - Developer.mozilla.org.
- Nggak ada hash. - Pathnya sudah dapat semua.
Path name-nya dapat, yang ini.
- Servesparamnya. - Protokolnya, servesparamnya nggak ada.
- Karena kita nggak pakai serves. - Kita nggak pakai servesparameter.
Atau query string, ya. Query string masuk servesparam.
Window.location-nya sendiri bentuknya string.
Kalau kita ketik window.location, ternyata itu bukan URL object.
Itu bukan URL object, tapi location object.
Dan itu terpisah. Ada interface-nya sendiri.
Dulu tuh, aku sebelum paham, sebelum sepenuhnya paham bahwa ini beda interface,
kayak suka ketukar-tukar karena beberapa property-nya tuh ada yang mirip.
Ya kan sama-sama, misalnya ada origin-nya lah.
Sama-sama ada hostname-nya, jadi ada property yang sama.
Mungkin ada metode, ya sama-sama bisa di-stringify, ya.
Jadi ada beberapa metode yang sama.
Tapi sebenarnya itu beda kasus.
Jadi agak nyebelin, kalau misalnya kita nggak sadar bahwa itu dua interface yang berbeda,
bisa, nanti kita bisa salah.
Misalnya coba mengakses property yang cuma ada di location, tapi nggak ada di URL.
Atau sebeliknya.
Jadi itu sebetulnya buat apa?
Bisa ya.
Oh, itu bisa terlepas ke atas.
Jadi kita nggak perlu, ya kayak tadi manual, kita potong satu-satu, terus naik ke atas ke mana.
Itu dengan cara ini aja, kita udah bisa langsung ke root dari si URL-nya.
Ini berarti, ini berarti path-nya beda.
Path-name-nya naik 1, ya.
Eh, naik 2, ya.
Naik 2.
Kok bisa naik 2, sih?
Iya.
Kita sekarang...
Apa URL ini nggak dianggap sebagai path, gitu?
Oh, karena lo...
Coba titiknya 1, atau coba nggak pakai slash?
Ya, coba aja.
Karena nggak pakai trailing slash, kan.
Oh, iya.
Coba nggak pakai...
Ini 1.
Bukan, bukan.
Karena di location itu dia nggak trailing slash.
Ya, benar.
Benar.
Tidak benar.
Titik slash itu benar.
URL itu dianggap dokumen apa?
URL itu dianggap...
Bukan, apa.
Tidak, dianggap directory.
Coba URL di paling atas, di address lo, tambahin ini.
Tambahin, trailing slash.
Oh, tambahin ending slash.
Oh, dia nggak bisa.
Berarti di window.location-nya aja tambahin slash.
Trailing slash.
Oh, nggak bisa window.location itu kan...
Nggak bisa lah, window.location kan bukan string.
Nggak apa-apa, coba.
.href.
.href.
.href.
.href.
Tambah.
Gini?
Iya.
Ininya 2, 1?
Terserah.
2, ya?
2 aja, biar bisa dikomper sama yang tadi.
Nah.
Oh iya, betul.
Baru benar.
Ini kayak dianggap dokumen sama dia ya.
Jadi kayak URL.html gitu lah ya.
Betul.
Sama satu node nih.
Turun.
Constructor.
Dibawah tadi.
Terus, terus, terus.
Common Mistake.
Banyak banget.
Oh, ada ya?
Ya.
Static Method.
Stop, stop.
Eh, di atasnya, atas tadi.
Eh.
Stop.
Nah, stop, sedikit ke bawah.
Dibawah, stop.
Constructor ini punya throw error ya.
Jadi harus di try catch.
Oh iya, kalau nggak di catch, terus kita ngapain-ngapain random.
Terus ada kesalahan.
Oh, dia berhenti deh.
JavaScriptnya stop.
Itu Common Mistake.
Sering banget gue nemuin itu.
Jaman dulu.
Apa sih yang bikin kita?
Siapa sih yang bikin ini?
Taunya?
Siapa?
Gue sendiri.
Sudah biasa.
Sudah sering terjadi.
Itu ada meme-nya nggak sih?
Kayak Scooby Doo itu loh.
Kan biasanya penjahatnya, apanya, nyamar jadi hantu,
pas dibuka, ternyata orangan.
Nah, itu kayaknya ada meme-nya,
pas dibuka, ternyata kita sendiri.
Nah, ini ada pertanyaan dari Lamar.
"Pakai API URL ini, apa bisa atur CSS
agar bisa styling anchor tanpa JavaScript?"
Pengennya kayak...
Kayaknya belum bisa dicampur ya.
Eh, bisa aja.
Kalau kita tahu exact URL-nya,
tapi nggak usah pakai sudo yang...
apa, titik 2, 2 kali gitu.
Jadi gimana tuh?
Kayaknya bisa, coba.
Ya, coba aja.
Coba.
Coba, coba.
Live code kita, live code.
Let's go, let's go.
Coba ya, gimana caranya sih?
Cresen ya?
Cresen.
Live code.
Live code kita.
Misalnya kita pengen...
Sudah?
Sudah, sudah menjual?
Sudah, sudah.
Kita pengen...
Yang link-nya ini ya.
"Uniform Resource Locator"
Oke.
Loh, nggak kelihatan kodenya.
Iya.
Ini cuma share...
Share full screen ya?
Share window ya?
Ya, share window.
Atau share...
Entire screen.
Tapi hati-hati,
entire screen ya.
Nggak ada apa-apa di sini sih.
Matiin dulu kerja, nggak ada NDA-nya.
NDA-nya.
Matiin dulu ya.
Kalau nggak, share window aja.
Jadi bolak-balik, tapi...
Share window.
Aman.
Sudah share belum?
Sudah, sudah.
Kita pengen share sih link yang ini nih.
Tambah.
Coba deh.
Coba kayak gini dulu ya.
"Semua Angkor kan pasti ada rev-nya."
"Color Gigi."
"Color Hot Pink."
Ah, nggak berubah.
Nggak bisa berarti.
Bentar-bentar.
Nggak mau nyerah gitu.
Bisa dong.
Oh, important.
Iya.
Ini kan spesificity-nya lebih tinggi.
Oh, keren.
Tapi kelihatan nggak? Sekarang di DevTools kita bisa lihat spesificity-nya selektor ini.
Iya, barusan dikasih tau sama Mbak Jesseline.
Di salah satu update DevTools.
Oh, kita tahu nih kenapa kalah spesificity-nya kalah.
Peralitasnya ya.
Gue paling suka kalau ngasih CSS itu pakai important sama position absolute.
Atau diulang selektornya.
Tapi hati-hati ya.
Kalau important itu kan priority ya.
Jadi kalau semuanya important ya nggak ada priority jadinya ya.
Jadi berantem lagi ya.
Tergantung spesificity-nya lagi.
Spesificity.
Kalau spesificity-nya sama tergantung urutan. Yang menang yang bawah.
Ya udah itu kalau semuanya important nanti temen kerja kita nggak override style kita di bawahnya important.
Kita kalah, tak pusing edit lagi bawahnya udah gitu aja terus.
Coba kasih itu hrefnya.
Hrefnya yang khusus Uniform Resource Locator aja.
Ini yang pink ya.
Coba. / Ya. Glossary URL.
Ya nggak bisa loh.
Nggak bisa. / Nggak bisa bentar.
Coba kalau pakai ini. / Nggak bisa sama dengan.
Bisa.
Bisa.
Aisik.
Background yang ini.
Keren.
Buta warna.
Important.
Font size.
Font size nggak bisa ya kalau inline.
Ya gitu deh.
Ya jawabannya bisa berarti.
Ya mantap.
Sudah terjawab ya.
Ya seru nih ya menjawab pertanyaan dengan lab quote.
Oke lanjut.
Ada lagi yang menarik?
ToString.
Ya ini biasa ya kalau misalkan temen-temen.
Jadi kan URL itu bisa.
New URL-nya kan merutan objek ya.
Objek URL ya.
Nah URL objek.
Ya URL objek seperti tadi.
URL objek ini.
Sama dengan objek biasa nggak?
Ya kan objek khusus.
Ada property khususnya, ada method khususnya.
Misalkan saya mau gini.
Kita bisa akses property-nya.
Bisa kan. / Bisa.
Cuma itu dia kayak.
Itu property khusus URL objek.
Kayak tipenya lah ya.
Untuk nambah Inquiry String.
Bisa kayak tadi URL.searchparams.
Dimana gini?
Ya URL.
Ketika aja URL.searchparams itu.
Ada autocomplete.
Dot.
Eh.
Dot apa?
append.
Bisa nggak sih? / Oh ya append.
Bisa bisa.
Key value.
Di objek-objek.
Message sama dengan.
Gak pakai sama dengan.
Message.
Koma.
Oh key value. / Hello world.
Hello world. / Hello world.
Hello world.
Ini ya.
Ya sekarang URL.
Buka URL.
URL.toString.
ToString.
Eh. / ToString.
Ya.
Itu juga ada mesejnya.
Automatiskan. / Asiknya ya.
Ya.
Nah sebaliknya coba.
Apa?
Coba buka deh URL.
Dikasih query parameter sembarang.
Bisa juga kalau mau
menghapus.
Susahkan kalian to the sign.
Nampilin sesuatu.
URL.searchparams.delete.msg.
Hmm.
Gini?
Terus?
Nah ini ada
ada kopasannya.
Sampai punya kopasan. Karena sering
pakai ini.
Oke from entries.
Ini buat? / Diknis sih.
Tapi capek. / Oh.
Dapat ini ya. / Ya buat ambil, buat nge-access itunya.
Enaknya satu baris doang.
Gak usah kusing-kusing. Splat-split.
Splat-split sama sini. Terus
nge-access array.
Hmm.
Sama itu buka apa?
Siapa yang selama ini melakukan itu secara
manual.
Saya. / Tapi nggak apa-apa. Tapi makin lama
makin ribet.
Iya. / Betul-betul.
Harus didalam try-catch.
Yes.
Sebetulnya yang
bisa throw error ini kan
kalau URLnya salah. / URLnya seperti apa?
Kalau misalkan ya URLnya salah.
Gimana caranya kita bikin URLnya salah. / Coba aja.
Coba aja URLnya kosong argumennya.
Ini aja? / Iya.
Iya.
Nah ini ya.
Atau string. Sekarang string
sembarang. New URL.
Titi-titi bisa.
Test.
Oh bisa. / Jadi
kalau misalkan kita mau bikin kayak gini kan
const redirect
sama dengan new URL
sembarang.
Maka dia error kan.
Ketika kita redirect.
Biasanya nggak ketahuan. Karena URLnya
mungkin variable.
Nol undefined. Object-object.
Iya.
Iya. Terus begitu
form-nya di-submit.
Kok nggak redirect?
Tiba-tiba lihat di console ada error.
Iya.
Langsung nge-break semua. Jadi harus
dipakai try-catch.
Jangan lupa.
Oke.
Sambil buka itu coba
dokumentasi mdn yang location.
Biar kita bisa... / Location sebentar.
Ya.
Yang location ini.
Jadi tadi kan untuk
URL. Nah kalau location
ya ini. Represents
the location of the object
is linked to.
Jadi intinya current sih.
Current location.
Dan ternyata bisa di-document.
Bisa di-window location.
Nah ini sebagian property-nya
sama kayak URL.
Cuma ada yang lain juga.
Jadi kayak origin
ref-nya sama kan.
Oh. Bagus ya.
Tapi nggak keliatan ini. Apa...
Kuliatan.
Keliatan ya.
Warnanya agak... / Keliatan.
Emang sengaja yang
lagi nggak di-highlight.
Di abu-abu muda.
Kontrasnya juga. / Yes. Ini location
anatomy. Ini mirip juga sama
URL tadi ya.
Iya kan soalnya
location itu pointing ke URL
yang saat ini lagi
dipakai. Cuma method-nya ya nggak
semua ada.
Di sini ada beberapa
instance properties. Ada
ref. Tadi juga di
URL juga ada ref.
Ada protocol, ada host, ada hostname, sama ya.
Ada port, pathname,
search.
Nah yang membedakan apa?
Yang paling utama sih... / Kapan kita harus
menggunakan location? Kapan menggunakan
URL? API-nya?
Nggak. Location itu
dia interface, tapi dia nggak punya
constructor. Jadi kalau tadi kan kita bisa
sembarang tuh menu URL
dalam purung, masukin argument,
blablabla. Atau bahkan yang belum kita
lihat detail ini kan URL search
params. Kita belum lihat MDN-nya ya.
Tapi itu juga bisa new URL
search params dalam
kurung tadi apa? Argumen.
Nah, tapi kita nggak bisa
new location. Karena itu cuma
bisa window.location ya udah
itu pointing ke halamannya ya.
Sedang kita access.
Ya, ya, ya. Ngerti, ngerti, ngerti.
Ivan, ada yang mau ditambahin tadi?
Iya, maksudnya kalau
kayak untuk window
location object yang ada di window itu
itu langsung berhubungan
sama si location
ya si browser.
API-nya untuk menguntung.
Jadi kalau misalnya window.location.
reload.
Contohnya, itu kan... / Oke.
Ada metodnya juga. Nah, itu kan metod itu
cuma ada buat location. Nggak bisa
kita new URL. Misalnya tadi kita bikin
URL object, pakai constructor,
terus new URL, reload
yang nggak terjadi apa-apa. Karena
nggak berurusan sama lokasi yang ada
di browser. / Sepertinya location ini
juga implement
URL interface.
Under the hood itu... / Dan location ini itu
kelas baru.
Bukan kelas, eh
location ini kelas bukan interface.
Oh, sorry.
Is interface. / Ini
location ini interface atau kelas?
Interface. / Interface. URL baru kelas.
Cuma nggak dekonstruktor, nggak dekonstruktor
aja.
Oke.
Dia langsung, langsung manggil gini.
Kayak static. / Bisa replace.
Jadi kita bisa memanipulasi
ya, ini routing lah. Sebenarnya ini
client-side routing itu urusannya
sama location. Bukan sama
bukan secara langsung sama
URL object.
Kalau bfcache itu di mana ya?
Apa?
Sudah pernah pakai bfcache.
Back-forward cache. / Oh,
back-forward cache.
Belum pernah pakai. / Kayaknya berhubung
juga sama URL dan location.
Cuma gua belum pernah, belum pernah coba.
Itu kayaknya fitur browser. / Ada di application.
Iya ada di application.
Ada di application, kan?
Ini bisa window dot
location
dot
replace. / Coba penasaran back-forward
cache. / Iya bisa replace
pakai full.com atau
replace
web.dev lah.
Ya, web.dev.
Atau
nggak pakai HTTPS bisa?
Pakai, ya. Pakai kayaknya deh.
Harus ya? / Nanti jadinya Pat.
Ya coba aja.
Tuh, dia nge-refresh langsung ya.
Tapi page not found karena
dia nambahin di / terakhir ya.
Dianggap Pat.
Sekarang coba pakai
HTTPS.
Tadah!
Tadah!
Iya, jadi kita kalau mau
redirect secara
programatically, nggak pakai
URL, eh, sorry.
Nggak pakai anchor.
Kita bisa gunakan dot replace, bisa pakai reload
juga kalau mau refresh. Teman-teman harusnya
udah tahu ya window dot location dot reload ya.
Apalagi kalau jaman dulu ya.
Belum reload time, tiap 5 detik
reload. / Maksudnya
yang serangannya cross-side.
Cross-side itu. / XSS.
XSS. / Iya.
Di comment box, ditambahin location dot
replace, dan dialihkan
ke spam side yang
domainnya mirip. / UO sama ya.
Kan begitu orang visit langsung
ke replace.
Pindah ke tempat lain.
Bisa. / Bisa, bisa.
Bisa, tapi ya itu berarti
kita harus diserang dulu, sampai
ada yang bisa, atau
mungkin extension ya. Bahaya
kalau ada extension yang ada
vulnerability-nya, extension
kan bisa langsung access dong kan.
Atau apapun itu,
maksudnya nggak cuma extension sih, apapun
yang bisa ngejalanin client-side
JavaScript di halaman kita.
Nah, itu ya.
Cuma kalau misalnya
ada issue security
yang bisa ngejalanin JavaScript
di client-side T-browser
kita, itu mah kayaknya udah
emang udah either way
udah tamat.
Maksudnya bakal bermasalah banget.
Cookies bisa dibaca.
Jadi ya udah, kayaknya segala macem
masalah. / Selesai.
Udah pasti. / Udah selesai hidup dulu.
Iya.
Jadi kalau misalkan teman-teman
nih, apa, mau
coba-coba, iseng ah,
coba-coba, baik itu location
ataupun URL, bisa tuh
projeknya bikin
apa namanya, bikin
routing library sederhana.
Pakai API, apa
URL web API ini.
Buat latihan, buat latihan.
Buat tugas akhir.
Buat tugas akhir.
Tugas akhir, routing
library. Seru juga sih itu.
Membuat sendiri routing library.
Itu, apa,
rumusan masalahnya apa itu?
Ya, yang super
cepat deh.
Terus, kodanya
cuma 9 kilobytes.
3 baris.
3 baris.
3 baris tapi mini fight sebetulnya.
9 kilobytes mini fight sih.
Oke.
Bah, siapa lagi kita?
Terakhir. / Itu URL
search apa?
Oh ya tadi ya, URL search param ya.
Iya bener-bener. Tadi kita belum coba.
URLs.
Jadi kan, sebenarnya URL API
ada 2 tadi kan terdiri dari
URL sama
URL search params.
Domain yang ini, domain
apa? Puni code.
Puni code domain. / Oh ya.
Apa itu puni code? / Karakter domain.
Nanti ya, abis ini.
Nanti ya, abis ini ya.
Oke, ini search param tadi
cara pakainya hampir sama. / Cepat aja.
Ini untuk query parameter.
Jadi kalau apa? Singkatnya
ini PLDR-nya semua.
Kalau kita pengen memanipulasi
lokasi URL di browser
saat ini, pakainya tadi kan
location interface.
Kalau mau kerja
dengan URL, tadi URL
interface. Kalau khusus
query parameter, pakai
URL search params.
Nah, jenis objek dengan
interface URL search params ini
juga sebetulnya bagian dari
objek URL tadi.
Apa? Property search params ya.
Ini.
Hasilnya adalah 14.
Ini biasanya
itu isinya
objek key value pair. / Isinya apa?
Oh, key value.
Oh, yang tadi, tanda tanya tadi ya?
Iya. / Iya.
Setelah tanda tanya. / Setelah tanda
tanya. Jadi kalau misalkan ini
tadi kita pakai di sini ya.
MSG gitu. Pakai tanda tanya enggak?
Enggak ya. / Enggak usah. / Objek.
Kayaknya biasanya objek deh. Lupa-lupa
ingat. Coba-coba.
Test. Gitu.
Size 1.
Coba
sekarang itu dikopas aja, new URL
search params, blablabla.
.toostring.
Jadi kalau kita mau
generate gitu ya.
Mau generate
search parameter yang
dalam jumlah banyak, misalkan
status. / Status, sukses.
Oke.
Terus apa lagi?
Active
dengan
1.
Nah, enak kan?
Enak ya.
Jadi nggak perlu, kita cukup bikin
objek aja.
Objeknya di append-apend-apend ditambah-tambahin.
Nanti habis itu tinggal kita
masukkan ke
constructor ini.
Kita manggil kita ini
instantiate ya.
Trus jadi string.
Habis itu udah bisa ditempelkan
ke URL yang
tadi kita pakai, new URL tadi.
Bisa ditambahkan ini.
Kalau kita belum tahu
caranya pakai URL search
parameter ini lumayan pusing kan,
objeknya dijadikan array,
atau diiterate,
diiterate dibikin, terus
buat
satu persatu key value-nya
dimasukin key,
pakai string literal, key sama dengan
value, terus
di-join lagi pakai tanda
dan, pakai tanda
ampersan, capek.
Kalau ini satu baris selar.
Apa nih, test value-nya
ada special character
di URL,
special character. Maksudnya apa?
Test value-nya ada special character
di URL search parameter.
Special character itu apa?
Oh, pakai
test
dulu.
Bukan, special character mungkin
itu, apa namanya?
Ya, contohnya
add dollar
hash.
Ya, bisa.
Nah, ini jadi
di-encode ya?
Oh iya, special character
gini ya.
Tinggal pakai
di-code qri component ya,
kalau kita mau nge-access.
Minus, plus, underscore, slash,
backslash, bintang.
Ini jadi apa?
Tanda tanya jadi apa?
Tanda tanya.
Jadi
di-encode semuanya ya?
Kalau minus enggak ya, berarti ya?
Underscore juga enggak?
Enggak.
Cara nge-decode-nya gimana?
Kalau ini cara nge-decode-nya?
Decode qri component.
Yes.
Decode qri component.
Ini new lagi?
Pakai new?
Langsung aja?
Langsung.
Oh iya, string apapun argumennya.
Yes.
Ini ya.
Hmm.
Seru, seru, seru.
Oke.
Eka yang cewek, apa sih?
Iya, bukan Ivan yang cewek.
Iya, bukan Ivan.
Oke. Tadi mau bahas apa?
Domain apa tadi?
Domain name.
Domain name, yang mana?
Jadi kan, kan kita udah liat nih,
kalau path sama query string.
Path sama query string kan
tadi karakternya ya boleh apa aja,
suka-suka, tapi bakal di-convert
encode jadi
uri component, jadi karakter
khusus tuh, kayak tadi tanda tanya
jadi %3f atau semacamnya.
Tapi khusus domain name
ada restriction-nya.
Punya restriction-nya.
Puni code, yes.
Jadi bisa kalau...
Bisa, tapi kayak di-convert to
jadi encode ya?
Bukan karakter aneh-aneh,
yang benar adalah karakter yang
di luar ASCII.
Contohnya...
Contohnya ya
Chinese character, Japanese character,
atau...
Tahu kan ya, kalau German keyboard,
atau Spanish keyboard,
itu kan memang ada...
Ada titik-titik di tempat aneh.
Ya, namanya puni code.
Puni code.
Jadi bisa...
Bisa dirubah dari...
Itu.
Dari browser ya? Berarti browser yang implement kan?
XN blablabla.
Kalau ada penanda ASCII,
XN dash-dash,
saya suka pakai...
Puni code encoder.
Puni coder.
Itu contohnya bisa pakai.
Oh, ada itu-nya.
Ada tools-nya.
Puni coder.com.
Itu tadi yang dari emoji,
yang dari Wikipedia.
Coba.
Itu ada yang...
Puni code, for example, XN dash-dash EE.
Yang ini di-copy ya?
Ya, ya copy.
A-A.
Terus, .com contohnya.
Kan misalnya mungkin beli itu .com.
.ws?
Kebalik, kebalik, kebalik dari sebelah.
Ya, .ws.
Oh, convert to text ya?
Nanti, I love WS.
Oh, jadi bisa di...
Domainnya bisa dibeli beneran.
Iya, iya, iya.
Tapi langsung di-convert kan? Gak kelihatan kan?
Oh, iya.
Jadi, maksudnya user kita,
orang yang mau akses,
bisa nge-tick pakai karakter non-asci.
Misalnya pakai emoji tadi.
Begitu di-enter,
sama domain tuh kayak di-convert ya.
Berarti jadi XN.
Sama yes and no.
Karena gini, contohnya.
Di Cloudflare, ataupun di tools yang mana pun,
kadang mereka gak terima puni code.
Atau PHP kita,
error kalau terimanya
non-asci karakter untuk URL.
Jadi kita,
instead of pakai
puni code di address bar,
kita pakai XN
des des des des
bla bla bla itu yang sudah di-encode itu.
Oh, berarti kita harus
handle sendiri ya?
Iya, kita handle sendiri.
Contohnya di...
Gua belum pernah coba, contohnya
di WordPress ini, contohnya.
Sorry.
Lebih tepatnya,
di RPC atau di settingnya
di Nginx,
virtual host-nya.
Mau pakai yang mana? Yang sudah di-encode apa non-encode?
Gua gak tahu.
Ntar coba sendiri deh teman-teman, kasih tahu.
Virtual host-nya pakai yang
encoded,
atau puni code?
Untuk virtual host-nya.
Jadi, kalau mau buka
situsnya, hasilnya apa?
Kasih tahu ya.
Wah, lucu sekali ya.
Nah, berarti ini layer-nya banyak ya.
Di tingkat registrar,
tempat kita mendaftarkan domain,
berarti belum tentu boleh tuh. Tadi di Wikipedia pun
ada tulisannya kan, apa?
Cuma bisa di top-level domain, bla bla bla,
di cloudflare misalnya gak...
di layanannya sendiri,
cloudflare misalnya belum tentu
support. Nah, terus
kita harus handle
busing juga ya.
Ya, tinggal dicari.
Bisa dicari,
kalau mau ke
domain provider,
sesaja yang bisa.
Karena gini, tergantung
specialized juga kan.
Special, apa namanya,
karakternya ada di bahasa apa?
Kalau misalnya kita
.us.
Ini itu international
domain names, IDNs.
Oh iya, kira-kira ini Indonesia ya.
Ya, itu TLD yang support,
itu cuma ada
availability,
untuk emoji domain.
Untuk emoji domain.
Ada yang spanish karakter,
dia, misalnya
hanya di domain yang spain,
contohnya.
Atau yang russian, russian itu karakter apa?
Devorak ya? Eh, bukan Devorak.
Russian karakter itu apa istilahnya?
Ya.
Russian karakter itu?
Trilic.
Trilic doang.
Trilic karakter hanya bisa di support
di .ru, contohnya.
Kita nggak bisa daftarin di .us.
Berarti kan masing-masing
TLD
registrar kan
itu terserah mereka kan.
Misalnya kalau
yang Jerman, ya otomatis dia kan
customer base nya dari Jerman
dan mungkin pakai karakter bahasa mereka,
mereka support.
Kalau misalnya malas emoji nggak support,
suka-suka mereka berarti ya.
Mereka yang mutusin untuk men-support
kombinasi karakter.
Berarti ketauan kok kalau mau beli bisa atau nggak.
Pasti direject.
Nah itu ada warning dari icon.
Kenapa?
Kalau domain.id, bisa
ini nggak bahasa se-kerta?
Gak tahu, coba aja.
Gak seisen gitu lah.
Buat apa? Malah lebih susah.
Orang kita mau buat mudah kan,
buat emoji, ini malah bahasa
se-kerta.
Masalahnya nggak ada keyboard set
yang support se-kerta.
Kalau Jerman, Spanis mau ada.
Iya, kalau misalnya
keyboardnya
ini
Chinese, masa
kalau dia mau type
ASCII, dia harus ganti keyboard dulu kan.
Lebih susah kan sebenarnya.
Jadi belum direkomendasikan
secara umum ya?
Bukan, tergantung target market.
Kan kalau misalnya
di China,
mereka semua keyboardnya itu
by default, pingin.
Ya kan?
Kalau mereka mau
kunjungi google.com,
kan mereka harus ganti keyboard ceritanya.
Oh, ini bisa buat ini nih,
pemendek URL, menuju
kesini, pasti udah ada yang
beli ini.
Wuh, .fm.
Cuman ada .2
nya, tapi udah
tidak berlaku.
Jadi mainan, mainannya di domain nih.
.2/
ngobrolin web.
Gitu kan, kan keren.
Tapi sayangnya udah gak ada.
Nah, ini
ada yang out nih, ngomong-ngomong soal
keyboard, pernah liat ke Eka pakai speed keyboard?
Wuih.
Oh iya, pakai speed keyboard?
Yoi, cuma lagi gak di bawah sekarang.
Custom, custom.
Oh, custom.
Jadi satu
keyboard, satu calculator, bukan?
Yaa.
Biar dunamis.
Biar sakit punggung, penyakit developor.
Kira kasir apa pakai calculator
doang, yang nampet
doang gitu.
Tapi dia cepet banget tuh, ngetiknya.
Ada, ada yang pakekan gamer,
pakenya itu. Cuma
buat arrow doang.
Oh, berarti kalau,
kalau split keyboard, berarti
ini ya, sangat disiplin
ngetik sepuluh jari ya.
Karena gak bisa lari-lari kan, susah ya.
Spasinya dimana? Kiri apa kanan Eka?
Di kaki.
Di kaki.
Oh di kaki split.
Kayak gas gitu.
Gas mobil.
Enak kan?
Ada tuh, yang pakai gitu juga
ada. Jadi, control misalkan.
Kontrol pakai kaki
kiri. Jadi dia gak perlu pencet
kontrol, kontrol C ya udah, kaki kiri dan
huruf C.
Ada lagi, itu namanya pakai
dia namanya password keyboard.
Jadi
karakternya itu sudah kayak disusun
password-nya kita, panjang gitu.
Jadi kalau mau type password
tinggal tik-tik-tik-tik-tik-tik-tik aja gitu.
Berarti semua orang yang lihat keyboard ini
tahu passwordnya dia dong?
Ya kan keyboardnya di rumah.
Jangan usah dilihat.
Gak ada keycapnya ya.
Keycapnya polosnya.
Bisa di program lah.
Jadi kalau passwordnya
berubah, masa ganti keyboard.
Beli lagi.
Jadi reset dari keyboardnya aja lah.
Ada-ada aja.
Baiklah, kalau begitu kita sudah
ngelantar kemana-mana gara-gara Andri.
Jadi gak bahas url coba.
Bahasnya emoji.
Tapi
lumayan ya, seru ya.
Cukup ya.
Jadi kalau temen-temen
besok-besok punya
project yang
butuh manipulasi url atau
perlu mengambil beberapa hal dari
query parameter, silahkan gunakan web API-nya.
Gak usah pakai
split-split string lagi ya.
Karena rentan usaha handan,
panjang. Timestampnya
jadi aneh tapi seru kata Audi.
Gak apa-apa.
Kita suka yang aneh.
Kayaknya loncat-loncat kali pembahasannya.
Jadi timestampnya aneh.
Bisa jadi.
Oke, ada lagi-ada lagi.
Kalau gak ada
temen-temen yang punya
topik, boleh
ke bit.ly/ngobrolinweb
Kita sudah lama
tidak lihat, mari kita lihat.
bit.ly/ngobrolinweb
Panjang juga ya.
Pakai tanda itu tadi.
Tanda emoji.
Bahas CSS untuk
foldable device.
Ada yang sudah pakai foldable device belum?
Handphone yang bisa
di...
Mantap.
Ada yang sudah disurut develop
foldable device belum?
Foldable device.
Ini kan foldable device, kan gak bilang
foldable handphone.
Tapi gak bisa
CSS juga disitu.
Bisa buka web.
Saya pakai
foldable handphone, tapi
masih feature phone.
Yang dulu, yang jaman dulu bisa bukanya
pakai satu tangan loh. Keren.
Sony Walkman.
Lu punya Sony Walkman.
HP, mereknya Sony Walkman.
HP, oh iya, iya.
Dulu ada, dulu ada.
Dulu pakai Java, jadi belum
gak ada browser-nya sih.
Tapi udah berwarna.
Tapi menarik sih kita bahas
foldable device.
Kita tandai dulu
foldable device.
Gemstack, wah ini ngomongin framework-nya.
Gemstack-nya kita pernah gak sih?
Belum, gemstack belum.
Sempet bahas sedikit waktu kita
mencari metode rendering
sampai kita bahas, tapi
tidak mendalam.
Kalau technology edge, sudah.
Web assembly,
coming soon.
Stackoverflow, 2022.
Ini 2023 kita sekarang.
Kayaknya udah ada juga, kan.
Data base.
Micro front-end juga
coming soon.
Coming so soon.
Semoga coming soon.
Semoga coming soon.
Itu lucu tuh, HTML6,
CSS4.
Oh, mungkin kita bahasin
yang di-propos-propos ya.
Yang ada proposal-nya, tapi belum masuk
ke ini. Mungkin menarik ya.
Bisa menarik ini.
Ya, tapi kalau proposal kan misalnya targetnya
2-3 tahun ke depan. Gimana?
10 atau 20 tahun ke depan.
Kayaknya kita semua udah saling bisa
beca pikiran atau gimana, udah gak perlu.
Gak perlu HTML
atau JavaScript lagi.
Atau semua udah AI. Kita yang kayak di film apa
tuh yang cuma diem doang, gitu.
Otak kita pun
mikirnya udah di-outsource ke AI
kali misalnya.
Seru, seru, seru.
Oke, kalau gitu.
Oke, kalau gitu
sudahan dulu malam ini.
Kita sudah kehabisan topik.
Masihnya topik pembahasan tentang URL.
Ya, jadi
tunggu aja episode berikutnya.
Kita akan bahas tentang apa.
Ya, ditunggu juga.
Mungkin kita akan bahas
salah satu topik yang
sudah teman-teman sarankan.
Kalau masih ada
yang mau disarankan, silahkan ke
bit.ly/moblinweb
Sekian dari kita untuk malam ini.
Selamat malam, selamat istirahat. Sampai jumpa
minggu depan. Dadah.
Goodnight, 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 ⏳ Mesin waktu: - 00:00 intro - 05:00 start url - 10:00 pentingnya url - 14:00 maximum char url - 15:00 beda URL & URI - 17:00 pihak ketiga URL& URN - 23:00 keamanan - 28:00 URL API - 30:00 beda location & URL(windows.location) - 37:00 live code - 40:00 url object - 44:00 deepdive location Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
14 Feb 2023
Ngobrolin Otentikasi
Otentikasi dibedakan tegas dari otorisasi lewat analogi bandara: mencocokkan wajah dengan paspor dan tiket itu otentikas...
30 Agu 2023
Ngobrolin HTTP
Topik ini muncul dari kejadian nyata: sebuah situs yang baru dipasang selalu dialihkan ke HTTPS, padahal tidak ada penga...
5 Des 2022
Ngobrolin i18n
Episode ini membahas Intl, Web API untuk internationalization yang membuat pemformatan tanggal, angka, dan mata uang ses...
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 .