Nilpo

Javascript log Function

Every time I start a new project, I want to pull in a log function that allows the same functionality as the console.log, including the full functionality of the Console API.

There are a lot of ways to do this, but many are lacking. A common problem with wrapper functions is that the line number that shows up next to the log is the line number of the log function itself, not where log was invoked. There are also times where the arguments get logged in a way that isn't quite the same as the native function.

This is an attempt to once and for all document the function that I pull in to new projects. There are two different options:

• The full version: Inspired by the plugin in HTML5 Boilerplate. Use this if you are writing an application and want to create a window.log function. Additionally,

Nilpo

var fn = function(arg1, arg2) {
    var str = '<p>aap ' + this.noot + ' ' + arg1 + ' ' + arg2 + '</p>';
    document.body.innerHTML += str;
};
var context = {
    'noot': 'noot'
};
var args = ['mies', 'wim'];

// Calls a function with a given 'this' value and arguments provided individually.

Nilpo

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!-- google's material design colours from 
http://www.google.com/design/spec/style/color.html#color-ui-color-palette -->

    <!--reds-->
    <color name="md_red_50">#FFEBEE</color>
    <color name="md_red_100">#FFCDD2</color>
    <color name="md_red_200">#EF9A9A</color>

Nilpo

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- app color palette -->
    <color name="primary">@color/indigo_500</color>
    <color name="primary_light">@color/indigo_100</color>
    <color name="primary_dark">@color/indigo_700</color>
    <color name="accent">@color/pink_A200</color>
    <color name="accent_fallback_light">@color/pink_A100</color>
    <color name="accent_fallback_dark">@color/pink_A400</color>

Nilpo

// --------------------------------------------------------------------------------------
// A More Modern Scale for Web Typography
// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
// --------------------------------------------------------------------------------------

$body-font-size: 1em !default;

// Adjusts body typography to be default
// for each browser.
@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {

Nilpo

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

• http://www.fontsquirrel.com/tools/webfont-generator

Nilpo

// I needed flatuicolors.com as Sass variables...
// In your console, run:
$('.color').get().map(function(el) { return "$" + el.classList[1] + ": " + el.getAttribute('data-clipboard-text') + ';' }).join('\r\n');

// Output:
// $turquoise: #1abc9c;
// $emerland: #2ecc71;
// $peter-river: #3498db;
// $amethyst: #9b59b6;
// $wet-asphalt: #34495e;

Nilpo

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.*;

public class JsonHelper {
    public static Object toJSON(Object object) throws JSONException {
        if (object instanceof Map) {
            JSONObject json = new JSONObject();

Nilpo

// MapAdjust.java

// Based on adjust.py
// Gatubit <gatubit@gmail.com>
// https://gist.github.com/astrocosa/724526

// Based on adjust.js
// Bratliff <bratliff@umich.edu>
// http://www.polyarc.us/adjust.js

Nilpo

for i in `curl https://www.cloudflare.com/ips-v4`; do csf -a $i; done