There are some methods that require changing the file extension from .css to .php. However, with this method, you don’t need to do that. First of all, add the following PHP code at the very beginning of your CSS file:

if(extension_loaded('zlib')){

     ob_start ("ob_gzhandler");

     header("Content-type: text/css; charset: UTF-8");

     header("Cache-Control: must-revalidate");

     $expires = "Expires: " .

     gmdate("D, d M Y H:i:s",

     time() + (60 * 60)) . " GMT";

     header($expires);

}

Now we need to tell the web server to process our CSS file as a PHP file. We can use a .htacess file to do that:

<Files yourcssfilename.css>
AddType application/x-httpd-php .css
</Files>

Don’t forget to change “yourcssfilename.css” to the name of your CSS file.

For some reason, in my Media Temple host this directive does not work. Instead of that you can use:

<Files yourcssfilename.css>
SetHandler php-script
</Files>

Here is a screenshot of Firebug’s network tab. As you can see, the browser is loading a CSS file called styles.css and its size is 24.4KB.

Here is the same file, but using the compression method described above. Now the size of the file is 5.2KB.

Do you know a better method to do this? Any ideas that contribute to optimize CSS loading? Please share your thoughts in the comments section.

Apple co-founder Steve Jobs, who changed the daily habits of millions by reinventing computing, music and mobile phones, died Wednesday at the age of 56. His death after a long battle with pancreatic cancer sparked an outpouring of tributes as world leaders, business rivals and fans alike lamented his premature passing and celebrated his monumental achievements.

Apple loses a visionary leader who inspired personal computing and iconic products such as the iPod, iPhone and iPad, which made Jobs one of the most significant industry leaders of his generation.

Six years ago, Jobs had talked about how a sense of his mortality was a major driver behind that vision.

“Remembering that I’ll be dead soon is the most important tool I’ve ever encountered to help me make the big choices in life,” Jobs said during a Stanford commencement ceremony in 2005.

“Because almost everything —all external expectations, all pride, all fear of embarrassment or failure — these things just fall away in the face of death, leaving only what is truly important.”

“Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.”

Slavery Footprint – Made In A Free World

Dentsu Network

Greater Dunnellon Historical Society

Fork

JuiceBox Creative

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Lega-lega online shop

Waldschmidt | Arp

Team Fannypack

The Photoshop Etiquette Manifesto for Web Designers

Marie Catribs

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Moods of Norway – Happy clothes for happy people!

Moods of Norway is a Norwegian clothing concept that combines products with a touch of Norwegian Heritage with International trends.

Multicolr Search Lab

Do you need an image with red and green color tones for a desktop wallpaper or a design project? Then use Multicolr Search Lab, a free search utility, that allows you to search through 10 million of the most “interesting” Creative Commons images on Flickr, based on the colors that you select. You can use upto 5 colors on each search. The only drawback is that you need to choose the color from a color picker, i.e. you can’t insert the hexadecimal code or RGB values grabbed from image editors.

Birrificio Irpino

Birrificio Irpino is an italian brewery and their amazing HTML5 website deserves to be in this sites of the week edition.

One Million Trees

London’s Million Tree Challenge calls on Londoners to plant one million trees over the next ten years.

nGen Works

nGen Works is a digital creative firm that provides web design, web development and internet marketing consulting services to clients in the U.S. and abroad.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

How can a SQL Injection attack be executed?

Let’s start with an example to help you to understand how SQL Injection works. Let’s take a look to the standard login window below:

Assuming that the system has a Users table, then the SQL code used to authenticate the user will look like follows:

SELECT *

FROM Users

WHERE username = 'cookiemonster' AND password = 'thepassword'

So, the username and password values are passed to the authentication program that will replace this data in the SQL section and then verify if a user matches this username/password combination. Now imagine that, instead of inserting the username and password, the user inserts the following code:

Also as in the previous situation, the username and password values are passed to the authentication program and the result will be as follows:

SELECT *

FROM Users

WHERE username = '' OR 1=1; /*' AND password = '*/--'

Kaboom! All those who understand SQL code know that the WHERE clause will return true because the username is empty, the condition 1=1 is true and the remaining code will be ignored because it is inside a comment block. Result: the attacker is successfully authenticated in our system and has access to all the features without providing a valid user! Even worse than this would be if the user inserts something like:

This will be executed as:

SELECT *

FROM Users

WHERE username=''; DROP TABLE Users; /*' AND password = '*/--'

Kaboom! Kaboom! In this case, instead of being authenticated, the attacker had deleted the entire Users table from our system! Now, do you understand the risks of SQL injection?

How to prevent this type of attacks?

There are some tips that you can follow in order to prevent SQL injection:

• Never connect to the database as a superuser. Use always customized users with very limited privileges.
• Check if the user input has the expected data type. If you are expecting a number, make sure that the user has inserted a number.
• Quote each non numeric user supplied value that is passed to the database. The problem of the examples above was that the inserted quotes interrupted the flow of the program. For example, in PHP you can use mysql_real_escape_string() or addslashes() in order to escape special characters.

I hope this was helpful to you and if you have any questions feel free to post some comments below!

Alex Buga’s Livingroom

Alex Buga is a designer from Bucharest, Romania. In his “livingroom” we can find things like his guitar, his digital camera and his Maschine device.

Kiluka

Loïc “Kiluka” Dupasquier is a 20 years-old Swiss designer specialized in web. The stunning quality of his works has been recently reward by a prestigious FWA.

Team Viget

Team Viget is a team of nearly 50 passionate, talented, dedicated folks who love working together and with our clients to plan, design, build, and market web sites and digital products we’re all proud of.

Portfolio of Tim Potter

Tim Potter is a developer from Belfast UK who specialises in clean, standards compliant websites with a focus on simplicity, usability & accessibility. His website uses soft colors and a very nice design.

Vector Mill

Vector mill is a website that provides vector resources. These elements are perfect for all intermediate and expert Illustrator users to create logos, illustrations and web designs.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Below is a screenshot of the grouping message feature.

(Click to see a larger image)

In order to disable this feature, just go to “View” on the top and uncheck the “Organize by Conversation” option.

Very easy, right? What do you think about this feature? Do you think that it is confusing? Please share your thoughts in the comments section.

The Guide to the App Galaxy by Google

“Don’t just build a mobile app. Build a business”. This is the slogan from this website launched by Google which is designed to help mobile applications developers to navigate the complexities of launching an application and building a business on mobile. By travelling through the App Galaxy you will learn how to get your app discovered through promotion, earn enough money to quit your day job, measure your success, and evaluate your current flight path to ensure you’re headed in the right direction.

Campaign Monitor

Campaign Monitor is an email marketing software package aimed specifically for designers. I’ve choosen their hiring page because of the awesome way that it is designed and the amazing effect used to navigate through the sections of the page.

Alertful

Alertful reminds you of important events by email. There’s no registration and the service is completely free. When you load the page, the very first thing that you see is the illustration of the man in the tie. He is both looking at and gesturing to the left side of the page where you can find a collection of sticky notes that help you understand the service even further by showing you some suggestions for the types of reminders that you can send with Alertful.

Buro Maisengasse

This is the website of a Austrian-based web design company. It features a clean layout with a nice color scheme. It also includes arrows at both sides of the page you slide you through the images. Click on the socket at the right and you will see a very nice animation.

Creative Dreams – Online Portfolio of Naveen Kanhangad

This is the website portfolio of Naveen Kanhangad, an Indian web designer.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

View Demo Download*

*MooTools required and not included in the download

Methods

Constructor

Initializes the progress bar object.

Syntax:

var progressBar = new TJProgressBar(element[, options]);

Arguments:

1.- element – (mixed) An Element or the string id of an Element where the progress bar will be inserted.

2.- options – (object, optional) The options described below:

createOnLoad – (boolean)  If set to true, the progress bar will be created automatically when the page loads.

isPersistent – (boolean) If set to true, the progress bar status will be stored in a cookie.

direction – (string) Direction of the progress bar. Can be “asc” or “desc”.

totalTime – (number, boolean) Time interval, in seconds, between the initial and final states. If false, no time will be used.

step – (number, boolean) The width in pixels that will be increased/decreased from the width of the progress bar. If false, this value will be calculated automatically.

timeBetweenCalls – (number) Time interval, in seconds, between each update of the progress bar. If no value is supplied, then 1 second will be used.

animation – (object, boolean) Object with the value of the duration of the animation, when increasing/decreasing the progress bar. If set to false, no animation will be used.

length – (number) Length of the background.

classNames – (object) Object with the CSS class names for the background and the progress bar itself.

start()

Starts the progress bar.

Syntax:

progressBar.start();

createProgressBar()

Creates all required HTML elements.

Syntax:

progressBar.createProgressBar();

stepTo()

Steps to the passed value.

Syntax:

progressBar.stepTo(value);

Arguments:

1.- value – (number) Value to step to.

play()

Starts playing the progress bar from the current point.

Syntax:

progressBar.play([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onPlay event won’t be fired.

pause()

Pauses the progress bar in the current point.

Syntax:

progressBar.pause([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onPause event won’t be fired.

stop()

Stops the progress bar and resets its value.

Syntax:

progressBar.stop([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onStop event won’t be fired.

reset()

Resets the progress bar.

Syntax:

progressBar.reset([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onReset event won’t be fired.

restart()

Restarts the progress bar.

Syntax:

progressBar.restart([fireEvent]);

Arguments:

1.- fireEvent – (boolean, optional) If set to false, then the onRestart event won’t be fired.

getCurrentValue()

Returns the current value of the progress bar.

Syntax:

progressBar.getCurrentValue();

Returns:

value – (object) Object with the current value of the progress bar. This object contains both values: current and percentage.

Events

create

(function) Function to execute when the progress bar is initialized.

Signature:

onCreate()

ready

(function) Function to execute when the progress bar is ready (i. e. created and added to the DOM).

Signature:

onReady()

step

(function) Function to execute when the progress bar steps to a given value.

Signature:

onStep(currentValue)

pause

(function) Function to execute when the progress bar is paused.

Signature:

onPause()

play

(function) Function to execute when the progress bar starts playing.

Signature:

onPlay()

stop

(function) Function to execute when the progress bar is stopped.

Signature:

onStop()

reset

(function) Function to execute when the progress bar is reset.

Signature:

onReset()

restart

(function) Function to execute when the progress bar is restarted.

Signature:

onRestart()

finished

(function) Function to execute when the progress bar finished its execution.

Signature:

onFinished()

Design One

Design One is a creative design agency from Birmingham, England. They specialise in the Design of Creative Marketing and Communications.

Dirt Brokers USA

Dirt Brokers is a website for all your fill dirt-related projects. It allows you to find fill dirt close to your site, to find a site close to your fill dirt or find a Contractor to move your fill dirt.

Keenan Wells

Keenan Wells is a designer and illustrator based from Chicago, IL.

Next Tuesday

Next Tuesday is a development company based on Frankfurt, Germany.

Prince Street International Films

Prince Street International Films is an independent production company using film to connect America with the rest of the world.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

kuler

Adobe® Kuler™ is a web-hosted application that allows you to generate color themes that can inspire any project. With Kuler you can explore, create and share color themes.

Stripe Generator

Stripe Generator is a tool that lets you tweak a bunch of settings to produce the stripes that you need for your own Web 2.0 application.

BgPatterns

BgPatterns is a tiny web application for making background patterns. It offers a collection of repeatable patterns for website backgrounds. Switch patterns, change pattern opacity, customize color, choose canvas, rotate and scale patterns, customize pattern location and more.

Ajaxload

AjaxLoad is a website that allows you to customize the colors of your rotating loading image. This generator only has one rotating image for now, but you can assign any background and foreground HTML colors to it and render it right there on the page. Then you can save your creation as an animated GIF file to be used on your site.

CSS Compressor

CSS Compressor is an utility that allows you to compress your CSS to increase loading speed and save on bandwidth as well.

Javascript Compressor

Javascript Compressor is a free online javascript compression tool. It also allows you to easily obfuscate your javascript code.

Yahoo! Smush.it

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.

CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. By using this technique, the performance of your website will increase. CSS Sprite Generator is a tool for generating image sprites and CSS for your web site.

ScriptSrc.net

Tired of hunting down the script tag for the latest version of your Javascript Library of choice? By using this tool you will get the latest version of the script tag for the Javascript library of your choice.

favicon.ico Generator

favicon.cc is a tool to create favicon.ico icons, that are displayed in the address bar of the web browsers.

Lipsum Generator

Lorem Ipsum is the name given to the dummy text used to demonstrate the graphics elements of a document or visual presentation, such as font, typography, and layout. To generate text, select a unit (paragraphs, words, bytes or lists) and type a length.

test everything!

Test Everything incorporates over 100 useful website checkers and validators, throughout 8 different categories, all in one place! The categories vary from HTML and CSS validators to SEO, Network, Image and Text tools.

Browsershots

With Browsershots you can view screenshots of your website as it displays in different browsers. It lets you choose your screen size, color depth, JavaScript and Flash settings. You can select different versions of each browser as well as different operating systems.

Pingdom Tools

This tools allows you to test the load time of a web page. Simply enter a URL to test the load time of all elements on that page and click on the “Test Now” button.

10 Minute Mail

10 Minute Mail is a service that offers free email addresses that last for only 10 minutes. This is perfect for forums and signing up for sites that you think will sell your email address. 10 Minute Mail does not require any registration and does not force you to use a password.

What do you think about these tools?  Do you know another useful tool for web designers and developers? Please share your thoughts in the comments section.

Bristles

Bristles specialises in general building maintenance, home improvements and property maintenance. Their website features a nice and simple design. I like the small screen at the right that displays images with the provided services.

Infinity Web

InfinityWeb designs and develops across all digital mediums including websites, iPhone/iPad apps, web based applications, interactive kiosks, and rich internet applications.

Jérôme Détraz – Designer multimédia

Jérôme Détraz is a Swiss multimedia designer. His website uses a single-page layout. Check out the way he presents his selected work!

Photography by Rickard Sund

Portfolio of Swedish photographer Rickard Sund.

UPPERDOG

Upperdog is a Swedish design agency offering strategy, design, and development. Try to resize your browser window to see the responsive design in action.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

As you can see in the image below, the FTP option in System Preferences interface is no longer available:

In order to enable/disable the FTP server, just open a Terminal window and type one of the following commands, depending of the case:

Enable FTP Server

sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist

Disable FTP Server

sudo -s launchctl unload -w /System/Library/LaunchDaemons/ftp.plist

Polecat

Polecat is a web design company based on Ukraine. Their one-page website uses really nice cartoon-style illustrations to display information about their company. I also like the fact that each section (“page”) has its own design.

iutopi

From Lio Messi’s country (Argentina) arises iutopi, a web design company. I really loved the illustrations in their website. The scrolling effect works so well with the diving theme. I like the sea level indicator and the menu at the right.

Photosheep.me – Portfolio

This is the portfolio of Lena, a web designer from Serbia.

PTARMAK

Ptarmak is an Austin-based designery. Their website has some great print-room inspired worked presented in some fun ways.

Ryan Scherf

Ryan Scherf is an independent designer, developer and entrepreneur located in Minneapolis. Its website features a simple layout with awesome graphics.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

In my case, I want to display different content on the sidebar based on what page the reader is. But, for some reason, the content was always the same in all pages, even by using Conditional Tags. After searching about this issue, I found the solution in the WordPress Codex. There they said that sometimes queries performed in other templates such as sidebar.php may corrupt certain conditional tags. And the solution for this is to put wp_reset_query() before the conditional test. For example:

<?php

wp_reset_query();
if ( is_home( ) ) {
     echo 'You are on the homepage!';
}

?>

b5 Designs

b5 Designs is a Kansas City based design studio dedicated to providing a personal and professional experience to every client.

Chris Thurman

This is the personal page of Web Designer Chris Thurman. It consists of a one-page website with a nice and clean layout and a menu that allows you to navigate through the existing anchors.

Farmhouse Fare

Farmhouse Fare features another stunning horizontal scrolling design. The Farmhouse Fare keeps a setting of an old country kitchen displayed within the background of each section. All further information is included in a lightbox with text.

Head2Heart

At the bottom of this website are shown a set of lines that seems to trace a path among the sky. As you follow the navigational numbers along the bottom it’s very simple to find information and paths towards what you’re looking for. If you enjoy horizontal scrolling websites, this is certainly one to check out for inspiration.

Unfold

Unfold is an independent digital agency established in Oslo. Their website is simply amazing! Try to scroll up or down and you will think that the website never ends.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

This extension is available on the extensions directory of each browser. Here are the links:

Facebook Chat Sidebar Disabler for Google Chrome

Facebook Chat Sidebar Disabler for Firefox

Facebook Chat Sidebar Disabler for Opera

Enjoy!

Please, share your thoughts in the comments section.

Keith Homemade Cakes

Keith Homemade Cakes is the website of a bakery based in Brighton that specialises in making cakes. The website is pretty well designed and uses a nice font type for the titles and menus.

Above the Fold

Above the Fold is a book about the fundamentals of sound communication design set within the context of the Web. Above the Fold looks at the basics of hierarchical communication with the specific considerations inherent in Web design. The single-page website consists in a fixed top panel that displays the menu and allows you to navigate to the other sections.

Best App Ideas

Do you have an app idea that has the potential to be a huge success, but you don’t have the money to build it? Best App Ideas can help! They allow people with great ideas to connect with people who have the funds to make an idea a reality.

Marco Rotoli

This is the personal portfolio of Marco Rotoli, a visual designer based in London. It’s another single-page, HTML5 example. It lists all projects horizontally and, inside each project, we can see the project details vertically.

mISVStyle

mISVStyle.com is the personal portfolio of Sergey Pozhilov, a freelance web designer and developer. It’s also a single-page website that displays all sections in vertical panels.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Apple claims that there are over 250 new or changed features in Lion, including:

AirDrop is a service that provides the ability to share files with nearby users of the operating system wirelessly — no Wi-Fi network required.

Auto-correction now behaves much like on iOS devices, displaying suggested spellings below the word.

Auto Save – As in iOS, documents in applications written to use Auto Save will be saved automatically so users don’t have to worry about manually saving their documents.

Full-screen apps – Native, system-wide support for full-screen applications. Supporting applications have a new button in the top right of the app window. By clicking this button, the applications will be opened in full-screen mode. You can have multiple full-screen apps open at once — along with multiple standard-size apps.

iCal has an updated user interface, an annual view, and supports full-screen view.

iChat now has support for logging into Yahoo! Messenger. Users can audio and video chat with other iChat users using their Yahoo! accounts.

Launchpad – An application launcher that displays an icon grid of installed applications. Each application is represented by an icon, and Launchpad creates as many pages of application icons as you need.

Mac App Store – An application store built in the image of the iOS App Store. It was first released for Mac OS X Snow Leopard and, like in iOS, it lets you browse and download thousands of free and paid apps that you can start using right away on all your Mac computers authorized for personal use.

Mail 5 – Uses an iPad-like user interface, has a fullscreen-optimized view, uses chronological “Conversations” to organize messages and supports Exchange 2010.

Mission Control brings together Exposé, Dashboard, Spaces, and full-screen apps to give you one place to see and navigate everything running on your Mac.

Multi-Touch Gestures transform the way you interact with your Mac, making all you do more intuitive and direct. Similar to iOS, additional gestures performed using a multi-touch input device will allow the user to scroll, swipe to different pages, and enter Mission Control.

Preview gets several features, including full-screen support and the ability to sign a document just by holding your signature up to an iSight or FaceTime camera, and Preview uses sophisticated image processing to turn it into a pen-perfect signature annotation.

QuickTime also gains several features like full-screen support, the ability to rotate clips, capture a region of the screen or share your video directly to Vimeo, Flickr, Facebook, iMovie, and Mail.

Resume – Applications are launched exactly in the same state as you left them as already seen in iOS.

Safari – With full-screen mode, tap/pinch to zoom in and out, improved graphics performance, and the ability of auto setup your Gmail and Yahoo! accounts in Mail.

Screen Sharing now allows remote users to log into a separate user account from the one that is currently logged in. That means that a user can login without interrupting someone else who might be using the computer under a different login.

Spotlight – Now you can drag items from the Spotlight menu and when you choose Search Web from the Spotlight menu, Safari opens and displays search results using your default search engine.

Terminal has extra features, including full screen mode.

TextEdit gains a new formatting bar that provides a convenient access to fonts, colors and other editing options. The new TextEdit also supports Apple’s new auto saving and versions technologies.

Versions – It works like a conventional version control system allowing you to keep an automatic record of your documents as they evolve. It also allows you to create a manual version of your document, compare various versions of your documents side-by-side, copy between versions, restore previous versions and delete older versions.

Image from http://www.apple.com

So what do you think about the new Mac’s version? Please, share your thoughts in the comments section.

Google Body

Google Body is a WebGL application that lets you explore a high resolution, interactive 3D model of the human anatomy, from the skin down to the nervous system. WebGL is a software library that allows Javascript to generate interactive 3D graphics within any compatible web browser.

efingo

efingo is a single-page portfolio with a modern design. It features a very easy navigation system (by using the menu, or, of course, scrolling up/down the page).

Zeitgeistbot

Zeitgeistbot is a gallery of artistic exploration, experimentation and research into social media art, folksonomy art, interactive motion tracking art, and cell phone art. Its purpose is to explore ways of translating data into interactive art pieces. The website’s navigation is very original, performing some kind of “transitions” each time you click on a menu item.

II Congreso Internacional de Autismo en Murcia

This is a flash-based website of the II International Autism Conference at Murcia, Spain. It contains an English link on the homepage that, unfortunately, doesn’t work. However, in the Spanish version, we can see that it has a very nice way of jumping to each section of the website.

Kisko Labs

Kisko Labs is a Finland-based web design company. They have a great website which is similar to others presented today but with a very important detail: the menu is fixed at the top of the page, allowing you to navigate wherever you want to go without losing the possibility of using the menu again. Nice work!

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

They decided to remove the online users list that was displayed when the users clicked on a small button located at the bottom right.

Now instead of displaying the online users only, they are showing a list of friends with whom you interact frequently. This is really annoying because this list also includes offline friends. So if the Facebook friends you usually interact with are all offline, then you will see a list with only offline friends and you need to search for the other ones.

Fortunately there is a solution for this problem:

• Open a new tab or window in the browser were you are logged in into your Facebook account.

• Open this link on that new tab: http://www.facebook.com/presence/popout.php

That’s it! In this window, you will see the complete list of your online Facebookian friends. Please share your thoughts in the comments section.

HTML5 Rocks: HTML5 Presentation

A great Interactive Presentation written in HTML5 that demonstrates all exciting new stuff in HTML, CSS and Javascript a number of features with examples. You can use this presentation to learn more about HTML5. It was developed by Google.

CSS3 Patterns Gallery

Lea Verou is a skilled web developer who has created this amazing gallery with a lot of CSS3 pattterns. Yes, that’s right, only CSS3, no images. And she also is generous and gives us all the required CSS code to accomplish each pattern.

Modernizr

Modernizr is an open-source JavaScript library that allows web designers to take full advantage of everything in HTML5 and CSS3 that is implemented in some browsers. It detects whether the current browser supports CSS3 and HTML5 new features and elements, allowing you to use the browser’s native implementation. We all hope that, in a few months, libraries like this won’t be needed, because all browser’s developers will release new versions allowing their browsers to support all new HTML5 stuff and all users will install these updates and all developers will live happily ever after.

Tileables

Tileables is a website which creates and shares various sets of beautiful patterns.

Comic Sans Criminal

Comic Sans Criminal is great and well designed site aimed to reduce inappropriate use of Comic Sans font. It features a good navigation: you only need to click anywhere on the page and the next “slide” will automatically appear in the center of the page.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Bookmarks

A bookmark, also called favorite, is a saved link to a Web page. Most of modern browsers supports the creation of bookmarks. The list of bookmarks is saved internally by your browser, allowing you to quickly get back to a Web page later. The problem is when you use more than one computer (for example one computer at home and another at your company) and you have bookmarks on each of them. Keeping all bookmarks always synchronized is not an easy task. For this problem, Google has the perfect solution: why you should store your bookmarks locally on you browser, if you can store them online?

With Google Bookmarks, you can save your bookmarks and navigate to them in seconds. Unlike browser bookmarks that are stored on a single computer, Google bookmarks are stored online, in your Google Account. This means you can access them from any computer with an Internet connection.

Calendar

Nowadays, people use technology to make their lives easier. One of the most common examples is keeping a digital Agenda of future events. Your mother’s birthday, your wedding anniversary, an important meeting, etc are always stored in the Agenda. Also, most of these applications allow you to set up a reminder (like an email) a few days before the event.

With Google Calendar, it’s easy to keep track of life’s important events all in one place. It allows you to share your schedule in order to let your co-workers, family and friends see your calendar and view schedules that others have shared with you.

By using Google Calendar you will never forget another event again, because it allows you to set up custom reminders. You can choose to be notified by email or get a text message sent to your mobile phone.

Docs

Digital documents are now part of our lives. Whether at school or at work, somehow we are forced to deal with text documents, presentations or spreadsheets. Could there be an online program that allows you to create or edit these types of documents and store them online, for free? The answer is: Yes! Its name is Google Docs.

Google docs allows users to create and edit text documents, spreadsheets and presentations online. The documents can be imported through the web interface, or sent via email. It allows you to save your documents to a local computer in a variety of formats including: (ODF, HTML, PDF, RTF, Text, Microsoft Office). It also automatically saves your documents to Google’s servers to prevent data loss, and a revision history is automatically kept.

Gmail

Gmail is an email service provided by Google. Currently, it provides more than 7 GB of free storage. It allows you to send messages up to 25 MB, including attachments, which is larger than many other mail services support.

It has a effective and powerful spam filtering system. When any user marks an email as spam, this provides information to help the system identify similar future messages for all users. In fact, in more than five years of using Gmail, I’ve seen fewer spam messages in my inbox, compared to other email providers. Gmail also offers virus filtering by preventing you from sending an executable file as an attachment.

Gmail also allows you to organize your email messages by using labels. Labels are similar to folders, but also allows you to add more than one to a single message. By giving colored labels to important emails, you’ll be able to view your inbox and quickly find your stuff.

Reader

A web feed (or simply feed) is a data format used for providing users with frequently updated content. This is a very convenient way of staying up to date with the content of a large number of sites. When you subscribe to a feed, you don’t need to visit a website in order to read the last articles or news. Simply add the feed to a feed aggregator and you will be able to get the last updates.

Reader is a Web application which aggregates syndicated web content such as news headlines and blogs in a single location for easy viewing. It’s capable of reading Atom and RSS feeds online or offline.

Google Reader also offers “Play”. Play is a fast and fun way to browse interesting stuff on the web. It presents a slideshow interface which displays popular items one at a time. It allows you to like, share or star the items that are being displayed. With this information, Google will show you similar items the next time you visit Play.

So, do you understand now the reason why Google controls my life? All my email messages go to Gmail, I use the Calendar in order to organize important events of my day-to-day, all my bookmarks are stored in Google Bookmarks, my web feeds are stored in Reader, and I have a lot of important documents (specially text documents and spreadsheets) stored in Google Docs. All I had to do was to create a Google account, for free!

Bonus: Google+

Google+ is is a social networking service recently released by Google. Clearly is Google’s biggest attempt to rival the social network Facebook.

 Google+ main features are:

Circles, which enables users to organize contacts into groups. Organization is done through a drag-and-drop interface. This system replaces the typical friends list function used by sites such as Facebook.

Hangouts, that are places used to allows group video chat (with a maximum of 10 people participating in a single Hangout at any point of time).

However, unlike Twitter and Facebook there is not yet an API that enables software developers to interact with Google+ by programming

Ball Pool

A great animation created using canvas element. Start by shaking the browser, then click on an empty space to create new balls, drag some others to move them and double click to reset the screen.

CSS Zen Garden

This website shows what’s possible with CSS-based design. Graphic designers from around the world submit their style sheets to change the visual presentation of a single HTML file. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS (and supporting imagery).

Sleeves

Sleeves is a website where you insert your Zip Code (only in USA) and it tells you whether you should leave the house with short or long sleeves. Original, simple and nice looking.

Fresh01

I simply love their creative navigation. As long as you scroll the page, the blue balloons at each side indicate the type and date of the post.

JotForm

JotForm is a free web form builder. When you need to create forms quickly, JotForm is your best friend. You don’t need to waste time with things like registration. Just create your form and post it on your web site. Literally in minutes. No ads, no logos, very good!

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Nerd Communications

Imagine being a hybrid of filmmaker, architect and cook. A clone of a writer, psychologist and gardener. Imagine being born in the 80s, living in 2015 but feeling at home in the 60s. Imagine, all the time, having images, sounds and ideas in your head that are so strange you do not know whom to share them with.

Imagine you are one of us.

The creators of Ben the bodyguard (one of the sites of the last week), Nerd Communications, have one of the best websites that I’ve seen in my life. Click on the link and yes, Be Curious… You’ll love it!.

10K apart

Could you build a complete web application using less than 10 kilobytes? Well, some developers answered: Oh yeah baby! The submitted 367 web applications prove it. If you check the list of applications you will found from casual games to Rich Internet Applications.

Carbonmade

Carbonmade is a website where you can manage your online portfolio with a set of tools that allow you to change how to display your work.

Midomi

Midomi is a website where you can search music by singing or humming. There are about one million contributions to its index based on user contribution in multiple languages.

TinEye

TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

When to protect a file/folder?

There are many situations that will lead you to protect specific parts or sections of your website, for example:

• You’re building a new website, but you only want yourself (and maybe your client) to be able to view the work-in-progress.
• Your website has some paid content that only subscribers should be able to access.
• Your website contains an area that you never want the general public to have access to – for example, your web stats or private pages.

In order to protect a file/folder by using this method, you will need two files: .htaccess and .htpasswd. Now let’s see how it works.

.htaccess File

AuthType Basic

AuthName "The Protected Area"

AuthUserFile /path/to/.htpasswd

Require valid-user

The AuthUserFile directive tells the web server where the .htpasswd file, that contains the list of all valid users, is located.

.htpasswd File

thebigboss:$apr1$2O.UM/..$Onwuzv311CRytNyAUysYL.

samuelljackson:$apr1$hE/XM/..$99rODul5uFkQgn9vbEosb1

The .htpasswd file contains the usernames and passwords of the users, one per line. The passwords are “encrypted” using MD5 for security reasons.

Ben the Bodyguard

Ben the Bodyguard is an application for iPhone® and iPod touch® that will become your personal guardian for all your most sensitive and secret data. Ben is able to protect passwords, contacts, text, reminders, photos and videos. I don’t know if all these features are true, but the website is simply amazing. It’s an interactive site styled like a graphic novel. As we scrolling down on the webpage, a mysterious Frenchman named Ben walks along a dark street, musing about security in an unsafe world. “I am not here to judge. I am here to protect. Photos, videos, whatever”.

HTML5 Canvas Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5′s canvas element can do.

HTML5 Canvas and Audio Experiment

A comfortable and fantastic animation created with HTML5′s canvas and audio tag.

JavaScript Fireworks – A Chrome Experiment

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

Alfa Romeo 159 – Vivez l’expérience 159

Description? Simply “Vivez l’expérience 159”.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

Allow directory browsing

If you don’t include an index file in a directory, most servers are configured to display a “Forbidden” error message. However, sometimes you need to list all files and folders contained in the directory. To do this, you only need to add the following line to your .htaccess file:

Options All +Indexes

Prevent directory browsing

Sometimes, servers allow you to browse a directory if you don’t include an index file on it. But you can prevent that by adding a single line to your .htaccess file:

Options All -Indexes

Set the default page of each directory

If for some reason you don’t want to use an index page in each directory, you can change the default page visited when someone reaches that directory by adding the following directive:

DirectoryIndex filename.html

(You will have to replace the “filename.html” section with whatever you want to use as the default.)

Customize error pages

If you want to create a custom error page that will be displayed to your visitors each time a specific error occurs, you only need to specify the error code and the file to display. Please check the following examples:

#400 Bad Request

ErrorDocument 400 /400.html

#401 Unauthorized

ErrorDocument 401 /401.html

#403 Forbidden

ErrorDocument 403 /403.html

#404 Not Found

ErrorDocument 404 /404.html

Redirect to another page (301 redirect)

If for some reason you need to change the structure of your website and need to redirect some old URLs to their new locations, you only need to add a line of code like this for each URL:

Redirect 301 /oldstructure/filename.html http://domain.com/newstructure/filename.html

Redirect 301 /oldstructure/filename2.html http://domain.com/newstructure/filename2.html

Redirect non-www to www

Sometimes you need that your users always access your website using the ‘www’ part in the URL. The following lines of code will add ‘www’ to any non-www URL:

RewriteEngine on

RewriteCond %{HTTP_HOST} !^www\.(.*)$ [NC]

RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Redirect www to non-www

Same as previous one but instead of adding ‘www’, it will remove the ‘www’ part of any URL.

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]

RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

Change PHP configuration parameters

If you need to change some PHP configuration parameters and you don’t have access to the server’s php.ini file, you can do it by using the htaccess file:

#Format

php_value setting_name setting_value

#Examples

php_value upload_max_filesize 10M
php_value post_max_size 20M
php_value memory_limit 128M

Block visitors by IP

Is there a person posting spam comments every day on your website? So it’s simple: block him! Just use the following lines of code:

<Limit GET POST>
order allow,deny
allow from all
deny from 123.456.789.321
deny from 24.112.106.235
</Limit>

Of course, you need to change the IP Addresses in order to suit your needs.

Allow visitors by IP

Are you developing a new website that is still in the tests phase and you don’t need anyone else than you (and/or your team) to access it? This is also simple: add the following lines of code, replacing the IP Addresses by the ones that you want to grant access privileges:

<Limit GET POST>

order deny,allow
deny from all
allow from 123.456.789.321
allow from 24.112.106.235

</Limit>

So, what do you think? Do you know any other useful .htaccess directives that you want to share? Then please use the comments section.

Brooklyn Fare

Brooklyn Fare proudly serves the Brooklyn community, meeting a diverse range of customers’ culinary needs. Their unusual but creative website looks fantastic with its big font size and appellative images.

Dribbble

Dribbble is a website where designers, developers and other creative people share small screenshots of the designs and applications they are working on.

Mobify

Mobify makes it easy to optimize websites for mobile devices. Nowadays, mobile websites need to work on as many devices as possible, so no users are left behind.

I Vote for Art

“I Vote For Art” is a place to buy great art at a reasonable price. Take a look around, if you like a piece, make sure you click on the thumb to vote for it… Or you can even buy it!

Twist Multimédia

Twist Multimédia is a Portuguese web design company that also offers marketing services. They have a really good website with nice illustrations and a modern navigation.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

How NOT to Choose a Password

Here are some of the types of passwords that will be picked up by crackers:

• Common words.
• Words in any dictionary.
• Your user name.
• Anyone’s name (remember that crackers don’t need to know that your first teacher’s name is Claire, or that your Dog’s name is Bobby, but it’s easy enough to get a list of 100,000 names and try each one).
• Stuff like ‘123456’ or ‘asdf’ or even ‘qwerty’.

How to Choose a Good Password

Choosing a good password is not an easy task. We need to use a strong password, really difficult to crack but we also need to remember it everytime we need to use it. One simple technique to achieve this is thinking in a phrase that we won’t forget. For example:

The best football club ever is Barcelona FC

Now, pick the first 2 letters of each word:

Th be fo cl ev is Ba

Here we have a good password, with upper-case and lower-case letters. If we want to complicate it a little bit more, we can replace some letters by numbers. For example, replacing all A’s by 4’s, E’s by 3’s I’s by 1’s and O’s by 0’s, we get:

Th b3 f0 c1 3v 1s B4

And here we are: an apparently random generated password but that actually was generated using an easy to remember phrase. I’d really like to know how long it would take for a cracker to guess this one. You can also complicate it more by replacing, alternately, all spaces by commas (,) and dots (.) or other characters that only you know. The point is to remember the phrase and method (algorithm) used to generate the final password.

Bonus: PHP function to generate random passwords

I’ve written this small function in PHP language to generate random passwords. This function receives two arguments: the length and the strength of the password.

Attention: this function was not written to generate easy to remember passwords. The final result is totally random. Is up to you find a way to remember the generated password.

/**
* Function to generate a random password
* @param int $length the length of the password
* @param int $strength the strength of the password (how difficult it will be). Min=0, Max=3
* @return string the generated password
*/
function generatePassword($length=6, $strength=0){
     // The set of characters that will be included on our password
     // By default, only lower-case letters.
     $characterSet = 'abcdefghijklmnopqrstuvwxyz';

     // Test the value of the strength argument
     switch($strength){
          case 3:
               $characterSet .= ',.;[]{}_';
          case 2:
               $characterSet .= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
          case 1:
               $characterSet .= '1234567890';
          default:
               break;
     }

     $maxIndex = strlen($characterSet) - 1;
     $password = '';
     // Get random characters from the $characterSet
     for($i = 1; $i <= $length; $i++){
          $randomIndex = rand(0, $maxIndex);
          $password .= substr($characterSet, $randomIndex, 1);
     }

     return $password;
}

//Use:

// This will generate a weak random password with 6 characters
generatePassword();

// examples of generated passwords:
// ofqkyu
// wvgosw
// eqfxlx

// This will generate a strong random password with 8 characters

generatePassword(8,3);
// examples of generated passwords:
// [AWy7GL{
// 8NOFfe_s
// QifMRu3g

So, what do you think? Is this method to generate passwords good enough or do you know other one better? What about the function? Share your thoughs in the comments section.

WallSwaps

The idea of this website is quite simple: just send them some stuff, any stuff, and they will send you one of their badges and then put your stuff on their wall. It’s not only a great idea for Erskine Design (the creators of this website) to promote their company but it is also a great way to promote what you do too. It consists in a one-page website, bigger than your browser window, but without any scrollbars. Instead, they use JavaScript to provide two cool ways to navigate around the wall: one using Ctrl key + mouse, the other by clicking on the menu buttons at the bottom of the page.

Loads In

It’s a really nice website which tells you how fast a webpage loads in a real web browser from some locations worldwide. Insert the website address that you want to test, pick a country, a browser and just go and check the results.

Justdot

A really nice looking website which uses as a background, a kind of handwritten sketch resulting in a very interesting design.

Versions

Versions offers the best way to work with Subversion on the Mac. Subversion is a software versioning and a revision control system. Its website contains a set of beautiful icons combined with a very nice design.

Gary Nock

Gary Nock is an acoustic singer-songwriter from Walsall in the West Midlands. His homepage combines a nice typeface with a set of great colors and background images of this artist.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

However, installing a lot of unnecessary extensions will slow down the browser’s performance. In this article, I’ll show you the list of extensions that I’m using and, in my opinion, are enough and useful for a web developer.

Adblock Plus

Allows you to prevent download and display of certain elements,  mainly advertisements.

ColorZilla

ColorZilla allows the picking of a color from any point in the browser, quickly adjusting this color and pasting it into another program.

Download Statusbar

It’s an extension that allows you to view and manage downloads from a tidy statusbar – without the download window getting in the way of your web browsing.

Firebug

Allows you to inspect, edit and monitor CSS, HTML, JavaScript and Net requests in any web page.

MeasureIt

Allows you to check the width, height, and alignment of any webpage or its elements by simply drawing a ruler.

Rainbow

It’s a tool that works like a color picker and eyedropper, and allows you to save and try out colors with drag and drop.

Screengrab

It allows you to capture what you can see in the browser’s window, the entire page, just a selection or a particular frame and save it as an image – either to a file, or to the clipboard.

Shorten URL

This extension shortens the current site, image or link URL using bit.ly, goo.gl, or other URL shortening services (currently supports more than 100!), and then display the result in location bar.

Tab Mix Plus

This add-on includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows. It also includes a full-featured session manager.

Web Developer extension

The Web Developer extension adds a toolbar with various options for working with web pages. It has an option to inspect CSS styles of page elements and some miscellaneous functions as clean cache, history.

Do you think that I’ve missed other important extensions? Do you use other useful extensions everyday? Please share in the comment section.

JayCut

The name of this website is a combination of DJ and the act of cutting video. It allows you to edit videos online using an interface very similar to the current most sophisticated video editors. You can upload, edit import and export video content, all for free!

Momento

Momento is an application for iPhone and iPod touch. With Momento in your pocket you can write your diary ‘on the go’, capturing moments whenever you find the time. A beautiful interface coupled with powerful tagging, makes it quick and easy to write about your day and browse moments from your past. Its website contains a wooden background (that reminds me about something…), a very nice typography and a good color combination.

CSSLayout

This is the online portfolio of Winnie, a web-designer from Edmonton, Canada. The predominant color is a strong blue that fixes very well into the background image.

Postbox 2

Postbox 2 is first class email software that puts you in the driver’s seat. Stay on task, find information quickly and act, not react. This website has one of the best designs I’ve seen and I have to admit that I loved the postbox image in the main page.

20 Things I Learned About Browsers and the Web

How does the World Wide Web work? What is a browser? And what happens if a truck runs over your laptop? Google answers these and other questions with 20 Things I Learned, a Web application that resembles a children’s book. The entire project is written in HTML5. Elegant animations and graceful transitions between pages give the application a booklike feel.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

// Case 1:
if("3" == 3){
     echo "They are equal";
}
else{
     echo "They are different";
}

// It will output: They are equal

// Case 2:
if("3" === 3){
     echo "They are equal";
}
else{
     echo "They are different";
}

// It will output: They are different

By using the equal operator we are checking if the values of the two operands are equal or not. So, in the first case, we are checking if the value of “3” is equal to the value of 3. Bear in mind that PHP tries to convert both operands to same value (“3” is a string with the value 3, and 3 is an integer with value 3, so, both operands have same value and are equal).

On the other hand, the identical operator checks the values as well as the type of operands. So, in the second case, we are checking if the value AND type (string) of “3” is equal to the value AND type (integer) of 3. So, they are not identical.

Do you know any situation where it is more convenient to use the identical instead of the equal operator? Share it in the comments section.

MailChimp

MailChimp is a powerful, easy-to-use email marketing service. It helps you design email newsletters, share them on social networks, integrate with services you already use, and track your results. It also has an excellent and beautiful website with a large monkey image and a great color scheme that allows you to never get lost on it. A great example of how good design and usability can live together.

Goplan

Goplan lets you keep track of your projects and collaborate with your colleagues securely through an intuitive user interface. Its website is also a good example of usability. When you arrive at the home page, you can understand imediately the most important features of the software, as well as you have a kind of sitemap at the end of the page, allowing you navigate to any part of the website.

Nike Better World

The Nike Better World website uses HTML5, CSS 3 and JavaScript to create a unique scrolling storyboard-style experience. The site has an original interface and fancy animations.

Grip Limited

Grip Limited is an agency based in Toronto. They have a fun website where you can lose yourself in hours of searching and reading about the company. The content is presented in a series of collapsible columns, which users scroll through horizontally and vertically. Users are also able to drag and drop the website horizontally. The text is displayed in a carnival poster style using modern typefaces. Bold use black and orange is used throughout the site.

Simó

This is the portfolio of Alberto Simo, a designer that works on this area since 1997. A good example of how you can implement great animations without using Flash.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

PHP gives us the possibility to reduce our lines of code by using ternary operators. Ternary operators are shortcut comparison operators that replace if-else statements in a PHP script.  In order to use ternary operators, the only thing that you need to do is to respect the structure: (condition) ? (value if true) : (value if false).

For example, you can write the following if-else statement:

if($food == "spaghetti"){
     $message = "Oh yeah!";
}
else{
     $message = "Oh no!";
}

Of this way by using ternary operators:

$message = ($food == "spaghetti") ? "Oh yeah!" : "Oh no!";

That’s it! One single line.

360 Cities

360 Cities collects, commissions, hosts, and organizes the world’s best immersive panoramic photography on the web. It contains a large network of virtual tours and spherical virtual reality photography. More than 50 cities from all over the world with thousands of high-resolution interactive panoramas. Try the London 80 GigaPixels panorama. Simply amazing!

Realmac Software

Realmac Software is a small independent company that develops easy to use applications for Mac. They have a clean and nice looking website that highlights their main applications.

Amazee Labs

Amazee Labs is a Swiss company that specializes in developing and running community platforms. Their website uses a handwritten style mixed with a Courier font and a simple but perfect background image.

Barley’s Greenville

Barley’s Is A Restaurant Located in Greenville. They use two big images to highlight their Beer Selection and Food Menu. I also liked their smooth mouse over effects.

SkillTesting

SkillTesting is a web application that allows you to create custom tests tailored to your specific technical needs. You can have your candidates write code right in their browser without downloading any browser plugins. It’s a good an original idea that closes the list of sites of this week.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

There are lots of services over the web where you can pay to have a website monitored and be notified when it’s down. However, they are making good money for a service that you can easily offer to yourself with minimum effort. I’m going to show you an easy to use function that will allow you to check if a website is down. This function is written in PHP and uses cURL library to get the website’s status.

/**
  * Function to check a website status
  * @param string url the url of the website to test
  * @return boolean true if the site is up, false otherwise
*/

function checkStatus($url){
     $agent = "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; pt-pt) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27";

     // initializes curl session
     $ch=curl_init();

     // sets the URL to fetch
     curl_setopt ($ch, CURLOPT_URL,$url );

     // sets the content of the User-Agent header
     curl_setopt($ch, CURLOPT_USERAGENT, $agent);

     // return the transfer as a string
     curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

     // disable output verbose information
     curl_setopt ($ch,CURLOPT_VERBOSE,false);

     // max number of seconds to allow cURL function to execute
     curl_setopt($ch, CURLOPT_TIMEOUT, 5);

     curl_exec($ch);

     // get HTTP response code
     $httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

     curl_close($ch);

     if($httpcode>=200 && $httpcode<300)
          return true;
     else
          return false;
}

Example of use

if(checkStatus("http://www.tonyjesus.com"))
     echo "Website is up";
else
     echo "Website is down";

Wing Cheng

This is the personal homepage of Wing Cheng, a webdesigner from The Netherlands. It looks like a real book and must be read like one as users need to go through all pages to reach the end. The one-page design combined with the abundance of white space works perfectly here. The website also features some great illustration work. Instead of putting previews of design work, like most portfolios do, the designer chose to create simple drawings which can then be seen in their actual colored form once clicked on.

Themify

Themify is a team of WordPress experts who build awesome WordPress Themes. Their themes are packed with a feature-rich framework and a number of useful custom widgets. They provide a framework that helps you setup a beautiful and functional website in minutes. No coding or technical skills are required.

Simplified from Metlife

A useful website with good animation, explaining how a life insurance works.

ColorSnapper

ColorSnapper is a tool for designers who are looking for a better method of color picking on the Mac. This little application, unlike Apple’s pre-bundled DigitalColor Meter, is located in the menubar for quick access. With ColorSnapper, you can quickly pick colors and retrieve them within any application you are working in.

tapmates

Tapmates is a software company founded in 2009 based in Prague. They design apps for Mac, iPhone, and iPad with a heavy focus on design.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

I’ve been a Mac user for 6 years. During this time, I’ve installed and uninstalled a lot of applications in order to test its features and value. Some applications were only installed and I’ve never used them again. Others (a very small group) are used by me every single day. I’ve compiled a clean list of 20 useful free Mac applications that you can download and start using today. These apps include some categories and can be used by anybody although the entire list is dedicated to developers.

Adium

Adium is a free and open source instant messaging application for Mac OS X, written using Cocoa API. It allows you to connect to any number of messaging accounts on any combination of supported messaging services like AIM, MSN, Yahoo and more.

AppCleaner

AppCleaner is a small application which allows you to uninstall apps. Simply drag and drop an application onto the AppCleaner window. It will search for all related files and you can delete them by clicking the delete button.

AppFresh

AppFresh is an application that helps you to keep all applications, widgets, preference panes and application plugins installed on your Mac up to date. All from one place, easy to use and fully integrated into Mac OS X.

Cyberduck

Cyberduck is an open source FTP, SFTP, WebDAV, Cloud Files and Amazon S3 browser for Mac. It features an easy to use interface, allows for the efficient browsing of large folder structures as well as quickly previewing files with Quick Look.

Dropbox

Dropbox is an appplication that syncs your files online and across your computers. Put your files into your Dropbox on one computer, and they’ll be instantly available on any of your other computers that you’ve installed Dropbox on (Windows, Mac, and Linux too!).

Google Notifier

Google Notifier is an application that shows you alerts in your menu bar, so you can see when you have new Gmail messages or upcoming Google Calendar events without having to open a web browser.

Growl

Growl is a notification system for Mac. It allows applications that support Growl to send you notifications. It offers you complete control over which notifications are shown and how they are displayed because you can easily turn notifications (specific ones or all of them) off.

iStat Pro

iStat Pro is a highly configurable widget that lets you monitor every aspect of your Mac, including CPU, memory, disks, network, battery, temperatures, fans, load & uptime and processes.

jCodeCollector

jCodeCollector is a multiplatform application that helps you to manage your code snippets. It’s written in Java and it’s available for Mac OS X, Windows XP/Vista/7 and Linux. It allows you to store, tag, comment your snippets and find quickly the code you need.

MAMP

MAMP stands for: Macintosh, Apache, Mysql and PHP. With just a few mouse-clicks, you can install Apache, PHP and MySQL for Mac OS X. MAMP installs a local server environment in a matter of seconds on your Mac OS X computer, be it PowerBook or iMac.

OnyX

OnyX is a utility which allows you to verify the Startup Disk and the structure of its System files, to run misc tasks of system maintenance, to configure some hidden parameters of the Finder, Dock, QuickTime, Safari, iTunes, Spotlight and many Apple’s applications, to delete caches, to remove a certain number of files and folders and more.

OpenOffice

OpenOffice is the leading open-source office software suite for word processing, spreadsheets, presentations, graphics, databases and more. It is available in many languages and works on all common computers. It can be downloaded and used completely free of charge for any purpose.

Perian

Perian is a free, open source QuickTime component that adds native support for many popular video formats.

Quicksilver

Quicksilver is a light, fast and free Mac OS X application that gives you the power to control your Mac with keystrokes alone. Want to start the Mail application? Just type “mail” and hit return. Too much typing? Just type “m” and select Mail from the list of results.

Remote Desktop Connection

Remote Desktop Connection is an application that allows you to quickly yet securely connect your Macintosh computer to a Windows-based computer and work with its files, applications, devices and networks.

Smultron

Smultron is a text editor designed to be easy and intuitive for both beginners and advanced users. Some of its features are line numbers, syntax colouring for many different languages, functions list, support for text encodings, snippets, HTML preview, split window, multi-document find and replace with regular expressions, possibility to show invisible characters, tabs and more.

UnrarX

UnRarX is a Mac OS X Cocoa application that allows you to expand rar archives and restore corrupted or missing archives using par2.

uTorrent

uTorrent is a BitTorrent client designed to use minimal computer resources while offering functionality comparable to other larger BitTorrent clients. To be honest, I don’t know what this program does. I think it was already installed on my Mac when I bought it. It’s the first time that I hear about BitTorrent .

VLC

VLC is a free and open source cross-platform multimedia player and framework that plays most multimedia files as well as DVD, Audio CD, VCD, and various streaming protocols.

YemuZip

YemuZip is an easy-to-use application for making zip files. Just drag, drop, give a name to your zip file and you’re done. Mac’s built-in compress function makes zip files that contain Mac specific information that, when extracted on a PC, looks like garbage. YemuZip lets you choose between a PC-friendly format and a Mac format that preserve all the Mac-specific metadata.

Help me find more!

These are some free applications that I use everyday and I consider very useful. There are a lot of websites that list +100 free applications for Mac, but most of them are rarely used or even used only once: when installed for testing. I’ve tried to create a “clean” list useful for everyone (especially developers). However, if you know any free application that can be used everyday, be sure to leave its link so we can all check it out.

Hughes

Mediocore

Kaleidoscope

Vegas Uncork’d

We Choose The Moon

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

In this post, I will show you some useful CSS snippets that you can use when developing a website.

1. Style links depending on file format

This can be used to show small icons next to the links telling the user if the linked file is a .pdf, an image, a .doc and much more.

/* pdf files */
a[href$=".pdf"]{
     background: url(pdf.gif) no-repeat center left;
     padding-left: 20px;
}

/* doc files */
a[href$=".doc"]{
     background: url(doc.gif) no-repeat center left;
     padding-left: 20px;
}

2. Style links depending of their type

This snippet is very similar to the previous one. However, instead of showing the file type, it allows to display the link type (external, email, etc).

/* external links */
a[href^="http://"]{
     background: url(external.png) no-repeat center left;
     padding-left: 20px;
}

/* mail links */
a[href^="mailto:"]{
     background: url(mail.png) no-repeat center left;
     padding-left: 20px;
}

3. Cross-browser opacity

Not all browsers support the CSS3 opacity property. However we can make opacity work across browsers by using specific code for each one of them.

.opacity {
     -moz-opacity:.80;
     filter:alpha(opacity=80);
     opacity:.80
}

4. Center a website

A very common design tendency is keeping the website centered horizontally in the browser. This can be achieved by using the following lines of code.

.maincontainer{
     margin: 0 auto;
     width: 960px;
}

5. CSS sprite button

Currently, during the creation of a website, we have to consider all aspects to improve its usability. One aspect is getting a way to indicate to the user that he has the mouse pointer over a button. We can do this by using a sprite, ie, changing the background position of an image. So, instead of having multiple images, we can have only one (this means that we will need less requests to the server) and simply change its background position using the following code.

a.button{
     background: url(sprite.png) no-repeat;
     display: block;
     height: 20px;
     width: 150px;
}

/* when mouse is over the button */
a.button:hover {
     background-position: 0 -20px;
}

6. Preloading images with CSS

On a lot of websites, when we place the mouse pointer over a button, the image background changes. However, on most of these websites, we will notice a small delay when this happens. This is because the browser needs to request the new background from the server. This delay can be eliminated by preloading the required images when the page is loaded.

#imagepreloader {
     background-image: url(path/to/image1.png);
     background-image: url(path/to/image2.png);
     background-image: url(path/to/image3.png);
     background-image: url(path/to/image4.png);
     background-image: url();
     display: inline;
     height: 0px;
     width: 0px;
}

7. text-transform property

By using this property, you can make sure that certain blocks of text will be displayed, either on uppercase, lowercase or only the first letter of each word in uppercase, regardless of the manner in which the text was inserted into the website.

/* Transforms the first character of each word to uppercase  */
p.cap{
     text-transform: capitalize;
}

/* Transforms all characters to uppercase  */
p.upper{
     text-transform: uppercase;
}

/* Transforms all characters to lowercase  */
p.lower{
     text-transform: lowercase;
}

8. Flip images

Flipping an image instead of loading a new one can be useful in some situations. For example, if you need to place an arrow in different directions in the same page, you can just this trick.

img.flip {
     -moz-transform: scaleX(-1);
     -o-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
     filter: FlipH;
     -ms-filter: "FlipH";
}

9. CSS Drop caps

Drop caps can easily be done by using the CSS pseudo-element :first-letter. This should work in all modern browsers.

p:first-letter {
     background: #ddd;
     display: block;
     float: left;
     font-family: Helvetica;
     font-size: 1.4em;
     margin: 5px 5px 0 0;
}

10. Target IE7 (and below) and IE6 (specifically)

We all know about this problem. I can’t understand the reason, but we always need to add some fixes and hacks to target the Evil IE6 and its son IE7. The most used technique is to create a different CSS file with specific instructions and add conditional comments on html page. By using the following lines, you will be able to target these two “special browsers”.

.div {
     background: red; /* modern browsers */
     *background: green; /* IE 7 and below */
     _background: blue; /* IE6 exclusively */
}

Do you know other useful techniques? You are invited to share them with me and the world in the comments section.

Bonus: How to target mobile devices?

By HTML:

<link rel="stylesheet" href="handheld.css" media="handheld"/>

By CSS via @media

@media screen { /* rules for computer screens */ }
@media handheld { /* rules for handheld devices */ }

or using @import

@import "screen.css" screen;
@import "handheld.css" handheld;

Jan Ploch’s Online Portfolio

This is the Online Porfolio of Jan Ploch, a German web-designer. Features a very interesting and original “filling bottle” effect and uses a nice vertical navigation.

Wanderfly

Wanderfly is a highly customizable recomendation engine that simply answers this basic question: “Where can I go?”. The suggestions are displayed based on budget and interests such as “beach”, “snow”, “singles”, “romance”, and “art”.  It suggests more than 1200 destinations worldwide and matches them with flights, hotels and thousands of activities with the help of partners like Expedia, Foursquare, Nile Guide, Yelp and Lonely Planet.

Cuban Council

Cuban Council is a development and branding service company with locations in San Francisco and New York. These guys created the well known Facebook logo!

Pea Soup Andersen’s Inn

This is a really nice looking website about a hotel in California. It has a good design, nice pictures and it’s very user friendly.

Atebits

This is the homepage of some Apple-related applications. Its beautiful icons  and sophisticated design allows Atebits to be in this week’s list of websites.

Did you find a really amazing website showing a new concept, an original design or a brand new feature? Are you the owner of a website that offers new solutions? Send me the URL via email  (blogtonyjesuscom)   or Twitter and tell me why you think it should be posted here.

intitle:index.of +?last modified? +?parent directory? +pdf -htm -html -php -asp

If you are looking for a specific book, just add the name after the file format:

intitle:index.of +?last modified? +?parent directory? +pdf "lord of the rings" -htm -html -php -asp

To find music, you can type:

intitle:index.of +?last modified? +?parent directory? +(mp3|wma|ogg) -htm -html -php -asp

To narrow the search for a specific artist:

intitle:index.of +?last modified? +?parent directory? +(mp3|wma|ogg) metallica -htm -html -php -asp

I hope this post doesn’t become a tool for piracy. That is not my intention. I just want to share a way to use Google and its advanced search features in order to perform a more specific search.