2022-05-19.01
Discover more from hrbrmstr's Daily Drop
2022-05-19.01
Location, Location, Location; DNS Bakeoff; Where To Go To Be Scene
Topics gravitated towards a "location" theme today, where we'll learn a bit about getting maths (and other things) in your browser's location bar, checking out a public DNS resolver Fight Club, and finding the places where Hollywood (et. al.) goes on Earth to shoot your favorite shows.
Location, Location, Location
I don't follow a ton of folks on social media, but the ones I do follow often post solid gold, like this generative art piece (one render using it is in the section header) by @piterpasma:
Yes, generative art is all over Twitter thanks to the NFT bubble, but what made this particular tweet stand out, is that it also contained a code snippet you can cut and paste into your location bar:
data:text/html,<canvas id=x><script>X=x.getContext("2d");s=Math.sin;p=[...Array(x.height=x.width=w=904)].map(G=Math.random);w/=2;g=([x,y],[a,b,c,d])=>w+s(3*a*x/w+7*b)*s(7*c-3*d*y/w)*w;for(v=[0,i=9e5];--i;v=v?.map((x,j)=>g(v,p.slice(h+j*4))))h=G(X.fillRect(...v,1,1))*32|7</script>Yep, select that compacted string, paste it in your browser's location bar, and see what manifests. Do that repeatedly, since it changes with each run.
Piter is taking advantage of data URLs FOOTNOTE They were formerly known as "data URIs" until that name was retired by the Web Hypertext Application Technology Working Group (WHATWG).
"Data URLs" are URLs prefixed with the data: scheme (you're very familiar with http:/https: schemes), and can be used to embed small files inline in documents or pasted right into the location bar. Each browser is different when it comes to maximum length supported in both inline links and the location bar, but — for the location bar use case — it's best to keep these text blocks under 2K.
You can do all sorts of things in the location bar, like send an email (this will open or prompt to open the default mail program on your operating system):
mailto:nobody@example.com?body=Hi!
You can make animations that rely on other internet resources (I'm no generative artist, so this is lame, but demonstrates the concept):
data:text/html,%3Cimg%20src=%22https://www.sweasy26.com/emoji-dictionary/images/black-small-square.png%22/%3E%3Cscript%3Efunction%20A()%7Bfor(i=0;i-z;i++)ss=ii%5Bi%5D.style,ss.position=%22absolute%22,ss.left=Math.sin(R*x1+i*x2+x3)*x4+x5+%22px%22,ss.top=Math.cos(R*y1+i*y2+y3)*y4+y5+%22px%22;R++%7DR=0,x1=.1,y1=.04,x2=.3,y2=.4,x3=1.6,y3=.33,x4=200,y4=100,x5=200,y5=100,ii=document.getElementsByTagName(%22img%22),z=ii.length,setInterval(%22A()%22,5);%3C/script%3Eand, this turns your browser into a bare bones notepad:
data:text/html, <html contenteditable>I encourage folks to poke around the internets for more examples, but highly suggest seeing what clever bits you can come up with. You can code up normal HTML/JS/CSS etc. in a standard way, then use something like the Minify HTML tool mentioned in a previous newsletter edition to compact your creations so they'll fit into the location bar.
DNS Bakeoff
We do not normally type or paste Data URLs, like the above, into browser location bars. We're generally typing a regular HTTP[S] URL, followed by a domain name, and then a path and possibly other URL components.
To know where to send our requests, browsers need to take the name between the // and /, and turn it into an IP address so the communication process can begin. That process relies on the Domain Name System (DNS) to do the strings-to-IP address translation.
Once a page loads, it has resources that are also requested, possibly dozens (even hundreds!). While one slow DNS query may not be problematic, using a slow DNS resolver could, and often does, drastically slow down page load speed.
Using either your local ISP resolver or some third-party public resolver comes with security, privacy, and integrity trade-offs. We'll mention a few of these in upcoming editions, and take many examples and topics from Geoff Huston's most excellent ISP columns (in case you want to read ahead). For now, we'll throw caution to the wind (for the sake of speed) and mention DNSPerf's DNS Performance Analytics and Comparison that uses hourly query data to rank speed, quality, and uptime of authoritative DNS providers (the final holder of the IP of the domain you are looking for), public DNS resolvers, and[ NS root servers the group of servers that ultimately control global DNS.
The chart in the section header shows the rankings of public DNS resolvers (you can go to DNSPerf and futz with the comparison options for other views). While Cloudflare (1.1.1.1) seems to be the fastest, I'm not really comfortable with a single company which operates content delivery networks, VPNs, and fronts scads of web pages also getting my DNS queries (full disclosure: I don't trust Cloudflare). While Quad9 may be a fraction of a bit slower, it's what I trust for non-research browsing (I work in cybersecurity and have to hit things Quad9 may block as it has a safety focus).
You can run an open-source tool dubbed dnsperf to test any resolver you like, which is ultimately going to be the best way to see which one is fastest for you.
Where To Go To Be Scene
Most films, TV shows, and streams feature a combination of on-location and in-studio shoots. Going out and about can be expensive, but it may provide the perfect fictional (or IRL) setting for the quintessential scene in your production, like the Death Valley National Park, which was used in The Mandalorian.
There are some sites that provide (far from comprehensive) "databases" (don't be expecting to see a CSV file) of locations for various works:
Movie Locations (based on
The Worldwide Guide To Movie Locations book)
And, there are even "Airbnb"-ish services, such as Locations Hub, where you can look for a place to shoot your epic scene, or offer up your humble homestead for use by the stars.
FIN
That's a wrap for today! If you made or found some cool Data URL creations def take a sec to drop them in the comments. ☮