| { | |
| "vars": {}, | |
| "css": [ | |
| "type.less", | |
| "grid.less", | |
| "forms.less", | |
| "buttons.less", | |
| "responsive-utilities.less", | |
| "glyphicons.less", | |
| "button-groups.less", |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| /** | |
| * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
| * | |
| * To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
| * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
| * the height of element `.foo` —which is a full width and height cover image. | |
| * | |
| * iOS Resolution Quick Reference: http://www.iosres.com/ | |
| */ | |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
This is a curated set of conventions and best practices for Stylus, an expressive, dynamic, robust and advanced CSS preprocessor. Frustrated with there not being a set of conventions set in place (that could be easily found), I set forth to find out on my own.
| <!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 { |
| data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script> | |
| <!-- | |
| For other language: Instead of `ace/mode/ruby`, Use | |
| Markdown -> `ace/mode/markdown` | |
| Python -> `ace/mode/python` | |
| C/C++ -> `ace/mode/c_cpp` | |
| Javscript -> `ace/mode/javascript` | |
| Java -> `ace/mode/java` | |
| Scala- -> `ace/mode/scala` |
| if environment == :production | |
| on_stylesheet_saved do |file| | |
| # pretty logging output when making a gzipp'ed file | |
| gz_file = Pathname.new("#{file}.gz").relative_path_from(Pathname.new(project_path)) | |
| Compass::Logger.new.record(:create, gz_file) | |
| # This generates a file of the same name but ending in .gz | |
| `gzip -f #{file}` | |
| end | |
| end |
| <html> | |
| <head> | |
| <title>Look at WebSQL</title> | |
| <script> | |
| // Through the code below remember essentialy there are just 3 core methods we tend to use | |
| // openDatabase | |
| // transaction | |
| // executeSql | |
| // Opening a connection |