Forem: Kamran Hamid

Using JQuery with gatsby

Kamran Hamid — Thu, 20 Aug 2020 01:32:10 +0000

Photo by Karolina Grabowska from Pexels

In this tutorial, we are going to look at how you can integrate jquery based template in to a gatsby website.

A lot, of people, are struggling to get jquery work in a gatsby because it uses windows and document and as you know that gatsby struggles to use these objects.

So to make things easier I'm going to use a good responsive template from HTML5 UP because most of the templates here use jquery as a default library.

Step 1(Find a template)

There are a lot of templates you can scroll and look at the demo to get a feel how they'd look like. Also, depends on your needs and requirement of what your website should look like. Of course, there are other platforms you can use to download a template you like.

Step 2(Download and Extract)

After you have found the template download it in your local machine. It will be a zip file of HTML, CSS, scripts and assets. Extract all the files in a folder and open the project to make sure everything is working correctly.

Step 3(Initialize a gatsby project)

Kick-off your project with this default boilerplate. The starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing-fast app generator for React.

Use the Gatsby CLI to create a new site, specifying the default starter.

# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

Navigate into your new site’s directory and start it up.

cd my-default-starter
gatsby develop

Step 4(Integrate)

Integrate Styling

if you can't find gatsby-browser.js in the root directory of your gatsby project then create one.
create a styles folder on the root of your gatsby project src/styles and paste all the CSS files in it.
add all your CSS files path in gatsby-browser.js file.

// gatsby-browser.js

import "./src/styles/main.css"
import "./src/styles/noscript.css"

resolve import errors (either font/images/css file)

Integrate Scripts

if you can't find a static folder at the root of your repo then create one. Please read detailed documentation about why and when to use static folder from the official gatsby site.

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg
install react-helmet and add all your scripts inside it in the Layout component.

// layout.js
import { withPrefix } from "gatsby"
const Layout = ({ children }) => (
  <>
    <Header />
    <SEO title="Demo" />
    <Footer />
    <Helmet>
        <script src={withPrefix('../../scripts/jquery.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/jquery.scrollex.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/jquery.scrolly.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/browser.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/breakpoints.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/util.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/main.js')} type="text/javascript" />
    </Helmet>
  </>
)

Add Images

add the images in the src/images folder

Voilà

That's it, that's all it takes.

Habits you can adopt to achieve accessibility

Kamran Hamid — Mon, 18 May 2020 07:44:02 +0000

We are web developers and our focus is mostly on the technical part of an application like a feature should work or animation should animate but in building applications, we often forget the disabled people which are 15% of the world's population (according to WHO) and more than 1 billion in number.

About 15% of the world's population lives with some form of disability, of whom 2-4% experience significant difficulties in functioning.

In this article, we are going to look at how by adding small habits in your daily code routine can help you make your applications accessible also we will be going to look at Accessibility testing and some tools that you could use or integrate into your application to test if your application is accessible to users.

What is Aria?

When you first heard about the term accessibility you might have heard about aria too or maybe you read it somewhere but you never get a chance to look at what it's. Aria is shorthand for Accessible Rich Internet Applications. It's a set of attributes that can be added to your HTML elements to make the application accessible across the people with disabilities. This helps the screen readers and other assistive technologies to better understand the webpage. An aria is composed of 3 specifications role(It's announced by the screen reader like button, menu, heading,...), state and properties.

Habit #1: Use the suitable native HTML element

Try to use native APIs available in the HTML and not to create an element which is already available. If you really want to then add it's semantics.

For Example:

We always have this habit of creating buttons using div

<div class="button button-primary">
  Click Me!
</div>

Now what's bad in it is divs don't have tabIndex attribute that's why they are not accessible using tab also they don't have a role of a button as well. Instead, create a button using a native HTML.

<button class="primary">
  Click Me!
</button>

In the old days, people used to build a webpage using single table element. Now that was surely a challenge but that doesn't mean a good practice too it's bad for screenreaders because it will readout weird stuff. An example of that will be this. If you inspect the site you will see just one table element inside a body.

Habit #2: No aria is better than bad aria

To understand this concept you need to understand that ARIA, controls the rendering of the non-visual experience. Every HTML element and its attribute has semantics. Using incorrect aria-*- could end up in making the confusing for a screen reader.

For Example:

Let's say we want to show our user some tabs on the webpage. We could do it something like this.

<h1 role="tab">Group 1</h1>

Now here the problem is the tag we used has a default role="heading" and as we have discussed before using suitable and appropriate element is the key. So to fix the above example we can simply do the following.

<div role="tab">
  <h1> Group 1 </h1>
<div>

Habit #3: Keyboard navigation

Not all your users use a mouse for navigation some only use keyboard. HTML should be written in a way that your user will be able to move focus between elements using tab and shift + tab. To achieve this WAI-ARIA has a tabIndex attribute which can be applied to all the HTML elements. Anchors and form control have a by default value.

Note:

tabIndex="-1"
-1 or any negative value means this item is click focusable and not sequentially focusable.
tabIndex="0"
0 or any positive value means this item is sequentially focusable and click focusable. It creates a sequence/ordering so the tabIndex value with higher number comes later.

<div tabindex="1">Tab One</div><br>
<div tabindex="3">Tab Two</div><br>
<div tabindex="2">Tab Three</div>

These were some of the basic code habits you can adopt to make your code accessible across assistive technologies.

Tools

When writing code a developer requires some tools to test the code internally. Some of the tools that are helpful in testing the accessibility of your app are.

Google Chrome Lighthouse It's an open-source, automated tool for improving the quality of web pages.
eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements.
react-axe Accessibility auditing for React.js applications

Testing

Testing your accessible element is important because the project you work on the first time you never know you will be working on it again.
Let’s say we have a login form which has fields email and password and a button to submit the form. We have an active form validation on it before login submission.
As per WAI-ARIA, we need to notify the user in an accessible way whether it's a validation error or result of there form submission is an error.
You can look at the number of ways we can notify a user about the form activity here.
To test the form accessibility we will go with the approach of notifying the user thru an alert message. The Alert component looks like this.

const Alert = ({ message })=>(
  <div class=”alert alert-error”>
    <p role=”alert”>{message}</p>
  </div>
)

So if there's an error we will show the user an Alert component with a message else we don't. So our accessibility tests will be as follows.

it should show no message on focus
it should show a message if any field is blurred without providing the value
it should show a message when provided with wrong credentials

For testing of my components, I use testing-library by Kent C. Dodds. It's one of the best testing libraries available also they promote testing the way a user will interact with your component.
I've created a repo with tests and components.

Fin

So that was it! I'd love to hear your thoughts on this. Please do comment or email me about your takeout on this and if I miss something do let me know.🤝

Making angular app CI/CD proof

Kamran Hamid — Sun, 26 Apr 2020 04:47:39 +0000

I get a chance to work on making an angular app CI/CD proof. I've been thinking of writing an article on it for quite some time but yeah now finally I got the time. I'll share my experience here so that if anyone in future looking for a solution they could look at it to get an idea about it.

Problem

In Angular you can only set the environment of applications before creating build but when dealing with CI/CD you sometimes have to set the environment after the build creation. Because the idea is to use one build for all.

Build once, deploy everywhere

Let's divide the problem and conquer
Issue #1: Injecting/Set the environment into the application.
Issue #2: Retrieve the environment and hold it before running the app.
Issue #2: Which environment to run the application on.

Solution

The problem we have here's that using the current environment system we can't set and update the environment after the build has been created because the angular team didn't designed it that way.
Let's make our application to work our way. We will start at the bottom first.
Imagine what your scripts must look like if you want to create a build and set the environment.
Your package.json should have scripts to build an application and to set the environment in the application. So that makes 2 scripts 1 for the build and 1 for setting the environment. For multiple environments, you will need multiple scripts. Your package.json should look something like this.

{
  "name":"ssr-angular-app",
  "version": "...",
  ...
  "scripts": {
    ....
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "build:client-and-server-bundles": "ng build --prod --env=prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer && ng build --prod --env=prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "production": "set NODE_ENV=production && node dist/server.js",
    "development": "set NODE_ENV=development && node dist/server.js"
  }
  ...
}

build:ssr and build:client-and-server-bundles are ssr build commands which will make the production build every time and scripts like development and production will insert the environment after the build.
After updating the scripts we will move forward and make our application to behave what we tell it to do not what angular tells it to do.

So we came up with this solution to create and read a json file. json has to be in the assets because assets don't get minified/uglified and bundler doesn't have any effect on the assets folder so we can play with it as much as we like. In that file we put the information about the which environment and using the second script we update the json.
Create a appConfig.json file inside src/app/assets/config/ directory with the environment.

{
  "env": "local"
}

Now as we have a config file we need to read it and find the environment according to that.
Angular comes with a solution to the problem to wait before the application loads. It allows us to call functions during app initialization. Add the following function in you app.module.ts

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

Also, add this in your providers array

providers: [
  AppConfigService,
  {
    provide: APP_INITIALIZER,
    useFactory: appInitializerFn,
    multi: true,
    deps: [AppConfigService]
  },
]

We provide the APP_INITIALIZER token in combination with a factory method. The factory function that is called during app initialization must return a function which returns a promise.
Now create a service called app-config. Which will fetch the json file from assets directory.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { setEnv } from '../../config';

@Injectable()
export class AppConfigService {
    private appConfig;
    private readonly CONFIG_URL = '/assets/config/appConfig.json';
    constructor(private http: HttpClient) { }

    loadAppConfig() {
        return this.http.get(this.CONFIG_URL)
            .toPromise()
            .then(data => {
                this.appConfig = data;
                setEnv(data);
            });
    }
}

Now we are all set for a local environment everything will work if we do npm start but that's not what we want we want the application to work on build too. Let's work on that too.
To set the environment after build we will use fs to update the appConfig.json. In the second script, we are setting the environment using NODE_ENV which is accessible in server. (ts|js). We will fetch the env from process.env and update the appConfig.json.
In your server.ts add the following code

...
addEnv(process.env.NODE_ENV);
const environment = setEnv(process.env.NODE_ENV);
...

Now create index.ts and environment files like local.ts, production.ts inside app/config directory it should look something like this.

In index.ts add the following code to set env locally

import LocalEnvironment from './local';
import DevEnvironment from './development';
import ProdEnvironment from './production';

const AppConfigFilePath = 'dist/browser/assets/data/appConfig.json';

export let environment = LocalEnvironment;

export function setEnv(appEnv) {
    appEnv = appEnv.trim();
    switch (appEnv) {
        case 'production':
            environment = ProdEnvironment;
            return ProdEnvironment;
        case 'development':
            environment = DevEnvironment;
            return DevEnvironment;
        default:
            environment = LocalEnvironment;
            return LocalEnvironment;
    }
}

export const addEnv = (appEnv = 'development') => {
    const output = {
        env: appEnv.trim(),
    };
    writeFileSync(AppConfigFilePath, JSON.stringify(output));
};

In local.ts and other environments add your variables.

const LocalEnvironment = {
    production: false,
    googleAnalytics: "UA-XXXXXXXXX-1",
    fbId: 'XXXXXXXXXXXXXXXX'
};
export default LocalEnvironment;

Create other environment files likewise and Voila! 😃 you're done.

Fin

Let's recap what we did

We created an appConfig.json file in our assets because bundler doesn't have any effect on assets.
After that we make our application to wait and load the environment first.
After build when using a command to set the environment we update the appConfig.json

using useEffect effectively

Kamran Hamid — Sun, 08 Mar 2020 14:27:46 +0000

I started exploring react's functional component and really like how it has made the code neat and compressed the component to a few lines. We are going to discuss 3 most used scenarios there must be more where you can make use of useEffect hook. In this article, I'll be comparing useEffect with classical component hooks and explaining the whys and hows. So yeah here's the list of use cases.

component with an api call
component which receives props and you want to listen to the change of props
component which receives props and you want to make a change in the props before the first render.

Before jumping into examples and code lets dissect what useEffect is and how it works. It takes two arguments first is a callback and second is an array for listening.

Component with an API call

So in the classical components, we used to make our api calls or any work we want to do before or after rendering of the component we mostly use hooks like componentWillMount or componentDidMount something like this

class UserList extends Component {
  state = {
    users: undefined,
    loading: true,
  }
  componentDidMount() {
    fetch("https://api.github.com/users")
      .then(res => res.json())
      .then(users => {
        console.log(users)
        this.setState({ users, loading: false })
      }
  }

  render() {
    const { loading, users } = this.props;
    if (loading) return <Loader size="small" />
    return (
      <div className="container">
        {
          users.map((user, index) => <UserCard key={index} data={user} />)
        }
      </div>
    )
  }
}

Now this code in functional component looks something like this

function UserList() {
  const [loading, setLoading] = useState(true)
  const [users, setUsers] = useState(undefined)
  useEffect(() => {
    fetch("https://api.github.com/users")
      .then(res => res.json())
      .then(users => {
        setLoading(false)
        setUsers(users)
      }  
  },[])
  if (loading) return <Loader size="small" />
  return (
    <div className="container">
      {
        users.map((user, index) => <UserCard key={index} data={user} />)
      }
    </div>
  )
}

Notice in this component we have an empty array defined as a second argument to useEffect which means it will runs only one time.

If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model

Component receives props

So in the classical components, if we want to listen to a props change we mostly listen in componentWillReceiveProps hook and then change the structure of data or if we want to just set it in a state we do that all in there something like this.

class UserList extends Component {
  state = {
    users: undefined,
    loading: true,
  }
  componentWillReceiveProps({ users }) {
    this.setState({ users, loading: false })
  }

  render() {
    const { loading, users } = this.props;
    if (loading) return <Loader size="small" />
    return (
      <div className="container">
        {
          users.map((user, index) => <UserCard key={index} data={user} />)
        }
      </div>
    )
  }
}

Now this code in a functional component will look something like this

function UserList({ apiUsers }) {
  const [loading, setLoading] = useState(true)
  const [users, setUsers] = useState(undefined)
  useEffect(() => {
    setUsers(apiUsers)
    setLoading(false)
  }, [apiUsers])
  if (loading) return <Loader size="small" />
  return (
    <div className="container">
      {
        users.map((user, index) => <UserCard key={index} data={user} />)
      }
    </div>
  )
}

Here we are listening to the change in apiUsers prop so every time there's a change in it useEffect with its callback gets called

Component receives props(first render)

So we sometimes have to deal with a component where we don't want it to listen to any prop but just render the component with whatever props in first go. It looks something like this.

class UserList extends Component {
  state = {
    users: undefined,
    loading: true,
  }
  componentDidMount() {
    const {users} = this.props;
    this.setState({users, loading: false})
  }

  render() {
    const { loading, users } = this.props;
    if (loading) return <Loader size="small" />
    return (
      <div className="container">
        {
          users.map((user, index) => <UserCard key={index} data={user} />)
        }
      </div>
    )
  }
}

Now this code in a functional component will look something like this

function UserList({ apiUsers }) {
  const [loading, setLoading] = useState(true)
  const [users, setUsers] = useState(undefined)
  useEffect(() => {
    setUsers(apiUsers)
    setLoading(false)
  }, [])
  if (loading) return <Loader size="small" />
  return (
    <div className="container">
      {
        users.map((user, index) => <UserCard key={index} data={user} />)
      }
    </div>
  )
}

Notice in this component we have an empty array defined as a second arguement to useEffect which means it will work as componentDidMount and runs only one time after.

Fin

So that was it! I'd love to hear your thoughts on this. Please do comment or email me about your takeout on this and if I miss something do let me know.🤝

Modern and Legacy API Architectures

Kamran Hamid — Tue, 30 Jul 2019 17:46:44 +0000

Let's talk about how we have been architecting our APIs and how far we have come forward. There have been only SOAP and ReST architectures leading the industry. Now after all these years we have gRPC, graphQL and more to choose from.

More power comes with more responsibility

There are advantages and disadvantages of using new architectures. So you need to figure it out yourself about which one fits your project requirements.

SOAP:
SOAP is known as the Simple Object Access Protocol. In other words, SOAP is a protocol that defines how internet services communicate with one another or interact with apps that invoke them. SOAP is an XML-based protocol for accessing web services over HTTP. It has been designed to operate with XML over HTTP and has some kind of specification that can be used for every application. Web applications designed in Java and .net uses SOAP architecture.

ReST:
Also known as ReSTful web service. It provides some excellent features, including stateless servers and access to resources.

As per the REST (REpresentational “State” Transfer) architecture, the server does not store any state about the client session on the server-side. This restriction is called Statelessness.

In addition, it comes with different types of methods that you send a request to the server like get, post, delete, put. These methods are used to perform actions like Create, Retrieve, Update, Delete. Furthermore, RESTful allows numerous formats of data, while SOAP allows the only XML.

GraphQL:
It's is developed by Facebook and released publicly in 2015. It's strongly typed query language to define both the requests and the responses, giving application more control over what data it needs from an API. It has been designed to meet the need for greater flexibility and efficiency. Many large businesses like Spotify, Facebook, GitHub, NYTimes, Netflix, Walmart are using it.

ReST vs GraphQL
Let's say I have a list of products with some Information of product on each Index and we want to show this list on mobile and web with both having completely different UIs and we don't want to get extra data from API. With ReST, It's not possible using single API we need to create another API for either web or mobile

but dealing with this type of scenario can easily be handled using graphQL.

GRPC:
GRPC is a recursive acronym which means, gRPC Remote Procedure Call. RPC is a protocol that can be used by a program to request a service from a program on a different computer without the need to understand the details of the network. GRPC is a Google-based RPC platform that was announced and open source at the end of February 2015. The framework is based on a client-server model of remote procedure calls.
The RPC functionality is that a sender or client creates a request for a remote server that translates and sends RPC in the form of a procedure, function or procedure call. If the distant server gets the request, the application returns its reply to the customer and proceeds with it.

Conclusion
Finally, we wish to conclude that there is no general solution for selecting protocols for architecting our APIs. Each application is unique and you should make your decision on the best for your project. In addition, to achieve the optimum results, you can combine architecture.