aamirafridi.commusings of Aamir Afridi - musings of Aamir Afridi

,-.-. \ `. \ / | \ \ \ . \ /___| O |O\ , .-. \ ; | /` `^-.\.-'`--'/ \ `; | | / `\ \ | `. `--..____,' \ `. | `._ _.-'^ \ . / `|`|` .-.\ / | | \ `\ / | | `\ ` | | | \ | | | .-. | | | \ `. \ | | `\ \ | | \ \ | | \_____ :-'~~~~~'-' ; /____;``-. : \ \___ _______ __) _____\ \'~``______) _|_| _|_| _| _| _|_|_| _|_|_| _|_| _|_|_|_| _|_|_| _|_|_| _|_|_| _|_|_| _|_|_| _|_| _| _| _| _| _| _| _|_| _|_| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _|_| _|_| _|_|_|_| _|_|_|_| _| _| _| _| _|_|_| _|_|_|_| _|_|_| _|_|_| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _|_|_| _| _| _| _| _| _| _| _|_|_| _|_|_| _|_|_| _| _|_|_| _|_| _| _| -- Home Lab About Portfolio musings of Aamir Afridi hello, my name is Aamir Afridi ... a London based nodejs & front-end developer 15 Jan 2013 652 jQuery Marquee Plugin with CSS3 Support Please check github for details about new updates. Also the plugin is now hosted on jsDelivr.com (CDN). Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag. Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down. Github: Continue Reading → 9 Jun 2015 0 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: Sass @mixin message { border: 1px solid #ccc; padding: 5px; display: block; } .error { @include message; color: red; } .success { @include message; color: green; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 @mixin message { border : 1px solid #ccc ; padding : 5px ; display : block ; } .error { @include message ; color : red ; } .success { @include message ; color : green ; } Continue Reading → 6 Jun 2014 0 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. CSS /* webkit based browsers (safari/chrome) */ ::-webkit-input-placeholder { color: white; } /* Firefox 18 and below Deprecated: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder */ :-moz-placeholder { color: white; } /* Firefox 19+ */ ::-moz-placeholder { color: white; } /* Firefox 19+ */ :-ms-input-placeholder { color: white; } /* IE10+ */ :-ms-input-placeholder { color: white; } /* hope for this */ :input-placeholder { color: white; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /* webkit based browsers (safari/chrome) */ ::-webkit-input-placeholder { color : white ; } /* Firefox 18 and below Deprecated: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder */ :-moz-placeholder { color : white ; } /* Firefox 19+ */ ::-moz-placeholder { color : white ; } /* Firefox 19+ */ :-ms-input-placeholder { color : white ; } /* IE10+ */ :-ms-input-placeholder { color : white ; } /* hope for this */ :input-placeholder { color : white ; } Continue Reading → 21 Feb 2014 21 Twitter REST API 1.1 to create Twitter Apps using PHP & Javascript Since twitter has released their new REST API (v1.1) , there are some changes which affects quite alot of twitter apps developed based on older API. To prevent malicious use of the Twitter API and gain an understanding of what types of applications are accessing the API, twitter has put some restrictions. Here is the list of changes according to twitter offical blog: required authentication on every API endpoint a new per-endpoint rate-limiting methodology changes to our Developer Rules of the Road, especially around applications that are traditional Twitter clients. I am going to show you how can you use new twitter API (v1.1) to develop jQuery plugins or any Javascript apps. After having a look at different approaches, I found quite a simple solution which I will explain in this post. Twitter API PHP Make sure you have hosting that supports PHP. Next go to twitter-api-php and download the files OR simply click here to download the files. Next create a folder called twitter or anything you want on your server and upload all the files after unzipping it. You can delete all files safely and leave TwitterAPIExchange.php & index.php . root/twitter - TwitterAPIExchange.php - index.php 1 2 3 root / twitter - TwitterAPIExchange . php - index . php Create a twitter APP Login to twitter and than navigate to the twitter apps site . Click ‘Create New App’ button provided on the top right hand side. Enter the name of your application e.g ‘My first app to test v1.1′ Similarly enter description and the website URL where from where you will be accessing the twitter api. Note: In the website you don’t need to provide full path to twitter folder you created in previous steps. It should look like http://www.mydomain.com . You can leave Callback URL empty for now. Click ‘Yes, I agree’ checkbox and finally click ‘Create your twitter application’ button. Continue Reading → 16 Jan 2014 5 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). We will cover these steps: Prepare HTML CSS to style the menu for desktop browsers Make it responsive by adding media query Add some CSS animations Get the result in HAML with SASS Adding more options using JS (optional) Continue Reading → 7 Jan 2014 0 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 → 11 Apr 2012 5 JS/jQuery Code Snippets Some common Javascript snippets I use in my projects. If you got something useful, please share in comments section. Check if element has scrollbar I was working on a project where I need to add jQuery UI resizable to a list but I have to check if it has a scrollbar. I endup with a tiny jQuery plugin JavaScript (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.height(); } })(jQuery); 1 2 3 4 5 ( function ( $ ) { $ . fn . hasScrollBar = function ( ) { return this . get ( 0 ) . scrollHeight > this . height ( ) ; } } ) ( jQuery ) ; Usage XHTML <div style="height:200px; overf...