Skip to main content

Tedshd's Dev note

PHP - Auto update static files cache

# PHP - Auto update static files cache We can cache static files(CSS, JavaScript) to client When Server update static code. We want to update cache then we can modify file or add query string update version. We have some choice like modify url ?v=1 to ?v=2 But I want to auto modify version. This is a way i use <?php function autoversion($url) { $ver = stat($_SERVER['DOCUMENT_ROOT'] . $url)[mtime]; return $url . ...

JavaScript - Google Closure Compiler V.S. Gulp uglify

# JavaScript - Google Closure Compiler V.S. Gulp uglify ## Intro I have two choice Google Closure Compiler UglifyJs ### Google Closure Compiler Google Closure Compiler Google Closure Compiler is a tool for minify and uglify js. From Google Java Command Line Slow ### UglifyJs mishoo/UglifyJS2 More option setting Node.js Command Line Fast ## Test ### Google Closure Compiler When i run command line, it used lot of cpu source. ...

CSS - web font

# CSS - web font Use our font Put your font file on your server. Default font can’t cross domain used. Suggest use OTF or TTF format. @font-face { font-family: playstation; src: url(TRIIYP.otf); } @font-face { font-family: sony; src: url(sony.TTF); } ## Fonts SONY’s Logo Font Download Free ps4 fonts - FontSpace ## Demo ps4 Refer - CSS3 Web Fonts ...

gulp.js - Concatenate File When Gulp Watch

# gulp.js - Concatenate File When Gulp Watch ## package.json { "name": "gulp", "version": "3.8.7", "devDependencies": { "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-watch": "^4.3.4" } } ## gulpfile.js var gulp = require('gulp'), watch = require('gulp-watch'), concat = require('gulp-concat'); var js; gulp.task('concat', function (cb) { var options = {}; watch('dev/*.js', options, function (e) { // console.log('e:'+JSON.stringify(e)); // console.log('\n'); console.log(new Date() + ' -- ' + e.history[0].replace(e.base, '')); js = e.history[0].replace(e.base, ''); gulp. ...

Apache - Apache Command Line on Mac / Ubuntu

# Apache - Apache Command Line on Mac / Ubuntu ## Mac sudo apachectl start sudo apachectl restart sudo apachectl status sudo apachectl stop ## Ubuntu sudo /etc/init.d/apache2 start sudo /etc/init.d/apache2 restart sudo /etc/init.d/apache2 status sudo /etc/init.d/apache2 stop sudo service apache2 start sudo service apache2 restart sudo service apache2 status sudo service apache2 stop Refer - Ubuntu Linux: Start / Restart / Stop Apache Web Server ...

JavaScript - scrollTop

# JavaScript - scrollTop ## scrollTop Element.scrollTop - Web API Interfaces | MDN ## Issue in firefox Normal element.scrollTop = intValue; But when I use document.body.scrollTop = 0; It doesn’t work in firefox. Solution document.documentElement.scrollTop = 0; // for firefox Refer - document.body.scrollTop vs document.documentElement.scrollTop ...

CSS3 - object-fit

# CSS3 - object-fit We can use CSS3 property object-fit handle image show area and fit it. But only IE no support. Example See the Pen img object-fit by Ted (@tedshd) on CodePen. Refer - object-fit Refer - object-fit ...

JavaScript - insertBefore & insertAfter

# JavaScript - insertBefore & insertAfter ## insertBefore This is native JavaScript api var insertedElement = parentElement.insertBefore(newElement, referenceElement); var vDom = document.createElement('div'), dom = document.querySelector('#list'); dom.insertBefore(vDom, dom.childNodes[1]); // or var vDom = document.createElement('div'), dom = document.querySelector('#target'); dom.parentNode.insertBefore(vDom, dom); Refer - Node.insertBefore() ## insertAfter JavaScript doesn’t have any api handle insert DOM after reference DOM We can use this way function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } Refer - How to do insert After() in JavaScript without using a library? ...