The Doers' Blog

An interesting talk about choosing design goals that benefit our users over the long run, rather than satiating their “lizard brain” through instant gratification

Google is taking a step forward in giving Progressive Web Apps a first-class/Native treatment on Android with the next version of Chrome

Now would be a great time to ensure that your app matches Google Chrome’s criterion for a Progressive Web App, with this handy checklist from Google

Don't Think. Just Do!

MeDine is a Android application that makes finding and ordering your ideal meal all the more easier with a searchable interactive menu, exclusive offers and recommendations based on your tastes and reviews by those who have already tried a dish.

We handled the app's production for this complete redesign, which brings you a faster and more streamlined new UX with a bunch of new features that are sure to make your restaurant experience even more enjoyable.

Introduction:

JavaScript with it's numerous libraries, helps in developing web apps with ease and offers all that an Object Oriented Programming language can offer.

Object oriented Programming is an programming model in which a collection of Objects interact with each other to help you to get your task done.

Being lead by Objects, it is crucial for one to figure out what an Object is and how is can be used, to master this model of programming.

If you are clear with  handling Objects, you can just play around with JavaScript. So lets focus on Objects: The hero of our story.

Objects: The Hero

"Everything in JavaScript is an Object". An Object can be a number, a string, an array, a function (method), any primitive type except null or undefined; and what not ... so Almost everything in JavaScript is an Object.

Before getting deep into the world of Objects, There are 2 other terms that you have to be familiar with:

Properties  & Methods

Properties: Properties are values that the object possess or Properties are values associated with objects. (Can be compared with Adjectives in English Grammar)

Methods: Methods are actions that objects can perform. (Can be compared with Verbs).

Properties and Methods are object members.

Because JavaScript doesn't have classes and it treats everything as an object, all of a JavaScript Object's members are objects themselves.

So, for our discussion here, any property of an object that is a function, will be considered as a method of the object and every other object member will be considered the object's property.

!important is a CSS exception that forces the current property's value to be used instead of any-other declaration of the same property, independent of the rules of CSS specificity.

Meaning that whatever you declare as !important, is applied no matter what any-other CSS rule says.

You can use it by adding !important at the end of your CSS property declaration, right after the value, like:

selector { property1: value1 !important; }

For example, if you'd like the browser to hide elements with the class hide, no matter what, you can use:

.hide { display: none !important; }

Now, every element with the class hide will have it's display property set to none and therefore be hidden, even if the individual element has a more specific display property, like with it's ID as the selector or with an inline style saying otherwise.

Why is it bad?

The key argument against using !important is that it makes maintaining and building upon your CSS, very hard by the fact that it cannot be overriden by anything other than a more specific !important statement.

Keep in mind that whenever you feel the need to use !important, there is almost always another way.

When to use it

That said, there are a few, extremely rare cases where using !important is the best option available. Let's look at a few of those:

Overriding styles inserted by third-party JavaScript

Some third-party JavaScript plugins that you use may style your elements, but fail to provide an API that allows you to customize those styles - in most such cases you'll probably have no other go but to use the !important declaration to override those styles with your own.

Overriding a !important declaration in a third-party stylesheet

Because a !important declaration can only be overridden by a more specific !important declaration, it becomes your only option when you have to work with a third-party plugin that uses !important

In classes that are designed for a clear & specific purpose

Like the hide class we looked at earlier, where the only reason we'd be using it is to force the element to hide, it may be alright to use the !important declaration, given that you don't use it on a property that could be inherited by it's children.

Doing it right

If you ever find yourself in a situation where you have no other option but to use !important, here are a few guidelines that could help you use it without killing maintainability:

Be as specific as possible

Make sure you use selectors that target as few elements as possible, ideally just the particular element that you are trying to affect. So, prefer to use the ID selector or a unique class, along with child selectors, as required.

Don't use it on properties that could be inherited

Using !important on an inheritable property like color or font would mean that you cannot change it on any of the element's children, unless write another, more specific !important declaration to that effect, making it much harder to customize it. Look through the CSS reference to check if a property is inheritable or not.

Put it in a separate stylesheet

Since using !important is bad for maintainability and given the fact that there is almost always some way to avoid it, it might be a good idea to put it along with the rest of your CSS hacks, in a separate CSS file, so that you can easily replace it as and when you discover a better way to do the same. Read more about why having a separate CSS file for hacks is a good idea.

Conclusion

Whenever you feel the need to use !important, keep in mind that there is almost always a more specific rule that you could be using instead, so for the sake of the poor dev who'll be building upon your CSS a few months from now, it is !important that you do your very best not to use it.

Further Reading:

CSS Specificity on MDN

Common CSS Questions on MDN

!important on SmashingMagazine

When Using !important is The Right Choice on CSSTricks

Shame.CSS

Here is a short and simple jQuery plugin for a basic image auto-slider.

To implement this in your website, first you need to include this little jQuery plugin:

/* https://github.com/DoersGuild/jQuery.simpleImageSlider */ (function ($) { "use strict"; $.fn.setupImageRotator(options) { options = $.extend(true, { imageDir: './img/', delayInSeconds: 5, images: [], }, options); return this.each(function () { var $this = $(this); var len = options.images.length; var index = 0; var nextImage = function () { index++; index = index >= len ? 0 : index; $this.attr('src', options.imageDir + options.images[index] ); }; setInterval(nextImage, options.delayInSeconds * 1000); }); } })(jQuery);

And then place an image tag in HTML code where you want to have this slider, like:

<img alt="lorempixum" src="./img/picture1.png" id="rotator" />

Here i have provided the image path of my image source. You obviously need to change the src to your own. Ideally you'd like to have the first image from your carousel setup here.

After which, you can invoke the slider, with:

jQuery(function($){"use strict"; $("#rotator").setupImageRotator({ imageDir: './img/', images: ['picture1.png', 'picture2.jpg', 'picture3.png'], delayInSeconds: 2.5 }); });

To get it running, replace those images in the above example with your own.

Demo:

The plugin works by replacing the image's source attribute with the ones you specify in the images array, at the interval you specified in delayInSeconds

Learn anything in 20 hours  Here is an interesting thought: 

You can become pretty good at just about anything with just 20 hours of focused practice.

The trick is in being able to break down the skill you are trying to learn into it's most basic components, which you absolutely need to learn to be good at that skill.

In the video, Josh Kaufman shows us that he identified 4 key chords to learn to play just about any pop-song on an instrument called the ukulele - just 4 chords to master, to become fairly good at it.

So the key is to narrow it down and focus all your energies on mastering the core part of the skill (those 4 chords in-case of the ukulele), and with just 20 hours of practice, you'll be pretty good at it!

I'm surely going to try this in my endeavor to improve my design and algorithm-writing skills.

Using IcoMoon you can easily search and download vector icons or make your own font/icon-font.

If you aren't using scalable vector based icon fonts yet, you are really missing out.

IcoMoon is a pretty neat tool for building your very own iconic-font.

Step 1: Draw your icons, with a vector drawing tool like inkscape & save them as svg

Doers' Guild, Your Cross-Platform Development Partners

Today, on our very first anniversary, I'd like to let you know that we have completely redesigned our website.

Check it out and let me know what you think.

RedPen.io is a tool that lets you quickly take people's feedback on your design.

All you need to do is to upload your design as an image and share the URL with the people whose feedback you are looking for.

I came across this interesting 37Signals article via HackDesign which shows popular web-pages with and without their text, in order to convince us that typography is a key component in a page's design.

This got me wondering how other sites would look without their text. So I quickly built a browser extension that does just that: help you look at the various websites out there, with and without their text. 

I built the extension with CrossRider, a framework that allows me write extensions that work on most of the modern browsers like Chrome, Firefox, Safari and IE.

If you are on Chrome, you can get it from the Chrome-Web Store, otherwise please use the Cross-Rider installation page.