2022-08-24.01
Truchet Tiles
Truchet tiles are "square tiles decorated with patterns that are not rotationally symmetric. When placed in a square tiling of the plane, they can form varied patterns, and the orientation of each tile can be used to visualize information associated with the tile's position within the tiling." I find them oddly mesmerizing, especially when there are so many toys built to play with them.
Dan MacKinnon has a great blog post on these tiles that is worth your time reading, vs ingesting any summary I might make of it. He has a fun explorer page with full source code available
Chris Carlson also has a post on multi-scale Truchet patterns worth reading as a another primary source, which goes into the many ways tiles can be assembled in arrangements, such as random-placement, regularly patterned grids, or filling arbitrary areas.
And, while there are more generators and blogs on the topic, a recent one by Ned Batchelder also comes with code for using this tiling algorithm for dithering
There's also an excellent paper on "spanning tree contours" — a special class of Truchet contours — in a 2008 paper by Cameron Browne dubbed "Truchet curves and surfaces" (direct PDF link).
But, Truchet's tiles aren't just for artwork, dithering, or masonry. They're also found in games & activism:
If you play with any of the Truchet makers, drop some links to your creations!
pldb
PLDB [GH] is a "comprehensive database of programming languages and their features. The focus is on programming languages, but the database also includes other languages and entities one degree away--from popular high-level plain text formats to binary specifications and beyond."
PLDB is not just a searchable website. It is also data that comes in the form of two CSV files. The first is languages.csv, which contains ~4,000 rows (each being a language) and 298 columns. The other one is pldb.csv and is languages.csv plus operating systems and editors (~4,600 observations).
It's a super-fun dataset! Did you know that 71 languages (featured in the section banner word cloud) have Jupyter kernels?
If you find any interesting ones or come up with some creative ways to visualize the dataset, post a note in the comments!
patterns.dev
It's been a minute since we've looked at design patterns, and with today's theme being "build something" (oh, did I mention there was a theme?), we should take a look at a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React, by Lydia Hallie (@lydiahallie) and Addy Osmani (@addyosmani).
The free ebook is accompanied by a blog, and they cover quite a bit of ground:
Introduction: Introduction to Design Patterns
Singleton Pattern: Share a single global instance throughout our application
Proxy Pattern: Intercept and control interactions to target objects
Provider Pattern: Make data available to multiple child components
Prototype Pattern: Share properties among many objects of the same type
Container/Presentational Pattern: Enforce separation of concerns by separating the view from the application logic
Observer Pattern: Use observables to notify subscribers when an event occurs
Module Pattern: Split up your code into smaller, reusable pieces
Mixin Pattern: Add functionality to objects or classes without inheritance
Mediator/Middleware Pattern: Use a central mediator object to handle communication between components
HOC Pattern: Pass reusable logic down as props to components throughout your application
Render Props Pattern: Pass JSX elements to components through props
Hooks Pattern: Use functions to reuse stateful logic among multiple components throughout the app
Flyweight Pattern: Reuse existing instances when working with identical objects
Factory Pattern: Use a factory function to create objects
Compound Pattern: Create multiple components that work together to perform a single task
Command Pattern: Decouple methods that execute tasks by sending commands to a commander
Learning JavaScript Design Patterns: The classic JavaScript design patterns book, updated to ES2015+ syntax.
Introduction: An introduction to Rendering Patterns
Overview of React.js: A UI library for building reusable user interface components
Overview of Next.js: Vercel's framework for hybrid React applications
Client-side Rendering: Render your application's UI on the client
Server-side Rendering: Generate HTML to be rendered on the server in response to a user request
Static Rendering: Deliver pre-rendered HTML content that was generated when the site was built
Incremental Static Generation: Update static content after you have built your site
Progressive Hydration: Delay loading JavaScript for less important parts of the page
Streaming Server-Side Rendering: Generate HTML to be rendered on the server in response to a user request
React Server Components: Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle
Selective Hydration: How to combine streaming server-side rendering with a new approach to hydration, selective hydration
Islands Architecture: The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages
Optimize your loading sequence: Learn how to optimize your loading sequence to improve how quickly your app is usable
Static Import: Import code that has been exported by another module
Dynamic Import: Import parts of your code on demand
Import On Visibility: Load non-critical components when they are visible in the viewport
Import On Interaction: Load non-critical resources when a user interacts with UI requiring it
Route-Based Splitting: Dynamically load components based on the current route
Bundle Splitting: Split your code into small, reusable pieces
PRPL Pattern: Optimize initial load through pre-caching, lazy loading, and minimizing roundtrips
Tree Shaking: Reduce the bundle size by eliminating dead code
Preload: Inform the browser of critical resources before they are discovered
Prefetch: Fetch and cache resources that may be requested some time soon
Optimize loading third-parties: Reduce the performance impact third-party scripts have on your site.
List Virtualization: Optimize list performance with list virtualization
Compressing JavaScript: Reduce the time needed to transfer scripts over the network.
Airbnb Case Study: Optimizing Airbnb Listings
Optimizing Core Web Vitals on a Next.js app: A case study optimizing performance
You're, in effect, getting a full course on web development for free!
All the folks behind these resources are excellent at what they do, most entries come with (gentle) code, and the resources are well-written and accessible if you're at all familiar with even the basics of modern web technologies.
FIN
Go forth and build! ☮