Raspberry Pi Project Build #2 - Building a client using ES6 + ReactJS

Once I got the simple client, built with HTML and jQuery, on the server going and could see it was sending messages, I knew I wanted to change this and build it with ES6 and ReactJS instead. I've built some small projects so I could learn React and I've built some tools for User & Admin dashboards for a project at my last job, but I honestly hadn't written any JS or React in a few months and was pretty worried how it would actually go. And I had only recently dabbled with ES6. I created a project within my server using the React Create App CLI, which takes care of all the configuration, leaving you only to have to worry about building your project and allowing me to quickly get started.

I have found the most important thing that I have learned as a software developer is that you HAVE to break big tasks down into the small bits of tasks to make them manageable. So, I started by getting the SocketIO client setup again and making sure that that config was sending messages to the server. Then, I wanted to start on the layout. I made a sketch of what kind of UI I was hoping to achieve to keep me on track:

Mockup of my UI design

The mockup shows that I should have a grid of 64 squares, representing each of the LEDs in the UnicornHAT. When a user clicks on a square, the color changes to indicate that square will be illuminated on the Pi. Once a user enters their design and clicks submit, that design is immediately sent to the Raspberry Pi and is displayed for 10 seconds. At first users wouldn't get to select colors, but, eventually, there should also be a slider bar where a user can select a color, then click on one of the squares and select that color for a square.

There's a good bit to figure out and build here, so I started at the smallest part, a Square component. Then, I created a Board component, a grid of 64 Square components. It really is all about working on reasonably sized tasks that are small in scope and build upon those to increase the complexity of your app. I did struggle for a little while to get the board component looking ok, updating state properly, and in an 8x8 configuration.

I've found that working with ES6 has really made writing JS much more of a joy for me. I actually really, really enjoy it now. Things just make a lot of sense and the find the code is clean and is much easier to navigate than ES5.

At this point the squares did not change color when clicked, only updated a boolean field from false to true. I was anxious to actually get the raspberry pi and find out if my design decisions were going to place nicely with the pi, before going too much further on this.

At this point, I still didn't have my raspberry pi yet, so I also played around with add some authentication for the socketIO clients with the server. It wasn't terribly difficult to setup, but it is hard to find easy-to-understand documentation on how to do this stuff. It was also tricky since I needed to code this in both JS, React, and Python. 😏 It was also a bit tricky deploying the react client on heroku since it was within the Express server. I didn't want to have to worry about having to manually build/minify the app before deploying it. So, I eventually figured out that I could edit the scripts in the express server's `package.json` file and get the react app to be built upon every deployment to Heroku. This ensures it is the most up-to-date and correct version of the React client every deployment.

Raspberry Pi Project Build #1 - Controlling the Hardware Remotely With Socket.IO

So, I started last week on my raspberry pi project. I had not received my Raspberry Pi yet, so I first started figuring out how might I be able to accomplish having a web app that sends messages to the pi from OUTSIDE my local network. My initial thought was building a front-end in React/React Native with a Ruby on Rails API backend that would control the pi. I quickly realized in some internet research that a RoR backend would not be optimal, mainly because there was already a library in Python for controlling the UnicornHat LED board. So, it was in my best interest to write the pi's software in Python, even though I have no experience in Python. I would still keep the frontend in React & React native.

With that kinda worked out, I next focused on figuring out how I was going to send messages from outside the local network to the pi. The main goal of this project was that I wanted to make a fun, interactive lightboard where friends across the world could send me so pixel art that would pop up in my living room. So much of the raspberry tutorials and info focused on controlled a LED or lights while on the local network or it only interacted through GET requests to well-known APIs like twitter or gmail. I needed to send POST requests to the pi.

I started looking and couldn't find a lot of helpful info that was applicable to my project. I had heard of websockets, but hadn't used them before in any project. I started wondering if possibly that could work for me. Luckily, I found this wonderful video where someone created a server and clients using SocketIO and javascript to turn on an LED on a raspberry pi. It was kinda a mind shift for me to think of the RPi as a client, since, for some reason, I wasn't even imagining having a separate server to handle all of the requests/messages and the Pi AND the mobile/web apps being clients. After I thought a bit about it though, it made a lot of sense. I looked into if there was a python socketIO client library... and there was! So my plan was to follow similarly what I saw in the video and implement the following:

• Create a simple Express server (javascript) that connects to clients and relays socket messages.
• Create a javascript client on the server for testing the server.
• Create a python client and make sure it receives socket messages from the server.
• Create a react-native app using ExponentJS with a button just to see if it works. Make sure it connects to server and sends messages.

Project diagram showing SocketIO communication flow.

I spent my first day working on this. Surprisingly, this went pretty smoothly even though everything I was doing was basically new to me (especially the figuring out python part). I was able to get the server going locally and relaying messages to a bare bones python client and JS client on the server!

I got the python client connected and receiving messages from server!

I also went ahead and deployed my server to heroku and updated the configuration of the clients. After getting it to work, I created another client using ExponentJS and React Native. Honestly, after setting up 1 client, the process is almost identical in the other clients, minus the differences in the languages, of course.

Using exponentJS XDE, I have a React Native client also working with the server and other client!

I was pleasantly surprised that, at the end of the first build day, I had a server and the raspberry pi and react native clients communicating with each other. I really was expecting to struggle with this for days.

As I still hadn't received my raspberry pi yet, I decided that my next step would be change the client on the server, which was just html and jQuery over to React.

CS50x & a Raspberry Pi Art Project

Since my last blog post, I decided to finally try Harvard's Intro to Computer Science course (CS50) that is available to take for free through EdX. The course consists of 12 weeks of lectures, 9 problem sets and a final independent project.  Watching the lectures and working through the problem sets is a definite time commitment, especially as the coursework progresses it gets much more challenging.

During the past month I've been going through a very stressful period so I've found this course to be a great escape for me. I have thrown myself into the coursework and have been working intensely on getting through all 9 problem sets. I've learned C by solving problems using different sorting algorithms, different types of data structures, allocating memory, recovering 'lost' jpeg images from a data file, implementing a spellchecker and a web server ...all in C. I even wrote PHP for the first time to complete the last few assignments. It was nice to see that the things I'd learned as a Ruby on Rails dev were transferable when I was working in a unfamiliar language like PHP. To me, it made me feel like a real programmer. Though the language's syntax is different, the underlining principles and problem solving strategies are pretty universal. It's just really an adjustment to the syntax of the language. So I was able to jump into a PHP project, without any background in the language and get through the tasks relatively simply.

Last week, I finished all the problem sets, I just started on my final project. For this project, you have complete freedom to choose to write any kind of software that you want. I knew I wanted to do something artistic, interactive and with language(s) outside my comfort zone. I drew inspiration from a few places-- the current exhibit of Jean Tinguely's art at the Stedelijk Museum, an interest in learning about Raspberry Pis (and maker culture), and recent attendance at a React Native meetup.

My original idea was a Tinguely-inspired wall installation with EL wire, leds, motors that were connected to a raspberry pi that could be controlled/interacted remotely by a user with a mobile app. As I researched more about hardware and RPis, I soon felt overwhelmed by the hardware side of it - wiring, circuitry, power supply, soldering.

Since my focus is mainly on the software, I didn't want to get discouraged during my project by the hardware side of things. I want to setup myself for as much success as possible. So, I opted to go simpler for now and purchased a preassembled LED board with a square grid of 64 LEDS. This way, I can focus on the writing the software and getting my feet wet with hardware/RPi. Then, if it is a blast to work with, I can dive deeper into building my own hardware on future projects.

I will be using 2 pieces of hardware for this project, a Raspberry Pi 3 and UnicornHAT:

Raspberry Pi 3 w/ an AMAZING rainbow case

UnicornHAT 64-LED board

I still haven't received the hardware I ordered yet, but I've already started on the software infrastructure that is necessary to get the Raspberry Pi communicating with a remote native app or web browser. I've already gotten the RPi's software communicating with a server and receiving data from a React Native app using websockets. I am going to post much more frequently to detail how the build process is going and document what I'm up to.

This is one of the most intensive projects I've taken on by myself, since I will be writing code in multiple languages that I am not familiar with. It'll be the first time I'll work with hardware, write a native app, work with websockets, code in Python, etc etc. I can't wait to see how it all turns out.

still here, learning and growing.

I've started writing this blog update many times over the past several months but always felt like it was inadequate, too long after the fact of doing something interesting, and I had just missed covering too much stuff over that time and it was too late to share it. So I ended up never publishing anything at all.  

My absence from the blog doesn't equal inactivity. Quite the opposite of that, actually. I'm still at my original & first dev job and coding every Monday through Friday and sometimes on the weekends. I go to tech meetups and even host my own events. Heck, I even co-organized and co-hosted a Stupid Hackathon in Amsterdam.

This year has been weird, stressful, anxious, exciting for both me as a human being and me as a programmer.

Here are the code-related highlights:

• I've regularly kept up hosting the Coffee & Code meetups I started with another awesome person in January. Every 2-3 weeks we meet up to work on code and generally support each other while drinking a few beers or coffee. It's usually full and regularly attended by a lot of folks. I've actually made some new friends through it...

• ...And with those friends I made through hosting the coffee & code meetups, we just organized and hosted a stupid hackathon (stupidhackathon.wtf) event. First one ever in the Netherlands? I think so. It was literally a hackathon devoted to developing the most useless and dumb ideas for apps/hardware. We scored some sponsors and hosted nearly 40 participants for an all-day hackathon last Saturday. We had 17 projects presented at the end of the day! Cool stuff. I even worked on a project at the event. We made a lightweight css library for CSS'ing like it's 1996 Geocities again ---> Geolize.css.

• Also... with those friends from Coffee & Code, we've started our own coding group. We felt our goals and mission no longer matched up with the local railsgirls organization we were previously affliated with. We not only want to get more women excited about coding, but also help them get jobs/internships with companies that are similarly enthusiastic as we are and dedicated to actually hiring them. We will host our coffee & code meetups through our new group & plan to soon host coding workshops and other events.

• In May, I went to my first RailsConf in the US. As a Ruby/Rails dev, I feel like it was taking a pilgrimage! Utterly amazing. Everyone should try to attend RailsConf at least once... cuz it's fun. and you learn stuff. I applied for and received an opportunity scholarship. I'm really grateful that I was chosen, otherwise there's no way I really could have afforded to go. This is probably the funnest thing I've done as a dev so far. It was my first conference experience. It was awesome to be a scholar and get paired up with a speaker as my guide. I got paired with the amazing Nadia Odunayo. It was really invigorating to go and see/meet some of my Ruby/tech heroes like Sarah Mei & Sandi Metz.  I think RailsConf is probably the highlight of this year as a dev. I even gave a lightning talk - it's my first talk at a conference (don't bother that it was only 5 minutes long)!

• I finished my 1 year job contract and signed a new, indefinite job contract at my current employer. In the Netherlands, this is what you want if you work a full-time job. It offers a lot of job security (or so I'm told).

• I've learned some ReactJS through the awesome ReactJS Program by Tyler McGinnis. Highly recommend it - there are really good video explanations in there. I feel like it has helped me understand JS fundamentals better as well as I worked through it. And the intro to ES6 makes me really excited to see the direction that JS is going in. ES6+ is making writing javascript actually kinda pleasant for me. I've actually even built some react components for the production rails project I work on at my job. ;-)

• I'm working through the FreeCodeCamp curriculum. Slowly. I'm trying to do the individual projects in ReactJS. I'm slow. But I try to work on it when I'm motivated and have the energy.

• I'm really looking forward to getting more skilled/confident/comfortable with javascript and ReactJS. I really believe that building up my JS skills is a great compliment to what I'm now capable of building in Ruby on Rails and the next logical step for me as a dev. 

• Next month, I'm attending Euruko with my colleague in Sofia, Bulgaria. Pretty excited to go to another Ruby conference after having such a stellar time at Railsconf. It wiill be even more awesome to share the experience with my colleague.

So, I'm still around... growing as a dev, figuring out interesting/frustrating problems, and trying to contribute to the local coding community positively. I'm still happy that I changed careers and I get to code for a living. 

More than anything, right now I'm trying to find a balance between the constant need to "always be learnin'" with also needing to be a real human being that takes rests and does other interesting things to keep my brain happy and keeps me a dynamic and interesting person and not a grumpy, dry code bot.

Learning Front End + Coding as Art

I may already 'made it' as a Ruby on Rails developer, but that doesn't mean that I don't have weaknesses in my developer abilities.  I know that doing creative stuff in the front-end is not my strongest area.  Sure, I'm able to work on the haml/slim/html views and coffeescript/jquery in the front-facing portion of the Rails app I work on, but coming up with cool designs and integrating/writing interesting javascript are not things I consider myself good at.   I've also been trying to level up my javascript and learn more ReactJS, but felt that some gaps in my understanding of the fundamentals of javascript have been making it really challenging for me.  I think my approach of reading random bits and pieces about JS from online articles, tutorials, videos has only left me feeling... fragmented.

I feel like I needed more of a path for learning with little challenges and project along the way, so.... I have started the FreeCodeCamp front-end curriculum to push me along/keep me on track.  It might be silly for someone with some experience as a dev to do this curriculum, but I don't think so.  I have been able to fly through the HTML/CSS/Bootstrap parts and started on the first individual project for FCC on Saturday -- a tribute page.

It's kinda silly, but I'm really love + proud of the page I made.  It's so silly, really, but I actually keep going to look at it again, to see the responsive design as I change the size of the browser window from big to small, and think about the quotes I included from Andy Warhol as I swipe through the 5 simple sections.  It makes me smile.  I love it because I feel like I finally made something with my coding skills solely for art's sake, I didn't make it for anyone else and made it in the exactly the way I wanted.  I made something for no reason other than to exist and be beautiful.

Creativity in coding.

Of all the places to get inspiration for coding, I got it on Sunday at the Van Gogh Museum in Amsterdam. There's a really amazing exhibition of the works of Edvard Munch & Van Gogh right now.  I've gone to the exhibit a couple times, and it still blows me away that I live where I can bike 10 minutes and see pieces of art like this.  I don't think I'll ever get over this feeling of awe, but I digress...

My favorite painting from the exhibit. Cupid and Psyche (Munch 1907)

On this visit to the exhibit, I noticed a Van Gogh quote that I had missed during my prior visits and it really resonated with me:

"Great things are done by a series of small things brought together." 

In the context of the exhibit, it was reminding us that the series of paintings by each of these artists should be viewed in a collective manner, where the themes of life, death, love, angst are not singular events.

It also had a lot of meaning to me in regards to what we do, when we code in our dev team (or working on your own project).  When we work on a project, we are all working on individual parts- building new features and functionality- which, on their own, might not mean that much, but when we are constantly repeating this process, all those small things, written by the different individuals of our team, can collectively add up to a really cool web application.

Maybe it's weird to some, but, to me, coding is the most creative job I've ever had.  Sure, there are rules to follow- syntax and best practices- and, yeah, you have to have 'tuned' your brain to have a good grasp on logic, but approaching how to solve problems is all up to you.  I don't think of the rules as limiting; they are what actually allow you to be creative.  I see the rules as simply outlining the canvas, but within that canvas I am free to design and build as I want.

2015: my year of coding in review.

Wow, what a year.  

I started over this year.  And... it's really, really hard to start over.  It's hard because it kinda means throwing away what you are comfortable with.  But that's exactly what I did at the beginning of this year.  I walked away from 7 years of working as a scientist in pharmaceuticals and hoped that somehow I would reboot myself as a web developer by the end of year.

Here's a big list of stuff I did this year:

• I got a coding internship.
• I commuted 3 hours every day on the train.
• I read a lot of coding books.
• I spent my weekends doing online courses on treehouse & codecademy.
• I got a full-time coding job.
• I read Sandi Metz's Practical Object-Oriented Design in Ruby twice.
• I got some new titles: full-stack developer | Ruby on Rails dev | coder | web developer.
• I coached at a RailsGirls weekend workshop.
• I got a lot better at Ruby on Rails.
• I didn't learn as much Dutch as I hoped to. :-/
• I went to Burning Man.
• I bought a place in Amsterdam and got rid of that crappy long train commute.
• I learned some jQuery, AngularJS, Polymer & ReactJS.
• I hosted an all-day talk/workshop/training for RailsGirls_NL.  First time I've done anything like that before.  This was one of the highlights of my year.  I met cool people and got to talk about coding... total win/win situation for me.
• I get to be creative in how I build stuff and solve problems.  I feel that my input, contributions, and ideas are valued.
• I don't have anxiety attacks as often.
• I enjoy going to work now.
• I feel I am the most in control of my career that I've ever been.

This time last year, I really had no idea what the hell I was doing. I had just started following online Rails tutorials and built my first Rails app by following step-by-step instructions and not really knowing what exactly the code meant.  I read some blogs from people that I done this before me, and I was trying to kinda follow what they did.  But, I didn't know anyone that had taught themselves how to code while being in a foreign country.  I tried not to worry about that initially (there's always remote work, right?) and hoped for the best.

But, somehow, I'm ending my year as a gainfully employed developer in an amazing city with a great tech scene.  It wasn't magic, it wasn't talent, and it certainly wasn't easy... it took a ridiculous amount of work and frustration to get here.  And I absolutely believe that anyone else can do that exact same thing if they desire to.