Circle Meter that is filled based on the value of the score.
A Pen by Shiva Narrthine on CodePen.
Shiva Narrthine shivanarrthine
shivanarrthine
/ index.html
Created
October 16, 2012 15:29
An attempt to improve the user experience of the text box, by allowing the text to shrink to fit when it is full... and a slightly different focus effect.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input type='text' id='resizer' placeholder='Fill me with text.'> | |
| <!-- | |
| Resizing text, text box | |
| A little experiment to improve the user experience of the text box by: | |
| 1. Using a focusing shadow effect when the box is being used |
shivanarrthine
/ custom-date-and-time-format
Last active
December 9, 2015 20:49
Custom date and time format with JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Custom Date Format | |
| var mydate = new Date("2012-12-06"); | |
| var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][mydate.getMonth()]; | |
| var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] | |
| var customdate = day[mydate.getDay()] + ', ' + mydate.getDate() + ' ' + month + ' ' + mydate.getFullYear(); | |
| //Custom Time Format | |
| var mytime = new Date("2012-12-06 14:50:43"); | |
| var hour = mytime.getHours(); | |
| var mins = mytime.getMinutes(); |
shivanarrthine
/ ps-export-groups-to-files.jsx
Created
January 16, 2013 15:46
Photoshop script that exports all groups to individual png files. Credits to http://www.damienvanholten.com/blog/export-groups-to-files-photoshop/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #target photoshop | |
| function main(){ | |
| if(!documents.length) return; | |
| var doc = activeDocument; | |
| var oldPath = activeDocument.path; | |
| for(var a=0;a<doc .layerSets.length;a++){ | |
| activeDocument.activeLayer = activeDocument.layers.getByName(doc.layerSets[a].name); | |
| dupLayers(); | |
| activeDocument.mergeVisibleLayers(); | |
| activeDocument.trim(TrimType.TRANSPARENT,true,true,true,true); |
shivanarrthine
/ package.json
Last active
July 27, 2020 11:02
Simple npm setup to compile and post-process Sass files. Use by running `npm run watch-css`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "scripts": { | |
| "build-css": "node-sass --include-path --source-map scss public/sass/application.sass public/css/styles.css", | |
| "post-css": "npx postcss public/css/styles.css --config postcss.config.js -o public/css/styles.min.css", | |
| "watch-css": "nodemon -e sass -x \"npm run build-css && npm run post-css\"" | |
| } | |
| } | |
| // Node modules required: node-sass, nodemon, postcss-cli, autoprefixer, cssnano | |
| // Setup guide: https://www.notion.so/Simple-npm-setup-to-compile-and-post-process-Sass-files-267dd76552de48359718c23b99259864 |