Logo

Who is talking?

Archive

Spineless 0.2.1 Released

over 4 years ago | Mark Daggett: Mark Daggett's Blog

I have just pushed a new release of my JavaScript application framework called Spineless. Spineless is a simple MVC stack without the need of a backbone. https://github.com/heavysixer/spineless The goal of Spineless is to provide “just enough framework” to succeed. If I have done my job, you should be able to write your first Spineless app in less than 10 minutes. Spineless is meant to run with virtually no dependencies. In the age of frameworks with massive dependency chains, here is a list of things you DO NOT need to run spineless. A persistance layer (e.g. database) A backend server (e.g. node.js) An internet connection! (srsly) Spineless has only two dependencies, JQuery and Mustache.js, both which come bundled with the project inside the /lib directory. Like any good MVC framework Spineless uses the concept of models, controllers and views. Spineless models are essentially JavaScript objects and completely optional. Controllers are used to marshall commands from the views to the models where needed. Views are the visual interface that the user sees. In addition to the normal MVC stack, Spineless also uses the concept of helpers and templates. Templates are HTML snippets, which are used by views to get better use of reusable code. Helpers are functions that modify a template’s variables any way you choose. Going Spineless in 10 minutes or less The entire Spineless application resides inside the “.application” div. An application consists of a collection of controllers which in turn contain a collection of views. Consider the following example: 1 2 3 4 5 6 7 <div class="application"> <div class="controller" data-controller='application'> <div class="view" data-action='index'> Hello World! </div> </div> </div> In this example you’ll see that we have defined an application with a single controller. The name of the controller is defined by the data-controller attribute. This attribute is required by Spineless to route requests to the proper location. Views are much like controllers, but instead of using the data-controller attribute they use the data-action. Routing Requests Routing requests through Spineless is incredibly painless to make any link a spineless request just add the “route” class. For example: 1 <a class="route" href="/application/hello">Hello</a> When the user clicks on this link they will now be routed to the application controller where the #hello method will be called. If you are not using an element that support the href attribute you can also place your url inside a data-href attribute: 1 <div class="route" data-href="/application/hello">Hello</div> If you want to manually trigger a route request from within JavaScript you can call the get function: 1 spineless.get('application', 'index');` Passing local variables to templates When rendering templates, Spineless substitutes predefined template variables with those you supply using JSON. The JSON can be provided in at least two ways: By url encoded a json object into the data-locals attribute. Creating of modifying the JSON object using a helper function. I will explain the helper function method next, but here is a simple example of what the data-locals method looks like: 1 <div data-locals="{&quot;name&quot;:&quot;Mark&quot;}" data-template='hi-my-name-is'></div> Helper functions Helpers are developer-created functions that execute during the rendering of specific templates. Just like in Rails, helpers are available globally across all views. To demonstrate, imagine we have two DIV tags with locals supplied as urlencoded JSON object: 1 2 <div data-locals="{&quot;name&quot;:&quot;Mark&quot;}" data-template='hi-my-name-is'></div> <div data-locals="{&quot;name&quot;:&quot;Slim Shady&quot;}" data-template='hi-my-name-is'></div> As you can see these objects have a property called name, each with unique values. These locals are linked to the “hi-my-name-is” template. To create a helper we’ll bind a function to execute whenever the hi-my-name-is template is rendered. Doing this will allows us intercept the template instance’s data-locals object and modify it anyway we choose before passing it along to Mustache to render. Here is the full example of the helper function: 1 2 3 4 5 6 7 8 9 10 var sp = $.spineless({ helpers: { 'hi-my-name-is': function(obj) { if (obj.name === 'Slim Shady') { obj.name = "*wikka wikka* " + obj.name; } return (obj); } } }); PubSub for Spineless events Spineless now has a very minimal publisher subscriber (PubSub) events framework. The goal of this is to allow other code executing outside of Spineless to receive updates when internal Spineless events execute, without having to know anything about how Spineless is implemented. Here is a trivial example of creating an observer that is triggered every time a view is done rendering. 1 2 3 4 5 6 7 8 $(document).ready(function() { var sp = $.spineless(); sp.subscribe('afterRender', function(publisher, app) { app.request.view.append("<h1>Yes it has!</h1>") }) sp.get('application', 'index'); }); When the publisher executes a subscriber’s function it passes a reference to itself and the Spineless app instance as arguments. This allows the receiver to manage it’s subscriptions and gives the function access to the the Spineless current request, params hash among other things. Controller functions Controller functions are optional code that developers can write to augment the rendering of the view. Controller functions work much like helper functions do, in that they are executed before the view is returned to the screen. Unlike helper functions which are linked to an arbitrary number of templates; controller functions are scoped to just one controller action. Consider this example which executes when someone visits /users/update: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var sp = $.spineless({ controllers: { users: { update: function(elements, request) { if ($.currentUser.isAdmin()) { this.render(elements); } else { alert(“Access Denied”); } } } } }); sp.get('application', 'index'); I have added examples of all of these new features in the /samples folder of the public Github repo. Please feel free to open bug reports or feature requests, and I will do my best to oblige.

This Week's Reading Roundup - No. 2

over 4 years ago | Eduard Moldovan: eduardmoldovan.com - tech

And we got to the second week in reading roundup. The topics are much wider because this week is a much more active week in our huge community.

Jam - The JavaScript package manager

over 4 years ago | Ben Gilles: Ben Gillies

For front-end developers who crave maintainable assets,Jam is a package manager for JavaScript.Unlike other repositories, we put the browser first by using AMD modules.Jam - The JavaScript package managerI was talking to fnd just the other day about this and what a good idea it was. I haven’t looked at the implementation too closely yet, but it seems (to me at least) that it’s something that has been sorely missing in the past. via TiddlySpace [source]

Managing creative talent – 3

over 4 years ago | Amit Anand: UXcorner

Almost an year after I wrote the last post around this topic, I sit back and observer where the industry has moved on from there. We are increasingly becoming more CIO friendly by the day, Fortune thinkers are emphasizing (and luckily budgeting) on better design as a progressive pawn and not the least but clients […]

Managing creative talent – 3

over 4 years ago | Amit Anand: UXcorner

Almost an year after I wrote the last post around this topic, I sit back and observer where the industry has moved on from there. We are increasingly becoming more CIO friendly by the day, Fortune thinkers are emphasizing (and luckily budgeting) on better design as a progressive pawn and not the least but clients […]

The training phenomenon

over 4 years ago | Amit Anand: UXcorner

Was away giving time to family for a while, well glad to say I am a father now. Interesting are nature’s ways of teaching us life, how a little one learns to suckle on a mothers breast for milk, how he adapts to a cycle of day and night, how wonderfully he gestures for your […]

The training phenomenon

over 4 years ago | Amit Anand: UXcorner

Was away giving time to family for a while, well glad to say I am a father now. Interesting are nature’s ways of teaching us life, how a little one learns to suckle on a mothers breast for milk, how he adapts to a cycle of day and night, how wonderfully he gestures for your […]

Sublime Text 2: 5 Plugins You Really Should Be Using

over 4 years ago | Joe Pettersson: JoePettersson.com

Sublime Text 2 has become mine, and many other people’s, editor of choice. Bringing features like multiple cursors and Vim bindings to a modern, good looking, lightweight and cross platform editor. It rocks. Especially the plugins. One of the things … Continue reading →

Pretty Gist

over 4 years ago | Joe Pettersson: JoePettersson.com

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance … Continue reading →

New Features on Factile

over 4 years ago | Aishwarya Singhal: Aishwarya Singhal

Factile, as you know, is a free and open source survey platform. It generated significant interest in the first few days of its launch and I received some feedback that I thought would be good to build into the tool. I have just released a new version at http://www.factile.net and the following are the main changes: Better Navigation: Clickable bars showing the steps in survey creation/ editing to enhance user experience. Offline Survey Capability: Even if the survey participants are in transit or are in areas of unreliable connectivity, they can still 'work offline'. i.e. They can keep on working through the survey and just submit the results once they are back on the network! Easy-peasy ! Word Clouds: Factile now has the capability to build a word cloud (aka tag cloud) of free text responses. Factile combines all responses for free text questions, removes common words (aka stop words) and generates a word cloud. Just so you can analyse survey takers' comments much more easily. Insights: This is a feature that was always planned and was delayed. You can now select a group of questions and define constraints to generate a list of top 5 combinations as picked by the users. So for example, if you wanted to see what demographic group tweets/ blogs the most, you could comine the demographics related questions, add a constraint around tweeting/ blogging and get sorted and aggregated insights. Custom URI: Would you like your survey to be called http://www.factile.net/mycoolsurvey instead of the long system generated identifier? You can do so now! Obviously, Factile is freely downloadable and customizable (and these surveys work on mobile devices, as would be convenient to use on a mobile device and not as small difficult to click HTML radio buttons). You can let me know if you want a feature/ faced a bug by logging an issue on github, or just leave a comment on this blog! You can also send an email at https://groups.google.com/group/factile. I did a quick video on the use of Factile a week or so back and uploaded to YouTube. You can watch it here.

New Features on Factile

over 4 years ago | Aishwarya Singhal: Aishwarya Singhal

Factile, as you know, is a free and open source survey platform. It generated significant interest in the first few days of its launch and I received some feedback that I thought would be good to build into the tool. … Continue reading →

jQuery Github Widget

over 4 years ago | Joe Pettersson: JoePettersson.com

Have you ever wanted to add a slick, clean and simple jQuery powered Github widget to your site? With this one you can get it going in a couple minutes! This Github jQuery plugin displays your user info and most … Continue reading →

Task chunking -- or why we leave our cards in the ATM

over 4 years ago | Mark Daggett: Mark Daggett's Blog

Have you ever left your bank card inside an ATM machine? You are not alone, I have done it more times than I care to admit, and each time it happens I am left with the pants around your ankles feeling that you get when you realize you are the worlds biggest idiot. Until recently, I didn’t have a way to explain this reoccurring blind spot; but now I do. ATM designers don’t understand the concept of task chunking. Recently, when rereading through “The Humane Interface” by Jef Raskin I rediscovered his explanation of chunking and gestures in interface design. I won’t touch of gestures, but Raskin defines chunking as: “the combining of separate items of cognition into a single mental unit, a process that allows us to deal with many items as though they are one.” Humans can only focus on one thing a time, therefore when planning a system for use by humans you should make sure that the system doesn’t require user’s to do more than one thing at a time. This is not to say that systems can’t be a mix of short and longterm goals, games do this all the time. For example, players may have a small task like collecting an amulet, but this is done within the larger scope of completing the level and the even larger arc of beating the game. Task chunking is about short-term cognition, which means when players are focused on getting the amulet they cannot be simultaneously thinking about completing the level. In the case of using ATMs there is a single short-term task, which is to deposit or withdraw cash. However, banks for the most part get this wrong. They treat the entire time you are standing in front of their machines as a single mental unit. In their mental model the task begins with you inserting your card and ends with you reclaiming it. However, the customer’s mental model is different. They only want to receive or deposit money, and when they do either of these they often consider their task complete. The problem with using most ATMs is that they put the customer’s most important event in the middle of their process. This would be like placing a quarter of the movie after the end credits. Nobody would see that part of the movie because, while the credits may be the most important to the actor they are the least important to the view. Moreover, moviegoers are trained to head for the exits when they see the credits start rolling. I would wager that if the ATM never dispensed money, virtually nobody would leave their card in the machine. However, when the machine spits bills out onto the street, customers recognize this as the start of the task the mean to complete. This is the point where the initial task of using the ATM bifurcates into a new task of securing the exposed money. This is also where people like me forget all about their debit card. Most of the time customers do get their card back, realizing even though they are done with the ATM, the ATM is not done with them. However, if there are other environmental factors at play like poor weather, lack of time, or thuggish people in the bushes customers may forget about the less important task of completing the bank’s arbitrary process for using their ATM. Over the years, banks have tried various tactics to get their customer’s attention after the cash is dispensed. Sometimes they refresh ATM screen hoping that the interface shift will cause the customer to look back to the monitor. They might also play a reoccurring sound that signals the customer that their attention is needed. Fundamentally, these attempts are just patches, and should signal to the bank that their process is broken. The real solution is not to bifurcate the original task. This can be accomplished by placing all essential but less important tasks before money is dispensed. As a designer I try to be conscious of task chunking when planning out my applications. First I enumerate the discrete tasks in my process and map any potential hotspots where bifurcation by the user may occur. Next, I determine if I can wrap this potential offshoot into the master task chunk. If consolidation is not possible I try to move important tasks in my task chunk before this potential offshoot. My goal is to keep the user’s attention focused on a single pathway. Anytime I make them double-back to complete a task for the benefit of my application I know I have done something wrong. As a footnote I am happy to report that Bank Of America’s new ATMs improve their approach to task chunking. They return your card immediately after you enter your pin. Of course now I have to unlearn years of using the ATMs which has taught me to walk away from the machine once I get my card back!

Gridview Performance improvement with Custom Paging

over 4 years ago | Sumit Bajaj: Sumit Bajaj's Blogs

Gridview provides excellent features to show the data on webpage. Few of the popular features are sorting, column arrangements, styles, item templates, editing, updating and deleting.Get the data from SQL, DataList, Arrays and bind the data to Gridview and it displays the data in required format.GridView1.DataSource = SQL command Result OR List() OR Array() GridView1.Databind();When the data is huge and you bind the data with GridView, it can impact the performance of your page. To Overcome that, GridView Paging is provided but it fetches all the records and bind it to GridView and when you click on page number, it shows the records of that page index.GridView paging is also not good solution and hits the performance as it fetches all the records once and then bind it to GridView.Here is the solution which do custom paging and fetches the data when required.GridView with Custom PagingGridView with Custom PagingGridView is showing 10 records by default. Clicking on 'Next' button will show next 10 records. Clicking on 'Previous' button will show previous 10 records. First button will take you to First Page and Last button will take you to Last page of GridView.Trick starts with SQL Server Stored Procedure. We have to write a stored procedure which will return the required records.  SQL Paging to improve performanceA kind of SQL Paging is done which takes two parameters 1. startIndex (from where to start)           2. recordCount (how many records to fetch)SQL Paging using Stored ProcedureSQL Paging using Stored ProcedureDefault value of @startIndex is set to 0 and @recordCount is set to 10 which means it will fetch 10 records starting from 0th row.Now time to write code to fetch the data and populate it to GridView.Populate GridView on PageLoadHere GridView is being populated on Page_Load method and PopulateData method is pulling the records from SQL Server.PopulateData(GridView1.PageIndex, 10);Note: GridView1.PageIndex gives the Index value which is 0 by Default Next Button ClickNow when we will click on 'Next' Button, we will increment the GridView1.PageIndex by 1 and next 10 results will be shown.Next Button Click Code BehindNext Button Click Code BehindPopulateData(GridView1.PageIndex * 10, 10);      where GridView1.PageIndex is incremented by 1 and gives results as 1. Multiply by 10 will give result as 10. Now records will start from 10 and will display next 10 records. Previous Button ClickSimilarly Previous Button will decrement the GridView1.PageIndex by 1 on every click till the value is 0.  First Button ClickClicking on First button will call method PopulateData(0, 10);  Last Button ClickClicking on Last button will call method PopulateData(TotalRecordCount()-10, TotalRecordCount());  where TotalRecordCount() method returns total count of records in sql table.After doing Cutom Paging, Editing, Deleting and Updating can also be done on fetched records. GridView Edit / Delete / Update after Custom PagingEditing can also be done easily after doing custom paging.It is very much similar to editing we do in Gridview. The only difference is that we are calling method PopulateData after finding index of edited row in GridView.PopulateData(GridView1.PageIndex*10,10)The reason we are calling this method because if  we will not call this method how GridView will come to know which record to edit when page postback will happen on click on Edit button of GridView.GridView Edit after Custom PagingGridView Edit after Custom PagingAs we have written the code for Edit, similarly you can write the code for cancel, delete and update event of GridView.Happy Coding !!It would be honor for me if you could provide your valuable comments if you liked / not  liked /suggestions to improve.

One slide I wouldn’t mind preparing. Within two flights I...

over 4 years ago | Nirmal Merchant: Urban Gypsy

One slide I wouldn’t mind preparing. Within two flights I knew I like more rich and brooding wings a opposed to light and bright.