374: Obscure Treasures Of The Web

With QR codes, visualizations, dark secrets podcasts, type treasures and Mini Tokyo 3D. Issue #374• October 11, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Howdy, Smashing Friends! New York, New York! As this newsletter is landing in your inbox, [SmashingConf New York]( is kicking off. After three years since we last gathered in NY for SmashingConf, we are so looking forward to spending the next two days together with the community — learning, sharing, and, of course, having fun! [SmashingConf NYC 2022]( Vitaly kicking off the [SmashingConf NYC](. Image credit: Eva Ferreira If you couldn’t make it to New York to join us, we’ve prepared a newsletter issue for you that will take you on quite a journey, too. Just like our attendees, you’ll get to explore metropolises (from quite a different perspective), you’ll get to do some networking (in a slightly different way), and you’ll get to sneak a peek into the obscure and hidden corners of the web. By the way, as we’re closing off the in-person conference year 2022 with New York, we have some wonderful events coming up soon. If you’re up for a free mini-conference experience, join us for our [Smashing Meets Design Systems]( in a little over a month to dive deep into all things design systems, together with Brad Frost, Dan Mall, and Hayley Hughes. Or maybe we’ll see you in one of our [upcoming online workshops]( soon? Have a smashing day — no matter where in the world you are! — Cosima --------------------------------------------------------------- 1. A Look Inside QR Codes Have you ever wondered how QR codes work? Well, they are quite fascinating. So if you are up for a nerdy journey into the world of QR codes, Dan Hollick’s [blog post]( is for you. [QR codes]( The QR code, or Quick Response code, was invented by a subsidiary of Toyota to track parts across the manufacturing process. It had some major advantages compared to barcodes: the QR code could be read at all angles and store more data relative to its size. As Dan explains, this is due to a combination of patterns that store the actual data and patterns that store error correction information to ensure that the QR code stays readable even when parts of it are obscured. Clever! (cm) --------------------------------------------------------------- 2. The Dark Side Of The Web We all know that the Internet has a dark side, a world (seemingly) far away from friendly communities, happy cat videos, and things that make our lives easier. It’s the part of the web where hackers, breaches, and cybercrime dwell. And as with everything that happens in the underground, real insights into this secret world are quite rare. We came across four fantastic podcasts that are here to change that. [Darknet Diaries]( [Darknet Diaries]( is one of them. Already running its 125th episode, the podcast captures and explains the culture around hacking and cyber security. Whether it’s breaches, shadow government activity, hacktivism, or cybercrime, Darknet Diaries dives deep into the hidden parts of the network. [Malicious Life]( tells the unknown stories of the history of cybersecurity, with comments and reflections by real hackers, security experts, journalists, and politicians. It takes you from the early hacking culture of the 1970s and 80s to today’s advanced cyber threats. The weekly podcast [Hacking Humans]( looks behind the social engineering scams, phishing schemes, and criminal exploits that are making headlines and taking a heavy toll on organizations around the world. Last but not least, [Exit Scam]( is a podcast about a mysterious death and a missing fortune. It investigates the death and afterlife of Canadian crypto baron Gerald Cotten who died under mysterious circumstances on his honeymoon in India, causing a $215 million problem for customers of his Bitcoin exchange Quadriga. But is he really dead? (cm) --------------------------------------------------------------- 3. Interactive City Noise Maps Imagine cities were car-free. There’d be less air pollution, less CO2 emissions, and more green spaces. And it would be a lot quieter, too. But how much noise does road traffic produce in megacities? [Noisy Cities]( an initiative by the climate charity Possible, lets us experience it first-hand. [Noisy Cities]( Built upon the idea of Karim Douleb’s original [Noisy City map of Brussels]( Noisy Cities features noise maps for London, Paris, and New York. To explore the loudest and quietest spots in a city, turn on your speakers, and hover your mouse over the map. A decibel scale shows you the noise intensity, and, of course, you will hear the traffic noise changing as you move your mouse’s position. A thought-provoking experience. (cm) --------------------------------------------------------------- 4. Mini Tokyo 3D Tokyo has one of the most complex railway networks in the world, with more than 2,200 trains running simultaneously during rush hour. Pretty impressive, right? But what’s even more impressive is that you can follow along each of these trains, in real-time, from your laptop at home or smartphone on the go. [Mini Tokyo 3D]( makes it possible. [Mini Tokyo 3D]( Each train in operation and airplanes arriving at or departing from Tokyo are represented on the map. You can see each of them moving smoothly over the map, in real-time, color coordinated to the color of their line. Click on a train to see its schedule or click on a station to get more information about it. For a more realistic scenery, the color changes according to the sunrise and sunset times in Tokyo, and a rain animation delivers real-time weather information. To make the experience complete, you’ll find street webcams embedded on the map as well. The project is more than a nice gimmick, though. You can use it for real-time route searches, to find multiple candidate travel routes based on train delays, or to track a train and judge if you should dash to not miss it. (cm) --------------------------------------------------------------- 5. Upcoming Online Workshops That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s an overview of our [upcoming workshops]( - [Smart Interface Design Patterns]( UX 8h-video course on interface design with Vitaly Friedman - [Designing for Emotion Masterclass]( UX with Aarron Walter. Oct 17–18 - [Pushing CSS to The Limit]( CSS with Amit Sheen. Nov 2–10 - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. Nov 14–28 - [Mastering the Design Process]( Workflow with Paul Boag. Nov 15–23 - [Designing The Perfect Web Forms]( UX with Vitaly Friedman. Nov 17–18 - [Figma Workflow Masterclass]( UX with Christine Vallaure. Nov 17 – Dec 1 --------------------------------------------------------------- 6. Network Visualizations Made Easy Network visualizations with hundreds of thousands of nodes and edges are fascinating. However, the more edges and nodes you have in your network, the more difficult it is to compute and render the layout. Luckily, we have WebGL these days that can do the heavy lifting and render complex visualizations for us. That’s where [Cosmograph]( comes in. [Cosmograph]( Cosmograph combines a layout algorithm and rendering engine and is capable of visualizing networks that have a million nodes and edges, right in your browser. All the computations and drawing are happening on the GPU in fragment and vertex shaders, avoiding expensive memory operations. Everything you need to do is upload a CSV, and Cosmograph visualizes it for you. If you want to use the power of Cosmograph to visualize big graphs in your own project, also be sure to check out the [Cosmos library](. (cm) --------------------------------------------------------------- 7. Data Visualization Journal Can we understand blood test results without numbers? How did Soviet artists design data? And how can you visualize the network of the dragons from Game of Thrones? Data visualization is an exciting topic, and you probably won’t find a resource that dives as deep into it as [Nightingale](. [Nightingale]( Nightingale is the journal of the Data Visualization Society, a non-profit organization that supports the growth, refinement, and expansion of data visualization knowledge regardless of expertise level. Run by a large team of passionate people, Nightingale publishes articles that cover all aspects of data visualization — from personal stories to exploratory research to interviews with leaders in the community, data ethics, and best practices. A treasure chest for everyone interested in data visualization. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS in Information Design and Strategy [Northwestern’s Online MS in Information Design and Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more](. --------------------------------------------------------------- 8. Archive Of Found Typography Camera cartridge loads, shoe polish, spices, soap. Whenever Jonathan Lawrence comes across a piece of vintage packaging, a sign, or other typographic artifact from the past, he takes a photograph and archives it on his blog [Type Hunting](. And while some might see Type Hunting just as a collection of vintage stuff, these things tell a bigger story. [Type Hunting]( As Jonathan explains, it’s the personal feel that makes the objects in the collection so appealing. Back when they were designed, there were no marketing teams or research groups; people just needed things to look good and to be produced easily. Jonathan wants to save these pieces of found typography so we can recognize them and learn from them. And indeed, the blog proves that these designs, and the approach behind them, stood the test of time and still inspire today. (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [Design System Builder / DesignOps Specialist]( at zooom productions GK (Tokyo / Remote) - [Developer — Omnichannel & CCaaS Platform]( at THRIO, INC. (Madrid) - [UX Designer]( at Software Engineering Institute (Pittsburgh , PA) --------------------------------------------------------------- 10. Recent Smashing Articles - [Easy Fluid Typography With clamp() Using Sass Functions]( - [Delightful UI Animations With Shared Element Transitions API (Part 1)]( - [October Vibes For Your Desktop (2022 Wallpapers Edition)]( - [Unconscious Biases That Get In The Way Of Inclusive Design]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](