Forem: Zakir Sajib

Spice up your mac desktop with custom widgets, yes we can write our own widgets using coffeescript, HTML5, JSX, React and JS

Zakir Sajib — Sat, 26 Mar 2022 09:45:08 +0000

There are native widgets available in mac but I don't like them.

I like my own widgets on desktop. Such as Weather, Currency, Timezones, or even system information such as CPU load, Memory status, Disk or network status. I want full control what these widgets are doing and most importantly I want to hone my existing skill sets - JavaScript, React, JSX and learn new thing CoffeeScript.

Its possible using third party app called - ubersicht.

Its a mac app which will allow any JavaScript, React, JSX code to run on your mac desktop and display information.

According to Übersicht:

Übersicht lets you run system commands and display their output on your desktop in little containers, called widgets.

First you need to download and install Übersicht and you can put it into applications folder or anywhere and run it.

Location of all its widgets are:

..../Library/Application Support/Übersicht/widgets

Inside this widgets folder we can create our own widgets.

The widgets folder may look like this:

Folder syntax:

{foldername}.widget
hello-world.widget

.widget is important, without this .widget Übersicht won't recognize.
You can also write your code without creating any folder. Just put your index.js or index.jsx or index.coffee within this location (..../Library/Application Support/Übersicht/widgets) and it will run if there is no error.

How to Debug

Its quite similar the way we inspect element in browser.

click show debug console.

A minimal widget looks like this:

Sample Code:

A sample of complex code to see current month as calendar in CoffeeScript.

Sample Code:

so you got an idea now!

Your widget can have following stuffs at a minimal level:



README.md
screenshot.png
widget.json
index.coffee



README.md
screenshot.png
widget.json
index.js



README.md
screenshot.png
widget.json
index.jsx

To learn more how to write your code see this link

If you prefer writing in coffeescript then this link.

If you download first existing widgets to try and see how they look then its available in Übersicht official site.

After writing your own widget, you can submit your widget to Übersicht.

Small Warning:

All widgets are built by third party developers in Übersicht and most of them are nonreponsive to answer your any queries or question (well, it happened to me but you might be lucky). you can create issue in their github and wait for their response. Good luck.
Don't mess around with system command.

My Currency convertor.

Example:
Currency Conversion

Adding a Loader Spinner in Gatsby site

Zakir Sajib — Wed, 17 Jun 2020 08:13:48 +0000

Usually we don't need a loader spinner in our Gatsby site as Gatsby sites usually fast (Super blazing fast as Gatsby.org claims). But in some situations we need it. For example if our users have poor WiFi or or slow 2G/3G connections then it would be a good idea to have loader spinner before contents load. I tested my few Gatsby sites in Regular 3G, 4G and WIFI it super fast but when I tested in slow 2G or DSL it takes time. That's the reality.

So I was wondering if I could show a some kind of loading spinner before the site or components are ready.

html.js

This is the file where we will use to load our spinner.

First step: Type the following command in your terminal:

cp .cache/default-html.js src/html.js

It will copy the default-html.js file and rename it as html.js and will place it in our src directory.

If you open the html.js file you may see something like this:

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

Now we have to add our own image (either gif or SVG) and add few lines of css and regular javascript codes:

import LoaderSVG from './img/loader.svg'

<div
    key={`loader`}
              id="___loader"
              style={{
                alignItems: "center",
                backgroundColor: "#F2F2F2",
                display: "flex",
                justifyContent: "center",
                position: "absolute",
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                zIndex: 100,
              }}
           >
              <img 
                src={LoaderSVG} 
                alt="loading spinner" 
                width="150" 
                height="150"
              />
        </div>

Complete code something like this:

import React from "react"
import PropTypes from "prop-types"
import LoaderSVG from './img/loader.svg'

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
              key={`loader`}
              id="___loader"
              style={{
                alignItems: "center",
                backgroundColor: "#F2F2F2",
                display: "flex",
                justifyContent: "center",
                position: "absolute",
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                zIndex: 100,
              }}
           >
           <img 
              src={LoaderSVG} 
              alt="loading spinner" 
              width="150" 
              height="150"
           />
        </div>
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

Now we will add our JavaScript code in gatsby-browser.js.

Add this following code:

export const onInitialClientRender = () => {
    setTimeout(function() {
        document.getElementById("___loader").style.display = "none"
    }, 1000)
}

Save it.

Now we can restart our Gatsby. And run the site. You may not notice the loader spinner if you have fast connection but if you can change your connection to DSL or slow 2G and refresh the browser then you will see the loader.

Reference:

Live site:
Nirvana

Display your repository from GitHub using GraphQL API

Zakir Sajib — Tue, 16 Jun 2020 10:36:57 +0000

I am building a website using Gatsby and main focus of this website would be showcase of my skills, experiences. Basically a kind of visual resume.

As a developer, I want to showcase my coding quality to potential clients. Almost all my codes are saved into GitHub and there are many repositories but I want to display only the important ones. I used the pinned feature of GitHub where you can show only 6 repositories.

So I want to display 5 pinned repositories of my choice and display each repository’s name, url, description and home page url.

Final product of repository section my resume site where 5 repositories are displayed:

In this article, I will discuss how you can pull repository from GitHub using GraphQL API in Gatsby site.

First we need to find out an appropriate Gatsby plugin for GitHub. There are few plugins out there but I found the following one which works and do the job:

gatsby-source-github

Lets install this plugin in our Gatsby project. In your Gatsby project’s root, type the following command in terminal:

npm install gatsby-source-github --save-dev

After successfully installing the plugin, lets open the gatsby-config.js file in editor.

But hang on, before doing that we need to create our personal access token for our GitHub account.

Personal access tokens function like ordinary OAuth access tokens. They can be used instead of a password for Git over HTTPS, or can be used to authenticate to the API over Basic Authentication.

Its very easy and straight forward.

Login to your GitHub account and go to settings and then Developer settings. In Developer settings page, click the generate new token button. In New personal access token page give a meaningful name of the token in note field and select correct scope(s).

Selecting only public_repo will do the job. And then click save token.

Now we have our token, copy it and paste in gatsby-config.js file.

{
   resolve: 'gatsby-source-github',
         options: {
           headers: {
             Authorization: `Bearer pasteyourpersonalaccesstokencodehere`,
           },
           queries: [
             `{ viewer {                 
               pinnedItems(first: 5, types: REPOSITORY){
                nodes {
                  ... on Repository {
                 id                       
                 name
                 url
                 description
                 homepageUrl
               }
              }
             }}
           }`,
        ],
     },
},

The above code block will go within

plugins: [

]

block in gatsby-config.js file. This is important.

Now our personal access token will go in options: headers: Authorization field after the word Bearer. Don’t remove the word Bearer. This is important.

Now the queries part. The query starts with { viewer { ... } }. This is the query I built using GitHub GraphQL API explorer which is found here: https://developer.github.com/v4/explorer/.

You need to login to your GitHub account and go to to the link.

GitHub’s GraphQL API Explorer makes use of your real, live, production data.

Here I crafted the queries and then copy and paste it into gatsby-config.js file.

My goal was to find out all repository from pinned items so my query was like this:

After you copy the code and paste into gatsby-config.js file, save it.

One of the important parts is done.

Now lets move on to second part.

Run gatsby develop command in terminal.

Open browser and connect:

https://localhost:8000/__graphQL.

From here, we will build our custom query and will use it on our code later.

We will create a component for example Repository and copy the query and paste there. So lets build the query first.

so this is our query which shows all pinned repository items and their meta data such as name, url, description and home page url.

Keep the GraphQL window open and now create a component called Repository.js file inside src/components directory of your gatsby project.

This is my Repository.js file

import React from 'react'
import {useStaticQuery, graphql} from 'gatsby'

const Repository = () => {
const data = useStaticQuery(graphql`
   query MyQuery {
      githubViewer {
    pinnedItems {
    nodes {
      description
      homepageUrl
      name
      url
    }
      }
    }
  }
`)
return(
<div>
{data.githubViewer.pinnedItems.nodes.map((repository, i) => (
    <div className="pf-grid-item" key={i}>
      <a className="pf-project" 
         href={repository.url} 
         target="_blank" 
         rel="noopener noreferrer">
         GitHub URL
      </a>
      <h2>{repository.name}</h2>
      <p>{repository.description}</p>
      <p>{repository.homepageUrl}</p>
    </div>
))}
</div>
)
};
export default Repository

I used useStaticQuery hook to query the data, but you can choose either useStaticQuery or StaticQuery or Page query. See the screenshot below:

As you can see nodes data comes as an array so I used map method to loop through the data and accessed the data repository with dot operator.

Now you can call this Repository component from other component like this:

<Repository />

This is an example of how we can use GraphQL to retrieve data from any third party application. This example could be a starting point to start with and sky is the limit to explore unknown!

Live example: https://zsresume.netlify.app/