Series: Web Dev Tutorials (General, PHP, JS, CSS)

How to exclude folders in Notepad++ search

In Notepad++, one of my features that I use a lot is “Find in Files”. If you ever use this feature, I’m sure you will agree that it’s a very powerful search (and replace) feature.

The problem is that Notepad++ search feature cannot exclude folders.

In WordPress plugin/theme project I often need to use Grunt or Gulp or Composer and it generate folders such as “node_modules”. And it’s usually very large in size with tons of library and codes.

I usually move them to other directory before I search, but I found a very simple trick to exclude it. Read More How to exclude folders in Notepad++ search

Responsive Fixed Width Sidebar: Why and How?

layout-percentage-width

In responsive design, usually we use percentage width for sidebar and content width. It’s easy to do. For example 60% content with 40% sidebar. So both Content and Sidebar width will scale using this ratio.

This approach is widely use, but I don’t personally like it. I prefer to have a fixed width sidebar, like this:

layout-fixed-width-sidebar

Implementing fixed width sidebar in responsive design is actually possible (even though it’s  a little tricky).

In this post I will cover both 2 column and 3 column layout with full example.

Note: I’m not using JS to create the layout, And I also did not use calc() CSS because a lot of browser don’t support this yet.

But why use fixed width sidebar?

Here are several reasons why we might want fixed width sidebar: Read More Responsive Fixed Width Sidebar: Why and How?

How to Install Font Only In Photoshop CC

photoshop-cc-font-win-10

This is a quick guide to install font only for Photoshop CC (not windows).

I was updating one of my theme Chelonian and I copy-paste CSS from another theme. Chelonian is using Dashicons and the other theme is using Genericons. So I accidentally use genericons CSS in my style.css instead of using dashicons for calendar icon. Read More How to Install Font Only In Photoshop CC

Windows 10 Essential Software for Web Development

windows-10-setup

So, last month I bought a new laptop. I actually bought two laptop. The first one is an Acer laptop. Use it for a week, not very happy with it. So I bought Asus.

I spent several days to set up and install the laptops. I think it’s a good idea to documented it here.

I hope this post will be useful for folks who want to do web development in windows.

Read More Windows 10 Essential Software for Web Development

How to Load Multiple Google Fonts in One URL Request

Loading google font is easy. If we visit Google Font page, for example Open Sans Font. we can see the instruction to add the font in our web page.

google-fonts-instruction
Google Fonts Instruction

If we need to load multiple font weight (for example 400 (normal) and 700 (bold), we can use this pattern in the URL Font+Name:400,700. For example:

//fonts.googleapis.com/css?family=Open+Sans:400,700

So font name is separated using + sign. and we can add multiple font weight/style using : after font name and add available font weight/style in comma , separated string,

I remove the http: part of the URL when loading it, so it will be HTTPS compatible, and using the right protocol when loading the font.

If we use more than one font, we can simply load it in separate request, for example we use Open Sans and Ubuntu Font.

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Multiple Google Fonts in One URL

But of course we want to reduce the number of HTTP request. We can actually load multiple Google Fonts in one URL request like this: Read More How to Load Multiple Google Fonts in One URL Request

How to Test Your Code in Multiple PHP Version (only $10/year)

cpanel-select-php-verWordPress is a Global CMS, with very minimum requirement to install:
PHP: version 5.2.4
MySQL: version 5.0

I’m sure most of us have better server configuration than the minimum. I think most hosting have at least PHP 5.4 installed. but as a freelancer, sometimes we get a client with older version of PHP in their server. And for whatever reason they cannot/do not want to upgrade to better hosting.

If you don’t have multiple PHP version in your server, you can always install multiple PHP version in your server and pollute your server with outdated script.

Or you can spent $10 and have a separate server where you can test your code for whole year.

$10 / year, that’s only $ 0.83 / month Read More How to Test Your Code in Multiple PHP Version (only $10/year)

How to use $this in Anonymous Function in PHP 5.3

Yesterday I wrote a WordPress Login Notification Plugin. And I use Anonymous Function (introduced in PHP 5.3) in the settings. It work well in my server but when I install it in my client site, the settings page is truncated even though my client use PHP 5.3.

settings-page-truncatedAfter some googling, I found that we cannot use $this in anonymous function in PHP 5.3, we can use that only in PHP 5.4 +. Thank god I didn’t get fatal error 🙂 Read More How to use $this in Anonymous Function in PHP 5.3

How to Fix Google Apps “Send mail as” : “Functionality not Enabled”

  1. Login to Google Apps for Work Admin Panel.
  2. Go to “Apps” settings: Manage Apps and their settings.
  3. Select “Google Apps“: Gmail, Calendar, Drive, & more.
  4. Select “Gmail“.
  5. Scroll to the bottom and click “Advanced Settings“.
  6. Uncheck option “Allow per-user outbound gateways” and Save.
  7. Wait for 1 hour.
  8. Check (reactivate) “Allow per-user outbound gateways” option and Save.
  9. Wait for 1 hour.
  10. Try to set “Send Mail As” feature in your Google Apps Gmail Settings again.

If it’s a success you will see SMPT outgoing setting after you submit the “Send mail as” email address and no longer see “Functionality not Enabled” message.

#source

Transfer Files Server to Server Using Simple PHP

server-to-server-php-zip

Sometimes you need to move/migrate files to another server/hosting, and you/your client only have FTP access to the server. And to download these files and re-upload to another server can take a lot of time using FTP client such as Filezilla. FTP do not have zip – unzip functionality, so you need to upload it one by one. And server to server transfer is a lot faster than downloading and uploading the files.

You can use this simple PHP script to move files from one server to another server. Read More Transfer Files Server to Server Using Simple PHP

Simple Mobile Browser Detection using Javascript

In earlier post about wp_is_mobile() I explain that we can use wp_is_mobile() WordPress function to design theme by adding wp-is-mobile body class and use it in CSS and Javascript/jQuery.

But @samikeijonen mention that similar method was removed from twenty fourteen theme because if we use page cache/html cache the result will also be cached.

 

 

responsive

So I think the best way to use wp_is_mobile() is to also detect mobile browser via javascript/jQuery using this simple code: Read More Simple Mobile Browser Detection using Javascript

Stop and Start Windows DNS Cache, when “ipconfig /flushdns” not working

When changing domain name server, I often get 404 not found page or still viewing the site content from previous server. Sometimes it will resolve after few hour, but sometimes need several days. All tutorial I found just mention to flushdns using windows command prompt. But It’s not Working.

This is how I solve the issue.

Follow this step to fix DNS cache problem in Windows Read More Stop and Start Windows DNS Cache, when “ipconfig /flushdns” not working