August 7th, 2024

An article using The Little Schemer format, what do you think of it?

The article guides integrating p5.js animations into web pages, detailing a node grid experiment, essential functions, code organization, and hints at future discussions on more complex animations.

Read original article

An article using The Little Schemer format, what do you think of it?

The article provides a comprehensive guide on integrating p5.js animations into a web page, focusing on basic concepts and practical implementation. It outlines an experiment that displays a grid of interconnected nodes, where probes propagate from one node to another. The integration process is demonstrated through a series of code snippets, including the setup and draw functions essential for creating animations in p5.js. The setup function initializes the canvas and the probes, while the draw function updates the animation by rendering the background and the nodes. The article emphasizes the importance of avoiding the global scope by encapsulating the code within a function. It also discusses the use of a button to reset the animation and the conditions under which the animation stops. The article concludes by noting that while the basic components of p5.js animations have been covered, more complex animations would require additional coding techniques, which may be explored in future articles.

- The article explains how to integrate p5.js animations into web pages.

- It features an experiment with a grid of nodes and probes that demonstrate propagation.

- Key functions include setup() for initialization and draw() for rendering animations.

- The importance of avoiding global scope in code organization is highlighted.

- Future articles may address more complex p5.js animations.

Flow Charts with CSS Anchor Positioning

The article explains using CSS Anchor Positioning to create flow charts and diagrams. It covers positioning elements, creating nodes with CSS tricks, expanding charts, and making nodes draggable with JavaScript. It aims to assist developers in creating interactive charts.

CSS Surprise Manga Lines

The article explains creating a manga-style surprise effect with CSS, focusing on replicating character facial lines. It suggests using GIF overlays for better performance than CSS animations. Published on July 2, 2024.

Show HN: Simulating 20M Particles in JavaScript

This article discusses optimizing JavaScript performance for simulating 1,000,000 particles in a browser. It covers data access optimization, multi-threading with SharedArrayBuffers and web workers, and memory management strategies.

Build your own React (2019)

Rodrigo Pombo's guide demonstrates building a simplified React version from scratch, focusing on React 16.8 with hooks. It covers creating core functions, Concurrent Mode, Fibers, and reconciliation. The tutorial emphasizes understanding React's internals by gradually implementing key features.

p5.js

p5.js is a free JavaScript library for artistic creation, supported by a diverse community. Recent workshops include a coding club for seniors in Korea and global events at various institutions.

6 comments

By @sivers - 6 months

I'm a fan of the Little Schemer, so I'm happy you're trying this format. I hope you keep trying more than once. Sometimes these things take a while to get right and find the sweet spot.

Little Schemer was instantly appealing because it starts so simply:

    1. Is it true this is an atom? : atom
    2. Is it true this is an atom? : turkey
    3. Is it true this is an atom? : 1942
    6. Is it true this is a list? (atom)
    7. Is it true this is a list? (atom turkey or)

I came to your page wanting to learn P5.js, but it started a little too involved.

Consider starting with a few simpler questions and answers like this, which also helps just teach the format and interface, before asking the reader to work their brain much harder.

By @dingosity - 6 months

First things first... hella props for just going out and doing something creative.

Things I like:

1. It's obvious where sections begin and end.

2. PLENTY or margin and padding. I know some people try to cram as much info on a single line as possible. My old eyes prefer spacing; it helps them track the text.

3. With one exception (mentioned below) the font sizes seem to "look good."

Things I might suggest are improvable:

1. It's not obvious what the show/hide button at the top of the page does at first glance. The button is at the top of the page and its effects are seen at the bottom of the page. Maybe put another copy of the button immediately above the answer section?

2. Continuing the show/hide theme, the per-answer-section show/hide button hides the content, but maintains the blank space in the document. That seems "wrong" to me since I have to scroll past complete blank areas when looking at it on my phone. And I think we could have no end of discussion whether those buttons should be at the top or bottom of the section that gets hidden. I'd just suggest trying putting them at the top and see if they look better to you.

3. The "Objective", "Question", "Result", "Answer" sub-section headers seem like they should be a little bigger.

I don't know if you tested some of these options, and completely defer to you if you tested them and they look even weirder. Just my $0.02. Mostly looks great.

By @layer8 - 6 months

“Show answer” should better be below the question, where the answer appears. Also so you don’t have to scroll up again for longer questions.

By @chuckadams - 6 months

The individual “Show Answer” buttons are doing nothing on mobile Safari, though the top toggle button does work. Those fixed top buttons are also eating up a lot of space on a phone.

Otherwise, looks quite nice!

By @pwg - 6 months

Does not render at all (blank screen) with javascript turned off by uBlockOrigin.