Вэб ба Вэб хөтчүүд

Терминалаас гадна вэб хөтөч бол таны хамгийн их цаг зарцуулдаг хэрэгслүүдийн нэг юм. Тиймээс үүнийг хэрхэн үр ашигтай ашиглах талаар суралцах нь маш чухал юм.

Гарын товчлолууд (Shortcuts)

Вэб хөтөч дээр хулганаар байнга товших нь хамгийн хурдан арга биш тул нийтлэг гарын товчлолуудтай танилцах нь урт хугацаандаа маш их хугацаа хэмнэдэг.

Холбоос дээр Хулганы дунд товчлуураар дарах нь түүнийг шинэ таб (tab) дотор нээнэ.
Ctrl+T - Шинэ таб нээнэ.
Ctrl+Shift+T - Хамгийн сүүлд хаагдсан табыг дахин нээнэ.
Ctrl+L - Хайлтын мөрний (address bar) агуулгыг идэвхжүүлнэ.
Ctrl+F - Тухайн вэб хуудас дотроос хайлт хийнэ. Хэрэв үүнийг байнга ашигладаг бол хайлтад тогтмол илэрхийлэл (regular expressions) дэмждэг өргөтгөлүүдийг ашиглаж болно.

Хайлтын операторууд (Search operators)

Google эсвэл DuckDuckGo зэрэг хайлтын системүүд илүү нарийвчилсан хайлт хийх боломжийг олгодог хайлтын операторуудыг дэмждэг:

"bar foo" - “bar foo” гэсэн хэллэгийг яг таг тааруулж хайна.
foo site:bar.com - bar.com вэбсайт дотроос foo гэсэн үгийг хайна.
foo -bar - Хайлтын үр дүнгээс bar гэсэн үг орсон хуудсуудыг хасна.
foobar filetype:pdf - Тухайн заасан өргөтгөлтэй (энэ жишээнд pdf) файлуудыг хайна.
(foo|bar) - foo ЭСВЭЛ bar гэсэн үгсийн аль нэг нь орсон үр дүнг хайна.

Илүү дэлгэрэнгүй жагсаалтыг Google болон DuckDuckGo хайлтын системүүдийн зааварчилгаанаас үзэж болно.

Хайлтын мөр (Searchbar)

Хайлт хийхээс гадна хайлтын мөр (address bar) нь маш хүчирхэг хэрэгсэл юм. Ихэнх вэб хөтчүүд вэбсайтуудын хайлтын системийг автоматаар таньж хадгалдаг. Түлхүүр үгийн тохиргоог өөрчилснөөр:

Google Chrome-д эдгээр нь chrome://settings/searchEngines дотор байдаг.
Firefox-д эдгээр нь about:preferences#search дотор байдаг.

Жишээлбэл, та y ХАЙХ ҮГС гэж бичээд шууд YouTube дотроос хайлт хийхээр тохируулж болно.

Түүнчлэн, хэрэв та өөрийн домэйн нэртэй бол домэйн бүртгэгчээрээ дамжуулан дэд домэйн чиглүүлэлт тохируулж болно. Жишээлбэл, би https://ht.josejg.com хаягийг энэхүү хичээлийн вэбсайт руу чиглүүлсэн. Ингэснээр би зөвхөн ht. гэж бичихэд хайлтын мөр автоматаар гүйцээж харуулдаг. Энэхүү тохиргооны нэг сайн тал нь хавчуургаас (bookmarks) ялгаатай нь ямар ч хөтөч дээр ажиллах болно.

Нууцлалын өргөтгөлүүд (Privacy extensions)

Өнөө үед вэбээр аялах нь сурталчилгаануудаас болоод төвөгтэй, мөн мөрдөгчдөөс (trackers) болоод аюулгүй байдалд сөргөөр нөлөөлж болдог. Сайн сурталчилгаа хаагч (adblocker) нь зөвхөн сурталчилгааг хаагаад зогсохгүй хар жагсаалтад орсон сэжигтэй, хортой вэбсайтуудыг бас хаадаг. Мөн тэд вэбээс илгээх хүсэлтийн тоог багасгаснаар хуудас ачаалах хугацааг хурдасгадаг. Зарим зөвлөмж:

uBlock Origin (Chrome, Firefox): тогтоосон дүрмийн дагуу сурталчилгаа болон мөрдөгчдийг хаана. Та тохиргоо хэсгээс өөрийн бүс нутаг эсвэл хэрэглээний зуршилд тохируулан илүү олон хар жагсаалтыг идэвхжүүлж болно. Мөн интернэтээс олдсон шүүлтүүрүүдийг нэмж суулгах боломжтой.
Privacy Badger: мөрдөгчдийг автоматаар илрүүлж хаана. Жишээ нь, таныг вэбсайтууд дамжин аялах үед сурталчилгааны компаниуд таны профайлыг үүсгэхийн тулд хаашаа зочилж байгааг тань мөрдөж байдаг.
HTTPS Everywhere: боломжтой бол вэбсайтын HTTPS хувилбар руу автоматаар чиглүүлдэг гайхалтай өргөтгөл.

Ийм төрлийн илүү олон өргөтгөлүүдийг эндээс харах боломжтой.

Загварыг өөрчлөх (Style customization)

Вэб хөтөч бол зөвхөн таны компьютер дээр ажиллаж буй нэгэн программ хангамж тул тэд юу харуулах, хэрхэн ажиллахыг эцэст нь та шийдэх боломжтой. Үүний нэг жишээ бол өөрийн гэсэн загвар тохируулах явдал юм. Хөтчүүд вэб хуудасны загварыг тодорхойлоход Cascading Style Sheets буюу CSS-ийг ашигладаг.

Та вэбсайтын эх кодыг хөтчийнхөө inspect (шинжих) хэрэгслээр шалгаж, агуулга болон загварыг түр зуур өөрчлөх боломжтой (энэ нь та яагаад вэб хуудасны зурганд хэзээ ч итгэж болохгүйн бас нэг шалтгаан юм).

Хэрэв та вэб хуудасны загварыг байнга өөрчилж хадгалахыг хүсвэл өргөтгөл ашиглах шаардлагатай. Бидний зөвлөх хэрэгсэл бол Stylus (Firefox, Chrome) юм.

Жишээлбэл, бид энэхүү хичээлийн вэбсайтад зориулж дараах загварыг бичиж болно:

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

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

Мөн Stylus-ийг ашиглан бусад хэрэглэгчдийн бичиж userstyles.org дээр нийтэлсэн бэлэн загваруудыг олж ашиглаж болно. Жишээ нь, ихэнх түгээмэл вэбсайтуудад зориулсан харанхуй сэдэв байдаг. Дашрамд дурдахад, Stylish өргөтгөлийг бүү ашиглаарай, учир нь энэ нь хэрэглэгчийн өгөгдлийг алдагдуулдаг болох нь тогтоогдсон (эндээс дэлгэрэнгүй уншина уу).

Функциональ ажиллагааг өөрчлөх (Functionality Customization)

Та загварыг өөрчилдөг шиг вэбсайтын ажиллагааг ч бас өөрийн JavaScript кодоор өөрчилж, түүнийгээ Tampermonkey зэрэг хөтчийн өргөтгөлүүдийг ашиглан ажиллуулж болно.

Жишээлбэл, дараах скрипт нь J болон K товчлууруудыг ашиглан Vim шиг дээш доош гүйх боломжийг олгодог:

// ==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 нь 74-р товчлуур
            window.scrollBy(0,500);;
        }else if (key == 75) { // K нь 75-р товчлуур
            window.scrollBy(0,-500);;
        }
    }
})();

Мөн OpenUserJS болон Greasy Fork зэрэг бэлэн скриптийн сангууд байдаг. Гэхдээ анхааруулж хэлэхэд, бусдын бичсэн скриптийг суулгах нь маш аюултай бөгөөд тэдгээр нь таны зээлийн картын дугаарыг хулгайлах зэрэг ямар ч үйлдэл хийх чадвартай байдаг. Кодыг өөрөө бүрэн уншиж ойлгож, ямар ч сэжигтэй зүйл хийгээгүй гэдэгт бүрэн итгэлтэй болохоос нааш хэзээ ч битгий скрипт суулгаарай. Загварыг нь нууцалсан эсвэл унших боломжгүй болгож шахсан кодыг хэзээ ч бүү суулгаарай!

Вэб API-нууд (Web APIs)

Вэб үйлчилгээнүүд нь вэб хүсэлтүүдээр дамжуулан үйлчилгээтэй харилцах боломжийг олгодог программчлалын интерфэйсийг олгох нь улам бүр түгээмэл болж байна. Энэ сэдэвтэй илүү нарийвчлан танилцахыг хүсвэл эндээс үзнэ үү. Онлайнаар олон нийтийн нээлттэй API-нууд маш олноороо байдаг. Вэб API нь маш олон зорилгоор хэрэг болдог:

Мэдээлэл татах (Retrieval). Вэб API нь танд газрын зураг, цаг агаар эсвэл таны IP хаяг гэх мэт мэдээллийг хялбархан олгоно. Жишээлбэл, curl ipinfo.io нь таны IP хаяг, бүс нутаг, байршил зэрэг мэдээлэл бүхий JSON объектыг буцаана. Эдгээрийг командын мөрийн хэрэгслүүдтэй ч нэгтгэн ашиглаж болно. Дараах bash функц нь Google-ийн автомат гүйцээх API-тай холбогдож эхний арван үр дүнг буцаадаг жишээ юм:

function c() {
    url='https://www.google.com/complete/search?client=hp&hl=en&xhr=t'
    # Санамж: UTF-8 өгөгдөл авахын тулд user-agent-ийг заавал зааж өгөх ёстой!
    curl -H 'user-agent: Mozilla/5.0' -sSG --data-urlencode "q=$*" "$url" |
        jq -r ".[1][][0]" |
        sed 's,</\?b>,,g'
}

Харилцан үйлчлэл (Interaction). Вэб API-ийн тусламжтай тодорхой үйлдлийг идэвхжүүлж болно. Үүнд ихэвчлэн үйлчилгээнээс авсан баталгаажуулах токен шаардлагатай. Жишээлбэл, дараах тушаал нь: curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' "https://hooks.slack.com/services/$SLACK_TOKEN" Slack суваг руу Hello, World! гэсэн мессежийг илгээнэ.
Сүлжих ажиллагаа (Piping). Зарим вэб API бүхий үйлчилгээнүүд нь маш түгээмэл тул тэдгээрийг хооронд нь холбож ажиллуулах бэлэн шийдлийг If This Then That болон Zapier зэрэг үйлчилгээнүүд олгодог.

Вэб автоматжуулалт (Web Automation)

Заримдаа вэб API нь хангалтгүй байдаг. Хэрэв зөвхөн унших шаардлагатай бол pup гэх мэт HTML задлан шинжлэх эсвэл Python-ийн BeautifulSoup зэрэг санг ашиглаж болно. Гэвч хэрэв хуудастай интерактив харилцах эсвэл JavaScript ажиллуулах шаардлагатай бол тэдгээр нь тус болохгүй бөгөөд WebDriver хэрэглэгддэг.

Жишээ болгон дараах Python скрипт нь Wayback Machine дээр вэб хаяг бичиж хадгалах үйлдлийг дуурайлган автоматжуулж байна:

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)

Дасгалууд

Өөрийн вэб хөтөч дээрээ байнга ашигладаг хайлтын системийнхээ түлхүүр үгийг өөрчлөн тохируулаарай.
Дээр дурдсан өргөтгөлүүдийг суулгаарай. uBlock Origin эсвэл Privacy Badger-ийг тодорхой вэбсайт дээр хэрхэн идэвхгүй болгохыг судалж үзээрэй. Юу өөрчлөгдөж байна вэ? YouTube гэх мэт олон сурталчилгаатай сайт дээр туршиж үзээрэй.
Stylus-ийг суулгаад дээр өгөгдсөн CSS-ийг ашиглан хичээлийн вэбсайтад зориулсан загвар бичээрэй. Нийтлэг програмчлалын тэмдэгтүүд болох = == === >= => ++ /= ~=-ийг бичээд үсгийн фонтыг Fira Code болгоход тэд хэрхэн харагдаж байна вэ? (Илүүг мэдэхийн тулд “programming font ligatures” гэж хайгаарай).
Өөрийн хот/бүс нутгийн цаг агаарын мэдээллийг авах боломжтой вэб API-ийг олж ашиглаарай.
Selenium зэрэг WebDriver программ хангамжийг ашиглан вэб хөтөч дээрээ байнга хийдэг давтагдсан гараар хийх үйлдлээ автоматжуулаарай.

Энэ хуудсыг засварлах.

Лиценз: CC BY-NC-SA.