Skip to content

Instantly share code, notes, and snippets.

View Crysp's full-sized avatar
⚡

Vitaliy Leonov Crysp

⚡
4 followers · 5 following
  • St.-Petersburg
View GitHub Profile
@Crysp
Crysp / 0_reuse_code.js
Last active September 11, 2015 21:44
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@Crysp
Crysp / javascript_resources.md
Last active September 11, 2015 21:44 — forked from jookyboi/javascript_resources.md
Here are a set of libraries, plugins and guides which may be useful to your Javascript coding.

Libraries

  • jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • AngularJS - Conventions based MVC framework for HTML5 apps.
  • Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • lawnchair - Key/value store adapter for indexdb, localStorage
@Crysp
Crysp / css_resources.md
Last active September 11, 2015 21:44 — forked from jookyboi/css_resources.md
CSS libraries and guides to bring some order to the chaos.

Libraries

  • 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • Compass - Open source CSS Authoring Framework.
  • Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • Font Awesome - The iconic font designed for Bootstrap.
  • Zurb Foundation - Framework for writing responsive web sites.
  • SASS - CSS extension language which allows variables, mixins and rules nesting.
  • Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

@Crysp
Crysp / nesting.js
Last active September 14, 2015 14:56 — forked from geddski/nesting.js
helper function for nesting backbone collections.
function nestCollection(model, attributeName, nestedCollection) {
//setup nested references
for (var i = 0; i < nestedCollection.length; i++) {
model.attributes[attributeName][i] = nestedCollection.at(i).attributes;
}
//create empty arrays if none
nestedCollection.bind('add', function (initiative) {
if (!model.get(attributeName)) {
model.attributes[attributeName] = [];
@Crysp
Crysp / README.md
Last active September 19, 2015 14:04 — forked from jonathantneal/README.md
SASS @font-face mixin

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);
@Crysp
Crysp / new_gist_file.js
Created October 18, 2015 09:00
var mikhail = Object.create(null)
@Crysp
Crysp / debounce.js
Last active October 27, 2015 15:05
The debounce function can be a game-changer when it comes to event-fueled performance. If you aren't using a debouncing function with a scroll, resize, key* event, you're probably doing it wrong. The debounce function will not allow a callback to be used more than once per given time frame. This is especially important when assigning a callback …
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
@Crysp
Crysp / menu.html
Created November 11, 2015 14:28
KSS Template 3-depth menu style
<ul class="kss-menu-list">
<li class="kss-menu-list-item">
<a href="./index.html" class="kss-menu-list-link"><span class="kss-mod-left">0</span><span class="kss-mod-right">Описание</span></a>
</li>
{{#eachRoot}}
<li class="kss-menu-list-item">
<a href="./section-{{reference}}.html" class="kss-menu-list-link"><span class="kss-mod-left">{{reference}}</span><span class="kss-mod-right">{{header}}</span></a>
{{#ifReference ../rootName}}
<ul class="kss-menu-list-child">
{{#eachSection reference}}
@Crysp
Crysp / calendar.js
Last active November 16, 2015 09:25
$('.parent-element').clndr({
// шаблон underscore (в формате строки)
template: clndrTemplate,
// начало недели Sunday (0), Monday (1) и так далее. По дефолту Sunday
weekOffset: 0,
// какой месяц показать. Можно указать в формате 'YYYY-MM-DD' или использовать moment()
startWithMonth: "YYYY-MM-DD",
// массив аббревиатур для дней недели. С какого дня начинать зависит от weekOffset
daysOfTheWeek: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
// колбеки
@Crysp
Crysp / reset.scss
Created November 16, 2015 10:33
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */