Yuji Tomita

To modify an existing LemonStand field:https://v1.lemonstand.com/api/class/db_activerecord/#find_form_field()

$model->find_form_field('foo');

Turns out there’s always a second parameter passed to a for loop which is the index.

How shockingly convenient.

for value in list
console.log value

for value, index in list
console.log value, index

This was frustrating. Both pyactiveresource and Shopify Python API are undocumented, and looking at the source is frustrating as it’s all so dynamic. Had to go all the way to activeresource.
To query a record which relies on another one, pass the class constructor an argument called `prefix_options`. In it must be a dict which corresponds to arguments in the URL (look at source) denoted by source_prefix.

In my case, source_prefix contained $product_id, so my call looked like this:

image = shopify.Image(prefix_options={‘product_id’: product.id})

I could not find any fixes for this problem. Turns out it was caused by using background-attachment: fixed at the same time. Remove fixed attachment and IOS will render cover just fine.

I just learned about viewport relative units, vh, vw, vmax, vmin.

Amazing. Finally an easy way to do full height elements via 100vh == 100% viewport height.

Only problem? It blows up explosively on IOS devices.

I love the concept though, so I just created a simple coffeescript class which can be invoked directly or via data tags to trigger widths and heights correctly by converting an inline data attribute to explicit calculations on resize.

Parsing CSS for these new units was too much overhead.

https://gist.github.com/yuchant/8610909

Usage:
<div data-viewport-styles="width: 100vh; height: 50vw;"></div>

class root.utils.ViewportHeight
‘The VH unit is not well supported. Use data-tags instead.
data-viewport-unit="line-height: 100vh; height: 100vh;’
constructor: ({@element, @styles}={}) ->
@$element = $ @element
@$window = $ window
@_bindHandlers()

_getStyles: ->
# get styles as array
if not @_styles
styles = {}
for style in _.filter(@styles.split(‘;’), Boolean)
[key, value] = style.split(‘:’)
styles[key.trim()] = @_getValue(value)
self._styles = styles
return self._styles

_bindHandlers: ->
$(window).resize _.debounce(@onResize, 50)

_getValue: (value) ->
# given a unit like 400vw or 400vh, set it to absolute pixel values
# map viewport units to viewport unit conversion functions
viewportUnitMap = {
‘vh’: @_vh,
‘vw’: @_vw,
‘vmax’: null,
‘vmin’: null,
}
value = value.replace(‘;’, ”).trim()
for unit, func of viewportUnitMap
if unit.substr(value)
return func(parseInt(value))

_vh: (value) =>
@$window.height() * value/100

_vw: (value) =>
@$window.width() * value/100

_vmax: (value) =>
return Math.max @_vh(value), @_vw(value)

_vmin: (value) =>
return Math.min @_vh(value), @_vw(value)

onResize: =>
# window has been resized. update CSS values of vh/vw equivalents
@$element.css @_getStyles()

$("[data-viewport-styles]").each (index, el) ->
new root.utils.ViewportHeight
element: el
styles: $(el).data(‘viewport-styles’)

Flask-DebugToolbar only works with Flask-SQLAlchemy.

If you’re using native sqlalchemy, it turns out it’s pretty simple to activate. Instantiate the class below with your sqlalchemy DB engine and flask app.

from flask.ext.sqlalchemy import _EngineDebuggingSignalEvents
_EngineDebuggingSignalEvents(engine, app.import_name).register()

There are a ton of posts on this subject… with 100 different fixes.

You need Xcode / command line tools / GCC etc. of course.

Most importantly the piece that solved my issue was described here
http://stackoverflow.com/questions/18667916/installing-psycopg2-has-it-stuck-between-xcrun-and-lipo

 ln /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/lipo /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/lipo 

 xcrun -k lipo

John Albin Wilkins article on responsive design’s dirty little secret is extremely useful.
http://www.palantir.net/blog/responsive-design-s-dirty-little-secret

The core theory is floating elements with margin-right: -100%;

Your "grid" elements are all floated, with margin-left: X%, and margin-right: -100%.

At first, i didn’t really know what to make of it.. now it’s a critical part of my toolbox.

What this lets you do is stack elements on top of each other, positioning purely by the margin-left attribute. The negative margin right allows you to use what almost looks like absolute positioning, but while still keeping the elements "in the flow" vertically.

That’s right.. with this trick, you can still have vertical flow while giving up horizontal flow.

Every time you’ve used absolute positioning to achieve a cross fade, but had to hard code the height value, you could have just used this instead.

Give it a shot!

TL;DR: the dirty little secret allows you to retain vertical page flow, while removing elements from horizontal page flow. Oh my goodness. This should be CSS 101.

It was tough to spot this one in the docs:

How do you split an argument containing space delimited items?

The answer is the nth function.

@mixin something($breakpoint) {
$min: nth($breakpoint, 1);
$max: nth($breakpoint, 2);
}
something(0 100px); // $min / $max

This is ridiculous.

If you develop on a mac, you must download dash, now.

http://kapeli.com/

It allows you to keep an offline copy of docs, and makes them all searchable from the same interface (very fast).

You can even integrate with Sublime, and push CNTRL+H over a word to look it up in dash.

50% of development is looking up docs. This is a game changer.

I just installed offline docs for..

• html
• compass
• sass
• jquery
• javascript
• underscore
• coffeescript
• vagrant
• postgresql
• python
• django
• flask
• php

All from one interface. Really awesome.