Circle Meter that is filled based on the value of the score.
A Pen by Shiva Narrthine on CodePen.
{ | |
"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 |
Circle Meter that is filled based on the value of the score.
A Pen by Shiva Narrthine on CodePen.
#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); |
// 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(); |
<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 |