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

  1. Responsive Web Design Tips from Bootstrap’s CSS

    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 […]

  2. Google Launches Web Starter Kit: A Multi-Device Boilerplate and Toolkit

    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 Web Starter Kit

    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.

  3. A Tutorial on Getting Started with Hoodie

    JavaScript has come a long way and Hoodie takes it further. It is one of the coolest web development tools that I have come across in recent times. It helps with building web apps without worrying about backend development, databases and servers. Imagine that! Looks like someone has seriously made our lives easier.

    With Hoodie, you create web applications built purely with front end technologies like HTML, CSS and JavaScript while allowing for data manipulation without worrying about server side coding. It gives you features such as user signup, sign-in, reset password, data storing and retrieval and email support. All can be used by writing a few lines of code.

    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.

    Installing Hoodie

    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.

    To install Hoodie on OSX, you need a few tools pre-installed namely Homebrew, NodeJS, git and CouchDB. Let’s get them one by one.

    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 hoodie in the terminal. A graphical Hoodie logo along with other help options will be displayed.

    hoodie startup

  4. Why I Love Bootstrap, and Why You Should Too

    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

    Bootstrap comes complete with many reusable CSS and JavaScript components that can help to achieve the functionality needed in almost in any kind of website. You just have to use some HTML markup to plug them into your template, with no need to spend huge amounts of time time writing complex CSS and JavaScript code. Plus, these components are all responsive, too!

  5. Ratchet’s Push.Js – Prototyping Mobile Apps with Multiple Screens

    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 […]

  6. Prototype Mobile Apps Easily with Ratchet

    It is difficult to prototype native Mobile applications using responsive web design technologies as they do not simulate native behavior. Developers often need to write tons of JavaScript to create single page architecture or use technologies such as Angular.js and Ember.js. There were a few developers who took this issue seriously and started working on […]

  7. Creating CSS Animations Using Move.js

    CSS3 transitions and animations are currently the preferred method for creating lightweight animations on websites. Unfortunately, many developers find their syntax to be complex and confusing. If this sounds like you, Move.js may be the perfect solution for you. Move.js is a simple JavaScript library that creates CSS3 animations using simple functions. This tutorial explores the basics of Move.js, and provides a live demo of Move in action.

  8. Understanding Bootstrap Modals

    In my previous tutorial, I explained how powerful Bootstrap 3 is for a novice designers. It ships with some of the best ready-to-use JavaScript and jQuery components and plugins. Recently the framework got a major update with version 3.1.0, bringing several important and necessary changes to the framework. In this tutorial we will be talking […]

  9. Foundation 5 Interchange – Creating Dynamic Page Content

    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 […]

  10. Optimizing CSS Stylesheets with RECESS

    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 […]