Michael, Author at Michael Sunarlim https://sunarlim.com/author/maykel/ 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 Michael, Author at Michael Sunarlim https://sunarlim.com/author/maykel/ 32 32 30613895 Quick fix to Samsung S8’s camera blurred and not focusing https://sunarlim.com/2017/07/samsung-s8-camera-blurred/ https://sunarlim.com/2017/07/samsung-s8-camera-blurred/#respond Wed, 12 Jul 2017 15:25:48 +0000 https://sunarlim.com/?p=2626 Try this method… Shake the phone briefly. That solved my problem!

The post Quick fix to Samsung S8’s camera blurred and not focusing appeared first on Michael Sunarlim.

]]> Try this method…

Shake the phone briefly.

That solved my problem!

The post Quick fix to Samsung S8’s camera blurred and not focusing appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2017/07/samsung-s8-camera-blurred/feed/ 0 2626 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 Samsung Gear S3 release makes the older S2 a great holiday gift https://sunarlim.com/2016/12/samsung-gear-s3-s2-great-holiday-gift/ https://sunarlim.com/2016/12/samsung-gear-s3-s2-great-holiday-gift/#comments Mon, 05 Dec 2016 08:58:59 +0000 https://sunarlim.com/?p=2568 2016 has been a very difficult year for Samsung and a frustrating one for its customers. I shared my disappointment in Samsung decision to make the S7 Edge larger than its older sibling, the S6 Edge. Then we witnessed the biggest product blunder of the decade in consumer electronics industry with Galaxy Note 7.  To complete the updates of their flagship... Continue reading →

The post Samsung Gear S3 release makes the older S2 a great holiday gift appeared first on Michael Sunarlim.

]]> Samsung Gear S3 wireless charging2016 has been a very difficult year for Samsung and a frustrating one for its customers. I shared my disappointment in Samsung decision to make the S7 Edge larger than its older sibling, the S6 Edge. Then we witnessed the biggest product blunder of the decade in consumer electronics industry with Galaxy Note 7.  To complete the updates of their flagship products this year, they release the Samsung Gear S3.

Why is Samsung Gear S3 less attractive than Gear S2 when released?

Don’t get me wrong. The Gear S3 in overall is an upgrade compared to the previous generation S2. Here are some of notable improvements of the Tizen-powered smartwatch:

  1. Larger battery capacity: 380 mAh which promised to give standby time up to 4 days, compared to 250 mAh on Gear S2 which can last between 2-3 days with normal use.
  2. Gorilla Glass SR+ which should be more damage resistant compared to Gorilla Glass 3 on S2.

Those two factors are the only things that I consider as positive upgrades. Of course they keep all the essential features that made the S2 a solid product in the smartwatch category. Always-on display, rotating bezel, wireless charging, and interchangeable bands, they are all still there on Gear S3.

Now here’s why I feel the new release of Gear S3 feels like an unworthy upgrade:

  1. Larger size
    OK, this is very subjective matter. But for me personally, one of the biggest decision factor to get the Gear S2 because it was one of the most compact smartwatch out there, while still packing a lot of functionality. At 49 x 46 x 12.9 mm, the Gear S3 is about 15% larger than Gear S2 Classic which measures at 39.9 x 43.6 x 11.4 mm.
  2. Heavier
    Thanks to the larger size and increased battery, the Gear S3 Classic weighs 57 g. Gear S2 Classic weighs just 42 g, that’s 26% lighter. To be fair, the extra weight may help to give a more premium feel. But for me it is unnecessary because the built and finish are pretty much the same.
  3. Lower PPI (pixel per inch)
    Still related to the increased size. While the screen is about 15% larger, Samsung did not make any attempt to increase the screen resolution. Both Gear S2 and Gear S3 have the same display resolution of 360 x 360 pixels. This means lower PPI for Gear S3 at 278 ppi, compared to 302 ppi on Gear S2.

What should they have focused on: software

The Samsung Gear S line has so much potential to grab wider market, if only they put their priority and meet their promise in terms of software development. Yes, I am talking about Gear Manager for iOS to allow iPhone users to connect and manage Gear S2/S3 and enjoy its full potential. It has been almost a year since they released a statement to make iOS version of its Gear Manager app.

iPhone users have been anxiously waiting for its official release, but as of today it is still stuck in a closed beta status. Instead of trying to refresh the hardware with “half-baked” upgrades, Samsung should have allocated its resources to get the iOS app into the public first.

Is Gear S3 a good buy?

Samsung Gear S2 ClassicAt $350 retail price, in short and very personal opinion, I would have to say no. Unless you just want to have a bigger model and using a small(er) watch is against your style. The larger battery life is not a huge deal either. Smartwatch is designed to be charged daily anyway. A 4 days battery life is probably only beneficial if you are going on a short trip and don’t want to bother bringing the wireless charger with you.

On the bright side, with the Gear S3 already available in the market, it’s time for the sellers to clean up the stock for older Gear S2 which means selling them at discounted price. Samsung Gear S2 is now sold at $250 and the Gear S2 Classic at $300. At this price range, it would make a perfect holiday gift.

Shop for Samsung Gear

The post Samsung Gear S3 release makes the older S2 a great holiday gift appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/12/samsung-gear-s3-s2-great-holiday-gift/feed/ 1 2568 Intel NUC as Plex Media Player Client: Setup Guide https://sunarlim.com/2016/10/intel-nuc-plex-media-player-client/ https://sunarlim.com/2016/10/intel-nuc-plex-media-player-client/#comments Mon, 24 Oct 2016 10:46:22 +0000 https://sunarlim.com/?p=2328 The Intel NUC has been around for a while and considered as one of the best kit to build an HTPC. Before models with Brasswell and Sky Lake chipsets however, I always considered it as a big investment because you would need to grab one with i3, i5, or i7 processors to be sure it would be able to handle all media formats. Plus you probably need to make some additional spending on Windows 8/10 for the operating system.

That perception have now changed with the HEVC hardware accelerated encoding support in the newer chipset generations. Plus the release of Plex Media Player* last year with Embedded Platform app.

The post Intel NUC as Plex Media Player Client: Setup Guide appeared first on Michael Sunarlim.

]]> The Intel NUC has been around for a while and considered as one of the best kit to build an HTPC. Before models with Brasswell and Sky Lake chipsets however, I always considered it as a big investment because you would need to grab one with i3, i5, or i7 processors to be sure it would be able to handle all media formats. Plus you probably need to make some additional spending on Windows 8/10 for the operating system.

That perception have now changed with the HEVC hardware accelerated encoding support in the newer chipset generations. Plus the release of Plex Media Player* last year with Embedded Platform app.

* Plex Media Player is currently only available for Plex Pass users.
UPDATE November 30, 2016: Plex Media Player is now available for all Plex users

UPDATE October 21, 2017: Intel has released a newer generation of NUC series (identifier: NUC7XXXXX). They no longer support booting from (micro) SD card, as shared by one of the readers. Read Brian’s notes here.

A little background

For over a year, I had been using Minix Neo Z64 running Plex Home Theater as client to browse and play media library from my Plex Media Server on my TV. It had served its primary purpose well but I started to find some limitations from it:

  1. It could only be installed with 32-bit version of Windows (or any other x64 based operating system) due to limited BIOS and drivers support. This means, I couldn’t install the next generation Plex Media Player which unfortunately required 64-bit MacOS or Windows.
  2. No hardware accelerated for HEVC (H.265) video format. Its Quad Core Intel Atom processor were choking to handle 1080p H.265 encoded videos.
  3. Even though it had built-in IR receiver, there was no Windows driver for it. I had to use Flirc USB to control it from my Logitech Harmony remote.
  4. No gigabit ethernet port, only 100 Mbps.
  5. No HD Audio (Dolby TrueHD and DTS-MA) passthrough when using PHT on Windows.

So the search was on to find a hardware that would be able to fill those gaps. There is one extra requirement though: it needed to be in the sub $200 budget because I only wanted it as Plex client, not server.

The hardware: Intel NUC5CPYH

A few options came into consideration, including NVIDIA SHIELD TV and AsRock BEEBOX N3150, but I finally decided to go with Intel NUC NUC5CPYH. Primarily because of the price point, at less than $130 (barebone, no RAM, no drive) it was still quite an amazing price. While some people might doubt its processing power because it is still running on Celeron processor, but it’s already based on Braswell chipset and Braswell comes with HEVC hardware acceleration support.

Intel NUC5CPYH

Here’s the list of components to get it up and running:

  • Intel NUC5CPYH Barebone Kit – $128 [link]
  • Kingston HyperX Impact Black 4GB 1600MHz DDR3L SODIMM – $25 [link]
  • SanDisk Ultra Fit 32GB USB 3.0 Flash Drive – $10 [link]

You could go with SDXC or even hard drive/SSD instead of using USB flash drive, that one is completely up to your preference. For me, the SanDisk Ultra Fit just offered the best bang for the buck.

In addition, you also need a spare USB drive with around 1GB of storage and USB keyboard to copy and install the Plex Media Player for embedded platform image.

Plex Media Player for Embedded Platforms installation

To download Plex Media Player (PMP) for the Intel NUC, just follow these steps:

  1. Go to Plex Downloads page
  2. Click on Get an App button
  3. Make sure Plex Pass Downloads is checked on
  4. Under Choose your app, select Plex Media Player > Embedded Platforms
  5. Click on Download button, then select Intel 64-bit
Download Plex Media Player

Plex Downloads Page (click to zoom)

Next step is to create the disk image for the USB stick by following the official tutorial.

After plugging both USB sticks (one with the disk image and another that will act as the computer’s drive) and keyboard to the Intel NUC, turn it on. The NUC should try to detect a bootable drive, in this case the USB stick with PMP disk image. Then you need to follow the on-screen installation process and select the other USB stick as the destination drive to where app will be installed.

After the installation is complete, you can unplug the disk image stick and reboot the NUC. It should load PMP and you can start using it immediately.

Setting DTS-MA and Dolby TrueHD passthrough

Plex Media Player’s Audio Configuration Guide is a little bit vague in explaining how to enable HD audio passthrough. But for Intel NUC, the key is to select the right Device type and Device under Settings > Audio panel.

  • Device type: HDMI
  • Channels: 7.1 (depending on your audio receiver’s input/output capability)
  • Device: HDA Intel PCH, HDMI 0/HDMI Audio Out
  • Normalize Downmixed Volume: No
  • Show Advanced Settings: Yes
  • Dolby Digital (AC3): Yes
  • DTS (DCA): Yes
  • Dolby Digital Plus (EAC3): Yes
  • DTS-HD Master Audio: Yes
  • Dolby TrueHD: Yes

Maximizing control from Logitech Harmony

If you own a Logitech Harmony IR remote*, Intel NUC5CPYH already has its own profile on MyHarmony application. Just add a new device and put these values:

  • Manufacturer: Intel
  • Device Model Number: NUC5CPYH
Plex Media Player – MyHarmony Add Device

MyHarmony Add A Device screen

* Logitech remotes based on Harmony Smart Control hub such as Harmony Elite or using RF signal may require different configuration.

You should already be able to use the remote for basic commands. However if you really want to have more control, you need to create your own inputmap. To save you the trouble of capturing each of the Button Name from the default NUC5CPYH profile, you can refer to my notes below from my Harmony One remote.

Button Name     Harmony Button
==============================
KEY_SLEEP       Power Toggle
KEY_RED         Red
KEY_GREEN       Green
KEY_YELLOW      Yellow
KEY_BLUE        Blue
KEY_TUNER       LiveTV
KEY_TV          MyTV
KEY_VIDEO       MyVideos
KEY_AUDIO       MyMusic
KEY_CAMERA      MyPictures
KEY_RADIO       MyRadio
KEY_DVD         DVDMenu
KEY_INFO        Info
KEY_EXIT        Exit
KEY_EPG         Guide
KEY_VOLUMEUP    Vol+
KEY_VOLUMEDOWN  Vol-
KEY_UP          Ch+
KEY_DOWN        Ch-
KEY_MUTE        Mute
KEY_REWIND      Rewind
KEY_FASTFORWARD FastForward
KEY_RECORD      Record
KEY_OK          OK
KEY_LEFT        Left
KEY_RIGHT       Right
KEY_UP          Up
KEY_DOWN        Down

Now that you know which buttons are recognized as which by PMP, all you need to do is to create a custom inputmap file to your preference and upload it using SSH/SFTP to the NUC under /storage/.local/share/plexmediaplayer/inputmaps/ directory. By the way, the remote is recognized as LIRC.

Here is how I set mine:

{
 "name": "LIRC IR",
 "idmatcher": "LIRC*",
 "mapping":
 {
     "KEY_LEFT": "left",
     "KEY_RIGHT": "right",
     "KEY_UP": "up",
     "KEY_DOWN": "down",
     "KEY_MENU": "unknown",
     "KEY_DVD": "home",
     "KEY_SELECT": "enter",
     "KEY_OK": "enter",
     "KEY_BACK": "back",
     "KEY_EXIT": "back",
     "KEY_PLAY": "play",
     "KEY_STOP": "stop",
     "KEY_PAUSE": "pause",
     "KEY_SEEKFWD": "seek_forward",
     "KEY_FASTFORWARD" : "seek_forward",
     "KEY_SEEKBCK": "seek_backward",
     "KEY_REWIND": "seek_backward",
     "KEY_CAMERA": "step_backward",
     "KEY_RADIO": "step_forward",
     "KEY_SUBTITLES": "cycle_subtitles",
     "KEY_INFO": "host:toggleDebug",
     "KEY_NEXT": "step_forward",
     "KEY_PREV": "step_backward",
     "KEY_HOME": "home",
     "KEY_NUMERIC_([0-9])": "%1",
     "KEY_SLEEP": "host:suspend",
     "KEY_RECORD": "toggle_subtitles",
     "KEY_RED": "cycle_subtitles",
     "KEY_GREEN": "cycle_subtitles_back",
     "KEY_YELLOW": "increase_subtitles_delay",
     "KEY_BLUE": "decrease_subtitles_delay",
     "KEY_TUNER": "cycle_audio",
     "KEY_TV": "cycle_audio_back",
     "KEY_VIDEO": "increase_audio_delay",
     "KEY_AUDIO": "decrease_audio_delay"
 }
}

Once you done that, restart PMP. The final step is to reflect the changes on your Harmony devices and activities settings. You probably want to change the labels on the screen buttons.

Plex Media Player – MyHarmony Labels

Performance

This tiny device works like a charm! Thanks to hardware acceleration available on Braswell and newer chipsets, the NUC handles all video format I have been throwing at it like a boss.

It has no problems in handling 1080p HEVC (8-bit) videos. Over a dozen videos, only one which had one dropped frames occasion, but I think that was caused by network hiccup and not because the CPU/GPU was out of breath. Since this is an embedded app, I could not measure the hardware usage. What I can tell is the NUC never gets hot, or even warm, so it is certainly not stressed when decoding those movies.

The NUC Blog says that it should be able to handle 4k HEVC videos. My TV is not 4k yet, so not something I wanted to try, but good to know that it has some future-proofing.

Audio passthrough is perfect also. I can finally see the HDSUR. icon showing up on my Yamaha YSP-2500 Soundbar.

Mission accomplished. The Intel NUC5CPYH is a wonderful upgrade from Minix Z64 for a small budget dedicated HTPC.

Reader’s tip: Stuttering Issue

In case you are seeing stuttering with during video playback, and not related to audio output configuration, you may want to try enabling Allow Display Mode Switching under Settings > Video. Thanks for the note, Joe!

Shop for your Plex Media Player setup

The post Intel NUC as Plex Media Player Client: Setup Guide appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/10/intel-nuc-plex-media-player-client/feed/ 25 2328 Swans HiVi M50W unboxing and early impressions https://sunarlim.com/2016/08/swans-hivi-m50w-unboxing/ https://sunarlim.com/2016/08/swans-hivi-m50w-unboxing/#respond Tue, 09 Aug 2016 09:45:50 +0000 https://sunarlim.com/?p=2276 Less than a year after started using Logitech Z200 speakers for my desktop setup, I was hit with an upgrade bug. When I bought them, I did not intend it for serious music listening, just to give a decent sound from the speaker-less Mac mini. I used to prefer using headphones while working, but unexpectedly I craved to listen over (good) speakers over the cans. The Z200 served their purpose, but not enough to truly enjoy the music from my playlists. I had been eyeing on the highly regarded AudioEngine A2+, but I just knew I would be wanting more bass. Then I discovered about the Swans HiVi M50W 2.1 multimedia speakers.

The post Swans HiVi M50W unboxing and early impressions appeared first on Michael Sunarlim.

]]> Less than a year after started using Logitech Z200 speakers for my desktop setup, I was hit with an upgrade bug. When I bought them, I did not intend it for serious music listening, just to give a decent sound from the speaker-less Mac mini.  I used to prefer using headphones while working, but unexpectedly I craved to listen over (good) speakers over the cans. The Z200 served their purpose, but not enough to truly enjoy the music from my playlists. I had been eyeing on the highly regarded AudioEngine A2+, but I just knew I would be wanting more bass. Then I discovered about the Swans HiVi M50W 2.1 multimedia speakers.

These speakers are considered as one of the best with their price range. They are only slightly more expensive than AE A2+ but comes with a subwoofer. In fact it’s a super solid subwoofer, but more on that later. Does that mean their sound quality below A2+? Many people would disagree. There are also many other 2.1 speaker systems from more recognized brands in the same price range that ended on my shortlist. The reason why I chose M50W in the end is because the brand comes from SQ-centric customers compared to more generic market. The design and finish define it as you can see below.

Unboxing photos

Early impressions

It could be because I had read so many rave reviews about the speakers prior to ordering them, but when I heard them for the first time, I felt they had been a bit overrated. They produced good sound, but still a tad below my expectation. However the local rep constantly reminded the customers to give them a burn-in time of minimum 100 hours before they will truly spark. Fair enough.

One thing that already caught my admiration was the subwoofer. Even though it can be considered compact with only 6.5″ driver, it pushes solid and round bass. It is surprisingly very heavy too, most of the 17kg packaging weight is from the sub. This alone concluded that I had made the right decision to picking this set over the A2+.

I am now in around 20 hours of burn-in time and have already been noticing the sound improvements. Even with low volume, I can hear most of the frequency ranges, an indication of high quality speakers. Can’t wait to hear when they have unleashed their true potential. I plan to write a full review after spending (a lot) more time with them. But for now, I am very happy with the Swans HiVi M50W and would recommend them to anyone looking for 2.1 multimedia speaker system in $200-$300 range.

The goods

  • Superb finish, every piece uses high quality material
  • Excellent subwoofer built and performance
  • Looks awesome
  • Can go really loud

The bads

  • Initial listening might not show the true potential, require burn-in and some tweaking
  • The satellite is just a tad big for a multimedia speaker at 14 x 14 cm, may require extra space on your desk
  • Not easily obtainable in some countries

The post Swans HiVi M50W unboxing and early impressions appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/08/swans-hivi-m50w-unboxing/feed/ 0 2276 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 Non-marketing e-commerce checklist https://sunarlim.com/2016/07/non-marketing-e-commerce-checklist/ https://sunarlim.com/2016/07/non-marketing-e-commerce-checklist/#respond Tue, 26 Jul 2016 09:30:13 +0000 https://sunarlim.com/?p=2202 After setting up the most important element: a running e-commerce site, business owners are typically focused on the marketing to attract customers into the website and eventually make it generate some revenue. An understandable strategy, as the the whole idea of creating the website is to make profit from the transactions. But usually first-time customer acquisition cost is higher than the profit generated from the first purchase. To ultimately get them to come back and order more items from your online store which probably costs much less is by giving them a great shopping experience.

The post Non-marketing e-commerce checklist appeared first on Michael Sunarlim.

]]> Having an e-commerce site or online store has been a very interesting proposition for any business in any industry. The primary reason is easily the cost, which is much lower than opening a brick-and-mortar retail shop. You can also easily target customers all over the country, if not Internationally, instead of just a localized area.

However at the same time, you are also competing with thousands of other sites offering similar products. Most consider the defining factor would be the price, but I tend to disagree. Yes, customers have the tendency to shop around first and likely to make a purchase from a seller who offers the best deal. This is not always the case though, and if you follow this model then it is much harder to make your business sustainable because there is always possibility a competitor to be able to offer even lower prices than yours.

Give your customers a great shopping experience, then they will be back to buy more from your online store

After setting up the most important element: a running e-commerce site, business owners are typically focused on the marketing to attract customers into the website and eventually make it generate some revenue. An understandable strategy, as the the whole idea of creating the website is to make profit from the transactions. But usually first-time customer acquisition cost is higher than the profit generated from the first purchase. To ultimately get them to come back and order more items from your online store which probably costs much less is by giving them a great shopping experience.

The key is to be able to create measurements of your e-commerce operations and continuously monitor the performance of these areas:

Order fulfillment time

Rule #1: do not sell items which are not in-stock, or if you have to then give your customers a very clear lead time and stick to it. Nothing is more upsetting than having to just sit, wait and not getting the items you already paid for. This is an easy situation to get your customers to never come back ever.

Next thing is to calculate the average time required to get your order shipped. Ideally this should be completed within 2 day working days.

Clear communication

Do not hesitate to contact your customers if there are problems with their orders, such as delayed shipment or if you need to validate the transaction or address. This goes the other way, make it clear for your customers how to reach out to you. Customers might change their mind after placing an order more often than you think. Give them an opportunity to amend or cancel their order. It will build trust and next time they will not hesitate to place a different order from you.

Communication is not always limited to contacting through your website. If you manage social media profiles like Twitter, Facebook page, Instagram etc, be sure to check those regularly.

Human interaction is the great opportunity to give the true personality of your business. You will gain valueable feedback which could make your business much better.

Customer support

Still related with communication, but more specific is customer support. Your customers might have questions or problems when they have received the products they ordered. You and your team need to be an expert with every product that you sell, even it is not your own brand. “No fuss” return policy is always good to have if you can offer it, but often a customer just wants to be guided in using or maintaining a product. For more advanced type of products, you can consider providing them to the manufacturer’s website or document to answer the questions.

Just as important is to measure your response time. Generally customers expect to get a reply within 1 business day for their inquiry. Consider implementing a support ticket system to streamline your customer support process.

The post Non-marketing e-commerce checklist appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/07/non-marketing-e-commerce-checklist/feed/ 0 2202 Smaller Samsung S7 Edge, that would convince me to upgrade https://sunarlim.com/2016/04/smaller-samsung-s7-edge/ https://sunarlim.com/2016/04/smaller-samsung-s7-edge/#comments Wed, 06 Apr 2016 10:45:59 +0000 https://sunarlim.com/?p=1978 When Samsung introduced the S6 successor, the Samsung Galaxy s7 and S7 Edge, I was a bit disappointed to learn that they had decided to make S7 Edge larger than its sibling. With its 5.5" screen, the "flat/regular" S7's screen is 5.1", it is now in the "phablet" territory.

The post Smaller Samsung S7 Edge, that would convince me to upgrade appeared first on Michael Sunarlim.

]]> Samsung S7 Edge vs S7As a recent convert from iPhone to Samsung Galaxy S line, I have been very happy with my S6 Edge. I had been a user of both iOS and Android, but had never really used a flagship Android phone before. With the release of Samsung Galaxy S6 Edge, I just knew if I wanted to completely remove my iPhone as the daily driver, then it would be the right replacement. When Samsung introduced the S6 successor, the Samsung Galaxy s7 and S7 Edge, I was a bit disappointed to learn that they had decided to make S7 Edge larger than its sibling. With its 5.5″ screen, the “flat/regular” S7’s screen is 5.1″, it is now in the “phablet” territory.

There are so many good things about Samsung S7 and S7 Edge, most of them answer the customers’ critics from their predecessors:

Bigger battery

I have no problem with my S6 Edge and it has enough juice to last entire day, but more active mobile users have been pretty frustrated with the battery capacity. Besides, bigger battery is always a positive thing.

microSD slot

To me, having the ability to use external storage is one of the selling factors with Android devices compared to iPhone. By putting this feature back, it is a big deal. 32GB for internal storage is usually more than enough to install all the apps you need. What’s hard to predict is how much memory you will need to store all the media files, including camera photos.

Better camera

The S6 takes beautiful shots, but I am still struggling to get better focus and result when it is in lowlight environment. Taking the words from Samsung and early reviewers, the S7 camera will solve this problem.

Better design

Even though I understand that Samsung really wanted to make a smartphone that would be as thinnest and possible with the S6, the flat back and protruding camera give constant annoyance to most users including myself. Luckily Samsung’s team of designer decided to fix those by making the S7 has less camera bumb and back cover shape that is easier to hold with a small price of being 1.1 thicker. No problem, function over design.

Dust and water-resistant

Accidents happen. While this is not going to be a decision factor, having an extra feature for protecting your precious gadget better is always welcomed.

Bigger RAM and faster processor

Well, nobody would buy newer smartphone if it has the same RAM and processor as previous generation.

Solid black color option

No more sapphire or blueish black like with the S6, which why I ended up buying mine in white.

In short, Samsung has done mostly everything right with the Galaxy S7.

Samsung S7 Edge bigger screenWhy the bigger screen for S7 Edge, Samsung?

I have come to believe that Samsung thinks a bigger screen size is required for the market to justify the extra $110 to get the Edge version on top of the “edge” screen.  Probably the sales of S6 Edge+ (5.7″) were better than S6 Edge (5.1″) and they used this insight to determine the product line variations.

As a customer, we are now stuck to having a phone that barely fits into your jeans pocket in order to get that super fancy curvy edged screen.

Will there be a smaller Samsung S7 Edge?

Who knows. But knowing Samsung, they might release a new version of their flagship phone line before a full year. Just like when they added S6 Edge+ into the S6 family.

Let me hear your thoughts about bigger S7 Edge screen and whether you would prefer to have it the same size as its sibling.

Shop for Samsung Galaxy S7


The post Smaller Samsung S7 Edge, that would convince me to upgrade appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/04/smaller-samsung-s7-edge/feed/ 7 1978 Online marketing, SEO and ecommerce: how do they differ? https://sunarlim.com/2016/03/online-marketing-seo-ecommerce-difference/ https://sunarlim.com/2016/03/online-marketing-seo-ecommerce-difference/#respond Thu, 17 Mar 2016 18:55:53 +0000 https://sunarlim.com/?p=1822 In order to have a successful website, there are 3 components in general: online marketing, search engine optimization (SEO) and e-commerce strategy. The first problem to tackle is, most people may not be aware of the differences and consider them as the same. They might come to you and mention any of the terms and expect it covers everything.

The post Online marketing, SEO and ecommerce: how do they differ? appeared first on Michael Sunarlim.

]]> Working as web consultant for over a decade, I have been given the opportunity to work different kinds of clients in different industries. In the old days, being able to deliver a properly working sites which were aesthetically pleasing was more than enough to make clients happy.

Nowadays, businesses have become more aware that having great looking websites is just not enough. With every competitor also owning a website, it takes more beyond good development for this particular digital channel to be able to contribute to the business. It needs to be discoverable, incorporates interesting content to make potential customers or clients stay and browse, and ultimately have proper call-to-action elements to convert them.

The work after a website is launched is much harder and requires more dedication to achieve the targets. While all those elements above were already considered during design and development phases, it is almost impossible to create the right formula without field tests and make data driven decisions based on the site’s analytics results.

All these lead to 3 components in general: online marketing, search engine optimization (SEO) and e-commerce strategy. The first problem to tackle is, most people (read: clients) may not be aware of the differences and consider them as the same. They might come to you and mention any of the terms and expect it covers everything.

Web Marketing

Different agencies or professionals may have different interpretations to give explanation of each of those. Some just want to make the client’s life easier by not bothering about technical definitions and just provide a “full digital service”. These are really smart guys. However there are times when you really need to draw lines regarding each of these services to define scope of work and priorities between them.

Online marketing

I consider it as a marketing effort if you need to create an outline to be done in order to generate traffic to the website. Usually involving consistent actions over a course of time period.

In general, I classify online marketing into 4 categories:

  1. Organic or non-paid online marketing
    This is done by promoting the website through different networks to gain some backlinks. Few examples:

    • Posting links to landing pages or blog posts on online discussions/forums
    • Notifying bloggers to review or feature a product or service offered on the website
    • Offline promotion (word of mouth) to lead customers to the website
  2. Social media
    No company these days will be able to generate massive inbound traffic without the help of social media. By setting up a good social media profiles and consistently posting latest news and updates through these channels, it would increase the brand awareness faster than any other channel.
  3. Email marketing
    Still one of the most effective channel. Never ever take this one out from your online marketing strategy, unless no ones literally uses email anymore.
  4. Paid online marketing
    This can be done by creating ads on multiple networks, such as search engines and social media. My favorites, because of the ease of use, effectiveness, and popularity, are Google AdWords, Facebook Ads and AdRoll. Although keep in mind that every industry may have different niche and types of market, so you need to select carefully and always be ready to try different ones in order to get the best result.

Search engine optimization (SEO)

Unlike online marketing which requires financial investment in order to run, SEO is the organic solution. It is also the most difficult and complex to get positive results. The challenge is, you need to compete with billions of other websites and make the search engines to see your website as the most relevant when someone is searching with a particular keyword or key phrase.

The copy of your content is still the most relevant factor. However other technical elements such as site speed, URL format, page structure, sitemaps, they all weigh into the overall score. If your site is bloated and slow to load, it will probably end in lower search ranks compared to other sites with similar content.

It is not possible to break down everything about SEO in a single post. But to keep it short, when you work on your site’s SEO, it means trying to make it as friendly as possible to the search engines and ensure the content is relevant to your target audience.

E-commerce

In case your website does not actually sell anything online, we can also refer it as Conversion Rate Optimization. Every website has a function: to generate sales or leads, business branding, as marketing tool, etc. While the first two’s primary purpose is to drive people into the website, e-commerce or conversion optimization goals are to create a better experience to the users and ultimately increase the conversion rates.

There are many ways to achieve those, depending on the your set goals. For example, if it is an online store, then it will be to sale as many items as possible. This can be achieved by implementing these:

  1. Very clear call-to-action (Buy) buttons
  2. Product recommendations to cross-sell
  3. Product bundles to up-sell
  4. Free shipping offer
  5. Special promotions
  6. Featured products

In order to have a successful website, aside from having a well designed website, you need to consider all components mentioned above to ensure the online channel of your business is getting the results you expected.

The post Online marketing, SEO and ecommerce: how do they differ? appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2016/03/online-marketing-seo-ecommerce-difference/feed/ 0 1822