Skip to content

Instantly share code, notes, and snippets.

View patw0929's full-sized avatar

Patrick Wang patw0929

123 followers · 18 following
View GitHub Profile
@farleyta
farleyta / _base.scss
Last active December 10, 2015 19:08
A starter responsive layout for SUSY and Compass. Mobile first, with breakpoints at 48em (768px by default) and 60em (960px default).
// Default mobile-first grid setup
$total-columns : 4; // a 4-column fluid grid for anything less than tablet (<48em)
$column-width : 20%; // each column is 4em wide
$gutter-width : 3%; // 1em gutters between columns
$grid-padding : $gutter-width; // grid-padding equal to gutters
$tablet-columns : 10; // 10-column fluid grid for tablets - desktop (48em - <60em)
$tablet-width : 48em; // 48em = 768px by default
$tablet : $tablet-width $tablet-columns; // Shorthand for tablet breakpoint
@tka
tka / view_helpers.rb
Created April 11, 2013 09:15
fire.app 相對路徑版 stylesheet_link_tag, javascript_include_tag
module ViewHelpers
def rel_stylesheet_link_tag(*f)
styles=stylesheet_link_tag *f
script_path = self.parser.script_filename.gsub(Compass.configuration.project_path, '')
child_folder= File.dirname( script_path.gsub(/\/[^\/]+/, '/..')[1..-1] )
styles.gsub 'href="', "href=\"#{child_folder}"
end
def rel_javascript_include_tag(*f)
styles=javascript_include_tag *f
@maylogger
maylogger / _replace-text-with-svg.scss
Last active December 16, 2015 13:39
這是一個 compass mixin 會使用 SVG 檔案取代文字，不支援 SVG 的瀏覽器自動使用備援 PNG 代替。
@mixin replace-text-with-svg($svg-name, $png-name: $svg-name) {
@include replace-text-with-dimensions($png-name + ".png");
background-image: none, image-url($svg-name + ".svg");
}
@hanksudo
hanksudo / Front-end-Developer-Interview-Questions-TC.md
Last active November 13, 2025 16:23
Front-end-Developer-Interview-Questions - 前端工程師面試問題集(繁體中文版)

前端工程師面試問題集

@版本 2.0.0

譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文。翻譯不好地方請協助pull request.

此repository包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。

Rebecca Murphey 的 Baseline For Front-End Developers 也是一篇很棒且值得讀的文章在你開始面試之前。

@Daniel15
Daniel15 / 1_README.md
Last active September 8, 2025 07:24
Complete Google Drive File Picker example

Google Drive File Picker Example

This is an example of how to use the Google Drive file picker and Google Drive API to retrieve files from Google Drive using pure JavaScript. At the time of writing (14th July 2013), Google have good examples for using these two APIs separately, but no documentation on using them together.

Note that this is just sample code, designed to be concise to demonstrate the API. In a production environment, you should include more error handling.

See a demo at http://stuff.dan.cx/js/filepicker/google/

@kmaida
kmaida / convert-UNIX-timestamp.js
Last active January 2, 2025 21:01
Convert a UNIX timestamp to user's local time via JavaScript
function convertTimestamp(timestamp) {
var d = new Date(timestamp * 1000), // Convert the passed timestamp to milliseconds
yyyy = d.getFullYear(),
mm = ('0' + (d.getMonth() + 1)).slice(-2), // Months are zero based. Add leading 0.
dd = ('0' + d.getDate()).slice(-2), // Add leading 0.
hh = d.getHours(),
h = hh,
min = ('0' + d.getMinutes()).slice(-2), // Add leading 0.
ampm = 'AM',
time;
@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active March 12, 2025 01:22
CriticalCSS Bookmarklet and Devtool Snippet.js
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");
@joshbeckman
joshbeckman / animatedScrollTo.js
Created September 30, 2013 14:51
ScrollTo animation using pure javascript and no jquery
document.getElementsByTagName('button')[0].onclick = function () {
scrollTo(document.body, 0, 1250);
}
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20;
@tinabeans
tinabeans / template.html
Last active May 10, 2025 11:01
A super-barebones single-column responsive email template, assuming a max-width of 540px. Read about it on the Fog Creek blog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Single-Column Responsive Email Template</title>
<style>
@media only screen and (min-device-width: 541px) {
.content {
@andyj
andyj / html_for_international_calling coes.htm
Created October 22, 2013 21:57
HTML <select> international calling codes for each country
<!-- country codes (ISO 3166) and Dial codes. -->
<select name="countryCode" id="">
<option data-countryCode="GB" value="44" Selected>UK (+44)</option>
<option data-countryCode="US" value="1">USA (+1)</option>
<optgroup label="Other countries">
<option data-countryCode="DZ" value="213">Algeria (+213)</option>
<option data-countryCode="AD" value="376">Andorra (+376)</option>
<option data-countryCode="AO" value="244">Angola (+244)</option>
<option data-countryCode="AI" value="1264">Anguilla (+1264)</option>
<option data-countryCode="AG" value="1268">Antigua &amp; Barbuda (+1268)</option>