Smashing Magazine - 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 Events
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:


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


10. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Key phrases

Older messages

#373: Web Performance

Tuesday, October 4, 2022

With critical CSS, encoding quality settings, resource hint validator and memory debugging. Issue #373 • October 4, 2022 • View in the browser 💨 Smashing Newsletter Salām Smashing Friends, Over the

Meet “Smart Interface Design UX Checklists” (166 cards)

Thursday, September 29, 2022

Meet “Smart Interface Design Patterns Checklists”, 166 UX checklist cards to design and build better interfaces, faster. It's here! The Smart Interface Design Patterns Checklists, 166 UX checklist

#372: Free Fonts and Illustrations

Tuesday, September 27, 2022

With free Figma kits, free fonts and illustrations, generators and a few lovely spinners. Issue #372• September 27, 2022 • View in the browser 💨 Smashing Newsletter Bună Smashing Friends, Every now and

#371: The Incredible Web

Tuesday, September 20, 2022

With UX challenges, free icons, Markdown to timelines and smart ways to say No. Issue #371• September 20, 2022 • View in the browser 💨 Smashing Newsletter Zdravo Smashing Friends, The web is a magical

Meet SmashingConf New York 🇺🇸 (Oct 10–13)

Thursday, September 15, 2022

A friendly in-person conference on front-end, performance, UX and design. For interface designers and front-end engineers. October 10–13, 2022. SmashingConf NYC Is Back! Front-End, UX & Design.

You Might Also Like

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using

Bézier Curves, CSS Motion Extraction, CSS Testing, CSS Theming, Women Who Code

Monday, April 22, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 22 2024 Flattening Bézier Curves and Arcs minus-ze.ro

What makes a great seed stage founder

Sunday, April 21, 2024

Issue 191: What to look for (and avoid) in early builders ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Pierce & Ward’s Secret Sources, Business Advice You Can’t Afford to Miss, and More

Friday, April 19, 2024

View in your browser | Update your preferences ADPro “Minimalism is not my strong suit.” So says Emma Roberts, the muse behind AD's May cover story. (Celebrities—they're just like us!)