Web Excursions 2021-06-13
Surprising shared word etymologies - Daniel de Haas
The idea
A pair of words has a surprising shared etymology if:
the two words are etymologically related and
a database of word etymologies from which we could construct an ancestral tree; If two words are etymologically related then they'll have a common ancestor in this tree.
they have a large semantic distance from each other
Measurement: GloVe
an algorithm that learns from corpus and gives each word a vector of 50 numbers.
The numbers doesn't have much meaning on their own but can be used to compare the "distance" between words.
The algorithm
Generate a list of pairs of etymologically related words.
For each pair, calculate their semantic distance from each other using GloVe.
Sort the list of pairs by the calculated semantic distance.
Heuristics: the author ignored words that have common prefixes like "un" or "re"; share first 3 letters; shares a substring of at least 4 letters; are unfamiliar or seemed uninteresting
The results
piano & plainclothed: Latin planus, meaning level, flat, even
potable & poison: Latin potare, meaning to drink
actor & coagulate: Latin ago, meaning act, do, make
estate & contrast: Latin stare, meaning stand
pay & peace: Latin pax, meaning peace.
cancer & cancel & chancellor: Greek karkinos, meaning crab
fantastic & phenotype: Greek phainein, meaning show
college & legalize: Latin lex, meaning law
lien & ligament: Latin ligare, meaning tie
journal & journey: Latin diurnus, meaning daily (A journey was historically the distance that could be traveled in a single day)
educate & subdue: Latin duco, meaning lead
Safari Web Extensions
Safari web extensions are available in macOS 11 and later, macOS 10.14.6 or 10.15.6 with Safari 14 installed, and iOS 15 and later.
Meet Safari Web Extensions on iOS - WWDC 2021 - Videos
We brought the same Web Extensions permission model from Safari on the Mac to iOS
How to create
Web Extensions are parts of apps
if you've already built a Web Extension for another browser, you can take advantage of a tool called the Safari Web Extension Converter
new in Xcode 13, the Safari Web Extension Converter creates a project that supports Safari on both iOS and macOS by default.
persistent background page isn’t supported on iOS
Optimize for mobile screens
By default, Safari on iPhone renders the web page as if it were the size of a desktop browser, and then it scales that larger content down so it all fits on screen
Best practices
non-persistent background pages
that the browser loads to run your extension's background script
allows your extension to handle events sent by the browser or other parts of your extension
background pages must be non-persistent on iOS
responsive design
the difference in screen size
important elements near the bottom of the screen may conflict with home indicator (solution: calculate the safe area inset and avoide it with CSS)
pop-up pages may need paddings and bg-color to look proper on iPhone
Dynamic Type: use WebKit’s defined system fonts
Pointer Events API: similar to the Mouse Events API, but also eports touches and Apple Pencil input
Web Extension Windows API
On iOS, each of windows is a scene
each scene has two windows: one for regular browsing and one for Private browsing (the
incognito
property istrue
/false
respectively)If open a 2nd scene of Safari in split view, the API would now report 4 windows
feature detection
context menus and WebRequest are not available on iOS
instead of unconditionally calling these APIs, conditionalize that code based on the existence of those APIs
Privacy considerations
users opt in to your extension when they choose to use it on specific websites
Safari will ask the user for consent by presenting a dialog which makes it clear which websites the extension is trying to access.
consent is required for any privacy sensitive API to work:
any API that reveals the URL or title of a tab;
the cookies API;
injecting JavaScript and stylesheet
If no consent is obtained, Safari will wait to call your completion handlers and will show a non-disruptive banner at the top of the screen.
the activeTab permission
permission automatically granted on tabs where the user explicitly uses your extension
Explore WKWebView additions - WWDC 2021 - Videos
in iOS 15, we have added a new API to bring one of your app extensions to a customized button on Safari view controller.
You can map this button to one of your app’s share extensions, and you can even set an image for that button that will best represent the extension that will run,
if you need to show web content, and you need to have complex interactions with it, then WKWebView is for you.
APIs that will allow you to interact with and manipulate your web content without using having to inject JavaScript.
Last year, we introduced a new feature called app-bound domains, which allows you to specify which domains you would like to allow deep interaction with in your app.
Injection of JS will disable app-bounded domains and Apple Pay
new APIs: access the pages’ theme color and related colors for a website; disable text interaction; control media playback in your web view.
APIs that will give you access to functionality that previously has only been available in Safari: simple HTTPS override flag; getUserMedia for media capturing; API to allow and manage downloads in your app.
Design for Safari 15 - WWDC 2021 - Videos
what determines which color is used for the background of the toolbar
you can choose the color and code that choice into your HTML (meta tag theme-color, dark mode is supported)
or in the web manifest file. If both are present, the color defined in HTML head prevails
For sites that don’t provide a color, Safari will figure out a color to use (background color or toolbar color)
If the one color you’ve specified is too light, in order to give the user Safari will make adjustments
Some tooling generates code that specifies a theme color along with the icon code for the HTML head.
Test that color and see if it’s a good one for the design of your site, perhaps changing it to a better one.
Provide a favicon with a transparent background
Tab title
Some sites put the name of the website first and the name of the page second.
Instead, put the content title first. That way, if someone has your site open in multiple tabs, it’s easier to tell which tab is which.
Demo
Notice the color of extra bars above the navibar (e.g., banners) and avoid the "staggering" effect
If provide a "theather mode" that changes the bg color of the page, consider change the theme-color upon the mode switching for a coherent Safari chrome color
Considering iPhone home indicator
set
env(safe-area-inset-bottom)
, which is a measurement of how many pixels it is to the bottom of the viewport.e.g., defined a padding bottom of
1rem + env(safe-area-inset-bottom)
signal to Safari that I want the browser to extend the content by changing the meta viewport tag to the left and right edges to
viewport-fit=cover
Elements may be blocked by the tab bar at the bottom
use safe area insets to move the input area up by the appropriate amount
Use more modern layout modes like Flexbox or grid
All of these [changes in Safari UI] means that the websites and web apps that you make are the "shining star of the show."
Save website to homescreen
Now the theme color fills the top of the screen, just like in Safari
Rich links are supported in more places other than Message app
visual intelligence
Anytime you hover over an image on macOS Monterey or touch the image on iOS or iPadOS 15, visual intelligence quickly finds and recognizes all the text in that image.
Once visual intelligence finds text, not only can you select and copy it, you can look it up it, translate it, search the web with that phrase, share the text, listen to it, just like any other text.
The text is injected into the Shadow DOM inside the image,
which means it’s not affected by JavaScript.
But it is affected by z-order.
So, if there’s something overlaying your image, like a transparent box, visual intelligence won’t be able to find any text in the image underneath.
CSS that’s been implemented in WebKit over the last year
aspect ratio: sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. See MDN
flex gaps: to define a minimum space between items
form controls:
Mac: users can fill out Date fields by interacting with a Calendar control or fill out the time with a Time control. And client-side validation is built right in
iOS and iPadOS 15: redesigned to better match the overall experience and fit in much better with UIKit and dark mode