Skip to content

Instantly share code, notes, and snippets.

View seriema's full-sized avatar

John-Philip Johansson seriema

54 followers · 15 following
View GitHub Profile
@seriema
seriema / app.js
Created February 20, 2014 21:12
Interface-first-development. Create your Angular app without a API backend first. Implement AJAX calls as you would as usual, but when you append 'offline=true' to the URL it will get JSON-files from your defined offline data path. So a GET call to '/api/people/pikachu' will turn into '/offline_data/people/pikachu.get.json'. This also works as a…
// Your file
angular.module('app', ['offlineMode'])
.run(function (httpInterceptor) {
httpInterceptor.config.OFFLINE_DATA_PATH = '/offline_data';
httpInterceptor.config.API_PATH = '/api';
})
@seriema
seriema / README
Last active August 29, 2015 13:59 — forked from rwest/README
These two files should help you to import passwords from mac OS X keychains to 1password.
Assumptions:
1) You have some experience with scripting/are a power-user. These scripts worked for me
but they haven't been extensively tested and if they don't work, you're on your own!
Please read this whole document before starting this process. If any of it seems
incomprehensible/frightening/over your head please do not use these scripts. You will
probably do something Very Bad and I wouldn't want that.
2) You have ruby 1.9.2 installed on your machine. This comes as standard with Lion, previous
versions of OS X may have earlier versions of ruby, which *may* work, but then again, they
@seriema
seriema / arrows.less
Last active August 29, 2015 14:03
LESS (CSS) arrows
// Arrow mixins. We repeat properties so they can override each other.
// Should be using :extend() instead of mixin, but Web Essentials chokes on that.
.arrow-base(@size) {
width: 0;
height: 0;
border: @size solid transparent;
}
.arrow-up(@size, @color) {
.arrow-base(@size);
@seriema
seriema / index-1.html
Last active August 29, 2015 14:07
A simple HTML5 boilerplate page. I'm teaching basic HTML to a few friends. So I wanted a really simple HTML "file" they could use, but that still includes some of the things you always should have (based on h5bp).
<!DOCTYPE html>
<html>
<head>
<title><!-- Add your site title here --></title>
</head>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
</body>
</html>
@seriema
seriema / web-font-checklist.md
Last active August 29, 2015 14:16
Web font checklist

Fonts are tricky, and as a consultant it's even trickier because of licensing models and communication between multiple parties. So I've made this checklist:

  • Font family (e.g. "Times New Roman")
  • Variations of said family (e.g. "bold")
  • License to use those on a public website
  • It has all the glyphs needed for target languages (see example)
  • Hosting options:
    • Externally (e.g. Google Fonts)
    • Internally (e.g. same server as website or CDN)
@seriema
seriema / jquery-widget-wrapper.js
Last active October 17, 2015 07:46
A minimal wrapper for my jQuery widget pattern (https://gist.github.com/seriema/5915653/). Personally I would recommend using Angular, Ember, React, or something else that already has a good system for this, but sometimes you don't have a choice and this simple pattern has helped me many times. See a live example here: http://jsfiddle.net/seriem…
// This is the basic principle of a minimalistic jQuery based widget system.
// Every widget has one root element, with a unique classname prefix. Here I used "w-".
// Put these two methods globally in any way you like. Here I put them on the jQuery object.
$ = $.extend($, {
// This allows you to register a widget.
registerWidget: function (selector, callback) {
$(document).on('w-init', function (e) {
$(selector, e.target).each(function () {
@seriema
seriema / a-test-case.md
Created November 19, 2015 09:25
Basic test templates

Precondition

[any specific settings before testing? other test data than usual? etc]

Test steps

  1. [simple actions to perform, keep them short]
  2. [continue as needed, preferably one action per step]
  3. [etc]

Expected result

@seriema
seriema / boxstarter.ps1
Last active December 28, 2015 02:59
JP Dev boxstarter script
try {
# Dev
cinst VisualStudio2013Ultimate -InstallArguments "/Features:'Blend WebTools'"
cinst VS2013.1
cinst VS2013.2
cinst VS2013.3
cinst visualstudio2013-webessentials.vsix
cinst resharper
cinst git
cinst githubforwindows
@seriema
seriema / DEVME.md
Last active December 29, 2015 08:09
A suggestion for us social GitHub'ers. There's almost always a README file, but what about a DEVME file where you give the gist (hah!) of how your app works from a developers perspective?

HEADLINE

#Introduction The main ideas and philosophies behind how the project is constructed.

#Overview The main "components" of the project. What are the different responsibilites? Could be per-file if there aren't a lot of files. The aim is to help other developers navigate your code, but not be so deep that it quickly gets antiquated.

#Installation

@seriema
seriema / jquery-widget.js
Last active August 12, 2017 13:20
A really simple widget pattern for jQuery. Personally I would recommend using Angular, Ember, React, or something else that already has a good system for this, but sometimes you don't have a choice and this simple pattern has helped me many times. You can wrap it like this: https://gist.github.com/seriema/4b3a818ce85b6ab03ddd
// This is the basic principle of a minimalistic jQuery based widget system.
// Every widget has one root element, with a unique classname prefix. Here I used "w-".
//
// First, select all those widgets on the page with $('.w-...').
// Second, iterate over all of them and work with them in a local scope.
$(function() {
$('.w-my-widget').each(function() {
// Grab the elements you need.
var $root = $(this);
var $child = $root.find('.child'); // Always use .find() from $root or a child of $root, to avoid global selectors and potential bugs with one widget affecting another.