azer/learn-to-google
Watch
1
0
Fork
You've already forked learn-to-google
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
🌐 "Learn to Google" website 🌐 https://sadykhzadeh.github.io/learn-to-google/
73 commits 1 branch 0 tags 3.1 MiB
  • HTML 61.6%
  • JavaScript 34.4%
  • CSS 4%
Find a file
Exact
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Azer 005a99dea6 Add a Share button that hands the link straight to a chat app 
On a phone, sending the page meant Copy, switching to the chat and
pasting. Where the browser has the Web Share API (Chrome on Android,
Safari on iOS and macOS, Edge and Chrome on Windows), a Share button
next to Copy opens the system share sheet with the same link, question
included. Elsewhere, Firefox on the desktop for one, it stays hidden.

The link row now wraps, so the buttons go under the link instead of
squeezing it: at 280px the Russian and Ukrainian pages already left the
field 70px wide, showing "https://a", before a second button.
2026-10-15 03:47:26 +04:00
.github/workflows Test which old links the 404 page forwards, and where to 2026-10-13 06:57:12 +04:00
css Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00
i18n Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00
img Bring every share picture under 300 KB without changing a pixel 2026-10-13 06:31:08 +04:00
lan Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00
src Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00
test Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00
404.html Outline the bubbles and buttons in Windows high-contrast mode 2026-10-12 01:58:29 +04:00
build.mjs Refuse to build a translation that is missing a string 2026-10-11 01:09:50 +04:00
index.html Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00
LICENSE Update LICENSE 2020-06-03 14:51:20 +04:00
README.md Add a Share button that hands the link straight to a chat app 2026-10-15 03:47:26 +04:00

README.md

"Learn to Google" website

Russian | English | Azerbaijani | Ukrainian | Uzbek

The main purpose of the site is to explain the advantages of googling questions in a polite way to people who are too lazy to Google for unknown reasons.

How it behaves

  • The form at the bottom of the page makes a link for whoever asked: pick the language, optionally paste their question, and copy (Enter copies too). Where the browser can pass a link to another app, as on most phones, a Share button next to Copy opens its share sheet. The question travels as ?q=, for example /lan/en/?q=What+is+polymorphism%3F, and the page shows it first among the example questions, with a button that searches Google for it.
  • Each translation has its own URL, and a link always opens in the language it was shared in. If none of the reader's browser languages is the page's but one of them is another translation, a bar at the top offers that one; it stays away once they close it or pick a language.
  • The theme follows the system's light or dark setting; the button in the header overrides it, and the choice is remembered.
  • A link from before April 2021, when the translations lived at /en/, /az/ and /ua/ instead of under /lan/, is forwarded by the 404 page to where that page is now.
  • Everything works without JavaScript except the form, the question, the language offer and the theme button, which simply do not appear.

Editing

Every translation is rendered from one template, so a change to the page is made once:

  • src/page.mjs is the page; src/share.js is the script behind the form, inlined into it.
  • i18n/<lang>.mjs holds the text of one translation; i18n/index.mjs lists them.
  • css/main.css is the stylesheet. It is inlined into every page as well, so rebuild after changing it.

The HTML that gets served (index.html, lan/*/index.html and 404.html) is generated. Edit the sources, regenerate, and commit both:

node build.mjs

node build.mjs --check writes nothing and fails if a page is out of date or links to a local file that does not exist. The build needs Node 18 or newer and has no dependencies; GitHub Pages serves the committed files as they are, so nothing is built on deploy.

Every push runs that check and two more, which are worth running before you commit:

node --test
npx html-validate@11.16.2 "*.html" "lan/*/index.html"

The tests in test/ run the site's own scripts (the one in <head> that sets the theme and offers a language, the one that shows the question from ?q=, the form in src/share.js, and the 404 page's, which forwards old links) against stand-ins for the page, so they need no browser. html-validate checks the generated pages' markup.

To add a language, copy one of the files in i18n/, translate it, give it its own lang and dir, add it to i18n/index.mjs and run the build. A new string goes into every file in i18n/: the build stops and names the string if a translation is missing one, has one the others do not, or leaves one empty.

Each picture is a PNG (bad-good.png, kept for share previews and the full-size link) with two WebP copies next to it, which is what browsers actually download: bad-good.webp at full size and bad-good-800.webp 800px wide, both at quality 80. If you replace a PNG, keep it under 300 KB, or WhatsApp may leave the picture out of its preview (oxipng -o max --strip safe -Z bad-good.png makes one smaller without changing a pixel), and make the WebP copies again, for example with cwebp -q 80 -m 6 bad-good.png -o bad-good.webp and the same with -resize 800 0 for the smaller one.

Contributors

  1. @byrvr for help with the website and translation into the Azerbaijani language.
  2. @devule for help with the website and translation into the Ukrainian language.

Author

by Azer Sadykhzadeh, 2020.