Ý tưởng thì nhiều mà thực hiện thì = 0

Mình vẫn đang thắc mắc tại sao trong đầu mình lúc nào cũng có nhiều ý tưởng để làm nhưng không thực hiện được cái nào cả. Có khi do mình biết nhiều thứ quá nên không tập trung vào thứ nào được. Phải chăng nên tổng hợp lại những công cụ web, blog, image upload, social networking, v.v... từ đó chỉ sử dụng 1 ( hoặc 1 số ) trong đó để hỗ trợ cho 1 mục tiêu duy nhất?
- Blog: Wordpress, Blogspot, Yahoo.
- Image: Picassa, Flickr
- Social Network: Facebook, Linkedin.

If I Had Started Web Design Today (And You?)

It has been ~15 years that I've been into web design where the first 5 was totally amateur, 7 years were for creating client projects and the last 3 is focused on personal ones.

When looking back, I'm thankful to many stuff that helped me improve my skills on web design/development. And, there are some important ones that makes me say "I wish I had..".

This article is mostly focused on the "I wish" part hoping it may help anyone who is new to web design.

They are not the absolute truths, in fact, they may be wrong. They are simply my thoughts based on what I experienced. You decide if they'll fit you or not.

So, starting now. If I had started web design today, I would (share yours in the comments):

Start With PHP

When I started web development, the stability of open source was still a question mark and developers were discussing whether ASP or PHP was more powerful.

As a user of Windows, having Ms Access already installed in my PC and no idea what MySQL was, I started with ASP. Bang!.. wrong move.

ASP is not developed further after 2000 however PHP is improved so much and so is its community, tutorials, etc. Today, it is clearly the most popular scripting language.

There are also many other great languages like Python, Perl, ASP.NET, Ruby, etc. However, learning the most popular one at first is the easiest, most functional and you can better decide which other language you want to learn after that.

Learn JavaScript Very Well

JavaScript was always popular but never as this much. And every new day makes it more popular and required.

It was mostly used for form validations, displaying alerts or pop-ups and knowing few things about it was enough.

Today, it is hard to think of a non-Ajaxed web application, we can pull tweets, Flickr images, draw images, implement animations and much more.

Also, it is the best cure for the biggest headache: browser incompatibilities. And, the HTML5 world will push it more.

Use Frameworks

To me, words like CodeIgniter, Zend, MooTools or jQuery sounded like totally new languages and didn't know why to use them when I already can do anything I want.

After spending few hours to understand their basics and experiencing them, that was the moment when I realized I was coding so slow and not.. that organized.

Why not use something that enables to manipulate images or upload files with ready-to-go functions and validate forms or use Ajax easily and better?

There are awesome frameworks for every language, just spend some time on reading/understanding them, choose one and master it.

Store Snippets

Within time, you start re-coding stuff like a contact form, an e-mail validation pattern ,etc.

I started storing such snippets ~3 years ago (better late than ever) and it now takes me to build a membership module (new user, e-mail validation, forgot password & login) no more than 15 minutes.

Also, in every project, take a little time to look skeptically on the snippets used that will help you to figure out any possible bugs and make the code better (if needed).

Store (or Bookmark) Resources

While building something, I used to say "I had seen something nice that would fit here but can't remember the URL". Pretty sure, you live that too.

Whether it is an icon set, an application or a tutorial, store or bookmark them with a good categorization. That saves too much time.

Learn Tricks Of Image Editing

If you design a website in an image editing application (like Photoshop) and it gets too much time of yours to make it look good, then you may be missing the tricks as they are the one that makes the difference.

Not everyone is a designer, that's ok (I'm not as well) but learning tricks like using filters, gradients, patterns or effects can convert a standard object into something impressive.

Besides the basics, make sure you learn them (following tutorials is a great way).

Never Build A CMS

Many developers don't like ready-to-use codes but prefer to build everything from scratch. That has a reason: "it is usually harder to learn another system compared to building your own".

By thinking the same, I have built various CMSs for years, small to complicated ones or project-specific ones to smarter ones that would fit many projects.

When I look back, I see that none of them were better than WordPress, Drupal, ExpressionEngine, Modx, etc.

There are lots of talented designers/developers creating themes and plugins for these platforms that are making them better and better everyday. Just pick one and become an expert on that.

Start Writing A Blog On Web Design

Even if you are not an expert in a field, writing about a subject helps improving yourself so much.

You share your knowledge, then work hard to share more and better, others comment to your thoughts and so. It is a recursive learning process.

And, meeting new people about the subject is another big plus.

Focus More On Personal Projects

I'm pretty sure every web designer/developer has a great project in mind for months/years but couldn't bring it to life because of the client projects.

Same for me. After 7 years of client projects, decided to quit them all and started building the ones in my mind.

I'm definitely not saying you should do that because it is risky and requires the right time.

However, personal projects are usually more satisfactory as the playground is totally yours and at least making few of them online will be great. They will grow within time (while you're still into client projects) and can easily become your first job (which is good to have options if you ever want to quit client jobs).

Resource from http://www.webresourcesdepot.com/if-i-had-started-web-design-today-and-you/comment-page-1/#comment-184554

Cách thức Optimize Wordpress 2.8

Introduction

Having a blog that’s snappy & responsive is just one of the many factors that makes a great blog. Even with the best content in the world, a slow blog will frustrate readers & potentially force them elsewhere. In this post we’ll focus on optimising Wordpress, a popular free open source blogging platform that runs on PHP.

Test your Current Speed

In order to figure out if any of the changes we’re about to make have an effect it’s important to benchmark current performance. There’s a number of tools & a small piece of code that allows us to do this.

Pingdom

Pingdom does a quick visual benchmark of all the elements on your Blog. You can instantly get a snapshot of elements that may be taking longer to load than they should & other problem areas. Here’s the benchmark for the StoreCrowd Blog (Around 9s load time & 924kb).

YSlow

YSlow is a firefox plugin that plugs into Firebug (possibly the best web development tool in the history of man). It analyses 22 factors that can slow down the performance of your blog & scores you out of 100. The StoreCrowd Blog gets 59/100 & a grade E.

Some of the things we’ve been alerted to clean up:

1. Make Fewever HTTP Requests (Grade F)
2. Use a CDN (41 Static Components not on a CDN)
3. Add Expires Headers (36 Static Components without an Expiration Date)
4. Compress Components with GZIP (There’s 9 Text Components that could be Gzipped)
5. Minify Javascript & CSS (There’s 10 Javascript Components that could be minified)
6. Configure Entity Tags
7. Reduce Cookie Size

Show Number of Queries & Load Time

It’s possible using this small piece of PHP code in your website footer to show the number of Queries & Load time publically:

view source

print?

1.echo get_num_queries(); ?> queries in seconds.

A quick test on the Homepage & I get: 17 queries in 1.058 seconds.

Web Hosting

Believe it or not your Web Hosting is critical to the speed at which Wordpress performs.

Without going into too much detail on which host you should pick here’s a very simple but quick overview:

• Shared Hosting – On average you’ll be sharing one single server with up to 100 other people.
• VPS – You may be sharing a single server with up to 20 other people.
• Dedicated – You’ll have a whole server to yourself.

You can get an idea of the load on your server by logging in via ssh & using the command: top

My rule of thumb is that anything over 1.00 is worrying & could impact performance.

This isn’t to say that you can’t get Wordpress running snappily on a Shared Web Host. But just remember that you’ll always get better performance from higher end web hosts. For the record this blog is hosted on a Hybrid VPS at Wired Tree & our main site is hosted on a Xen VPS at Linode. We do also ProxyPass requests from one server to the other to reduce load if the blog gets busy.

Location of your server is also important, think about your target market. If it’s the whole USA you’ll want a server that’s located in the middle of the country, if it’s New York then a server on the East Coast. You get the idea.

Server Setup & Configuration

Making sure your server is tuned to handle the load & queries you’re throwing at it depends largely on your hardware (RAM & CPU). Wordpress is built with PHP & it runs on an Apache http server normally. There have been some good experiments using other http servers such as Nginx or Lighttpd, I’ll leave this for another post though.

Few quick things to do first:

• Upgrade to the Latest PHP Version
• Upgrade to the latest Apache Version

Remove Services to free up RAM

The more RAM you have available the higher you’ll be able to tweak MYSQL & Apache for performance.

• Remove Clamd
• Change SpamD to only spawn 1 child process
• Remove Mailman, unless you’re running a mail server (I just use Gmail for domains)

MYSQL Query Cache

Since Wordpress communicates quite heavily with a Database you’ll need to ensure that your my.cnf configuration suits your Hardware setup. There’s a few quick tweaks to speed things up.

The Query Cache does exactly what it says, its Caches queries. This means that the first time the query is run it’ll get cached so the second time it runs there’ll be a significant speed improvement.

Add these lines to your my.cnf:

view source

print?

1.query_cache_type = 1

2.query_cache_limit = 2M

3.query_cache_size = 20M

Remember you’ll need to restart MYSQL for these changes to take effect.

Compiler Cache: XCache or Eaccelerator?

The Compiler cache increases the performance of compiled scripts on your server by caching them, this can have a dramatic effects on the execution time of PHP scripts.

I personally recommend playing around with both here, however I’ve found a slight performance increase from Xcache over Eaccelerator on Wordpress. About 5%.

Increase your max Apache Connections

Increasing the max connections in your httpd.conf can increase performance & server more connection simultaneously. However you may end up running out of RAM, so test a few configurations first.

150 connections is a good start:

view source

print?

1.max_connections = 150

Then increase in 50 connection intervals until you’re satisfied. Here’s a fantastic tutorial on Optimising your VPS Server which goes into great detail.

Remember to restart apache every time you make a change.

Optimise Code & Graphics

Once your server is humming along you can now start playing with the Core Wordpress code & also the coding of your Theme.

Disable Hotlinking

Whenever you server images on your server you’re essentially using resources & queries. Quite often people will borrow you images & hotlink them on their own server. This not only uses up your bandwidth, but it also puts necessary strain on your server.

You’ll need to add the following code to your .htaccess file & replace example.com with your domain:

view source

print?

1.

2.RewriteEngine on

3.RewriteCond %{HTTP_REFERER} !^$

4.RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$ [NC]

5.RewriteRule .*\.(gif|jpg|png|ico)$ - [F,L]

6.

Use Image Hosting

Hosting images externally can reduce resources & server load considerably. In the example below you can see the decrease in memory usage a Wordpress Blogger saw when moving static images off his server:

Read more about the steps taken to move images to Amazon S3.

Compress Javascript

Compressing Javascript is quite simple, since this is loaded on every pageview you can reduce the size of Javascript by removing all of the White Space. There’s a simple tool to do this for you called JavaScript Compressor.

Javascript at Bottom of Page

Often your site can run incredibly slowly or stall because another site that you call Javascript from is down or offline (i.e. Digg badges, Tweetmeme etc). Move anything that you can to the end of your page to avoid this, you can also include the Javascript that can’t be moved to the end of the page in an iFrame.

Use Browser Cache

The Browser Cache itself won’t actually make your blog load faster however it will help reduce strain on the server by caching objects that are getting loaded often (like images & styles)

Test the following code in your .htaccess file:

view source

print?

1.FileETag MTime Size

2.

3. "\.(jpg|gif|png|css|js)$">

4. ExpiresActive on

5. ExpiresDefault "access plus 1 year"

6.

7.

Compress Static Data

You can reduce the size of your pages by letting the browser compress & uncompress the data. This will reduce the bandwidth & amount needed to download.

Test the following in your .htaccess file:

view source

print?

1.AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript

2.BrowserMatch ^Mozilla/4 gzip-only-text/html

3.BrowserMatch ^Mozilla/4.0[678] no-gzip

4.BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Use a CDN or Subdomain for Static Files

Serving all your images from the same domain can means that your browser is waiting to download all the items one after the other. Lets say you have 12 items, if you split these out across 3 subdomains then they can be downloaded concurrently (as there’s 3 sources), instead of the browser waiting to download them from one source.

A good way to experiment here is to have your css & javascript files on files.yoursite.com & your templates/images on static.yourserver.com

A CDN or Content Delivery Network works in much the same way. It allows you to host your static files on a subdomain which is linked to a wide network of servers all over the world. This means that your static content is not only downloaded in parallel but it’s more than likely pushed to a server that’s closer to the intended recipient making it load MUCH faster.

Wordpress

The following includes tweaks that you can make to Wordpress itself to improve performance.

Upgrade to the latest version

Keeping up to date with the latest Version is paramount, not only does it fix security vulnerabilities but they are constant trying to improve performance. For example Wordpress 2.8 has significant database performance improvements.

Remove & Disable Post Revisions

In Wordpress 2.6 & later revisions of your posts are kept every time they are autosaved. This can clog up the database & increase its size unnecessary.

To disable post revisions add this line to wp-config.php:

view source

print?

1.define('WP_POST_REVISIONS', false);

You can also run the following query in PHPmyadmin to delete all current revisions:

view source

print?

1.DELETE a,b,c

2.FROM wp_posts a

3.LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)

4.LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)

5.WHERE a.post_type = 'revision'

Reduce Queries

A query happens anytime in your theme when you use PHP. So for example this is a query:

view source

print?

1."Content-Type" content="; charset=" />

Which we can change to:

view source

print?

1."Content-Type" content="text/html; charset=UTF-8" />

All of a sudden we’ve removed two queries from the template. Pretty simple?

Wordpress Plugins

There’s a number of plugins that can improve performance. Once everything above has been completed this is where you’ll notice most of the performance gain.

WP Super Cache

Possibly one of the best plugins you’ll ever install. WP Super Cache creates a static HTML version of each page & loads that instead of querying the database every time. This increases the speed at which pages load (upwards of 45%) & reduces strain on the server.

PHP Speedy WP

This plugin takes care of one of the other issues we talked about earlier in the post & that’s removing the white spaces in CSS files & Javascript. This plugin however is not compatible with WP Super Cache currently.

Optimize DB

This plugin allows you to optimize the tables of your MYSQL database & reduce their overhead without actually going into PHPmyadmin.

wordpress home page

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>