Image for post
Image for post

If you’re building a web app with React, you may want to see the state or props of components in real-time. Here’s a quick solution for Chrome & FireFox!

React Developer Tools

Install the React Developer Tools extension for Chrome or FireFox. It allows you to inspect React component hierarchies within the developer tools — the same way you would peek at the DOM elements, console, or network.

Inspecting React Components

  1. Open your app and inspect the page with developer tools (Command+Option+I).
  2. Select the React Developer Tools
Image for post
Image for post

3. Pick a component in the tree to see its state and current props.

Image for post
Image for post

You can also select a React element directly from the page by hovering over it with the selection…


Image for post
Image for post
Ruby, JSON, & Nokogiri

Sometimes you want to grab data from a website for your own project. So what do you use? Ruby, Nokogiri, and JSON to the rescue!

Recently, I was working on a project to map data about bridges. Using Nokogiri, I was able to capture a city’s bridge data from a table. I then used links within that same table to scrape associated pages. Finally, I converted the scraped data to JSON and used it to populate a Google Map.

This article walks you through the tools I used and how the code works!

See the full code on my GitHub repo. …


Solar System Game (Demo)

In this article, you’ll learn how to build a terminal game with a CSV and a few Ruby gems! See a demo in the video above, and find the code on GitHub.

This project comes from a lecture I gave at Ada Developers Academy in Seattle. The topic was the Ruby CSV library, and I wanted a fun way to illustrate its methods and potential.

In class, we discussed how most people use programs like Excel to create and edit CSVs. They make updates by clicking cells and changing values. But the question for us became: what can we do with a CSV if we approach it as programmers? …

About

Andrew Bales

Writer & software developer. Talking code, art, music, literature, and education.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store