hrbrmstr's Daily Drop

Share this post

2022-08-24.01

dailyfinds.hrbrmstr.dev

2022-08-24.01

Truchet Tiles; pldb; patterns.dev

boB Rudis
Aug 24, 2022
1
Share this post

2022-08-24.01

dailyfinds.hrbrmstr.dev

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!

Leave a comment

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

  • Hey.com: Minimal JavaScript at Hey.com

  • 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.

Share

FIN

Go forth and build! ☮

Share this post

2022-08-24.01

dailyfinds.hrbrmstr.dev
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 boB Rudis
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing