Grunt, một Backend-free apps kết hợp jekyll, D3.js, nhanh hơn 96% websites khác

Grunt, một Backend-free apps kết hợp jekyll, D3.js, nhanh hơn 96% websites khác

When we started working on a mobile web site for Casa del Lector's exhibition, we decided early on it would be a backend-free app, mainly for reasons of stability and performance:

>> 3 thuận lợi khi bạn sử dụng Git submodules with Drupal

>> Ý kiến Git và Bash aliases từ Alex Pott đang làm ở Chapter Three

Grunt, một Backend-free apps kết hợp jekyll, D3.js, nhanh hơn 96% websites khác

App is faster than 96% of other websites

The data was entered by the client on a 3rd party desktop tool which exported it to XML. We used a bunch of open source tools to massage it a bit and prepare it for the App. Since the project is open sourced you can check out the actual code.

The App in action


Grunt was an obvious choice for processing the XML data and getting it ready for Jekyll's consumption. Since we are already working with generator-jekyllrb we were able to add our own custom tasks.

Here are some notable Grunt plugins we have used:

  • grunt-text-replace: Sanitizing text, removing tags, and many text manipulation can be achieved using this great plugin
  • he: This one you would use to deal with HTML encoding and decoding. Useful for non-english websites (CDL has a version in Spanish)
  • underscore: Manipulating complex JSON objects and array made easy.
  • grunt-convert: Converting to/ from JSON, YAML and XML is very handy when consuming data from 3rd party source

You can see the configuration in the Gruntfile.js


Grunt tasks generate JSON files from the XML, properly encode and injected it into Jekyll. Jekyll was used to create the actual HTML. Nothing too fancy here, but it served its purpose - generating the HTML that we'll later grunt deployinto GitHub Pages.


D3.js is an excellent library with great documentation and examples. However to improve mobile performance, we had to look beyond the common examples and API recommendations. Some tips:

  • Emulators are nice, but in the end the HTML, CSS and JS should be tested on actual devices. Luckily for us the devices in the exhibition were known, so it was easier to target them. We used Chrome and Safari remote developer tools to get internal insight of the application
  • Removing the 300ms delay of double-tap zoom was a good start but of course not enough. In fact, the most difficult issues were in relation to events handling and animations. Try to apply throttle or debounce when handling Zoom or Drag, so they animations don't choke the app and overload the d3js behaviors.
  • I also highly recommend the fabulous talk of Mark DiMarco from JSConf 2014, who presented alternatives to handling the user interaction and animation in d3js. This helped us do further optimizations and make pthis project a success

Even something as simple as a dropdown menu or a bar graph can introduce usability problems. From a slide out menu disappearing when a user's mouse moves a few pixels too far, to requiring NASA-like levels of precision to mouse over the right element, there are algorithms already implemented in Javascript to help us overcome these problems. If an algorithm is defined as "a step-by-step procedure for calculations", let's visually break down those steps for 2 different non-trivial algorithms and explore how these algorithms are applied to some standard & everyday user interface patterns. We'll first look at an algorithm for predicting a user's intentions by calculating mouse speed and direction, and then tackle determining hit state for hundreds of non-uniformed, variably sized and placed UI elements.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/

Tìm kiếm bất động sản





Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

9 tính năng iPhone 5 nên “vay mượn” từ iPad mới

9 tính năng iPhone 5 nên “vay mượn” từ iPad mới

Kết nối 4G LTE, chip A5X hay vỏ nhôm... là những thứ iPhone thế hệ kế tiếp của Apple có thể học hỏi từ mẫu máy tính bảng iPad mới ra mắt.

CNTT Việt Nam 2011 - Nông dân được ‘lên mây’

CNTT Việt Nam 2011 - Nông dân được ‘lên mây’

Năm 2011 đã trôi qua khá trầm lắng trên thị trường CNTT Việt Nam. Bối cảnh kinh tế khó khăn đã để lại dấu ấn sâu sắc trong bức tranh toàn cảnh.

Yslow – Tối ưu hóa tốc độ website

Tối ưu hóa tốc độ website của bạn bằng Yslow

YSlow. Nó dựa trên các tiêu chí đánh giá chất lượng web speed và tối ưu hóa code của Yahoo! Hoặc cụ thể là một công cụ được implement theo chuẩn của các dev Yahoo cho việc tối ưu hóa website nhìn từ  client site.  Sau đây là điểm qua một số chức năng cơ bản của YSlow

Wordpress Freelancer


Wordpress Freelancer