Week 23:

Nov 24^th 2014, I walked in through the front door of WCB and sat down for my first day of my internship. Back then I don’t know any HTML and CSS and they pretty much look like alien languages. But after six months of working on real customer projects they started to slowly soak into my brain and become less threatening. Six months might sound like a very long time but not when you are living it. It doesn’t seem that long ago that I walked in with my laptop and wrote my first test article. Next week will be the last week of my internship and I have mixed feelings about it. It felt a bit like having a nice cup of black coffee – smooth, satisfying, with a slightly bitter aftertaste at the tip of your tongue. It has been a crazy roller coaster ride full of ups and downs but I’m very glad that I have everyone in WCB to share those moments with me. On that note, let’s make this last week an epic ending.

Bluehost – hilarious customer service

This is the one thing that I have to share as it is just hilarious!  During the week I have to contact Bluehost for some technical support. One of our customers has multiple websites registered under the same hosting account and so I want to find out how I can have the files for each website organized in its own folder under public_html i.e. under public_html you should be able to find folder for website A/website B/ Website C, etc. I struggle to explain to him/her what I want to do and told him/her that English is not my first language. Here is the hilarious reply:

I’ll give the person a credit for getting the sticky rice correct, but I’m pretty sure that we don’t have a spicy pumpkin soup on our national cuisine list. But anyway, I thoroughly enjoy the conversation and he/she was very helpful. So good on you Bluehost for having an awesome live chat support and bon apatite!

Cut and Paste

The client wants to add a feature in which a “New” tab appears on a product that was newly added to the website. Thanks to this very simple plugin that makes it possible without having me cracking my head open. It is called “ Woocommerce Product Badge” by terrytsang.

Once downloaded and installed a new tab called “product badge” will be added to you woocommerce option and as you can see the setting window is very straightforward and easy to use.

You can set the duration that you want the product to be considered “New” that is if you set the display value to “10” the “New” badge will appears on the product after 10 days from the original day that it is posted. With a bit of styling using CSS, here is what our badge looks like from the front end:

 

Another feature that he wants on the website is a currency converter, which allows user to switch different currency and convert it into Thai baht. In this case, the client sends over a plugin that he wants to use. It is called “Currency Converter” by enclick:

At the beginning, I struggle to find the option where I can change the setting of the plugin because I don’t see any new item being added onto the option bar or see any changes on the front-end. However, after reading through the plugin installation session I realized that it is being hidden inside the widget area.

The installation is dead simple. Just simply click and drag the “currency converter” tabs into your desired widget area and you will see this beauty appears on the front end of your website

Advertisements

Week 22:

Another short week with three working days and ginormous amount of works that need to be done after the holidays. Most of my work this week involves fixing up websites and working on the responsive, which has been a pain in the butt. Working on a website that you did not built is not a fun thing to do as it require more time to figure out  how the website was built as well as getting use to the theme, so I really value the practice of commenting my code more now.

Iqbal Events

This is a website that allows people to purchase tickets for different events in Malaysia online. The responsive for this website pose to be a very difficult challenge especially the home page since the layout looks quite different from the original theme template. One of the best examples is the banner over navigation bar.

At default, Salient has a navigation bar at the top of the page and therefore it is not possible to insert the slider via the page builder and have it sits on top of the navigation. The solution was to create a new custom template and embedded the slider onto the page header. Even though this solution works, it makes the responsive becomes quite a nightmare because it completely ruined the default responsive grid of the theme.

As you can see from the picture above, without setting up the top margin the header will be hidden behind the slider.

Another tough thing to adjust on the home page is the buttons on the slider as it is not very responsive, especially on tablet and mobile view. Here is what it looks like without any styling

By using media query to target on a specific device, I was able to fix the messy layout on the tablet and mobile view. I’m also trying to put lots of comments in my code and keeping it organized so it is easier for other web developer who might be working on this website in the future. As a bonus here is a link to the device specific media query for iPhones and iPads

And here is the result

Woocommerce Order Barcode Plugin

This is a really handy plugin that generates a unique barcode for your product and have it send to your customer via email. I spent quite a number of times trying to set it up but still having difficulty getting the plugin to work properly, so we send some inquiry to the plugin developer and are now waiting for his/her reply.

 

During plugin testing, we managed to set it up so that we get an electronic receipt with a unique barcode send to the purchaser email. The problem that we are encountering right now is that the barcode does not actually do anything after we scan it using a mobile scanner application (for both Android and iOS), so we need to find a way that we can make the redirection happens.

Design Contest

Just a small update that we have to put the design contest on halt as we are now having something more exciting that needs doing. Taya has a few of her artist friends coming into the office on Friday and they are going to give us an awesome mural for our classroom wall! It’s very exciting to see what the final result will be like.

Week 21:

Holidays, holidays, and holidays, April and May has been filled with many of them. Don’t get me wrong, I do enjoy all the days off but have to admit that it really have a huge impact on my work schedule. After all, this may be why we have five working days and only two days off. This week I have been solely working on cut&paste and trying to get it live on Friday, which would never be possible without Singh help. I ran into a lot of problem this week, with multiple frustrating phone calls to hosting company and plugin developers; it wasn’t fun but it’s something that must be done.

Migrating Website Nightmare

One of the most valuable lessons that I’ve learnt is DO NOT EVER USE ONE CLICK WORDPRESS SITE MIGRATION TOOL!!!! I don’t know if other people have a different opinion on this but I didn’t have a good experience with it at all.  I’ve tried it with two of the websites that I want to put live and both have encountered some problem which took me more time to fix. With the one-click-migrate tool some of the core file of WordPress could get corrupted during the migration process and it’s very difficult to track down the file that caused the problem. So my solution was to go old-school and do the manual blank WordPress installation before uploading the “wp-content” folder to the hosting server, which works wonders. One-click-site migration…never again…

Cut & Paste Hover effect

Hover effect is not something too difficult to do, but to make it responsive is a completely different story. Although this might be an easy-breezy task for a professional web developer, it is quite a quest for an lvl.01 web developer like me. But with the limited time I’ve found a quick solution to fix this, which might not be the best solution but it does what’s it’s supposed to do.

In the text editor I first create a <div> (in this case I called it “home-masonry”), which contains a background image – this is the image that will be shown during hover. I then placed a linked image of the same size inside the <div> that I’ve just created.

Next is to use CSS to make the magic happens. The command is very simple. I first specify that I want the background-size to be set to “cover” so that the background size will be fitted to the container. Next is to specify that once a mouse is hover over the image, reduce its opacity to 0. This will reveals the background image underneath and thus completes the hover effect. I also use a transition command to give it a smoother hover transition. The picture above should help to make my explanation becomes clearer. Here is what the final result.

And with this little trick you have now got an easy hover effect that you can use on the website. With this method the hover effect is highly responsive as everything is completely contained inside a container. You would not run into the problem of font running outside of the image as you resize them. But the huge downside is that if you have too many of these it could slows down your website load time as it means that you’d need two image files for each of the image with hover effect.

I’ve still have a lot to learn but will keep sharing my experience once I found a more effective an efficient way to do the image hover effect.

Week 20:

April this year has been quite a weird month so I am glad that it’s going to be over by next week. Things have not been running as smoothly as I planned and this last week felt like a blur. It’s somehow felt short and long at the same time, which could be because of the many holidays that we have during this month. Hopefully things will resume to normal by next week.

Cut & Paste

I’ve spent most of my time this week working on cut&paste since the client will come in for a review session this coming Tuesday. I worked on this website before Glasford and boy was I suck! One of the biggest mistakes that I did was to use “id” instead of “class” for all of the elements on the page! (What was I thinking?!) , so I have to go back into the code and fixed all of that.

MailChimp for WP

Mailchimp is a very powerful email marketing service provider, which I personally think every small business owner should get. MailChimp will greatly improve your email marketing strategy as it allows you to categorize your subscribers into different category and you can send them an email which targets their choice of interest. But what’s more awesome about MailChimp is it also comes with a plugin called “MailChimp for WP” that allows you to connect it to your WordPress website. So here is how you can set it up.

In order to use the plugin you must first sign up for a Mail Chimp account. Once you have it go to the backend of your website and download the “MailChimp for WP” plugin

Once activated you will see the “MailChimp for WP” icon appears on your option panel. Click on it and you will be lead to a page that asked for your API key. Click on “Get you API key here” to continue with the set up

A new window will open up asking you to sign in to your Mail Chimp account (if you have not done so) otherwise you should be lead to an API keys page. On here, scroll down the page and click on “create a key”

After that you should see your API key show up. Keep your API key a secret since it will provide a full access to your MailChimp account. Copy the newly generated API key and go back to the backend of your website.

Paste the acquired API key into the box and click “save changes”. You should now see the plugin status changed to “Connected”

Now that we have the plugin correctly installed, we have to generate a subscriber list where all of your subscriber information will be stored.

On your Mail Chimp Account, click on “Lists” on the navigation bar. Once inside click on “create list”

Fill out the information required and make sure that you named your list with a logical name e.g. Mywebsite.com newsletter subscriber, etc. At the bottom you can also choose whether you would like a daily email update of the subscriber list or an individual email sent every time someone subscribe or unsubscribe to your newsletter.

Save your list and you should now be able to see it from the “list” page of your Mail Chimp

Go back to the back end of your website and inside “MailChimp for WP” you should now see your list (also note that it comes with a specific id, which we will need later)

 

Click on “Form” under the “MailChimp for WP” option and you will see an option page similar to the one shown below. Make sure that at least one of the list under “List this form subscribes to” is selected otherwise the plugin would not know where to store your subscriber information. You should also see a text editing area, which you can add in different field type to your newsletter subscription form. Once done click “save changes”.

To use your form, copy the shortcode underneath your form text editor and paste it inside a page or post that you want the form to appear. In my case, I want it to show up on the footer area, so I simply put the shortcode inside the first widget column of the footer. Note that I’ve also specify the form that I want to use by giving it an id number mentioned in step 10.

And after some styling with CSS, here is what the form looks like.

 

Week 19:

It’s a weird week after Songkran holiday as we only have two working days this week. During the holiday a few unfortunate events happened. One of my great aunt passed away after being hospitalized for two years, so I have to take a day off on Friday to attend her funeral. The second thing is we’ve now lost Kevin from our team as one of his relative has also passed away and he needs to fly back to the State to attend the ceremony. Not a fresh new start to my Thai New Year, but hopefully the series of unfortunate event will end here.

A trip back home:

On a positive note, I have the chance to fly back to the south during the Songkran. The plan to go to the beach was cancelled due to a massive thunderstorm that just happened to pass over Thailand during the five days holiday. But it was nice to go back home and catch up with friends and family.

So this year I get to do Songkran the traditional way. My family went over to my grandma’s, we wish her a good health and she blessed us with her blessings. It is quite sad to see that this family tradition is slowly disappearing and got replace by the wet-and-wild Songkran that we see on television today.

Personally, I love to celebrate Songkran in both versions and feel that one should not be neglected over the other.

Customizing check boxes in Contact Form 7

This is what I’ve been working on Thursday and thinks it is a pretty neat trick worth sharing. Contact Form 7 allows you to easily add check box and radio box to your contact form with ease, but styling it can be a little tricky. This is what the original tick box looks like:

However, this doesn’t match with the design that the client has requested so we need to change it using CSS.

First, the default box would need to be hidden so a new one with the right style can be shown. This can be easily done using the following command:

And here is what the form should look like:

After that, we need to put in the new box that has the right design. So here is the code that I use to style my box:

You should now have something like this:

However, you will notice that the tick mark no longer shows up when you click on the box. To fix this we also need to insert the code for the tick mark, which is where it becomes quite tricky.

I spent quite a bit of time searching for the solution and found this really simple fix. All you need to do is to add this line into your code:

You might be wondering how you can type the “✔” mark right? There are many methods that you can do it but I simply go to this amazing website for help! Check out Fsymbols.com

You will find bunches of other useful icons, which you can just copy and paste into your code editor.

Now you should have the tick mark showing up when you clicked on the box:

Once you have this, you can set its position using CSS, and viola! Your check boxes is now more stylish than ever!

Week 18:

It’s the last week of work before Songkran Holiday and you can feel the anticipation for the crazy water festival beginning to boil up. People started wearing the iconic bright floral shirt and you can hear the classic Songkran song playing on TV, radio and pretty much everywhere you go. Too bad I didn’t get to stay in Bangkok to enjoy all the madness on April 13th, but coming home and visiting friends and family is also not such a bad idea.

Agency Portfolio Update:

It’s been a few months since we get to update our agency portfolio. I think this is a common problem that many agencies have, which is spending too much time working for the customer and not enough time to work on their own website! One of the things that I’m very proud of is the fact that I can add the website that I’ve developed onto the agency’s list.

Placeit.net is a fantastic tool to create computer or mobile screen mockups, but only the smallest file size comes for free – you have to pay for higher resolution images. However, there are also many amazing mockups available online for free so here is a good list that I’ve found, make sure to check them out!

Tractus

I spent a lot of time this week checking out this website after it has gone live. The theme used for the website proves to be quite a challenge to work with as the page builder keeps messing around with the alignment every time you click update. Furthermore, the logo slider on the homepage also didn’t work properly on IE (surprise surprise…) as only half of the logo is being displayed.

The solution that I use for this problem is using media queries to target only IE, and wrote some CSS to style the dysfunctional area. Please note that this method will only works for IE 10+, you would need to use an alternative solution for an older version of IE.  Here is the magic code that fixes the problem:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

/* IE10+ CSS styles go here */

}

Please check out this article that provided me with this fantastic code.

And here is the final result:

 

Internal Training: PSD to html (session 02)

This is a follow up class from our first session back in week 13. In this lesson we learned how to use the images that we acquired from the slicing tool on our website. Additionally, Carl also show us how to keep our style sheet looking clean and organized by separate our code into sections and emphasized that we should always commented our code.

In this exercise we only focus on the html and do not yet concern about the CSS of the page. The goal is to add all the required elements onto the page in the most reasonable and organized way. One of the good practices is to wrap each section of your page with a separate container so that it is easier for you to style using CSS. Although the page doesn’t look very impressive, you can see that the overall structure of the code is very well organized.

Until next time, Happy Song Kran 2015

 

 

 

Week 17:

This week one of our fellow interns, Audrey, finished her internship I was very happy for her but also sad to see her leave. The office will definitely feel a little different next week, especially without her as an office DJ. This also makes me realized that the end of my internship is approaching very soon. I don’t know what will happen after the internship but my goal is to learn as much as I can from this experience in these last couple of weeks at the school.

Internal Training: PHP

This week Carl got some times to train us on PHP. Since I have the opportunity to work with PHP in the past I found this class to be very helpful as it makes the code makes more sense. One of a small but very useful thing that I’ve learnt today is the use of a concatenater

A concatenater is basically a “.” that you can place before/after/ the variable to link them together.

In the example below, you can see that my code is working quite well and it is showing what is expected

However, when I tried to add the space between the first and last name this seems to be more problematic.

The solution is to use a concatenater, and you can see now that there is a space between the first and last name

iFlyChat: Cool Chat plugin for WordPress and BuddyPress

I was asked by Mr. Singh to help him find a chat plugin which support both WordPress and BuddyPress. After several searches I found iFlyChat which works perfectly to what we are looking for. The plugin chat feature also has a very similar look to Facebook messenger, so it wasn’t hard to become familiar with it. So I’m going to share how to quickly set it up on your website

After installing the plugin, you need to sign up for an account on their website. Once registered, log in and click on “Dashboard” button locating around the top right corner of the screen

Once inside click on the “Generate a New API Key” button and you will be taken to a page where you are asked to put in your website domain name. You don’t need to put the “http://” or “www.” In front of your domain name, it won’t work if you do. Click on “Generate API Key” once done and you should be brought back to the dashboard and can now see the API key for your website.

Next, go to the back-end of your website and look for Settings >> iFlyChat Settings on your WP dashboard. On the setting page, you should see a box for “API key” and this is where you can put in the API key that you’ve acquired earlier. Now you can start setting up your chat feature and see it pops up on the bottom right corner of the page.

I also had quite an amazing service from their customer service team, who work fast like lighting and has been very helpful while I was trying to get the installation to work.

Audrey Farewell Party

After work on Thursday we went to a bar called Fatty’s on Rama 9 to give Audrey a farewell dinner party. It was a very nice experience since we haven’t gone on any company’s party for a while. Singh also invite one of the ex-WCB intern, Andrew, to come and join us, so it was almost like a mini school reunion.

The next day, Carl also threw Audrey a lunch pizza party (which I completely forgot to take picture). We finish off those good ol’ pizzas in matter of seconds and top it off with some ice-cream.