Tag Archives: frontend

More than a live-reload server, built for efficient frontend development

More than a live-reload server, built for efficient frontend development

bin update readme 9 months ago
docs for merge 2 years ago
src change package.json, add keywords 17 hours ago
test update README.md 2 days ago
vendor npmjs republish 4 months ago
.gitignore new version 9 months ago
Cakefile new version 9 months ago
LICENSE add folder.coffee 2 years ago
README.md change package.json, add keywords 17 hours ago
package.json change package.json, add keywords 17 hours ago
setup.js Merge branch ‘connect’ of https://github.com/leeluolee/puer into connect 2 years ago


  1. create static server at target dir (default in current dir)
  2. auto reload : editing css will update styles only, other files will reload the whole page.
  3. weinre integrated use -i options
  4. proxy server mode, use it with an existing server
  5. http request mock by -a addon,the addon is also live reloaded
  6. connect-middleware support

Express Complete Tutorial : Part 2

Express Complete Tutorial : Part 2

Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express.

In this tutorial i am going to explain how to use EJS to template your advanced web applications. For those who are confuse with HTML and EJS. EJS parse complete HTML without any issue, with that it also provide some cool features which i am gonna explain below.

Beauty of EJS is that you can use one template to perform multiple operations. For.eg if i create on EJS file and set the title, head, div ID etc coming from server. I can set it multiple times depending upon the routes call.

Binary websockets with Play 2.0 and Scala (and a bit op JavaCV/OpenCV)

Binary websockets with Play 2.0 and Scala (and a bit op JavaCV/OpenCV)

In a recent article I showed how you can use webrtc, canvas and websockets together to create a face detection application whose frontend runs completely in the browser, without the need for plugins. In that article I used a Jetty based backend to handle the image analysis using OpenCV through the JavaCV wrapper.
When I almost finished the article, I noticed that websockets is also supported from Play 2.0. I really like developping in Play and in Scala so as an experiment I rewrote the backend part from a Jetty/Java/JavaCV stack to a Play2.0/Scala/JavaCV stack. If you want to do this for yourself, make sure you start with the frontend code from here. Since the frontend code hasn’t changed except the location where the websockets are listening.

Master Front-End Workflow with Yeoman, Grunt and Bower

It’s time to take your workflow to the next level! Yeoman makes Front-End Workflow not only fun, but powerful, professional and very cool.

If you’re a front-end developer and you don’t use Yeoman, Grunt and Bower, then get ready to enjoy the complexities of front-end development in a whole new way.

Yeoman will scaffold out your project in moments.
It then harnesses Grunt to watch for changes to your files and automatically refresh your web browser.

It will run your unit tests, minify your javascript & css, compress your final distribution html file and so much more.

Finally, it uses Bower to apply package management to all of your front end files.

Other Videos:
Bower Tutorial: http://www.youtube.com/watch?v=Vs2wdu…
Bootstrap Tutorial: http://www.youtube.com/watch?v=no-Ntk…
Github Tutorial: http://www.youtube.com/watch?v=0fKg7e…
Web Development Career Advice: http://www.youtube.com/watch?v=zXqs6X…

5 steps to making a Node.js frontend app 10x faster

5 steps to making a Node.js frontend app 10x faster

Making GoSquared Dashboard fasterOver the last couple of months we’ve done a huge amount to make Dashboard (the node.js application that powers the Now, Trends and Ecommerce front-ends) much faster. Here’s a brief summary of our story in making that happen.

jQuery Ajax – Servlets Integration: Building a complete application

jQuery Ajax – Servlets Integration: Building a complete application

There are many tutorials around the web that explain some stuff about web development in Java using servlets and JSP pages, however I have never found aconcise, simple enough for beginers, tutorial. A tutorial like that should explain the whole process of creating a simple web app, including the frontend, the backend, and most importantly, the ways that someone can use to interact with both of them. It is not enough to show how to get information from the server, it is also important to kn0w how to differentiate between the information in a structured way, as well as to know how to make changes to the backend through the application environment.

What we want to achieve by this post here, is to guide through the whole process of creating a complete “toy” web application. It is a “toy” application in the sense that it does only two things and we are using no extra features to make the environment beautiful. The purpose of the application will be simple:

  • Add a band name with a list of albums (separated by commas) and press the “Submit” button to add them to the database.
  • Press the “Show bands!” button to get a list of the bands, or the “Show bands and albums!” button to get a list of bands with their albums.

The look of the app is as bare-bones as possible, but the code behind it is everything you need to start creating your own dynamic web applications, which are most commonly called CRUD applications (Create, Read, Update, Delete). They are called that way because all their functionality can be abstracted to these very basic commands.

Before we start creating the application step-by-step, let’s take a look at all the tools that we are going to work with in this example:

  • Eclipse Luna
  • Java 7
  • Tomcat 7 (web application server)
  • Gson 2.3 (Google Java library)
  • JQuery 2.1.1 (Javascript library)