Fast Guide for Small Talk Success

I am pretty much introverted and I hate small talk. I have felt this way for a while so going to corporate events or even just talking to strangers is usually uncomfortable. But, you can't just isolate yourself from society, well you can, but that is not what I want. So, it's time to get better at small talk.

I think a good place to start is just thinking about small talk in general, I just said I hate it above, that is based on my thinking that small talk is stupid because it is so superficial, but the truth is that small talk is really powerful and important skill set that you should learn to love and develop. Why?

How else will you find new friends and start meaningful conversations with random strangers? Something has to break the ice, initiate the convo, and yes, if all you talk about is the weather, than small talk is useless. But small talk should lead to a more deeper and interesting subjects, that is the goal, nobody really wants to be stuck in just small talk all night.

Now, what are you going to small talk about? Can't think of any topics or subjects? Well, let me just add some criticism, and this is directed to me. You suck! Get a life! You can't think of any subjects? really? I had to say this to myself a bunch of times, seriously, this criticism is the most significant part of small talk success.

The point is that a rich lifestyle creates content and it helps you engage others. So if you do not have a life, a rich lifestyle, you just suck and you should change, create it, get a life: read more, travel more, try new things everyday, take on various hobbies, do some charity work, and definitely socialize more.

The other big piece of advice is that you should care about the vibe of the conversation and not the topic. It's just small talk in the beginning so focus on energy, make sure you smile, joke around, be spontaneous and silly. The point is that in the beginning of any conversation the way you say things is much more important than what you say.

Remmeber to always ask open questions, not questions that end with a yes or no. You want the responder to talk about themselves. Some examples could be "What sort of books do you like?", "What did you study at university?", "Which is your favorite season? Why?", "Where's your usual watering hole?", etc. Finally, you should always have an exit line like "I have to go get another drink."

Okay, now the real content:

Here are some quick general small talk topics:

weather, hobbies, sports (current matches, favorite teams), current events, entertainment, compliments on clothing or fashion trends, media (films, books, magazines), hometown (where do you come from, how is it different), etc

Here are some Icebreakers:

current mutual situation (are you excited about the conference?)
have you tired this beer or that food?
did you hear about that news event?
do you have any kids?
travel (how was your flight down here? when are you heading back? favorite vacations spots?)
food: talk about the food being served
technology: talk about android phone, ipad, Facebook, computers, etc (do you think the win8 tablet will challenge the ipad?)
beer preference
holidays: there is always one coming up so you can ask about plans for holidays?
So have you had a busy day?
WORK: where do you work? how long have you worked for your company? have you always done this work?
Entertainment: seen any good movies lately?
Recreation: what do you do for fun? any hobbies?
what do you think about this place?
where did you grow up?
What do you do when you are not working?
once a topic comes up, like a book, u can say things like: if you wrote a book (made a cd, directed a movie) what would it be about?


When you are stuck, just think about some good books you just read, articles, your hobbies, etc. Remember to say a persons name now and then to memorize it and because it is a sign of respect and mutual like. Finally, make sure your response are meaningful, if someone says the weather is crappy, don't just nod or say "yeah" which will end that conversation. Respond by telling them how you cannot wait for summer, beach, etc. Keep it going.

Web Developer Interview Questions

HTML, CSS, JavaScript, and jQuery Interview Questions

If you are looking for a job these days as a front-end developer, ui developer, ux developer, or web developer then these questions, answers, and resources should be very useful. Some of them are real questions from interviews. These are mostly intermediate and advanced questions, and I added some library specific questions (jQuery is most popular) as well as general questions that you might encounter.

General Interview Questions for Developers

You should be prepared to talk about your strengths, weaknesses, goals, etc. If you currently have a job you will probably asked why you are leaving your current employer. You should generally have an idea where you want to be in your career in 5 years from now. You might be asked questions about your daily activities and what you like about your job. Often, you will be asked what is one thing that you dislike about work. You might also encounter questions about working on teams vs working alone, communication, culture, Agile methodology, etc. Here are some sample questions:

Do you have any experience in HTML5 or CSS3?

Employers want to hire developers that are passionate about their work and developers that are up to date on emerging technologies and best practices. Even if you have not done much in HTML5 or CSS3 you should know what they are all about. Most importantly, you should know that only modern browsers support CSS3 methods and HTML5 tags, and support differs for each browser. Thus, if your code needs to support old browsers like IE6 you might not have much experience with HTML5 or CSS3.

But, that is no excuse. You should know about the new popular HTML5 tags, like audio, video, canvas, placeholder, etc and their pros and cons. The video tag in HTML5, for example, allows native browser support for videos without the need for something like Flash, however, different browser support different video formats so a big downside to the video tag is that you need to convert your videos into different formats. Finally, you should know that even if you need old browser support, you can still use HTML5 and CSS3 with the help of a JavaScript library like Modernizr that will allow you to detect lack of support in certain browsers and give you a way to implement the missing functionality with your code.


Do you have any exposure to Mobile Development?

Mobile is hot right now and if you do a lot of reading on the industry you should at least be thinking about Mobile Development. Even if you have never done much with Web ToolKit or Android OS, you should at least have some understanding on the difference between Desktop and Mobile design and development. In terms of design, there are many challenges as your viewable area is significantly reduced. In terms of development, looking at jQuery for mobile is a good start. Take some time to read about Mobile development.


What websites or blogs do you read?

This is another question where the employer wants to make sure that you are well read on industry's best practices and emerging technologies. Even if you do not read blogs, there are some websites that should stand out. I would think it is kind of weird if you have never heard of TechCrunch, A List Apart, or Stack Overflow.


What is the difference between progressive enhancement and graceful degradation?

Both are important user experience strategies in web development. The older one, graceful degradation, aims to provide an alternative version of your functionality to users with older browsers. Users on IE6, for example, can still use the website but with more basic functionality. The newer one, progressive enhancement, starts with a baseline of usable functionality available for all browsers and increases the richness of the user experience in more modern browsers.

Here is a great quote from a good article on the differences between these two techniques:

In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

These articles go even more in depth: Understanding Progressive Enhancement and Graceful Degradation & Progressive Enhancement


What are some CMS and/or Frameworks that you know?

Most developers work in a certain framework or CMS and you should definitely know some of them. WordPress and Drupal are probably most popular Content Management Systems. There are many more. Two popular frameworks are Symfony and Django. Many e-commerce companies nowadays use Magento, which is an eCommerce software platform. If you know any of these, be prepared to talk about some pros and cons of each CMS or framework.


Tell me something about the http protocol?

HTTP stands for Hypertext Transfer Protocol and it is the foundation of data communication for the world wide web.

Here is a good article from Wikipedia:

HTTP functions as a request-response protocol in the client-server computing model. In HTTP, a web browser, for example, acts as a client, while an application running on a computer hosting a web site functions as a server. The client submits an HTTP request message to the server. The server, which stores content, or provides resources, such as HTML files, or performs other functions on behalf of the client, returns a response message to the client. A response contains completion status information about the request and may contain any content requested by the client in its message body.


For more general interview questions for web developers check out these links: 20 Interview Questions for Web Developers and General Interview Questions.

HTML Interview Questions

Here are 5 questions to start:

1. What is the W3C and what does it do?
2. When do you use a HTML table?
3. How can you improve the accessibility of an online form?
4. What are meta tags and why are they used?
5. What are some differences between a DIV and a SPAN?

For more general HTML questions for web developers check out these links: HTML interview questions and 55 HTML Interview Questions.

JavaScript Interview Questions

What is the main difference between window.onload and onDocumentReady?

Both functions are used to perform tasks when the page is loaded in the browser but they have important differences. Most importantly, "window.onload" will execute code when browser has loaded the DOM tree and all other resources like images, objects, etc, while onDocumentReady allows you to execute code when only the DOM tree has been built, without waiting for images to load. Thus, you can start scripting agains the DOM much quicker with onDocumentReady. Another important difference is that window.onload is not cross-browser compatible while using something like jQuery's document.ready() will work nicely on all browsers.


What is the difference between undefined value and null value?

In JavaScript, undefined means that a value has been declared but has not yet been assigned a value, such as null, which can be assigned to a variable as a representation of no value. If a value is null, it was assigned programmatically, as JavaScript never sets a value to null on its own. Also, undefined and null are two different types: null is an object while undefined is a type itself (undefined).


Explain the difference between synchronous and asynchronous JS request?

Most importantly, synchronous request blocks JavaScript engine until the interaction with the server is complete. The user cannot click away, cancel request, or go to another tab during this time. It is bad for user experience and that is why we have AsynchronousJAX.


Explain briefly the difference between normal array and associative arrays?

This kind of a question could be rephrased as "explain the difference between a['one']='dog' and a[one]='dog'" because the main difference between a normal array in JavaScript and associative arrays is that associative arrays use Strings instead of Integer numbers as index. But this is also kind of a trick question as JavaScript does not support associative arrays, they are objects and not really an array. More information about JavaScript arrays can be found by reading the following articles: Objects as associative arrays and Mastering Javascript Arrays.


Here is a link to more JavaScript Interview Questions: Advanced JavaScript Interview Questions

CSS Interview Questions

What is a z-index?

Z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of an element with a lower stack order.


Explain how you solved some css problem?

You should be able to explain a CSS bug that you worked on and how you went about solving it. You could talk about IE issues, take a look at these CSS problems that often need solutions for Internet Explorer.


Explain the benefits of CSS sprites?

Most importantly there is a performance benefit as CSS sprites reduce page load time by minimizing HTTP requests for different images. Usually there is also an accessibility benefit as the code degrades gracefully and shows text to screen readers, search engines, and browsers without CSS. I also think that CSS sprites are easier to manage as you are working with one image instead of many small images. Finally, you should also know how to implement CSS sprites.

jQuery Interview Questions

What are some benefits of using jQuery?

You should be able to vocalize the benefits of jQuery. It is lightweight, open source, has lots of plugins, and jQuery has a great community and user support. It is incredibly good at matching CSS selectors, it supports chains of actions, and it has many useful AJAX methods. These are just some basic reasons. You could also add that jQuery fixes many JavaScript cross-browser issues.


Name some jQuery methods.

There are so many, so you definitely should know some from your memory. How about hide(), show(), or toggle().


Here is a link to more jQuery specific interview questions: jQuery Interview Questions

More Resources for Interview Questions

1. Commonly asked JavaScript questions
2. Many JavaScript Interview Questions
3. JavaScript Quiz4. Another JavaScript Test
5. JavaScript Functional vs Object Oriented Programming
6. Building an Object Oriented JavaScript Framework
7. Web Developer Interview Questions
8. Interviewing Developers

Grabbing only Pictures out of an XML feed

Pulling Images from feeds with Google AJAX Feed API and Regular Expressions

Recently, I have been building a super aggregator and search engine website using various google APIs. The search engine is using the Google search API and most of the rss and xml aggregation is handled using the Google AJAX Feed API. But, in order to retrieve only the images out of the xml feed, I had to make modifications to the standard Google Feed API.

The xml feed had some images and some other links and text, but I just wanted to grab the linkable pictures so I had to write an extra function and use regular expressions to get rid of the content i did not want. I assume that this piece of code could be useful to other who want to just pull images out of an xml feed that contains more than just pictures.

Here is the JavaScript excerpt:

[sourcecode language="JavaScript"]
<script type="text/javascript">
google.load("feeds", "1");

function replaceit(matches){
var pattern = new RegExp("<img([^>]+)(\s*[^\/])>", "g");
return matches.match(pattern);
}

function initialize() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/TechCrunch?format=xml");
feed.setNumEntries(20);

feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var wow = replaceit(entry.content);
div.innerHTML = wow;
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
[/sourcecode]


Here is how the code works:

You define the feed on line 10, and on line 11 you set the number of entries you want to pull from the XML feed with set setNumEntries() function. If the feed loads successfully line 16 loops through the 20 items and pulls the content out of the feed. The content contains some text and links that I need to get rid of so line 19 runs the content through a function I set up on line 4.

The function uses regular expressions to retrieve the img tags and only return the images. Line 21 injects the results into the div specified on line 15 and it uses appendChild to get it done. Hopefully, this is useful to someone!

Feeds in your Blog with Google Ajax Feed API

Put RSS Feeds in your WordPress blog without extra plugins or jQuery

I started using the Google Ajax Feed API and i really like it, so I decided to write a WordPress plugin that will use the API to place rss or xml feeds on your wordpress blog. There are plugins out there already that allow you to put feeds on your blog, and one of them actually uses the Google API, it's called jQuery Google Feed Plugin but as the name suggests it also uses jQuery. jQuery is a wonderful JavaScript library but sometimes I use prototype and I don't want to load both libraries. Actually, I don't want to load any extra library, and after looking at the simplicity of implementing this, I decided that writing a wordpress plugin for this is a waste of time. Anyone can insert feeds inside their wordpress blog with just a couple quick steps:

First, get your own free Google API key and insert this javascript in the header.php file right between the <head> and </head> tag:

[sourcecode language="javascript"]
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-GOOGLE-API-KEY-HERE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.setNumEntries(10);
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>

[/sourcecode]

Now, go anywhere in your blog where you want the feeds to appear and create the div where you want the results to be displayed:

<div id="feedControl"></div>

This feed technique will allow you to insert as many feeds as you want into your blog and configure the titles, number of entries, and the style via css.

feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg"); - Here the feed url is http://www.digg.com/rss/index.xml and feed title is Digg, you can change these or add another feed using the same format.

feedControl.setNumEntries(10); - The number 10 here represents how many entries you want to display, change it if you want to show less or more than 10 entries per feed.

If you don't like this technique and still want to insert feeds into your WordPress blog, you can try these plugins:

• FeedWordPress


• Friends RSS Aggregator


• inlineRSS


• Bloglines RSS Aggregator Widget 1.0


• HeadlineAnimator


• aggregated blog feeds

Link Equity or Link Popularity

Your web page's link equity is a very significant factor that affects your placement in search engine result. Link popularity is another name for link equity and it refers to relevance of a web page by looking at its links. It's a mathematical method to calculate your online existence. Simply, a web page with more quality incoming links is more important then another web page with fewer incoming links. Incoming links refers to links that are coming from other websites to your web page. Quality of the incoming links is very important as not all incoming links are counted equal. In fact, the quality of incoming links counts more than the quantity.

Over time, your website will acquire many incoming links and search engines will give you better results. Thus, if you make changes to your website through some redesign or redevelopment, remember not to lose your link popularity. If you change your URL structure, you should utilize a 301-permanent-redirect to transfer the equity. Otherwise, you will lose search engine ranking equity, bookmark equity, and direct citation equity.

The 301 status code notifies the search engine that the resource has been "moved permanently" to a new location. It also tells search engines that the link equity from the previous URL should be credited to the new one, but in practice, it may take some time for this to occur. There are many ways to code this redirect, below there are php and .htaccess examples:

How to do a 301 Redirect with PHP:
[sourcecode language="php"]
<?php Header( "HTTP/1.1 301 Moved Permanently" ); Header( "Location: http://www.new-url.com" ); ?>
[/sourcecode]

How to do a 301 Redirect with .htaccess:

To Move a single page:
Redirect 301 /oldpage.html http://www.example.com/newpage.html

To change domain names:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^.*oldwebsite.com$ [NC]
RewriteRule ^(.*)$ http://www.preferredwebsite.net/$1 [R=301,L]

Tips for Better Google Searches

We all search for stuff and most of us use Google for our searches. Ability to search Google more efficiently will save you a lot of time. Thus, if you feel like saving some of your precious time and pulling the results you want, use some of these tips to make your searches more effective. Some of these might be obvious yet very significant. You should always think about using either/or operators, quotes for exact phrase, or “-” symbol to minus a phrase from your search. If you only use these three tips, your search results will be ten times better. Consider an example.
 
If you just type in Paris Hilton into the search, the results will include all the words: websites that talk about places like Paris, France and websites that talk about people like Nicky Hilton. This is not so obvious with Paris Hilton as an example because she is a very popular celebrity but it’s very evident when searching something with fewer results. So, if you want to see websites that only talk about the actual celebrity, you can add quotes to your search (”Paris Hilton”) and get results for the exact phrase. You can also use minus to not include certain phrases in your search. Searching “Paris Hilton” –jail should remove the websites that talk about Paris Hilton being in jail. If you want to search for one term or another, you can use the OR operator – or | as in Paris | Hilton which provides results about the term Paris or the term Hilton.
 
If you arrived on a page that is outdated or changed, it might be useful to search Google’s cache. Use the “cached:” operator to search for a version of a page the Google stores on its own servers. If you want to search for similar terms, you can use the “~” symbol. Searching for ~anorexic Nicole Richie -anorexic will result in pages that contain “thin Nicole Richie” and “skinny Nicole Richie” but not “anorexic Nicole Richie.” The “*” symbol is a wildcard and it can be used to search for a part of a phrase that you do not remember. If you want the lyrics to Paris Hilton’s song “Stars are Blind” and you only recall a part of the lyrics and search Even though the * are crazy you will get some of the proper results. The wildcard is also useful for finding stuff in only certain domains, for example *.edu to search only educational websites.
 
To search only within a certain website, use the “site:” operator. For example, site:music.com Paris Hilton will search for Paris Hilton only within the music.com domain. All the results will point to that domain. The “link:” operator will find results that link to a particular URL. If you are searching for a list of movie show times close to your zip code, you can use the “movie:” operator. For example, movie: knocked realizes that I am looking for the movie “Knocked Up” and displays the movie information, links to trailer, IMDB, and reviews. Once you select a zip code, you can see all the movie listings near you. There is also the “music:” operator that displays only music content. For example, music:Paris Hilton will only provide Paris Hilton’s music information.
 
Did you know that you can search for content in particular file types on Google? If you want to see information about Paris Hilton only in pdf files you can use the “filetype:” operator. The following search Paris Hilton filetype:pdf results in content about Paris Hilton taken only from PDF files. You can also search for your term in certain locations within websites using operators such as “inurl:”(only within the URL), “intitle:”(only within the title), “intext:”(only within the text), and “inanchor:”(only within the anchor text that describes a link). For example, intitle:Paris Hilton will display websites that only have Paris Hilton in their titles.
 
Google Search can also be used to for definitions and calculations. Use the “define:” operator to get a quick definition. define:celebrity will list a couple definitions from various sources with links. Use the +, -, *, / symbols and parentheses to do a simple equation. For example, 2+2 will perform the calculations and it’s much faster then loading the computer’s calculator. For other calculations, such as conversions you can use the “in” operator. For example, 12 usd in euro converts 12 USD to euro and 12 meters in yards converts 12 meters to the value in yards.
 
You can also search for a range of numbers. The “..” symbol is used for range and if you search for Paris Hilton 2002..2004 it will return websites that connect information about Paris Hilton and the years 2002, 2003, and 2004. Google’s algorithms can also distinguish patterns in numbers you enter, so you can search for things like weather forecast, telephone area codes, stock quotes, UPC codes, Vehicle ID numbers (US), Federal Communications Commission (FCC) equipment numbers (US), Federal Aviation Administration (FAA) registration numbers (US), Patent numbers (US), etc. For example, searching for GOOG results in Google’s stock information on the top of the search and websites below.
 
Finally, you should consider doing a vertical search or using Google’s Advance Search. Vertical Search refers to searching within a particular field instead of searching for a term across the entire web. If you are searching for something that is covered in Blogs, you can search Google’s Blog Search or if you want to only search for images, you can search Google’s Image Search. There are also tips for searching within these specific fields, such as searching for faces in image results by adding the following text string to the end of the URL: &imgtype=face. If you only want to see Paris Hilton’s face, try the following search. Notice the &imgtype=face added to the end of the URL. In the end, try using Google’s Advance Search.

Retrieving Data from MySQL DataBase with PHP

A ton of websites use PHP and MySQL for web development and most of the time they are built around some Content Management System that handles database interaction. However, if you are interested in learning how to simply interact with the database using php, then I will provide a nice example. The PHP mysql_fetch_array() function returns an array of the requested data from the table. Then, a while loop assigns a row’s data to an array called $row and the value associated with the column name on each row is written out. The following php code is modified from a Mike McGrath’s PHP for WINDOWS and LINUX book:

[sourcecode language="php"]
<html><head><title>Get Data</title></head>
<body>

<?php
#connect to MySQL
$conn=@mysql_connect("localhost","user","password") or die("Err:conn");

#select the specified database
$rs=@mysql_select_db("database_name", $conn) or die("Err:Db");

#create the query
$sql="select id,cat_name from table";

#execute the query
$rs=mysql_query($sql,$conn);

#write the data
while( $row = mysql_fetch_array($rs) )
{
echo("ID: ".$row["id"]);
echo(" Print Data: ".$row["cat_name"]."<br>");
}
?>
</body>
</html>
[/sourcecode]

I tested the script and it works great. Make sure that the table exists in your database and it has what you are trying to pull. I had something under id and something under cat_name in my table so it showed me the appropriate values. If you have questions, send me an email or comment.

Best jQuery Modal Box Plugin

These days we see Modal Windows everywhere and they are a great way to present information to our viewers. If jQuery is your JS library choice then you have lots and lots of choices of different jQuery modal box plugins. But, you just need one, a good one, so what is the best jQuery Modal Plugin?

Obviously, opinions will vary here, but I can tell you the top choices, plugins I have used on real production web sites. Many people point to the jQuery UI modal and for good reasons, it has many options and it is part of jQuery UI, so if you are using it, there is no need to load extra javascript. But, I don't personally like it, probably because I rarely use jQuery UI and if you are not using it, then you don't want all that JS for just a modal script.

That is the point, a modal is a pretty simple concept, you really don't even need a jQuery plugin, you could just write it yourself. But, if you are supporting IE browsers and need good cross-browser consistency, then a small modal box plugin is a good idea. But it needs to be small, simple, and well written. And it should also be plug and play right out of the box.

I have seen Facebox used on a couple websites and even though at first it seemed like a great little modal box plugin, now I think it's not that great. Quick plug and play installation (call the script in head and call the modal box function on document load) revealed to me that the close and loading images where not showing up. So, I need to configure the call, which is fine, but the damn thing should just work out of the box.

When looking at the script I realized that those two images where not showing up because the img src tag had a bad url configuration, and even though it is nice that the plugin allows you to neatly configure these urls, I think that such images should be image tags but background images referenced in css and there pointed to the correct image, thus, not needing any configuration.

So, not impressed so far with the way this plugin was put together, but I changed the configuration and I could now see the close image but the loading image was still not showing up. Looking at the code again I realized that there is a problem, the overlay html code (which is part of the facebox javascript) is missing an element

[sourcecode language="html"]
<div class="body">
[/sourcecode]

which is later referenced in the JavaScript. If you were not loading Ajax content into the modal you would have probably not noticed this, but I need Ajax. If you still cannot get Facebox loading image to show up, take a look at these comments. Anyways, this is a good example of a modal box plugin that I want to stay away from, you can easily fix it and configure it, but I want something much better out of the box.

I have looked at a couple other jQuery modal plugins that have been suggested by many people and here is a list of 5 that I found to be almost perfect:

ColorBox - lots of options, images via css background, support for older browsers, well written and often updated.

BlockUI - also lots of options and it has many good examples to look at before using the plugin.

FancyBox - it gives you a really neat Mac-style presentation with a ton of options in its API.

ShadowBox - another well written, highly customizable modal box plugin that supports all major browsers.

NyroModal - this one has a crazy amount of options

The last one, nyroModal, maybe should not have been mentioned, because it has so many options that it is no longer really a simple modal jQuery plugin. However, I have seen it implemented on many popular websites and it is damn powerful, so if you are looking for lots of options, that could be the winner for you.

But I am still looking for something simple yet well customizable and quickly plug and play. For me, the winner is SimpleModal. It has all the options I need, I can make style changes via css, and it is small and works out of the box. I have used it on some big production websites with great results. So, there you go, I think that SimpleModal is the best jQuery Modal Box plugin today.

Six Ways to Redirect Visitors to a New Url

PHP, JavaScript, META and Htaccess Redirection

Do you need to redirect your users to another page? There are a six different ways you can get it done, two methods using PHP, two methods using JavaScript, and one way using META Refresh or via htaccess file. There are different reasons for using different methods. Here is the code with some explanations:

1. Direct PHP Redirect: This is a direct redirection using server side PHP code without any delay. No client side code is processed (no infomation is sent to the browser), the user is immediately taken to the page specified in the PHP file.

[sourcecode language="php"]
header("Location: http://www.example.com/"); /* Redirect browser */
/* Make sure that code below does not get executed when we redirect. */
exit;
[/sourcecode]

2. PHP Redirection with Delay: This is a PHP redirect with a specified delay in seconds. During this delay, PHP code can be processed and passed to the browser. Using the code below, the user will see the message “You will be re-directed in 5 seconds…” for 5 seconds before the browser redirects user to the page specified.

[sourcecode language="php"]
header( "refresh: 5; url=http://www.example.com/" );
echo "<h1>You will be re-directed in 5 seconds…</h1>";
[/sourcecode]

3. JavaScript Direct Redirection: If you don’t know PHP you can use JavaScript to redirect. JavaScript is done on client side so it even though this is a direct redirection, it can still send information to the browser. This means that you can process some javascript and then redirect the user, or redirect the user based on some process; in the first example of PHP direct redirection you cannot process anything on the client side.

[sourcecode language="JavaScript"]
window.location = "http://www.google.com/"
[/sourcecode]

4. JavaScript Redirection with Delay: This is almost the same as the direct javascript redirection shown above, however, here you can specify a delay time similar to the delay time specified in the second PHP example. 5000 means 5 seconds.

[sourcecode language="JavaScript"]
setTimeout("location.href=’http://www.google.com/’", 5000);
[/sourcecode]

5. Meta Refresh Redirection: This redirection method uses a HTML meta element to tell the web browser to automatically redirect the user to another web page after some time. According to W3C, it is bad practive to use META to redirect becasue it does not give any info about either the original or new resource to the browser or search engine. The “back” button will also not work in some browsers. But, it’s still another way to get the job done.

[sourcecode language="html"]
<meta http-equiv="refresh" content="5;url=http://www.google.com/" />
[/sourcecode]

6. Htaccess Direct Redirectionn: My favorite way of redirecting is by using the .htaccess file. It has no delay because it is done server side and visitors get sent directly to the new page before the original page is server to the browser. Here are some ways of redirecting using the htaccess file (301 means Moved Permanently):

To Move a single page:

Redirect 301 /old-web-page.html http://www.example.com/new-web-page.html

To Move an entire site:

Redirect 301 / http://www.example.com/

Redirect www to non www version of site:

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^example\.com
RewriteRule (.*) http://example.com/$1 [R=301,L]

Redirect non-www to www:

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yoursite.com [NC]
RewriteRule ^(.*)$ http://www.yoursite.com/$1 [L,R=301]

Regular Expressions - Resources, Samples, and Regex Information

Regular Expressions are a really powerful, useful, and precise means for matching strings of text via a given pattern. They are also referred to as regex or regexp. If you have been doing any kind of development, front-end or back-end, you have probably used or seen them in action. In the front-end world, form validation comes to mind right away, but there are many uses, and it's a good idea to have some fundamental knowledge about regular expressions.

In this article I will try to provide some of the best links to resources available on the internet for regular expression tutorials, tools, patterns, and regex information. I hope it will be helpful to anyone that wants to learn more about regex or someone that is just looking for a pattern for their code. If you prefer to read a real book instead of looking at online text, I would definitely recommend Mastering Regular Expressions by Jeffrey Friedl.

As a start, I think a good place to begin learning about regular expressions is glancing at the wikipedia regex entry. Wikipedia gives you a good overview of basic concepts, history, and some good regular expression patterns and metacharacters to remember. After you have this overview, the best place to learn about regular expressions online is definitely the regular-expressions.info website. Most people that work with regular expressions daily always recommend this site as a super informative resource. Also, while you are getting introduced to regex, download a regular expression cheat sheet.

Learning Regular Expressions

If you are looking for more explanations on why and how things work in the world of regex, I would recommend these links:

How to Regex

Mastering Regular Expressions

PHP Regular Expressions

Regular Expressions for SEO

Learning Regular Expression Patterns and Samples

Most people don't really want to learn regular expressions but they are searching for a pattern for their code and need a good resource to find good regex samples and examples. The obvious problem with that is that you are just taking a guess that the pattern is good without really knowing what you are doing... but these resources are really good and provide many patterns with explanations and helpful descriptions. Also, looking at these patterns can help you learn more about regular expressions:

Regex Patterns

JavaScript Regex

Regular Expressions for Web Developers

Intro to PHP Regex

Programming Regular Expressions

Password Strength Regex

URL validation via Regex

Online Regex Testers

While you are reading about regular expressions and browsing through patterns, you probably want to try some of these yourself. Well, there are many options, you could write a quick regex tester yourself in PHP, JavaScript, or whatever language you are most comfortable with, but why not just try one of the many online regular expression tools available on the internet. Here is a list of great regex online editors (most of these have some good information and sample patterns that you can test out for yourself):

gSkiner RegExp

Rubular

RegTest Tester

Regex Pal

Regex Editor

Regex Tool


Finally, if you are looking for even more links and information on regular expressions, I think these two articles do a good job on giving you extra resources:

Essential Guide to Regular Expressions

You don't know anything about Regular Expressions

Improve Website Performance with better CSS code

This is something you should think about, everybody wants a fast page load and good website performance. Most of the time, this problem is a discussed as a client-side JavaScript issue, but sometimes, we can optimize browser rendering with better CSS code.

I'm not referring to things like minifying CSS, compression, or techniques like CSS Sprites, which definitely improve performance, but this is a good place to start thinking about CSS optimization. I want to discuss straight CSS coding and explain how you can write better CSS code by efficiently using CSS selectors.


1. Order of most efficient to least efficient: ID, class, tag, and universal. Thus, you should generally avoid the universal key selector (body > * {…}) and overall, make your rules as specific as possible.

2. Descendant selectors are really inefficient (html ul li a {…}) especially the tag or universal selectors. This is because browsers read CSS selectors from right to left. So, when the browsers evaluate even a simple tag descendant selector (#main li {…}) they do not look for the ID first and the tag children second. Instead, the browser finds all the li tags in the DOM, and then traverses up the DOM tree to find the matching #main ID selector.

3. Avoid using overly qualified selectors. I see this all the time (ul#nav {…}) and its just wasteful because ID selectors are unique by definition (ul#nav {…} = #nav {…}) so the tag name UL is not needed and extra information for the browser to evaluate. If you are thinking about readability, then just use a comment(/*ul*/ #nav {…}).

4. Rely on inheritance, learn which CSS properties inherit, and let them inherit, write less code, give the browser less work.

5. Avoid using redundant ancestors in descendant selectors. The descendant selector shown above (html ul li a {…}) has a redundant html selector, since all elements are descendants of the html tag.

6. Avoid using :hover on non-anchor elements as you might his performance issues in IE7 and IE8, and if you are coding for all browsers, you already know it does not work in IE6.

7. You should probably avoid CSS3 selectors (:nth-child) completely because they are really inefficient. Plus, they do not work in older browsers. Of course, if you don't care about certain browsers, and the alternative to CSS3 is some JavaScript code, it might be better to use CSS3.

These are some things you should be thinking about when doing xhtml/css code. These are not rules, but just advice on how to code CSS for better performance. Following these guidelines completely is actually pretty impractical as you would have a fast page with all unique ID's which is non-semantic and hard to maintain. But, it's still good information to know, and sometimes, it can help you write better CSS code.



Source and more Links:

• Google's Optimize browser rendering


• Don’t use @import

Decoding Google Maps Street View Image

Google Maps is awesome and when Google Maps Street View came out I was pretty amazed. But, I don't want to see the street view in flash, I just want to see the street view image. I did some research and it looks like I am not alone, someone already figured out how to extract image tiles from the Google Streetview service. Well, with little repetition, let's expand on this below.

Let's start with some Geo Coordinates of some random location, or maybe let's just use a Boston location shown on the StreetView Simple Example from Google Maps. It gives us a location (2 Yawkey Way, Boston, Massachusetts) but no Geo Coordinates. Well, not too long ago Google added reverse geocoding to their web services so we can easily figure out the latitude and longitude coordinates from an address:

http://maps.googleapis.com/maps/api/geocode/xml?address=2+Yawkey+Way,+Boston,+MA&sensor=true

and it gives us:

[sourcecode language="xml"]
<location>
<lat>42.3467972</lat>
<lng>-71.0988861</lng>
</location>
[/sourcecode]


Next, we need something called a pano id to generate our tiled image, and to get that we use the coordinates above in this call:

http://cbk0.google.com/cbk?output=xml&ll=42.3467972,-71.0988861

which gives us:

[sourcecode language="xml"]
<data_properties image_width="13312" image_height="6656" tile_width="512" tile_height="512" pano_id="yerN9BDKmxDjHiavUjrDNQ" num_zoom_levels="3" lat="42.346814" lng="-71.098936" original_lat="42.346814" original_lng="-71.098932">
[/sourcecode]

So, now that we have this panorama id (pano_id="yerN9BDKmxDjHiavUjrDNQ") and the available zoom levels (num_zoom_levels="3" ) we can create the appropriate grid of tiles that will compose a 360 street view image of our address. Since the zoom level is 3, our grid will compose of 6 X positions (0-5) and 3 Y positions (0-2) which together will build our big image. The url format looks like this:

http://cbk0.google.com/cbk?output=tile&panoid=[PANO ID]&zoom=[ZOOM LEVEL]&x=[X position]&y=[Y position]

If the zoom level was 1, the x and y would both be 0, and our image would look like this:

http://cbk0.google.com/cbk?output=tile&panoid=yerN9BDKmxDjHiavUjrDNQ&zoom=1&x=0&y=0


But with zoom 3 we get way more details, we get this 18, 512x512 images. Sometimes, zoom 5 is available, which gives you 338 images, all 512px in width by 512px in height. That is a lot of detail, but that is also super resourceful. It's probably why this info is not released by Google, it's not some new discovery, but if you were constantly requesting all these images I think it would be a problem.