ozinepank

Frontend Development

Attention: if you attempt to fork this gist, github will think that you are a spammer and you will have to confirm that you are human with them. Apparantly there are too many links in this list. Also I update it rather frequently (see revisions on the left), so it's probably wise to not fork it anyway.

• Guides
  • Hack Design
  • Designer School
  • TheExpressiveWeb
  • Talks To Help You Become A Better Front-End Engineer In 2013
• Web Development Teaching Materials

ozinepank

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

ozinepank

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

ozinepank

<?php
add_action( 'wp_head', 'wps_add_ie_html5_shim' );
/**
 *  Add IE conditional html5 shim to header
 */
function wps_add_ie_html5_shim() {
    global $is_IE;
    if ( $is_IE ) {
        echo '<!--[if lt IE 9]>';
        echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';

ozinepank

#การใช้ Git ฉบับรีบร้อน

##Git Git เป็น revision control แบบ distributed (หมายความว่าไม่มีศูนย์กลาง) และ แบบ non-linear history (หมายความว่ามีประวัติการเปลี่ยนแปลงแบบไม่ใช่เส้นตรง) ดังนั้นทำให้คอนเซปต์ของ Git นั้นต่างจาก revision control รุ่นก่อนหน้าหลายอย่าง

ต่อไปจะอธิบายย่อๆเรื่องคำสั่ง Git โดยอิงกับการทำงานใน GitHub เป็นสำคัญ (Git มีวิธีใช้พลิกแพลงมากมาย ไปศีกษาการใช้อื่นได้ด้วยการไป Google เอาเอง)

##clone

สมมุติว่ามี repository แห่งนีงใน GitHub เช่น https://github.com/norsez/projectA

ozinepank

Sublime Text 2 – Useful Shortcuts (Windows)

General

Ctrl+KB	toggle side bar
Ctrl+Shift+P	command prompt
Ctrl+`	python console
Ctrl+N	new file

Editing

ozinepank

/* CSS Photo Album */
/* Rebound of this shot by @daryl: http://drbl.in/fwwM */

* {
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing: border-box;
}