Making Sass talk to JavaScript with JSON | CSS-Tricks
Crazy hack. Might be useful one day.
The code required has since been extracted into a library Show archive.org snapshot .
Related cards:
Dealing with "TypeError: Converting circular structure to JSON" on JavaScript
JavaScript structures that include circular references can't be serialized with a"plain" JSON.stringify
. Example:
a = { name: 'Groucho' };
b = { name: 'Harpo', sibling: a };
a.sibling = b;
Doing a JSON.stringify(a)
will thr...
Managing vendor libraries with the Rails asset pipeline
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeli...
Flexible overflow handling with CSS and JavaScript
You can use text-overflow
to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncat...
Generate CSS Sprites on the Fly with Lemonade
Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files.
How to horizontally center absolute positioned container with CSS
Find out in this short guide, how to horizontally center a absolute positioned container with CSS.
Note: We have a card with [all CSS centering options](https://makandracards.com/makandra/38273-align-things-with-css-vertically-and-horizontall...
How to apply transparency to any color with pure CSS
To apply transparency to an element, you can use opacity
in CSS. However, sometimes you don't want to make the entire element transparent, only a color.
Using not-so-modern CSS, you can simply generate non-opaque versions of a color. This card d...
IE-friendly mobile-first CSS with Sass 3.2
Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles.
Not all of us can g...
Sass: How to do math with shorthand values inside variables
If you need to modify (e.g. add 2px) a Sass variable that defines multiple values as one (e.g. for short-hand CSS definitions such ass padding
), you can by using nth
. It's ugly.
While you could split up such variables into multiple values (e....
How to speed up JSON rendering with Rails
I was recently asked to optimize the response time of a notoriously slow JSON API endpoint that was backed by a Rails application.
While every existing app will have different performance bottlenecks and optimizing them is a rabbit hole of arbitra...
Scroll a textarea to a given line with jQuery
You can use this code:
function scrollToLine($textarea, lineNumber) {
var lineHeight = parseInt($textarea.css('line-height'));
$textarea.scrollTop(lineNumber * lineHeight);
}
Some caveats about this code:
- Your t...