Jake Rayson growdigital

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

This post has moved

I published this email exchange as a full post at csswizardry.com/…/can-css-be-too-modular.

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Commit Message Conventions

These rules are adopted from the AngularJS commit conventions.

Goals
Generating CHANGELOG.md
- Recognizing unimportant commits
- Provide more information when browsing the history
Format of the commit message
Subject line

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

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.

	#!/bin/bash

	firstLine=`head -2 $1 \| tail -1`
	if [[ $firstLine == \#* ]]; then # Testing that the file starts with a comment, not yet a real commit ;)
	echo '<type>(<component>): <subject>' > .prepare-commit-msg-temp
	echo '' >> .prepare-commit-msg-temp
	echo '<body>' >> .prepare-commit-msg-temp
	echo '' >> .prepare-commit-msg-temp
	echo '# types: feat, fix, docs, style, refactor, test, chore(mantean)' >> .prepare-commit-msg-temp

	function transfer
	if test (count $argv) -eq 0
	echo "No arguments specified. Usage:\necho transfer /tmp/test.md\ncat /tmp/test.md \| transfer test.md"
	return 1
	end

	## get temporarily filename, output is written to this file show progress can be showed
	set tmpfile ( mktemp -t transferXXX )

	## upload stdin or file

	<?php

	# Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	# http://creativecommons.org/publicdomain/zero/1.0/

	$mysite = 'https://adactio.com/'; // Change this to your website.
	$token_endpoint = 'https://tokens.indieauth.com/token';

	$_HEADERS = array();
	foreach(getallheaders() as $name => $value) {

	{
	"folders":
	[
	{
	"folder_exclude_patterns": ["dist", "node_modules"],
	"file_exclude_patterns": ["*.sublime-project"],
	"follow_symlinks": true,
	"path": "."
	}
	]

	'editor':
	'lineHeight': 1.45
	'softWrap': true
	'normalizeIndentOnPaste': true
	'tabLength': 2
	'preferredLineLength': 100
	'invisibles':
	'cr': '↩'
	'eol': ''
	'space': '·'