Project 31-A

GitHub provides the GraphQL explorer to play with GraphQL data and learn how to shape your queries. When your group of queries grows to the point of repeating objects and their fields, its time to move to fragments.  A fragment in GraphQL allows you to have: readability - a well-named fragment shortens queries and mutations reusability - reuse fragments in queries and mutations performance - on the client, fragments and their components are a cache layer type-safety -  the  code generator  that builds your GraphQL SDK includes named fragments so you can access any deeply nested objects as fragments without the types and their guards you would need to manage Typical places to create and use fragments to DRY up your GraphQL queries include the most common schema objects. For a GitHub GraphQL schema, those can include the User and Repository . To get the entire list of repositories in a GitHub org, you need to compensate for the cursor/paging as well as the ret...

The following is my opinion and doesn't represent my employer.  Install Node.js If you are like me and work across operating systems and environments (local, container, cloud), you have one or two bullet-proof ways you install Node.js. The Node.js organization has done a great job of listing those.  I'm sticking with the following: * For Windows installations - use the Windows download .  * For all other installations, including VM, Container, Mac, *Nix - use the bash script Never, under any circumstances, use the apt or apt-get package manager to install Node.js. At this point, that is equivalent to a code-smell.  NPM vs YARN NPM should be your package manager of choice when installing an NPM package. If you run into problems, log an issue .  Debugging Node.js projects with NVM and lock files The Node Version Manager (nvm) and lock files are for the developer of a project to be able to get back to an exact version of the entire development environment to debug ...

This is my cheat sheet for debugging the mocha.js project from VSCode while adding fixes to it. This is not about how to debug ANY project that is using mocha for testing. The mocha.js repository has a build system that builds into /bin/mocha. I don't use a package.json script. I just use a launch.json mocha test configuration: { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version" : "0.2.0" , "configurations" : [ { "type" : "node" , "request" : "launch" , "name" : "Mocha Tests" , "program" : "${workspaceFolder}/bin/_mocha" , "args" : [ "--colors" , "${workspaceFolder}/test/reporters/dina.spec.js" ], "internalConsoleOptions" : "openOnSessionSta...

Here are the session videos that blew my mind. The session titles are terrible, ignore them. The presenters are amazing. Shay Howe - Css as a Service: Maintaining Style Ben Straub - Hacking Culture with Javascript ANDREI KASHCHA - A story of package managers, graphs, and one million vertices

Introduction Recently, I needed to restyle an HTML <SELECT> box so that the selected element had a different background color. In all other ways, the element could be exactly like an HTML <SELECT>. Below are both the original element, and the restyled element.     This type of style change allows the novice user to immediately identify the control’s implied usage while allowing for some coordination with the site and page’s overall style.   Technology Platform The project is an Asp.net MVC site with jQuery, and Knockout.js on the front-end requesting json content on the backend. For the purposes of this blog post, I’ve stripped down the functionality so that just the required elements are visible. The project was already using Telerik Kendo controls so morphing the Kendo Panel Bar into a <SELECT> element was suggested. The main work is in the css file but the entire working sample project is available for download.   Telerik ...

Introduction While developing a web page with a summary graph and a detail grid below, I needed to pass a small amount of data outside of the existing Json call data sets. I also wanted to do this without another asynchronous call back to the server. I wound up stuffing the data in a custom http response header while already on the server. This article explains how I retrieved the data on the client. Existing Client Libraries Both the graph and the grid were independent jQuery libraries with very specific Json response requirements. Stuffing the small amount of data in one of those response data sets could have been done with enough tinkering but I wasn’t sure how this would affect those libraries now or in future versions. While the data was related, it was also separate and I wanted the code design to reflect that. Server Http Response Stuffing This project uses Asp.Net MVC 4. The code to add the small amount of data should be the same across the .Net platform: HttpCon...

I have a couple hundred markers I want to add to a Google Map via the Google Map API. For each one I want to have a clickable Info Window with a little bit of HTML in the window. The Google Map API function written in JavaScript to do this is: GEvent.addListener(marker , ‘click’, function() { … } ); The first parameter is the marker instance, the second is the event, and the last parameter is the function to execute when the click event takes place on the marker. However, notice that there isn’t any place to send in parameters. addListener doesn’t have an optional parameters property, and the method doesn’t allow you to create a function that takes parameters – since it wouldn’t know what to pass there. Which leaves me with the problem: how do I pass in the HTML that I want to display on the click? I could create a global array of html data that I fill and reference that global from inside the function, however this is messy. The answer is to tell the marker what the HTML is...