Month: February 2020

cURLing basics ;)

cURL is a command line tool that allows you to get or send data with URLs. You can read all about it at its official site https://curl.haxx.se/

Here are some basic ways to use the cURL command –

(1) Check the connection

You can check whether you’re able to connect to a given URL by simply typing in curl followed by the url. For example: curl google.com.

If for some reason you can’t connect, it’ll return a few errors and you can use those to troubleshoot the issue further.

(2) Save the content

You could save the website content to a file by typing in curl https://your-site.com > your-site.html.

(3) See the headers

This is the cool part. You could see request/reponse headers for a given URL by typing in curl -v your-site.com. For example curl -v google.com returns the following results to me:

Pretty cool, right? I’ll keep this post short with those 3 points. To learn more about the cURL command please checkout the official site linked above 🙂

Configure PHPCS In Sublime Text

PHP code sniffer scripts can be found here. As explained on that page, there are two scripts – one that detects issues or violations of a defined coding standard and other that fixes those violations.

You can configure your code editor to use these scripts. In this post I’ll explain how to do this for Sublime Text.

The first step is to of course download those scripts.

Next install PHP Code Sniffer package in Sublime Text by Package Control. If you don’t have this, it can be installed by pressing CMD+SHIFT+P > searching Install Package Control.

Once installed, you can press CMD+SHIFT+P once again and search for Package Control: Install Package. Hit enter, search for phpcs and install it.

Finally add your settings to PHP Code Sniffer by going to Sublime Text > Preferences > Package Settings > PHP Code Sniffer > Settings - User.

What settings to add here? You can check the options available to you by opening Settings - Default.

Since you want Sublime to be able to use the scripts you downloaded before, just go ahead and add their paths as follows –

I’m not quite sure what the -n stands for but note that I’ve added the --standard as WordPress by following the WordPress Coding Standard.

Now each time I save my file, it’ll autodetect issues with it (keeping WP standard in mind).

Useful Git Stuff

This is one of my old posts from a blog that’s not active anymore. The content is still pretty good so I’ll reshare it here on this blog 🙂

Forking – If you’d like to contribute to a Github project, the very first thing to do is fork the project.

Cloning – Then create a folder on your computer, let’s call it “sandbox”. Use the terminal to cd into it. And then clone the forked repo using git clone repo_address. This will get the project on your computer.

Branching – Next create branches where you can make changes to the code. For example, I created a branch called fix/error_msg to fix or edit the existing error message in Jetpack.

You can create a branch with git branch branch_name and then git checkout branch_name to switch to that branch OR you can create and switch in one single command git checkout -b branch_name. You can see all the branches on the computer using git branch and status using git status.

Changes – You can make changes to the files now but if you need to discard any of those changes just type in git checkout . and you’ll be okay.

Commit – Once you’re ready to commit. Add all the changed files using git add . and then make a commit using git commit -m 'commit_description' where commit description can be “wrapped text in esc_url function” or something like that. Just describe what is this commit about.

Push – Once committed, next step is to push these changes to the forked repo. You do that by typing git push origin branch_name. In my example branch, this would mean git push origin fix/error_msg.

Pull Request – Go to your forked repo and you’ll see an option to create a Pull Request. You should explain what this PR will do and submit it.

Review – If the reviewers ask you to make changes, make changes on your branch, add/stage the files, make a commit, push the changes and it’ll automatically add another commit under your existing PR.

Merge – If your code looks good, the reviewers or code maintainers will merge it to master and it’ll be added to the next release. (btw you can party at this point, you did something incredibly awesome!).

Other useful commands

Deleting Branches. The first one deletes remote branch, the other deletes a local branch.

$ git push --delete <remote_name> <branch_name>
$ git branch -d <branch_name>

Adding a new remote. Here’s me adding a remote called upstream that links to Jetpack’s original repo.

$ git remote add upstream git@github.com:Automattic/jetpack.git

If it’s been a while since you created that fork, you’ll want to make sure you’re using your project’s latest version. Use the fetch and merge commands to apply the latest project changes to your local repository, without losing any of your local changes.

$ git fetch upstream
$ git checkout master
$ git merge upstream/master

Bonus tip: If your current branch becomes stale and master branch moves on with new code, you may need to rebase your pull request.

Focus

Past few years I’ve been focusing on several different things at once, making little to no progress in each of those (like Coding, Illustration, YouTube videos, etc). I keep telling myself things would be better but nothing changes!

This year, in the last two months (Jan and Feb), I have narrowed down my focus to a few things: my full time job, exercise, reading books, blogging and a couple of other good habits.

I have also cut down a few things in life like travel, nightouts, visits to Starbucks, unnecessary expenses, social media, movies, etc.

That has been going well but I haven’t had a chance to fully focus and chase the one thing that I’d like to be – i.e A Web Developer.

So what am I gonna do about it? I’ll focus! I’ll make that my number one priority and I’ll work on it. It may mean less blog posts in the future and more code contributions (or cool little projects).

I’m not sure how that will go but I’ll put in the hours and see where that takes me. The journey starts now!

JS Modify InnerHTML

Let’s build on top of the previous post and print things “on the screen” instead of logging them in the browser’s console.

This can be done by modifying the HTML code of the page using something called the innerHTML function in JS.

<button id="myBtn"> Load some data! </button>
<div id="hidden-div"></div>
<script type="text/javascript">
    var myBtn = document.querySelector('#myBtn');
    var myDiv = document.querySelector('#hidden-div');
    myBtn.addEventListener('click', displayData);
 
    function displayData() {
        myDiv.innerHTML = 'Hello';
    }
</script>

The code above is copied from the previous post with two extra lines (2nd and 5th) and one small change on line 9.

Second line adds a division with id hidden-div, 5th line adds a selector for that new division and 9th line modifies the innerHTML of that division by printing Hello inside it (whenever the displayData function is triggered).

The end result – whenever someone hits the button Load some data! it returns Hello on the web page.

JS Basics – querySelector And addEventListener

Today I’ll cover two basic concepts in JS – QuerySelector and AddEventListener. This is probably something that you’ll use most of the time (if you’re coding in JS or reading a JS code).

Ok let’s start with a simple HTML button having the id myBtn –

<button id="myBtn"> Load some data! </button>

Next let’s add the following script under it –

<script type="text/javascript">
 	var myBtn = document.querySelector('#myBtn');
 	myBtn.addEventListener('click', displayData);

 	function displayData() {
		console.log('Hello');
 	}
</script>

This code selects the HTML element and stores it in the variable myBtn. It adds an Event Listener which listens for click and runs the displayData function once triggered.

The function displayData logs Hello in the browser’s console (which can be accessed by OPT+CMD+J).

That’s the basics of JS. In the next post, we’ll have a look at the setTimeout function where we’ll do something exciting and interesting 🙂

Git Rebase

Today I learned about Git Rebase while making a code contribution (commit) to the Jetpack project on Github.

I had some issues setting up the Jetpack dev environment. The yarn build command wasn’t working as expected.

I tried fixing this by installing command line tools and XCode on Mac but that didn’t help. Digging things further, I realised yarn build worked fine on the master branch but was returning errors on the custom branch (the branch that I was currently working on).

To fix this, I thought it’d be nice if there was a way to reset my custom branch to the master branch and re-apply all the changes I had done so far. This would give me a branch that’s updated with the master branch along with the changes I had done so far on the custom branch.

Turns out, this can be achieved by running git rebase master command. I learned this from this StackOverflow post, which says:

git rebase master does what you’re asking for — takes the changes on the current branch (since its divergence from master) and replays them on top of master, then sets the head of the current branch to be the head of that new history. It doesn’t replay the changes from master on top of the current branch.

That fixed the issue. The command yarn rebuild worked just fine after I rebased my current branch with master 🙂

Record Key Strokes Using JQuery

This is a simple post explaining how you could record key presses using JQuery and log those to the browser’s console.

The first step is to import JQuery as follows:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

The second step is to see how we could output something when a key is pressed on the keyboard.

<script type="text/javascript">
	$(document).on( "keyup", sayHello);
	function sayHello() {
		console.log('Hello! You pressed a key!');
	}
</script>

The above code adds an event listener to the document that listens for the event called keyup and then triggers the function called sayHello.

That function outputs some message in the browser’s console (which can be accessed by OPT+CMD+J).

This code can be modified to get specific key codes as follows:

<script type="text/javascript">
	$(document).on( "keyup", sayHello);
	function sayHello(e) {
		console.log(e.keyCode);
	}
</script>

Now if you press a key, the browser logs the keycode of that particular key. For example, hitting the enter key will output 13 in the browser’s console. Hitting A key will output 65 and so on. You get the idea!

JQuery Event Listener

In this post let’s look at how we can create an Event Listener using JQuery.

JQuery is a JavaScript Library and Event Listener is something that listens to an event or action to trigger a response.

First we’ll need to import JQuery as follows:

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

Next we’ll add a button with an id called awesome-button:

<button id="awesome-button">My Awesome Button</button>

Finally we’ll add some JQuery:

<script type="text/javascript">
	myBtn = $("#awesome-button");
	myBtn.on("click", sayHello);

	function sayHello() {
		console.log('You\'re awesome');
	}
</script>

What this does is, selects the html element with #awesome-button ID and ties it to myBtn variable. Next, we add an event listener to that variable using the on function which gets triggered on click event and runs the sayHello function.

That function, when it runs, logs You're awesome message in the browser’s console as follows:

Note: The browser’s console can be accessed by CMD+OPT+J shortcut.