Syntax highlighter for WordPress

While I was posting some code on my blog, the codes are not showing correctly. I post like Javascript, PHP or Shall command as well.

So I have searched for it.

There’s Enlighter plugin which makes codes beautiful.

WordPress Enlighter Plugin

Before enable the plugin, looked plain text. And codes are always messed up. After publish, the new line disappeared and even codes are changed. Like this…

Before applying enlighter plugin

And after plugin enabled.

After applied enlighter plugin

Looks cool, huh?

Also it provides plain text with popup and we can hide line number as well.

While I was searching for syntax highlighter plugin, I found WYSIWYG beautifier as well.

We need two plugins enabled. CodeMirror File Editor and HTML Editor Syntax Highlighter.

codeMirror file editor screen-shot-2016-11-22-at-10-41-51-am

This makes edit text using text field a lot easier.

It shows like this.

syntax highlighter for WordPress

What a colorful world!

Example of GettyImages API using Composer

With Using Composer, API works are much easier. It’s my best friend for implementing APIs.

  1. Register on GettyImages for Developers. You will get Email with API Keys
    Register on Gettyimages APIgettyimages developers Get API keys
  2. I need to get GettyImages API PHP from GitHub.
    composer.json file is already configured, so you don’t need to worry about anything.

    $ git clone https://github.com/gettyimages/gettyimages-api_php.git

     

  3. Install Composer.
    $ curl -sS https://getcomposer.org/installer | php
    $ php composer.phar install
    
  4. Create example  file like below.
    <?php
    require 'vendor/autoload.php';
    use GettyImages\Api\GettyImages_Client;
    
    $apiKey = "Your API KEY";
    $apiSecret = "Your Secret KEY";
    
    $client = new GettyImages_Client($apiKey,$apiSecret);
    
    $response = $client->Search()->Images()->withPhrase("dog")->execute();
    
    var_dump($response);

     

  5. Here we go! Json format is returned.
    GettyImages API php example

Thanks bud, Composer!

Composer PHP development

How to use Selenium webdriver with Javascript on Mac

I am managing many accounts CMS, Google account and ETC. My new project is making automated account creation system so that I can spend less time to do boring works.

You can imagine that type just name and email address in the form, it will open browser and open chrome browser and go google admin account page and click create new and adding the typed information accordingly. Then go to CMS account page and create an account in the same way. Wonderful, I can save couple minutes or even an hour DAILY!

Selenium is browser automation solution.

To install this it need some preparation

First install Xcode. Open App store and search for Xcode, download and install.

apple download xcode

Another one is Homebrew. This makes installing software a lot easier. Open terminal and type this.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Homebrew, type this in terminal

Now, install node.

brew install node

install node using brew

Then Install chrome driver.

brew install chromedriver

install chrome driver

Make webdriver home folder and install selenium-webdriver.

mkdir webdriver
cd webdriver
npm init -y
npm install -S selenium-webdriver

Install selenium-webdriver

Note that there were error, without init npm. I got an error like ‘missing package.json warnings and errors off’. So I ran “npm init -y”. This will create package.json file.

Now everything is prepared.

Are you ready for launching new browser? Go!

Type node. And command like this order.

$ node
var webdriver = require('selenium-webdriver');

// Open Chrome Browser
var driver = new webdriver.Builder().forBrowser('chrome').build();
OR
var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();

// Open google.com
driver.get('http://www.google.com');

Then browser opened and open google home page.
Launching selenium webdriver

Now create js file which includes all the commands like this. I have created open_browser.js file using below commands.
Open browser command selenium

And Run js file.

node open_browser.js

open chrome browser using selenium

Working good. I will post how to login to google account for next step.

Will this makes me lazy? Not sure!

Gmail setup on iPhone Mail app using manual setup

Sometimes I am embarrassed when I don’t know how to set up Gmail on my iPhone manually.

There’s gmail app, also you can choose gmail in Mac Mail app.

Here’s two way to setup on Mail app.

  1. Go to Settings > Mail > Account > Add account
  2. Choose Google and Sign in using gmail account.

Another way is putting port and mail server name manually.

  1. Go to Settings > Mail > Account > Add account
  2. Choose other. Put the information.
    Incoming mail server host name is imp.gmail.comGmail setup on iPhone Mac mail
  3. Choose SMTP and put SMTP server information.
    This is about outgoing mail server.
    Host name: smtp.gmail.com
    SSL: Enable
    Server Port: 587
    After put information click Done.
    mac mail setup on iPhone mac mail setup on iPhone
  4. Tab advanced. In incoming settings, use below information.
    Use SSL: Enable
    Server Port: 993

That’s about it.
Life is short. Live Laugh Love!

WWW not working on domain, then add CNAME

When I purchased domain and website from whois.com, they linked  the domain to the site automatically. This is easy to use, many of hosting service provide like this way. Anyone who doesn’t know about DNS, Apache or programming can build website easily. What a good service it is!

But wait, something is missed, www is not automatically recognized. When I type www.tituschoi.com on the browser, it goes to yahoo home page! What a crap! So I decide to fix this.

Here’s how to.

  1. Go to your domain setup page. In my case, I logged in whois.com > DNS management
    whois.com dis management
  2. When opened DNS information page, click CNAME. You need to add CNAME. This is also used for adding subdomain. input Value as www. TTL is not much important, just leave it default value.
    domain CNAME setup
  3. After add CNAME, you can see it like this.
    DNS CNAME add
  4. When you ping it from terminal, it doesn’t work. But this is normal. It takes up to 3 days to be applied to DNS servers. In my case, it just took overnight.
    cname ping subdomain

Relax, time heals all wounds!

Block spam comments on the WordPress post

After my blog launched several people are commented on my blog.
I am happy to get some respond from my reader.

By the way, there’s also unwanted visitors – spam robot or human spammer. This is getting annoyed.

Spams on my WordPress posting

To block these spam comments,  I installed free plugin called WP-SpamShield.

  1. Go to Plugins > Add a new, search for WP-SpamShield. Click Install and make it Active.
    WP-SpamShield plugin install
  2. Config the settings from Settings > WP-Spamshild menu
    WP-SpamShield settings
  3. Configure some settings like log.
    WP-SpamShield general settings

I will see if this helps. Go away flies!

Updates: Looks like this plugin works good. I don’t see spam comments anymore. Recommend to you.

Adding Google Analytics Stats on WordPress

After setup WordPress, I wonder how many users are visiting although it is just started.

I already got two comments, yay!

Here’s way how to add Google analytics code without changing programming. It just need few clicks and couple of minutes.

  1. Add plugin “Insert Headers and Footers”.
    Go to Plugins > Search “insert headers and footers” > Click Install now
    adding-google-analytics-stats-on-wordpress-plugin
  2. Go to Plugins > Installed plugins and Click Activate the plugin. adding-google-analytics-stats-on-wordpress-plugin-enable
  3. Sign up the google analytics and get tracking code.
    adding-google-analytics-stats-on-wordpress-signup
  4. Go to Settings >Insert Headers and Footers. Paste the tracking code into the footer text area.
    adding-google-analytics-stats-on-wordpress-settings2
  5. Now it is on the website.
    adding-google-analytics-stats-on-wordpress-code2I will see how many visitors today!

File upload Amazon S3 on Drupal

I have been searching for upload file to Amazon S3 on Drupal 7.

There’s AWS SDK for Amazon S3 file uploading. It is not difficult to make it worked. Here’s the other post regarding sample uploading script on php.

There are some modules like Composer, Composer Manager, S3FS. But none of them worked in my case. So I decide to make my own module for drupal.

  1. Create one dummy module in custom module folder.
    e.g. fusion_composer folder
  2. Run drush composer command
    drush composer
  3. Create composer.json file with this code in the same module folder
  4. Install composer files associated with AWS service.
    drush composer install
    drush composer update

    This will create vender folder with AWS related content.
    screen-shot-2016-11-10-at-10-50-36-am
    Now you can use this code for production site. You can create this on Dev site and commit then you can use it on production site without install. This is way better than installing composer on production site.

  5. Here’s example file uploading function on test module.
    Amazon S3 sample file upload on Drupal
    Amazon S3 sample file upload on Drupal
    function amazon_s3_sample_file_upload() {
        //S3 configuration
        $module = 'fusion_composer';
        $file = DRUPAL_ROOT . '/' . drupal_get_path('module', $module) . "/vendor/autoload.php";
        require_once($file);
        
        $bucket = variable_get('amazons3_bucket');
        $bucket = 'test';
        
        $client_config = [
            'version'     => 'latest',
            'region'      => 'us-east-1',
            'credentials' => [
                'key'    => variable_get('aws_key'),
                'secret' => variable_get('aws_secret')
            ],
            'debug'   => false
        ];
        $s3 = Aws\S3\S3Client::factory($client_config); 
      
        $sample_file_url = 'http://test.com/flv/sample.mp4';
        $directory_uri = 'public://tmp/flv_videos';
        $pathinfo = pathinfo($sample_file_url);
        $file_path = $directory_uri.'/'.$pathinfo['basename'];
              
        $filename = drupal_basename($file_path);
        $real_path = drupal_realpath($file_path);
        $aws_path = date('Y/m/d').'/'.$filename;
    
        $result = $s3->putObject([
            'Bucket' => $bucket,
            'Key'    => $aws_path,
            'SourceFile' => $real_path,
        ]);
        
    }
    

    So first include autoload.php and set configuration for the bucket and API keys. Download the sample file from url and save to temporary folder. Then upload the file to S3 server.

Works like charm!