armno / armno.github.io Goto Github PK

update this post: http://armno.in.th/2013/06/28/set-up-apache-php-mysql-without-mamp/

• works on mavericks/yosemite
• xcode-select --install to fix brew issues (yosemite)
• set default php timezone
• install phpmyadmin

maybe start with <google-maps> element

currently about page uses home page's critical css (page type detection).

it should be using post layout's critical css because of similarity in html structure.

guard is no longer working.

(but who cares ...)

• pathogen to vundle
• symlinks & dotfiles
• more plugins

resources

• http://blog.thomasupton.com/2014/02/migrating-from-pathogen-to-vundle/
• http://jameslaicreative.com/moving-up-upgrading-from-pathogen-to-vundle/
• http://davidwalsh.name/git-remove-submodule

too much whitespace with less information gathered.

make performant background-attachment: fixed implementation.

without javascript

• problem: script loading not in order
• requirejs: javascript module loader
• use case 1: load multiple javascript files in order
• use case 2: load jquery
• use case 3: load FB sdk

this is so kinda cool! https://github.com/pazguille/github-card

only http://armno.in.th works, but not with www version.

continued from http://armno.in.th/2012/07/28/my-instagram-workflow/

part II is more about black&white processing.

• using git stash
• using git add & commit patch mode

max-width: 100%

because so many fellow devs don't do this ..

• maybe turn main navigation into hamburger icon (meh)
• reduce font size in .callout
• reduce font size of page titles
• reduce left and right paddings of main <article> element
• that vim block looks like shit on mobile http://armno.github.io/2015/02/26/setting-up-vim-part-2/

http://davidwalsh.name/twitter-facebook-jsonp

in..

• php using slim framework http://www.slimframework.com/
• node using expressjs
• ruby using sinatra

CRUD apis for X

• get all Xs
• create new X
• read an X
• update an existing X
• delete an X

• rework on the layout
• use the same format of date with post details
• search/filter?

• sidebar navigation items
• index page - show excerpt?
• comments
• prism.js for code block
• social sharing buttons
• social meta tags
• clean up unused files

http://hyde.getpoole.com/

เรามักจะเจอ w3schools.com อยู่อันดันต้นๆ ของ Google อยู่บ่อยๆ เมื่อค้นหาอะไรก็ตามเกี่ยวกับ development และหลายคนเชื่อว่ามันเป็น resource ที่ดี

จนกระทั่งเมื่อประมาณปี 2011 กลุ่ม web developer (ซึ่งเป็นระดับแถวหน้าของโลก) ได้ทำเว็บ w3fools.com ขึ้นมาเพื่อบอกโลกว่า w3schools.com นั้นเต็มไปด้วยข้อมูลที่ผิดๆ (สมัยนั้นมีบอกเป็นข้อๆ เลยว่า ข้อมูลหน้าไหน ผิดตรงไหน ที่ถูกต้องเป็นยังไง)

และที่สำคัญ w3schools.com ยังมี (ขาย) certificates หลายตัว ซึ่งราคาแพงเกินตัว และใช้อ้างอิงกับอะไรไม่ได้เลย ชื่อของ w3schools นั้นก็ยังทำให้เกิดความสับสนกับ w3c ที่ไม่ได้มีความเกี่ยวข้องกันเลยอีกด้วย

WE BELIEVE W3SCHOOLS IS HARMFUL TO THE WEB. WEB DEVELOPERS DESERVE BETTER.

เวลาผ่านไป 2 ปีกว่าๆ ทีม w3fools คุยกันเรื่องประกาศชัยชนะ ปัจจุบัน w3schools.com ได้ปรับปรุงเนื้อหาในเว็บให้ถูกต้องเกือบทั้งหมดแล้ว พร้อมกับใส่ link เล็กๆ ตรง footer ให้ report error ได้ แต่นั่นก็ไม่ได้ช่วยอะไรมาก เพราะถึงยังไงพี่แกก็อัพเดทช้าอยู่ดี

สำหรับผมแล้วไม่ชอบ w3schools เพราะโฆษณาเยอะ ทำให้เข้าใจผิด (โดยเฉพาะมือใหม่) และดูเหมือนเขาไม่ได้ใส่ใจเรื่องคุณภาพของ content เท่าไหร่ .. ทุกวันผมถือว่า w3schools ยังเป็น resource ที่แย่อยู่

resource ที่ดีกว่า

• Web Platform Docs
• Mozilla Developer Network
• Dev.Opera
• HTML5Rocks

และอื่นๆ อีกมากมาย

ซ่อน w3schools.com จาก google

มี 2 ทางเลือกด้วยกัน

1. เติม resource keyword เข้าไป เช่น ต้องการหาคำว่า html canvas ก็เติม wpd (Web Platform Docs), mdn (Mozilla Developer Network) หรือ dev.opera ต่อท้ายเข้าไป เพื่อให้ผลการค้นหาจากเว็บเหล่านี้ แสดงผลก่อน w3schools

1. ติดตั้ง Google Chrome extension: Personal Blocklist ทำให้สามารถกด block w3schools ได้เลย คราวหน้าก็จะไม่มี w3schools มากวนใจอีกต่อไป

it looks shitty on phones.

manually of course

what gulp is

ปกติเมื่อเราทำเว็บ ก็จะมีสิ่งที่ต้องทำเป็นประจำอยู่จำนวนหนึ่ง เช่น

• minify html/javascript/css หรือ รวมเป็นไฟล์ 1 ไฟล์
• optimize image ให้มีขนาดเล็กลง
• compile sass/less
• run tests

ขั้นตอนเหล่านี้เป็นส่วนหนึ่งของ build process ที่จำเป็นต้องทำซ้ำๆ อยู่ตลอดเวลา gulp เป็นตัวช่วยรัน task เหล่านี้ให้อัตโนมัติในระหว่างที่เรากำลัง develop อยู่ได้ครับ (อารมณ์แบบเปิดบอทเวลาเล่นเกม) ซึ่งเรายังสามารถสร้างเงื่อนไขในการรันแต่ละ task ให้ต่างกันได้ด้วย

ถ้าใครใช้ Grunt อยู่ก็จะพบว่าเป็น tool ลักษณะเดียวกัน เพียงแต่มีแนวคิดในการ config คนละแบบ และ gulp มี built-in watcher มาให้ตั้งแต่แรก

installing

ก่อนติดตั้ง gulp ต้องมี node อยู่ในเครื่องก่อน จากนั้นก็ติดตั้งผ่าน command

$ npm install -g gulp

1st gulp task

ลองทำ task ง่ายๆ ให้ gulp log คำว่า lorem ipsum ใน console ทุกครั้งที่เรา save ไฟล์ index.html

$ mkdir firstgulp
$ cd firstgulp

อันดับแรกต้องติดตั้ง package gulp แบบ local (ใน project) ก่อน (ใน gulp document บอกว่าต้องติดตั้ง gulp-util ด้วย แต่จริงๆ แล้วไม่จำเป็นต้องติดตั้งก็ได้ครับ ไม่ได้ใช้ gulp/#253)

$ npm install --save-dev gulp

จากนั้นสร้างไฟล์ใหม่ชื่อว่า gulpfile.js (เทียบได้กับ Grunfile.js ของ Grunt) เพื่อเขียน task แรกกัน

var gulp = require('gulp');

gulp.task('lorem', function() {
  console.log('lorem ipsum');
});

gulp.task('watch', function() {
  gulp.watch('index.html', ['lorem']);
});

gulp.task('default', ['watch']);

ในความเป็นจริงคงไม่มีใครใช้ gulp เพื่อ console.log เพียงอย่างเดียว มาดู use case ที่ใช้งานกันจริงๆ ดีกว่า

ใช้ Gulp compile sass

บล็อกนี้ใช้ Sass ในการเขียน css เราลองมาตั้งค่าให้ gulp compass sass ให้เป็น css กัน หลักการง่ายๆ ก็คือสร้าง watcher task สำหรับไฟล์ .scss เมื่อไฟล์เหล่านี้ถูกแก้ไข ก็ให้ gulp compile sass ให้ครับ

gulp plugin ของ sass นั้นมีอยู่ 2 ตัวคือ gulp-sass กับ gulp-ruby-sass ซึ่ง gulp-sass นั้นทำงานได้เร็วกว่าก็จริง แต่ไม่ support indented syntax (.sass) ดังนั้นผมจึงเลือกใช้ gulp-ruby-sass แทน

อันดับแรกต้องลง gulp plugin ที่ชื่อว่า gulp-ruby-sass ก่อน

$ npm install --save-dev gulp-ruby-sass

จากนั้นใน gulpfile.js ก็โหลด module gulp-ruby-sass เข้ามาใช้ และก็เพิ่ม watch task เข้าไปครับ

 // gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('css', function(){
  return gulp.src('./sass/**/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.sass', ['css']);
});

gulp.task('default', ['watch']);

ทุกครั้งที่เรา save ไฟล์ .sass ใน directory 'sass' (รวมถึง sub-directory) gulp ก็จะรัน task css ซึ่ง compile sass เป็น css ตาม directory ปลายทางที่ระบุไว้

pipe() ของ gulp ก็คล้ายๆ กับ pipe ของ Unix เลยครับ รับ output ของ statement แรกไปเป็น input ของ statement ต่อไป (และต่อไปเรื่อยๆ)

เพิ่ม task อีก

ลองให้ gulp จัดการหลายๆ task พร้อมๆ กัน คือการ concatenate javascript, minify javascript และ minify html รวดเดียว

ก่อนอื่นต้องติดตั้ง plugin ที่จะใช้ก่อน

$ npm install --save-dev gulp-concat gulp-uglify gulp-htmlmin

จากนั้นเพิ่ม watcher กับ task เข้าไป

 // gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');

gulp.task('css', function(){
  return gulp.src('./sass/**/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('js', function(){
  return gulp.src([
        './src/js/model.js',
        './src/js/controller.js'
        ])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));
});

gulp.task('html', function() {
  return gulp.src(['./src/index.html'])
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('.'));
});

gulp.task('watch', function() {
  gulp.watch('./sass/**/*.sass', ['css']);
  gulp.watch('./src/**/*.js', ['js']);
  gulp.watch('./src/index.html', ['html']);
});

gulp.task('default', ['css', 'js', 'html', 'watch']);

@todo - task dependencies

• writing gulpfile.js
  • gulp-sass
  • gulp-autoprefix
  • js concat
  • minify html

bad, really bad ..

single post

home page

this should be blogged too.

http://www.genymotion.com/#

• critical css

• info/note/updates
• warning

angular classy
http://davej.github.io/angular-classy/

outdated content element (banner) could be useful for readers who are reading a maybe-outdated content. the idea is to show this element on the posts that are older than, for example, 2 years.

yay.

while the page with cover photo is loading, the post title is invisible because it is white.

should apply a dark background color to the element to make the text visible while the cover photo is loading.

• remove social media icons at the top right. put them in .callout
• remove pulling .callout text from config file. put the text directly in the template. it's annoying having to restart jekyll everytime.
• emphasize page links in main nav
• make <blockquote> look like a blockquote
• change monospace font in <code> ?
• change title "Share" to "Share this post"
• update callout images: higher quality plz

• reduce size of header (sidebar element) for small screens
• content before sidebar
• inline critical css (use Critial to get above-the-fold css). loadCSS for the rest.
• ditch gravatar
• optimize header (sidebar) background
• remove unused css
• optimize flickr images. or implement responsive image technique.

share from a custom app lacks of pre-customization of the link for the user

so

http://armno.in.th/2013/04/22/using-source-maps-with-sass

should be

http://armno.in.th/2013/04/22/using-source-maps-with-sass/

because it will be redirect (301) to a / version anyway.

Why do I have both 😐