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


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.