Our development team had an unusually busy end of February. We hosted our first-ever Builders’ Meeting, welcoming other engineering teams in the Miami area, and that following weekend members of our ...
Our development team had an unusually busy end of February. We hosted our first-ever Builders’ Meeting, welcoming other engineering teams in the Miami area, and that following weekend members of our team namely, myself and Francisco, headed to San Francisco for nerd time at ForwardJS, a JavaScript-focused conference Downtown. The Sights With tutorial days mixed in and a single, all-day conference on the schedule for the week, Sunday was spent exploring and getting settled as first-time SF visitors. If you’ve never been, take it from us that SF is a city with beautiful architecture and landscape. For one, they have hills with steep inclines which is cool to see coming from incredibly-flat Miami. I made a couple touristy stops before the day was through, visiting The Palace of Fine Arts, getting a glimpse of the Golden Gate Bridge from Chrissy Field and then taking in the fantastic sight that is Twin Peaks before getting dinner with Francisco in the Embarcadero Waterfront area and calling it a night ahead of tutorial day number one. View of The Golden Gate Bridge from Chrissy Field One thing to know about San Francisco is that its food game is generally on point as day one’s breakfast highlighted: fantastic salmon scrambled eggs and eggs Benedict. Another thing to know is that there are apparently consumer incentives for low-emission vehicles as most of the cars we traveled in were hybrids which stood out to us. The Tutorials ForwardJS tutorials are all day (9:30am - 4:30pm) affairs and absolutely worth the time spent. They're on the smaller side in terms of class sizes and give you the chance for a deeper understanding of specific topics. Of the plethora of tutorial options available during the week, Francisco and I picked subjects on: ReactJS core principles Web Performance Features new in ES6 (ES2015) Asynchronous JavaScript Patterns in general and with ReactJS Francisco’s Asynchronous JavaScript Pattern Tutorial with Kyle Simpson In addition to being exposed to great content on JavaScript, web development and getting to explore San Francisco, one of the other major highlights of attending tech conferences of this nature is being able to meet others in the industry and learn about the contexts in which they work. Lunch tutorial breaks were ripe for this occasion, especially since we conveniently ate in the hotel restaurant where the conference was hosted. Besides lunch, the conference organizers hosted a few happy hour events to facilitate more socializing which was also fun. We partook in some street sushi and hard cider and loved it. Conference Day Conference day came and went with a few tutorial-appropriate subjects but of course in bite-sized talks. We attended sessions that highlighted the importance of designing applications smartly to reduce user cognitive load in making decisions, introduced the concept of service workers (very cool stuff), explored ReactJS virtualization (windowing) and a few other talks touching on React basics and best practices. All-in-all, it was quite an organized and adequately paced conference day with awesome presenters. Before I forget, thanks to our group lunches (and street sushi) we also managed to make some conference friends! Conference friends! From bottom-left, clock-wise: Francisco Marcano (BrightGauge, Miami, FL), William Lubelski and Lara Parvinsmith (EverTrue, Boston, MA), Jordan Maslyn (CO+LAB, Richmond, VA), Keith Perfetti (Def Method Inc., New York City, NY) and me, David Small (BrightGauge, Miami, FL) Takeaways At the end of it all after being sufficiently enlightened and intrigued by a few concepts, we definitely returned to Miami eager to make some changes to our BrightGauge development. On a technical level a small portion of our service is built using ReactJS taking advantage of ES6 goodness but the majority of the remaining, highly-interactive portions, use AngularJS and CoffeeScript. Having seen a few sessions on ES6 we’ll be looking into implementing it and moving away from CoffeeScript and ES5. We also want to evaluate and possibly revamp some of our asynchronous design patterns and look into improved server-side data compression. We also had no idea that the yarn package manager was a thing and worth considering as a replacement for npm - definitely worth looking into as well. We were happy to have spent the time in San Francisco taking in some great content from a sweet conference, exploring a beautiful city and making new friends. Take a look at a few of our other pics from the trip in our Facebook album!
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.
