Snippets

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.

Tags

Immediately-Invoked Function Expression (IIFE), a.k.a. self-executing anonymous functions

Code language: JavaScript

(function () {
  // Safely declare your names inside this function.
  var variable1 = 1;
  let variable2 = 2;
  const constant = 3;
  function someFunction() {}
  class SomeClass {}
})();

At the heart of this pattern, there is an anonymous function function () {…}. This is a function expression that simply creates a function and returns it as a value, in contrast to a function declaration that creates a function and inevitably binds it to a name.

The braces around the anonymous function, ( function() {…} ), allow the parser to recognize the function expression correctly. Finally, the braces at the end () call the function immediately. That is why it is called immediately-invoked function expression.

Quoted content is licensed under CC BY-SA.

A love letter to jQuery

It hurts me when I hear them say things like “you don’t need jQuery”. They don’t remember how dark it was before your light. We needed you then and we still need you now. I like the way you do things and although the years have passed, for certain tasks, you still do what you do better than anyone else could. I trust you. I know you and you know me. There will always be other ways we could do things, but I know I can rely on you and you’re always there when I need you to be.

The unsettling intersection of children's videos and manipulating search rankings for profit

It turns out that there’s an industry out there making money by algorithmically mashing up kids videos in ways to manipulate search rankings, without much apparent care about how their content could potentially traumatize some children. This is well worth a read, if only as another piece of evidence that algorithms often do not have human ethics baked in and the unintended effects this can have.

include-media: Simple, elegant and maintainable media queries in Sass

I’ve just converted my Sass code to use this, and I can safely say it’s pretty excellent.

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

[…]

Why another library?

I spent quite some time experimenting with different libraries and mixins available out there, but eventually all of them failed to do everything I needed in an elegant way. Some of them wouldn’t let me mix set breakpoints with case-specific values, others wouldn’t properly handle the CSS OR operator and most of them had a syntax that I found complicated and unnatural.

include-media was the result of that experience and it includes all the features I wish I had found before, whilst maintaining a simplistic and natural syntax.

I wrote an article on CSS-Tricks about this experience, where I explain in detail the problems I found with each of the solutions I experimented with. I also wrote on David Walsh’s blog about the implementation details of include-media.

Example usage:

Code language: Sass

$breakpoints: (small: 320px, medium: 768px, large: 1024px);
 
/* Inclusive and exclusive operators for a finer control over the intervals */
@include media(">medium", "<=large") {
	width: 100%;
}