InRhythm

Your partners in accelerated digital transformation

InRhythmU

Lightning Talk: Creating a Proxy with Node + Express

tldr;

I created a Node and Express proxy that rams together two websites / apps. If you are ever asked to develop code for a site you don’t have access to, this could save the day.

  1. Download the code:
    https://github.com/mattbillard/code-collider-v2
  2. Watch the video:

My most recent hobby project involved building a Node and Express proxy to ram two websites or apps together. I dubbed it “The Code Collider.” 

The idea of the Code Collider was born about two years ago when I was given a rather difficult coding challenge at a client. Another department had a website and we were being asked to iframe it. As you might know, iframes have a lot of “interesting nuances” as they might politely be called, one of which is that if a user right-clicks on a link and chooses “Open in new tab,” they will break out of the parent’s iframe and go directly to the iframed child site. Of all things, I was asked to write some code to prevent this and provide my solution to the other team. There was just one catch: I had no way of running the other team’s site in my local environment and thus (or so I initially thought) no easy way to test my code as I wrote it. 

This situation comes up more often than you’d think. There are several reasons a developer might not be able to run a site or app in their local environment. Perhaps it’s complex to set up, involves a lot of permissions, or the other team just can’t be bothered to spare the time to help you out. Regardless of the reason, I did eventually strike upon a novel way to solve the problem.

After what felt like a meandering odyssey of Stack Overflow posts, I managed to cobble together a Node and Express project that took the other team’s site, piped it through a proxy, injected my script into it, and served it to my browser. Even though my innovation worked and I was able to deliver the final code requested, there was just one thing that bothered me: I always had the nagging feeling that I had only gotten the proxy to work through a mixture of stubborn persistence and blind luck. I resolved to rebuild it from scratch in my free time one day, piece by piece, actually understanding how the solution worked – and that as it turns out is exactly what I did.

The Architecture

Here’s a diagram of how it works:

The browser makes a request to our Node Express proxy server where we then have three scenarios:

  1. If the user requested an HTML page, we need to combine the page from website 1 and 2. The proxy first asks website 1 and then website 2 for its HTML. It then modifies the two HTML files, combines them, and returns the result to the browser. (Details on how this works below.)
  2. The HTML page will then request the CSS, JavaScript, and other assets it requires. These requests will again go through the proxy which will pass on the requests. If website 1 has the asset, great, the proxy will return it to the browser. 
  3. If website 1 does not have the asset, the proxy will then ask website 2 and return it to the browser.

Here are screenshots of the result:

In this example, we’ll use the real InRhythm.com website as the target into which we’ll inject some local code (in this case a basic Create React App project). The final result on the right is an actual screenshot of the 2 websites living together in the same browser window. Now this is pretty exciting; the target website and the code that you are developing could be anything!

How it Works

  1. As mentioned above, website 1 and 2’s HTML are combined. This involves a few steps. Webpages can’t have 2 doctype, html, head, or body tags, so we’ll use some regex to strip those. Now that website 2’s HTML is ready, we’ll inject it before website 1’s closing </body> tag. 
  1. And here is the code that shows our modifications to website 1’s HTML. It shows a few things.

    Firstly, many websites have full ‘absolute URLs’ for their links. They look like this: https://www.inrhythm.com/who-we-are/
    The problem is if the user clicks on this, they’ll be taken away from our proxy and go to the target website. We’ll solve this by removing all www.something.com bit and keep just the bit after the slash.

    Secondly, we show injecting the CSS discussed above to remove backgrounds and allow clicks to pass through website 2 to website 1. (Keep in mind this will probably be slightly different depending on the two sites you are combining.)

    Thirdly, we show injecting the HTML from website 2 we modified from above before the closing </body> tag.

Gotchas to Avoid

As mentioned above, it took a lot of research as well as trial and error to solve all the technical hurdles this project presented. Here are some of the main ones below.

  1. Websites usually compress or “Gzip” their content. Normally this is a great thing. It means less data is transferred and websites load more quickly. This is not going to work for our case however. You can’t parse, manipulate, and modify HTML if it looks like gibberish. The solution was actually quite simple: as it turns out, there’s a header you can send with your request to ask the server not to Gzip anything.
  1. There’s another header we need to send however. Because we’re using a proxy, all requests are going to have the header ‘host’ set to ‘localhost’. Now this is probably not a problem for most sites, but to the target server, this doesn’t look like a very normal request, and indeed, I did find some websites responded oddly and returned pages that looked nothing like I expected. The solution again was quite simple, just modify one of the headers of our request. 
  1. Now as you’ve probably gathered from above, we’ve modified our requests quite a lot, and as a result this is going to cause the browser to do some odd things. The solution to this problem is to delete the ‘content-length’ header before the proxy sends your browser any response. This will stop the browser from truncating the response and removing all the hard work we did. 
  1. Finally, I’ll mention one other problem I solved. If you are combining sites that use https, the proxy might complain that the SSL certificates don’t match what it’s expecting. Turns out it’s rather easy to relax this with the following code: 

Conclusion

That’s it. Feel free to download the code, follow the instructions in the readme, and open your browser to localhost:8000 . You should be able to see two web sites rammed together. 

Sprint 2.0: 4 Day Design Sprints

It was a humbling experience to kick off the InRhythmU Speaker Series at InRhythm HQ. InRhythmU was created to foster a culture of continuous education through onsite events and comprehensive workshops for anyone who is looking to learn and grow in their field. As the Director of UX/UI Design at InRhythm, it seemed fitting to give a talk about Design Sprints and how it impacts the speed to market as well as the creativity a group can bring to a room when working together.

We started the session with a brief overview of where UX/UI sits in the cadence of a products journey, showing where intelligence (UX) meets creativity (UI). We discussed the difference between design thinking and design sprints and then the sprints themselves, which was started by a group from Google Ventures in 2016. The five day sprint is a team workshop for learning, iterating, creating and deploying. Sprint 2.0 is a four day sprint with even more collaboration and problem solving.

While we discussed the iteration process, we did a hands on task of Crazy 8s, where attendees were giving a module to design and had eight minutes to create eight drawings per minute. The attendees were a mix of designers, product owners, scrum masters, engineers and marketers, which is the perfect cross section for this exercise. While the start was slow, the group found their footing and cruised through drawings. Coming up with idea after idea in the 8 minutes allotted. The mix of job types showed how a group can have a similar idea for a singular task.

We concluded by discussing how this methodology not only builds experiences quickly and creates a strong team dynamic but gives us the option to test our ideas. Testing creates a level of flexibility that only breeds better experiences and if everyone brings this type of creativity, iteration along with strong dynamic back to their jobs and creates some next level experiences for us all.

You can watch the full session here. Apologies in advance for the sporadic use of profanity.

Virtually Real or Really Virtual


“Am I a man dreaming I am a butterfly, or a butterfly dreaming I am a man? Between me and the butterfly there must be a difference. This is an instance of transformation.”
– Chuang Tzu, 4th century BC

Escapism is perhaps the most addictive vice for your average wetware human being. Ever dream? Ever wished you were stronger or smarter or cuter? There’s probably a pill for that. There’s also a fancy pair of glasses you can buy with a mouse click that will transform you into a Stygian Prince or a butterfly, bestow you with 10 charisma or turn you into whatever it is you are not (and want to be).

In our cranium sits a virtual reality machine connected to our eyeballs and other sensory apparatus, and the great thing about our brain is that it’s both in the deception business and a real sucker. Your brain is easily fooled; all it takes is a little stimulation. There is a long history of people and companies who have worked to construct our felt reality through control of what, and how, we perceive. Let’s take a look at the history of Virtual Reality (VR) machines, and trace our stumble towards the Oculus Rift and the Lenovo Mirage.

Stereoscope (1838)

Antique stereoscope

A stereoscope is a device for viewing a stereoscopic pair of separate images, depicting left-eye and right-eye views of the same scene, as a single three-dimensional image. Our brains already do a lot of post-production work to process the sensations those two marbles in our skulls produce, so why not exploit that fiction to flood our visual landscape with three-dimensional extrusions of black-and-white pictures of people wearing funny clothes?

View-Master (1939)

Red viewmaster device

The View-Master system was introduced in 1939, four years after the advent of Kodachrome color film made the use of small high-quality photographic color images practical. Tourist attractions and travel views dominated View-Master’s lists of available reels, an early hint at how strong our desire to “virtually travel” is. Unlike many of the early attempts at VR, the View-Master has managed to maintain its charm, leading to a new version built for the modern, goggle-driven VR world.

Sensorama Simulator (1962)

black and white image of man in Sensorama device

This magnificent construction was a machine that played a 3D film accompanied by stereo sound, aromas, and wind in order to create an immersive sensory environment. It was one of many 3D-related creations that visionary inventor and cinematographer Morton Heilig gave the world. His ideas for adding layers of sensory stimuli to augment a simple cinema presentation led the way towards today’s “virtual reality” experiences. Rama-lama-bing-bong-whoosh. Heilig also invented the first head-mounted VR experience, the Telesphere Mask. Ever hear of him? No? Now you know what “forgotten genius” means.

The Sword of Damocles (1968)

Man wearing Sword of Damocles VR device

Widely considered to be the first VR and augmented reality (AR) head-mounted display (HMD) system. It was created in 1968 by “The Father of Computer Graphics” Ivan Sutherland with the help of his student Bob Sproull (who later did things like work on inventing the personal computer and the laser printer while at PARC). Given this sort of brain-trust and explosive innovation, it isn’t surprising that it was anticipated that true virtual reality would become a real reality very soon. As soon as some of the, um, practical difficulties were solved.

Tomytronic 3D (1982)

Tomytronic 3D device with box

The Tomytronic 3D was a series of portable, handheld gaming devices produced by Takara Tomy Co. Ltd. The device featured a strap so the player would be able to wear it around their neck between uses. The Tomytronic simulated 3D by having two LCD panels that were lit by external light through a window on top of the device. Released in 1983, it was the first dedicated home video 3D hardware. Given that this was nearly 40 years ago, that a small, cheap, almost-good-enough consumer VR product was produced at all shows how excitement around this tech has never been in short supply.

Virtuality Group (1993)

Man using VR gaming machine

Virtuality produced a line of virtual reality gaming machines built to fill video arcades in the early 1990s. The machines delivered real- time (less than 50ms lag) gaming via a stereoscopic visor,  joysticks, and networked units for multi-player gaming. The technology and gameplay with this system was pretty darn good—the problem was that they hitched their pixelated wagon to arcades just when that entire industry was about to be eclipsed by the rise of home video gaming systems.

Virtual Boy (1995)

Virtual Boy gaming device

A 32-bit table-top 3D video game console developed and manufactured by Nintendo, the Virtual Boy was marketed as the first “portable” video game console capable of displaying “true 3D graphics” out of the box. A perennial innovator, Nintendo unfortunately stretched their ambitions a little too far on this one. Nevertheless, by the time we got to the Wii it was clear that there was a real demand from consumers for something to take them (at least a little) outside of reality.

Oculus (Now)

Oculus VR device

Technology is starting to catch up. New breakthroughs are occurring every week. Early adopters are eager to jump on board. Think of how the social web opened up the internet to the masses—everyone jumped in, including (in not-insignificant numbers) Baby Boomers. VR—after many exciting short flights and spectacular crashes—may have finally have found just the right mix of price point and technology.

In addition to entertainment and advertising, expect to see huge VR growth in these key industries:

  1. Tourism. The strong market for “virtual tourism” that the View-Master stumbled into discovering is already being catered to via experiences like “The Wild Within…an interactive, 360* video that allows travelers to experience the pristine coastal wilderness of British Columbia, Canada in a truly immersive way.” Or how about the “Marriott Teleporter,” which frees guests of the hotel chain to “travel” without packing a bag. Remember Sensorama? Check this: “They were taking inventory of the breeze, the sea spray and sensations like that…so we’ve used mechanical elements like industrial grade misters and fans in the Teleporter to recreate those sensations. It’s like an amusement park crammed into a closet.”
  2. Healthcare. VR exposure therapy allows patients to confront their phobias and fears, helping them cope with a myriad of conditions: fear of flying, fear of heights, fear of public speaking, agoraphobia, arachnophobia, social phobia, panic disorder, and posttraumatic stress disorder due to motor vehicle accidents. VR is even being used to treat those with phantom-limb pain. Researchers at the University of Washington Human Interface Technology Laboratory have created “SnowWorld,” a brain-tricking snowscape that helps burn victims during bandage changes and wound cleaning – excruciatingly painful experiences that traditional pain-killers like morphine do little to assuage. VR is even being used to train surgeons, to the relief of cadavers everywhere. It’s clear that this technology is delivering real, transformative, benevolent good for many.
  3. Skilled Trades. With the cost of education rising, and access to good trade schools disappearing for many, VR offers new opportunities to learn at a much lower cost, and from anywhere. For example, those training to be welders are doing so virtually in greater numbers. Picking up from the times of flight simulators (another very early “VR” use), simulations are being used to train people to do dangerous jobs without putting them in dangerous situations. In general VR, may do enormous good by opening up education for many who simply do not have access to it today.

Our Greatest Investment Opportunity


InRhythm’s success is built on the excellence of every employee, and the outstanding work they do every day continues to drive us to greater heights. While we look to hire the very best consultants at the outset, every employee is on their own career journey, and one of the cornerstones of our company culture is investing in the careers and lives of our people to help them be happier, healthier, and more proficient in their fields. Investing in this development has, for me, provided an enormous return in the form of profitability, productivity, and the overall wellness of our employees.

Personal Zen

InRhythmers already enjoy a company reimbursement for the music streaming service of their choice; music is a core part of the day for many of us, and it just made sense to keep everyone happy with their favorite personal playlists, unburdened by ads. Not everyone listens to music when they work, however, so this year we’re expanding the program to include audiobook services like Audible and wellness and meditation apps like Headspace, so each of our employees can define their own idea of work zen with our enthusiastic support.

Empowering our employees to find their focus and de-stress increases confidence and performance. Meditation, in particular, offers a number of benefits, including increased immune function and lowered anxiety, that pay huge dividends in and out of the office. We can’t always predict the future in this fast-moving industry, and no consultancy is immune from stressful days, but by giving InRhythmers the tools they need to stay grounded and happy, they can tackle the biggest problems and opportunities ahead of us.

A Better Future

We hire engineers and designers at all skill levels to work on some of the biggest industry-shaping projects, but each and every one of our consultants is ambitious and dedicated to growing their expertise. Our culture of learning and growth is designed to take every InRhythmer to the next level, whatever that might look like for them. InRhythmU, our suite of internal and client-facing training and development workshops, speaker series, and resources is a comprehensive platform for our people to learn from (and teach!) each other, sharing their mastery of everything from cutting-edge programming languages to soft skills like leadership, personal branding, and public speaking.

We also provide a coaching program that pairs our senior-level consultants with several mentees, each with their own specific goals for the year. Our coaches work individually with their mentees and consult with other coaches on guiding every InRhythmer toward goals they’ve self-identified. The result? Our people are working on everything from personal financial literacy to Chrome extension development, with our coaches and the entire culture of InRhythm as the wind at their back.

When you hire for the very best, you’ll find yourself surrounded by people who are naturally ambitious and hungry to learn. In practice, however, I see a huge deficit in the education provided by a lot of companies in our industry; while it’s fine for your employees to seek learning elsewhere, it’s also a huge missed opportunity to engage with your people and personally invest in their success. By providing these resources on-site at InRhythm headquarters and empowering our people to not only come to us to learn but also to teach each other, a richer culture is born.

P.S. We also encourage our speakers to open up their learning and growth events, where appropriate, to the general public. Whether you’re a current InRhythmer, looking to join the team, or just interested in the field, I encourage you to join our InRhythmU Meetup group to get the latest updates and RSVP info for upcoming events:

Design Sprints with Joe Cahill
April 24th | 5 pm | RSVP

Compassionate Coding with Brian Olore
May 16th | 5 pm | RSVP

GraphQL with Denny Temple
June 20th | 5 pm | RSVP

Advanced Design Patterns with Will Bratches
July 18th | 5 pm | RSVP

React Native with James Woods
August 15th | 5 pm | RSVP

We’ve got a lot of different events, owing to the wide-ranging interests of our consultants, so if there’s something that interests you, I look forward to seeing you at an InRhythmU event soon.

Thanks and Keep Growing,
Gunjan

Shape the Future of Web Engineering with Us

My relationship with InRhythm began about 4 years ago when I did a Node.js workshop with the team. I was impressed at how the CEO, Gunjan Doshi, kept in touch, regularly checking in with me over the subsequent years. When the opportunity to collaborate happened, I jumped at the chance.

By then the company that had grown in size to nearly 150 consultants. Approximately 50 of those are web engineers; in my role as the Web Practice Lead, I work tirelessly to supply this team with mentoring, tools, connections, and anything else they need to succeed. I do this with the aim of preparing engineers for opportunities after InRhythm when what they learn here brings them success there. We maintain long-term relationships with our people after they leave because we’re genuinely invested in their career success. The strength of that community is what sets us apart.

JavaScript is eating the world of software and there’s no doubt that web development is going to continue to grow and expand in complexity. The continued acceleration of innovation in the Web sphere—from React to WASM—is an incredible validation of the field. Anyone using a phone or a laptop or a tablet is using software a web engineer built.

For me, Web Engineering is the most exciting type of software development, unlike any other—multidisciplinary, blending the hardest engineering problems with design-based thinking. A full-stack web developer might work on an AI algorithm and its human interface on the same day. I regularly receive calls from teammates working through a new perspective on an old idea, reminding me of just how innovative the practice of Web Engineering remains.

When you join the Web practice you’ll join a team that works on some of the most advanced systems in the world, with some of the largest organizations in the world. I’m amazed when I learn about the incredibly exciting and complex software our team is building. It’s my job to ensure that they—and you—are ready to learn and grow in that environment. As we look toward the future of web engineering, it benefits our company and our consultants to stay in the know.

All of this knowledge culminates in InRhythm University, a learning and growth program developed through inter-team collaboration and client outreach. The InRhythm University curriculum is comprehensive, and in keeping with our company’s mission everyone who joins InRhythm gets this education for free. Check out an overview of the kind of curriculum we offer for our consultants to take their skills to the next level:

Section 1: Computers!

Space and Time: Big O Notation

You cannot excel as a developer if you cannot state clearly and scientifically the cost of your code in terms of space (memory) and time (how long will your function take given 1000 items? How about 1 billion?).

Bits and Bytes: Bitwise Manipulation

Developers push bits and shove bytes around. You probably know about flipping bits between `1` and `0`, and what it means when someone says “megabyte.” Do you know why 1^1 === 0? There are a lot of powerful ideas to apply once you do.

Concurrency

Looking to learn more about using generators, callbacks, Promises, async/await to manage asynchronous workflows with JavaScript? Good! Managing concurrency is perhaps the most important concept to learn when building on modern systems. You’ll need to master it. We show you how.

Functional Programming

You don’t have to learn Haskell to understand functional programming. You can use JavaScript right now to engage with the extremely powerful ideas present in functional programming flows. You’ll learn about pure functions, side-effects, immutable data, and (probably) become a better programmer.

MVC and Classic OO. Bonus: How JS prototypes fit into this.

Can you easily describe the difference between prototypal and classical inheritance OO ideas? You should. You will. By modeling complex scenarios in both paradigms you will learn the pros and cons of each approach, and more importantly, learn how to choose between them.

Data Structures and Algorithms

Software engineers are largely becoming data engineers. Managing application state, immutable or otherwise, is no longer something other people worry about. That means you will need to understand the kinds of data structures and efficient mutation algorithms the smart people in the CompSci room have developed to help us do our jobs.

Trees and Graphs

Folders and files. You know about those kinds of trees. If you’ve used an outliner someone wrote a graph traversal algorithm for that; you’ve probably written one if you’ve ever walked a directory. Ever use Bitcoin? Here we focus on these specific data structures. This is one of the most powerful, and frankly fascinating, pure computer science topics every engineer should get a handle on.

Section 2: The Modern Web Stack

The DOM

No matter how elegant the abstraction of your build pipeline or transpiler or template system is, what it produces is always going to be the same: HTML, JavaScript, and CSS, all linked together within the Document Object Model that your browser or other Web View must process and render. If you do not understand, at a deep level, what is happening when a DOM is built or updated or otherwise modified you, fundamentally, do not understand Web Engineering. Those who master this section do.

Deep JavaScript

Time to dig into the docs. No, really. We’re going to go through the fundamental ideas that power the JavaScript language. You’re going to learn about execution contexts and scopes, and how and why those exist, to create the JavaScript language that we’ve all come to know and love.

Deep Node

JavaScript is on the server now, have you heard? It’s true! NodeJS frees up all the skills you’ve learned about events and event loops and gives you superpowers on the server. Want to write a command-line tool to do automatic deploys? How about building a text parser that powers a chatbot? How about building APIs used by dozens of teams spread across the globe speaking multiple languages? This is the beginning of the path to going full-stack.

Deep React

Time and time again our clients come to us and ask for modern React engineers. We have some of the best. We even do workshops with companies to level up their teams. You’re going to get to the level they want to reach by working through this section.

Debugging and Testing

Did you know that you can link a Node server to DevTools such that you can debug live code and even trace performance of your server code down to the function level…in your browser? Know the difference between unit tests and functional tests? Still using console.log for everything? There are options. You will learn to effectively test software and squash bugs and your life will be better for it.

The Network

Do you know what happens when you enter a URL into a browser? Do you read network packets when debugging API failures? When is a REST architecture appropriate? Cookies or tokens or something else for identity management? Access management? When is caching appropriate, and what is latency anyway? You must burn this knowledge into your bones if you are to build modern, distributed systems. Let’s get started.

Forward!

Every graduate of IRU has mastered the technologies and techniques that we know work at the highest levels of industry through continuous repetition of this process. The IRU program teaches students actionable skills through real-world scenarios. Using proprietary internal development tools, IRU simulates realistic client problems (not half-implemented “TODO” applications or “Hello World” demos) which students work through under the guidance of our senior trainers. Our engineers are given the thinking tools they need to:

1.  Intelligently analyze complex systems to find weaknesses and inefficiencies.
2.  Create a range of solutions and intelligently determine both the right solution and the right success criteria.
3.  Model and test the solution in collaboration with all stakeholders to validate the solution
4.  Analyze the results, measure against success criteria, and restart the process on failure.
5.  Standardize success into repeatable guidelines and share that knowledge with all stakeholders
6.  Repeat this process, without fear of revisiting old successes (the status quo).

The responsibility of transforming digital businesses requires earning buy-in for change from our clients and consultants. At InRhythm we empower the creativity of our people—we don’t accept the status quo. Perfectionism is not our goal; continuous improvement is. We believe in adaptive change, especially when it comes to growing the careers of our consultants. I am similarly focused on ensuring the growth of those in my practice, both as engineers and colleagues, to make us all better representatives of InRhythm and our industry.

Ready to take your skills to the next level? We’re hiring. I hope to hear from you soon.