Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Adnan Asani adnasa

🎯
Focusing
Block or report user

Report or block adnasa

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@addyosmani
addyosmani / quickie.md
Last active Mar 17, 2016
Phonegap/Cordova + Polymer resources
View quickie.md

Yoyo. There are more articles/resources available than the below, but most appear to be older. To avoid the pain of upgrading finding things broken, I would try one of these. They're more recent.

View browserify_for_webpack_users.markdown

browserify for webpack users

There's been a strange explosion in misinformation about browserify recently, particularly in comparisons to webpack.

Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.

I think that longer-term, separability has more benefits from a maintenance and

@hamstu
hamstu / parallax.js
Last active May 10, 2019
Parallax Example: JavaScript
View parallax.js
var ParallaxManager, ParallaxPart;
ParallaxPart = (function() {
function ParallaxPart(el) {
this.el = el;
this.speed = parseFloat(this.el.getAttribute('data-parallax-speed'));
this.maxScroll = parseInt(this.el.getAttribute('data-max-scroll'));
}
ParallaxPart.prototype.update = function(scrollY) {
View classless.md

The future is here: Classless object-oriented programming in JavaScript.

Douglas Crockford, author of JavaScript: The Good parts, recently gave a talk called The Better Parts, where he demonstrates how he creates objects in JavaScript nowadays. He doesn't call his approach anything, but I will refer to it as Crockford Classless.

Crockford Classless is completely free of class, new, this, prototype and even Crockfords own invention Object.create.

I think it's really, really sleek, and this is what it looks like:

function dog(spec) {
@DanHerbert
DanHerbert / fix-homebrew-npm.md
Last active Jan 22, 2020
Instructions on how to fix npm if you've installed Node through Homebrew on Mac OS X or Linuxbrew
View fix-homebrew-npm.md

READ THIS Very Important Update

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

View 0virtual-dom.md

Virtual DOM and diffing algorithm

There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.

However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.

@rxaviers
rxaviers / gist:7360908
Last active Jan 23, 2020
Complete list of github markdown emoji markup
View gist:7360908

People

:bowtie: :bowtie: 😄 :smile: 😆 :laughing:
😊 :blush: 😃 :smiley: ☺️ :relaxed:
😏 :smirk: 😍 :heart_eyes: 😘 :kissing_heart:
😚 :kissing_closed_eyes: 😳 :flushed: 😌 :relieved:
😆 :satisfied: 😁 :grin: 😉 :wink:
😜 :stuck_out_tongue_winking_eye: 😝 :stuck_out_tongue_closed_eyes: 😀 :grinning:
😗 :kissing: 😙 :kissing_smiling_eyes: 😛 :stuck_out_tongue:
@Warry
Warry / Article.md
Created Dec 11, 2012
How to make faster scroll effects?
View Article.md

How to make faster scroll effects?

  • Avoid too many reflows (the browser to recalculate everything)
  • Use advanced CSS3 for graphic card rendering
  • Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

View slugify.js
function slugify(text)
{
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
View jQueryPluginPatterns.js
/*
A (very) WIP collection of optimized/recommended jQuery plugin patterns
from @addyosmani, @cowboy, @ajpiano and others.
Disclaimer:
-----------------------
Whilst the end-goal of this gist is to provide a list of recommended patterns, this
is still very much a work-in-progress. I am not advocating the use of anything here
until we've had sufficient time to tweak and weed out what the most useful patterns
You can’t perform that action at this time.