Skip to content

Instantly share code, notes, and snippets.

View charliecm's full-sized avatar

Charlie Chao charliecm

22 followers · 4 following
View GitHub Profile
@charliecm
charliecm / placeholder.js
Created October 8, 2013 18:31
Fallback for input placeholder. Uses a .is-placeholder class to style placeholder text.
if(!Modernizr.input.placeholder){
$('input[placeholder], textarea[placeholder]').each(function() {
$(this).val($(this).attr('placeholder'));
$(this).addClass('is-placeholder');
}).blur(function() {
if ($(this).val() === '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('is-placeholder');
}
}).focus(function() {
@charliecm
charliecm / tricks.css
Created December 16, 2013 01:57
Quick CSS tricks.
/* Smooth font */
.smooth-font {
transform: rotate(-0.0000000001deg);
}
/* Center an element vertically + horizontally */
.center {
position: absolute;
top: 0;
right: 0;
@charliecm
charliecm / scroll-test.js
Created March 30, 2014 19:36
Paste this in the console so that the page smooth scrolls by viewport height. Good for testing out websites with parallax effects that is broken into sections.
$('body').bind('click', function() { $('body,html').stop().animate({ scrollTop: $('body').scrollTop() + $('body').height() }, 1000); });
@charliecm
charliecm / hypen-to-camelcase.js
Created April 22, 2014 19:47
Converts hypen to camelCase in a variable name. From http://stackoverflow.com/questions/6660977/convert-hyphens-to-camel-case-camelcase
string.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
@charliecm
charliecm / Gruntfile.js
Created November 24, 2014 04:23
Gruntfile from font-icons-workflow.
module.exports = function(grunt) {
grunt.initConfig({
shell: {
exportIcons: {
command: 'sketchtool export slices assets/icons.sketch --output=assets/icons/'
}
},
webfont: {
icons: {
@charliecm
charliecm / no-scrollbar.js
Last active August 29, 2015 14:23
No scrollbar console snippet (webkit)
(function(d,s){s=d.createElement('style');s.innerHTML='::-webkit-scrollbar{display:none}';d.head.appendChild(s)})(document)
@charliecm
charliecm / subLayerByPath.coffee
Last active October 2, 2015 21:49
(Framer module) Extends the Layer class with a new function that returns the first nested sublayer from the provided path of names.
# Extends the Layer class with a new function that returns the first nested
# sublayer from the provided path of names.
# e.g., innerCircle = screenLayer.sublayerByPath('Box/Inner_Box/Inner_Circle')
Layer.prototype.subLayerByPath = (path = '', delimeter = '/') ->
names = path.split(delimeter)
layers = this.subLayersByName(names.shift() || '')
if (layers.length && names.length)
path = names.join(delimeter)
return layers[0].subLayerByPath(path)
@charliecm
charliecm / gulpfile.js
Created December 17, 2015 17:44
Gulp sketchtool task script for https://github.com/charliecm/font-icons-workflow
var gulp = require('gulp');
var exec = require('child_process').exec;
gulp.task('default', function (cb) {
exec('sketchtool export slices assets/icons.sketch --output=assets/icons/', function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
});
@charliecm
charliecm / exiftool-snippets.bash
Last active November 13, 2023 23:43
Useful metadata editing and batch renaming snippets using exiftool.
# Changing metadata -----------------------------------------------------------
# Copy tags from one file to another
# http://thomer.com/howtos/copy_exif.html
exiftool -TagsFromFile a.jpg b.jpg
# Photos — change CreateDate metadata
exiftool "-CreateDate=2017:05:17 12:00:00" IMG.jpg
# Videos — change date to "Creation Date" (written by DSLRs)
@charliecm
charliecm / video-crop.bash
Last active September 10, 2016 18:55
Some video cropping snippets using ffmpeg.
# Crop to 1240x768 (tablet) on retina screen
ffmpeg -i input.mp4 -filter:v "crop=2048:1536:256:32" output.mp4
# Center video onto 1920x1080 canvas with white background
ffmpeg -i input.mov -vf "scale=min(iw*1080/ih\,1920):min(1080\,ih*1920/iw),pad=1920:1080:(1920-iw)/2:(1080-ih)/2:color=white" output.mov