DEV Community: John Luke Garofalo

On Finding Time to Read.

John Luke Garofalo — Tue, 22 Oct 2019 17:58:11 +0000

"No matter how busy you may think you are, you must find time for reading or surrender yourself to self-chosen ignorance." -- Confucius

Reading books is an essential habit if you want to reach your full potential. Even if you haven’t thought of yourself as a “reader of books” in the past, it doesn't take much to start. Here are a few tips I have found to be effective at helping me fit book reading into my day.

"Once you learn to read, you will be forever free." -- Frederick Douglass

Tip: Find your format.

For the first two years of my career, I commuted two hours a day. And like good sons do, I asked my mom for her Audible login and then selfishly used all her credits every month before she could. When I moved close to my office, I suddenly had a lot less time in my schedule to listen to all of the unread audiobooks that my mom would never read.

My point is, whether it’s a physical book, audiobook, E-Book, or some combination of these; find which formats are the least disruptive to your usual routine.

“It is what you read when you don’t have to that determines what you will be when you can’t help it.” ― Oscar Wilde

Tip: Any progress is better than no progress.

You don't have to put aside significant amount of time in order to become a book reader. You only have to read one page a day, or even less, in order to make progress.

After overcoming this mental hurdle myself, I began to view this one-page reading requirement as a daily game. If I couldn't hit my requirement, then I'd have to make up for it the next day. Pretty soon, I found myself reading more and more pages each day.

"A person who won't read has no advantage over one who can't read." -- Mark Twain

Tip: Read during the gaps of your day.

Have you ever been waiting in line and noticed that everyone else in line is standing like a mannequin scrolling on Twitter or Instagram? Waiting in line is one of the many gaps in our day where we're not really using our brain or body for anything productive. These gaps offer excellent opportunities to fit in a few paragraphs or pages.

These few minutes may seem insignificant but I guarantee you will be surprised by how many books you’ll have read by the end of the year by making this a habit.

Some great times/places to read:

In the bathroom.
Waiting in line.
Before you fall asleep/lying in bed.
During commercials.
While you're having lunch.
On your commute.
While walking your dog.
When you're at a restaurant and they're singing happy birthday to someone at another table and you don't know whether you should sing along too or politely ignore them.

“Somebody who only reads newspapers and at best books of contemporary authors looks to me like an extremely near-sighted person who scorns eyeglasses. He is completely dependent on the prejudices and fashions of his times, since he never gets to see or hear anything else.” – Albert Einstein

Tip: Read something you enjoy.

This one may seem obvious, but it's important, because it will be much more difficult to find time to read when you're reading a book you don't like.

Choosing a book is a much bigger commitment than trying a new show on Netflix. Do some homework beforehand by reading reviews online (Goodreads, Amazon, etc..) and by asking for recommendations from your friends, colleagues, or people you respect. I love it when people ask me what books I recommend, because these books have changed my life so meaningfully, it's exciting to think it may have a similar effect on someone else.

Most importantly, don't be afraid to abandon a book if you give it an honest try and aren't feeling it. Not all books are a good fit for you. Not all books are good, in general.

“My alma mater was books, a good library…. I could spend the rest of my life reading, just satisfying my curiosity.” – Malcolm X

Final Thoughts

I hope that you found some value in these tips. If you have other tips to suggest or need book recommendations, please leave a comment!

“How many a man has dated a new era in his life from the reading of a book.” – Henry David Thoreau

What's the most pragmatic way to start a self-hosted blog?

John Luke Garofalo — Tue, 30 Jul 2019 19:14:11 +0000

Hey DT community, I need your help and expertise.

My Background

I'm an experienced full-stack software engineer, with a strong background in React, React Native, & Ruby on Rails.

My Problem

I've been having trouble figuring out a good service, library, or template to use to create a self-hosted blog for my business. I'm imagining something similar to the Auth0 Blog.

Other Thoughts

I haven't seen an easy way to create this type of thing in React without building it from scratch, which I'd rather not spend a lot of my time doing.
My customers aren't necessarily developers and I'm not a big fan of Medium, so I'd like it to be hosted along with the business site.
I'm not opposed to a hosted service, but I would need it to look professional since it's for my business.
I know Wordpress is a popular choice but I’ve never used it so I hesitate to pick it for the time it may take to learn it and have it integrate into my react app.
I've heard others mention Gatsby, but from what I could tell, my non-engineer partners couldn't write posts without me translating it into code. (I could be wrong about this. I don't know much about Gatsby).

Thank you in advance!

Edit: An earlier version of this question mentioned WordPress in passing without elaboration. I’ve updated it to clarify my thoughts.

Connect an Autonomous JS App to ActionCable for RealtimeÂ Goodness

John Luke Garofalo — Wed, 16 Aug 2017 14:29:27 +0000

A few months ago I started learning Rails Action Cable for Fixt so that I could implement desktop notifications for our customer service reps. For those of you who don't know about Action Cable, it's an out-of-the-box websockets framework built for (and now into) rails. This was pretty straight forward as there are plenty examples in Ruby on Rails' preferred coffeescript, connecting via the asset pipeline. But as someone with somewhat of a shallow knowledge of websocket trends, I began to ask myself what if you want to connect from another standalone web app? Finally I had to face this question as I was tasked with connecting our Repair Tracking Component to our Ruby on Rails backend for real time tracking. This is where I started to explore the best way to utilize Action Cable from any Javascript app.

Submit a phone or tablet repair with Fixt to see the full feature for yourselfÂ ;)

Action Cable Setup

This isn't going to be a full tutorial, meaning I won't include all of the setup of action cables because this has been done well by the Edge Guides already. Instead I will focus on the changes you need to make to your configuration if you already have the standard action cable setup.

You'll need to do two things to make sure that you can connect to your websocket from an outside source. First you'll need to add your client's address to the list of allowed origins.

# config/environments/development.rb
config.action_cable.url = 'http://localhost:3000/cable'
config.web_socket_server_url = 'ws://localhost:3000/cable'
config.action_cable.allowed_request_origins = [
   # Local address of our RoR server
  'http://localhost:3000',
   # Local address we use for our React standalone client
  'http://localhost:8000',
]

# config/environments/production.rb
config.websocket_server_url = 'wss://<YOUR_SERVER_SITE>/cable'
config.action_cable.allowed_request_origins = [
   # Address of our Ruby on Rails App
  'https://<YOUR_SERVER_SITE>',
   # Address of our JS App
  'https://<YOUR_CLIENT_SITE>',
]

Note: I'm assuming that you're using ssl certificates in production, but if you're not, then just change https to http and wss to ws

If you haven't already, you'll need to setup a channel to track whichever model that you want to receive updates about. There are two paradigms in Action Cable, you can either stream for an Active Record object or you can stream to a channel in general. The differences are better explained in the Edge Guides Section 5.1 Streams. For the sake of simplicity, I'll explain what we want to do. We essentially want to stream any updates, to an instance of a model, to any client that's interested in that model. In our case at Fixt, we wanted to be able to track updates to a specific Repair instance.

# app/channels/repair_tracking_channel.rb
class RepairTrackingChannel < ApplicationCable::Channel
  def subscribed
    stream_for repair
  end

  def repair
    Repair.find(params[:id])
  end
end

Now, any time that we want to update the client that's interested in the repair when something changes, all we have to do is call something like this:

RepairTrackingChannel.broadcast_to(@repair, repair: repair.as_json)

Note: You don't have to use as_json. We actually use jbuilder at Fixt but since this article isn't about serializing data, I didn't want to spend too much time on it.

Javascript Setup

Now that we have Action Cable configured to stream to our standalone client JS app, let's set the client up. Everything before now has been vanilla Action Cable so this next part is the fun part.

Action Cable is just a layer on top of web sockets so you really can connect to it just using good ole JS web sockets. For this article, I'm just going to use the actioncable npm package because it makes the boilerplate web socket code a little easier to understand. If you are an anti-dependency, hardcore, 100x brogrammer who thinks npm is for the weak, then you probably don't need this tutorial or anyone's help, because you are unequivocally intelligent and we will all clap as you exit this thread.

Not you Hermione, you're perfect. <3

Let's go ahead and install actioncable to our project.

$ npm i -S actioncable

Then, let's create a file called repair-tracking-subscription.js

$ touch repair-tracking-subscription.js

With this file, we want to encapsulate all of our Action Cable channel logic, similar to how you would if you were connecting to ActionCable via the asset pipeline.

import ActionCable from 'actioncable';

// 1. Configure your websocket address
const WEBSOCKET_HOST = process.env.NODE_ENV === 'production' 
                         ? 'wss://<YOUR_SERVER_SITE>/cable' 
                         : 'ws://localhost:3000/cable';

export default function RepairTrackingSubscription(
  repairId, 
  { onUpdate = () => {} } = {}
) {
  // 2. Define our constructor
  this.cable = ActionCable.createConsumer(WEBSOCKET_HOST);
  this.channel;
  this.repairId = repairId;
  this.onUpdate = onUpdate;

  // 3. Define the function we will call to subscribe to our channel
  this.subscribe = () => {
    this.channel = this.cable.subscriptions.create(
      { channel: 'RepairTrackingChannel', id: this.repairId },
      {
        connected: this.connected,
        disconnected: this.disconnected,
        received: this.received,
        rejected: this.rejected,
      }
    );
  };

  // 4. Define our default ActionCable callbacks.
  this.received = (data) => {
    console.log(`Received Data: ${data}`);

    this.onUpdate(data);
  };

  this.connected = () => {
    console.log(`Tracking Repair ${id}`);
  };

  this.disconnected = () => {
    console.warn(`Repair Tracking for ${id} was disconnected.`);
  };

  this.rejected = () => {
    console.warn('I was rejected! :(');
  };
}

This will be the ws/wss address that you set up in the previous section. You don't have to hardcode it in here but I am not going to presume to know your environment.
For those unfamiliar with javascript functions and object oriented programming, this is our constructor and anything starting with this is a member variable on our object.
We use the subscribe function to essentially invoke our call to our ActionCable server. You could do this in the constructor and save a step but I figured it's worth separating for understanding. Also this way would allow you to pass around a subscription and subscribe at your will.
These are your ActionCable callbacks that are invoked by default when certain actions occur from the channel. You can read more about default and custom callback functions on the Edge Guides 5.3 Subscriptions.

That's it! Now we can track a repair from anywhere. Just import this function and subscribe like so:

import React, { Component } from 'react';
import repairTrackingSubscription from './repair-tracking-subscription';

class Tracker extends Component {
  state = {
    repair: {},
  };

  componentWillMount() {
    const { repairId } = this.props;

    const repairChannel = new RepairTrackingSubscription({ 
      repairId, 
      onUpdate: this.onRepairUpdate, 
    });

    repairChannel.subscribe();
  }

  onRepairUpdate = (data) => {
    const { repair } = data;
    this.setState(() => ({ repair }));
  }

  render() {
    const { repair } = this.state;

    return (
      <div>
        { JSON.stringify(repair) }
      </div>
    );
  }
}

export default Tracker;

Note: This is framework agnostic, you can use this function in any javascript situation that you currently find yourself in. I just currently find myself in React and can't seem to get out. Send help

Conclusion

This may seem simple to many of you but I legitimately wasn't sure how to connect to Action Cable from an autonomous app last week. Most of the tutorials out there made the assumption that you'd be working from within the Ruby on Rails framework. I hope that this helps some of you make some cool ish.

Make React Navigation Accessible Again

John Luke Garofalo — Fri, 11 Aug 2017 11:34:31 +0000

Early last week, our product manager finally convinced us to spend a day figuring out how to make our React App more accessible. If you're like me, you took a course in school that spent a semester explaining the importance of accessibility on the web and introducing you to the people who are mostly affected. If you haven't familiarized with this issue, then I highly suggest you do because you will learn how much we take for granted while using the internet every day.

We struggled at first with the right solution as React Accessibility documentation is pretty minimal when it comes to more complex situations, in my opinion. They do a great job of explaining the "why" it's important but not really the "how". We had a pretty large app that needed to be fully navigate-able with the tab, shift + tab, & enter key. We also needed to make sure that every button would provide feedback when :focused. I'm going to show you how we approached this problem as pragmatically as possible. Obviously, it's not perfect and we can always improve our accessibility, but I want to share what I learned to show you that you can make small changes that convert to massive improvements for anyone with disabilities using your React app.

Adding jsx-a11y to eslint

This eslint-plugin-jsx-a11y plugin helps to suggest accessibility changes that you can make to your app as you develop. I think this is really important in regards to learning about the accessibility best practices in an inline manner. We use eslint here at Fixt Inc. so I'm partial to it, but I'm sure there are equivalents out there.

!!Tab

A huge gain, with minimal effort, is simply making it possible to tab through all of the buttons in your app without using the mouse at all. This is really useful for webforms but also outside of webforms.

Let's start by creating a custom Button component in React and making it tab-able.

import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ children, onClick }) => (
  <div onClick={ onClick } tabIndex={ 0 }>
    { children }
  </div>
);

Sweet. As you can see, the tabIndex prop is the real hero here. This global attribute can have three different types of values, according to the MDN docs:

Negative Value
- A negative value (usually tabindex="-1" means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.
Zero Value
- tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.
Positive Value
- A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.

Simple enough, right?

(Enter || Return) key

So, now that we can tab to our button, we want the user to be able to click the Enter or Return key to simulate a click because what good is tabbing to buttons that you can't click on?

Let's build a function that will help us to do just that:

const buildHandleEnterKeyPress = (onClick) => ({ key }) => {
  if (key === 'Enter') { 
    onClick(); 
  }
};

There are a few things going on here that may be confusing if you've never encountered them before.

This function is a curried function meaning it's a function that returns a function. I'm not going to go into explaining this in-depth, but if you're unfamiliar with this concept, I'm going to explain why we need this. In our situation, we want to provide a function to our component that will handle whenever a key is pressed. Since we can assume that we will know what the value of onClick is at the time that buildHandleEnterKeyPress is invoked, then we can create a function that uses the onClick function. This allows us to pass any callback function to buildHandleEnterKeyPress and it will execute when a key is pressed while the user is focused on a given element.

So now we can head to our Button component and use this function to get our desired result:

const Button = ({ children, onClick }) => (
  <div 
    onClick={ onClick } 
    onKeyPress={ buildHandleEnterKeyPress(onClick) } 
    tabIndex={ 0 }
  >
    { children }
  </div>
);

This is really simple for the developer and really important to the people on the internet who absolutely need to be able to use the keyboard to navigate.

Conclusion

As I mentioned, this is about the bare minimum you can do in regards to accessibility. There are so many good resources and best practices out there that we should put aside our laziness to do the right thing.

How did you become proficient at geometry and vector math for web animations and/or VR?

John Luke Garofalo — Fri, 21 Jul 2017 13:04:34 +0000

Disclaimer: My question may be ambiguous because of the nature of it. I'm not entirely sure of what to concisely ask for so I'm attempting to describe it in the hopes that someone much smarter than I will translate.

I've been working in the frontend a lot throughout the past year and attempting to learn VR development on the side. As I've become more advanced, I've found that my desire to be able to create beautiful products, rather than mimic what other's have done, is predicated on the understanding of the geometry and physics of 3D objects and vectors. Many tutorials seem to gloss over this aspect of the process because the knowledge is probably assumed. I received my undergraduate degree in computer science so you'd think that I would've known this but I've never had the opportunity to connect the dots.*

"Wait... so I actually do need to know what the hypootmusnuse is?

Do you have any suggestions for resources to help someone become better equipped to begin creating things like svg drawings, css drawings/animations, and/or virtual reality environments/objects?

^{* For example, I was reading Steven M. LaValle's book on VR but I began to struggle when he said that I should be able to visualize quaternions by looking at the equation. I could easily follow the math for geometrical rotations, but I'm missing the foundational understanding of "why" the math is being applied.}

All Meetings Are Terrible... Except for One (on One)

John Luke Garofalo — Sun, 09 Jul 2017 04:41:13 +0000

Okay, maybe not all meetings. I’m just pushing a software engineering stereotype.

When I joined Fixt Inc., over a year ago, I was fresh out of college with little experience, other than a few internships under my belt. I accepted a job as a full stack software engineer at a company using React, React Native, and Ruby on Rails; none of which were taught to me in the four years pursuing a Bachelor’s degree in Computer science.

Naturally, I had a lot of learning to do. I taught myself web development (html/css/js) and iOS programming (Swift) in college, while I wasn’t in class, so I had no problem with learning. I quickly hit an obstacle I wasn’t as familiar with; spending time learning on someone else’s dime. I would be perfectly content spending the rest of my life learning new technologies and being curious, but in reality, I knew that my boss had some sort of expectations regarding how long I should spend learning and when I should start becoming effective at building things for the company.

The problem was that he never gave me any clues about these expectations because they’re difficult to define. We were a four engineer team at a startup so we were all heads down, all the time. My internal gauge for my performance was all guesswork, so I wasn’t sure what I was doing wrong or what I was doing right.

Lumbergh always knows what he wants.

Don’t get me wrong, I didn’t need a pat on the back or reproach for every little action but I did want some affirmation for my own assessment of my performance. Imagine if our Google Maps just shouted out the cardinal direction, “Head North, to your destination every 15 minutes. I might eventually find my destination but I’ll waste a lot of time trying to determine if I’m making the right choices along the way. Looking back, there were a lot of actions I could’ve taken to remedy the anxiety and stress I was collecting. I was spending 11+ hour days, trying to learn 8 different web/mobile frameworks and catch up to the effectiveness of my coworkers.

It wasn’t until a few months later, my boss introduced the popular concept of “one on ones to the whole company. If you’re unfamiliar, the “one on one meeting is a recurring meeting between each employee and his or her boss and/or manager. It’s a dedicated time to talk about those personal expectations, performance, any obstacles faced by either party, process pitfalls or pain points, as well as big picture goals for the employee and the company.

Actual picture taken during our first one on one. (Circa 2016)

During our first one on one, my boss and I walked all around the Baltimore Harbor and I had the time and the place to bring up the lack of communication and directly ask him about what I was doing right and/or wrong and how I can improve. All of that anxiety and stress that I built up over the preceding months, affecting my performance and overall health, vanished in the span of hour.

I’m a simple man, I like to set goals and I like to try and blow them out of the water. The simple lesson I learned was this:

The only way to succeed is with clear intention. If your team members don’t know their goals, then they are not going to execute with intention. They’ll be moving forward but with no clear destination, which means that your team members, your company, and you cannot be the best that you can be.

Actual image of me with my dev team.

People want to feel useful. If you and your team members are emotionally mature, then you’re willing to admit that you’re not always going to be perfect. A good team is made up of individuals committed to bettering themselves and bettering the people around them. There are countless inspirational leadership quote posters on Google to back me up on this but here’s one of my favorites.

“Members of trusting teams admit weaknesses and mistakes, take risks in offering feedback and assistance, and focus time and energy on important issues, not politics.”â€Š–â€ŠPatrickÂ Lencioni

We shouldn’t expect others to be able to read our minds. This is why the one on one meeting is so essential to health of your team and the health of your company. You will find that your quality of life will improve drastically by keeping a regular one on one with your boss and/or your employees.

Here are some tips on having meaningful one on one meetings:

Prepare ahead of time. Keep a running note, in between your one on one meetings, and add to it whenever something strikes you as worth bringing up at your next meeting.
Get out of the office. It’s very easy to work too hard. I’ve spent entire days from 6:30 am to 7 pm, without leaving the office because I’m deep in a feature or problem. Get a change of scenery and away from your other co-workers. This is time to focus on the person you’re meeting with. Last week, my boss and I walked for awhile then grabbed the water taxi across the harbor, which was a great way to get some fresh air, bond, and talk.
Do not cancel this meeting. This time should be sacred and while you can reschedule to accommodate anomalies in your schedule, don’t ever cancel one of these meetings or push to the following week (unless you’re on vacation). Your colleague should be able to rely on this time as a regular time to discuss what he or she needs to discuss. Even if there’s not much to talk about and it’s very short, always honor this meeting.
Ask for constructive criticism. If we want to be the best version of ourselves, we must remember that not a single one of us is perfect. Every week, ask your colleague these three questions, “Is there anything that I did that bothered you? Is there anyway that I can improve? How can I make your life better? This can make your colleague feel a little more trust and is more likely to provide you with honest and constructive feedback, which is your golden ticket to finding success.
Give good feedback. Start with the good feedback and praise your colleague for even minor things that he or she did well since your last meeting. This reinforces his or her pride and encourages him or her to continue to repeat those actions.
Give constructive criticism. Provide your colleague with constructive criticism and ways to improve. Always keep in mind that you will never be fully aware of all of the factors that go into someone’s actions and that he or she may have a good reason to back up his or her actions. Always present it as your perspective, rather than a factual statement. This will allow your colleague to approach the conversation being less defensive and more appreciative for your honesty.
Consider your career goals. This is important. If this person is your boss, ask them how you can get to where you want to be. If you’re unsure, give him or her some insight into your thoughts on the matter and you might just learn something. It’s important to get as many perspectives as you can when it comes to big issues, like your career.

Here are some topics to discuss during your one on one:

Career goals within and outside of the company.
Things you’ve done well or poorly.
Things others have done well or poorly.
Pain points in your process.
Things stopping you from being efficient.
The company’s goals and direction.
Ways that you can improve the life of your colleague.
Neat puppers you’ve seen lately.

I’ve been alluding to this one on one meeting as regular (weekly or bi-weekly) and between an employee and his or her direct boss. I’ve done this because I think that is the where you’ll see the greatest gain, but it doesn’t necessarily have to be so conventional. I have personally found so much value in these meetings that I decided to set them up with my co-workers on a less frequent basis. Once a month, I make room in my forever-busy schedule to take a break and go grab a coffee with each of my co-workers. I’m not the only one who does this either. The CEO of my company does this with every one of his employees on a monthly basis. I guarantee that you will be surprised at the effect of simple regular communication with the people you spend most of your day with, can have on your happiness and your success.

I hope that you give this a try and I encourage you to share your experience with one on one meetings, either in the comments or send me your own post. I’m always looking for ways to improve my own life and productivity, as well as that of my team members.

JL Garofalo

John Luke Garofalo — Fri, 20 Jan 2017 03:20:47 +0000

I have been coding for ~6 years.

You can find me on GitHub as JLGarofal

I live in Baltimore, MD.

I work for Fixt Inc.

I mostly program in these languages: JS, Ruby, Swift.

I am currently learning more about VR, Digital Graphics, and linear algebra.