Web နှင့် Web Browser များ

Terminal ပြီးရင် Web Browser ဟာ သင်အချိန်တော်တော်များများ အသုံးပြုရမယ့် Tool တစ်ခုဖြစ်ပါတယ်။ ဒါကြောင့်မို့လို့ သူ့ကို ထိရောက်ပြီး အကျိုးရှိရှိ ဘယ်လိုအသုံးပြုရမလဲဆိုတာ လေ့လာသင်ယူထားတာ ထိုက်တန်ပါတယ်။

Shortcuts (ဖြတ်လမ်းနည်းများ)

မိမိရဲ့ Browser ထဲမှာ ကလစ်လိုက်နှိပ်နေခြင်းဟာ အမြဲတမ်း အမြန်ဆုံးနည်းလမ်း မဟုတ်ပါဘူး။ အသုံးများတဲ့ Shortcut တွေကို ယှဉ်တွဲသိရှိထားခြင်းဟာ ရေရှည်မှာ တကယ်ပဲ အကျိုးရှိစေမှာ ဖြစ်ပါတယ်။

Search operators (ရှာဖွေမှု သင်္ကေတများ)

Google သို့မဟုတ် DuckDuckGo ကဲ့သို့သော Web Search Engine များသည် ပိုမိုတိကျ အသေးစိတ်ကျသော ရှာဖွေမှုများ ပြုလုပ်နိုင်ရန် Search Operator များကို ပံ့ပိုးပေးထားပါတယ်-

Google နှင့် DuckDuckGo ကဲ့သို့သော လူကြိုက်များသည့် Engine များအတွက် ပိုမိုပြည့်စုံသည့် စာရင်းများကို သက်ဆိုင်ရာ Link များတွင် ဝင်ရောက်ကြည့်ရှုနိုင်ပါတယ်။

Searchbar (ရှာဖွေမှုဘား)

Searchbar ဟာလည်း စွမ်းဆောင်ရည်ထက်မြက်တဲ့ Tool တစ်ခု ဖြစ်ပါတယ်။ Browser အများစုဟာ ဝက်ဘ်ဆိုက်များမှ Search Engine များကို အလိုအလျောက် ရယူမှတ်သားထားနိုင်ပါတယ်။ Keyword argument ကို ပြင်ဆင်ခြင်းဖြင့်-

ဥပမာအားဖြင့် y SOME SEARCH TERMS ဟု ရိုက်ထည့်ရုံဖြင့် YouTube ထဲတွင် တိုက်ရိုက် ရှာဖွေနိုင်အောင် ပြုလုပ်နိုင်ပါတယ်။

ထို့ပြင် သင့်ထံတွင် ကိုယ်ပိုင် Domain ရှိပါက Registrar မှတစ်ဆင့် Subdomain Forward ပြုလုပ်ထားနိုင်ပါတယ်။ ဥပမာအားဖြင့် ကျွန်တော်သည် https://ht.josejg.com ကို ဤသင်တန်း ဝက်ဘ်ဆိုက်သို့ ချိန်ညှိ (map) ထားပါတယ်။ ဤနည်းဖြင့် ht. ဟု ရိုက်ထည့်လိုက်သည်နှင့် Searchbar က အလိုအလျောက် ဖြည့်စွက် (autocomplete) ပေးသွားမှာ ဖြစ်ပါတယ်။ ဤစနစ်၏ အခြားကောင်းမွန်သည့် အချက်တစ်ခုမှာ Bookmark များနှင့် မတူဘဲ Browser တိုင်းတွင် အလုပ်လုပ်မည် ဖြစ်ခြင်းပင် ဖြစ်ပါတယ်။

Privacy extensions (သီးသန့်လုံခြုံရေးဆိုင်ရာ Extension များ)

ယနေ့ခေတ်တွင် ကြော်ငြာများကြောင့် Web ကြည့်ရှုရသည်မှာ စိတ်ရှုပ်စရာ ကောင်းလာပြီး Tracker များကြောင့် ကိုယ်ရေးအချက်အလက် ကျူးလွန်ခံရမှုများ ရှိလာပါတယ်။ ထို့ပြင် ကောင်းမွန်သည့် Adblocker တစ်ခုသည် ကြော်ငြာအများစုကို ပိတ်ပင်ပေးရုံသာမက သံသယဖြစ်ဖွယ်နှင့် မကောင်းသော မဲလ်ဝဲ ဝက်ဘ်ဆိုက်များကိုလည်း အများသုံး Blacklist စာရင်းများတွင် ပါဝင်သောကြောင့် ပိတ်ပင်ပေးသွားမည် ဖြစ်ပါတယ်။ ၎င်းတို့သည် ပြုလုပ်ရသည့် Request အရေအတွက်ကို လျှော့ချပေးခြင်းဖြင့် ဝက်ဘ်ဆိုက် ပွင့်သည့်ကြာချိန် (page load time) ကိုလည်း အချို့နေရာများတွင် ပိုမိုမြန်ဆန်စေပါတယ်။ အကြံပြုလိုသည့် Extension အချို့မှာ-

ဤကဲ့သို့သော Addon များအကြောင်း ပိုမို၍ ဤနေရာတွင် လေ့လာနိုင်ပါတယ်။

Style customization (ဒီဇိုင်း ပုံစံ ပြင်ဆင်ခြင်း)

Web Browser များသည် သင်၏ ကွန်ပျူတာစက် ပေါ်တွင် အလုပ်လုပ်နေသည့် အခြားသော Software တစ်ခု မျှသာ ဖြစ်သောကြောင့် ၎င်းတို့ ဘာပြသရမည်၊ ဘယ်လို ပြုမူဆောင်ရွက်ရမည် ဆိုသည်ကို နောက်ဆုံး ဆုံးဖြတ်ခွင့်မှာ သင့်တွင် ရှိပါတယ်။ ထိုသို့ ပြုလုပ်နိုင်သည့် ဥပမာတစ်ခုမှာ Custom Style များ ပြုလုပ်ခြင်း ဖြစ်ပါတယ်။ Browser များသည် Webpage တစ်ခု၏ ဒီဇိုင်းပုံစံကို ဖော်ပြရန် (render) Cascading Style Sheets (အတိုကောက် CSS) ကို အသုံးပြုကြပါတယ်။

ဝက်ဘ်ဆိုက်တစ်ခု၏ Source Code ကို Inspect ပြုလုပ်ခြင်းဖြင့် ၎င်း၏ အကြောင်းအရာများနှင့် ဒီဇိုင်းပုံစံများကို ယာယီ ပြောင်းလဲကြည့်ရှုနိုင်ပါတယ်။ (ဒါကြောင့်လည်း Webpage ၏ Screenshot များကို မည်သည့်အခါမျှ ရာနှုန်းပြည့် မယုံကြည်သင့်သည့် အကြောင်းရင်း ဖြစ်ပါတယ်)။

အကယ်၍ သင်သည် Webpage တစ်ခု၏ Style Settings များကို အမြဲတမ်း အစားထိုး (override) ပြုလုပ်ရန် သင်၏ Browser အား ခိုင်းစေလိုပါက Extension တစ်ခုကို အသုံးပြုရန် လိုအပ်မည် ဖြစ်သည်။ ကျွန်ုပ်တို့ အကြံပြုလိုသည်မှာ Stylus (Firefox, Chrome) ဖြစ်ပါတယ်။

ဥပမာအားဖြင့် သင်တန်း ဝက်ဘ်ဆိုက်အတွက် အောက်ပါ Style ကို ရေးသားနိုင်ပါတယ်-


body {
    background-color: #2d2d2d;
    color: #eee;
    font-family: Fira Code;
    font-size: 16pt;
}

a:link {
    text-decoration: none;
    color: #0a0;
}

ထို့ပြင် Stylus သည် အခြားသူများ ရေးသားထားပြီး userstyles.org တွင် တင်ထားသော Style များကိုလည်း ရှာဖွေပေးနိုင်ပါတယ်။ လူသိများသော ဝက်ဘ်ဆိုက် အများစုတွင် Dark Theme အပြင်အဆင် အနည်းဆုံး တစ်ခု သို့မဟုတ် တစ်ခုထက်မက ရှိတတ်ကြပါတယ်။ FYI အနေဖြင့် Stylish ကို အသုံးမပြုသင့်ပါ။ အဘယ်ကြောင့်ဆိုသော် အသုံးပြုသူ၏ ဒေတာများကို ပေါက်ကြားစေကြောင်း တွေ့ရှိထားရသောကြောင့် ဖြစ်ပြီး အသေးစိတ်ကို ဤနေရာတွင် ဖတ်ရှုနိုင်ပါတယ်။

Functionality Customization (လုပ်ဆောင်ချက်များ ပုံစံပြင်ဆင်ခြင်း)

ဒီဇိုင်းပုံစံကို ပြင်ဆင်နိုင်သကဲ့သို့ပင် ဝက်ဘ်ဆိုက်တစ်ခု၏ လုပ်ဆောင်ပုံ ပြုမူပုံကိုလည်း Custom JavaScript ရေးသားပြီး Tampermonkey ကဲ့သို့သော Browser Extension ဖြင့် ချိတ်ဆက်အသုံးပြုကာ ပြောင်းလဲနိုင်ပါတယ်။

ဥပမာ အောက်ပါ Script သည် J နှင့် K Key များကို အသုံးပြု၍ Vim ကဲ့သို့ သွားလာလှုပ်ရှားမှု (navigation) ပြုလုပ်နိုင်စေပါတယ်-

// ==UserScript==
// @name         VIM HT
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Vim JK for our website
// @author       You
// @match        https://hacker-tools.github.io/*
// @grant        none
// ==UserScript==


(function() {
    'use strict';

    window.onkeyup = function(e) {
        var key = e.keyCode ? e.keyCode : e.which;

        if (key == 74) { // J is key 74
            window.scrollBy(0,500);;
        }else if (key == 75) { // K is key 75
            window.scrollBy(0,-500);;
        }
    }
})();

OpenUserJS နှင့် Greasy Fork ကဲ့သို့သော Script Repository များလည်း ရှိကြပါတယ်။ သို့သော်လည်း သတိပြုရမည်မှာ အခြားသူများ၏ User Script များကို ထည့်သွင်းခြင်းသည် သင့်ခရက်ဒစ်ကတ် နံပါတ်များကို ခိုးယူခြင်းကဲ့သို့သော မည်သည့်အရာကိုမဆို ပြုလုပ်နိုင်သဖြင့် အလွန် အန္တရာယ်များနိုင်ပါတယ်။ သင့်ကိုယ်တိုင် စာကြောင်း တစ်ကြောင်းချင်းစီ ဖတ်ကြည့်ပြီး ၎င်းပြုလုပ်သည်များကို နားလည်ကာ သံသယဖြစ်ဖွယ် မရှိကြောင်း သေချာစွာ မသိမချင်း မည်သည့် Script ကိုမျှ မထည့်သွင်းပါနှင့်။ သင် မဖတ်နိုင်သော Minified သို့မဟုတ် Obfuscated (ရှုပ်ထွေးအောင် ဖုံးကွယ်ထားသော) Code များ ပါဝင်သည့် Script ကို မည်သည့်အခါမျှ မထည့်သွင်းပါနှင့်။

Web APIs

Web service များတွင် Web Request များ ပြုလုပ်ပြီး သက်ဆိုင်ရာ ဝန်ဆောင်မှုများနှင့် ချိတ်ဆက် လုပ်ဆောင်နိုင်ရန် Web API ဟုခေါ်သော Application Interface များကို ပံ့ပိုးပေးလာကြခြင်းမှာ ပိုမို ခေတ်စားလာခဲ့ပါတယ်။ ဤခေါင်းစဉ်နှင့် ပတ်သက်ပြီး ပိုမို အသေးစိတ်ကျသော မိတ်ဆက်ကို ဤနေရာတွင် ဖတ်ရှုနိုင်ပါတယ်။ အများသုံးနိုင်သော Public API အများအပြား ရှိကြပါတယ်။ Web API များသည် အကြောင်းရင်း အမြောက်အမြားအတွက် အသုံးဝင်လှပါတယ်-

function c() {
    url='https://www.google.com/complete/search?client=hp&hl=en&xhr=t'
    # NB: user-agent must be specified to get back UTF-8 data!
    curl -H 'user-agent: Mozilla/5.0' -sSG --data-urlencode "q=$*" "$url" |
        jq -r ".[1][][0]" |
        sed 's,</\?b>,,g'
}

Web Automation (ဝက်ဘ်ဆိုက် လုပ်ဆောင်ချက်များကို အလိုအလျောက် ခိုင်းစေခြင်း)

အချို့သော အခြေအနေများတွင် Web API များသည် မလုံလောက်ပါ။ အကယ်၍ ဖတ်ရှုရန်သာ လိုအပ်ပါက pup ကဲ့သို့သော HTML Parser သို့မဟုတ် Python ၏ BeautifulSoup ကဲ့သို့သော Library များကို အသုံးပြုနိုင်ပါတယ်။ သို့သော် တုံ့ပြန်ဆောင်ရွက်မှု သို့မဟုတ် JavaScript အကောင်အထည်ဖော်မှု လိုအပ်ပါက ထိုနည်းလမ်းများသည် လုံလောက်မှု မရှိတော့ပါ။

from selenium.webdriver import Firefox
from selenium.webdriver.common.keys import Keys


def snapshot_wayback(driver, url):

    driver.get("https://web.archive.org/")
    elem = driver.find_element_by_class_name('web-save-url-input')
    elem.clear()
    elem.send_keys(url)
    elem.send_keys(Keys.RETURN)
    driver.close()


driver = Firefox()
url = 'https://hacker-tools.github.io'
snapshot_wayback(driver, url)

Exercises (လေ့ကျင့်ခန်းများ)

  1. သင်၏ Web Browser တွင် မကြာခဏ အသုံးပြုလေ့ရှိသော Keyword Search Engine တစ်ခုကို ပြင်ဆင်ကြည့်ပါ။
  2. ဖော်ပြခဲ့သော Extension များကို ထည့်သွင်းပါ။ ဝက်ဘ်ဆိုက်တစ်ခုအတွက် uBlock Origin/Privacy Badger ကို မည်သို့ ပိတ်နိုင်မည်နည်းဆိုသည်ကို လေ့လာပါ။ မည်သည့် ကွာခြားချက်များကို မြင်တွေ့ရပါသနည်း။ YouTube ကဲ့သို့ ကြော်ငြာများပြားသည့် ဝက်ဘ်ဆိုက်တစ်ခုတွင် စမ်းသပ်ကြည့်ပါ။
  3. Stylus ကို ထည့်သွင်းပြီး ပေးထားသော CSS ကို အသုံးပြု၍ သင်တန်း ဝက်ဘ်ဆိုက်အတွက် Custom Style တစ်ခု ရေးသားပါ။ အသုံးများသော ပရိုဂရမ်းမင်း သင်္ကေတများမှာ = == === >= => ++ /= ~= ဖြစ်ကြသည်။ Font ကို Fira Code သို့ ပြောင်းလိုက်သည့်အခါ ၎င်းတို့တွင် မည်သို့ ပြောင်းလဲသွားသနည်း။ ပိုမိုသိရှိလိုပါက Programming Font Ligatures အကြောင်း ရှာဖွေကြည့်ပါ။
  4. သင့်မြို့/ဒေသ၏ မိုးလေဝသ အခြေအနေကို ရယူနိုင်သည့် Web API တစ်ခုကို ရှာဖွေပါ။
  5. သင်၏ Browser တွင် မကြာခဏ ပြုလုပ်ရသည့် ထပ်တလဲလဲ အလုပ်များကို အလိုအလျောက် ပြုလုပ်နိုင်ရန် Selenium ကဲ့သို့သော WebDriver Software တစ်ခုကို အသုံးပြုကြည့်ပါ။

Edit this page.

Licensed under CC BY-NC-SA.