better software through user-centered design

 

After playing around with Yeoman the other day I was pretty darn impressed. Ease of use and efficiency in web tools often forces the sacrifice of customizability and full control Yeoman offers all of the above. Once I realized how powerful it was and how cool liverefresh and watch works from the generated app, I wondered if I could use it to fire up my Express Node API server as well. It turns out, you can…

When a default app is generated using the standard method (yo webapp), Yeoman generates a Grunt file and sets up a working app that can be generated and running in seconds. It it not the typical Hello World where the first thing you do is tear out the crappy generated code because you have a better way. You simply generate and start building out your app…personal or enterprise level!

Once the app is generated the default Gruntfile.js uses connect to host the index.html and static resources. Express uses Connect under the covers but I wanted the routing and middleware goodness Express provides. It took some doing, but basically I use grunt to build and fire up my website, as well as startup up my Express API application at the same time.  Since Grunt is so flexible, allowing you to configure each task independently, locally it fires them up together, but in production grunt will do nothing with the API application as it will live on multiple servers behind a load balancer.

Here is my Gruntfile.js contents. Note that this is the default generated grunt file that I simple swapped internal connect usage for external Express app: gist.github.com/zachariahtimothy/5454976

Next order of business is setting up Express to be an API only application that exports in such a way Grunt can use it:

gist.github.com/zachariahtimothy/5455017

You may call this file app.js but in my specific instance I am using app.js to start Grunt up within Webstorm.

Note that I used Yeoman 1.0 to generate the application.

 

So there you are, in under 5 minutes you could have a fully usable and ready for development frontend and backend api platform. Let me know what you think or any issues you see with what I found.

Swipe JS YouTube Fix

Many have ran into an issue using Swipe JS and trying to embed YouTube videos via iframe after a swipe. At the time of this writing there is no solution that I saw, but it seems to be related to CSS transitions. I had very little time to understand what the true issue is, but I came up with a workaround that seems to work well.  It may seem a bit hacky, but here it is.

In the view there is a line as such:

iframe width=”{{width}}” height=”{{height}}” data-src=”http://www.youtube.com/embed/{{video_id}}?rel=0″ src=”about:blank” frameborder=”0″ allowfullscreen></iframe

Notice the src=”about:blank”, we will set the real source after the transition.

We have a callback from Swipe that is called when the transition ends “transitionEnd”. In this callback I test to see if it is the correct slide (in this case it is the last slide in my list).

If it is the correct slide, I set the iframe src attribute. The transition has already ended so there is a blank iframe momentarily bit this could easily be pointed to a loading graphic or the like.

if (id === “thanks”){
var iFrame = $(‘div.mobile-question-tile-inner iframe’);
iFrame.attr(‘src’, iFrame.data(‘src’));
}

If anyone else has ideas on the real fix for this, I would love to learn it.

Link to issue in GitHub: https://github.com/bradbirdsall/Swipe/issues/36

Whew, it has been a long haul since I have been able to post.  I finally finished my BS degree in Web Design & Development! With that I am ready to update this bad boy far more frequently. Let us proceed shall we?

I could not find a satisfying solution on my good friend Google’s search on how to create CSS based buttons with gradient borders and drop shadows.  This code has not been tested thoroughly in each browser, and will likely only work in modern browsers using the :before pseudo element selector. That being said, this could certainly be expanded upon and extended further from what it is.

Link: <a href=”/dahshboard” class=”roundedButton” title=”Return to dashboard” data-text=”< Back to Dashboard”></a>

The link text be inserted within the anchor with our :before pseudo element.

Anchor CSS:

a[href].roundedButton{
background:#fff;
color:#5182a1;
font-weight:bold;
font-size:12px;
border-radius:20px;
padding:0px ;
box-shadow: -1px -1px 2px 2px #dfe3e4, 1px 1px 2px 2px #4d5759;
text-shadow:none;
}

This will provide the base for our linear gradient border, using box-shadow.  The reason we are not using border tags is I found box-shadow to be more flexible and far easier to implement than linear border gradients.

:before css:

a[href].roundedButton:before{
content: attr(data-text);
display:inline-block;
border-radius:20px;
line-height: 35px;
padding:0px 16px;
box-shadow: -1px -1px 2px 1px rgba(0,0,0,.1), 1px 1px 2px 1px rgba(0,0,0,.3);
}

This provides us with the rest of our gradient, as well as a drop shadow.

You can easily adjust and play with the styling depending on the affect you want (like a deeper drop shadow).

Have fun!

Recently I was perusing the Think Geek online catalog when I came to an item that was out of stock. It seems like there is not really an industry standard for communicating stocking quantities on your website, but some of the leading e-commerce sites do partake. If  you come to an item you want that is out of stock, it usually says in some tiny words off to the side that it is out of stock.  Harder to find stock status is more likely to lure you into purchasing that item anyway.  If you know ahead of time the item is out of stock, you are more likely to skip the purchase in favor of a competitor who has your beloved item ready to zip out the door.  By getting you to purchase an out of stock item, the site manager knows you are less likely to cancel your order, and to wait the extra week for it to arrive.  Having managed an e-commerce site previously, I witnessed this time and time again and even utilizing this knowledge for my sites benefit.

Think Geek marks an item in stock if it is such, but takes an interesting stance when it is not.  Not only does it show out of stock in the area it would otherwise show in stock, a panel folds up from the bottom of the screen with a clever message letting you know they do not have that item.  It is great that they alert you, but they also have the ability to add to wishlist or email you when the product becomes available.  Perhaps the smartest piece of this feature is that they show similar and more importantly relevant items on the panel as well. The whole feature comes together and works well because it is non-intrusive.  There is nothing important on the screen being covered by the panel as well as I can still scroll the page without the panel getting in the way.  If there was some reason I needed the panel gone, there is a handy hide button removing it from site.

From a user experience standpoint this is great because the user was obviously considered in this design.  This type of feature creates interaction points with the user where if “feels” like the site is engaging  you and helping you shop instead of just showing some images and text on a screen and hoping you buy.  Bottom line is that to me this is a great implementation of honesty in stock levels and I hope to purchase from Think Geek again soon.

Merry Christmas and a Happy New Year you all who read this post!

This is a sort of weird post, but recently I ran into an issue where I needed to transfer a bucket of email addresses from one hosting account to another.  In this case I am using Siteground as my host, and I was switching from one basic hosting account to another.  With the ultra low-priced plan you get cPanel access but no SSH or migration tools whatsoever.  There is an email account and email forwarder import tool, but no export, only showing you your email account on the screen.  The combination of laziness and geekiness overwhelmed me so I used the Firebug command line and wrote a script to export the data I needed to be imported into Excel and then uploaded to cPanel.

UPDATE: Since WordPress does not support code formatting, I put these scripts both in a Gist: gist.github.com/zachariahtimothy/5455126

Code and steps taken to complete this task for Email Addresses:

  1. Login to cPanel on old account and click on “Email Accounts” under the Mail Section.
  2. Change the results per page to be the max.  In my case, this showed me all email account.
  3. Bring up Firebug command line and input the following code:
    var rows = $("#table_email_accts tr.dt_info_row"),
    returnString = "";
    rows.each(function(i, item){
    var tdList = [];
    $(item).find('td:eq(0)').each(function(s, subItem){
    tdList.push($(subItem).text());
    });
    returnString += tdList + "\n";
    });
    console.log(returnString);

    This code may need tweaking for your cPanel version, but you should now see a list of the email addresses you desire in the Firebug console.
  4. Create a new text document in the directory of your choosing.  Copy and paste the email addresses inro the file and save as a csv.
  5. Create a new Excel spreadsheet with 3 columns and add the labels “Address”, “Password”, and “Quota”.
  6. On the data tab choose “From Text” under Get External Data.  Select the text (csv) file you just created and open.
  7. This will import the email addresses into the first column so all that needs to be done is add the passwords and email quota.
  8. All that is left is to click the Import Addresses/Forwarders link, upload the spreadsheet and follow the on-screen instructions.

Code and steps taken to complete this task for Email Forwarders:

  1. Login to cPanel on old account and click on “Forwarders” under the Mail Section.
  2. Change the results per page to be the max.  In my case, this showed me all forwarders.
  3. Bring up Firebug command line and input the following code:
    var rows = $(“#mailtbl tbody tr”),
    returnString = “”;
    rows.each(function(i, item){
    var tdList = [];
    $(item).find(‘td.truncate’).each(function(s,subItem){
    tdList.push($(subItem).text());
    });
    returnString += tdList + “\n”;
    });
    console.log(returnString);
    This code may need tweaking for your cPanel version, but you should now see a list of the email forwarders you desire in the Firebug console.
  4. Create a new text document in the directory of your choosing.  Copy and paste the email addresses into the file and save as a csv.
  5. Create a new Excel spreadsheet with 2 columns and add the labels “From Address”, and “To Address”.
  6. On the data tab choose “From Text” under Get External Data.  Select the text (csv) file you just created and open.  Make sure you select Delimited and comma as the delimitation type.
  7. This will import the from address in the first column and to address in the second.
  8. All that is left is to click the Import Addresses/Forwarders link, upload the spreadsheet and follow the on-screen instructions.

That is it for migrating email addresses and forwarders over to new accounts.  It is not that complex, but maybe it will save you 20 minutes of your life someday.  Note that if your version of cPanel does not have jQuery installed, you can use FireQuery to inject it.

New Site Theme

You may notice that this blog has a new and fresh look today!  I am pleased to announce that after careful consideration, I have chosen to switch the theme up from modern-grunge, to spectrum.  I love the clean look this template provides and being slightly wider seems to make it easier to read, specially when code examples are involved.  Let me know what you think and a big thank you to Ignacio Ricci for designing this easy-to-read layout.

I was recently building a deployment and description site for an Adobe AIR application I am building for school.  Any site I turn in to Full Sail must have 100% validated HTML markup and CSS.  As long as the design is half way descent and the markup is clean, all is well.  In appeasing my need to use HTML5 because I am a cool kid, and bearing graceful degradation in mind, I was all jazzed up to use the much acclaimed HTML5 Boilerplate.

Paul Irish totally rocks so I was shocked when my incredibly simple HTML5 page with CSS3 did not validate.  Upon further investigation, I realized not only does the HTML5 Boilerplate site not validate, it has 92 errors and 4 warnings (as of December 6, 2011).  I guess I should be happy mine only has one error, but there are weird validation errors coming from that site, including the use of custom characters in the DOCTYPE declaration.  I concede that the validation I speak of is the W3C Validation Service, and that is not always necessarily 100% accurate, however the amount of errors is aPAULing…get it? Paul…appalling?  Sorry, terrible sense of humor took over.

Image

Anyway, I am curious if anyone else has ran into issues with the HTML5 Boilerplate not validating and if so, is there any other alternatives out there that give us the HTML5 goodness we as web developers so eagerly crave.

Follow

Get every new post delivered to your Inbox.

Join 92 other followers

%d bloggers like this: