#graphql #tooling #web development

A gentle introduction to GraphQL API integrations

GraphQL is a great alternative to REST (or other HTTP API designs). This is an quick introduction to the core concepts around consuming a GraphQL API. To see some examples consuming a GraphQL API: In Python, see Python GraphQL client requests example using gql In JavaScript (browser and Node), see last week’s Code with Hugo newsletter What is GraphQL and what problems does it solve? GraphQL is “a query language for your API”. ...

  • Hugo Di Francesco
    Author
5 min read
#python #graphql #web development

Python GraphQL client requests example using gql

An example consuming a GraphQL API from Python using gql. Full code example at HugoDF/python-graphql-client-example. This was sent out on the Code with Hugo newsletter last Monday. Subscribe to get the latest posts right in your inbox (before anyone else). $ pip install gql # You should use a virtualenvfrom gql import gql, Client from gql.transport.requests import RequestsHTTPTransport _transport = RequestsHTTPTransport( url='https://graphql-pokemon.now.sh/', use_json=True, ) client = Client( transport=_transport, fetch_schema_from_transport=True, ) query = gql(""" { pokemon(name: "Pikachu") { attacks { special { name } } } } """) print(client. ...

  • Hugo Di Francesco
    Author
1 min read
#git #web development #productivity

Split an existing git commit

One of git’s main differences when compared to other version control systems is that it lets the user rewrite the history. The main way to do this is to use git rebase, usually followed by a git push --force to overwrite history the remote with the local history. Here’s a look at how to split existing commits using rebase, reset and commit. Say you have two files edited in a commit (A and B) and you would like to get the changes from one of those files (A) into your current branch but not those from the other (B). ...

  • Hugo Di Francesco
    Author
2 min read
#JavaScript #VueJS #web development

A simple, real-world Vue.js directive

Vue.js is “The Progressive JavaScript Framework”. It takes inspiration from all prior art in the view library and frontend framework world, including AngularJS, React, Angular, Ember, Knockout and Polymer. In Vue (and Angular/AngularJS), a directive is a way to wrap functionality that usually applies to DOM elements. The example in Vue’s documentation is a focus directive. When running Vue.js inside of AngularJS, an issue occured whereby the AngularJS router would try to resolve normal anchors’ href on click. ...

  • Hugo Di Francesco
    Author
4 min read
#JavaScript #TypeScript #web development #developer tools

Writing an npm module with TypeScript and microbundle

For those looking to write a package and publish it to npm, TypeScript + microbundle is a low-friction way to build a high-quality library. Why TypeScript? TypeScript is a JavaScript superset that adds static types to it. Its other features also follow the ECMAScript specification (current and future) quite closely. For library authors this means you provide the consumers of your library, even those who don’t use TypeScript with more details around expected types and for some editors/IDEs that integrate with TypeScript (like Visual Studio Code) nicer auto-complete. ...

  • Hugo Di Francesco
    Author
4 min read
#JavaScript #frontend #web development

React vs Angular vs Vue in 2019: How components won the “framework wars”

React, Vue or Angular: Why it doesn’t matter. 2018 marked the end of JavaScript fatigue and the React vs Vue vs Angular (“framework wars”) debate A typical frontend/JavaScript developer career usually involves some jQuery and associated plugins before moving on to React, Angular or Vue. Having experienced React, Vue and Angular, it seems they solve similar problems in a similar way. Where they differ is the setup experience and best-practices. ...

  • Hugo Di Francesco
    Author
9 min read