Web Development Archives - Michael Sunarlim https://sunarlim.com/category/web-development/ Random blurbs about web development, e-commerce and technology Fri, 19 Mar 2021 19:55:20 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.5 https://i0.wp.com/sunarlim.com/wp-content/uploads/2016/07/cropped-MS_Square_512x512.png?fit=32%2C32&ssl=1 Web Development Archives - Michael Sunarlim https://sunarlim.com/category/web-development/ 32 32 30613895 MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) https://sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/ https://sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/#comments Mon, 09 Jan 2017 06:48:18 +0000 https://sunarlim.com/?p=2591 By popular demand, I updated my code and posted it as new GitHub repository that utilizes newer MailChimp API 3.0. Please read the tutorial below to create AJAX based MailChimp subscribe form on your PHP website with a little jQuery knowledge. Original post using (older and no longer supported) MailChimp API 1.0 can be found here. What... Continue reading →

The post MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) appeared first on Michael Sunarlim.

]]> By popular demand, I updated my code and posted it as new GitHub repository that utilizes newer MailChimp API 3.0. Please read the tutorial below to create AJAX based MailChimp subscribe form on your PHP website with a little jQuery knowledge.

Original post using (older and no longer supported) MailChimp API 1.0 can be found here.

What this code does

  • Validate field contents
  • Pass the form submission to MailChimp and add the record to your list
  • Basic fallback method for very, very old browser or does not have JavaScript activated
  • Very customizable and easily expandable, depending on your requirements
  • jQuery and jQuery Validation plugin called from CDNJS to keep number of files to maintain at minimal

Tools/Credits

  1. jQuery
  2. jQuery Validation Plugin
  3. MailChimp API v3 PHP Wrapper

MailChimp API Key and List ID

Below we start, we need to generate public API key from your MailChimp account and also identify your list ID. If you are not sure how to retrieve those, follow these links from MailChimp Knowledge Base to retrieve your account’s API key and find your list ID.

The Form Page (index.php)

jQuery will handle the AJAX using $.post  method and jQuery Validation plugin will validate the field values including email address format.

For this example, I am including first name and last name as part of the form fields. Feel free to make adjustments as required. Although keep in mind after changing the form fields, you may also need to adjust the subscribe.php  file too.

<html>
<head>
  <title>MailChimp (API v3) Sign-Up Form</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // jQuery Validation
      $("#signup").validate({
        // if valid, post data via AJAX
        submitHandler: function(form) {
          $.post("subscribe.php", { fname: $("#fname").val(), lname: $("#lname").val(), email: $("#email").val() }, function(data) {
            $('#response').html(data);
          });
        },
        // all fields are required
        rules: {
          fname: {
            required: true
          },
          lname: {
            required: true
          },
          email: {
            required: true,
            email: true
          }
        }
      });
    });
  </script>
</head>

<body>
  <div id="wrapper">
    <form id="signup" class="formee" action="subscribe.php" method="post">
      <fieldset>
        <legend>Sign Up</legend>
        <div>
          <label for="fname">First Name *</label> <input name="fname" id="fname" type="text" />
        </div>
        <div>
          <label for="lname">Last Name *</label> <input name="lname" id="lname" type="text" />
        </div>
        <div>
          <label for="email">Email Address *</label> <input name="email" id="email" type="text" />
        </div>
        <div>
          <input class="right inputnew" type="submit" title="Send" value="Send" />
        </div>
      </fieldset>
    </form>
    <div id="response"></div>
  </div>
</body>
</html>

Form Processor (subscribe.php)

I try to include as much comment as possible to make the code self explanatory.

<?php

  // Put your MailChimp API and List ID hehe
  $api_key = 'ENTER_YOUR_API_KEY_HERE';
  $list_id = 'ENTER_YOUR_LIST_ID_HERE';

  // Let's start by including the MailChimp API wrapper
  include('./inc/MailChimp.php');
  // Then call/use the class
  use \DrewM\MailChimp\MailChimp;
  $MailChimp = new MailChimp($api_key);

  // Submit subscriber data to MailChimp
  // For parameters doc, refer to: http://developer.mailchimp.com/documentation/mailchimp/reference/lists/members/
  // For wrapper's doc, visit: https://github.com/drewm/mailchimp-api
  $result = $MailChimp->post("lists/$list_id/members", [
              'email_address' => $_POST["email"],
              'merge_fields'  => ['FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"]],
              'status'        => 'subscribed',
            ]);

  if ($MailChimp->success()) {
    // Success message
    echo "<h4>Thank you, you have been added to our mailing list.</h4>";
  } else {
    // Display error
    echo $MailChimp->getLastError();
    // Alternatively you can use a generic error message like:
    // echo "<h4>Please try again.</h4>";
  }
?>

Download

Click here to download the basic files to create MailChimp subscribe form on your website. Alternatively, you can also visit the GitHub repository.

Coming Soon Templates

The MailChimp subscribe form example only includes basic HTML page. If you are thinking of using it for your upcoming site, and you have limited resources to create the page design, check out my list of 5 Clean and Free Coming Soon Page Templates and Coming Soon & Under Construction Templates on ThemeForest.

The post MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/feed/ 38 2591 Shopify PageSpeed Score: Pushing the limits on Bluelounge website https://sunarlim.com/2016/08/shopify-pagespeed/ https://sunarlim.com/2016/08/shopify-pagespeed/#respond Tue, 02 Aug 2016 18:35:48 +0000 https://sunarlim.com/?p=2242 In order to improve the site's SEO even further, Bluelounge requested to improve their Shopify site's PageSpeed score to above 90/100 on both Desktop and Mobile. These are my notes to achieve 95/100 PageSpeed score on an e-commerce site. The steps explained here may not be applicable to all Shopify powered sites, but hopefully you will be able to pick up a point or two.

The post Shopify PageSpeed Score: Pushing the limits on Bluelounge website appeared first on Michael Sunarlim.

]]> Bluelounge is an International design studio and recognized for its clever and unique products to solve everyday problems. Their products range from cable management, chargers, device stands, bags, to desk. I had worked with them from 2007 to 2013. When I started to go freelancing full-time, they were also one of my first clients. I consulted for their e-commerce requirements at the time and advised to switch their platform to Shopify. They took the suggestion and so the development began.

The new site was built completely from the ground up. We developed the custom theme with primary goal to have the fastest load time while keeping all of required functionality and ability to display unique page layout for each of Bluelounge’s 30+ products. I invited Rizqi Nizamil Putra into the team to help with the front-end development as time was of the essence as well. We completed the project on time and boy, the results were better than our expectations. Thanks for Shopify’s solid infrastructure, most of the web pages loaded in less than 2 seconds. A critical factor when you are building an e-commerce site.

Bluelounge new website with Shopify

Bluelounge new website with Shopify

You always want to make it better and faster…

Move forward to June 2016, Bluelounge came with a very specific but interested request. In order to improve the site’s SEO even further, they asked whether it was possible to get the PageSpeed score above 90 for both Desktop and Mobile from Google’s PageSpeed Insights and an A from GTMetrix website performance tool.

To be honest, I initially considered the request quite difficult considering one of Shopify’s major limitations was that we did not have full control of the server and apps. After a bit of research on Shopify’s forums, this was a very common issue as found here, here, and here. There are many suggestions there which you could take to improve the site’s performance bit by bit, mostly were already applied on Bluelounge website, but probably not enough to make it get >90 PageSpeed score.

I took on the job nevertheless, the challenge intrigued me.

Performance analysis

When trying to improve a website’s performance, whether for SEO, load speed, or conversion rates, the first thing to do is to breakdown what have been done correctly and what’s still missing. That was exactly what I did.

Theme related items done:

  1. Avoid CSS @import; except for the web fonts which are loaded from MyFonts
  2. Valid HTML structure; no console errors

Content based items done:

  1. Optimize images
  2. Specify image dimensions
  3. Serve scaled images

Important items done by Shopify by default:

  1. Leverage browser caching
  2. Enable gzip compression
  3. Enable Keep-Alive

Critical items to improve:

  1. Minify CSS
  2. Minify JavaScript
  3. Eliminate render-blocking JavaScript and CSS in above-the-fold content

Even with the fast load time, PageSpeed still considered the site’s performance below standard and only rated it 83/100 for Desktop and 66/100 for Mobile.

Bluelounge – PageSpeed score before

Bluelounge website PageSpeed score result before optimization

The first two items were relatively easy to do, with the right tools.

Minifying and combining CSS files

The website’s stylesheet had been built using SCSS with Bootstrap for the framework, so minifying the output file alone was not enough to make PageSpeed happy with the file sizes.  I had to improvise. Using Bootstrap for Sass, I rebuilt the CSS by hand-picking Bootstrap components that were actually used and eliminated the rest. I also carefully merged individual CSS files into a single master stylesheet for most of the pages.

After minified, the final bluelounge.v42.css  is about 123KB in size.

Minifying and combining JavaScript files

Same as CSS, minifying alone was not enough if they files were still fragmented. PageSpeed really factored in the number of calls it had to make to load a web page. This time it was a bit more tricky though, as with JavaScript a small error or wrong order could break critical shopping cart functionality. It took extensive trial and error tests to get the desired output.

Luckily PageSpeed is more forgiving when it comes to JS files and I did not have to merge everything into a single file as I had done for the CSS. I still managed to combine 7 JS files into one to reduce the number of requests.

You could use these tools to combine and minify CSS and JS files:

Tip: always do thorough tests after merging and/or minifying CSS or JS files. At the very minimal, make sure you could still add items to cart, view shopping cart, and proceed to checkout.

Eliminating render-blocking elements above the fold

What is render-blocking content? In my own words: files or elements that delays the HTML page to be loaded as quickly as possible. Most JavaScript and CSS files are usually inserted within the <head> . This means your browser will try to download all linked files while it tries to complete loading the rest of the page, thus creating a delay from the of first byte received until the page is rendered on your screen.

Above the fold means the initial area of your browser’s viewport before scrolling further.

The concept is simple: to get the browser to render above the fold content as quickly as possible by reducing as many unnecessary elements as possible. Unfortunately, it’s really easier to be said than done.

Eliminating render-blocking CSS

For quick and lazy approach, you could always move all your CSS calls to the bottom, before the closing </body>  tag. The problem with this is, and you probably have seen it on some sites, you would see the page shown with plain content first before it quickly shifted to the stylized version a second later. For Bluelounge, this was not an ideal solution. They did not want to sacrifice form over function, which was understandable.

The solution was to use inline CSS for essential above the fold styles within the <head>  and call the rest of the stylesheet from external CSS file at the bottom of the page. I needed to create a mini version of the CSS and only include classes used to render above the fold content.

Why not inlining the entire CSS file and save the trouble from having to rebuild an entire CSS block? Because you want to keep the HTML code light. Inline CSS is not cacheable. If I put the entire CSS inline, I would add 74KB on every web page and PageSpeed would not like it either.

At the end my inline CSS was around 21KB, mostly from Bootstrap’s grid classes.

Eliminating render-blocking JavaScript

The final part was to optimize the JavaScript calls. I had been saving the hardest part for last. Shopify’s shopping cart functionality depends on JavaScript, specifically using jQuery library. What this implies is that I could not just move all JS calls to the bottom like with CSS. With the template structure at the time, some shopping cart ability like adding an item into cart works by loading the script block within the body of the page. If the jQuery library was called after the function, it would simply not work.

I had to restructure the JavaScript calls, removing any function made inside the content and combining them into an external JS file to be loaded at the bottom of the page. Some functions still needed to be retained as inline though. They required to call dynamic variable from Shopify’s liquid language. For these, I just move them further down.

After setting the right order of the scripts to be called, my work was done.

The outcome

The numbers speak for themselves.

Bluelounge Homepage – PageSpeed score 94/100 for Mobile

Bluelounge Homepage – PageSpeed score 94/100 for Mobile

Bluelounge Homepage – PageSpeed score 95/100 for Desktop

Bluelounge Homepage – PageSpeed score 95/100 for Desktop

Of course PageSpeed score is different from page to page and you should not just measure the Homepage. In this case, most of the pages have the score of >85. Mission accomplished.

These steps may not be applicable to all Shopify powered sites, but hopefully you will be able to pick up a point or two. Also keep in mind that if your site uses many third party apps that add calls to external assets, it is almost impossible to control those.

Interested to optimize your Shopify website? Please do not hesitate to drop me a line.

The post Shopify PageSpeed Score: Pushing the limits on Bluelounge website appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/08/shopify-pagespeed/feed/ 0 2242 SSL certificate installation on DigitalOcean + ServerPilot (Apache) https://sunarlim.com/2016/07/ssl-digitalocean-serverpilot-apache/ https://sunarlim.com/2016/07/ssl-digitalocean-serverpilot-apache/#comments Sat, 30 Jul 2016 07:14:45 +0000 https://sunarlim.com/?p=2211 It is not that difficult to manually install an SSL certificate on DigitalOcean and ServerPilot stack. Although you need to have basic knowledge of running UNIX command lines and text editor.

The post SSL certificate installation on DigitalOcean + ServerPilot (Apache) appeared first on Michael Sunarlim.

]]> First things first, finding out about DigitalOcean and ServerPilot was one of the best discoveries I have ever had as a web developer. Not saying that it is not fun to spin up a blank server and installing the required stack to host the website I work on or manage, but these steps take time. DigitalOcean and ServerPilot combination allows me to set up a solid, secure and affordable server in a few minutes. The only missing piece was to install an SSL certificate with ease without having to upgrade to ServerPilot paid plan which costs from $10/month.

As it turns out, it is not that difficult. Although you need to have basic knowledge of running UNIX command lines and text editor. You can probably found many detailed tutorials to install SSL certificate on DO + SP stack, but most of them are for Nginx environment. Mine is for Apache, which I am more familiar with.

There is nothing original here. I am merely summarizing the steps from excellent references I found:

  1. How To Install an SSL Certificate from a Commercial Certificate Authority | DigitalOcean
  2. Install SSL certificate manually on serverpilot for Apache

Create a directory for your keys and certificates

To keep things tidy and make it easier to follow this tutorial, I am going to create a dedicated directory to store all the keys and certificates. So let’s create a new directory after logging into the server using SSH. We want to put everything under /etc/apache-sp/certs/appname  so let’s do that:

mkdir /etc/apache-sp/certs
mkdir /etc/apache-sp/certs/appname

* replace appname  with your application name on ServerPilot

Generate a CSR and Private Key

Once it has been created, you want to change into the directory:

cd /etc/apache-sp/certs/appname

Then generate a pair of certificate signing request (CSR) and private key:

openssl req -new -newkey rsa:2048 -nodes -keyout yourdomain.com.key -out yourdomain.com.csr

You will be prompted to enter information about your certificate request. To save time, DigitalOcean already provides excellent instructions on what to enter here.

Once that’s done, copy the content of the generated CSR using this command:

cat example.com.csr

Purchase an SSL certificate

At this point, I assume you are already familiar in purchasing and requesting an SSL certificate. In case you need some guidance, DigitalOcean gives a couple of examples to do this using NameCheap and GoDaddy.

Installing the SSL certificate on the server

Once you have completed the process of generating SSL certificate, you are most likely will receive 2 files:

  1. The SSL certificate
  2. The CA intermediate certificate

You need to copy both of these files into the /etc/apache-sp/certs/appname  we created earlier. If you do everything correctly to this point, you should have 4 files within that directory:

  1. The certificate signing request (CSR): yourdomain.com.csr
  2. The private key: yourdomain.com.key
  3. The SSL certificate: yourdomain_com.crt
  4. The CA intermediate certificate: yourdomain_com.ca-bundle

Enabling SSL on your domain

We have come to the magic moment and most critical step. You will need to edit Apache’s configuration file to enable the SSL. You have to create a separate configuration file from the default one(s), otherwise ServerPilot might overwrite your custom file when it is updating your server.

The config files are located on /etc/apache-sp/vhosts.d  directory so let’s change the directory to it:

cd /etc/apache-sp/vhosts.d

Then you can view available config files under that directory using the ls  command. There are probably several .conf  files there if you are hosting multiple sites on the server.

Now we want to create a new config file related to your app/site name. I am calling it appname.ssl.conf .

vi appname.ssl.conf

This is going to open the Vi editor where you are going to enter the edited lines:

Listen 443

<VirtualHost *:443>
    Define DOCUMENT_ROOT /srv/users/serverpilot/apps/appname/public

    SSLEngine on

    SSLCertificateFile /etc/apache-sp/certs/appname/appname_com.crt
    SSLCertificateKeyFile /etc/apache-sp/certs/appname/appname.com.key
        SSLCertificateChainFile /etc/apache-sp/certs/appname/appname_com.ca-bundle

    ServerAdmin webmaster@
    DocumentRoot ${DOCUMENT_ROOT}
        ServerName appname
    ServerAlias appname.com
    ServerAlias www.appname.com


    RemoteIPHeader X-Real-IP
    SetEnvIf X-Forwarded-SSL on HTTPS=on
    IncludeOptional /etc/apache-sp/vhosts.d/appname.d/*.conf

    ErrorLog "/srv/users/serverpilot/log/appname/https_appname_apache.error.log"
    CustomLog "/srv/users/serverpilot/log/appname/https_appname_apache.access.log" common
</VirtualHost>

Save the file and restart your Apache server:

sudo service apache-sp restart

Done! Test it out by opening your site using https://  prefix, eg: https://www.yourdomain.com.

You may need to adjust your site’s settings to ensure all components are called using https://  instead of http:// , but that’s a whole different process and not going to be covered here.

The post SSL certificate installation on DigitalOcean + ServerPilot (Apache) appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/07/ssl-digitalocean-serverpilot-apache/feed/ 2 2211 Latest project: House of Kooser https://sunarlim.com/2015/08/latest-project-house-of-kooser/ https://sunarlim.com/2015/08/latest-project-house-of-kooser/#respond Fri, 14 Aug 2015 05:43:15 +0000 https://sunarlim.com/?p=1523 It had been a while since I worked on fully customized website without using a pre-built templates. Doing House of Kooser's new website has been a refreshing experience. While it certainly took more time, there is this different level of satisfaction once you see up and running.

The post Latest project: House of Kooser appeared first on Michael Sunarlim.

]]> It had been a while since I fully worked on a customized website without using pre-built templates. Doing House of Kooser’s new website has been a refreshing experience. While it certainly took more time, there is this different level of satisfaction once you see it up and running.

On top of it, the site is integrated with the always awesome Kirby CMS.

Check it out at houseofkooser.com

The post Latest project: House of Kooser appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2015/08/latest-project-house-of-kooser/feed/ 0 1523 Mario Khoe Portraiture v2 https://sunarlim.com/2015/01/mario-khoe-portraiture-v2/ https://sunarlim.com/2015/01/mario-khoe-portraiture-v2/#comments Tue, 27 Jan 2015 15:25:30 +0000 https://sunarlim.com/?p=1426 The new website uses Kirby CMS so he can update the content easily anytime. In a short five days we launched the new website. In a short five days we launched the new website. Mario is really passionate with his hobby in photography and now the world can enjoy his work.

The post Mario Khoe Portraiture v2 appeared first on Michael Sunarlim.

]]> I had worked with Mario back in 2011 to build his photography portfolio website. Last week he contacted me again to reactivate the site. After a short conversation he agreed that instead of just republishing the old website, we should make a new one. It had to be responsive because most of Internet users in Singapore actually browse from tablet and smartphones.

The new website uses Kirby flat file CMS so he can update the content easily anytime. In five short days we were able to complete and launch it. Mario is really passionate with his hobby in photography and now the world can enjoy his work.

Visit Mario Khoe’s website: www.mariokhoe.com

Mario Khoe Portraiture - Full

The post Mario Khoe Portraiture v2 appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2015/01/mario-khoe-portraiture-v2/feed/ 1 1426 Set up free WordPress hosting using Amazon EC2 and Bitnami Cloud https://sunarlim.com/2015/01/set-free-wordpress-hosting-using-amazon-ec2-bitnami-cloud/ https://sunarlim.com/2015/01/set-free-wordpress-hosting-using-amazon-ec2-bitnami-cloud/#comments Mon, 19 Jan 2015 15:38:46 +0000 https://sunarlim.com/?p=1404 Amazon Web Services EC2 t2.micro instance combined with Bitnami Cloud Hosting Developer plan, both free products will get you free and terrific WordPress hosting for a year with less than an hour to set up. No command line knowledge actually required, something that usually discourages some developers from touching cloud-based hosting.

The post Set up free WordPress hosting using Amazon EC2 and Bitnami Cloud appeared first on Michael Sunarlim.

]]> For a few months I had been contemplating on moving my blog to a separate server. Recent increase traffic it was receiving and many WordPress plugins I installed started to make it a bit sluggish. It had been hosted on a VPS along with few other sites.

If you have read my post about WordPress hosting for personal and small business, I listed Lightning Base with its Personal plan for only $9.95/month. After recommending it to a couple of clients, I am impressed with it as it is fast and running cPanel which I am very familiar with. It would be the finest choice with my requirements.

Amazon EC2

AWS EC2 Logo

Then I got my eyes on Amazon Web Services (AWS) with its Elastic Compute Cloud (EC2). It is basically a scalable cloud-based instance where you can increase or decrease its capacity almost instantly. Just like any other cloud based hosting provided. Its lowest instance t2.micro is priced at around $9.52/month and comes with 1 vCPU, 1GB RAM. More than enough for my needs at the moment. The wonderful thing is, AWS offers a [Free Tier] program where new customers can get started with Amazon EC2 for free for one year.

There was only one thing that held me back: like all other cloud based hosting services, EC2 requires deep knowledge of server (Linux) command line to set up everything. Of course AWS provides an extensive tutorial in how to set up WordPress on an EC2 instance, but it was still too much in my opinion since I needed something more practical.

Bitnami Cloud Hosting

Bitnami_logo_2013

The answer came in the form of Bitnami. It is an open source project that offers open source installers or software packages for web applications and development stacks. Over 100 open source application stacks are ready to use, including ever popular WordPress, Joomla, Magento, and more coming soon. I had known about Bitnami for a while, but I had not noticed about its Cloud Hosting product which was released in February 2010.

With Bitnami Cloud Hosting, you can monitor all your cloud servers and applications from one dashboard. Imagine being able to set up new WordPress blog on Amazon EC2 with a few clicks and less than 30 minutes. What is even greater, it comes with a free Developer Plan for one server (application).

Two essential components offered for free, no reason to hold me back from migrating my WordPress installation. The process went well, now I am ready to share with you the steps to set up yours.

Step 1: Create AWS Account

Just to be clear, EC2 is only one of dozens of AWS products and services. The AWS Free Tier program is free for 18 products/services within the limits defined by them. For EC2, you can run 750 hours (31 days = 744 hours) of Linux, RHEL, or SLES t2.micro instance usage per month.

Creating an AWS account is as simple as it can be. You just enter your personal data such as email, name, address and phone number. Note that you will need to enter a valid credit card information, but if you set everything right, you will not pay a dime until the following year. One next important step is automated phone validation but you only need to follow the on screen instructions and is very straightforward.

Step 2: Create Bitnami Cloud Hosting Account

This is much more simple and like most great web apps, creating an account is only a matter of minutes. You only need to enter basic data such as name, email and password. Click the link from the confirmation email, then you are all set. No credit card required until you need to add a second server/app.

Step 3: Add AWS as Bitnami Cloud Instance

We are now starting the fun part. First, you need to add your AWS account into Bitnami Cloud Hosting panel. Everything works through AWS’s API through its Access Key:

  1. Login to AWS Management Console
  2. From the console dashboard, click on your name on the top right and select Security Credentials
    AWS_Management_Console
  3. On “Your Security Credentials” page, click on Access Keys (Access Key ID and Secret Access Key) and then Create New Acess Key
  4. New Access Key ID and Secret Access Key strings will be automatically generated and displayed on your screen, copy and save it; you can also download the key file
    IAM Management Console

You are done from AWS side, next you need to share the access to Bitnami:

  1. Login to Bitnami Hosting
  2. From the left navigation, click on Clouds
  3. Under “Manage Cloud Accounts”, click New
  4. Enter the name and default location of your preference, for AWS Credentials enter the key strings generated from AWS then click Save

Bitnami Hosting now acts as the control panel of AWS and you can install application stacks on AWS through it.

Step 4: Spin WordPress from Bitnami Cloud

Next, let’s roll WordPress on AWS EC2 instance.

  1. From Bitnami’s panel, click Servers on the left navigation
  2. Under “Server Management”, click New and on the pop-up box select Launch Regular Server
  3. The next step involves selecting options:
    • Name: your server/application name, ie. “My Blog”
    • Domain Name: for every server you run on Bitnami, you need to create a subdomain under .bitnamiapp.com; you will be able to assign your own domain later
    • Application Options: enter admin login details and under Email Configuration you may also want to add your Gmail or Custom SMTP details
    • Development Options: the default components are enough, but I added Memcached and Varnish
    • Add New Application: click the button, search and tick on WordPress
    • Operating System: I just selected Ubuntu Linux (hvm) 64-bit
    • Server Type: T2 Micro
    • Disk Size: I just use 10GB, but AWS Free Tier allows you to use up to 30GB
    • Cloud Account: your AWS account name from step 2
    • Server Location: select from your preferred location, remember though that different location has different pricing after your Free Tier period expires
    • IP Address: you can select Dynamic IP or Static IP, I chose the latter
      Bitnami Hosting – New Server
  4. You can ignore the “Estimated Amazon charges” table because it is only Bitnami’s dynamic cost caculator; Amazon will not charge you if you only select the components within their Free Tier range
  5. Click Build and Launch

Now you just sit and wait for a few minutes for Bitnami to take care of things for you.

Step 5: Complete Your WordPress Site Installation

When your EC2 and WordPress installation is ready, you will receive an email from Bitnami. You can go into Bitnami Hosting panel and see your server under Servers. To customize or gain more information, click on the server name (eg. “My Blog”) and click Manage.

Some important items you may need to look at:

  1. Under Properties tab
    1. IP Address – this is the static or dynamic IP assigned to your server, you will need to enter the IP address on your DNS to point your domain to your server
    2. Application Credentials – if you did not assign a password of your application, it was automatically generated and can be retrieved here
  2. Under Applications tab, you want to change the address to your domain instead of a prefix under bitnamiapp.com subdomain; this will automatically linked to WordPress General Settings

Once you have updated your DNS to the IP of your WordPress installation and it has propagated, your site is ready and you can use it as you would install it from any server.

Additional Step: Optimize WordPress Installation

Out of the box, WordPress stack prepared by Bitnami is already good. Your website or blog will load blazingly fast. To some, including myself, it may not be enough though and you may want to make it even better. In that case, you want to read Bitnami’s excellent wiki page in how to optimize default WordPress install.

There you go. Free WordPress hosting for one year on a terrific cloud instance with less than an hour to set up. Do keep in mind that EC2’s t2.micro is probably ideal only if you have an average of few hundred up to low thousand page views per day. Above that, you may need to use their better instances although those are not eligible for AWS Free Tier program. If your blog is that popular, please be generous with your hosting budget.

The post Set up free WordPress hosting using Amazon EC2 and Bitnami Cloud appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2015/01/set-free-wordpress-hosting-using-amazon-ec2-bitnami-cloud/feed/ 18 1404 Ready-to-use MailChimp PHP integration scripts https://sunarlim.com/2015/01/ready-use-mailchimp-php-integration-scripts/ https://sunarlim.com/2015/01/ready-use-mailchimp-php-integration-scripts/#respond Tue, 06 Jan 2015 08:00:33 +0000 https://sunarlim.com/?p=1336 I have shared a simple tutorial to integrate your web page with MailChimp subscription API. It is intended to give the most basic direction and then you can expand the design and functionalities to your preference. Some of you however might prefer to use a more “plug and play” approach. Therefore I decided to list... Continue reading →

The post Ready-to-use MailChimp PHP integration scripts appeared first on Michael Sunarlim.

]]> I have shared a simple tutorial to integrate your web page with MailChimp subscription API. It is intended to give the most basic direction and then you can expand the design and functionalities to your preference. Some of you however might prefer to use a more “plug and play” approach. Therefore I decided to list a number of (paid) scripts that would allow you to add good looking MailChimp PHP integration with minimal time required. These are not free, but definitely worth to save hours of your productive time.

DooMailChimp Modal Subscribe

DooMailChimp Modal Subscribe
Let’s start with the most simple but very effective approach. DooMailChimp allows you to add a simple button or link which when clicked will trigger a form modal box that connects to MailChimp upon submission.

MailChimp Subscribe Form

MailChimp Subscribe Form
Instead of using modal box, this script can be embedded using iframe so it stays on your web page. A good idea if you really want to draw more attention from your site’s visitors. The cool thing is they can sign up using Facebook, Hotmail, Google, LinkedIn aside from entering their email address manually.

Contact Form Generator

590x300-cfg-17
If you need more than a simple subscribe form but a complete contact form instead, this is a great form generator to make it a snap. With complete MailChimp and Aweber integration, you can create multiple forms on multiple projects in a breeze. You would still need to play with the styles though to really get the look that you prefer.

Layered Popups

Layered Popups
Another way, and probably the most effective, to collect your visitors’ email addresses is by incorporating automatic popup. This script will do that for you with integration with almost every popular email service such as MailChimp, GetResponse, iContact, Campaign Monitor, AWeber, Mad Mimi, Benchmark, ActiveCampaign, Interspire and Sendy.

Remember, getting new subscribers is only the first step. It is more important to actually send them engaging emails and make them happy with their decision to sign up in the first place.

The post Ready-to-use MailChimp PHP integration scripts appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2015/01/ready-use-mailchimp-php-integration-scripts/feed/ 0 1336 Best Places to Find Beautiful Site Templates, but not for WordPress https://sunarlim.com/2014/11/best-places-to-find-beautiful-site-templates/ https://sunarlim.com/2014/11/best-places-to-find-beautiful-site-templates/#respond Tue, 18 Nov 2014 11:35:26 +0000 https://sunarlim.com/?p=1265 You can find market sites offering templates for popular platforms like WordPress, Joomla, Magento, etc, but if you want to build a static site or using different CMS then the options are pretty limited. Worry not my friend, I have searched and I am going to list a number of sites you can visit to find nice and modern HTML site templates that allow you to customize and apply them into whatever platform you prefer.

The post Best Places to Find Beautiful Site Templates, but not for WordPress appeared first on Michael Sunarlim.

]]> As web developers with less skills on design side, we usually offer our client with a solution by using pre-built template as a solution build a great looking website without having to blow-up the budget. In the time where every person and business can have their own website, this is becoming an acceptable norm. Quoting from a fellow developer of mine, “design is no longer relevant.” Unless of course you are working with a company who want to keep their strong branding consistent and are willing to spend extra budget for it.

With tens of thousands of templates available on the market, you can pick one that is most suitable with the style and structure of your content and save tens of hours of designing and HTML coding. Do not get me wrong, picking the right template itself requires very careful considerations. Choose the wrong one, with bad coding for example, and you will have to show your commitment to fix all issues yourself to keep the client happy. But I will cover this on a separate post in different time.

Now, here is the hard fact: you can find market sites offering templates for popular platforms like WordPress, Joomla, Magento, etc, but if you want to build a static site or using different CMS then the options are pretty limited. Worry not my friend, I have searched and I am going to list a number of sites you can visit to find nice and modern HTML site templates that allow you to customize and apply them into whatever platform you prefer. May I suggest flat-file CMS?

ThemeForest

ThemeForest

This is the one-stop shop for most of your web templates. Aside from static site templates, ThemeForest also offers all types of templates for most of popular platforms such as WordPress, Magento, MailChimp, Shopify and many more.

Typical good and regularly maintained template costs around $14.

Go to ThemeForest Site Templates Page

Pixelarity

Pixelarity

While not as popular as ThemeForest, you may be amazed with the list of templates this site offers. One very cool thing about it is you only need to pay for subscription to download all the templates available.

Unlimited download plans start at $19 for a 3 month subscription.

Go to Pixelarity

Templated

Templated

Templated offers 800+ of free site templates. Some of them may not look as polished as ones you need to purchase to use, but you can actually find a few that can be used for modern and professional website.

The templates are technically free, they are licensed under the Creative Commons Attribution 3.0 license. That means you need to put visibly credit back somewhere on your site.

Go to Templated

Styleshout

Styleshout

The number of templates offered here is limited, but they are free (under Creative Commons Attribution 3.0 license) and coded in with very high quality.

They offer a credit removal fee of $10 in case you do not want to put a credit on your site.

Go to Styleshout Free Templates Page

The post Best Places to Find Beautiful Site Templates, but not for WordPress appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2014/11/best-places-to-find-beautiful-site-templates/feed/ 0 1265 WordPress Plugins to Increase Your Blog SEO https://sunarlim.com/2014/11/wordpress-plugins-increase-blog-seo/ https://sunarlim.com/2014/11/wordpress-plugins-increase-blog-seo/#respond Wed, 12 Nov 2014 11:28:57 +0000 https://sunarlim.com/?p=1228 Out of the box, WordPress is already great in terms of SEO. Set up your blog, use a well-built theme, consistently publish new posts, then you are very likely to see traffic to your site. Taking the last word from Search Engine Optimization, there is no end result to it really. You can keep on... Continue reading →

The post WordPress Plugins to Increase Your Blog SEO appeared first on Michael Sunarlim.

]]> Out of the box, WordPress is already great in terms of SEO. Set up your blog, use a well-built theme, consistently publish new posts, then you are very likely to see traffic to your site. Taking the last word from Search Engine Optimization, there is no end result to it really. You can keep on experimenting and adding new functionalities to increase your search visibility.

There are tons of WordPress plugins out there and for different purposes. Most are designed to add new features or integrations with other services, some to make it looks nicer, and so on. Below I am going to list a number of plugins that will help to increase your SEO score.

WordPress SEO by Yoast

WordPress SEO by Yoast

What does it do?
A lot. This is the top plugin in the category, not only to improve your blog’s SEO, but also to expand your understanding about SEO. Its one of the most important features is that you will be able to set different meta title and description which will be displayed on the search engine results. It also helps you in reviewing the content of you post with a targeted keyword or keyphrase.

Why does it matter?
Basic SEO practices encourage you to optimize your meta information to help search engines to display a more relevant preview of the page they are crawling. That aside, if you follow all other tools available from this great plugin, you are already improving your blog SEO a few levels.

Go to WordPress SEO by Yoast Plugin Page

W3 Total Cache

W3 Total Cache

What does it do?
It helps improving your blog performance through many methods without actually having you to move to a bigger hosting. At its heart is the caching tools that will reduce the time and resources to generate your web pages.

Why does it matter?
Search engines love sites that load fast. Reducing your page load will certainly increase your SEO score.

Go to W3 Total Cache Plugin Page

Akismet

Akismet

What does it do?
Coming from the same company who brought us WordPress itself, Akismet is a web service that checks comments made on your blog for spam.

Why does it matter?
The biggest reason people or bots are spamming on people’s blogs to get backlinks to their sites, which mostly are shady. Getting spam comments on your blog means having backlinks to questionable websites and URLs, which search engines do not like. By freeing your blog, or at least reducing the number of spam comments, your blog will look more legitimate.

Go to Akismet Plugin Page

Yet Another Related Posts Plugin (YARPP)

YARPP

What does it do?
As the name says, this plugin allows WordPress to automatically generate related posts to the one your visitors are reading. There are lots of similar plugins of course, but YARPP is most of the most popular.

Why does it matter?
Placing internal links to other posts helps search engines to index other pages on your blog and a suggested SEO practice.

Go to Yet Another Related Posts Plugin (YARPP) Plugin Page

Google XML Sitemaps

Google XML Sitemaps

What does it do?
It can automatically generate XML sitemap of your blog. It offers quite extensive settings so you can select categories to be excluded, post types and so on. Note that WordPress SEO by Yoast has this feature built-in and just as good, but in case for some reason you do not want to install that, then this one is a must.

Why does it matter?
XML sitemap is the ‘map’ for search engines to crawl the information your blog. Have it constantly updated, then you will be sure to have all your pages and posts indexed.

Go to Google XML Sitemaps Plugin Page

There are probably still dozens of other plugins that can push your SEO quality and I only share ones I use and can recommend. Feel free to share your favorites by posting your comments below.

The post WordPress Plugins to Increase Your Blog SEO appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2014/11/wordpress-plugins-increase-blog-seo/feed/ 0 1228 Front End Frameworks Based on Google’s Material Design https://sunarlim.com/2014/11/front-end-frameworks-based-on-material-design/ https://sunarlim.com/2014/11/front-end-frameworks-based-on-material-design/#respond Tue, 11 Nov 2014 10:18:33 +0000 https://sunarlim.com/?p=1212 If you love Material Design, there is no reason why you should not try to use it as the DNA of your next project. Luckily a bunch of talented people took very little time to make things easier for their fellow designers and developers to be able to take make use the framework to their site's design.

The post Front End Frameworks Based on Google’s Material Design appeared first on Michael Sunarlim.

]]> In recent years we’ve seen Google has taken design very seriously. I personally think their competition with Apple in the tablet/smartphone war (Android vs iOS) forced them to take their design/visual up a few levels.

Google is not only polishing the interface on their mobile OS platform, but streamlining most of their wonderful and indispensable web applications with a unified look and style. Material Design is the latest design/visual language developed by Google and announced at the Google I/O conference in June 2014. As with latest UI design philosophy, Google went with flat look and focused on the details. While the direction is open for personal’s opinions, in overall I think Google has done a remarkable job.

If you love Material Design, there is no reason why you should not try to use it as the DNA of your next project. Luckily a bunch of talented people took very little time to make things easier for their fellow designers and developers to be able to take make use the framework to their site’s design.

Materialize

Materialize

This one goes on the top of my list because it feels like most polished and actively developed. The framework homepage shows a clear example how you can create nice look on your websites using their components.

Bootstrap Material

Material Design for Bootstrap

If you are already in love with Bootstrap and do not want to fool around with another framework, there is a solution for that too through this project by applying Material Design as a Bootstrap theme. Note that as the time of writing, this theme is not ready for production.

Material UI

Material UI

Last but not least, if you use React for your JavaScript library, this framework is definitely for you.

There you go. Hopefully the list is useful for you. If you know other front-end frameworks that are based on Material Design, please share them by replying to this post. I would love to check and possibly add them here.

The post Front End Frameworks Based on Google’s Material Design appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2014/11/front-end-frameworks-based-on-material-design/feed/ 0 1212