Skip to content

Instantly share code, notes, and snippets.

@rafaelbiten
rafaelbiten / storage.service.ts
Created August 24, 2017 18:05
Storage Service
import { Injectable } from '@angular/core';
// classes implementing IStorage also requires a static isSupported():boolean
interface IStorage {
getItem(key: string);
setItem(key: string, value: any);
removeItem(key: string);
}
class LocalStorage implements IStorage {
@rafaelbiten
rafaelbiten / webpack.config.js
Last active April 11, 2017 16:28
Webpack for React
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const target = process.env.npm_lifecycle_event
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
let entry = './source/scripts/index.js'
const common = {
port module Main exposing (..)
import Json.Decode exposing (..)
import Html exposing (..)
import Html.Attributes exposing (class, target, href, property, defaultValue)
import Html.Events exposing (..)
import Auth
import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (..)
@rafaelbiten
rafaelbiten / js_resources.md
Last active August 29, 2015 14:24
JS libraries, resources and guides.

Libraries

  • REACT - A library for building user interfaces

Resources

Guides

  • React on ES6+ - "Allow me to highlight some of the ways that these new language features can change the way you write a React app, making it easier and more fun than ever." - Steven Luscher
  • You Might Not need Underscore - From Underscore to ES6: a nice collection of examples
@rafaelbiten
rafaelbiten / _animations.scss
Last active August 29, 2015 14:24
_animations.scss
/* Usage examples
* @include anime(opacity);
* @include anime((opacity, padding, margin)); // multiple properties can be passed by wrapping with () brackets
* @include anime((opacity, padding, margin), 0.5s, ease-in, 0.25s); // you can set duration and timing function
* @include anime(); // will animate all properties with defaults */
@mixin anime($props: all, $duration: 0.2s, $timing: ease-out, $delay: 0s) {
transition: {
duration: $duration;
property: $props;
timing-function: $timing;
@rafaelbiten
rafaelbiten / css_resources.md
Last active August 29, 2015 13:56 — forked from jookyboi/css_resources.md
CSS libraries, resources and guides.

Libraries

  • SASS - CSS extension language which allows variables, mixins and rules nesting.

Resources

Guides

  • SMACSS - Scalable and Modular Architecture for CSS. Learn how to structure your CSS to allow for flexibility and maintainability as your project and your team grows.
  • BEM - Blocks, Elements and Modifiers. A clear system to name elements.
  • CSS Property Index - All properties in an easy-to-digest form.