Category: Front end

Some Flexbox basics – CSS tricks

Initially aligning block level elements besides one another to achieve multiple column layouts was a bit tedious,but then Float property was introduced so as to achieve multiple column layouts. Float property was widely used by coders and still is being used.

But there are some drawbacks in using float, which makes a developer rethink in using it in a layout where there are multiple columns and proper alignment is a necessity.

Problems with using Floats

  • 1. A child element particularly an image when placed inside a floated parent item, tends to overflow outside the parent element thus pushing down the other floated element beside the parent item.
  • 2. A float property when used needs to be cleared.
  • 3. Items cannot be centered vertically.

I have just listed a few ones but there are many, and so as to overcome this shortcomings Flexbox was introduced.

Advantages of using Flexbox

  • 1. Flexbox helps align items and distribute it equally on a vertical and horizontal axis in a container.
  • 2. It also ensures that the layout won’t break at different screen sizes and on different devices.
  • 3. It can be really helpful with dynamic content when the size of the items is unknown.
  • 4. Flexbox contains a set of properties that can be used to make the layout flexible.
  • 5. One can align the items both vertically and horizontally center.
  • 6. Flexbox properties when used, the height and width of the items gets adjusted by default to fill the available space or shrinked to prevent overflow

USAGE:

Starting with the implementation firstly set the display property to the parent container as below.

.flex-container {
   display: flex;
}

Or can use it as an inline element:

.flex-container {
  display: inline-flex;
}

More Flexbox Container Properties:

1. flex-direction: This property sets the direction of the parent container. With this the items inside the parent container gets aligned vertically or horizontally.

.flex-container {
    flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap: This property helps to set items in single or multiple lines.

.flex-container {
   flex-wrap: nowrap | wrap | wrap-reverse;
}

3. flex-flow : A shorthand property for setting the flex-direction and flex-wrap properties together.

.flex-container {
  flex-flow:  <flex-direction> | <flex-wrap>;
}

4. justify-content : This property helps to distribute the flex items accordingly.

.flex-container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

5. align-items : It is similar to justify-content but helps in aligning items in perpendicular direction with the flex container.

.flex-container {
  align-items: flex-start | stretch | flex-end | center | baseline;
}

6. align-content : This property aligns flex items accordingly filling out the extra space within the parent container.

.flex-container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

I too use Flexbox, its simple to implement and saves a loads, no need to use frameworks or create any responsive grids.

Thanks

Setup simple website using Node.js, Express, Nunjucks, Gulp & Nodemon

Hello developers, before we start integration of all our components, let’s have a quick review of the below things.

Node.js

Node.js is a server side javascript-based platform. Like other server side platforms ( eg: Rails, Python, PHP… ), this javascript based platform is built on Google Chrome V8 Javascript Engine.
Node.js uses an event-driven architecture & asynchronous or non-blocking I/O model, which improves efficiency and scalability for real-time applications.

Express

Express is a web application server framework for Node.js. Express provide a robust set of features for building single, multi-page and hybrid web applications.
Express allows us to set up middlewares to respond to client HTTP requests. It also provides URL routing which allows to perform different actions and render dynamic HTML pages using any of the template engines like jade, EJS, nunjucks …

Nunjucks

Nunjucks is a rich & powerful templating engine for javascript. It takes inspiration from jinja2 templating system.
Using nunjucks we can inherit templates and make it possible to use the same or a similar layout for all templates.

Gulp

Gulp automates and enhances your application workflow. It is a task runner which uses node.js. Gulp keeps things simple and makes complex tasks manageable using node modules.

Nodemon

After any changes in your node.js application files, your changes will not reflect immediately. To reflect changes you will have to manually restart node.js server each time in a development environment.
Nodemon helps us to avoid such manual restarts. It monitors all changes in your node.js application and automatically restarts the server for a development environment. Nodemon will watch the files in the directory in which nodemon was started, and if any files change, it will automatically restart your node application.

So we are now clear about all the things. Let’s install the required dependencies using the following commands.

Install Node & npm from nodejs.org. or you can directly install it using brew

$ brew install node.js
$ node -v

Once node js installed upgrade you npm using

$ sudo npm install npm -g
$ npm -v
$ npm install express --save
$ npm install -g gulp
$ npm install nunjucks
$ npm install -g nodemon

Let’s jump on to an integration of all these components into one to make a solid architecture.
1) Create a blank directory in your workspace

$ mkdir myapp && cd myapp

2) Init your app using the following command

$ npm init

so your “package.json” file is created using the above command. Open package.json in your favourite IDE and update or add the following node module dependency code.

Install all the npm dependencies from package.json

$ npm install

Now let’s move on to the node server setup and nunjucks configuration with a view. so create app.js file on root level and copy the following js code into your app.js

In our app.js file, we configured nunjucks as default template rendering engine

var nunjucks  = require('nunjucks');
nunjucks.configure(app.get('views'), {
    autoescape: true,
    noCache: true,
    watch: true,
    express: app
});

so using the above configuration, you can directly use nunjucks syntax in your views. Using this you can also extend or include other views in HTML page.

in the above code “index.html” we are extending default the layout (“default.html”).
Let’s render the above index.html in the browser using the following node.js code

Now let’s move on to our last configuration of gulp and nodemon. Create gulpfile.js at root level and copy following js code into your gulpfile.js

The above gulp file added with different tasks for a different purpose. On server start, it will automatically run all tasks and create compressed, minified dist folder and serve all static assets from dist folder. gulpfile run the following tasks on server start

1) compile scss
2) compress & minimize js and libs
3) minify css
4) minify html
5) minify images and add random version to image

so in above gulpfile, we configured nodemon using below function and called this function into our default gulp task. This will automatically restart your node js server on every file change.

nodemonServerInit = function(){
        livereload.listen();
        nodemon({
            script: 'app.js',
            ext: 'js'
        }).on('restart', function(){
            gulp.src('app.js')
                .pipe(livereload())
                .pipe(notify('Reloading page, please wait...'));
        })
}

Once all node modules are installed and gulpfile.js changes are done, your directory structure should look like the image below
folder structure

So using all these commands your project setup is done. Run the below command to start your server on localhost

$ gulp

this command will start your node.js server and serve uncompressed assets from the build directory.
Run below command to run your server on production

$ npm start

this command will serve compressed assets from the dist directory.

You could also download sample demo from github account.

Happy coding!
For any queries or help, please drop me an email on radhe@idyllic-software.com

Modularizing JavaScript with Browserify

What is browserify?

If you have ever written any custom Node.js modules, getting started with Browserify will be a walk in the park. Browserify enables us to write Node.js style modular code and declaring dependencies is even simpler than you think if you have used require.js in the past. Configuring require.js is a world of hell and their documentation doesn’t help in any way. This is when browserify turns out to be such a relief. Take a look at the following code.

module-alerter.js:

module.exports = function alerter(message) {
window.message(message);
}

Now, if we were to import this in main.js, we’d write the following.

main.js:

var alerter = require(‘./modules/module-alerter’);
document.addEventListener(‘DOMContentLoaded’, function(){
  alerter(‘This is awesome’);
}, false);

I am sold already. Aren’t you?

Install browserify

You need Node.js installed and NPM comes with Node.js.

npm install -g browserify

 

Now, let’s set jQuery as our dependency library in our module-alerter.js

var $ = require('jquery');
// Note that we don’t need to specify relative path for our jquery library
// jQuery 2.0+ is AMD compatible and it returns jQuery or $

module.exports = function alerter(message) {
window.message(message);
$(‘body’).css(‘color’, ‘red’);
}

Please, use the appropriate directory structure for your modules, libraries. I usually adhere to the following

Directory Structure
Ideal directory structures for your browserify project
/modules

– This is where you will put all your custom modules

/vendor

– This is where you will put all your libraries such as jQuery, Backbone, underscore

/assets/js/

– This is where browserify will bundle up all your modules along with vendor libraries in 1 neat and tidy file. (Notice we don’t have anything there yet? We will get to that part)

browserify Magic

It is time to let browserify wave it magic wand over our code and get us to work. Just run the following command by reaching your project directory. In my case, I should be in the directory node (Don’t worry. This is a non-node project. I named it node because I am in love with node.js)

$ browserify src/js/main.js -o assets/js/bundle.js

 

// Please do not prefix $ to the command

 

Now, switch to the browser and reload or whatever to see the result. Boom! Now, wasn’t that easy?

Your

assets/js/

directory should now look

like this

assets/js/bundle.js

 

bundle.js

is that neat and tidy file I mentioned earlier. You don’t have to worry about what’s in there.
Include this

bundle.js

in your HTML code right before the body ends. Like this

 script src="assets/js/bundle.js" 

There’s one problem, though. You might wonder, “Do I have to run this command every time I add new module/vendor library or re-arrange my modules in project structure?” NO.

What you need is something that will keep a track of changes happening in your project. Something that will over watch your beautiful modular code. Fortunately, there’s a Node package that can do that for us. Introducing watchify

Install watchify

npm install -g watchify

 

and change your previous command

from

$ browserify src/js/main.js -o assets/js/bundle.js

 

to

$ watchify src/js/main.js -o assets/js/bundle.js

 

I hope that was quick enough and believe me we just took a crack at browserify. There is a ton of things we can do with it. The best place to read up more on Browserify would be the handbook.

Native Data-binding using JavaScript with observe

We have always loved using MV* frameworks for data-binding. Well, we have our reasons. There was never an easy way to set event listeners on RAW objects and perform certain tasks. Thanks to the recent ECMASCRIPT’s (7.0) proposal, data-binding has never been so easy and best of all, without any help from any framework.

Announcing Object/Array.observe

Allow me to introduce you to

a method that asynchronously keeps track of the changes to the data model or
simply an array which allows you to perform certain tasks by providing a callback function every time it detects a change in your data model.

This callback function returns an object that provides the following information.

  1. type of change(add, update, delete) and splice if you are calling observe on an array
  2. name of the property changed
  3. changed object
  4. and the old value of the changed property

Why are we going gaga over data-binding? Well, data-binding is important if you care about keeping the content, presentation and behavior separate. HTML is perfect for declaring static documents and therefore, we need a way to tie our document and data together. With data-binding, we achieve just that. Using Object/Array.observe, we observe the changes in our data model and keep the DOM upto date.

Without further ado, let me show you how easy it is.

Note: Following example uses handlebars (which depends on jQuery) to save me from writing unnecessary DOM manipulation code.

4 important concepts any front end developer should know

Note: I picked these 4 concepts because I feel they would build a strong foundation of understanding for you and it is entirely my opinion and I also understand that every front end developer may not feel the same way. Also, the purpose of this article is to only briefly explain about these concepts so you can dig deeper when you know enough.

  1. Event Propagation
  2. Event Delegation
  3. Document Fragment
  4. CSS Specificity

Let’s begin…

Event Propagation

Event dispatching in DOM tree - (image source - W3C)
Event dispatching in DOM tree – (image source – W3C)
  • Event (event object) must determine the propagation path (refer to the diagram below) before dispatching.
  • Once determined, although target element has either been moved or changed in the DOM tree, propagation path doesn’t change for the event implementation to work properly.
  • Event object must pass through 3 phases. Capture, Target and Bubble.
  • All 3 events can be skipped if Event.stopPropagation() is called before event is dispatched.
  1. Capture phase: When event is dispatched from the top it must handle all listeners that it finds on the way down (Note: Only if EventListener method has userCapture set to true)
  2. Target phase: In this phase, event object finds the event target (event.target) and handles listeners registered on it.
  3. Bubble phase: Event object travels (propagates) in back to the top, handling listeners registered on it. (Note: Only if EventListener method has userCapture set to false)

Example – Bin


Event Delegation

Now, Event Delegation is one of the easiest and most interesting concepts. With Event Delegation, one doesn’t have to register event listeners for the element nodes that don’t exist in the DOM tree. One simply does it by registering one on the the parent.

For example, I have an unordered list that gets refreshed every second and a new list item may get added to it. Now, registering event listeners to each of these list items is simply not practical considering there could be hundreds of them or thousands. What do you do then?

Solution:

  1. We register an event listener to their parent which is UL, an unordered list.
  2. When the event occurs, we perform a check for whether the user has actually clicked on any LI.
  3. Perform a task.

Now, this will save you from creating separate event listeners from each of the LI nodes and just one event listener will do the trick.

DocumentFragment

DocumentFragment is a light, parentless document just like the one you already know except it doesn’t exist until you create it and is not a part of the live DOM. It acts as a third-party container that takes nodes, stores them and allows you to append them effortlessly to your visible, live DOM with tremendous performance improvements. Here’s the proof Performance Test

How to?

Let’s say, you want to append some list items to the unordered list which already exists in your DOM.

Now, to creating a blank DocumentFragment

Let’s add our list items to it. Just a handful.

Our fragment is ready with the nodes we need. Let’s add them to the live DOM now

Using DocumentFragments is really a very efficient method of DOM manipulation with an amazing performance boost. For detailed reference

CSS Specificity

Now this is not only an interesting topic to know about, but also a very enlightening one at that. Specificity has predefined weights for all elements and these weights decide which rule will be applied by the browsers. We have already written an article on it. Read it here

Require.js with Rails

If you know what require.js does and Ruby on Rails is your thing, then you have come to the right place. If not, I encourage you to read up on following topics:

  1. Modular approach to writing JavaScript
  2. AMD and JavaScript
  3. Dependency management, Module Loading, and Lazy Loading

Installation and Setup

  1. Add ‘requirejs-rails’ gem in the Gemfile of your project. It relieves you from some manual labour.
  2. Get rid of everything from your application.js which is located under /assets/javascripts/application.js
  3. Now locate your application layout under views/layouts/application.html.erb
  4. Replace yourwith
  5. Do ‘Bundle Install’ and Restart rails server. When your server is back up and running, view page source and you should see following in your HEAD
  6. <script data-main="application" src="/assets/require.js"></script>

6. Avoid config.assets.precompile

Test if all of the steps above were successful

  1. Open application.js
  2. Paste the following code in it

If everything went well thus far, you should see an alert and if you are using Google Chrome, you should also see that in ‘Developer Tools’, under ’Network’, require.js and then application.js loaded.

Start writing your modules

Let’s say you need an Ajax loader for your Ajax requests and you wish to write a separate module for it. Great idea. Now, let me tell you how you can write a module that can be loaded with require.js. In other words, this module that we are about to write will comply to AMD (Asynchronous module definition)

Basic module syntax:

ajaxloader.js

You define a module by using ‘define’ and it usually takes 2 arguments 1st of which is an array of its dependencies and 2nd is an anonymous function. You can either return a value, another function or an object literal as above.

Basic module with dependencies:

Let’s say our ajax loader module depends on jQuery. jQuery needs to be passed as a reference. Like this

You must wonder, how does ‘define’ find dependencies? Well, we need to tell require.js about the location where it can find modules, dependencies.

Configure require.js

  1. Open your application.js and let’s add jQuery as your dependency.

Syntax:

There’s a lot of configuration options available at http://requirejs.org/docs/api.html#config however, for now, we shall focus on setting jQuery as a dependency (jQuery is AMD compatible unlike Backbone, underscore, and many other popular libraries, however, SHIM config can help you our in that regard http://requirejs.org/docs/api.html#config-shim).

Explanation:

Now it’s time to tell require.js about our ajax loader module. Follow the steps below

  1. Add the following code in application.js right below require.config chunk of code

Now, let’s take a look at our module. our first string parameter in a dependency array is ‘jQuery’ and according to our require.config jquery if CDN fails will be pulled from a ‘vendor’ directory.

Order on which require.js pulls files and sticks them in the head:

  1. require.js
  2. application.js
  3. jquery.min
  4. ajaxloader.js (Loaded after jQuery because it depended on jQuery)

In closing, require.js helps you

  1. Abstract your code without polluting the global namespace by using AMD pattern in your modules.
  2. Manage Dependencies in a much more structured way.
  3. Lazy load your modules.
  4. Optimize your modules

For more information visit http://requirejs.org/

IE’S FAILURE DUE TO A SELECTOR LIMIT

At Idyllic Software we do a lot of Ruby on Rails work. I was recently working on a Rails app which dealt with a lot of views (HTML templates) and as a result had a lot of stylesheets responsible for them. We encountered a strange problem: Have you ever had Internet Explorer (IE) fail to load your styles or render them properly while other browsers (modern) are doing a smart job at that? This makes us developers wonder what could possibly have gone wrong and start to check for any JS errors on the page. At first this is what we did.

Gladly, it had nothing to do with JS errors. When you are using Rails, ‘application.css’ contains all @import rules to import other stylesheets in the directory. Rails basically compiles all stylesheets into 1 gigantic stylesheet called ‘application.css’ and this is where the trouble starts. My‘application.css’ had around 7000 selectors and apparently this was causing IE to fail silently. It was weirder as this was not happening on local but on our staging server.

Causes

As per Microsoft’s knowledge base following or one of the following could be the issue.
Note: Following applies to internet explorer versions from 6 to 9

  • All style tags after the first 31 style tags are not applied.
  • All style rules after the first 4,095 rules are not applied.
  • On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

The second point above was the issue we were facing. We figured splitting our ‘application.css’ into 2 files to solve the problem and it did – but situations are not always this easy. Splitting your 1 huge stylesheet is a tedious and time consuming task and so is keeping track of the count of your selectors per file.

Solution:

If you are badass and have a lot of time on your hand, you can go ahead and do it manually. If you prefer the smarter way instead, choose blesscss.This niffy utility will split your big css file into several smaller ones each having number of selectors within the handling limits of IE.
There are 2 ways to use blesscss.

  • The NODE way
  • Use MAC app (Preferred)

I will not go into detail about how to install and get the NODE up and running since there are plenty of tutorials that do just that. If you are on a Mac, I’d say download the app & supply your stylesheet and you are done in a jiffy.

@import-once in LESSCSS, way handier!

I would admit that I started playing around with SASS way before my first encounter with LESS. By no means was I under-impressed with what SASS could let me do. Right from creating includes(mixins) to make your code reusable, variables to declare once & use whenever, functions to perform not just arithmetic operations but by passing appropriate arguments, creating chunks of CSS that’s not always needed.

But soon after, when I found my @imports getting duplicated with every @import, I began to lose patience. Although there was quite a few hand RUBY snippets circling around the web, I could get none to work. I blame myself for the lack of RUBY knowhow.

SASS featured request - Idyllic Software

One that caught much attention was Wilson pages sass-import-once. On my request, Wilson even added examples to the repository.

Wilson Page Twitter help- Idyllic Software

After days of trial & error, I reached no conclusion & gave up on it.

However one day out of the blue, I figured I might as well give LESSCSS a try. So, I converted all my existing codebase to LESS library named ‘Zunkaless’ & it worked out just the way I wanted. Finally, it was time to experiment with the @import feature of LESSCSS. I usually @import .less files such as reset.less, buttons.less, almost everywhere. If this was to get duplicated with every @import, I’d have to jump off a cliff. But then I used magical ‘@importonce’ that stopped duplication so cleverly that I was blown away.

How to use it?

Screen Shot 2013 07 10 at 2.59.48 PM

FYI, I am using LESS 1.3.3 with Codekit & @importonce is yet to become a default behavior of @import.

default import behavior LESS - Idyllic Software

This doesn’t in any way make me biased about SASS. Each of these preprocessors has pros & cons but at the moment LESS seems to address @import duplication issue very well. So, for now…

Kudos to LESSCSS!

How Responsive Web Design Helps Bring Your Businesses Mobile

mac_set11-resized-600

Having a Mobile presence for your business has become a necessity. The methods you choose to bring your business mobile is entirely up to you. Recent surveys have shown that, by the end of 2013, customers will prefer to shop on a mobile device over a desktop. Consumers looking for products via mobile has increased four times since 2010. This is a clear indication that the lack of a mobile presence can hinder your connection to your existing & new customers.

Although methods of bringing businesses to mobile have varied tremendously in the past, recent times have proved Responsive Web Design to be the most efficient, inexpensive & time-saving option. Responsive Web Design admittedly comes with it’s own limitations & there’s been a lot said about it already, but I only wish to inspire existing businesses that don’t think about their mobile presence to start doing so, or it may greatly impact your business.

What exactly is Responsive Web Design? As Ethan Marcotte very cleverly coined the term, Responsive Web Design focuses on optimizing the existing web presence to make it more intuitive & mobile friendly with a minimal amount of resizing from the user’s end, and that works across a wide range of devices. This created a wave of developers who started thinking along similar lines & gave birth to rather even more practical concepts. Mobile first by Luke Wroblewski encourages developers to build for mobile first & target other screens later in the development process.

Advantages of going with Responsive Web Design:

1. Easy updates

Updating the content and meta data and adding images is done in the same conventional way. No specific knowledge is required since there’s only 1 site to maintain.

2. Cost

No additional costs are involved since you are only optimizing your existing site/application for your mobile audience. If you do not have in-house front-end developer, you should consider contacting a Front End Agency. There has been an ongoing debate about the pricing of responsive web design. Some say that it costs more than having a separate mobile site mostly because you have to hire a specific talent. The mobile site should also be tested on several real devices in the post development and pre-launch phase. However, I don’t see how this isn’t applicable to a separate mobile site.

3. Time required

The time involved is pretty minimal. It requires updating the markup structure (to fit the liquid requirement of RWD), going from absolute to a relative with your layout & typography measurements & adding media queries in your CSS to target various screen sizes. I admit that it may not be as easy for everyone but hiring a futuristic Front End Agency can help.

4. Mobile Analytics

With conventional separate mobile sites, it is difficult to set up a filter for fetching the data on a sub-domain. And, it’s a boring process. However, if your site is responsive, you can easily find out which of your visitors used a mobile device with just one filter in your analytics tool.

5. Accessibility & SEO benefits

  • If your site/app deals mostly with dynamic content, use ARIA suite (Accessible Rich Internet Applications). It helps with dynamic content & complicated & way advanced user interfaces. It clearly defines the various parts/sections of the site/application. Such as Banner, Search, Navigation, Footer, Main Content, Sidebar.
  • Also, using minimal, new HTML5 semantic tags goes without saying.
  • Since you are maintaining only one site you have 1 URL & that
    • Makes it way efficient for search engines’ link algorithms to work.
    • Makes it easier on crawl efficiency & frequency so search engines can easily crawl more of your site
    • Google recommends that your business goes MOBILE.

6. Because Google has recommended it now!

Here’s Google’s recommendation on Responsive Web Design. Google strongly recommends Responsive Web Design now & they began creating awareness about it since the last year after publishing an article evaluating ‘Separate mobile Site VS Responsive sites’ for the business.

http://analytics.blogspot.in/2012/07/mobile-websites-vs-responsive-design.html

The comparison table in the article above declares (in-directly) Responsive Web Design as a clear winner & continues to answer commonly asked questions but in a non-biased manner at the same time.

In the end, your requirement decides what’s right for you. Responsive Web Design will not always be the answer, but taking a look at where it can take your existing business surely has the potential to turn your profits around.

Why we use dont Twitter Bootstrap

Bootstrap is another buzzword just like HTML5, CSS3 & Node.js & DHTML (if any of you even remember DHTML) & it undoubtedly has managed to grab the developer community’s attention like no other front end framework by far for various reasons. Now, I will admit that it gets you going in no time, minimizing the developer’s pain (although in a quick & dirty way), but I will not be discussing how great it is. Rather, I wish to constructively criticize it’s usage by the community & why it’s not always wise to use it.

Messy markup

DOM is messy as it is. The worse you could do is bloat it up with truckload of CSS classes by specifying them in the markup. Bootstrap comes with a gigantic list of CSS classes that can be plugged into markup to perform specific actions.

messy-dom

Even though they are big help, it can considerably slow down DOM operations when it comes to matching every single class (selector) applied. Looking for every CSS rule up & down the DOM has always proven to be a very expensive operation. Rather than bloating your markup with such classes, it’s always a good idea to write a specific block of styles targeted for doing one thing & one thing only.

Non-supported HTML attributes

html5-attributes

Bootstrap uses several nonsupported HTML attributes such as placeholder, required, aria attributes group, data attributes group & so on. Support for these newly introduced attributes (except for aria attributes) is surprisingly low & bootstrap takes no responsibility in providing graceful degradation options (at least not that I know of).

Aria attributes are widely supported but, when used irresponsibly, they can cause a lot of grief to the accessibility scope of your application/website. Read up on them here.

Placeholder attributes are becoming popular among the developer community for the wrong reasons. Optimistically, there are various polyfill scripts lying around to achieve where placeholder fails (Sorry, I will not explain why placeholder is used). Quite honestly, as a framework vendor, bootstrap must provide a fallback support option. Well, all the more reason to avoid bootstrap for JavaScript components.

Javascript components

There are 2 components that I particularly dislike. Tooltip & Modal. Let’s look at Tooltip first.
Shortcomings of Tooltip

  • Since CSS3 transitions are still not supported by all browsers, this component shamelessly breaks in IE7/8 & Opera mini.
  • It uses data-attributes for local title storage which IE9+ (Yes IE 10 too!) do not support & yet again, no fallback!

Modal comes with some predefined transitions & luckily they degrade gracefully in older browsers but this component fails to live up to a couple of very common expectations. Lets discuss them.
Shortcomings of Modal

  • When launched modal is not always in the center of the browser window vertically as well as horizontally. It is positioned in CSS & left as well as top values are static. Centering it could have easily been handled using minimal JavaScript code. I’d say, using it is a lose-lose situation as it doesn’t satisfy minimum expectations.

A few messy parts worth mentioning

I am thoroughly convinced that Bootstrap is not for me & probably managed to get you onboard with me, even though that’s not really the objective of this article. There’s a couple of clumsy parts of bootstrap that I am not happy about & i.e. foundation CSS bloated with !important rules & LESS adaption over SASS. I’ll go over each in detail.

1. !important should never be used NO MATTER WHAT!

If you have studied CSS specificity, every CSS rule comprises of selectors & has specific value as a whole & in order for me to override it, all I have to do is come up with a stronger rule with bigger value than the existing. It’s no rocket science. If you religiously know specificity inside out, you will never have to use !important rule. Bootstrap foundation CSS is full of such rules & developer ends up writing even more & then it’s all downhill from there as you may have guessed. In my opinion, Bootstrap is not setting a good example among aspiring Front end developers.

2. LESS over SASS

In a preprocessor era, it comes as no surprise that bootstrap uses it too but their choice of Preprocessor is LESS & I might have an idea why. Bootstrap creators are apparently friends with LESS creator & it seemed wise therefore to prefer LESS over SASS regardless of following reasons:

  • LESS development has almost stopped since Alexis has no time to maintain it.
  • Less lacks when it comes to caching .less files.
  • No. of open issues on LESS is far bigger comparatively.
  • SASS uses COMPASS for CSS3 syntax that results in less code unlike LESS

I wish I had more time to elaborate more along the lines of the hurdles bootstrap creates while in troubleshooting phase. Quick fixes during troubleshooting can really turn your application upside down & result in taking unreasonably too long.

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)