GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. – http://graphql.org/
This guide will walk through installing and creating a GraphQL API in a Ruby on Rails application. It is a companion piece to the excellent Getting Started with Rails guide from RailsGuides. There are lots of resources that teach GraphQL-itself better than I can, so this guide just focuses on actually installing and using it in a Rails app.
Let’s first verify that the schema of your app is what is expected for this guide. We will start off right were the RailsGuides guide leaves off. You should have
comments tables with the following schema:
Since GraphQL uses knowledge of relationships between types, we must first defined the types we will allow to be queries. In this case, Article and Comment. Add the following article and comment type files to
Rails, by default, will protect your application from a particular type security risk called a “cross-site request forgery”
A side-effect of this is that you cannot POST to the graphql endpoint unless we temporarily disable this feature, by modifying your application_controller to read:
Please note that this is an important feature, and should only be disabled during developments, or if you want to create a completely public api endpoint.
Wrapping up & Next Steps
At this point we have installed GraphQL into our Rails app, created schemas for Articles and Comments, and written query types to return that data from our application, as well as testing the real API endpoint using postman.
From here you can take any path to consume the data, such as through a front-end application like a React or Angular application, or exposing the endpoint publicly!
Some next steps may be:
investigate a front-end graphql client, like Apollo
Create a class factory which allows dynamic super classes to by applied to an es6 class (dynamic inheritance). This will be transparent to a consumer — meaning they will interact with it in the same way as the initial class.
I was recently working on some code which extended an asynchronous module to add some additional functionality. The class initially looked like this:
import Fetcher from'fetcher'
//do some extra work
However, testing a module like this is difficult for two reasons.
The async nature of the behavior is challenging to test and mock
The explicit super class Fetcher which is imported in the module is difficult to override without reaching down into the prototype and manually modifying methods during the test. Yuck!
Wrap the extending (child) class declaration with a function, which accepts a parameter for its super class, and a default parameter value. Then the inner class can be declared using the SuperClass parameter. This will allow the child class to reference either its default parent, or the custom super class explicitly passed in.
The child class then extends or overwrites any methods from super that are required. Finally, a new’d up instance of the child class is returned with the remaining arguments passed to the class factory function.
For consistency of use, we can force the function to be called using new, making the abstraction completely transparent to any consumer.
If you’re looking for the steps to include static files, like an mp3, to a create-react-app project — and use es6 import statements to use them in a component, here are the steps. This process will involve “ejecting” from create-react-app, so think about the implications of that before proceeding.
1) Eject from the create-react-app by running npm run eject. The create-react-app documentation describes the eject command
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
2) Include the files you want to use somewhere in the src folder. Probably with the component which will be consuming them.
3) We need to modify our dev and prod webpack configs to allow the files to be import-ed by through webpack and included in the build folder. Add an entry to the exclude list which will test for the file. The exclude list should look like this:
Add a loader to the list of loaders for the file type you want to use:
Do this for both the dev and prod webpack files in the config folder.
3) Within the component file, you can now import the file you with to use, specifying the relative path to the file
import soundFile from'./file.mp3';
4) Then you can use the file within your component. For the example of a mp3 file, you can create a new Audio element in the constructor, and play or pause it using some event handler and function
A primary goal of data visualization is to communicate information clearly and efficiently via statistical graphics, plots and information graphics. Numerical data may be encoded using dots, lines, or bars, to visually communicate a quantitative message.Effective visualization helps users analyze and reason about data and evidence. It makes complex data more accessible, understandable and usable.
TL;DR: Use data visualization too:
Communicate information clearly
Visual communicate a quantitative message
Help users analyze and reason about data and evidence
It makes complex data more usable
Good and Bad Examples
A pie chart that shows the 100 most active “tweeters” of a particular hashtag? Terrible visualization. Measuring it against our criteria, it doesn’t effectively communicate a message, or enable any type of reasoning about the data — other than to reason that 100 is far to many data points for a pie chart.
Almost never use a pie chart -everyones stats teacher
A tree chart with shows the worlds defense budgets? Great visualization. It is clear and understandable, and illustrates a message to the viewer.
A map of the 2012 Electoral College results by state? I believe this is an excellent visualization. It shows not only the states votes, but shows the weight each state has in the electoral college. It is accessible to the viewer.
A chart of the 100 most popular websites per month? At a quick glance, which is most popular? Is it the largest, or closest to the center? Which is the largest anyway? This is an ineffective visualization.
Technologies to visualize data on the web
There are three ways the data can be presented/visualized on the web
Images: Visualization is designed in a tool like photoshop, illustrator, or tableu
CSS: Css properties, such as width or height determine the shape and size of objects which can represent data points.
There are many popular visualization and charting libraries. Three very popular and robust are:
Recursive depth-first tree search
Explanation (commented source)
//creates a `search` function, which accepts a needle (property name, string),
//a haystack (the object to search within), found (the recursively added to
//list of found properties
//iterate through each property key in the object
//if the current key is the search term (needle),
//push its value to the found stack
//return the array of found values to the caller, which is
//either the caller of the search function, or the recursive
//"parent" of the current search function
//if the value of the current property key is an object,
//recursively search it for more matching properties
//this can be changed to an else if, if properties should not
//return the list of found values to the caller of the function
My organization has early access to Microsoft Planner through our Office365 account, and I’ve been able to evaluate it compared to what we currently use: Trello. Spoiler alert: This post is fairly critical of Planner — in a Planner vs Trello head-to-head, trello wins hands down.
1. Broken Comments
The first thing I tried in Microsoft Planner was to leave a comment on a card. It broke. Bad first experience.
2. No Markdown support anywhere
Markdown syntax is not supported in comments, descriptions, or checklists.
3. Only 1 person can be assigned to a card
A key feature of Trello for my team is that multiple people can be assigned to a card at any given time. This fits our workflow. Forcing a 1-card-1-person relationship arbitrarily enforces a workflow on users.
4. Bugs in other browsers
Microsoft Planner doesn’t seem to play nice in Safari. It is compatible with IE/Edge… perhaps that is what it was developed for as well.
5. Cannot Edit Comments
Once comments are posted in Microsoft Planner, it is impossible to edit them.
6. No Card Numbers
There are no visible card numbers in planner. While they are also hidden in Trello, there are multiple plugins and options to surface them to the user.
7. No plugins or extensions
While this is technically not a failure of Microsoft Planner, community support does matter. Trello has thousands of community developed extensions that enhance and customize the interface to make it perfectly suited for a given team.
8. Character Limit in Checklists
Don’t plan on being verbose in your checklists in Microsoft Planner — there is a 100 character limit per item.
9. No 3rd Party Integrations
An important part of my Trello workflow is integration with Slack. Trello has 100’s of integrations with other services. Microsoft Planner is still new to the game, and there are no integrations yet.
10. Access tied only to Office365
I have personal and family trello boards, as well as work related boards, all linked together under the same account. The only access point a user can have with Microsoft Planner is with your organizations Office365 — meaning that vendors or contractors which aren’t part of your organization are out of the loop.
11. Limited Labels
Microsoft Planner seems to have a hard limit of 6 labels for a board. This is a pretty small set, and totally unusable if — like my team — you support dozens of applications.
12. Moving Cards Between Boards
It is impossible in Microsoft Planner to move cards between boards or projects. This is an essential function of Trello which allows us to move items between different teams boards, if the ownership of projects change, or cards are escalated to different groups.
13. Archiving Completed Tasks
In Microsoft Planner, “completed” cards are hidden, but still listed in each section. There is no “archive” section where you can move completed tasks to remove them from your board.
14. Board Customization
There doesn’t seem to be a way in Microsoft Planner to customize the board in any way, such as background colors or other branding.
15. Multiple Checklists
Trello allows you to have multiple checklists per card, breaking up tasks into groups. Microsoft Planner only has one checklist per card
The basic gist is that a circle is drawn, then another circle is drawn on top of it at coordinates centered on a point on the prior circle circumference, with the number of degrees and the radius being incremented or decremented each recursive cycle. The rate of change in degrees or radius is then modified and redrawn on a time interval to create an animated effect.
Each recursive circle is placed on a point on the prior circles circumference.