blog

Getting started with Github GraphQL API

This article is going to give you the basic knowledge necessary to start and develop your very own GraphQL API. This post is part of a series that will cover the full development lifecycle that lead to the creation of an example Github graphQL web app that can be found at the following link http://github-api-example.zelig880.com

GraphQL logo and basic example of query
GraphQL

What is GraphQL?

Before we dive into the actual details of graphQL, I am going to explain what GraphQL is, and what makes it so different from standards Restful API’s.

The actual definition of GraphQL defined on the official website is:


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.

https://graphql.org/

To summarise, GraphQL offer great flexibility compared to standards API’s. Clients are able to define what they want from a server in a single query, without the need to have to jiggle around specific API endpoints.

If for example you would like to create a list of users with their relevant address in a restful API, you will probably have to create two specific endpoint request, one to fetch an User and the second to get the user address.

GraphQL makes client request easier, without the need to make major change on the backend ( the server could still implement a restful API behind GraphQL). The above example can be achieved with a single request in GraphQL in which the client can ask for a “User with address”.

Github GraphQL API

Github character

I have specifically chosen to use the Github GraphQL api, because it is easy to access ( it is quite simple to gain a “personal access token”), and it is free and it provides tools and documentation that support its use.

Personal access tokens

For the scope of this post, you are not actually required to use an access token. I am going to show how to gain one, as it is the first necessary step to be able to move your example query into a real app and it is important to know how to obtain one.

To gain a Personal access token, you must have an account with github ( this can be created for free at the following link: https://github.com)

Obtain the token, after you have created an account, is very simple. You just need to follow this link https://github.com/settings/tokens and click the “Generate new token” button.

Screenshot of the "New personal access token" page form github
New personal access token

A token requires a Description, and a selection of access rules for your token. In this example we are going to query users, and we will therefore select the “User” scope.

Github GraphQL Api explorer

As mentioned above, one of the main advantages of getting started with the Github GraphQL api is provided by the tools provided to developers.

Github offer the ability to query live data, directly in the browser using their Developer explorer.

To access the explorer you just need to follow this link https://developer.github.com/v4/explorer/ and enter your credentials.

Github GraphQL explorer screenshot

The explorer is divided in 4 section:

  1. Query window – Where we are going to define are GraphQL query
  2. Query variable window – This is going to include the dynamic variables accepted by our query
  3. A result window -This is going to show the returned query or a detailed error
  4. Documentation explorer – This window provide extensive documentation on all the API.

Document explorer

Github document explorer
document explorer

The first step is to get familiar with the documentation explorer. This is filled with autocomplete functionality and provides you with a Details, fields list, fields descriptions and a list of Fields that implements the given item. The picture provided shows the result for PageInfo.

Query

If you have ever used a standard Rest API before, you are going to be completely our of your conference zone. GraphQL uses a Json like query. In the following example we are going to search for the first 10, users that match a specific “query variable”.

query SearchTop10Users($user: String!) {
  search(query: $user, type: USER, first: 10) {
    nodes {
      __typename
      ... on User {
        name
        login
        avatarUrl
        url
        bio
      }
    }
  }
}

The query includes:

  • Name: SearchTop10Users
  • Variables: $user: String!
  • Search paramethers: query: $user, type: USER, first: 10
  • Expected return: node, name, login, etc..

As the above query shown, this is very different from conventional APi’s that had defined endpoint (eg. getUser). With GraphQL not only we are able to merge different queries together, but we are also in control on which fields get returned ( eg. just a subset of the user object).

Query variables

Running the above query, is going to result in an error, because our defined variable ($user) has never been defined.

In Gitbut GraphQL variables can easily be defined in the appropriate window. In our case we just need to specify a string for our $user. Variables are passed using a JSON object format.

{ "user": "Zelig" }  

Run it..

We have now completed all the required steps necessary to run our first GraphQL query in the explorer.

Github is going to save all different queries on your profile, providing an useful search. This queries can easily be copied in your application, using the Personal Access token generated above.

Conclusion

This post was aimed at providing you with a very first understanding of GraphQL and its power. Using the Github API has allowed me to understand its basic fundamental, without the need to create a full scaffolding around it queries ( no need to set up a project just to send the queries).

Github extensive documentation on the API, is very helpful to understand the different objects available within graphQL. like nodes and edges ( this may vary between different api’s).

In future posts I am going to implement the above query to create a full Vue application with the use of apollo.js.

Frontend Job interview research

Need of change

Last year, during our Front End chapter meeting, we agreed to invest some time to improve our front end interview format, as it was not really fit for purpose and did not really supported us in making the right decision about candidates.

The interview format in use involved a coding test, focused in making an ajax request with some added validation, followed by some adHoc question that were tailored on the individual.

Many people will probably see nothing wrong with the test, as it actually provided both coding visibility and the ability to ask questions. Unfortunately after careful research, me and my colleagues found the test unsuitable for the following reasons:

  • It tested mainly javascript when our company looked for a wide range of skills such as HTML, CSS, Javascript, accessibility, Framework ( react, vue)
  • It required developers to “work under pressure” and not everyone is good at that, and it was not a “requirement” for our vacancies.
  • The adHoc questions where too different to compare overtime, and it was hard to define candidates level on them.

After the above “problems” were highlighted, we started to collate all ideas and change our current process to create something that would fit our company requirements.

The different ideas

The new test required the involvement of everyone, so we opened up a survey to ask people what they thought was a cool test, and what did they dislike about it. The ideas that I received were amazing, most of them interesting.

Some of the ideas that were forwarded were:

  1. Create a set of question from 30secondsofinterviews.org
  2. Ask candidates to complete the FizzBizzTest
  3. Ask candidates to bring a project that they were proud of to discuss during the interview
  4. Ask them to complete a test in the house ( replicate a website page).
  5. Give candidates multiple tests, allowing them to choose what they knew best
  6. Live bug fixing

The ideas above were all great, and choose between then has been a hard and lengthy process. At first all of the above may seem good, but each of them had a problem. Either it would focus too much on a specific skill (2) or have legal complication, because they could not share the code (3), or could really be misleading as people could prepare or cheat (1, 5).

Disclaimer

I would like to start this final paragraph by said that what I am going to share with you is not perfect, and it could actually not fit your company at all, but so far we had great feedback from everyone that has completed it, and has allowed us to interview a wide range of candidates, from Graduates to senior, without to need to adapt it.

The result

The final test was a mix of almost all the above suggestion, and has been carefully made ( and is actively tuned with new candidates feedback). The new test has 3 main parts:

  1. Home exercise
  2. Interview bug fixing
  3. Questions

Home exercise

I think everyone could agree with me, in saying that interview are very stressful. You are all dressed up and uncomfortable and scared of doing anything wrong (eg. using google to search for info) and wanting to give the good impression, that sometimes lead to the opposite result. To avoid this points, we all collectively thought that we had abolish having to complete a full exercise while under pressure.

The new proposed solution has the following information

  • Complete a specific exercise ( I am not allowed to give too many details).
  • The exercise will include basic requirement ( basic HTML, CSS and JS)
  • The candidate is asked to complete 2 more points from a pool of 6 specific topic ( responsive design, Advanced Javascript, Unit test, Accessibility, Advanced SASS, JS library Vue or React).
  • The candidate is provided with a ready to use zip ( just need to install node and type npm install).
  • The candidates is asked to spend no more than 3 hours on the exercise, and depending from their availability ( full time or unemployed) we give them the “expected” time to be able to fit the work ( a week or a couple of days).

The main point to get from the above breakdown, is offering the possibility to candidates to choose what skill they like most. We had candidates that just wanted to focus on the HTML make the design beautiful and clean, and others that wanted to show off their Javascript skills, by writing the above with full test coverage and completing the Advanced JS request.

Interview bug fixing

All developers know well that one of the most important skills in programming, is the ability to fix bugs. My team has thought that we needed to introduce a step in our interview that would avoid people from cheating ( asking someone else to create the above exercise for them).

We thought to “ask questions” about the exercise to candidates, but we knew to well that they people could “study” the implementation and be able to fool us. So we decided to ask developers to “fix some bugs”, more precisely, we would “break” their own exercise in a couple of places, and ask them to fix it.

Depending from the level of confidence we either do this together with the candidates, or leave them some space to sort it out.

We found this “step” to be very informative for us. It provides us with the “confidence level of the candidates”, it is less stressful that live coding ( as they are working on their own code), and it also show us their problem solving skills. I have to admit that his is probably the part I love the most.

Questions

Unfortunately, until now, candidates test would have been very hard to compare and contrast. We still needed something for different interviewer to be able to “understand” people level, without having to open up tens of projects.

Our final decision was a set of question that we have all build from the group up ( this was the hardest part to agree). The questions are divided in “topics” and “level”.

The topics follow the same distinction of the one provided int he home exercise, plus a few extra (like git, agile, etc..). Each topic has 3-4 questions, all divided by level.

The above distinctions allows us to provide the right questions to the right individual ( knowing their preferences from the exercise and from the “live bug fixing”.

This questions are not really defined, they are just “placeholder” for specific information. For example a JS question could be “ES6”, and a CSS one could be “responsive”. It is the interviewer discretion to ask specific question depending from the discussion they had and the code they have seen. For example what is the difference between “let and const” and “how do you use media queries”.

Each questions are written down by the interviewer, and then the answer level is provided (good, basic, knowledgeable, not know). Writing this single word instead that the complete answer, allows us to be able to “compare” candidates and understand their fir within the company ( I am aware that due to the nature of the OPEN questions, it is not a real comparison, but it provide a good idea of strength and weaknesses).

Summary

As mentioned above, this interview seem to be working very well for us. I have not only used it for external candidates, but due to its nice progressive structure, it has also been used for internal “developer programs” and “graduate training”.

We have now build a pool of over 15 different exercise and responses, that is really supporting us in making “good” decision of the candidates. Since the introduction of the above exercise, we also seem to be able to allocate candidate in the right spot, due to the more defined skills information that the test provide us.

I would be very happy to receive any feedback here by commenting below or on twitter. All feedback both positive or negative are welcome, because our real focus is to make our interview as smooth and stress-free as possible to all our candidates.

 

Post of the Week

Welcome

Welcome to my “Post of the week”. In these posts I share thought, ideas or fact that I have experienced during my last working week. If this is the first post of this kind, I suggest you to go and check out my latest posts too:

These small posts are aimed at new developers and people that want to learn what I believe to be important events that happened during my week.

I really hope you enjoy it, and as with every of my post, I look forward to see feedback and comments.

Code Review – Business Value / Coding Standards

This week I had the pleasure to work to Bristol, around 2 hours drive from my hometown. This journey help me in catching up on my podcast backlog.

During one of this podcast there was a brief definition of two main types of code review that I have never heard before, but made sense straight away.

The Business Value Review and the Coding Standards Review.

The business value review

This review is usually carried by developer that are aware of the “business value” and are very knowledgeable of the source code. This review focuses less on the actual line by line code, and more on the consistency of the code with the rest of the solution and its architecture/structure decisions.

The business value review are carried by people that usually “outside” the team. These are the review that I get asked the most being a technical lead. I was not aware of this specific distinction, but I was providing “business” insight and suggestion.

The coding standards review

The next type of review are called “coding standards” review. This is usually carried within the team and are more focused on the actual adherence of the coding standards and specific project implementation. This review goes in more details, and at times can actually even point out simple breaking space and class name.

Unfortunately, make these reviews is quite a rarity for me, as I am not part of a team anymore. This review seem to take place within the team, because they require a level of “trust” and “openness” to actually be accepted without feeling confronted or attacked.

Visual studio code – Github Pull request

As part of my unstoppable need to learn, I have found a very cool extension for Visual Studio Code that will allow you to handle pull request without having to leave our favourite IDE. I think this extension, is going to support all those Open Source project administrator that try to support free project to help the community, while overwhelmed by the amount of time necessary to keep it stable and updated.

A small introduction to the extension can be found in this video from Channel 9.

I have started to use Visual Studio Code for my small side project, but in time, I have started to use it more and more, until I feel it irreplaceable. The Visual Studio Code Team is open to listed, quick to change and Microsoft made it simple to extend. No matter what language you write ( I have used it for full c# projects, js, node and PHP) I greatly suggest you to use it.

Agile Values – Commitment

We have been using agile methodology in our company for quite a few years now. I have never actually had a formal training on scrum, but I always enjoy a nice conversation on its principles. It usually turns out that many people “follow” all principles without even knowing it, because at the end of the day, I see agile as a manual for good team management ( i live this as a discussion for another day).

This week I had the opportunity to discuss “agile” with a very knowledgeable person, that has highlighted me with the value of “commitment”.

For people that are now aware, some Agile methodology are build on top of 5 values that are: Commitment, Focus, openness, respect and courage.

I am of the idea that Commitment is probably the most important and the hardest value to actually follow. The value of commitment is not only about “estimating” tasks and filling the sprint up.

Commitment does not stop at the start of the sprint, it is shown throughout the sprint and I share below what I believe to be strong example of commitment:

  • Estimation – Committing to a time estimation for the ticket.
  • Ticket ownership – commitment to own a ticket and to see it DONE
  • UAT/PO demo – Committing to show any progress as soon as they are ready
  • Daily Standup – Committing what you are going to achieve during your work day.
  • Retrospective – Commit on taking action from previous mistake
  • Sprint Goal – Commit to achieve a specific goal at the end of the sprint

Unfortunately most of the above points are not easy to achieve. It is easy to say your part during the daily standup, but it is completely different to really commit to it and working toward achieving the defined goal. The commitment goal is actually a frame of mind, that when achieved it brings the greatest results.

Summary

This week I have learned so much. I listened to numerous podcast, watched different videos and had the chance to discuss great topics with great colleagues.

I am always amazed to how much I still have to lean. Our industry is so fast, it never stop and learning should be our primary focus.

I really hope the above points will support you in learning something new and please feel free to comment or contact me if you want to discuss anything further.

 

 

 

 

 

Weekly post 28th of September 2018

Welcome

Welcome to my weekly post. In this posts I share thought and ideas or fact that I have experienced during my last working week. If this is the first post of this kind, I suggest you to go and check out my latest posts too:

These small posts are aimed at new developers and people that want to learn what I believe to be important events that happened during my week.

I really hope you enjoy it, and as with every of my post, I look forward to see feedback and comments.

Farewell comrades

Unfortunately no matter how great a business actually is. There are times when colleagues decide to take a different career path that will inevitably will see them leaving the company.

In this instance, unfortunately my colleague was looking for a technical stack that we were not able to offer, and I was more than certain that this moment would have happen soon.

I did not have the greatest relationship with this colleagues, as in many times during the first few months of employment, I had to have many discussion about work ethic and other more delicate subject.

Unfortunately this is part of my job, and even if I am not proud of it, it is normal for some people to feel some resentment, but this case was different.

I was initially surprised that my colleague decided to tell me first about his departure, even before his team mates and functional lead. Then he unexpectedly gave me a most welcoming hand shake and thanked me by saying:

Thank you for everything you have done. You have managed to change me, and change me for good! I will never forget itColleague

This experience though me a great lesson. Sometimes we may think that our actions may have no consequence or have a negative effect, but in reality they could actually change someone else to shape their future.

Fresher week

This week, all over the UK, first year students are celebrating their arrival to their chosen university. This week, apart from the great vibe and freebies I could fetch all over town, I was actually involved in a presentation to Computer Science students at the University of Wales Trinity Saint Davids (UWTSD).

I presented with one of my colleagues, and it was great to be able to share ideas and tips to people, and hopefully, give them the opportunity to come and join our company.

While walking around the theatre, I could feel the eye focusing on us, I could feel the thoughts running in peoples minds. I hope to have succeeded to spark some interest, and hopefully give them good tips that will help them in their career path.

At the end of the day, no one can really know what lies ahead, but I know deep inside that I have done my part and I wish all those students the best possible outcome!

Keep organised

While I was preparing the above presentation for the University students, I realised being organised, is probably my strongest skill. If you have ever worked with me, you may know that I am old school and always walk around with my little agenda.

Today I am going to share the methodology used to organise my busy work schedule and small tips that could help you becoming more organised.

This is just a quick guide, for a complete guide I need a standalone post, please add a comment or ask on twitter if you are interested.

My organisation is an adaptation of the Bullet Journal. I should probably thank them for my success, and without their ideas I would probably still be using the agenda normally, loosing out it all the great feature that I now use on a day to day.

During the next few sentences, you may start to think that I am crazy, but I really urge you to keep reading and try it, because it is not actually hard to implement and the results are amazing.

Index

All my agenda’s start with a few pages that are initially empty. This pages will store my index with all relevant titles and page number. This is essential when the agenda start to get full. Differently from a normal usage of an agenda, pages will live for a long time, and you need to know where they are ( it also remind you of what information you have stored).

Usually a couple of page are enough to cover all my agenda (4 pages for just in case).

Week by week

The index pages are usually followed by the first “Week page”. Each of this page begins with a title that indicate the date of Monday for each week. For example this week would be titled “WC 24th Sep 2018”. I usually write the title on the top right so that they are away from the rest of the page ( that gets messy).

This page include all the “action” that I need to take throughout to week and all the one that were not completed on the previous one. This is my first tip “If you are not immediately starting an action, WRITE IT DOWN!”

I write tasks like:

  • Answer john question
  • Send email about X
  • Complete epic X

All tasks here need to be concise and tangible. I would never write anything that could have no end! This page is essential, because it will show you everything that you have done during your week.

More importantly, it will highlight if you have not been able to complete the action that you were planning to do at the start of the week! (there is more to this, and I suggest you to check out the website).

Backlog

This is an agile term that can be described as:

An accumulation of works waiting to be done or orders to be fulfilled.wikipedia

This will be the first page that we add in our index. The backlog will include tasks that you have NOT been able to complete in the “Week page” and that may have low priority at the moment.

If i personally move something in the backlog, I feel really bad, because it means that I am falling behind, or that I did not focus and managed my action properly.

When you have quite times, or when you have the ability to do some extra work, you can easily go back to the backlog and move the tasks into the Week page. (When this happen, this is a good moment).

Special event / meeting

This is probably the most important point of my agenda. I fill it up with meetings and “recurring” action that need a specific point. This is easier to explain by actually sharing a few pages that I have an its needs. Each of this entry need to be added in the index page.

  • Chapter meeting – This page is used to add information that you would like to share during the chapter meeting. It is very useful for information that you want to share and it will help you in be consistent in delivering information to your team.
  • Functional Members – I am a functional lead, and as such I need to take care of my members. I like to write down Good and Bad events. This information NEED to be written down, otherwise you will surely forget about them! And for my past experience, they are extremely appreciated!
  • Specific meetings – I have on average 4-5 meeting a day, and I do not actually use a page for each them, otherwise the agenda will last me a week. I just record meeting in which decision where taken and or assumption where made. It is important to remember what was agreed when the time comes for the work to actually take place.
  • 121 – This is another important page for me. Keeping track of even that I want to share with my functional lead. There is nothing worst that meet your functional lead and say “I have nothing to say”. We all have something to say, we just do not remember!

Summary

This week post has 3 different posts and it is not easy to find a specific topic. I really hope you have found any of the above interesting and I look forward to receive comments and suggestion.

With this I salute you and I wish you a fantastic weekend.

 

 

 

 

Weekly post 21st Sep 2018

Welcome

Welcome to my weekly post. In this posts I share thought and ideas or fact that I have experienced during my last working week.

We are all too busy to actually write entire blog post on any small details, but small and concise info can be gathered in just a few minutes, and writing them down is helpful both for the writer ( allows him/her to think about the events) and for the readers (that could learn from it).

I really hope you enjoy it, and as with every of my post, I look forward to see feedback and comments.

Overtime != Overproduce

Today I would like to begin my post by sharing an event that took place on twitter. The twit was initially created by @ashleymcnamara, and it was a simple message to people to stop and overwork.

Work/Life balance starts with your leadership teams. I don’t check my email after 5pm because that’s family time and my boss respects that boundary. I love my job, but I don’t live to work. I work to live. Stop praising people for working 18 hour days.
Twitter conversation with @ashleymcnamara

 

That post made me realise that unfortunately the IT industry is full of driven individuals that give 200% of themselves working for incredible amount of hours.

This kind of behaviours is not maintainable, and as the title shows, it does not actually increase productivity.

I have been working for the same company for over 5 years, and in my opinion, the main reason that kept me there, is my ability to maintain a very healthy life/work balance.

I am a very driven and organised individual that gives 150% of himself during working hours. But on the same time when home time comes I am ready to give full attention to my family and personal interest. I am very keen in keeping this line defined and strong, and all my colleagues are well aware of my work attitude (No late meetings, no phone calls).

Most of you may immediately comment that this is probably just possible because my company allows it, but I do not agree on that. This may be the case sometimes, but I am of the opinion that most of the time, the behaviour is all due to personal control.

To enforce my comments, I know of many individuals within my company, that work on average 10/11 hours a day, and are asked (in some occasion) to work even more, but this does not actually mean that they are more productive, or that they should be praised by it.

I surely agree that it is not easy to push back, and it will be hard at times to refuse to help, but I am of the idea that if you are not able to complete your daily tasks and/or projects, within a working days, then working more would just hide the real problem that is due to bad managements.

disclaimer: Of course there are some “specific” situation like live issue, or very “one of a kind situation” where I have given my support, but it is a very rare occasion, and when it happens, I make sure it is raised and discussed with the team.

Hack the City – help the community

Being a developer, has lots of advantages, but unfortunately like every other job, it also comes with some disadvantages. One of this is actually the monotony that the day to day job offers us.

Unfortunately, there is no IT company around that can easily keep developers interested for a long length of time. Luckily I have found the solution for this problem, and it can be summarised into one single word “community”.

On Monday I was involved into a local meetup called hack the city. This, like many other’s meetups I attend locally, is a great way to try something new. They can be used to share your knowledge, or to get involved in something that is outside your conference zone.

We have all tried many side projects that we will complete one day. But we are all aware that the percentage of completed side project is quite low.

I usually compare side project to attending the gym. We all say we will do it to lose the extra weight, we go for a couple of weeks, and then we start to lose interest and go less often, until we keep paying a membership for something that we do not actually use. Does this means that no one will ever attend the gym? Are gym’s completely empty?

The secret is in cooperation and support, in fact many people would probably agree that most of their consistency in attending the gym and get fit, was due to a specific person that has supported them or to a group of people or a personal trainer.

Well I think “community” work can actually be the equivalent to a personal trainer for a developer. Being part of a group that has agreed on specific deliveries and goals, is sometimes enough to make sure you keep working for your goals, and on top of that it will keep you interested, it will keep the spark within you and will (indirectly) also make you love your day to day work even more.

I would really hope for more people to get involved. It is fantastic, and even more it is more beneficial that you actually think. If you are in the Swansea area, I urge you into getting involved.

More brains == better result

In this last post, I am actually referring to Pair Programming and not clinical surgery. Unfortunately, due to the nature of my position, I am not able to support my team member often, but when it happens it is a great joy.

On Wednesday I had the chance to Pair programming with two members of one of my team, in creating our first Vue.js Mixins (is a bit more complex that this actually).

There are still many people that may argue that having two/three developers on a single PC  is a waste of time, but the more I do it, the more I think it should really be pushed as an industry standard.

I am going to list below just a few advantages of Pair programming:

  • knowledge transfer There are instances where it is essential for part of your system to have as much exposure as possible. No documentation can compare to Pair programming.
  • Skill transfer We all have different skills, and we may all tackle problems differently. I have found Pair programming being an enlighten exercise, no matter the experience of developers involved.
  • Self-esteem We all know that the industry is full of “imposters syndrome”, and many developers may not actually have a strong idea of themselves. For my experience, Pair programming is actually a fantastic tool to support developer to come out of their shell.
  • Time saving This may raise lots of highbrows, but I am of the opinions, that if there are complex tasks in a sprint, Pair programming, should actually be mandatory. It would actually result in better code, less mistakes and quick delivery.

Pair programming it is not easy. I had to learn how to give space, how to wait for other people to comment, how to accept other people opinion, but all this has made me a better developer and I will always welcome a couple of hours of Pair Programming whenever I can.

Summary

While reading the post, I have just noticed that all the above points seem to aim at supporting developers in keeping their work interested. It is not easy, but there is no harm in trying.

You may be working in a company that may not actually support you and won’t allow you to accomplish any of the point above, and if it is the case, I  suggest you to leave (maybe come to work to Vizolution J ), because you spend on average more time in work that at home with your family, and I am of the opinion that you should enjoy it as much as you can.