Chrome 45

Are you ready for a faster browser? Chrome 45 delivers. There are a ton of improvements and it uses less power as well.

From PCMag:

The new Chrome does more than just browse the Internet, though. It now detects if your computer is running low on resources, and automatically stops restoring tabs in an effort to save memory. Just click to refresh later, if necessary.

Google has also trained Chrome to identify when a webpage isn’t busy, and use that free time to clean up unused memory.

“In practice we found that this reduced website memory usage by 10 percent on average, but the effect is even more dramatic on complex Web apps,” product manager Ryan Schoen wrote in a blog post.

Read the rest of the article.

Responsive Design in 2015

With the proliferation of many devices with access to the internet, web designers have been playing catchup to make sure websites look good on all devices. Gone were the days where web designers would only design for the desktop. Today’s designers have to account for big screens, tablets as well as smart phones.

The design has to be flexible, fluid and accessible to all. This means objects, images and videos are fluid increasing and decreasing in size as the screen expands and retracts. In some cases, certain objects are turned off or displayed off screen. Responsive design wouldn’t be possible without the help of CSS 3, in particular the use of media queries.

Media queries allow designers to specify certain objects to behave a certain way based on the screen resolution. For example, an image that is flexible will have a CSS element such as this, img { max-width: 100% }. As the screen size increases and decreases, the images will shrink and grow, always maintaining a width of 100%.

Another trick is to use flexible layouts. In the past, most layouts would use fixed widths such as #page { width: 760px; }. In responsive designs, layouts would often use percentages instead of fixed number of pixels. In this case, the element would look like this, #page { width: 65%; }.

Another trick is to turning off elements on certain resolutions. For example, if you were to turn off the sidebar on small screens, you would set the display to none like this, @media (max-width: 480px) { #sidebar { display: none; } }. Or you can also set the element to be completely off screen such as this, @media (max-width: 480px) { #sidebar { margin-left: -3000px; } }.

If you want to learn how to design responsive websites, there are many tutorials out there. Most importantly, learn how to code in CSS, learn how to use media queries, learn how to manipulate elements within CSS. There are many responsive sites out there. In technology, Sony, Squarespace, Microsoft and Twitter Bootstrap come to mind. In e-Commerce, there’s Indochino, Skinny Ties, eBags, Garmin and PureCostumes are great examples.

Feel free to look around the web and look for ideas and inspirations.

Typekit is Down

Adobe Typekit is partially down. Some websites using the hosted web fonts service are looking a bit normal. A few websites have fallen back to the standard Arial font. On this site, I use Google fonts called Francois One and Bitter. It’s designed to fall back to sans-serif. It’s unusual for a web font service to go down, but just like everything else, they do go down occasionally.

Opera Browser Maker On Sale

The makers of the Opera browser is considering selling the company due to interest from several companies. The Opera browser, while innovative at times, they were the first one to implement tabs, have never been able to get a large share of the market. It’s currently standing fifth behind the more popular browsers on the personal computers market, and a shrinking share on the mobile market as well. Read the rest of the article.

Permissions To Webroot

I was wondering about the best way to implement and give permissions to webroot, also known as the root directory of your web server. I’m familiar with Ubuntu’s structure, so I’ll use Ubuntu’s default webroot directory, which is /var/www.

Based on numerous documents and discussions I’ve read online, the proper way to give permissions to webroot is to (1 ) add a user to the www-data group, (2) change webroot’s ownership to www-data, (3) give all members of www-data group read and right access.

ulysses = user
webroot = /var/www
www-data = user and group for Apache

Here are the commands to run from the Terminal.

Step 1

Add new user to the www-data group.

sudo adduser ulysses www-data

Or

Add existing user to the www-data group.

sudo usermod -a -G www-data ulysses

Step 2

Make www-data the group owner of /www/data

sudo chown -R ulysses:www-data /var/www

Step 3

Give members of www-data permissions.

sudo chmod -R g+rw /var/www

That’s it. Pretty straightforward.

Linode Kicks Ass

Get a web server running within minutes. Choose a Linux distro, resources, and node location. That’s essentially Linode in a nutshell. I signed up with Linode about two weeks ago. I’ve been playing around with it since then. I can happily say that I’m very impressed with Linode. It has exceeded my expectations.

If you want total control of your web server, Linode VPS is really the way to go. You will be asked to choose server size when you sign up. They come in many configurations. I chose Linode 512. You also need to choose a data center location. There are six data centers worldwide. I choose the one in Fremont since I live in California.

So far, I’m loving the guaranteed server resources. My websites are running faster . I chose Ubuntu 12.04 LTS 32 bit because it’s a Linux distro I am very familiar with. Apparently, 57% Linode users have chosen Ubuntu as well. I already transferred a couple of domains over to Linode. The websites are screaming.

I plan to migrate more websites later. If you are curious about how Linode works, here is a short list of features to get you started:

  • Full ssh and root access
  • Guaranteed Resources
  • 4 processor Xen instances
  • Out of band console shell
  • Dedicated IP address, premium bw
  • Six datacenters in the US, Europe, and Asia-Pacific
  • HA and Clustering Support
  • Bandwidth pooling
  • Managed DNS with API

Validate IP Addresses in PHP

Let’s say you were given a task to validate an IP address in a custom script. One approach is to use regular expressions and use pattern matching to see if user input is correct or not. In this example, we will use a regular expression below to validate IP addresses.

We assume user input is done via a form. First things first, we need to sanitize the input. Once sanitized, we can then test the input against the regular expression using a PHP function called the ereg().

// the regular expression for valid ip addresses
$reg_ex = '/^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/';
// sanitize input from form
$ip_address = addslashes(htmlspecialchars(strip_tags(trim($_POST['ip_address']))));
// test input against the regular expression
if (ereg($reg_ex, $ip_address)) { 
   // ip address is valid
} else {
   // ip address is not valid
}

The result is, we now have a facility to check the validity of IP addresses. We can now perform additional steps when the IP address is valid, or display errors if the IP address is invalid.

JQuery Datepicker

Typing in dates in a date field is never fun. It’s cumbersome. There is always a possibility of typing in the wrong format. There are far superior techniques that can be used and implemented when populating date fields.

JQuery is one tool that can be used to format date fields. JQuery is a set Javascript libraries that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

JQuery has a component called JQuery UI, that provides low-level interaction like animation, advanced effects and themeable widgets use to build highly interactive web applications.

1. Download JQuery UI.

You can build your own custom JQuery scripts directly from JQuery’s website. You can select which feature you want installed. You can also select a specific theme. By selecting only the theme and features that you want, you can create a lean, strip-down version of JQuery. The download will include the following folders: css, js, development-bundle.

2. A Sample Datepicker Page

I created a simple HTML page that display how Datepicker works. In this example, I’m referencing Jquery UI from a local file. You can use a CDN if you want. I’m using the Smoothness theme and its supplied CSS.

The HTML input form needs to have an ID. In this case, we are using the id=”datepicker” for the date field. We are forcing the datepicker to use the ISO 8601 format which is “yy-mm-dd.”

<link href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
// <![CDATA[
  $(function() {
  $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
  });
// ]]>
</script>

Here’s a demo.

HTML Redirect

Redirecting a web page to another page or domain is quite easy. All you have to do is create a simple HTML page with the code below. The code that actually does the redirecting is meta http-equiv=”refresh” command. Substitute “domain.com” with your own target url or domain. The number that you see is the amount of delay. “0” means immediate, “1” is one second delay, and “5” is five second delay before being redirected.

Here’s the full code:

<!doctype html>
<html>
<head>
<meta http-equiv="refresh" content="0;url=http://domain.com">
</head>
<body>
</body>
</html>