• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

InRhythm News

May 01 2019

Browser Extensions and Bookmarklets: InRhythm’s Learning and Growth Newsletter


April 23rd: Do You Control Your Browser?


Stanley Kubrick predicted first contact in his film 2001: A Space Odyssey and introduced a now-iconic, silver-tongued psychopathic A.I. by the name of “HAL” (1 character below “IBM”—get it?), but all we got in our own 2001 was United States v. Microsoft Corp. Some liked it and some didn’t but what everyone agreed on was that our freedom to choose our own browser would be integral to the Web’s success. 

This week we’re focusing on how two technologies—browser extensions and bookmarklets—can expand our ability to make use of the web by customizing our browsers. Distinguished IR engineer Pat Needham documents his recent adventures in building a Chrome extension, warts and all. We’ve all been there, Pat (spoiler alert: it’s published!).

Are you an extension evangelist? How have extensions and bookmarklets changed the way you experience the web? Tell us what you think @GetInRhythm or on the InRhythmU blog. 

Thanks and Keep Growing,

Gunjan Doshi
CEO, InRhythm

Adventures in Chrome Extension Building

(4 min. read)

“Curious about the process behind developing your own Chrome extension? InRhythm breaks down the steps from ideation to publishing as an individual engineer.”

What We’re Reading Around the Web


Bookmarkhuh?
How-to Geek
“”Did you know that browsers have had superpowers since about 1996? They have! When he was developing JavaScript for Netscape, Brendan Eich ‘invented the javascript: URL along with JavaScript in 1995, and intended that javascript: URLs could be used as any other kind of URL, including being bookmark-able.’ That means you could write a script into a link (e.g. Bookmark Me!), bookmark that script (put a little button on the browser’s bookmark bar, for instance), and run that code on any page you’re browsing. Check out this subreddit for some fun examples.”

Mobile AR Experiences in Unity
(7 min. read)
Thoughtbot
“Browser extensions are like apps for your browser. Unlike bookmarklets, these are vendor-specific toolkits for extending browser functionality. Those ad blockers you keep hearing about are typically browser extensions; LastPass, a popular (and recommended) password manager is another. For-profit companies like ActiveInbox depend on browser extensions. At InRhythm we’re thinking hard about how to help our clients using these powerful tools. Thoughtbot offers a great write-up on how to dive in and start creating—Chrome and Mozilla offer detailed guidance as well.”

R.I.P Bookmarklets
(9 min. read)
Medium
“Brian Donohue, former CEO of Instapaper (a company that bookmarklets essentially made possible) laments that ‘Bookmarklets are Dead (we just don’t know it yet)‘. Written in 2014, this important article was mainly reacting to security-focused technical changes that would cripple the power of bookmarklets in certain scenarios. While the reports of this demise were somewhat exaggerated, it’s true that these powerful customizations remain beholden to the goodwill of browser vendors, and there’s a risk in that. Run out and make some bookmarklets while you still can!”

Are Extensions Safe?
(5 min. read)
Brian Madden
“Browser extensions are deeply integrated into the browser experience, which means they can ‘see’ pretty much anything you do on the Web, and have access to a lot of your data. This is their power, and when used well they function as useful apps. Extensions, just like apps, must ask for certain permissions prior to installation, and that’s good. But the vetting process for extensions is not as robust as it is for, say, Apple’s App Store. Bad actors are always searching for weaknesses, and browser extensions are not immune. But let’s not throw out the baby with the bathwater—you can be a good actor, and build powerful tools for your customers and friends that only bring value.””

Written by Gunjan Doshi · Categorized: Browser extensions, InRhythm News, Newsletters · Tagged: bookmark, browser extension, chrome extension, learning and growth, newsletter

May 01 2019

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.

Written by Jan Schüler · Categorized: Design UX/UI, Events, InRhythm News, InRhythmU · Tagged: design, design sprints, UI, ux, uxui

Apr 30 2019

A Culture of Learning: InRhythm & Codeolio

The Sociocultural Theory, developed by seminal psychologist Lev Vygotsky, argues that a person’s cognitive development is largely influenced by their surrounding culture, and that social interaction is the foundation for learning.

To test this theory, we recently partnered with Codeolio for a tech talk in which engineers shared their experiences and learnings with React Hooks in v16.8, Cron Jobs in Node.Js, Java to Kotlin and Compassionate Pull Requests. You can check out the full session here.

As someone who values a culture of learning and having the right platforms and tools to advance, Software Engineer Ayaz Uddin talked through his experience with React Hooks. “I try to study and learn new things every day and was excited to have the opportunity to talk about React Hooks. Public speaking is a daunting task for me; I tend to get pretty nervous in front of a large group, but my team gave me the confidence I needed. Coming out of the talk, I feel more empowered to continue learning, teaching and improving my public speaking skills.”

Despite initial apprehension, Lead Cloud Engineer Bryan Riley mustered the courage to discuss moving a Spring code base from Java to Kotlin. “The doubts increased in the days leading up to the event. I questioned if I was really an expert in Kotlin and why I thought people would respect my opinion. As much as I practiced, I didn’t feel any more confident, until I developed my intro: ‘I am Bryan Riley. Lead Cloud Engineer for InRhythm and Coach.’ It helped me reflect on my journey, starting as mid level developer in an area where I lacked experience and performance testing. Now, I’m responsible for amplifying the skills of the people around me. Throughout my time at InRhythm I’ve had the necessary support to get to get me to where I am now, which is a comfortable public speaker and technical advice giver.”

Because Pull Requests (PRs) are the backbone of open source software development, they allow contributions by anyone, from anywhere. They are a vital form of communication, even within a localized development team working on proprietary software. During the event, Senior Director of Engineering Brian Olore discussed how approaching Pull Requests with compassion and collaboration yield the most productive work.

“When it comes to reviewing PRs, your role as a developer changes from problem solver to solution reviewer. It’s important to remember that as a reviewer, you are in a position of power. The requester is essentially at your mercy. Will you be ruthless? Or will you be kind? In my experience, it’s the people that show compassion and are willing to guide the requester that get the most useful and productive work done. Treat each Pull Request as an opportunity for a collaborative conversation.”

Fostering a culture of continuous knowledge sharing is crucial for an organization to attract and retain talent. InRhythmU is designed for consultants, clients and the technical community to share invaluable information for various technologies and coding habits, with the goal to help those who attend become better in their field.

To attend an upcoming InRhythm events and connect with our community, click here.

Written by InRhythm · Categorized: InRhythm News

Apr 25 2019

The Expanding Vision of VR: InRhythm’s Learning and Growth Newsletter


April 12th: VR-room


At InRhythm we’re constantly experimenting with new technologies, both within our internal teams and with our clients on the cutting-edge projects they’re working on. Virtual Reality (or VR) is one trend that we’ve been following very closely; while overly optimistic predictions abound, the promise of the technology is real. One of the reasons for VR’s recent, explosive success is the wealth of open, free software and tools to assist engineers in experimenting with their ideas. Our engineering teams are certainly paying attention.

In this issue, our Web Practice Lead Sandro Pasquali starts us off with a brief history of VR, from the good old days of stereoscopics to the modern fully-immersive experiences you only need a fancy pair of goggles to enjoy.

Already living in the virtual world? Is the idea of a new virtual paradigm giving you motion sickness? Tell us what you think @GetInRhythm or here on the InRhythmU blog.

Thanks and Keep Growing,

Gunjan Doshi
CEO, InRhythm

Virtually Real or Really Virtual

(6 min. read)

“As virtual reality (or VR) continues its recent, explosive growth, we go over the history (and hiccups) that took us from Stereoscopics to Oculus.”

What We’re Reading Around the Web


Reframing VR
A-Frame
“Way back in the days of Friends and Geocities, VR arrived on the web…sort of. It is definitely true that VRML was enabling browser-based 3D experiences, but slow networks and underpowered machines conspired against the success of these pioneering efforts. Good news: browser-based VR is back with A-Frame. This impressive framework is surprisingly powerful and easy to use—it’s just HTML and JavaScript. Maybe it’s time to bring back boo.com?”

Mobile AR Experiences in Unity
(30 min. read)
The Programming Historian
“The idea of building something VR-related often intimidates developers. It seems like rebuilding reality should be really hard, right? Sometimes it is, but you’d be surprised how just a little bit of work can lead to real mobile VR (or AR) applications. One of the dominant platforms for building such applications is the Unity 3D Development platform. In this comprehensive article, Jacob W. Greene provides a detailed walkthrough of how to build AR experiences for mobile. Want to do full VR? Here’s another intro that will get you started with the Unity engine.”

React Native 360
Facebook
“Many of InRhythm’s clients use React for building user interfaces; some even use React Native to build mobile applications. It turns out that React Native can also be used to deploy VR experiences. The fine folks at Facebook (who, if you’ll recall, bought Oculus) have done some work in this area, and they’ve released React 360. Head over to their Github repository and give it a whirl—there are plenty of examples to get you started.”

VR is not AR is not MR
(9 min. read)
Nvidia
“As the VR ‘movement’ gained steam over the last several years, competing visions of just how the virtual world plays with reality began to appear. When you think of ‘VR’ do you think of putting on a headset and moonwalking with Einstein? I do! But Augmented Reality (AR) is not that, and Mixed Reality (MR) isn’t either. Confused? Nvidia has a guide for you. If you’re looking for even more detail, this useful guide adds more information on the kinds of consumer products tied to each of the VR ‘types.'”

Written by Gunjan Doshi · Categorized: InRhythm News, Newsletters, VR · Tagged: AR, learning and growth, newsletter, VR

Apr 23 2019

Adventures in Chrome Extension Building

A couple of weeks ago I created my first Chrome extension. It was a great learning exercise, and if you’ve ever been curious about making your own, the basics I cover here will be helpful in your own journey if you choose to jump into the wide world of extension development. Here, I want to document my journey including the steps (and missteps) I took along the way.

Why Chrome Extensions?

I’ve always been a fan of Chrome extensions, yet somehow had never made one myself, despite having plenty of “what if” moments imagining how websites I frequently use could be made (even slightly) better. I finally made the decision to act with a site that happened to be the Firebase developer console’s hosting tab. This tab displays the DNS records one must add to the registrar from which the domain was purchased. There are two IP Address values one must copy over, and after a while I thought: “what if this copy paste could be automated?” The end result now lives on the Chrome Webstore.

Namecheap is a registrar which provides services on domain name registration. A couple years ago they added two-factor authentication as an option for additional account security. 2FA is great, but it makes logging into your dashboard more of an effort.

Luckily, Google has made plenty of documentation and guides available covering all things Chrome extension-related, and they can be found here. There are also countless articles on Medium, and other blogs serving as great complementary reading; I found seeing the same info described from different perspectives gives a fuller picture.

Initial Development + Dealing with Errors

The process started with doing a whole lot of copying and pasting, making sure the manifest.json file had everything it needs to contain. My first real roadblock had to do with figuring out how to dynamically add a button to the existing webpage. The particular challenge was that the modal I wanted that button to display inside of did not exist in the DOM on page load. Furthermore, the ID assigned to that modal appeared to be random due to it being different upon page every refresh:

Browser development window highlighting md-dialog#dialogContent ID modal

That led me to try a different approach, utilizing the popup window that appears after clicking on the Chrome extension’s icon in the upper right-hand corner of the browser as the way of connecting the Firebase console to Namecheap’s API.

Switching from plain JS to React

There came a point where I realized there was too much conditional logic affecting the content of the popup. For example, I needed to take into account whether:

1. The user has the Namecheap API credentials already saved to the extension’s local storage.
2. The user is currently on the Firebase console hosting tab’s URL
3. The user has the “Connect domain” modal open
4. A request is being made with the user’s Namecheap API credentials
5. The extention successfully retrieved those credentials from the API call

All of this quickly became messy, so switching to React appeared to be a reasonable option. This guide gives a great starting point for doing so with create-react-app. The resulting App.js file contains the conditionals for driving the five scenarios mentioned above.

When the component first mounts, three asynchronous actions take place for 1) getting the user’s IP address, 2) getting the locally saved data, and 3) getting the URL of the current tab. The values retrieved determine what next appears in the popup window.

Namecheap API

Namecheap offers an API that lets users do most things they can do on the web dashboard. The only two methods I needed to use were getHosts and setHosts. These, along with all other API methods, require certain request parameters to exist such as ApiUser and ApiKey. Responses come back in XML format, which I had never dealt with in JavaScript before. This was not a major roadblock but led to a healthy dose of trial and error while attempting to access any response errors. Using something like this:

const errors = xmlDoc.getElementsByTagName('Error') || [];

was sufficient because that Errortag will only appear when there is at least one.

One thing I had to watch out for in using the setHostsmethod was making sure I didn’t accidentally delete existing DNS Host records, or at least not accidentally. I say accidentally because, as per the API docs:

“All host records that are not included into the API call will be deleted, so add them in addition to new host records.”

The only time I can see it being beneficial to delete records is to get rid of the two that exist by default after registering a new domain, one which is of type CNAME Recordwith value http://parkingpage.namecheap.com., and the other being a URL Redirect Record, since you would have to remove those eventually in order to see actual content on the site.

Publishing to the Chrome Webstore

Compared to the process of developing this application, actually publishing it to the Chrome Webstore was surprisingly easy. The steps are succinctly described here. A few screenshots, along with a one-time $5 registration fee, are the main necessities. After filling out other info (like the category this extension belongs to, whether you want to restrict its access in certain countries), and uploading a .zip file of the extension, it becomes accessible for anyone to download.

Next Steps

The Chrome extension I made was mostly for educational purposes, and without a doubt has at least a bug (or three). However, it’s helped pave a path toward making other extensions which have less niche use cases, such as one that adds custom “copy-to-clipboard” buttons with dynamically changing keyboard shortcuts to the page for every code snippet in a readme file on Github. Having already gone through the process and demystified the steps involved from inception to publishing, I feel more confident bringing my next “what if” idea to life. I hope this overview will help you do the same.

Written by Pat Needham · Categorized: InRhythm News · Tagged: Chrome, chrome extension, google chrome, Google Developers

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to page 6
  • Interim pages omitted …
  • Go to page 21
  • Go to Next Page »

Footer

Interested in learning more?
Connect with Us
InRhythm

140 Broadway
Suite 2270
New York, NY 10005

1 800 683 7813
get@inrhythm.com

Copyright © 2022 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT