Fazle is an experienced web developer and a Computer Science Engineer from India. With more than 4+ years of experience, he masters the art of Responsive Web Design (RWD). He's the author of the Book, Jump Start Bootstrap, published by SitePoint. He also excels in prototyping and developing hybrid apps for Mobiles and Smart TVs. You can also find him blogging about various web technologies on his own website HTMLxprs.
Syed Fazle's articles
With the release of version 3, Bootstrap has gone mobile first, building on its already responsive base. What kinds of things does Bootstrap include in its CSS to help with this? Let’s examine a few things and gain some insight that might help us in our own custom projects. Defining Proper Media Queries Bootstrap has […]
Google announced a big surprise just a few days ahead of the Google I/O Conference in San Fransisco. They have launched a brand new tool called Web Starter Kit, a boilerplate with powerful tools to quickly start your web development projects.
Maybe Google wants the Google I/O attendees to familiarize themselves with the tool before the event starts. Whatever the case, the Web Starter Kit is a powerful tool packed with many modern third-party tools to help you start writing powerful code in minutes.
Google has previously released many web foundation tutorials showcasing some of the best practices in modern web development. With this release, they have given away a set of boilerplate templates and tools that focuses more on performance issues and multi-screen development. Google seems to fill the void that most of today’s front-end frameworks have long ignored — web app performance and optimization!
Web Starter Kit, though in beta, comes with features that include:
- Multi-device responsive boilerplate
- Cross-device synchronisation
- Live browser reload
- Code minification
- Built-in HTTP Server
- PageSpeed Insights
- Sass support
… and more. To make the kit work, your system should have NodeJS, Ruby, and Ruby Sass Gem installed. Installing Gulp is optional.
The kit also includes a multi-screen grid system inspired by frameworks like Bootstrap and Zurb’s Foundation. But unlike such frameworks, this kit doesn’t offer any UI elements and components. Google engineer Addy Osmani said on Hacker news that they don’t intend to compete with Bootstrap in terms of UI components.
Hoodie is best suited for creating mobile apps using the front end technologies mentioned above. It utilises Offline First and noBackend architecture that enhances the app’s performance. Hoodie follows Document-Based storage using CouchDB for storing data. Whenever data needs to be updated, Hoodie stores it locally first and then syncs with a central server on a best effort basis.
In this article, we will install and run Hoodie on our local computer. We will create and analyze a simple Hoodie application. Finally, we will create a functional web app using Hoodie’s important features.
Hoodie supports all major platforms like OSX, Linux and Windows. In this tutorial, I will show how to install Hoodie on a Mac. For other platforms you can follow the installation documentation.
Start the terminal and type the following command.[code language="bash"]$ brew update[/code]
This command will update the Homebrew to its latest version. Next, we will install git using the following command.[code language="bash"]$ brew install git[/code]
Now we will download and install NodeJS using the following command:[code language="bash"]$ brew install node[/code]
It’s time to download and install CouchDb, the database which Hoodie uses for data handling.[code language="bash"]$ brew install couchdb[/code]
After installing all the above tools, we will use Node’s Package Manager to download and install Hoodie.[code language="bash"]$ npm install -g hoodie-cli[/code]
You can now verify your hoodie installation by typing
hoodiein the terminal. A graphical Hoodie logo along with other help options will be displayed.
Bootstrap, today, stands as one of the most popular open source front-end frameworks on the Web. Since its official release in 2011, it has undergone several changes, and it’s now one of the most stable and responsive frameworks available. It’s loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can get started with Bootstrap.
Bootstrap provides a solid foundation for any website, irrespective of project size. It contains Normalize.css which helps in clearing browser resets. It also provides great typography. Even the basic HTML form elements like checkboxes, radio buttons, select options, etc. have been restyled to give a modern look. I use Bootstrap because it saves me a considerable amount of effort.
Today’s websites should be modern, sleek, responsive and mobile first. Bootstrap helps us to achieve these goals with minimum fuss. Here are the top five reasons why I love Bootstrap:
Reason 1: The powerful grid system
Bootstrap has one of the best responsive, mobile first grid systems out there. It’s easy to use and flexible. It helps in scaling a single website design from the smallest mobile device to high definition displays, logically dividing the screen into 12 columns, so that you can decide just how much screen real estate each element of your design should take up.
Reason 2: Rapid Development
Ratchet is a framework for building mobile applications and prototypes quickly using simple HTML, CSS and JS components. In my last post, Ratchet – Prototyping Mobile Apps Easily, we looked at steps for getting started with Ratchet framework. We also looked at how to place important components like Title bar, Table views, Chevrons, Toggles and […]
The Foundation framework isn't new to the industry, but it is a framework that hasn't been explored completely. With its latest version, Foundation 5, it has compelled developers to use it without giving it a second thought. Along with major revamp since Foundation 4, it has brought many innovative and useful tools not implemented by […]
Sometimes, it’s really disappointing to see how a really great tool can fail to come to the limelight, due to a lack of visibility and good promotion. The particular tool I’m talking about is RECESS, a CSS and LESS compiler built by developers at Twitter. Launched in early 2013, it is one of the most […]