background preloader

Top 10 Front-End Development Frameworks

Top 10 Front-End Development Frameworks
(Editor’s note: purely for reasons of length and readability, this article is the first of two parts. This one focuses on the Bootstrap family, more will be profiled in the second part.) As the Web matures and the range of mobile devices we use to access it rapidly grows, our jobs as web designers and developers get considerably more complicated. A decade ago things were much simpler. Then, it was almost certain that most of our users were visiting our sites while sitting at their desk, looking at a large monitor. 960 pixels was more or less considered as a good width for a web page. Our main care was dealing with the dozen or so desktop browsers and jumping through a few extra browser hacks to support quirky old versions of Internet Explorer. Soon, more people will be accessing the Web on their mobile and alternate devices than on a desktop computer. One of the primary strategies we use when we deal with unknown viewport size is the so-called responsive web design. 1. 2. 3. 4.

Take Your HTML Tables to a New Level with JavaScript Frameworks Take Your HTML Tables to a New Level with JavaScript Frameworks With basic HTML tables, the structure and the way the table are presented inherits the native html style. And if you like to change it then you need to change the underlying HTML code or spend time in adding attributes to all tables tags, in order to style it with CSS . But what if you want to make the tables more interesting, more dynamic, more visual appealing without spending so much time. Yes you can certainly use JavaScript for this, but coding it from scratch will be time consuming and it’s not worth. But JS libraries/frameworks will allow you to add a range of dynamic behavior to your tables and manipulate it for better presentation on a webpage without spending much time. Solutions Based on jQuery Flexigrid Flexigrid is a lightweight plug-in for jQuery that converts an ordinary HTML table into an extremely flexible and feature-rich datagrid (or Flexigrid). tablesorter TableRowCheckboxToggle TableEditor ingrid DataTables

Top 10 Front-End Development Frameworks: Part 2 In the first part of this article we’ve seen some nice frameworks all related to Bootstrap. If you are weary of all this Bootstrap, take a deep breath and get ready for something really different. Let’s start with the main competitor of Bootstrap – Foundation. 5. Foundation Foundation is a powerful, feature-rich, responsive front-end framework. Foundation has a 12-column flexible, nestable grid powerful enough to let you create rapidly multi-device layouts. The framework also offers many useful add-ons. Stencils – all UI elements available in Foundation in a form of Omnigraffle stencils and vector PDFs for building wireframes and mock-ups faster and more easily.HTML Templates – handy, ready to go layouts for you to quickly start from and build on. As you can see, Foundation is like a treasure-house for web developers/designers. 6. GroundworkCSS is a new, fresh addition to the front-end frameworks family. 7. 8. 10. Conclusion Comments on this article are closed.

Image recognition on mobile devices Image recognition is one of the buzz-words of our times. Facebook has acquired with its flagship product — facial recognition app — and invested huge money to better suggest who’s who on the images uploaded to the service by over a billion of its users. Google+ Photos uses image recognition technology to make photos searchable, and Google Goggles is a new powerful gadget from the Mountain View giant that will let you find information on objects not by typing their names, but by simply „showing” Google what they look like. Not as easy as you may think Our mobile team at Goyello has recently faced a challenge of a similar type (in a smaller scale though) — how to recognize if a photographed image of a solved puzzle set matches one of the predefined templates. The task that seems to be so easy to the human brain is in fact a complex feat, and highly sophisticated algorithms out there still fall short of what any of us — humans — is capable of. Quality challenges To avoid cheating

10 Best Responsive HTML5 Frameworks and Tools This is a review of 10 open source responsive HTML5 frameworks, boilerplates and tools for front-end web development (HTML, CSS, and JavaScript). I’ve included tutorials and resources related to each of them, and a comparison table at the end. 1. Bootstrap is a popular, modern front-end/UI development framework. Bootstrap has a 12-grid responsive layout, 13 custom jQuery plugins for common UIs like carousels and modal windows, a Bootstrap customizer, and more. Bootstrap is well-documented, and this open source project has plenty of coverage in blogs and tutorial sites. Bootstrap Tutorials Bootstrap Tools and Resources 2. Foundation is another popular responsive front-end framework. It has rapid-prototyping capabilities, a responsive grid system and much more. Foundation is by ZURB, a company of product designers focused on providing web-based solutions. Foundation Tutorials Foundation Tools and Resources 3. Skeleton is a simple and clean responsive CSS boilerplate for HTML5 websites and apps. Java, JSF 2, PrimeFaces, Ajax, jQuery, Spring, Hibernate, REST, Hadoop, and GWT Training, Tutorials, Consulting, Books, & Resources Ruby on Rails Why Does Windows Have Terrible Battery Life? I've become a huge fan of touch computing. I believe that most things we think of as "computers" will be de-facto tablets, either in our pocket, in our hands, possibly even mounted on our wrists or forearms. I can't wait for the iPad 5 this week (I'll be ordering three), and my Surface Pro 2 should arrive this week too. My main complaint with the Surface Pro is the incredibly lackluster battery life. So WiFi web browsing battery life, arguably the most common user activity there is on a computer these days, goes from 4.7 hours on the Surface Pro to 6.7 hours on the Surface Pro 2, a 42% increase. Nearly 7 whole hours of WiFi web browsing for a real computer in tablet form factor … that's not bad, right? The Surface Pro 2 has a 42 Wh battery, which puts it closer to the 11 inch Air in capacity. UPDATE: Turns out the Surface 2 Pro was shipped with bad firmware. It's not exactly news that Windows historically doesn't do as well as OS X on battery life.

Web UI Frameworks Worth a Try We have been used to the fact that every second site looks like Twitter. That's because of their awesome Bootstrap UI framework. We've seen CSS frameworks before, but all of them were narrow enough to solve one problem at a time. Usually this meant a grid layout and resetting CSS. Twitter Bootstrap not only provides you with flexible responsive grids but adds many useful components. It's pretty easy to build a prototype site just by adding appropriate classes into your tags and see how beautiful CSS3 magic unfold on your pages. From another point of view, a site built with Bootstrap loses it's individuality. But how to make site look more unique? Let's try something different then. Foundation Foundation is the most advanced responsive front-end framework in the world. Fuel UX Extends Twitter Bootstrap with additional lightweight JavaScript controls. HTML KickStart Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production MetroUI Groundwork AlloyUI Kendo UI Ignite UI

Pure JavaScript HTML Parser Recently I was having a little bit of fun and decided to go about writing a pure JavaScript HTML parser. Some might remember my one project, env.js, which ported the native browser JavaScript features to the server-side (powered by Rhino). One thing that was lacking from that project was an HTML parser (it parsed strict XML only). I’ve been toying with the ability to port env.js to other platforms (Spidermonkey derivatives and the ECMAScript 4 Reference Implementation) and if I were to do so I would need an HTML parser. Because of this fact it became easiest to just write an HTML parser in pure JavaScript. I did some digging to see what people had previously built, but the landscape was pretty bleak. (I also contemplated porting the HTML 5 parser, wholesale, but that seemed like a herculean effort.) However, the result is one that I’m quite pleased with. htmlparser.js: 4 Libraries in One! There were four pieces of functionality that I wanted to implement with this library: A SAX-style API

Is desktop software dead? It’s rare that I chat to other software developers without someone asking me when I am going to do a web version of my seating planner software. Because the market for desktop is dead, right? SAAS apps is where all the action is! I think the web is a great platform for some products, not so much for others. Web advantage 1: No installation You can access a web app from any device that has a browser. Web advantage 2: No upgrades End-users are always using the latest version. Web advantage 3: Better user insights You can analyse how users are using your software. Web advantage 4: Distributed architecture If you are writing web apps, you get a distributed architecture for free. Web advantage 5: Less piracy Cracks and keygens are a fact of life for desktop software vendors. Web advantage 6: Cross platform In theory web apps are cross-platform. Web advantage 7: Subscriptions Web apps lend themselves to subscription based payment. So what about the advantages of desktop apps over web apps?