Skip to content

Instantly share code, notes, and snippets.

View praveenvijayan's full-sized avatar

praveen vijayan praveenvijayan

View GitHub Profile
@alekseykulikov
alekseykulikov / index.md
Last active April 14, 2024 00:32
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@fredbenenson
fredbenenson / kickstarter_sql_style_guide.md
Last active June 24, 2024 03:28
Kickstarter SQL Style Guide
layout title description tags
default
SQL Style Guide
A guide to writing clean, clear, and consistent SQL.
data
process

Purpose

@paulirish
paulirish / what-forces-layout.md
Last active July 17, 2024 00:51
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@paulirish
paulirish / bling.js
Last active July 3, 2024 20:45
bling dot js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
@WebReflection
WebReflection / String.prototype.template.js
Last active August 17, 2022 04:04
ES6 Template like strings in ES3 compatible syntax.
// this is now a module:
// https://github.com/WebReflection/backtick-template#es2015-backticks-for-es3-engines--
var template = require('backtick-template');
// just string
const info = 'template';
`some ${info}` === template('some ${info}', {info});
@tkafka
tkafka / LICENSE.txt
Last active May 17, 2024 02:08
Drop-in replacement for ReactCSSTransitionGroup that uses velocity.js instead of CSS transforms. Add your own transitions to `transitions` hash.
The MIT License (MIT)
Copyright (c) 2014 Tomas Kafka
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
@brian-mann
brian-mann / gist:7085402
Last active September 3, 2017 20:14
The latest and greatest folder and file structure for Backbone / Marionette Apps
##Folder structure
/backbone
app.js
/apps
/entities
/lib
##Inside Apps
/apps
@ebidel
ebidel / Web Components Resources.md
Last active February 27, 2023 22:04
List of resources related to Web Components
@desandro
desandro / require-js-discussion.md
Created January 31, 2013 20:26
Can you help me understand the benefit of require.js?

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.


@amontalenti
amontalenti / script-inject-http-proxy.js
Created November 21, 2012 17:16
script injecting proxy for Node.JS
var httpProxy = require('http-proxy');
var url = require('url');
httpProxy.createServer(function(req, res, proxy) {
var isHtml = false,
write = res.write,
writeHead = res.writeHead,
params = url.parse(req.url, true).query,
dest = params.dest || 'localhost',