How can you tell if a programmer knows Sass in 5 questions?

This article was originally posted on snap.hr

Recently I have been asked my Robert Tucker from snap.hr to write an article about SASS. Basically its a set of 5 questions(with answers) that sort the Sass noobs from the pros.

These 5 fiendish questions will test anyone’s Sass skills. Ready? Let’s go!

1) Why is it bad idea to use a mixin like this:

Continue Reading →


Style placeholder text

The placeholder attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.

The browsers so far implementing the gray color for placeholder text. Using pseudo-class you can change the appearance of placeholder text.

Continue Reading →


Pure CSS toggle-based Responsive Unlimited Levels Menu

This is a brief tutorial to show you how to create a simple CSS-only responsive menu. You can find ready-to-use menus if you google for ‘pure css responsive menu’ and you will find variety of ways but most of them involves Javascript. I am going to use an approach which doesn’t require Javascript (unless you want to support older browsers).

Responsive CSS Menu

We will cover these steps:

Continue Reading →


Controlling CSS animations with Javascript

Recently I been working on adding new features to my jQuery marquee plugin. I was trying to add CSS3 animation support to the plugin so it performs better as jQuery animate change the CSS property inside a loop to complete animations.

For example animating something using jQuery animate:

See the Pen wdcIl by Aamir Afridi (@aamirafridi) on CodePen

If you inspect the above green box in developer toolbar and than click it, you can see that jQuery changes the margin-left inside a timer i.e setInterval. To check the code, see this.

Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries.

Many animations in your JS app will affect the performance and will make the animations slower and jerky. So why not use CSS3 animations where browser supports it and use jQuery animate as fallback? or better not to use animations at all where you can avoid so older browsers can perform well.

Continue Reading →

Copyright © 2018 — musings of Aamir Afridi