Skip to content

Instantly share code, notes, and snippets.

View Rplus's full-sized avatar
💤

Rplus Rplus

💤
205 followers · 25 following
View GitHub Profile
@Rplus
Rplus / gulpfile.js
Created January 14, 2015 03:46
simple live-reload with gulp & browser-sync
// partial of https://github.com/google/web-starter-kit/blob/master/gulpfile.js
'use strict';
// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var localFolder = 'asset';
@Rplus
Rplus / Self-brand-logo-concept.markdown
Created March 1, 2015 15:41
Self-brand logo concept

Self-brand logo concept

Forked from Greg Kohn's Pen Self-brand logo concept.
Working through some ideas for a new portfolio site.
Background image courtesy of the wonderful unsplash.com

modify:

  • transition-delay > js setTimeout
  • be indepenent with html attr, auto-calculate delay time
@Rplus
Rplus / DOM.jade
Created March 7, 2015 09:56
multiline ellipsis with simple fallback snippet ex: http://codepen.io/Rplus/pen/EapkH
.site
img.site__logo(src="//assets.codepen.io/assets/logos/codepen-logo.svg", alt="codepen logo")
span.site__info
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat quasi ipsum recusandae illum quidem minima eaque. Labore, minus atque provident omnis facere corporis, beatae soluta explicabo esse ipsam cupiditate quisquam impedit consequatur cumque molestias maiores tempora sed, eligendi facilis quaerat. Nihil cupiditate excepturi, quas, maiores necessitatibus molestiae similique repudiandae! Voluptates.
@Rplus
Rplus / Dots: 3D cube with CSS animation.markdown
Last active August 29, 2015 14:21
Dots: 3D cube with CSS animation
@Rplus
Rplus / react start
Last active August 29, 2015 14:21
react starter
note
@Rplus
Rplus / Device Orientation
Created May 28, 2015 07:53
Device Orientation, 陀螺儀, 重力, mobile device
intro: http://www.html5rocks.com/en/tutorials/device/orientation/
test: http://www.html5rocks.com/en/tutorials/device/orientation/devicemotionsample.html
jQuery library: https://github.com/wagerfield/parallax
demo page: http://wagerfield.github.io/parallax/
@Rplus
Rplus / gif.sh
Last active August 29, 2015 14:23
split animated gif, get gif infomation
#!/bin/sh
FILE="$1"
FILE_NAME=${FILE%%.*}
echo "Convert $FILE to $FILE_NAME"
mkdir $FILE_NAME
cp $FILE $FILE_NAME
mv ${FILE_NAME}/$FILE ${FILE_NAME}/${FILE_NAME}
@Rplus
Rplus / google image search.html
Last active August 29, 2015 14:23
google image search html source code
<div class="rg_di rg_el" data-ved="0CBsQMygAMAA">
<a href="http://www.google.com.tw/imgres?imgurl=http://store.storeimages.cdn-apple.com/4628/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014%253Fwid%253D478%2526hei%253D595%2526fmt%253Djpeg%2526qlt%253D95%2526op_sharpen%253D0%2526resMode%253Dbicub%2526op_usm%253D0.5,0.5,0,0%2526iccEmbed%253D0%2526layer%253Dcomp%2526.v%253D1411520743411&amp;imgrefurl=http://store.apple.com/us/buy-iphone/iphone6&amp;h=595&amp;w=478&amp;tbnid=qCvEQrRQaWGwWM:&amp;zoom=1&amp;docid=cHMn-6xljep3BM&amp;ei=N0aEVZiYDoa1mwXC6oPgDA&amp;tbm=isch" jsaction="fire.ir_hc;mouseover:str.hmov;mouseout:str.hmou" class="rg_l">
<img data-sz="f" name="qCvEQrRQaWGwWM:" class="rg_i" alt="「iphone」的圖片搜尋結果" jsaction="load:str.tbn">
<div class="_aOd rg_ilm">
<div class="rg_ilmbg">
<span class="rg_ilmn">
478&nbsp;&#215;&nbsp;595 - store.apple.com
</span>
</div>
</div>
@Rplus
Rplus / example.scss
Created June 20, 2015 20:36
string encode in SASS/SCSS
// source: http://codepen.io/philippkuehn/pen/zGEjxB/?editors=010
$icon-color: #F84830;
// icon styles
// note the fill="' + $icon-color + '"
.icon {
display: inline-block;
@Rplus
Rplus / Pixiv hover zoom.js
Last active August 29, 2015 14:24
Pixiv hover zoom.js
// ==UserScript==
// @name Pixiv hover zoom
// @namespace https://github.com/rplus
// @version 0.3
// @description hover zoom for Pixiv
// @author Rplus
// @include http://www.pixiv.net/*
// @grant none
// ==/UserScript==