Web International Awards

payday loan

10

MAY 2011 0

Coding a simple slider in no time

simple slider

We've published a couple of articles on sliders in the past. We first had a tutorial on building a XML powered slider, then we released the source codes and demo for the xml slider and we finally released the latest revision as the xml slider plugin. Today we're going back to basics, as I am going to show you how to make a rather simple, lightweight slider in no time. Here's a demo of what we're building today.

HTML structure

This structure will retain and contain the actual thumbs which will be displayed as the slider's content. As you'll probably figure out, I am using the 960gs to keep the structural integrity as simple as possible.
<div id="wrapper" class="container_12">
<div id="featured-wrapper" class="grid_12 all-rounded">
<div class="arrowleft"></div>
<div id="featured-thumb" class="grid_12 alpha omega all-rounded">
<ul id="featured-thumb-list"></ul>
</div>
<div class="arrowright"></div>
<div class="clear"></div>
</div>
</div>
The wrapper is used to hold the entire contents of the page in the center of it. featured-wrapper will hold the next, previous arrows as well as the featured-thumb div that wraps the thumbnail list. featured-thumb will have overflow set to hidden so that only a couple of thumbs are shown at a time. The unordered list will be shifting left to right when users click the arrows to reveal other caricatures. Before we get there, here's the code that is used to display the thumbs. The following piece of code will be repeated inside the unordered list depending on how many thumbs we want to display.
	<li class="grid_2">
	<a class="all-rounded" href="#">
		<img class="all-rounded" src="thumb_featured.png" alt="caption title" width="120" height="150" />
		caption title
	</a></li>

Styling the slider with a sprinkle of css

#featured-wrapper { padding:0px; margin-top:35px; margin-bottom:35px; height:207px; }
#featured-wrapper .arrowleft { position:absolute; display:block; width:49px; height:61px; float:left; margin-left:-25px; margin-top:55px; z-index:100; background:url('arrow_left.png') no-repeat; }
#featured-wrapper .arrowright { position:relative; display:block; width:49px; height:61px; float:right; margin-right:-27px; margin-top:55px; z-index:100; background:url('arrow_right.png') no-repeat; }
#featured-thumb	{ position:absolute; background-color:#FFF; border:1px solid #CCC; text-align:center; z-index:50; padding:15px 0px; overflow:hidden; }
#featured-thumb-list { width:20000px; float:left; margin:0px; padding:0px; }
#featured-thumb-list li a { text-decoration:none; }
#featured-thumb-list li img { background-color:#F1F1F1; border:1px solid #CCC; margin-bottom:10px; }
I left out the code for the grid system. What this piece of css does is it sets the width and heigh of the div that wraps the slider controls and content, it positions the arrows and displays their background images (I used background images for the arrow design). It also sets the structure and overflow of the featured-thumb div that wraps the list of thumbnails. Finally, it applies some basic styles to the thumbnail placeholder and the links used for each thumbnail.

jQuery functionality

function featured_thumb(maxwidth)
{	// featured thumb functionality
	if((typeof maxwidth=='undefined')||(maxwidth==null)){maxwidth=900;}
	$('.arrowright').live('click',function(){
		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))&lt;=-maxwidth) 		{ 			$('#featured-thumb-list').stop(); 			$('#featured-thumb-list').animate({ 			    'margin-left': '-'+maxwidth 			  }, 500, function() { 			    // Animation complete. 			  }); 		} 		else 		{ 			$('#featured-thumb-list').stop(); 			$('#featured-thumb-list').animate({ 			    'margin-left': '-=160' 			  }, 500, function() { 			    // Animation complete. 			  });	 		} 	}); 	$('.arrowleft').live('click',function(){ 		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))&gt;=0)
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '0'
			  }, 500, function() {
			    // Animation complete.
			  });
		}
		else
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '+=160'
			  }, 500, function() {
			    // Animation complete.
			  });
		}
	});
	// end featured thumb functionality
}
 
jQuery(document).ready(function($)
{
	featured_thumb(850);
});
In the above javascript snippet we define a function which adds the required functionality to the slider. Its sole parameter is the maxwidth variable, which is the maximum width of the margin-left property which is modified to move the thumbnail inside the placeholder. So if the placeholder is 800 px in width and the maxwidth variable set to 850, the thumbs will move around in a 1650 box. There are two onclick events (lines 4 and 24) which basically trigger the same functionality that is applied in opposite directions (left and right). To move left, we add pixels to left margin. To move right, we subtract from the left margin. Because the margin-left attribute is defined as X px;, where X is a number, we parse this value into a float (to allow negative values also), then we round the number (to prevent anything bad going on) and compare the value with 0 or maxwidth depending on the direction we're headed to. If we're going left and by clicking the left arrow the margin would become greater than 0, we have reached the end of the slider and we therefor stop the animation from sliding the content even further. If you try many repeated clicks you'll this code will even perform an effect similar to a bouncing effect. Similarly, if moving the content to the right, the margin is compared to negative maxwidth (<=-maxwidth). If we reach this threshold, once again we're at the end of the thumbnails box and the animation needs to be stopped to prevent moving the thumbnails further. To conclude, I guess that in order to reduce the size of the code one can write an extra function for the onclick behavior and call it when needed instead of copy pasting it into each of the events and doing the minor customization I've done.

3

MAY 2011 4

Start passenger standalone on server restart or on service failure

We've had this problem with our own servers and rails apps running on Passenger standalone and turns out there are a lot of you experiencing the same problems from time to time. This short tutorial will help you solve the following problems:

  1. How can I keep Passenger Standalone up even after a server restart?
  2. How do I run health checks on Passenger Standalone?
  3. How do I automatically restart and spawn a rails app if it crashes under Passenger Standalone?

There are a number of fixes for the above issues, but there isn't a simple one to fix all in one. Or at least I haven't come across any of them. One fix for the first problem was placing a script in /etc/init so that passenger would start when the server is rebooted. This however didn't fix the other two issues as it would only start Passenger when the entire server would start, meaning Passenger wouldn't be started if for example the server ran out of memory, something crashed the rails apps etc.

The best fix I could think of was creating a script that checks whether Passenger standalone is running every minute and if it isn't, then start it. This fix would work for all scenarios: server reboot, application crash. Moreover, as the script would run as a cronjob every minute, it would also perform a health check on all running apps. Here's the code for the script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/bin/bash
 
/usr/sbin/lsof -i :13007 > /home/{USER}/rails_apps/{APP1}test
 
if [ ! -s /home/{USER}/rails_apps/{APP1}test ];
  then
    # passenger down
    date
    . "/usr/local/rvm/scripts/rvm"
    rvm use 1.9.2
    cd /home/{USER}/rails_apps/{APP1}/
    passenger start -a 127.0.0.1 -p 13007 -d -e production --user {USER}
fi
 
/usr/sbin/lsof -i :13008 > /home/{USER}/rails_apps/{APP2}test
 
if [ ! -s /home/{USER}/rails_apps/{APP2}test ];
  then
    # passenger down
    date
    . "/usr/local/rvm/scripts/rvm"
    rvm use 1.9.2
    cd /home/{USER}/rails_apps/{APP2}/
    passenger start -a 127.0.0.1 -p 13008 -d -e production --user {USER}
fi

The above example is for a server running two apps on Passenger Standalone behind apache on ports 13007 and 13008. Replace {USER} , {APP1}, {APP2} with your own configuration. Once you've written your file, save it to /home/{USER}/rails_apps/health_check.sh and then add a cronjob to run it every minute, 5 minutes or whenever you want.

The code above checks whether there are any processes listening on the ports defined for each app. If there is a single process, the output will be written to a file which will have a file size greater than 0. If there are no processes listening on that port, the file size will be 0. The next step is to check the file size. If it is 0, our app is not running and we can start it. Simple as that. And it works for reboots, crashes, integrity and health checks and more.

If you're wondering what's with the date command, here's the answer. In my cronjob I've set the output of the command to /home/{USER}/rails_apps/health_check.log. If any app is started (meaning it was down for some reason) I will have the info and the timestamp in the log. I can then look throughout the apache / nginx / rails logs at that specific timestamp and identify the problem that caused the app to crash, if there were any bugs.

15

APR 2011 0

Dealing with Magento’s Transactional Email preview issues

We've recently had to tackle a issue with transactional emails in Magento for a client of ours. Magento has a nice way you can configure transactional emails in admin and preview them before using them in production. However, every once in a while things start to go really wrong and the following error is well known throughout the Magento community:

PHP Fatal error: Call to a member function getAllItems() on a non-object in …template/email/order/items.phtml on line 38

If you look inside the code for items.phtml, on that specific line you'll find a for statement trying to loop through the items in an object that can be nil and it isn't tested for nil. I assume Magento's developers really considered that there can't be a single case when that object can be nil. Unfortunately it can and unfortunately it will throw nasty errors in the view.

Attempt 1: New Order Confirmation Template settings

The error may be triggered because you've missed to assign the (new) transactional email to the order in Magento's Admin section (Admin >> System >> Configuration >> Sales >> Sales Emails >> New Order Confirmation Template). If you get to Sales Emails tab in Magento's admin, you'll find a drop down for New Order Confirmation Template. Select the desired option then go to cache management and clear your cache. After you do these steps the previews should work just fine.

But what do you do if they don't work just fine?

Attempt 2: copy original files from frontend

It may be the case that the files required to process the preview got corrupted or messed up somehow. A fix for this issue would be to back up all the files that you have in your Magento installation {root}/app/design/adminhtml/default/default/template/email/order/ . Once you've backed them up copy the contents of /home/{user_account}/public_html/app/design/frontend/default/default/template/email/order to /home/{user_account}/public_html/app/design/adminhtml/default/default/template/email/order and things should resume their normal behaviour. Perhaps you should once again clear your cache.

Still not working?

Magento requires a lot of resources and some installations may be using Memcached. I even recommend you start using it if you don't. But when you're debugging Memcached may make you really unhappy if you forget about it. You should check if you're using Memcached or not, and if yes, you should log in to your server via ssh, then flush Memcached and voila, the transactional emails preview will work like a glove and the ugly "PHP Fatal error: Call to a member function getAllItems() on a non-object in …template/email/order/items.phtml on line 38 " error be gone.

In order to flush Memcached you should telnet to the service. Usually it's easily done by running telnet localhost 11211 and then flush_all. Once you do this you can quit telnet or just before that check your Memcached status using stats

18

FEB 2011 0

Always ask the right questions in your webforms!

Before diving in into the issue, I'd like to point out this great article over Usability Post that describes a delicate issue: using verbs on labels and buttons. Applying the same idea, it's best if you asked the right questions too. You wouldn't want to confuse the users and give them headaches while answering your questions. This matters on each question of you form, from the most complicated to the simple captcha questions.

So, don't ask if I am human and expect an answer other than yes or no. SDUIHA or jgV54D is not a valid answer if you asked me if I were human. Imagine you asked a Japanese what was their name and they replied Sushi. Now that wouldn't be a great start, would it? So to wrap things up, never ask anyone if they're human and expect gibberish in return. One bad example from Hongkiat is just below.

Form asking if I were human and expecting gibberish in return instead of yes or no

15

FEB 2011 0

Drop ftp and switch to unison

Preview of unison

This article is directed to those of you who use on a daily basis any FTP program to transfer files back and forth between computers, development and production environments and more. Doing it via FTP comes handy compared to file uploading plugin in CPanel or Plesk for example, but when it compares to rsync or unison, FTP seems so old and time consuming.

Not familiar with rsync or unison?

Rsync is an open source utility that provides fast incremental file transfer. You can easily use it to backup your disk, upload files onto a test server while coding them locally. There are some great things you can do with this tool:

  1. Initiate synchronization between two folders (and their sub-structure). These folders could be a local folder of a webapp and its public server brother. It may very well be your root folder on your pc and the root folder of an external backup disk.
  2. Start modifying files in any of the two folders, then sync the other one. This can help you easily write your code locally and deploying it on the server, or backing up vital data onto an external harddisk.
  3. Restore files you've deleted or ill modified from the secondary folder (backup).

And the list doesn't stop there. The possibilities of rsync are great...up to a point. Rsync doesn't do bi-directional transfer unfortunately and this has become, to me at least, a major drawback. You'd jump to say that I've stated the exact opposite just above. Yes, you can move files both ways with rsync, but in the case you've modified some in folder1 and some files in folder2, you won't be able to sync and keep all modifications in place by using merging. You'll have to choose which modifications to let go (which is unlikely to be the case) or do the sync yourself. But then, what would be the point of using rsync as it doesn't do much good?

Fortunately, there's a better tool called Unison which does mainly the same things as rsync, but is capable of synchronizing data both ways. If you modified files in both folders, you'll keep all modifications as Unison will transfer from one point to another the most recent files. If the same file has been modified on both ends, Unison will detect the conflict and ask you how you want to proceed. Now this is a really great and powerful feature.

Now why would you drop FTP in favor of these two?

Imagine you've got a project that has more than 100 folders, more than 1000 files, and after a bugfix you've modified files in 10 directories. The average user that hasn't any system setup or repository would write down modified files, and then browse the hard drive and the FTP account and copy/paste each file one by one, or in lucky cases, multiple at a time.

Anyway, you'd have to be really lucky to do all files in one shot. With rsync or Unison, you'd do them all in one shot, without to much worries. Moreover, if you find yourself out of the office and need to do a quick and simple fix, you can even do it directly on the server and then sync it back to your local folder. Wouldn't this be great?

Check out some more information about rsync or Unison.

2

FEB 2011 0

WebRaptor’s client area has launched

As announced at the end of last year, I'm pleased to announce that the new WebRaptor's Client Area has been released. Clients can now update their contact information, view invoices, pay them via PayPal, AlertPay or credit/debit cards and make new purchases based on special offers that are available inside the client area alone!

If you're a current client it is likely you've already received access details for your account, and you can login into the system over here. If you're a potential customer looking for awesome products to ease your life, you should keep an eye on our current specials page, because you will be able to order our products and services in a breeze.

Current specials

In the upcoming days (maybe a couple weeks) we will be releasing our newly tracking system. A lot of testing has been done and it is currently being prepared for selling. The tracking system will give you a tool to track clicks and conversions coming from everywhere. You'll be able to track Google Adwords, Yahoo and Bing ads in Adcenter, text link ads, banner ads, blog feeds. Basically you will be able to track anything that has a link attached to it and point towards your site. This application will help you improve your online advertising by directing your budget towards campaigns that actually work and get you new sales. Here are some screenshots of the new conversion ROI improvement tracking system.

Tracking system screenshot

Tracking system screenshot

Tracking system screenshot

Tracking system screenshot

21

JAN 2011 0

Freelance marketing inspiration

Freelance Folder has published a new article written by WebRaptor's CEO Bogdan Pop. In case you wish to learn about new ways to do marketing or how you can replace marketing all together check out this awesome article: Freelance Marketing Inspiration from Famous Quotes.

4

JAN 2011 0

28

DEC 2010 0

Coming next year at WebRaptor

New year 2011

First of all, I want to wish to you all a Happy New Year! Clients, blog readers, people that make comments, spammers! Everything is like this because of you! Happy New Year!

Client Area

We are getting more and more clients, expanding throughout Europe, Asia and US. In order to better our support and services, in the beginning of the new year we will be releasing our client area. We don't currently use a client area because everything we had to do up to this point was simple. Things got a little complicated, and to ensure we preserve the high quality of our services, we will be releasing a web application which will be used for project management, collaboration, beyond the scope of what we do via email, phone calls and video chats.

CONTINUE READING

20

NOV 2010 0

Latest articles

As you might have seen, the past few months have been a bit low on new articles. This was generated by a number of different factors which I don't want to list right now. Anyways, I am just trying to say that soon the weekly publishing schedule will be resumed. On the other hand, I've recently published a couple freelancing articles on Freelance Folder:

Thanks for understanding!

Page 1 of 1112345...10...Last »