Categories
Javascript Learning Tech

How to add Buy me coffee script dynamically into React application or Javascript

Stumble upon in the search of adding Buy me coffee script into react application land to the following wonderful hook solution to add script to react on stack overflow here

I will also add up here the update code of stack overflow which helped in the solution (for incase above shared link will be changed in future, and all the code credit is to the author of stack overflow user)

Update:
Now that we have hooks, a better approach might be to use useEffect like so:

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);
Which makes it a great candidate for a custom hook (eg: hooks/useScript.js):

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;
Which can be used like so:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // rest of your component
}

Solution, I have added on top a ‘config’ param to the useScript function for easy BMC Buy me coffee widget attributes to get added to script object dynamically:

const useScript = (url, config = null) => {

  useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script.async = true;

    if (config && Object.keys(config).length) {
      for (let key in config) {
        script.setAttribute(key, config[key]);
      }
    }

    // console.log(script);
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

Boom!

Categories
Javascript Learning Tech

How to play with Graphql playground for Mutation’s?

Okay, well I was also looking for solution to this and here it is:

Mutation example of adding employee using Graphql Playground, most important step after you have added the code below to playground tab window:

# Write your query or mutation here
mutation AddEmployee(
  $name: String!,
  $phoneNumber: String!,
  $email: String! ,
  $designation: String,
  $image: String) {
    addEmployee(employee: 
      { name: $name, phoneNumber:$phoneNumber, email: $email, designation: $designation, image:$image },
    ) 
      {
        emp_id
        name
      }
    
}

You need to add your JSON payload to QUERY VARIABLES tab window (which is closed by default on below main playground window, without this input payload you will not see results, but error. (keep an eye on here while you make mutation test in graphql playground)

grapql-mutation-example-with-query-variable-input-parameters

Thanks for visiting!

Categories
Blog Tech

angular ng serve command throws error: An unhandled exception occurred: Project does not exist

If you facing with such problem, you may refer to following link for the solution. I have posted this question here on StackOverlow Hope it helps someone. Thanks.

Categories
Blog Tech

Fix PUTTY keyboard-interactive authentication password message prompt or access denied error or alternative to connect to SSH with PUTTY

If you are struggling to connect to your server from windows using PUTTY software try this from installation folder path of PUTTY in the command line:

In terminal cd to your putty installation path, for example:

C:\Program Files\PuTTY

in command line type in below with corresponding user information of yours.

putty.exe -l yourserverusername -pw yourserverpwd yourdomain.com

this will let you pass with keyboard-interactive authentication password message and you are good to go!

Categories
Blog Tech

Binding JSON data dynamically from ajax/promise/observable request to pug template

I was struggling to loop over ajax response to pug, with a lot of scratching head on google and Github, got a clue to use ES6 template to create cart list items from response data and append its HTML back to section container of HTML, here is sample code below.

I have also tried out achieved the same via pug mixin (commented code below, not successful) but not sure how to pass JS object variable to mixin as it’s not accepting response data as an object parameter.

Found similar doing here https://codepen.io/anon/pen/GeQKxp
it has pass individual object literal to the mixin, but if we pass the object variable created in JS and pass to the mixin, it doesn’t work, not sure how to turn around with it!

Hope this example code give you a hint.

I am not a professional writer of content, therefore treat this as general information for help on the similar issue anyone face with pug and json data.

//- cart.pug template

block append headScript
    script(src='./../js/scripts.js')
    script.
        myApp.fetchCartItems().subscribe(
            data => {
                if ('productsInCart' in data){
                    const cartItemsData = data.productsInCart;
                    const cartItemsTemplate = cartItemsData.map(item => {
                        function getColors(colors) {
                            return colors.length ? colors.map( color => `<span>${color.name}</span>`) : 'standard color'
                        }
                        function getSizes(sizes) {
                            return sizes.length ? sizes.map( size => `<span>${size.code}</span>`).join(' ').toUpperCase() : 'standard size'
                        }
                        return `<div class="row cart-item-row">
                                <div class="col-md-6">
                                    <img src="../images/T${item.p_id}.jpg" class="cart-thumb" />
                                    <div class="cart-item-detail">
                                        <h3>${item.p_name}</h3>
                                        <label>Style #: ${item.p_style}</label>
                                        <label>Colour: ${getColors(item.p_available_options.colors)}</label>
                                    </div>
                                    <div class="cart-actions">
                                        <a href="javascript:void(0)" class="jsEdit">Edit</a>
                                        <a href="javascript:void(0)">X Remove</a>
                                        <a href="javascript:void(0)">Save for Later</a>
                                    </div>
                                </div>
                                <div class="col-md-2 text-center">${getSizes(item.p_available_options.sizes)}</div>
                                <div class="col-md-2 text-center">
                                    <input type="text" name="txtQty${item.p_quantity}" id="txtQty${item.p_quantity}" value="${item.p_quantity}" class="form-control qty-input" />
                                </div>
                                <div class="col-md-2 text-right price-text"><sup>$</sup>${item.p_price}</div>
                            </div>
                            `
                    });

                    document.getElementById('cartItemContainer').innerHTML = cartItemsTemplate;
                }
            },
            err => {
                console.error('Subscribe Error', err);
            },
            () => {
                console.info('Subscribe complete');
            }
        );

section(class='cart-content' id='cartItemContainer' data-json= cartItems) cartItemContainer

//- mixin cartItemsMixin(cartItems)
//-     div(id='cartItemContainer' data-json= cartItems) cartItemContainer
//-     //- div= #{JSON.stringify(cartItems)}
//-     div(data-json= cartItems)
//-     section.cart-content
//-         .row.cart-item-row
//-             .col-md-6
//-                 img.cart-thumb(src='../images/T1.jpg')
//-                 .cart-item-detail
//-                     h3 Solid green cotton tshirt
//-                     label Style #: MS13KT1906
//-                     label Colour: Blue
//-                 .cart-actions
//-                     a.jsEdit(href='javascript:void(0)') Edit
//-                     a(href='javascript:void(0)') X Remove
//-                     a(href='javascript:void(0)') Save for later
//-             .col-md-2.text-center S
//-             .col-md-2.text-center
//-                 input.form-control.qty-input(type='text', name='txtQty1', id='txtQty1', value='1')
//-             .col-md-2.text-right.price-text
//-                 sup $ 
//-                 | 11.00
//- +cartItemsMixin(cartItemsData)
Categories
Blog Tech

how to solve basic development issues and steps to getup application working

These are the random solution to the issues, faced while developing the application in front-end and these are just the hand tools to fix issues and refer anytime in need. Hope it helps you in your search for solutions. Will keep updating with more and were need of improvement required to this page.


ANGULAR – To use on CLI


//to run server with proxy file optionally can be set under angular.json > server > options >
ng serve –proxy-config proxy.config.json

//if need to add port optionally
ng serve –proxy-config proxy.config.json –port 9999


EXPRESS – To use on CLI


express –view=pug spar-api

create : spar-api\
create : spar-api\public\
create : spar-api\public\javascripts\
.
.

change directory:
> cd spar-api

install dependencies:
> npm install

run the app:
> SET DEBUG=spar-api:* & npm start

On Windows use this command
set DEBUG=myapp:* & npm start

On Mac or linux
DEBUG=myapp:* npm start


TO CREATE SECRECT KEY


Window terminal side of code:

node -e “console.log(require(‘crypto’).randomBytes(256).toString(‘base64’)); #not working with jwt token signing trying other way below:

Source: https://gist.github.com/Holger-Will/3edeea6855f1d69a5368871bce5ea926

(tried on windows 7, working find with angular-jwt app)

generate private key

openssl genrsa -out private.pem 2048

extatract public key from it

openssl rsa -in private.pem -pubout > public.pem


Express side of code:

//Normalizing the path for windows environment
var normalPKPath = path.normalize( __dirname + ‘/private.key’);

const RSA_PRIVATE_KEY = fs.readFileSync(normalPKPath, ‘utf8’);



FIREBASE SETUP FOR ANGULAR CLI PROJECT


Create project in firebase console web page; https://console.firebase.google.com/

install firebase tool

npm install -g firebase-tool

firebase login

Google will try to login with your google account

(prior to init everytime, you have to make angular prod build ready and do firebase init each time for new deployment to firebase server)

firebase init

couple of questions will be asked after init command, type of deployment for web choose Hosting by presseing space bar key after selecting the option in list.
next publish folder path to be, in angular cli its dist folder for production build, type dist and hit enter
next it will ask you is your app is singple page app or not? type yes and hit enter
next it will ask do you want to replace existing index.html with firebase choose now? because our prod build as created file under dist folder.
next will create necessary files in your app directoy related to firebase/

make sure you update enviorments.prod.ts with firebase configuration detail, which you will get object from firebase console Create app for web page by clicking on it,

under project overview page.

next finially execute

firebase deploy

optionally you may use firebase deploy –proiect

if everything fine you will see app running under firebase server


ZEIT NOW – ISSUE SOLUTION


Build failing for typescript file: giving error Error: Cannot find module ‘typescript’

Fix to use @now/node@0.4.28-canary.6: in now.json file to make a build :
solution source: Github Issue https://github.com/zeit/now-builders/issues/181

Example: { “src”: “./src/app/server/*.ts”, “use”: “@now/node@0.4.28-canary.6”}

Categories
Blog Tech

Random Solution to development issues and steps to getup application working

These are the random solution to the issues I have faced while developing the application in front-end and these are my hand tools to fix issues and refer anytime in need. Hope it helps you in your search for solutions. Will keep updating with more and were need of improvement required to this page.

https://gist.github.com/jsbimra/aa63475592b9909a0c7b877ffb7d9667