DEV Community: Christopher Daniel

Improve GraphQl productivity with Altair GraphQl client

Christopher Daniel — Mon, 29 Mar 2021 14:28:52 +0000

There are several graphql clients available right now for querying and debugging graphql endpoints like graphiql, graphql playground and even postman with beta support.

Altair graphql client is a feature rich graphql client with simple and user friendly UI like postman. In this post I will share some cool altair tricks. For more you can visit https://altair.sirmuel.design/

Generate query from schema Doc
When testing the queries after development, we often have to enter all the fields the query returns to test all. Using generate queries feature, you can create all fields and subfields to a certain depth. The depth can be set to minimum 3 for showing root fields of the query, Increase that to display more values. For example I have set to 6 to show query depth of 4

To auto fill the query open the doc window and click add query button for any query. . That's it you will have pre generated query where you can fill the arguments and send.

Collections
Collections, is a great feature when you want to share your queries or backup and restore your work. Whenever you have completed your API, press the save button on url bar to save to existing collection or a new collection .

You can use collection window to switch between collections, load query/mutation from collection, export and import collections.. Collections store your variables and headers also

Environments
This is my favorite feature. You can create any number of environments and easily switch between them. When you have to test the queries in multiple env like your local, dev, staging, production etc.,you can create multiple env and just by using env switcher you can update the variable factors like headers, variables, arguments and url in environments.

Creating a environment
Click on the environment switcher and click on the last option environments to create a new environment. You have options to create env vars in global scope as well as environment scope. create new environment and declare all your env vars and save the form. .

Every env var is represented by {{env_var_code}} format.

env var in url
Enter your url as {{url}}/graphql in url bar and create a environment variable as url and provide environment url.

env var in headers
The common usage would be Bearer token or other auth token,
Authorization -> Bearer {{token}}.

env var in varibales
You cannot use env vars directly in query so you can replace with graphql variables and you can enter the env var expression there. for example

{
  "cartId": "{{cartId}}"
}

Portfolio - Digital Ocean Hackathon Submission

Christopher Daniel — Mon, 11 Jan 2021 05:45:56 +0000

What I built

I have built my portfolio with Yew framework. Yew Framework❗ heard of it?🤔 It is a frontend framework written in Rust that is similar to React. It has a virtual dom and uses a diffing algorithm to do essential renders like React. It is compiled to wasm and bundled by webpack.

Category Submission:

Personal Site/Portfolio

App Link

Portolio Website

Screenshots

Description

Portfolio website built in digital ocean app platform using docker and yew framework

Link to Source Code

Yew Portolio

Permissive License

MIT

Background

I wanted to try web assembly and rust for a long time. I was lacking motivation to learn and rust had a insane learning curve 😁.Also I wanted to build a portfolio for a long time. For portfolio, my first choice is next js SSG but it is not very challenging, I started building it and eventually got bored and dropped the idea. I want to challenge myself to learn WASM, rust🦀 and I believe portfolio could be the first step to try it out💪.

How I built it

My portfolio is a static site, but to generate static files, I need both rust and node js. Pretty complex to deploy 😅, but digital ocean app platform had a special option. You can deploy app with a docker container😲. It's been very long since I last wrote a Dockerfile and now it is a ideal situation for me to refresh😉 .I started building it and the only problem is only one week left to complete my submission. Let us see how I finished the app from the first link in the series, if you have not done yet.

Additional Resources/Info

Cover image from unsplash

Portfolio - Key Takes

Christopher Daniel — Mon, 11 Jan 2021 05:45:26 +0000

Key Takes

The learning curve is really steep for rust, but yew doesn't need complex syntax.
Building a whole website on web assembly in production is the worst idea. Long development time, bundle size, lack of build tooling, debugging tooling.
Apart from all these negatives still my site loads faster but yet not like a static site.
App build time is very large takes upto 15 mins in digital ocean.

Future work

Add service worker to cache wasm file and images
Add more PWA features
Add webgl to unlock multi threading capabilities of wasm.
Add Post list and post page from dev.to
Remove bulma and write css from scratch

More Info

Cover Image from Unsplash

Portfolio - Deploying in App platform

Christopher Daniel — Mon, 11 Jan 2021 05:43:53 +0000

Deploying

Many cloud providers stick to few runtimes like node js, ruby, php, java etc, but digital ocean provides docker container along with others to deploy our sites. We can see how I deployed it using docker container for static sites.

Setup

Create a Dockerfile in your root directory. pull rust container

FROM rust:1.48-slim-buster

Install node and yarn in docker

RUN apt-get update -y && apt-get install curl -y

RUN curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

RUN sh nodesource_setup.sh

RUN apt install nodejs -y
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update &&  apt-get install --no-install-recommends yarn -y

Copy source files and build your app

COPY . .
RUN yarn install && yarn build

Test your container locally by building and running the image

docker build -t yew-portfolio .
docker run -it -p 8000 yew-portfolio

Now test your build static files in a static file server of your choice and verify.

Now deploy it to Digital ocean using app platform.

More Info

Cover Image from Unplash

Portfolio - Building the website

Christopher Daniel — Mon, 11 Jan 2021 05:43:30 +0000

Website

I started building the website from the template Yew webpack template. Using this template reduced my development effort thanks to hot reloading. To speed up I have used bulma css framework

Key takes

I need to ensure the app is responsive
It should have a good light house score
SPA should have multiple routes

Routing

Yew has a router library named yew-router which we are using to setup routing. When SPA is deployed as static site it, routers need extra configuration. We have to configure index.html as fallback url so any site would first reach index.html. Now the routes simply append the href in url bar because of relative url. To avoid this I have used added base tag in head.

 <base href="https://yew-portfolio-iwfte.ondigitalocean.app/">

Layout

Even though I used bulma css to speed up, there are some complex layouts, where we need to use css grid.

Bundle size

Unlike mature frontend frameworks like Next js, Gatsby, Yew didn't have code splitting. This costs the website performance. The wasm file size is around 450kb. This is one of the main downsides of writing a whole website in yew.

Light house scores

More Info

Cover Image from Unsplash

Portfolio - Tech stack and motivation

Christopher Daniel — Mon, 11 Jan 2021 05:43:01 +0000

Portfolio

It's been so long since I last posted in Dev. I was looking for new ideas for hacking and posts and Digital Ocean hackathon started. I decided to finally create my personal website 😸. It is going to be a static site but with a twist. It will be SPA written in web assembly. Wait What😳 Web Assembly for a portfolio. For justice, I will add webgl components but in future😜

Tech Stack

Yew Framework for writing wasm components. Yew is a frontend framework written in rust and is compiled to wasm target using wasm-bindgen
YBC yew component library based on bulma
Webpack for compiling and bundling rust, wasm, js, sass,css etc
Docker for deploying the static app in digital ocean app platform

Code Editor - Jetbrains Clion. To accelerate development I have used yew webpack starter template

Why I chose this Tech Stack

I wanted to learn rust and wasm and yew seems to be the best bet. At first I tried the minimal yew setup and I was able to deploy it. Hooray❗. Hold on there's a problem, unlike React, Yew and Wasm doesn't have well established tooling. Every time I edit the project, I have to recompile the whole app 😑. I had two options use webpack or trunk a rust wasm bundler. I decided to go with webpack😛.

Additional / More Info

Cover Image - Unsplash

Magento 2 Graphql Development Environment

Christopher Daniel — Wed, 02 Oct 2019 08:26:50 +0000

Graphql Development for Magento 2

Magento 2.3.X comes with Graphql API support. To learn more about graphql visit graphql.org.

Interested in Magento Graphql Endpoints, time to setup your development environment.
When it comes to Magento development, PHPStorm is the best IDE.
Download JSGraphql plugin from PHPStorm marketplace

Setup Graphql development environment in Magento

The graphql plugin can run queries, mutations etc defined in your project. It gives autocomplete suggestions for writing query and schema.

To configure graphql plugin open the graphql tab at the bottom.
Press the '+' icon in the tab, select where you have to place the config file. Usually place at project root folder. (you will see some errors in schema errors section in graphql tab, ignore it for now)
Now paste the content in generated .graphqlconfig file change $BASE_URL with your magento base url

{
  "name": "Practice GraphQL Schema",
  "schemaPath": "schema.graphql",
  "excludes": ["dev/**"],
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "$BASE_URL/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": true
      }
    }
  }
}

Now refresh your graphql tab until your graphql endpoint shows up there. Double click it, and a popup ask you to select Endpoint action.
Select Get Graphql Schema from Endpoint option.
Now schema.graphql file will be generated in project root.

Now auto complete will be available for schema, query and mutation.

Fix schema errors in graphql tab.

The graphql custom directives by magento are not present in generated schema.
Copy all the directives from vendor/magento/module-graph-ql\etc\schema.graphqls file to the top of generated schema.graphql file
Now you can see series of FilterTypeInput error followed by Unexpected Token: "null" error.
If you fix this error, all FilterTypeInput errors will be removed.
So easy fix remove it, you wont get auto complete for null filter in FilterTypeInput.

"Is null"
null: String

Find input FilterTypeInput and remove these two lines.

NOTE:

Whenever you update your schema. You have to update your generated schema.graphql file by repeating step 5 and fix these errors again.

For more information about configuring jsGraphql plugin

Credits:
@LenaOrebei
@mage2tv

React + GreenSock Integration

Christopher Daniel — Sun, 31 Mar 2019 06:08:23 +0000

React + Greensock

I will explain you how to integrate GSAP animations to React application.

demo: GSAP

Using create-react-app create your react application setup.

Now the react application setup is done, we have to add green sock for animation.

Now you can see the react icon spinning with the help of css animation. We have to convert it to GSAP.

Change App.css. We are removing all the animations.

Its time to add GSAP animation ...

To add animation to an element using GSAP we need a reference for the element in react. I'm going to use useRef() hook.

Now I will show how to get reference to the element using callback ref

You can see the element in the console.

TweenMax

TweenMax in a animation util from greensock. To learn more about TweenMax visit tweenmax.

Inorder to rotate the div we have to use

   TweenMax.to(
            logoElement,                  // reference to the element 
            1,                            // duration 
            {
                repeat: -1,               // infinite loop of animation
                rotation: 360,            // 360deg rotation
                ease: Linear.easeNone     // linear speed no acceleration -------
            }
        )

Now we can add the animation when the component mounts.
Here is the final version

The full code is available on github github repo