I was looking at my friend’s Facebook profile and suddenly a thought came to my mind that how my profile looks to my friends or others. Can someone view my contact info whom I do not know, I was worried about my profile privacy. Then I asked my friend for his ID and password so that I can check how my profile looks to him.
To view your info how it looks to others no need to do this you can directly preview your profile, nobody else’s password is required. Just enter the name of any of your friend, you will be able to watch the preview how it looks to him.
Steps to view your profile preview:
Go in the Account > Privacy Settings (the below page appears > Select View Settings.
Click on Preview My Profile button.
Enter the name of your friend or someone in the text box, you want to check how your profile looks to him.
This way you can keep your profile more secure. Do you find this article useful, let me know through your comments.
Lets start with the Color Wheelwhich is nothing but the spectrum twisted around to make a complete color wheel that shows relationships between primary colors, secondary colors and complementary colors. The color wheel is particularly useful for showing how the colors relate to each other and how you can create new colors by mixing two or more colors. The wheel is divided into twelve distinct colors. In the below image you can see by combining primary, secondary and tertiary color we get the complete color wheel.
Every Designer wants to create an eye catching website but how it can be achieved. The answer is simple if he implements pleasant color schemes in his design, because color plays a critical role in graphic designing. Colorsonthewebis Web portal one must know while playing with colors. Below are few things explained, taken from the Colorsontheweb.
The Color Wheel
Color Contrast Analyzer
Color Wheel: The color wheel consist of a continual gradient of the colors in the spectrum, below image illustrates how combining primary, secondary and tertiary results in complete color wheel.
Color terms: Most commonly used terms in colors: Hue, Saturation, Tint and Shade,below image shows the difference between these terms.
Color Combination: In Various ways you can set the color combo. Choose a color of your choice and you can set different combo. What I used to do while creating a web template, I randomly select any color which I like. Indeed it is a good source one can choose color according to the below pattern to keep harmony in one’s web template.
Color Contrast: Below image illustrates different color contrast scheme.
Color Wizard : Choose a color randomly or manually, after that you can set various combination like Monochromatic, Analogous, Triadic, Tetradic etc. As shown in the image when you select any pattern it appears in the corner of the right-bottom.
Color Wheel : Select color of your choice and check varying it.
Color Contrast Analyzer : You can test if your text color is compatible with the background.
This is very useful for Graphic or Web Designer. Do you find this helpful let me know through your comments.
When I write post and highlight HTML/CSS or PHP or any other languages, I have to replace tags ‘<‘ with ‘<‘ . It consumes a lot of time to convert. An easy way to implement source code or programming language is to implement a WordPress plugin. WordPress plugin Syntax Highlighter Compress has support for many languages listed below. Though there are many similar plugin available but the advantage of using this plugin is that it loads the necessary brush files dynamically. Unlike other plugin based on Syntax Highlighter Script but these cause long page loading time and they are difficult to handle.
When you choose a plugin first look at its rating, compatibility and last updated these are the parameters one must check before testing or implementing any plugin.
The highlighted code in your post will look like in the image below more highlight styles are available, you can change the highlight setting in setting menu.
Supported Mark-up or Available Programming languages
Syntax Highlighter ComPress is a simple WordPress plugin. Code and source text of various programming languages or mark-up can be highlighted in WordPress. This plugin last updated at 2010-9-29, requires WordPress version 2.6 or higher and it is compatible with version 3.0.3. Once you have installed this plugin, activate it then an icon appears in your post text area, look at the image below, click it select language and paste your code. You can go for a Demo Here.
You can find more setting option in the admin panel settings menu. Settings option available for stylesheet, Auto-Links, Collapse, Gutter, Smart-Tabs, Tab-size and Toolbar.
Let me know if you have idea about better WordPress plugins.
Sometimes we want to share or send the video that should start playing from certain point of time, avoiding unwanted part of the beginning so that one can enjoy only the important part of it. However YouTube has a newly added feature, it appears when you right-click your mouse button on any YouTube video. Until you could do this manually by appending #t=1m15s or #t=70 to a YouTube URL.
Pause the YouTube video at any point of time, right-click select option Copy video URL at current time from the context menu to copy URL to clipboard. Share or send it to your friend to watch the video that begins from the point you copied.
You can link directly to a certain point inside a YouTube video instead of playing the whole video from the beginning. Whenever someone clicks your YouTube link, he gets the video to the exact point in its timeline. Its a nice feature that saves your time as well as internet usage.
Play any YouTube video and just check it out. Do you find this useful, Share it to your friends and get the most of this awesome feature.
The Web Developer extension adds various web developer tools to your browser. The extension is available for Firefox and Chrome. It will run on any platform that these browsers support including Windows, Mac OS X and Linux.
It is furious to restart browser having plenty of tabs open, it can slow down your browser. Bar Tab enables you when you restart your browser it only load the tab which is currently in use results in faster loading speed.
Download images from any Web sources effortlessly. Smoothly scroll through the pictures, filter and sort according to your needs. Drag and drop them into your collection basket, view slide shows, save directly at your hard disk. This add-on compatible with Windows, Mac OS, Linux.
If you are worried of being disconnected while downloading large file or movie. Then manage your download with flash got. Download all the links, movies and audio clips of a page at the maximum speed with a single click, using the most popular, lightweight and reliable external download managers like FlashGet.
As you can see the below image, I am going to make the left image look like the image in the right. It looks like a difficult one but not only the Graphic Designer Anyone who knows Photoshop a bit will be able to edit the image as shown below, in just 2-steps.
In below image I am going to discard certain part from the image without affecting its beauty. It’s a simple tutorial you can do it easily.
First take an image in Photoshop and copy the layer for backup.
Select the part which you want to drain out from the image. You can use quick selection tool or Lasso tool to make selection, here I used Lasso tool.
Go to Edit menu select Fill(Edit –> Fill), you will get the following window pop up make sure Content-Aware is selected click OK.
And its done, isn’t it a child’s play?
More Examples :
Try this out for yourself, and let me know if you like the tutorial please share your view through the comments.
You might have been observed on many web pages, when you mouse over on any image it disappears for 2-3 seconds and when you mouse over next time it works well, why it happens?
The answer is simple the image which is on hover class is not been loaded yet, as a result when you mouse over first time it takes time to load but when you mouse over next time it behaves normal because the image has been loaded to your computer and ready for the next time. Below you can see how various techniques are used to preload an image.
How to Preload an Image?
In this method we create a div and keep it at the end of the HTML document or after footer div, a class is assign to a div say preloadClass which hides the imageusing display:none property but the images are loaded at the end of the document so when you hover an image it will not flash for the first time.
I think adding extra markup to preload an image is not a good approach, especially where Web Standards are concerned. Mobile devices, may experience problems when dealing with the following preloading technique. So to avoid this we can implement Method 2.
The best solution is to use a sprite image, you just have to change the background position on hover class and you are done.
The above all technique is tested and compatible with all browsers.
CSS expert out there, do you have a better idea or solution please share it through your comments.
As we all know in Mozilla, Chrome or most of the browsers we can use CSS3 properties, but how those CSS properties can be used in Internet Explorer. A smart way is to use pie.htc or ie-css3.htc file that supports some new styles available in CSS3 standards. While I work on WordPress project I use pie.htc files, so that I can implement some of the CSS3 property for Internet Explorer here is an example how to use it.
Absolute path for .htc file
An absolute path is applied to htc file in the stylesheet for CSS3 support to IE.
The above syntax works well, as we have set an absolute path for .htc file in the stylesheet but it becomes inconvenient to move styelsheet from one domain to another.
Relative path will not work in case of .htc file
Indeed Internet Explorer does not interpret the path relative to the CSS file, but it interprets the URL for the behavior property relative to the source HTML document. This causes the PIE behavior inconvenient because the path has to be absolute from the domain root this makes the CSS not easily movable to different directory. (Note : Here pie.htc is in js directory)
We can make use of Dynamic URL for accessing .htc file
We can use WordPress function “bloginfo(‘template_directory’)” in header.php file to generate the path dynamically. Put the classes into tag within the section. Now you can use the htc file by adding classes to it separated by commas.
For my WordPress project I tried to access .htc file keeping it at different domain but could not access it, because the IE behavior property does not allow .htc file to access cross domain. You can also visit this link for reference. If you have any updates or idea about this you can share it though your comments.
Here is the Firefox extension that increases tab utility. Usually progress bar appears in the status bar but this add-on integrates the progress bar above the tabs. Progress Bar Tab is a Firefox extension that enables us to watch the progress meter above each tab when a web page is loading. The benefit of using this add-on is that you can simultaneously watch the progress bar without switching back to the previous tab.
In the below image you can notice the progress meter which is just above the tab and increases as the web page is loaded.
You might have many add-ons installed in your Firefox browser, one thing you should take care that it is not compatible with Firefox extension “Tab Mix Plus” since it implements a feature rather similar to one of Tab Mix Plus’s.
Below image is a screenshot of my Firefox browser, as you can see there are many add-ons scattered in the status bar. To arrange these add-ons according to your choice, Firefox has an extension called Organize Status Bar as its name suggest it helps re-arrange add-ons lied in the status bar of your Firefox browser.
It is useful in case, lets take an example I had the the habit to click at the right-bottom for firebug but when I installed new add-on it took the place of firebug and whenever I wanted to click on the firebug by mistake that new add-on is been clicked everytime. So I searched for an add-on that can organize the status bar icons and I finally found this add-on.
Download and install this add-on.
Option available at menu Tools > Organize status bar.
As soon as you select any item the add-on will be highlighted in the status bar.
Its easy to use one can change the add-ons position using this add-on.