mirisuzanne

/* 
  This is not meant to be a final CSSWG proposal, 
  but reflects my immediate thoughts after reading
  [David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
  This gist was created to demonstrate my idea for removing selectors from his query syntax.

  More of my thoughts & notes are online at css.oddbird.net/rwd/
*/

main,

beep

// Modified from Jeremy Keith’s lovely bookmarklet: https://adactio.com/journal/16523
javascript:(function(){open('https://googlechrome.github.io/lighthouse/viewer/?psiurl='+escape(document.location)+'&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa', 'test__lighthouse')})();

wesbos

320
321
322
323
324
325
326
327
328
329

mrmrs

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

https://twitter.com/thomasfuchs/status/493790680397803521

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get

celoyd

Hi [redacted],

Some answers for you:

What interested you in composing this image and what does it mean to you.

I work on satellite imagery at Mapbox, so I see a lot of pictures of Earth. I’ve always been interested in the history and culture around the Whole Earth: the image of the sunlit planet floating in space. When the Himawari-8 data started coming out, I tried different things with it, and the most compelling for me was that Whole Earth – what we call a full disk image. Because you get a frame every 10 minutes, you can make a fairly smooth animation, and I wanted to show that off. We don’t get a lot of chances to think about the face of the Earth as something in motion.

As for what it means to me personally, I think of a few things.

futurefabric

// Example code from http://futurefabric.co.uk/mooooooving 
// Based on the work of Dave Whyte — http://beesandbombs.tumblr.com


int[][] result;
float t;

void setup() {
  setup_();

paulirish

What forces layout / reflow

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.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

daneden

var paras = document.querySelectorAll('p');

for(var p of paras) {
  if (p.textContent.startsWith('“')) p.classList.add('p--oq');
}

tkadlec

(function () {
	var perfBar = function(budget) {

		window.onload = function() {
			window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};


			var timing = window.performance.timing,
			now = new Date().getTime(),
			output, loadTime;

csswizardry

This post has moved

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