Ryan Canulla

Software Engineering Insights

Category: Uncategorized

  • Remote Debugging Node.js on Raspberry Pi with Chrome DevTools

    Remote Debugging Node.js on Raspberry Pi with Chrome DevTools

    There are many situations where you want to connect to a Node.js instance running on a remote server. Currently, I have a RaspberryPi running with input from a light sensor. It’s very helpful when debugging, to be able to step through the code running on the hardware directly.

    The RaspberryPi is already on my local network. I connect to the device over ssh and start the app, then step through the code on my local machine using DevTools.

    Bind Ports Over SSH

    When you connect to the remote session the key is to leverage the -L flag. This will take in a few arguments: 

     {port}:{host}:{hostport}

    Our ssh connection now looks more like this:

    ssh -L 9229:localhost:9229 pi@1.1.1.1

    We are saying that we want ssh configured specifically to bind any traffic on the remote session sent on port ‘9229’ to my local system’s port ‘9229’. After that we just have our standard ssh parameters where ‘pi’ is the username and ‘1.1.1.1’ is the ip address for the remote connection. 

    V8 Inspector Integration

    When I run Node.js using the –inspect, or –inspect-brk flags, this will enable the built in debugging utilities included with V8 and allow you to connect to a specific instance of Node.js to inspect, debug, and profile. By default, this debugger runs on port 9229 but this can be customized by passing in an override value to the inspect flag ex: inspect-brk=9230. 

    The way that this works under the hood is that it uses the Chrome DevTools protocol that ships with Chromium. Checkout their API, and stay tuned to hear more about how we can use this to automate tasks like profiling, or checking for memory leaks, using chromium and devTools.  

    Remote Debugging Example

    $ ssh -L 9229:localhost:9229 pi@154.222.12.111
    $ node inspect myscript.js
    Debugger listening on ws://127.0.0.1:9229/7e8d56bc-8a7e-4fe9-b958-e7805f26bae4
    For help, see: https://nodejs.org/en/docs/inspector

    References:

  • The New Full Stack: From I2C -> Woodworking Joinery

    A few years ago I started on a new passion project aimed to learn more about React.js. What I didn’t realize was that it would be a boundless hole filled with learning outside of my comfort zone.

    In the end, the journey sent me down a learning path which I would have never ventured; and I’m extremely thankful for it. 

    The Challenge

    The plan started off simple enough with a goal aimed at figuring out a way to solve a personal problem that I was facing — I wanted an easy way to know the ski conditions at my favorite resort. It’s not that this information wasn’t available to me, but more that it wasn’t presented in a way that I enjoyed; it felt like I needed to do a lot of legwork aggregating the various bits of information and putting it all together.

    My vision was to take a digital display, modify it to act as a kiosk powered by a microcontroller, and wrap it in a frame on the wall. The website and/or React.js was not the challenge; even dealing with real-time information. What I found was that the real problem to be solved was coming up with a graceful way to create the illusion that you are not looking at a digital screen. 

    The simple UI highlights closed trails and other related weather/mountain metrics
    “Standard” out of the box monitor settings are too abrasive in a typical room setting

    The Result

    After a whole lot of time, including the Stanford Machine Learning course by Andrew Ng on Coursera. I was finally able to nail down a solution that exceeds what I have seen in similar products available on the market today.

    Here is a high level overview of the of the software stack:

    • React, Material UI, Webpack, Sass
    • Node/Express/SocketIO/EC2, DynamoDB
    • RaspbianLite
    • Python (managing the display over i2c and all predictions)
    • Machine Learning (Gradient Descent)

    Stay tuned for more technical posts covering the various aspects of this fun little side project. In the future I plan to go into much more detail regarding the implementation in an effort to not only document my work, but hopefully to inspire others to continue tinkering and pushing themselves outside of their comfort zone.

  • Reviving the Blog!

    It’s been a long time since I sat down and wrote about technical content from a personal perspective. I decided that 2020 would be the year in which I bring back my blog, and vow to share more of my side projects. 

    For the past 5-6 years I’ve worked as an engineering consultant for a large publicly traded underwriting software company. For the most part I specialize in large scale UI architecture and all that comes with this space. Typically, I work on the hard problems and set the patterns that will be used to scale the software. 

    Outside of my main “day work” I’m typically working on 1-n number of side projects at any given point. Lot’s of cool ideas come out of these projects so my thinking here is that I will use this blog as a platform to share some of the content. 

    Stay Tuned!