Skip to content

Instantly share code, notes, and snippets.

Developing ideas

Jabran Rafique⚡️ jabranr

Developing ideas
View GitHub Profile
jabranr / index.html
Created Aug 8, 2013
A CodePen by Jabran Rafique. CSS Tooltip - Tooltip in pure CSS
View index.html
<!doctype html>
<div class="tooltip">
<div class="tikon"></div>
<div class="tiptext">This is the longest ever tooltip you might have seen in whole world wide web.</div>
jabranr / decimal2binary.php
Last active Feb 25, 2016
Converts the integer to binary and outputs list of integers that are power of 2 (
View decimal2binary.php
* Converts the integer to binary and outputs list of integers that are power of 2
* @author: Jabran Rafique <>
* @param: integer $decimal
* @return: string
function get_special_binary( $decimal ) {
jabranr / Gruntfile.js
Last active Aug 29, 2015
Gruntfile boilerplate for JavaScript/Coffee projects
View Gruntfile.js
module.exports = function(grunt) {
pkg: grunt.file.readJSON("package.json"),
coffee: {
options: {
bare: true
glob_to_multiple: {
expand: true,
flatten: true,
jabranr / Format Text String to Tweet with JavaScript String prototype.js
Last active May 14, 2017
Format Text String to Tweet with JavaScript String.prototype
View Format Text String to Tweet with JavaScript String prototype.js
// Enable IE8 support for indexOf
if ( typeof Array.prototype.indexOf === 'undefined' ) {
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if (this[i] === item) {
return i;
return -1;
jabranr / basic-facebook-login-flow.js
Last active Aug 29, 2015
Basic Facebook login and data retrieval flow
View basic-facebook-login-flow.js
// Check and verify user status or prompt for authorization
function checkUserStatus(response) {
var permissions = {
scope: '' // email
if ( isConnectedUser(response) )
return FB.api('/me', gotUserInfo);
return FB.login(checkUserStatus, permissions);
jabranr / custom-callback-with-google-maps-loading-flow.js
Last active Aug 29, 2015
Custom callback with Google Maps loading flow
View custom-callback-with-google-maps-loading-flow.js
// setup
!(function(root) {
var AsyncGoogleMap = (function() {
// constructor
function AsyncGoogleMap(canvas, lat, lng, zoom, callback) {
if ( typeof canvas === 'undefined' )
jabranr / vanilla-javascript-bootstrap.js
Last active Dec 2, 2015
Vanilla JavaScript Bootstrap
View vanilla-javascript-bootstrap.js
* This is small, light weight vanilla JavaScript Bootstrap script.
* It comes handy in situations where a framework i.e. jQuery is used only
* for "load" and "ready" events etc. This small script will not only save
* lot of bytes but also gives a basic start on writing object literal JavaScript.
* Learn more about object literal JavaScript at following resource:
jabranr / javascript-bootstrap-example.html
Last active Dec 2, 2015
JavaScript Bootstrap Example
View javascript-bootstrap-example.html
This is code for working example of vanilla JavaScript Bootstrap
script at:
Copy this all code and save as an HTML file to see the demo.
<!doctype HTML>
jabranr / image-aspect-ratio.js
Last active Jun 2, 2020
Set image aspect ratio with JavaScript
View image-aspect-ratio.js
* Originally wrote this snippet for Suffragette/Pathé campaign (
* The campaign app forms a grid of square images pulled from social APIs based on
* particular hashtags. This snippet sets the new width and
* height based on their natural width and height to maintain the aspect ratio.
* Works best for 1:1 aspect ratio but can be modified to accommodate other ratio.
* @param Element|Resource img - An image element/resource from DOM
* @param int expected - Expected width or height
jabranr / sublime-settings.json
Last active Dec 9, 2016
Personal Sublime preferences
View sublime-settings.json
"bold_folder_labels": true,
"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
"draw_centered": false,
"fade_fold_buttons": false,
You can’t perform that action at this time.