I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc).
| <!-- 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 & Barbuda (+1268)</option> |
| <!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 { |
| 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; | |
| (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(": "); |
| 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; |
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/
@版本 2.0.0
譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文。翻譯不好地方請協助pull request.
此repository包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。
Rebecca Murphey 的 Baseline For Front-End Developers 也是一篇很棒且值得讀的文章在你開始面試之前。
| @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"); | |
| } |
| 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 |