Selecting all friends and invite them to an event on facebook may be a very frustrating experience but here’s a little snippet to make life easier:

Step 1: Select invite friends and scroll all the way down.
Step 2: Type this script instead of the URL in your browser:

javascript:elms=document.getElementsByName('checkableitems[]');dn=0;ds=0;ac=0;for(var fid in elms){if(typeof elms[fid] === 'object'){if (elms[fid].disabled == true){ds++;} else {if (elms[fid].checked == true){ac++;} else {elms[fid].click();dn++;}}}};

You might want to use this code instead:

javascript:elms=document.getElementsByName("checkableitems[]");for (i=0;i<elms.length;i++){if (elms[i].type="checkbox" )elms[i].click()};

If using Chrome make sure to include “javascript:” as when pasting the code it removes it automatically.

Use at your own risk, with caution and respect.

ICARUS – Coming soon.

Once more where the others have failed Linked Studios has prevailed. After several failures to accomplish the project Sense Of Nature trusted Linked Studios with the development of their Magento based e-commerce platform. Working closely with their design team and project manager Linked Studios managed to achieve results that speak for themselves.

Magento e-commerce  platform

Linked Studios developed a fully fledged e-commerce solution on the award winning Magento e-commerce platform  that includes support for shop-in-shop technology. This provides the owners with the ability to have separate sections through out the e-shop thus targeting markets more effectively and efficiently.

Needless to say the e-commerce platform was developed to cater for multi language support and also enhanced with various plug-ins to incorporate on-line payment gateways and social media marketing.

Sleep tight with Kokuna.com

PokerOffice, the leading free poker software, hired Linked Studios to revamp and improve their holistic online presence.

Linked Studios was engaged with one specific target in mind: to improve conversion rates and increase sales while increasing efficiency throughout the business logic.

We managed to achieve this by:

• Migrating the website to WordPress to enable faster deployment of marketing campaigns
• Implement a more convenient payment gateway
• Designed and developed a Social Media Marketing campaign focusing mainly on facebook
• Improved back-end and business logic
• Implemented onsite Search Engine Optimization techniques
• A/B Split tested several pages

WordPress does a great job at parsing what average users insert into the content however web designers and developers like me sometimes need the code to be outputted as is without any modified br and p tags.

Online I’ve seen some weird core hacking going around but actually all you need to do is to remove a filter like so:

remove_filter('the_content', 'wpautop');

The keyword to achieve a great design for the web is smooth. Today I will focus on how to design smooth looking buttons for the web in Photoshop CS4. The idea is very simple yet few designers understand how to achieve this result hence this tutorial.

Step 1:

Start a new document in Photoshop and set the desired width and height. I opted for 200 pixels width by 40 pixels height.

Step 2:

Mark the borders with the rulers and use the ‘Rounded rectangle tool’ to cover all the canvas. Remember not to exaggerate with the radius; 3 pixels is enough.

Step 3:

Double click the shape to set up the ‘Layer Style’. Start with the ‘Gradient Overlay’ and select or make a new one that you like. Keep in mind to keep the colors on the same scale but one a bit darker than the other. Do not over do it and keep the difference to minimum. The difference must be noticeable only to the expert eye.

Step 4:

Stroke the layer with the same color selected in the darker shade of the gradient and darken it a bit further more. Set the stroke size to 1 pixel and inline position.

Step 5:

Define the ‘Inner Shadow’ and start by setting the blend mode to normal. Select white as a color and set the angle to 135 degrees. Set the distance and size of the shadow to 2 pixels.

Step 6 (pro tip):

Go back to the ‘Gradient overlay’ and toggle the reverse checkbox to see how your new button will look on hover (I will writh another article on how to do this).

Conclusion

As you can see you can achieve a great smooth looking button with ease and within a few minutes. The key is to make the the difference in colors barely noticeable  hence achieving a smooth transition in gradient.

Keep in mind that you don’t have to show to anyone that you know how to use the radius or gradients

Feel free to share your thoughts and any suggestions for future tutorials :)

This is a funny illustration I found while surfing the net and wanted to share with fellow freelance web designers and developers like me

Love them or hate them exit or welcome pop ups may have huge impacts on the conversion rates. I honestly love the simplicity of Shadowbox JavaScript multimedia player but as we all know it cannot be used as a normal jQuery plugin as it overrides the events.

Anyway! To achieve this goal simply bind the function to the event that you want the box to pop up; in our case we will use the onbeforeunload for our exit pop up. One may have noted over the web that there are some primitive highly annoying pop ups that pop up even when the user is navigating within the website! This should be avoided at all costs; to achieve this you can simply unbind the function by pointing the event to null.

Do we really need the jQuery framework for this to work? – No, but since I use it practically on all projects it makes sense to integrate it.

Exit Pop-Up with Shadowbox & jQuery

$(document).ready(function(){

    // Shadow box initialization
    Shadowbox.init({
        handleOversize: "resize",
        overlayOpacity: 0.9
    });

    // This makes sure that the pop up isn't shown
    // if the user is navigating within the website
    $(window).click(function(){
        window.onbeforeunload = null;
    });

    // Before unloading the website open Shadowbox
    window.onbeforeunload = function(){

        // for my client I opted to use the iframe setup but
        // one may go for the ajax, flash or any other setup
        // Tip: use small windows and be concise in the offer!
        Shadowbox.open({
            content:  '/exit-pop-up-page',
            player:     "iframe",
            width:      540,
            height:     380
        });

        // For security reasons every browser will confirm with user
        // whether they actually want to run this script or not so make
        // sure to put some attractive text and special offers in here.
        // -- No ... There is no way to bypass this and if there is a way
        // it isn't ethical.
        return 'Hey! ... get a 10% discount on our product!';

    }

});

Just like anything else one may use smart implementations of this and for example keep track of the current page and promote something relative. This will depend more from the marketing guys though but it’s always good to keep in mind conversion rates and how to maximize them. For example it’s usually useless to give discounts to users exiting from the home page; it would be more beneficial if you highlighted some features of your product that they may have missed. Another thing you can do is to thank the users that actually bought a product and avoid giving discounts if the user already bought the product! Just imagine how you would feel if you bought something for $100 and then on exit you get a $10 dicount! … not so good about it right?

This is a very simple task I needed to do which basically consisted of getting a domNode as a string and printing the content. This may not be very useful in an application but it may be very useful for debugging purposes.

On the PHP documentation pages I found some code which is totally unnecessary for this task which basically loops over and over the content and places a ‘ < ' and a ' > ‘ before and after each child element and prints out the content using get_content(), node_name() and attributes.

My simpler solution was to create a new temporary document, import the node and use the document’s methods to get the content as a string. Simple hah !

My simpler solution:

$temp_doc = new DOMDocument('1.0', 'UTF-8');
$temp_node = $temp_doc->importNode($myDomNode, TRUE);
$temp_doc->appendChild($temp_node);
$my_node_as_string = $temp_doc->saveHTML();

Solution on PHP Documentation:

function GetContentAsString($node) {
  $st = "";
  foreach ($node->child_nodes() as $cnode)
   if ($cnode->node_type()==XML_TEXT_NODE)
     $st .= $cnode->node_value();
   else if ($cnode->node_type()==XML_ELEMENT_NODE) {
     $st .= "<" . $cnode->node_name();
     if ($attribnodes=$cnode->attributes()) {
       $st .= " ";
       foreach ($attribnodes as $anode)
         $st .= $anode->node_name() . "='" .
           $anode->node_value() . "'";
       }
     $nodeText = GetContentAsString($cnode);
     if (empty($nodeText) && !$attribnodes)
       $st .= " />";        // unary
     else
       $st .= ">" . $nodeText . "node_name() . ">";
     }
  return $st;
  }

This code snippet fixes IE’s bug on window resize event. As you may have noticed when you use the  .resize()  and try to get the width and height of the container these are returned as 0 thus making it impossible to centre  a div. You may not need this very often but trust me  it will save you from going hell if you’ll ever need it!

IE resize Bug fix code snippet :

var resizeEventTimer= null;

$(window).resize(function(){

    //IE fires multiple events hence we don't want to delay all of them but only the last one. Hence Clear if exists
    if (resizeEventTimer){
	clearTimeout(resizeEventTimer);
    }

    // Set Timeout and delay for 100 ms (should be enough - increase if problem persists)
    resizeEventTimer = setTimeout(function(){

	// start-mycode
	var marginTop = ($(window).height() - settings.dHeight) / 3;
	var marginLeft = ($(window).width() - settings.dWidth) / 2;
	$('#myDiv').css({
	    top: marginTop + 'px',
	    left:  marginLeft + 'px'
	});
	// end-mycode

    }, 100);

});

Theory:

The idea behind this code snippet is quite simple. You may have noted that IE only returns incorrect values while resizing but returns correct values otherwise. By delaying the event with 100 ms we are allowing IE enough time to evaluate the container’s size hence returning us correct values.

Personal Note:

This is the one of the worst IE bugs I ever encountered in all my web design career if not the worst! The other one is the memory leak when using translucent PNGs in IEs which I’ll write about in the near future so stay tuned

Happy coding and leave some comments if you found this helpful or know a better way