Skip to content

Instantly share code, notes, and snippets.

View teodragovic's full-sized avatar

Teo Dragovic teodragovic

View GitHub Profile
# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
# editor.onDidSave ->
@teodragovic
teodragovic / package.json
Last active February 6, 2017 13:05
min. heroku config for react app
{
"name": "heroku-server",
"version": "1.0.0",
"description": "Heroku server for React app",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"compression": "1.6.2",
"express": "4.14.1"
@teodragovic
teodragovic / asyncOnLoad.js
Last active July 18, 2016 11:19
Check for onload event in async scripts
(function(d) {
/**
* asyncOnLoad - Initilize all functions that depend on document.ready
* Since we load script async we must check if document already loaded or listen for DOMContentLoaded event.
* @param {Function} cb - callback function - put all stuff that must run here
*/
var asyncOnLoad = function(cb) {
// cut the mustard
if ('addEventListener' in d) {
@teodragovic
teodragovic / README.md
Last active July 21, 2016 11:30
Two ways to load fonts

Web Font Loader is less verbose but Font Face Observer is smaller script and supposedly loads fonts faster.

Works best with local fonts. Use Font Squirrel to generate .woff and .woff2 and subset only what's needed.

I use cookie to optimize for repeated visits but sessionStorage can also be used (it has nicer API but less support and lasts only for session duartion).

Either JS snippet should be inlined in document <head>. I also wrap whole thing in if (Modernizr.fontface) and
add <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com"> before.

@teodragovic
teodragovic / SassMeister-input.scss
Created January 16, 2016 10:14
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
// http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
@mixin stronger($selector, $factor: 1) {
$total: $selector;
@teodragovic
teodragovic / _layout.scss
Last active January 7, 2016 10:45
Handle sticky footer element in jsx
.sticky-footer {
background-color: $ib-white;
padding: $padding-base-horizontal*2;
@media (max-width: $screen-xs-max) {
border-radius: $border-radius-base;
margin-bottom: $grid-gutter-width;
box-shadow: 0 2px 0 darken($body-bg, 5%);
}
@media (min-width: $screen-sm-min) {
position: fixed;
@teodragovic
teodragovic / closest.js
Last active January 5, 2016 08:50
closest() polyfill
(function (ELEMENT) {
ELEMENT.matches = ELEMENT.matches ||
ELEMENT.mozMatchesSelector ||
ELEMENT.msMatchesSelector ||
ELEMENT.oMatchesSelector ||
ELEMENT.webkitMatchesSelector;
ELEMENT.closest = ELEMENT.closest || function closest(selector) {
var element = this;
@teodragovic
teodragovic / gist:3e28aed762a4dec656d4
Last active December 8, 2015 10:48
React component boilerplate
'use strict';
const _ = require('lodash');
const React = require('react');
module.exports = React.createClass({
displayName: '',
mixins: [],
@teodragovic
teodragovic / SassMeister-input.scss
Last active August 29, 2015 14:25
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
@for $i from 1 through 20 {
$step: $i*5;
.u-width-#{$step} {
width: #{$step}% !important;
@teodragovic
teodragovic / SassMeister-input.scss
Created July 16, 2015 08:58
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
// test
$eneable-spacing-helpers: true;
// Default spacing value