CSS Algorithms Presentation
Slides for my talk, CSS Algorithms, were drawn on the iPad using Keynote and an Apple Pencil. I created rudimentary animations by layering in various images.
![A diagram showing how a module's code is share from an npm package to a PHP template](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/12/larva-module.png?resize=945%2C386&ssl=1)
Larva Design System
I initiated the design system and front-end standards at Penske Media Corporation in June of 2018 and have been leading the project since. The system powers a growing number of high-traffic publishing brands including Billboard, Variety, WWD, and The Hollywood Reporter, and is used by a team of over 70 engineers and product managers. The front-end and tooling components of the system are open source and can be viewed below.
Curriculum Design
Workshops:
- Generative Art with FizzBuzz in CSS (CodeDay, 2021)
- Let’s Build a Gutenberg Block (WordCamp EU, 2018)
Courses:
- Tackle Box Online Course (Online, 2016)
- UI Prototyping in Code (Pratt Institute, 2016)
- Coding II (Pratt Institute, 2014-2015)
- Coding I (Pratt Institute, 2014-2015)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2017/08/tackle-box.png?resize=584%2C415&ssl=1)
Technical Illustrations
I illustrate friendly representations of technical concepts using the Apple Pencil and Keynote on the iPad. Several of these illustrations were created for my talk, CSS algorithms, while others were created for blog posts or for fun.
A personification of the Depth First Search algorithm traversing a Directed Acyclic Graph.
![A graph with green and blue nodes that are personified as monsters holding poles. Each blue node is connected to a green node.](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/02/bipartite-monsters.jpg?resize=1200%2C987&ssl=1)
An illustration of bipartite graphs.
![On the left is a blue monster that is a metaphor for the browser. There are arrows for HTML, CSS, and JS pointing to its mouth. On the right is the same image but with an additional arrow "wasm" with an arrow poiting toward it that says "any language".](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/11/51002E9C-DCE3-47C4-B17C-9C26971C552A.jpeg?resize=1200%2C841&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/12/IMG_0196.jpg?resize=1200%2C1212&ssl=1)
![Image of an iceberg with the tip above the water being declarative CSS, and below the water, C++ and Rust](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.03.30-p.-m..png?resize=1200%2C678&ssl=1)
![Image of an iceberg with the "tip" being "the code we write" and the majority base being "what makes it work"](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.03.54-p.-m..png?resize=1200%2C680&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2019/02/single-responsibility-principle.png?resize=1200%2C672&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/12/box-programmer-article2.png?resize=1200%2C698&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/12/monster-programmers.png?resize=1200%2C807&ssl=1)
Programming Experiments
I enjoy learning new concepts in mathematics and computer science and finding connections between the front-end development I already know well. These experiments often morph into new projects, or I share them with the web community as a tutorial.
See the Pen Rule 110 in CSS/HTML/Human by Lara Schenck (@laras126) on CodePen.
See the Pen z^2 + C with fractions in CSS by Lara Schenck (@laras126) on CodePen.
See the Pen Plotting lines in CSS by Lara Schenck (@laras126) on CodePen.
See the Pen Generative Art in CSS – Primes by Lara Schenck (@laras126) on CodePen.
Monsters & Monster Stickers
The monsters appear in various forms in all of my work.
![Holographic blue monster with a very peaceful expression and calming eyes](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/02/monster.jpg?resize=1200%2C1200&ssl=1)
![Green monster with bulging, excited eyes and a genuine smile, peeking up from a straight edge](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/02/monster-1.jpg?resize=1200%2C1200&ssl=1)
![Lightblue monster with big eyes, a long nose, legs and a tail. Goofy!](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/02/monster-2.jpg?resize=1200%2C1200&ssl=1)
![A hand holding a set of holographic monster stickers](https://i0.wp.com/notlaura.com/wp-content/uploads/2020/03/holographic-monster.jpg?resize=1200%2C1200&ssl=1)
Analog Zines and Monsters
While much of my artwork happens on the computer or through drawing on the iPad, I still work in analog formats such as drawing in sketchbooks and creating zines using printmaking techniques I learned in college.
![Collage of sketches of cute monsters](https://i0.wp.com/notlaura.com/wp-content/uploads/2018/02/Monster-collage.jpg?resize=2560%2C1440&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2020/12/2020000014.jpg?resize=1200%2C900&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2020/12/2020000015.jpg?resize=1200%2C900&ssl=1)
![](https://i0.wp.com/notlaura.com/wp-content/uploads/2020/12/2020-000.jpg?resize=1200%2C1200&ssl=1)
![A grid of purple, green, and orange monsters with 2-3 etes each peaking up from the bottom of post cards. Very cute with big eyes!](https://i0.wp.com/notlaura.com/wp-content/uploads/2021/02/valentines-1.jpg?resize=1200%2C839&ssl=1)
That’s all!
Well, technically there’s more, but for the purposes of this page, that’s it! If you’d like to read me, you can check out my Now page, a kind-of-all-over-the-place About page, or a list of what I’ve read/am reading.