The BrightGauge Blog

What Can JavaScript Do? {A BrightGauge Lunch & Learn Presentation}

Written by David Small | April 5, 2016

How & Why We Kicked Off Lunch and Learns

During my time at BrightGauge over the last two years the company has practically doubled its employee count now that we’re at 15 people. Since joining, we’ve changed offices twice and are now in an open office suite (which thankfully now includes a kitchenette). At our current size being a part of everyone’s daily tasks whether directly helping, or just being around them, seeing or hearing them make magic happen occurs less often than when I originally joined. Sure, we may know each other’s official titles but not what they may mean in terms of their day-to-day tasks.

Late last year Amanda McCluney, our Marketing Coordinator, gave an incredibly insightful inbound marketing presentation at a meet up event outside of the office. Considering her awesome content and the fact that the entire company was not at the meet up, we decided to bring that presentation in-house. Better yet it sparked in me the idea to suggest that we shine light on each team member’s domain within the company in some form. Something like it had already been proposed and we ended up with what we now call a ‘Lunch and Learn’ – not an entirely new concept.

At BrightGauge, we have semi-monthly company-wide status lunch gatherings known as Rambo Pizza meetings. The Lunch and Learns were slated to occur monthly after those meetings. In January for my presentation I took the opportunity to walk our Growth Team (I’m on the Product Team) through some basics of what JavaScript – the programming language I use daily – can accomplish in the browser. Considering my audience and ~20-minute time restriction, I decided to focus on a high-level overview of JavaScript and then augment that overview with a rich demo page filled with examples of it in action:

 

How Do You Explain JavaScript?

First and foremost to do this, I began with a high-level perspective of how the internet works.

Three entities are involved with browsing the internet.

In the picture, we see three distinct entities: a computer display (the front-end), a cloud (representing the internet) and racks of servers (representing the back-end). The display represents whatever device someone may be using to access the internet with a browser. That person would typically enter a URL into their browser which is then looked up on the internet until some server responds, transmitting its response via the internet back to the browser. That response will usually include an HTML page for the user to view. That HTML consists purely of text but not all of that text is intended for the user to read. Some of that text response can include text that specifies what media (images, audio, video) are to be included, hierarchy/structure of parts of the text within the page, instructions for the page’s appearance/layout and of course, the main feature of this post: JavaScript for added functionality.

 

Now what?

At this point, in a plain webpage example that is, all the content required for the page would’ve been sent to and now lives ‘client-side’ – in the user’s computer. One could disconnect their computer from the internet and observe that the content of their page would still be there. Now we can talk about some of JavaScript’s capabilities.

At a high level, JavaScript is a programming language used by your browser to interact with the content of a webpage. These interactions will typically include things that users can see but can affect other things – i.e., sending data back to the server without any indication of such activity. These changes can also happen entirely on the user’s computer without needing the internet (except for sending data like I mentioned)! What kinds of interactions are we talking about? Lots of them! I can give you examples starting with a single, globally popular service we all have likely used at one point: Google.com.

When you visit Google’s homepage to search for something, you see a single input field for your keyword. Notice that as soon as you begin typing, that centered input field changes and then you’re inputting text at the top of the page, a dropdown list of suggested keywords appear below your query and on pressing enter, results appear underneath that input field. While you are seeing all of these changes happen, you are actually on the same webpage and JavaScript has allowed it all to happen. From changing the input field position once you type something in, changing the URL so that it reflects what you’re looking for when you press enter, to displaying the suggested search terms and of course ultimately asking Google for the results of your query and finally displaying them. The search suggestions and results do, in fact, show up after initially loading the page and after sending/receiving data to Google’s servers about your query but JavaScript allows that to happen – and happen fast.

 

Some of Google’s awesome JavaScript at work.

Demo Time

Keeping in mind that the intention of the presentation was to give a brief overview, I built a demo page to illustrate some of the more user event-driven aspects of JavaScript to provide the biggest “wow” factor for the team. To speed up the development of this page I used a few pre-existing JavaScript libraries namely jQuery and Semantic-UI.

Using JavaScript libraries provides you with out-of-the-box functionality for common features without needing to write out that functionality yourself. Semantic-UI, as used on the page, makes creating a popup, accordion menu and show/hide animations trivial. There are a plethora of other libraries available offering wide features – from D3.js to help create rich charts to ClippyJS that lets you bring back an old Microsoft favorite character.

I used these libraries to help me create four sections of interactions – all showing their corresponding code – for highlighting ways in which JavaScript, in the browser, without an internet connection, can affect one’s web experience. The sections in the demo are:

 

Abracadabra
In this section, there is a paragraph of plain text and a button that toggles the visibility of that paragraph element. Here I highlight how, using JavaScript, it is possible to manipulate a webpage’s content after it has been loaded.

Using JavaScript to show/hide elements.

 

Login to Skynet
Unlike Abracadabra which was a more frivolous, warmup demo, this section presents standard-looking username and password fields prevalent on websites today. In this demo, we see that with JavaScript it’s possible to access data a user types into a webpage. On clicking submit, the username and hidden password get copied and displayed – including the previously hidden password – in fields to the right of where the user typed.

 

Copying input field data, including a password field into another element.

 

Mousing Around
This section, as its name alludes to, involves four purely mouse-based activities. The first highlights how it is possible to be aware of when the mouse cursor is placed over a particular element on a webpage and then carry out an action when that happens. The second item does the same but is based on a user double-clicking an element, at which point a third-party JavaScript library (Semantic UI) is used to display a popup. The last two items show how JavaScript is even able to disable right-clicking for context menus.

 

Experiment with mouse events: hovering, double-click and right-click.

 

Keyboard Fun
With all of the demo activities above, I had members of our Growth team show them off. This last section was the most sinister fun to show off. For this demo the user was asked to type the following phrase into a texarea element:

The quick brown fox jumps over the lazy dog.

On typing the input, as you’ll see in the demo, one of the keys is barred from being input. After noticing that, I then asked our participant to get the phrase into the element using any other means. One could copy the text but then they would see that right clicking is disabled when trying to use the context menu to paste the value in. Using the keyboard shortcuts for the Control/Command (on Mac) + V were also barred. Both restricted activities triggered popups.

 

Playing with the keydown keyboard events.

 

Bonus Goodie!
As a bonus, almost hidden goodie, I added functionality to demonstrate that a webpage can be aware of whether or not a user is actively in the webpage window – i.e., it is the currently focused window. Try it out.

I hope you enjoyed this overview as much as I enjoyed spending way too much time crafting the demo page for it which was fun. Feel free to reach out to me at dsmall [at] brightgauge [dot] com if you have any feedback, questions or praise.
View full post