In the second half of 2019, I took a hiatus from blogging to investigate which ideas from information visualization and cartography could help software engineers avoid getting lost in large or undocumented codebases. The project expanded into a conference CFP, eventually culminating in the presentation “I’ve Fallen into my Code and Can’t Get Up” and an Electron App to illustrate my findings. Before returning to a regular writing, I’ve decided to write a reflection on ideas learned along the way.
React JS Conferences Recap 🛫
In the fall of 2019, I traveled to Boston (Massachusetts) and Henderson (Nevada) to present at two React conferences. I had attended data science, visualization, and DevOps events in the past, but not gatherings focused on the community around a single framework. At the time, I was uncertain about whether attending conferences in person would be more valuable than watching recordings later.
Looking back, this feeling came from previous wonderings about whether watching videos is equivalent to attending lectures in person. Based on the rise of the flipped classroom, it seems that you may not lose very much in terms of learning efficiency from an information transfer standpoint.
However, a conference talk does not have the same goals as a “workshop” or a “college lecture” - you’re unlikely to walk away from a 30 minute presentation with competency in a new skill. This is a not a bug, as there are no shortcuts to nontrivial skills! The most engaging conference talks heavily appeal to pathos. They are compelling and attended in person for reasons similar to why someone might attend a live concert for their favorite musician and not merely be content with owning MP3 recordings.
This piece recaps a few things I now pay more attention to. I hope these may inspire someone (or remind my future self) to continue attending conferences in the future, whether as an attendee or presenter.
3 Non-technical Lessons
- Meeting people in person is energizing, and enriches future online interactions. I enjoyed getting to know people thinking about the same types of problems as I do, but in different parts of the world (Jed Watson from Australia) and in different industries. I’m glad to have had the chance to meet the maintainers of core libraries or articles that I’ve benefitted from such as Mark Erikson of Idiomatic Redux.
- While education is a goal, conference talks are also meant to inspire and entertain. There are elements of delivery (reading the audience, body language, inflection when delivering, etc) that aren’t captured in film recordings. Regardless of whether I’m able to replicate what I observed, I learned as much about elements of what makes a presentation engaging as I did about raw technical content.
- It’s much easier to navigate the unstructured “networking” parts of a conference as a presenter than as a regular attendee. It gives other people a natural reason to talk to you first, which saves you from having to approach them first. (I had read about this effect and experienced it after Meetup presentations, but I appreciate it more than I did before). With that said, shoutout to both sets of conference organizers for reminding people about the Pacman Rule to make it easier for people to ease into unfamiliar groups.
5 Technical Lessons/Actions
I have a notebook of technical lessons from official presenters and the “hallway track”, which is yet to be transcribed. However, in the spirit of learning in public, here is an initial (and non-exhaustive list) of things I’ve tried or queued up for work since the conferences.
1. React Devtools save time
After Brian Vaughn’s talk, I completed the interactive tutorial on using React Devtools effectively. It covers both the Performance and the Profiler tabs. It takes 15 minutes to complete, but has saved many times that duration in reduced time spent during performance optimization and bug investigation work. The “record the reason why this component re-rendered” option” alone is worth installing the extension. The alternative in the past was a medley on console.logs
and manually placed breakpoints.
2. USA Spending Explorer is built with Agile and React
I periodically reference Lizzie Salita’s presentation on using React to make an interactive treemap view for navigating hierarchical datasets, both out of interest in data visualization and in thinking about how to make public information accessible. You can visit the USA Spending Explorer here, and inspect the code on Github. I hope to see more of the agile + open source project approach in government technical tools.
3. Bringing Internationalization to blockbuilder-search
Inspired by Robin Dykema’s talk on i18n
, I plan to add internationalization to blockbuilder-search
. This is a search engine for the d3 data visualization examples are hosted at bl.ocks.org
(the precedessor to ObservableHQ). It will be even more impactful if it can benefit non-English speakers.
4. Automatically Generating Frontend Code with OpenAPI Specs
Thanks to Tejas Kumar’s presentation, I’ve started an internal project around code generation driven by OpenAPI (formerly known as Swagger). This combination improves the collaboration between frontend and backend teams by ensuring types and code are generated from the same “source of truth”. I am grateful to the maintainers of the restful-react
project, as they have been extremely responsive and supportive in expanding the library based on issues that arose when integrating the library into our codebase.
In particular, the work to add Yarn 2 compatibility and supporting a flexible code generation API for usage in non-react code environments have made my development experience more more pleasant. The Stoplight ecosystem of tools, which include the Studio Editor and Spectral JSON Schema Linter (which can be extended with rules similar to ESLint) have been valuable in for producing the OpenAPI specifications needed as inputs to the code generation pipeline.
5. Making animation/game-making accessible with Wick
Luca Damasco and Zach Rispoli’s Wick Editor is a delightful tool for making animations and interactive games in the spirit of Hypercard. Luca’s presentation is a must-watch if you’re curious about a story of iterating on a UI for users in a grade school environment. I’ve shared this tool with some relatives who do not consider themselves “programmers”, but are excited about the creative possibilities afforded by working in a digital medium. Stay tuned for possible future tutorials or creative code samples made with Wick!
Virtual Conference Resources
As rewarding as attending these conferences in person can be, you can still enjoy many of the benefits from watching the uploads with a friend and discussing the content afterwards. These links will assist in relive the official content. Please reach out if you notice an omission or have a post-conference reflection you’d like to share.
Bonus Conference Videos
In August, I attended VisFest Unconference in Chicago. I didn’t mention it in the main post since I didn’t present here, but the presentation styles influenced my thinking around slide making, so I’m mentioning them for comprehensiveness. I may write more about the topics explored in the Unconference breakout sessions in a future post.
- Susie Lu: Data Visualization Field Notes
- Valentina D’Efilippo: Creative Encodings
Appendix: Links associated with my presentation
- Speaking.io - Zach Holman’s guide helped with everything from writing the CFP to preparing the slides and rehearsal tips
- Code, slides, and videos: https://github.com/hydrosquall/code-maps-frontend
Presentation Reception (Twitter Shoutouts)
- React Boston: Encouraging words from fellow speakers Emma Bostian + Mark Erikson, Saima Jafri, Chris Achard, and Chaitra Basalavingu
- React Conf: Notes from Kent C. Dodds, fellow presenters Monica Powell + Tejas Kumar, Anton Korzunov, Theo Pak, Ashley Narcisse, David K. Piano, Samantha Jeet, and Benjamin Biggs