Kenny Almendral

Loading JavaScript using async and defer

2020-03-14T00:00:00+00:00

Inline scripts and links to external JavaScript files are commonly placed before the closing tag so that they will be loaded and executed only after the HTML is parsed.

For the links to external JavaScript files, however, the defer and async attributes can be added. If either attribute is added to the opening

The script tag with the async attribute will take precedence on modern browsers while older browsers will fall back to defer.

Configure HeidiSQL to Access Remote Database via SSH Tunnel

2019-07-17T00:00:00+00:00

Here’s a quick guide on how to access a remote database in HeidiSQL using SSH Tunnel, which is a mechanism in SSH for tunneling application ports from the client machine to the server machine and vice versa.

Suppose HeidiSQL is already running, click on an existing session or create a new one by clicking the New button.

Basic Settings

Under the Settings tab, do the following:

Set the Network type to MariaDB or MySQL (SSH tunnel)
Set the Hostname / IP to 127.0.0.1
Set the Port to 3306
Enter the database username and password credentials.
Select the remote database that you want to access. Leave it empty if you want to access all the databases on the remote server.

SSH Tunnel Settings

Before continuing, make sure that you already have a .ssh folder in your home directory. If you don’t, open your terminal or command line and run the following command:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

That command will create a .ssh folder in your home directory and inside it, a new public/private SSH key pair will be created as well using the provided email address as a label.

When you’re prompted to “Enter a file in which to save the key”, just press ENTER to accept the default location which is your home directory. Afterwards, you’ll be prompted to set a passphrase which is optional. Just hit ENTER if you don’t want to set a passphrase.

Under the SSH tunnel tab, do the following:

Set the plink.exe location to the path of the plink.exe executable file. You can download it here if you don’t have the file yet. It can be found under the Alternative binary files section.
Set the SSH host + port to 192.168.123.0 as the host and 22 as the port. The 192.168.123.0 host IP address is just a placeholder, replace it with an actual one.
Set the Local port to 3307
Enter the database username and password credentials.
Increase or decrease the plink.exe timeout value or just leave the default value.
Set the Private key file to the path of the id_rsa.ppk file. If you currently don’t have one, download puttygen.exe here in order to generate one. The executable file can be found under the Alternative binary files section.

Run puttygen.exe and click the Conversions menu item and then click Import key and then select the id_rsa private key file. Afterwards, make sure that the Type of key to generate is set to RSA and also, you can enter a Key passphrase if you want. Click the Generate button when you’re done.

Don’t forget to click the Save button before you click Open, otherwise, you’ll be repeating the process once you close and run HeidiSQL again.

PHP Standards Recommendation Reference

2019-06-19T00:00:00+00:00

The PHP Standards Recommendation, also known as “PSR”, is about how you should write your PHP code so that it’ll be easily readable and usable by others. It covers coding style, file organization, autoloading and standardizes various interfaces.

PSR-1: Basic Coding Standard

Files must only use and tags.


  File must only use UTF-8 without BOM for PHP code.
  Files should either declare symbols or cause side-effects but should not do both.
  Namespaces and classes must follow an “autoloading” PSR (PSR-0, PSR-4).
  Class names must be declared in StudlyCaps.
  Class constants must be declared in all uppercase with underscore separators.
  Method names must be declared in camelCase.



PSR-2: Coding Style Guide


  Code must follow a “coding style guide” PSR (PSR-1).
  Code must use 4 spaces for indentation, not tabs.
  There must not be a hard limit on line length; the soft limit must be 120 characters; lines should be 80 characters or less.
  There must be one blank line after the namespace declaration, and there must be one blank line after the block of use declarations.
  Opening braces for classes must go on the next line, and closing braces must go on the next line after the body.
  Opening braces for methods must go on the next line, and closing braces must go on the next line after the body.
  Visibility must be declared on all properties and methods; abstract and final must be declared before the visibility; static must be declared after the visibility.
  Control structure keywords must have one space after them; method and function calls must not.
  Opening braces for control structures must go on the same line, and closing braces must go on the next line after the body.
  Opening parentheses for control structures must not have a space after them, and closing parentheses for control structures must not have a space before.


PSR-3: Logger Interface

The main goal is to allow libraries to receive a Psr\Log\LoggerInterface object and write logs to it in a simple and universal way. Frameworks and CMSs that you have custom needs may extend the interface for their own purpose, but should remain compatible with this reference. This ensures that the third-party libraries an application uses can write to the centralized application logs.

PSR-4: Autoloader

This PSR describes a specification for autoloading classes from file paths. It is fully interoperable, and can be used in addition to any other autoloading specification, including PSR-0 and also describes where to place files that will be autoloaded according to the specification.

PSR-6: Caching Interface

Cache-aware libraries that can be integrated into existing frameworks and systems without the need for custom development.

PSR-7: HTTP Message Interfaces

The first line of a request is the “request line” and contains the following (in order):


  The HTTP request method
  The request target (usually either an absolute URI or a path on the web server)
  The HTTP protocol version


Followed by one or more HTTP headers, an empty line and the message body.

PSR-11: Container Interface

Standardize how frameworks and libraries make use of a container to obtain objects and parameters.

PSR-13: Link Definition Interfaces

Serialize a response with hypermedia links into one or more wire formats independent of the process of deciding what those links should be.

PSR-16: Common Interface for Caching Libraries

Libraries can drop their own caching implementations and easily rely on the one given to them by the framework or another dedicated cache library. It is independent of PSR-6 but has been designed to make compatibility with PSR-6 as straightforward as possible.



Fix Multiple Chart Issue in Chart.js
2019-06-10T00:00:00+00:00
This multiple chart issue usually happens when you hover the mouse to a coordinate that already contains existing data that was just replaced by another data returned from an asynchronous request.

The Workaround

Suppose you have an instance of a pie chart for example:

new Chart(context).Pie(data);


Assign that instance to a variable and specify that variable as a property of the window object like so:

window.pieChart = new Chart(context).Pie(data);


Afterwards, add an if condition before it that checks if window.pieChart already exists and if so, remove it like so:

if (window.pieChart !== undefined) {
  window.pieChart.destroy();
}

window.pieChart = new Chart(context).Pie(data);



Integrate AngularFire2 with Ionic 3
2019-03-29T00:00:00+00:00
Here’s a step by step process on how to integrate AngularFire2 into an Ionic 3 project.

Installation

You can create an Ionic 3 project via the Ionic CLI if you don’t already have one using the following command:
ionic start project_name blank --type=ionic-angular


Go to the project root and run the following commands to install AngularFire2 properly:
npm install angularfire2 firebase promise-polyfill --save
npm i rxjs@6 rxjs-compat@6 promise-polyfill --save
npm install -g typescript@latest


Integration

Inside the app.module.ts file, make the following changes:

Add the following import declarations:
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';


Then add those three to the imports array.
imports: [
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule,
  AngularFireAuthModule
],


Under the AngularFireModule.initializeApp, you may have noticed that you have to pass the firebase configuration object as an argument that looks something like this:
var firebaseConfig = {
  apiKey: "AIzaSyA01NrGxzckRwE6sf_vL3cc7ueGMGXntRA",
  authDomain: "sample-project-825a8.firebaseapp.com",
  databaseURL: "https://sample-project-825a8.firebaseio.com",
  projectId: "sample-project-825a8",
  storageBucket: "sample-project-825a8.appspot.com",
  messagingSenderId: "117752906836"
};


Lastly, add the AngularFireDatabase to the providers array.
providers: [
  AngularFireDatabase
]


Usage

Inside a component, add the following to the import declarations:
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';


You can now use firebase features in your project like so:
this.db.list('/messages').push({
  message: "Hello world!"
});

this.db.list('/messages').valueChanges().subscribe((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});



Clear Commit History of a Git Repository
2019-03-19T00:00:00+00:00
Here’s how you can clear a cluttered commit history in a Git repository.

Open your bash terminal, clone the repository and inside that repository, run the following commands:

rm -rf .git
	
git init
git add .
git commit -m "Initial commit"

git remote add origin 
git push -u --force origin master



Integrate Bootstrap with Angular
2019-03-08T00:00:00+00:00
Here’s a step by step process on how you can install and integrate Bootstrap into your Angular project.

Installation

Go to your project root (if you’re not currently there) and run npm install bootstrap which installs the latest Bootstrap version which at the time of this writing is 4.3.1.

If you want to add Bootstrap in your package.json dependencies, add the --save flag to the command like so: npm install bootstrap --save.

If you have to install an older version, just specify it using npm install @, for example, npm install bootstrap@3.3.7 to install Bootstrap version 3.3.7.

If you’re not sure what versions are available out there, you can use npm view bootstrap versions which at the time of this writing will show the following:

[ '0.0.1',        
  '0.0.2',        
  '3.1.1',        
  '3.2.0',        
  '3.3.0',        
  '3.3.1',        
  '3.3.2',        
  '3.3.4',        
  '3.3.5',        
  '3.3.6',        
  '3.3.7',        
  '3.4.0',        
  '3.4.1',        
  '4.0.0-alpha.2',
  '4.0.0-alpha.3',
  '4.0.0-alpha.4',
  '4.0.0-alpha.5',
  '4.0.0-alpha.6',
  '4.0.0-beta',   
  '4.0.0-beta.2', 
  '4.0.0-beta.3', 
  '4.0.0',        
  '4.1.0',        
  '4.1.1',        
  '4.1.2',        
  '4.1.3',        
  '4.2.1',        
  '4.3.0',        
  '4.3.1' ]


Integration

In your project root, open the angular.json file in your code editor and look for the "styles" array under the "architect.build" object and add node_modules/bootstrap/dist/css/bootstrap.min.css like so:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]


Afterwards, run ng serve to compile the changes or if ng serve is already running, terminate it using Ctrl + C or Cmd + C if you’re on a Mac and run ng serve again.

That’s basically it! You can now use Bootstrap in your Angular project with all its glory.




WordPress Snippets
2019-03-07T00:00:00+00:00
An ongoing collection of short but useful WordPress snippets.

Disable the Admin Bar
add_filter('show_admin_bar', '__return_false');


Get the Current Page Slug
global $wp;
$current_page_slug = add_query_arg(array(), $wp->request);


Retrieve the Currently Queried Object
$current_obj = get_queried_object();


Get an HTML Image Element Representing an Image Attachment
https://developer.wordpress.org/reference/functions/wp_get_attachment_image
wp_get_attachment_image(get_the_ID(), 'thumbnail', false, array('class' => 'img-responsive'));


Display Numbered Pagination Links
global $wp_query;
$total = $wp_query->max_num_pages;

if ($total > 1)  {
  if ( ! $current_page = get_query_var('paged'))
    $current_page = 1;

  $format = empty(get_option('permalink_structure')) ? '&page=%#%' : 'page/%#%/';
  
  echo paginate_links(array(
    'base' => get_pagenum_link(1) . '%_%',
    'format' => $format,
    'current' => $current_page,
    'total' => $total,
    'mid_size' => 4,
    'type' => 'list'
  ));
}


Customize Excerpt Length
function custom_excerpt_length($length) {
  return 40;
}

add_filter('excerpt_length', 'custom_excerpt_length', 999);


Allow Additional Formats in the Media Library
function add_custom_mime_types($mimes) {
  $new_mime_types = array(
    'zip' => 'application/zip',
    'pdf' => 'application/pdf'
  );
  
  return array_merge($mimes, $new_mime_types);
}

add_filter('upload_mimes', 'add_custom_mime_types');


Create Custom Shortcode
Create a shortcode that can accept a series of arguments which can be used in a template file.
function posts_shortcode($atts) {
  ob_start();
  
  $a = shortcode_atts(array(
    'type' => 'post'
  ), $atts);

  include(locate_template('front-page.php', false, false));
  
  return ob_get_clean();
}

add_shortcode('posts', 'posts_shortcode');


Customize WP Login Logo
function custom_login_logo() {
  echo '