Gutenberg by default comes with a handful of block types that should cover standard web content updating needs. However, it also has a nifty Block API for adding custom block types if you need them to display specially designed components for our website. In this tutorial, you are going to add a custom Gutenberg block type so that the output is a notice box with a few predefined styles that accepts arbitrary text input from the user.

This is what you’re going for.

And here is how it looks from the admin’s side.

Alright, let’s get to coding!

Step 1: Create a plugin for the new block type

You will be creating a custom block type as a WordPress plugin. This will allow you to decouple it from any themes you are using and in case anything goes wrong, you can simply deactivate it.

So create a new folder in the WP plugins folder and let’s call it gutenberg-notice-block. In this new folder, create a plugin.php file with the following code:

/**
* Plugin Name: Gutenberg Notice Block
* Author: Shaiful
* Description: A notice box with a few predefined styles that accepts arbitrary text input.
* Version: 1.0
*/

// Load assets for wp-admin when editor is active
function shaiful_gutenberg_notice_block_admin() {
   wp_enqueue_script(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.js', __FILE__ ),
      array( 'wp-blocks', 'wp-element' )
   );

   wp_enqueue_style(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.css', __FILE__ ),
      array()
   );
}

add_action( 'enqueue_block_editor_assets', 'shaiful_gutenberg_notice_block_admin' );

// Load assets for frontend
function shaiful_gutenberg_notice_block_frontend() {

   wp_enqueue_style(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.css', __FILE__ ),
      array()
   );
}
add_action( 'wp_enqueue_scripts', 'shaiful_gutenberg_notice_block_frontend' );

Basically what this file does is initialise the plugin by loading the necessary JS and CSS files at the right place and at the right time. The code above is looking for block.js and block.css, which you will create momentarily.

At this point, you should be able to see the new plugin listed in your WP Plugins admin page. Go ahead and activate it.

Moving forward, all of your coding will be done in JavaScript with some ReactJS flavour to interact with the Gutenberg Block API.

Step 2: Register the new block type

Create a file called block.js in your custom plugin folder. This file will hold the entire logic of the custom block type for the admin-side and frontend of your website.

Start by adding the following bare-bones code.

/* block.js */
var el = wp.element.createElement;

wp.blocks.registerBlockType('shaiful-gutenberg/notice-block', {

   title: 'Notice', // Block name visible to user

   icon: 'lightbulb', // Toolbar icon can be either using WP Dashicons or custom SVG

   category: 'common', // Under which category the block would appear

   attributes: { // The data this block will be storing

      type: { type: 'string', default: 'default' }, // Notice box type for loading the appropriate CSS class. Default class is 'default'.

      title: { type: 'string' }, // Notice box title in h4 tag

      content: { type: 'array', source: 'children', selector: 'p' } /// Notice box content in p tag

   },

   edit: function(props) {
      // How our block renders in the editor in edit mode
      return null;
   },

   save: function(props) {
      // How our block renders on the frontend
      return null;
   }
});

The code above registers your new block type with the name “Notice”, using a light-bulb Dashicon and putting it under the Common Blocks panel in the Gutenberg blocks browser. You should be able to see the new block in your editor at this point.

You also specify the attributes (and their data type) that your new block will be storing which are the box type, the box title and the box content.

Lastly, there are two functions called edit() and save(). The edit() function is responsible for rendering your block in the editor while the save() function outputs your block HTML on our website’s frontend.

Let’s explore them now.

Step 3: The edit() function

The edit() function controls how the block will appear in the Gutenberg editor for the user to interact with.

For your custom Notice block type, the goal is to accomplish two things:

1. The user can select the notice box type as well as enter the box title and content.
2. Selecting different notice box types will show a simple live preview of what the box is going to look like on the frontend.

Add the following code into the edit() function.

/* block.js */
edit: function(props) {
   // How our block renders in the editor in edit mode

   function updateTitle( event ) {
      props.setAttributes( { title: event.target.value } );
   }

   function updateContent( newdata ) {
      props.setAttributes( { content: newdata } );
   }

   function updateType( event ) {
      props.setAttributes( { type: event.target.value } );
   }

   return el( 'div',
      {
         className: 'notice-box notice-' + props.attributes.type
      },
      el(
         'select',
         {
            onChange: updateType,
            value: props.attributes.type,
         },
         el("option", {value: "default" }, "Default"),
         el("option", {value: "success" }, "Success"),
         el("option", {value: "danger" }, "Danger")
      ),
      el(
         'input',
         {
            type: 'text',
            placeholder: 'Enter title here...',
            value: props.attributes.title,
            onChange: updateTitle,
            style: { width: '100%' }
         }
      ),
      el(
         wp.editor.RichText,
         {
            tagName: 'p',
            onChange: updateContent,
            value: props.attributes.content,
            placeholder: 'Enter description here...'
         }
      )
   ); // End return

},  // End edit()

Line 16-49 is the main code you will use to display the user interface in a way that allows you to update the content in your block type. The code is written in ReactJS specifically the React.createElement() function is used to create new DOM elements. Do not worry if ReactJS is unfamiliar to you. You can make use of this specific tool to compile JSX template code to React.createElement() functions.

Here is an example.

It’s a good idea to create your block.css file right now so that you can test the live preview functionality in the editor. Make sure the CSS file is saved in your plugin folder.

/* block.css */
div.notice-box {
   border: 1px LightSkyBlue solid;
   border-left-width: 5px;
   padding: 10px 15px;
   margin: 30px;
}

div.notice-box.notice-success {
  border-color: MediumSpringGreen ;
}

div.notice-box.notice-danger{
   border-color: LightCoral ;
}

div.notice-box h4 {
   font-size: 18px;
   margin:0 0 10px 0;
}
div.notice-box p {
   font-size: 16px;
   line-height: 24px;
   margin:0;
}

At this point, you should be able to add your Notice block type into the editor and see three different fields for configuring the notice box. The dropdown for selecting the notice box type should also gives you a live preview between the default (blue), success (green) and danger (red) box types.

Step 4: The save() function

The save() function for your Notice block type is pretty straightforward. You just have to construct the correct HTML structure and populate the title and content into the notice box <div>. Once again the DOM elements creation code has to be written in ReactJS.

Here is the code:

/* block.js */
save: function(props) {
   // How our block renders on the frontend

   return el( 'div',
      {
         className: 'notice-box notice-' + props.attributes.type
      },
      el(
         'h4',
         null,
         props.attributes.title
      ),
      el( wp.editor.RichText.Content, {
         tagName: 'p',
         value: props.attributes.content
      })

   ); // End return

} // End save()

That’s it!

Your Notice block type should now work on both the admin and website’s frontend.

Here is the link to download the completed plugin.

Something to keep in mind

Looking at the save() function, you’d imagine that updating the HTML output in there would cause a global update for all instances of the Notice box that you have populated on your website. It’s natural to expect this (it is, at least from our experience with working with WP shortcodes). Unfortunately, this isn’t what happens.

Making any changes to the block HTML output would trigger a conflict with all existing instances of the blocks that have been populated. What’s worse is that the only way to fix this is by repopulating the blocks one by one. This is the caveat of static block types.

To work around this, make use of the Dynamic Blocks feature which hands over the save() function from JS to PHP to generate the block HTML output on the fly.

Final thoughts

The ability to create custom block types is very cool and opens a lot of possibilities for content customisation. After trying it out myself, I would say the basic concept is fairly easy to follow. The real challenge, however, is presenting the custom block in the best possible way to give content authors the best editing experience, especially for blocks with complex functionalities. I find that the official developer documentation for various attributes configurations or working with RichText field for example, are still lacking. It will improve surely but the best reference materials we have at this moment are online articles and the existing blocks that came out of the box with WP5.

On another note, I am personally looking forward to the Advanced Custom Fields (ACF) plugin taking on the custom block types with their own ACF Blocks for Gutenberg. This new addition should lower the barrier for WP developers to take advantage of Gutenberg block capabilities in a more intuitive way.

The post Creating a Custom Block Type for WordPress Gutenberg Editor appeared first on Stampede: the strategic design & technology company.

The standard way of embedding Google Forms is to use an iframe, which is sufficient. The more preferable way of course is by manually extracting the form’s HTML fields and re-coding it according to your theme’s HTML structure. Not only will it match your theme nicely, but you can also insert some custom JS validation on the fields as needed. Another plus is that Google Forms captures form submissions in a convenient spreadsheet format.

The Steps

The first step is to create two web pages in BigCommerce that will become our form page and success page when users submit the form. The form page is a custom template file that will contain our form HTML codes while the success page is simply a generic page. Take note of the success page URL.

Next, build our form in Google Forms with the most minimalist styling. Once tested and published, view its source to get the form codes and re-code the form into our custom template file — in the HTML structure we like while preserving the field names and the <form> action (and method). Next is some code alterations.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"style="display:none;" onload="if(submitted) {window.location='SUCCESS_PAGE_URL';}"></iframe>


<form action="https://docs.google.com/forms/d/1CsZt9s0vVegFb3-Qa3162Ri7A91ggx6S9B6qvBZcyJY/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
...your form fields...
</form>

Add line 1 and 2 right before our form tag and replace the correct success page URL in line 2.

Next, add target="hidden_iframe" onsubmit="submitted=true;" attributes to the <form> tag so that the form submits into the hidden <iframe> we created in line 2.

Finally, give it a test run. It is advisable to validate the form fields with JS to ensure the form is indeed being submitted successfully.

Although this guide is written for BigCommerce, the implementation steps are generic enough to be used on any platforms where you have HTML and JS editing access. Hope it helps.

Need help making your BigCommerce store stands out from the competition? Get in touch.

The post Embedding Forms in Bigcommerce Using Google Forms appeared first on Stampede: the strategic design & technology company.

A staple feature of e-commerce websites.

In Shopify, this feature may already comes standard with most of the themes or in an updated version of the current theme you are using, which is great. However in some cases you could be using a heavily customized theme and updating is not going to be a breeze, well, all you need is just a couple of lines of codes and you got yourself an upgraded product slideshow.

The Code

Paste the code below into the bottom of either template file product.liquid or snippet file product-form.liquid.

{% if product.variants.size > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    variantImage_count = 0;
  	//produce mapping between variant image and options
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
         variantImage_count++;
   	   }
    {% endfor %}

    $(function() {

      if (variantImage_count > 0) {
        $('select.single-option-selector').change(function() {
          var selected_color = $(this).val();
          thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
            var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
            if (typeof variantImages[image] !== 'undefined') {
              if(selected_color == variantImages[image]['option-0']) {
                //only check against the first option ['option-0'], which is Color (in my case)
              	$('.flexslider').flexslider(index);
              }
            }
		      });
        });
      }

    });
})(jQuery);
</script>
{% endif %}

The code is a combination of Liquid template tags and JS. It is based on the customization provided by Shopify for enabling customers to select a product variant by clicking its image and modified to work the other way around.

Line 10-30 produces the mapping between variants image and options in a JSON object that is used for comparison against the product thumbnails in the select box event handler function as seen in line 35-46. Line 42 is the actual code that tells the slideshow to jump to a specific slide. As you might have guessed, the code is unique to Flexslider slideshow plugin. You need to determine what slideshow plugin you are using and then figure out how to jump to a specific slide using its API.

I hope you find this guide useful. If you have questions/feedback, let me know in the comments.

Have a nice day!

The post Showing Selected Product Variant Image in Shopify Product Slideshow appeared first on Stampede: the strategic design & technology company.

Since a couple of years ago, I have pretty much refrained from coding CPTs from scratch, unless for extremely simple post types. I have sworn my allegiance to two well-known CPT solution plugins namely Pods and Types. In this post, I’ll try my best to explain how they fare against each other, specifically on the way they handle CPTs (and custom taxonomies).  What I don’t intend to cover are extended features like user roles or data migration. Finally, there’s a bonus section about enhancing their functionalities.

WordPress Pods plugin

The CPT management screens in Pods are really well-done and user friendly. If you are new to the world of CPTs, Pods will present you with a gentle learning curve to get you up and running. When you create a new CPT or custom taxonomy, you immediately have access to the custom fields management panel within the same CPT or custom taxonomy edit page. This makes the whole process of managing the custom fields a breeze and feels natural.

These are the main strengths of Pods:

1. Nice and intuitive user interface.
2. Large selection of custom field types.
3. You can add custom fields to custom taxonomies too.
4. Pods Template is an optional component you can enable in Pods to create templates for outputting Pods CPTs using magic tags and shortcodes all within WordPress without messing around with theme files.
5. You can create a custom Settings page for miscellaneous usage.

The limitation of Pods based on my experience are:

1. While you can create true parent-child (or one-to-many) relationships between Pods CPTs, the level of integration doesn’t appear to be truly seamless. For instance, in a property rental website presumably you had setup a one-to-many relationship between two CPTs; Properties and Rentals. However when editing a Property record you cannot add new Rental records in the same screen.
2. Each CPT can only have one meta box named More Fields containing all the custom fields.
3. You cannot make basic fields like plain text repeatable which could be handy in certain scenarios. Fortunately multiple image uploads is still possible.

WordPress Types plugin

The Types plugin may not look as straightforward to use at first glance primarily because the CPT and custom fields are managed in different admin screens but once you get your head around this it actually opens up a new possibility of the things you can do.

These are the main strengths of Types:

1. You can create true parent-child (or one-to-many) relationships between any CPTs or WP’s native objects with very seamless integration. For instance, in a property rental website presumably you had setup a one-to-many relationship between two CPTs; Properties and Rentals. When editing a Property record you can quick-add new Rental records in the same screen. Additionally, you can also specify which fields should appear in the quick add form.
2. You can have as many meta boxes with custom headings and combination of custom fields in each CPT. Furthermore, the meta boxes support custom CSS so you can arrange certain fields in side-by-side fashion instead of one per row for instance. This creates a more intuitive editing experience for the end users.
3. All custom fields can be made repeatable.
4. Non-repeatable custom fields can be fine-tuned with conditional logic to control when they should appear based on the values of other fields.
5. Meta boxes and custom fields can be added to user profiles.
6. The equivalence of Pods Templates for Types is called Views. It is not free but certainly a lot more powerful.

The limitation of Types based on my experience are:

1. User interface can be a bit tricky to work with.
2. No custom field of type Relationship.
3. No way of adding custom fields to custom taxonomies.

Bonus: Advanced Custom Fields plugin

In cases where I was using Types and needed to use the Relationship-type custom field, I usually resorted to the Advanced Custom Fields plugin. It may sound like an overkill to use it solely for one purpose but the field provided by Advanced Custom Fields simply has the perfect UI for a relationship-type field. It is also far superior than what Pods provided by default.

The perfect UI for a relationship-type field.

As a matter fact, Advanced Custom Fields is by far the best custom fields plugin for WordPress. To unlock its full potential you need to purchase the Pro version though.

Bonus: Codepress Admin Columns plugin

When you are working with CPTs, the Codepress Admin Columns plugin is quite simply the icing of the cake for all your hard work. The plugin allows you to customize table columns in the admin landing page of CPTs or any WP’s native objects. It fulfills a basic need that greatly enhances user experience when working with CPTs in the admin area.

Custom table columns FTW!

Though this plugin has a Pro version, the free one is awesome enough in most cases.

Conclusion

Pods and Types are my two favorite custom post types solutions for WordPress. How I decide between them depends ultimately on individual project requirements but so far I tend to choose Types for complex projects that require post relationship. With a couple of amazing supporting plugins, you’ll be having a blast working with either anyway.

Have a nice day!

Update (June 2015)

For an in-depth look at the features and technical differences between popular WordPress CPT plugins, view this awesome comparison matrix spreadsheet by Scott Kingsley Clark and Matt Gibbs.

The post WordPress CPT Solutions Comparison: Pods vs Types appeared first on Stampede: the strategic design & technology company.

Or you simply don’t want to use Bootstrap 3 dropdown menu on mobile because the menu is just too tall?

Bootstrap 3 Mobile Menu

Well, why don’t you try to use push menu for mobile instead?

Bootstrap 3 Mobile Push Menu

For this responsive bootstrap push menu tutorial, I’m using Takien’s jPushMenu. The tutorial shall require all the three big guns – HTML, CSS & Javascript to make the push menu happen.

Before jumping to the tutorial, why don’t you check out these demos for Left Overlay, Left Push, RightOverlay, or Right Push?.

Responsive Bootstrap Push Menu – HTML

Here I am using default Bootstrap Navbar with additional classes for push menu to work.

<pre>
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Brand</a></div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse">
<ul class="nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<div class="form-group"><input class="form-control" type="text" placeholder="Search" /></div>

<button class="btn" type="submit">Submit</button></form>
<ul class="nav">
<li><a href="#">Link</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>

<!-- /.navbar-collapse --></div>

<!-- /.container-fluid --></nav>
</pre>

Based on the above html, added classes can be found on line 05 (toggle-menu menu-left push-body) and line 15 (cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left).

The post Responsive Bootstrap Push Menu Tutorial appeared first on Stampede: the strategic design & technology company.

The requirement: Cascading dropdown list

This being on Shopify, the only way to code this custom feature is by getting creative with Javascript. It was then when I discovered about TaffyDB as the medium to store the 100+ odd rows of vehicle data. I played around with some hard-coded sample data using TaffyDB (and jQuery) and managed to get the cascading dropdown to work properly in Shopify. Perhaps the steps can be outlined in another blog post.

Now we move on to the main gist of this post. The client had the vehicle data populated nicely in Google Sheets. My next big task was to reformat these data to a TaffyDB-compatible data file. Below is a snapshot of the Google Sheet and the corresponding TaffyDB data, which is essentially a JS array of objects. The cool part is to automate this conversion process.

Sample data in Google Sheet (click to enlarge)

var car = TAFFY([
{year:"2002", make:"Subaru", model:"WRX", trim:"Sedan", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2002", make:"Subaru", model:"WRX", trim:"Wagon", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2003", make:"Subaru", model:"WRX", trim:"Sedan", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2003", make:"Subaru", model:"WRX", trim:"Wagon", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}
]);

Enter Google Apps Script. This tool is a godsend because it allows you to use Javascript to programmatically manipulate data in your spreadsheet. To access Google Apps Script in Google Sheets, go to Tools -> Script Editor.

After going through a few tutorials, I managed to come out with a fairly decent code for performing this conversion process.

/**
 * Retrieves all the rows in the active spreadsheet that contain data and generate a TaffyDB data array from it
 */
function readRows() {
  var sheet = SpreadsheetApp.openById('SPREADSHEET_ID_HERE').getActiveSheet();   // The value of key= variable in the URL
  
  // This represents ALL the data
  var range = sheet.getRange(5, 1, 1000, 20);   // Starts reading from row #5 column #1 (cell A5). Read as far as 1000 rows and 20 columns (for future data entries).
  var values = range.getValues();
  var output = '';
  var index = [];
  var row_array = [];
  var row = "";
  
  // The main loop that goes through each cell within the selected range. i is row, j is column
  for (var i in values) {
    var cell_array = [];
    for (var j in values[i]) {
      if(i == 0) {   // i == 0 is row #5, this is the column variable name
        if (values[i][j]) {
          index.push(values[i][j]);
        }        
      } else {   // car data starts at row #7 onwards
        if (values[i][j]) {
          cell_array.push(index[j] + ':"' + values[i][j] + '"');   // compose the car data cell by cell for the current row
        }
      }
      
    }
    
    if(i > 0) {
     if(cell_array.length > 0) {
        row = cell_array.join(', ');   // join the individual cells car data for the current row with commas to form a complete row data
        row_array.push(row);
      }
    }
    
  }
  
  output = row_array.join('}, n{');   // join the individual rows with curly braces and commas to form a complete database

  output = 'var car = TAFFY([{' + output + '}]);';   // finalizing the TaffyDB format
  
  Logger.log(output);
  //return output;
};

To test this code out, simply enter your spreadsheet ID in line 5 and change the range number accordingly in line 8. The Logger.log command in line 44 is used for testing the output in the script editor console. In the production version, I have a few more extra codes to add a dropdown menu in the Google Sheets UI that users can click to download the updated TaffyDB JS data file and then simply drop it into Shopify.

The post Generating TaffyDB Data File from Google Sheets appeared first on Stampede: the strategic design & technology company.

What is this CSS sprite technique & why?

CSS sprite, as interesting as it is called, is also an interesting CSS method itself. This approach involves changing an image to another different image, or the same image but different colour scape (greyscale, sephia etc.) upon hover.

The advantage of using the using css sprite technique is that the web page will automatically load all images at once, instead of one by one. This will speed up the loading time and there will be not much delay for users with slow Internet connection.

But how?

When we hover on the block, the background image will change smoothly to second image. If we use separate image for hover effect it will take time for website to load that image from server thus, will create ± 1 second empty space on hover. This will be a problem for user with slow internet connection.

Interesting. Show me how.

Here we go. Take a seat.

First of all, get any images or sprite to start. I would suggest an image with transparent background. In this tutorial I am going to use this Ninja Sprite from 36peas. Choose any two images – one for normal state and another for hover. Save them on some canvas by side or top and bottom.

Before we start, it’s a good idea to show some simple css background code.

Single line css background code in correct order would be:

background: color position size repeat origin clip attachment image;

In this image, each ninja will have width:227px and height:298px.

Total width for both ninjas in one canvas would be width:454px and height:298px.

In this tutorial we will only need a combination of three css background codes. Width and height set will just be for one image.

On hover, just change position of the image. Background image in this tutorial I put straight to image file. So the code should be like this:

Normal state:

display:block;
height:297px;
width:227px;
background-position:0 0;
background-repeat:no-repeat;
background-image:url('ninja.
png');

Hover state:

background-position:-227px 0;

Normal state in shortcut css:

display:block;
height:297px;
width:227px;
background:0 0 no-repeat url('ninja.png');

Hover state in shortcut background css:

background:-227px 0 no-repeat url('ninja.png');

or

background-position:-227px 0;

If you would like to see how it looks like, you may view the demo links here:

• normal/regular method
• shortcut background css

Correct syntax for shortcut background css :

background: color position size repeat origin clip attachment image;

For background-position, always remember all browser read css background position code from x-axis to y-axis. In these examples:

• background-position:(x-axis)px (y-axis)px;
• background-repeat: By default, all browser will use value ‘repeat’. To make it one image simply put ‘no-repeat’.

There are some bits of notes about background-image: – back during my first time doing css background, it was a bit confusing to do relative path if the file images are in different folder.

Here are some examples to show what I meant:

The location for the html file.

The location for images and CSS folder.

The location for the image file.

By default, the browser will find image in same folder where we save the CSS file. The solution for this problem would be that we have to jump outside the CSS folder by typing  ‘ ../ ‘ which means going back to one folder:

Here is an example based on my local html and css folder.

background-image:url('../art/ninja.png');

Here are some links for you to play around:

• background-position:
• background-repeat: 
• background-image:

Awesome! I am going to try now!

Yay! And if you do have some questions, suggestions or examples, do drop them links in the comment.

(Thanks W3C for being my main point of references.)

The post CSS Sprite Technique appeared first on Stampede: the strategic design & technology company.

Sample of product sashes.

In BigCommerce, exclusive product sash features are not built-in but they can be added using some clever jQuery tricks. Specifically, we need to tell jQuery to read the page for certain “triggers” or “conditions” and show the appropriate sash based on them. The key to product sashes is they have to appear in product listing pages (like category, homepage, search result) and the product details page. This means the “triggers” have to be present in all these pages for jQuery to detect.

On Sale Sash

In the following example, I am going to show how to add the most common of all product sashes, On Sale. Firstly, we need to set the discounted price for the appropriate products. If this was done right, the products will show up in the shop with a strike-through line on their original retail price. This element will become the “trigger” for the On Sale sash. So we just have to tell jQuery, if this element exists, show the On Sale sash. Below are Javascript codes for the category and product details pages.

Product Category Page

$("#CategoryContent .ProductList li .RetailPriceValue").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
});

Product Details Page

if($('.DetailRow.RetailPrice').is(':visible')) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
}

Any Miscellaneous Sashes

A slightly trickier scenario is to show product sashes like Bestseller and New, which we don’t really have a way to configure via the BC admin. Even though BC has product tags and custom fields, these data don’t show up in the product category pages. Fortunately, we have something else to use, the main image alternate text. In BC admin, it’s the Description box of the main product image. You need to enter a unique identifying keyword in the Description box and thanks to jQuery, reading the presence of this keyword is a breeze. This method will allow you to show any kinds of product sashes.

Enter the keyword into the Description field of the main image.

For showing a Bestseller sash, enter the keyword Bestseller. I personally prefer to enter the actual product name followed by the keyword to keep the semantics right, like 5ft Christmas Tree – Bestseller. Here’s the code for showing the Bestseller product sash.

Product Category Page

$("#CategoryContent .ProductList li .ProductImage a img[alt*='Bestseller']").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
});

Product Details Page

if(ProductImageDescriptions[0] && ProductImageDescriptions[0].indexOf("Bestseller") >= 0) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
}

The examples I provide here only contain the necessary jQuery code snippets to make the product sash works. It’s not really a step-by-step beginners tutorial. You would need CSS to style the product sash nicely. Don’t forget about the sash graphics too, they are transparent PNGs. I can also foresee that my codes are totally template-dependent. However, if you are familiar with jQuery selectors I am sure you will be able to understand the gist and tweak the codes accordingly to fit your templates.

Give it a try and post your feedback below!

The post Add Product Sash/Ribbon in BigCommerce Using jQuery appeared first on Stampede: the strategic design & technology company.

But how about if you own one of those Android devices which don’t have NFC or the equivalent technology – for example Samsung Galaxy S2.

First off, you need to check if your device runs on Android version 4.0 above, because this is where SuperBeam can perform the magic for you. While it is still using NFC to communicate, it is also offering another method to communicate between devices which is designed exclusively for devices that don’t have NFC.

How does it work?

You can use SuperBeam to scan QR code on other devices via SuperBeam app. It will communicate between devices using Wifi Direct once you scanned the QR code. This process is actually fully automatic without the need to do anything – not to mention it can share multiple files too! Imagine the convenience it offers.

Scanning QR Code to start communication

Transfer in progress

Conclusion

I have found that this app has been a great help especially when I need to transfer video or large images to other devices. It’s painlessly easy to use – just with simple tap, it will transfer your selected files for you within minutes. And yes, it is totally free!

Do you have any other method you use to transfer large files between your mobile devices?

The post How to Transfer Large Files Between Android Devices appeared first on Stampede: the strategic design & technology company.

Quoting a blogpost about a research:

Researchers led by Dr. Gitte Lindgaard at Carleton University in Ontario wanted to find out how fast people formed first impressions. They tested users by flashing web pages for 500 milliseconds and 50 milliseconds onto the screen, and had participants rate the pages on various scales. The results at both time intervals were consistent between participants, although the longer display produced more consistent results. Yet, in as little as 50 milliseconds, participants formed judgments about images they glimpsed. The “halo effect” of that emotional first impression carries over to cognitive judgments of a web site’s other characteristics including usability and credibility.

Try clearing your browser cache and refresh your website, how long does it take to fully load? 2 seconds? 30 seconds?

If you are running a business on your site, potential customers might have already been turned off by the page load time. This might affect sales.

So what can you do to speed up your site?

Thankfully, there are a lot of great tools and solutions out there to help you optimize your site. For this post, I’ll introduce three techniques that I know of.

Use a Content Delivery Network (CDN)

Traditional server architecture is having your web hosting provider’s server serve up your website to the world wide web. Your website might load fast for users located near the server. But what if your most targeted customers or users span all across the other continents?

This is where CDN comes into play. CDN is a delivery network service. It is a service provider whereby they allow you to cache your site on their network of servers, at an affordable cost (some comes free) all over the world.

Big boys’ sites like Google and Facebook have the power and funds to buy servers and have them setup personally all across the world. For personal or small business sites, CDN services are the way to go. Now you do not have to worry about choosing a hosting provider that is closer to home.

These CDN services also come with additional perks like analytics and security. Some claimed that the analytics data are more accurate than script-embedded services because CDN are the ones that serve the site. Also, you are protected up to the latest threats since your site is under their wing of networks.

Minify all the things!

It is okay for your source code to have proper indentation and spacings during development phase. But in production environment, you’d better off getting your source code and asset files like CSS and javascripts minified to reduce their file size down to a significant level. This will not only save you on bandwidth cost but also speed up the site for first time visitor.

It is also advisable not to change your source code too often in production environment because visitors will have to load up new versions of the source code each time you make a small change. So unless we are talking about critical bugs in the site, update the site by a huge batch of changes. Make use of the browser caching ability.

Analyze your site and further improve

There are a couple of tools out there that can help you analyze your site and suggest ways on how to improve your site like Yahoo!’s YSlow. For me I use Google’s PageSpeed extension. Install it and start analyzing your site today – it is free. I was able to score up to 99/100 points in my recent optimization attempt.

The one point missing is from third party fonts that I have no control on improving.

One thing to note is that even though the analyzer is a great way on improving your site, you still need to consider each suggestion that were thrown at you carefully. Each site is built differently so 100 points should be an ideal target but not a must-attainable score.

That is it!

With the three solutions that I suggested, that should give you a general idea on how and why you should speed up your website. If you have any other alternatives, do comment below. I would love to hear about your optimization techniques. Best siot!

The post Speed Matters appeared first on Stampede: the strategic design & technology company.