mr. m mr-cheffy

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

CSS Preprocessor Micro-Specification

Introduction

This is a conceptual specification for what could/would/should be the preprocessor to end all preprocessors. Unfortunately, it is just that - a specification. I had made quite a few attempts to create a CSS preprocessor, but I am far too inexperienced with advanced programming to succeed at this task. I got as far as the scanner and half of a half-working tokenizer before proceeding to pull my hair out. So I gave up, and decided just to list the proposed features here for reference. Perhaps these will make their way into existing pre-processors, or even inspire the birth of a new one.

First off, the basic features:

Pretty much everything the 3 leading pre-processors offer in terms of:

`ld` – Wading through Mac OS X linker hell

Intro

Friend: I tried looking at static linking in Mac OS X and it seems nearly impossible. Take a look at this http://stackoverflow.com/a/3801032

Me: I have no idea what that -static flag does, but I'm pretty sure that's not how you link to a library. Let me RTFM a bit.

Minutes later...

Drag and drop

This is a collection of knowledge I have built up regarding browser powered drag and drop functionality

Events

`dragstart`

timing: once as drag is starting
event.target: draggable Element

Recommended Extentions:

uBlock Origin

https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/

Settings

Make sure the following options are off:

Disable pre-fetching

Safari's date-picker is the cause of 1/3 of our customer support issues

...and obviously we're building a workaround. But I'm absolutely flabbergasted that a standard <input type="date"> HTML field, in a standard browser, from a company that bases its reputation good design, could be so dreadful.

The context

I'm the developer for a startup that sells a genetic test to recommend medications for high blood pressure. For medical reasons we need to know our customers' birth date. Most of our customers are in their 60s or older. We've found that many of them use iPads or iPhones. And they're the ones who complain to our customer support that our site is unusable.

	/* Not the nicest code we ever wrote... */

	<?php

	require_once 'HTTP/Request.php';
	require_once 'Text/Wiki/Mediawiki.php';


	class Wikipedia
	{

	/* The world's smallest Brainfuck interpreter in C, by Kang Seonghoon
	* http://j.mearie.org/post/1181041789/brainfuck-interpreter-in-2-lines-of-c */
	s[99],r=s,d,c;main(a,b){charv=1[d=b];for(;c=v++%93;)for(b=c&2,b=c%7?a&&(c&17
	?c&1?(r+=b-1):(r+=b-1):syscall(4-!b,b,r,1),0):v;b&&c\|a*r;v=d)main(!c,&a);d=v;}

	#ifndef __SMARTENUM_H__
	#define __SMARTENUM_H__

	#include <cstring>

	#define SMARTENUM_VALUE(typeName, value) e##typeName##_##value,
	#define SMARTENUM_STRING(typeName, value) #value,

	#define SMARTENUM_DEFINE_ENUM(typeName, values) enum typeName { values(SMARTENUM_VALUE) e##typeName##_Count, };

	CC := g++
	CFLAGS := -Wall -g
	TARGET := test

	# $(wildcard .cpp /xxx/xxx/.cpp): get all .cpp files from the current directory and dir "/xxx/xxx/"
	SRCS := $(wildcard *.cpp)
	# $(patsubst %.cpp,%.o,$(SRCS)): substitute all ".cpp" file name strings to ".o" file name strings
	OBJS := $(patsubst %.cpp,%.o,$(SRCS))

	all: $(TARGET)