better software through user-centered design

Archive for the ‘Programming’ Category

Yeoman with Express API Server

 

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

Rounded CSS Button Borders with Drop Shadow

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!

How To Export Email List from cPanel with JavaScript

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.

JavaScript Structure in an MVC Application

There are several approaches to organizing code in any application.  With the Model View Controller (MVC) pattern, much of the code is organized for you by convention alone, specially if you are using ASP.Net MVC.

In an effort to follow the conventions and patters set forth by MVC, I started thinking about how to pull the JavaScript out of my views, that is, I want my JS code organized in a pattern satisfactory with the file structure of MVC.  One thing I love about MVC, is that when I look at a controller, I know almost exactly where to look to find the view, and vice versa.  The Solution Explorer screenshot shows my take on how to organize JS code in such a matter.

JS Namespace and Class Setup

The App.js initializes the namespacing and classing that will be used to organize the client-side, and more importantly prevents that pesky global namespace from becoming cluttered.  It sounds pretty hard core talking about namespacing and classing on the client-side right?  It is.  It is highly technical and complex to….ok well maybe it is just a series of objects, that looks and feels like C#’s namespacing/classing at runtime. Note that this is accessed using the dot notation (MYAPPLICATION.App.Ajax.PostForm();).  In this case I split the “App” code away from the “View” code.

 I chose to do this simply because that is how the C# project namespacing was setup in the project structure.

The Ajax, Form, and Utilities classes are just infrastructure code that I use to post forms, create pdf’s, override default behavior using prototype, setup default jQuery UI functionality, etc.  Read more about submitting MVC forms using jQuery if you dare.

MYAPPLICATION.Views{} is simply an object that allows me to organize my JS code similar to how the views are generated.  There are two advantages I have found that instantly save me time; 1) I can look at a view in the VS Solution Explorer and know exactly where to find the associated JS, and 2) I can look at a url route and know exactly where the JS for that page lives.   Another big benefit is it helps keep the JS out of the view.  This leaves only 1 line of code in the view itself, which is required to instantiate the JS for said view:

<script>
    MYAPPLICATION.Views.History.Index.Init({ orderDetailGridUrl: '@Url.Action("OrderDetailGrid", "History", null)' });
</script>

Note that if you use Firebug (which you should be), it makes debugging a bunch easier as well because you can select the appropriate script file (which Firebug organizes by Controller thanks to our file structure) versus scrolling through the markup on the script tab and trying to find the right line, YUCK.

 Then all the History code lives in one file, and is loaded after the MYAPPLICATION.App{} code so it can utilize all utilities and ajax goodness already written.

MYAPPLICATION.Views.History = {
    Index: {
        Init: function (options) {
            // History index page code goes here...

        }, ///end Index.Init()
    }
};

So far there have been no drawbacks to this approach because you can still use other JS patterns that work well with this setup.  I have used the JS module pattern in other applications and instantiated them the same way as shown here.

Quote for Today

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”
-Martin Fowler et al, Refactoring: Improving the Design of Existing Code (p15), 1999

Great Quote

The right place to put any given unit of code is where it provides the most value and reliability with the least cost and load on the system.
-David Wendelken

Saw this in a forum post, and thought it was a great quote.

%d bloggers like this: