Recently on Base22 we started to test Vue:
Vue (pronounced /vju?/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications.
More important, we focused on evaluate Vue on an Enterprise environment, our findings are documented on the next Base22 public wiki page: Vue.js
Note: the article is oriented to provide a none technical overview of Vue.
I really hope you find this information useful.
Fast websites, an universal demand, but not always achieved. If you are a web developer, is desired that you expend a couple of your time to care about this point.
This post complement my previous post: How to use Console Timing to Trace JavaScript Performance, and works as an introduction to use Navigation Timing API.
“The Navigation Timing API provides data that can be used to measure the performance of a website. Unlike other JavaScript-based mechanisms that have been for the same purpose this API can provide end-to-end latency data that can be more useful and accurate”.
The following graph illustrates the timing attributes defined by the PerformanceTiming interface and the PerformanceNavigation interface with or without redirect, respectively. Attributes underlined may not be available in navigation involving documents from different origins. User agents may perform internal processing in between timings, which allow for non-normative intervals between timings.
For example, if you want to measure the user-perceived page loading time of a page you can use the next JavaScript code:
<html>
<head>
<script type="text/javascript">
// Add load event listener.
window.addEventListener("load", loadTime, false);
function loadTime() {
// Get current time.
var now = new Date().getTime();
// Calculate page load time.
var page_load_time = now - performance.timing.navigationStart;
if (window.console) console.log("User-perceived page loading time" + page_load_time);
}
</head>
<body>
<!- More HTML here. -->
</body>
</html>
As definition:
- navigationStart: Time after the previous document begins unload.
Or, in other words, tells us when the user initiated the page load, either by clicking a link, or entering it into their browser’s URL bar.
Now you have more tools, at least at client-side, to measure the performance of your pages.
More information:
Note: don’t forget to clean all console calls in your production code, also, check the browser compatibility (Mozilla MDN) since is not supported in all browsers.
Hope you find this information useful!
How to center a div, image, text are mainstream topics on the web without question these days, but find a nice tutorial/post that explains how to do that is no so common, well, not any more!. I came across with an excellent post on smashing magazine, called Absolute Horizontal And Vertical Centering In CSS that does that in a very easy way!. Kudos to Stephen Shaw.
Inside this post you will find a link to another excellent post: How to Center Anything With CSS by Joshua Johnson. and most important, both articles cover various common scenarios, so, what are waiting for!? xD
Hope you find this information useful!
In this post I will share how can be implemented Isotope sorting and combine it with a filter functionality in a real case.
But first, for those that doesn’t know, Isotope is a jQuery plugin that in resume, have the following features:
- Layout modes: Intelligent, dynamic layouts that can’t be achieved with CSS alone.
- Filtering: Hide and reveal item elements easily with jQuery selectors.
- Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
- Interoperability: features can be utilized together for a cohesive experience.
- Progressive enhancement: Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.
Requirement (simplified):
Be able to re-order a set of items based on a selected category and at the same time highlight at the top of the list (filtering) the items that matched that category.
Result:
In our new website our team section display a grid with thumbnails of the team members of the company and in the right side of the page is showing list of fields (categories) of expertise that the user can select to sorting and filter the thumbnails. In order to create that functionality, we decided to use Isotope, specifically the sorting capability and we added a modification to create a kind of filter:
By default all the thumbnails are sorted by the field name every time the page is displayed:
The Isotope JavaScript code looks as follow:
itemSelector: '.team-member-grid',
getSortData : {
// ...
name: function($elem) {
return $elem.find('.name').text();
}
}
Note: getSorData is used by Isotope to create all the sorts that the user can applied to a set of items. getSorData accepts an object, whose values are the functions to extract the data. Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.
To sort the items by name I diced to use the div that contains the name of the team member for this purpose and the HTML looks as follow:
<div class="widget team">
<div class="team-member-grid element">
<!-- more code here...-->
<div class="team-member-title name">Alex Arriaga</div>
<!-- more code here...--></div>
<div class="team-member-grid element">
<!-- more code here...-->
<div class="team-member-title name">Alfonso Ramos</div>
<!-- mode code here...--></div>
<div class="team-member-grid element">
<!-- more code here...-->
<div class="team-member-title name">Ben Shoemate</div>
<!-- mode code here...--></div>
At this point, this is a default implementation of Isotope sorting, but now, if you click in one of the fields of expertise (right side of the page), you will see that the items that match that category are displayed (ordered by name) at the top of the list and the rest of the items at the bottom with a opacity: 
In order to achieve that, using Isotope, I needed that each of the items had a flag for each of the fields of expertise, why?, because Isotope requires that all the elements that are going to be sorted have the attribute/css class name that will be used for sorting and in our scenario a team member could have more than one field of expertise. So, I used as a flag an integer value of 1 if “is in that field of expertise” and 2 for “is not in that field of expertise”. With that little trick I forced Isotope to move at the top of the Grid all the items that matched that field of expertise since all that items will have a value of 1 for that attribute, and at the same time Isotope will move at the bottom the rest of the items, since have a value of 2, and with that trick I covered the filter requirement.
Now my JavaScript code looks as follow:
itemSelector: '.team-member-grid',
getSortData: {
manager: function($elem) {
return parseInt($elem.attr('data-category-manager'), 10);
},
solarchitect: function($elem) {
return parseInt($elem.attr('data-category-solarchitect'), 10);
},
analysis: function($elem) {
return parseInt($elem.attr('data-category-analysis'), 10);
},
qualityassu: function($elem) {
return parseInt($elem.attr('data-category-qualityassu'), 10);
},
//...
name: function($elem) {
return $elem.find('.name').text();
}
}
And now, each of the items needs to have a data attribute for each of that filters I have created:
<div class="widget team">
<div class="team-member-grid element isotope-item" data-category-solarchitect="2" data-category-qualityassu="2" data-category-analysis="2" data-category-manager="2">
<div class="team-member-title name">Alex Arriaga</div>
<!-- more code here...--></div>
<div class="team-member-grid element isotope-item" data-category-solarchitect="2" data-category-qualityassu="1" data-category-analysis="2" data-category-manager="2">
<!-- more code here...-->
<div class="team-member-title name">Alfonso Ramos</div>
<!-- mode code here...--></div>
<div class="team-member-grid element isotope-item" data-category-solarchitect="2" data-category-qualityassu="2" data-category-analysis="2" data-category-manager="2">
<!-- more code here...-->
<div class="team-member-title name">Ben Shoemate</div>
<!-- mode code here...--></div>
At this moment two things are missing, the list of fields of expertise and the JavaScript code (using jQuery) than can trigger the different sorts/filters when the user click in one of the fields of expertise of that list: 
The HTML for that looks as follow:
<div class="nav-collapse collapse">
<ul class="option-set" data-option-key="sortBy">
<ul class="option-set" data-option-key="sortBy">
<li class="active"><a href="#sortBy=name" data-option-value="name">By Name</a></li>
<li><a href="#sortBy=manager" data-option-value="manager">Project Management</a></li>
<li><a href="#sortBy=analysis" data-option-value="analysis">Business Analysis</a></li>
<li><a href="#sortBy=qualityassu" data-option-value="qualityassu">Quality Assurance</a></li>
</ul>
</ul>
<ul class="option-set" data-option-key="sortBy">//...</ul>
</div>
And the JavaScript code looks as follow:
var $optionSets = $j('.team-filters .option-set'), $optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $j(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
//highlight the current filter
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options);
}else{
// otherwise, apply new sort/filter
$container.isotope(options);
}
return false;
});
Each one of the values of the attribute data-option-value of the items in the list of fields of expertise correspond to the name of one of the sorts, and when a user click on one of the options, the sort selected is passed to Isotope in order to re-order the items:
// make option object dynamically
var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
$container.isotope(options); // re-ordering the items based on the option selected
And is done!!.. hope you find this information useful.
Note: would be great if Isotope could improve sort/filter and find a way to dynamically create all the sorts/filters within getSorData, as for example, right now if we add another field of expertise we have to write the code for that type inside getSorData. Also to remove the restriction that all elements must have the same element used to sort/filter, keep it simple, if it has that element/attribute applied sort/filter, otherwise, no.
Update: I have created a new post of How to create a dynamic getSortData function for Isotope jQuery plugin, hope you find this information useful!!
