Author: Pramod Jodhani

Categories
Uncategorized

How to pass a JSON string in Command line with PHP

If you try to pass a JSON string as a command line argument in the Terminal like this:

Plain Text

It is expected to that $argv[1] will contain the JSON string. But unfortunately, it gets chunked. This is what you get when you do a print_r :

Plain Text
process.php

This is not desired. We want the whole JSON string in one index, but the terminal breaks it into multiple chunks. To fix this problem we need to use proper escaping. This is what we do:

  1. Wrap the JSON in double quotes (“”)
  2. Add escape character (\) before double quotes present inside the JSON. You can do this with addslashes()

The JSON will now look like this

Plain Text

This should work as expected:

Plain Text

Categories
Uncategorized

How to build a Gutenberg Block with HTM

I love HTM for it’s simplicity. HTM allows you to write JSX like syntax but without Webpack, and other complexities. The great thing about HTM is that it’s just 700 bytes. That’s right. When you setup a Webpack environment it’s very easy to reach 200MB+.

Webpack might be good for complex applications but I wouldn’t want so much of configurations for a simple WordPress add-on that I can complete in an evening.

Installation

Get the HTM code from here:

https://unpkg.com/htm@2.0.0/preact/standalone.mjs

It is very important to let HTM know which function to use to create the elements. While developing Gutenberg block we use `wp.element.createElement` function. 

const html = htm.bind( wp.element.createElement );

Then you can easily write JSX like code:

return html`
	<div >
		<${Fragment}>
			<${BlockControls}>
				<${SelectControl} class="gch_lang_selector" value=${language} onChange=${editLanguage} label='' options=${available_languages}  />
				<${SelectControl} class="gch_style_selector" value=${style} onChange=${editStyle} label='' options=${HIGHLIGHTJS_STYLES}  />
				
            <//>
		<textarea class='${props.className} gch_ta' onChange=${editTA}>${code}</textarea>
        <//>

	</div>`;

The HTM syntax

Unlike JSX, HTM makes use of Javascript template literals. a In JSX you don’t need to wrap your code in a string. You can write it like this:

return(<div>
<h1>The heading</h1>
</div>
)

It’s a bit different with HTM

return(html`<div>
<h1>The heading</h1>
</div>`
)

How HTM is different from JSX

JSXHTM
<div></div>html`<div></div>`
<Footer>Footer Content</Footer>html`<${Footer}>Footer Content<//>`
<div className=’myCLass’>html`<div class=’myCLass’>

Catch to avoid

There are a few things you should absolutely know:

1, Although HTM code looks similar to JSX and HTML, it’s neither of them. Mind those differences.

2, When you start a custom tag, end it with Component end-tag. Not doing so caused syntax error in my case. Which took me some time to figure out. Example:

<${Footer}>footer content<//>

Syntax Highlighting

When I started writing code using HTM one thing that made me uncomfortable was that there was no Syntax highlighting inside the template literals. The code looked banal

The code without highlight

I couldn’t write code like this and you can’t also. The good news is that you have

  1. Lit-html extension for VS Code
  2. vim-jsx-pretty plugin for Vim
  3. For sublime you can try this trick.

Next..

I’d recommend you to read the HTM readme document here. You can also check out the source code my WordPress plugin for inspiration.

Categories
Uncategorized

How to create a Facebook APP ID and Secret key

This article will show you how to create a Facebook App Id, Secret key and Access API information for integrating Facebook into your app or website.

Step 1:- Login to Facebook developer’s website with your Facebook credentials. Then Create an application by clicking on My Apps >Add New App

Step 2:- Enter a Display Name and Contact Email for your App (I recommend you to enter the name of your blog/website). Then click on Create App ID button.

Step 3:- Click on App platform button on the App dashboard.

Step 4:- Now, you to have verify reCAPTCHA, after verifying click on Submit button.


Step 5:- Now, you will redirected to dashboard where you can add product for integrations or you can get Access App ID and Secret key by clicking on Settings->basic.


Step 6: Choose Web as a platform for your app.


Step 7: Enter your site url and click save. Then, go to settings under Facebook Login Section.


Step 8:- Now you will get API information (APP ID and Secret Key) as shown in below image. But you need to give your Privacy Policy page URL to make it work.


step 9: Now copy the url that we’ve shared with you through our plugin’s settings page.

step 10: Now paste that url in “Valid OAuth Redirect URIs & Share Redirect Whitelist” section and save changes.


Here is the video also :

Categories
Uncategorized

Why I use Enfold theme in all my WordPress projects

I was pretty aware regarding the fact that in order to get a fully functioning and a professional looking website, I need to pay some bucks for a WordPress theme rather than going for a free alternative. I got to know about the Enfold WordPress theme and tried my hands on it. It was about an year ago and since then I haven’t even thought of using any other theme for any of the project I undertake.

 

Enfold is certainly amongst the most powerful and renowned multipurpose wordpress themes out there. With this impressive platform, you can conveniently design custom page layouts as it offers wide ranging set of elements for combinations. It is entirely responsive, SEO friendly, retina ready and the best part is that it is compatible with most of the popular plugins out there. Enfold been downloaded 150,000 times on ThemeForest and it is a no surprise that this amazingly purposeful theme has become one of the best sellers.

 

Here are some of the websites I have designed using Enfold WordPress theme:

 

As you can probably notice that all these websites offer an aesthetic look and their loading time is also pretty good. There are a number of good things about Enfold that it gets quite grinding to pick out the specific ones. Though in general, I have summed up the major perks of using Enfold in all your WordPress projects.

 

Pros:

 

Enfold’s page builder works like magic: Although Visual Composer is an extremely popular Page builder plugin accessible nowadays, but in my personal opinion Visual Composer is not that worth. It is slow and bulky.  While on the other hand, Enfold’s page builder is quick and is extremely easy to use.

 

Enfold is feature rich, not bloated: Enfold has a plethora of features that you would need in your website. Yet, they are all lightweight. You need not install plugins for sliders, testimonials, FAQs, Instagram slider and so many other things.

 

One click demo install: Enfold is extremely convenient to set up. Once you have installed it, you just have to press the button and you get the demo in just two minutes.

 

Support for other popular WordPress plugins: Been tested comprehensively, Enfold integrates well with Woocommerce, BuddyPress, GravityForms, CF7, Events Calendar and others. Hence, you need not fret about its compatibility with different plugins and browsers.

Heavily Customizable: Enfold’s backend has so many features that for some of my projects I didn’t even need to create an FTP account. I could do almost all the work on the backend.

 

Most importantly, all the elements look beautiful and you get unlimited options to create a customized website, all that you need!

 

Cons:

 

A lesser number of Demos: When compared to other major themes like Bridge or Divi, Enfold has lesser number of Demos. I wish there were more demos.

 

Lesser Page Transition Effects: I just adore the current page transition effect they have, it would be nice if they add some more.

 

Ability to build add-ons for the page builder: Third-party developers cannot create add-ons for Enfold’s Avia builder. If I had this option I would be able to build custom Page builder elements/widgets for my clients. 

More widgets to create a magazine site: Enfold is a multipurpose theme. Still, I would not really build a magazine theme using this platform. There is lack of widgets that significantly assist in building a magazine style site.

 

Basically, these are not cons but I can say they are the part of my wishlist. It wouldn’t get any better if Kriesi.at, the company behind Enfold, would work on these minor things. Apart from this,  Enfold is the best theme I have ever used and I will continue to use this outstanding theme for all my website building projects.

To wrap things up, I can say that whether to use Enfold or not for your projects is ultimately your decision at the end. Yet, after I have personally tested it out I can certainly say that it is the best thing to use. It is all-in-all powerful, robust and convenient to work with.

In my viewpoint, there is an undeniable fact about Enfold and that is you can proficiently develop an enchanting website in a shorter time frame. Is’nt it, it should be all about?

 

Categories
Code Woocommerce

Use customer’s phone number as username in Woocommerce

I didn’t want my customers to remember a separate username so I thought why not automatically use their phone numbers as their username. They won’t have to remember their usernames this way.

If the registration form was built with GravityForms or custom form it was easy to map phone number as username but in the case of Woocommerce, we don’t have this control.

So I start digging the Woocommerce’s code and saw this filter of my interest `woocommerce_new_customer_data`. I started fiddling with it and came up with this code:

 
add_filter("woocommerce_new_customer_data" , "use_phone_as_username" , 10 ,1);

function use_phone_as_username($data ) {
	
	if(isset($_POST["billing_phone"])) {

		if(!username_exists($_POST["billing_phone"])) {

			$data["user_login"] = $_POST["billing_phone"];

		}
	}

	return $data;
}

You just need to copy this code to your functions.php and you should be good to go.