Drupal 8 configuration schema cheatsheet
This seems useful. Found on the Configuration schema/metadata Drupal 8 API guide on Drupal.org, which is super useful.
Snippets
These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven’t yet. The concept is inspired by Jeremy Keith’s links and CSS-Tricks, among other things. Enjoy.
Drupal 8 render pipeline chart
BEM class selectors and the Sass ampersand
The Sass ampersand is incredibly useful in build selectors based on the parent selector, but it has a limitation. Take the following nested BEM-style selectors:
Sass
.component {
// A BEM modifier.
&--reversed {
background: white;
border-color: lightgray;
// Target a descendent only when the parent has the modifier? Not exactly...
&__child-element {
background: rebeccapurple;
}
}
}The linked post explains the problem:
Wait, why is this not working? The problem is that the
&has a scope of.component--reversed, so&__child-elementcompiles to.component--reversed__child-element, which doesn’t [exist] in the markup.
The fix is to save the & to a variable in the parent and use that in the child selector:
Sass
.component {
// Save the current value of & as $self.
$self: &;
&--reversed {
background: white;
border-color: lightgray;
// Print $self in place of & to get the correct scope of the parent above.
#{$self}__child-element {
background: rebeccapurple;
}
}
}The compiled CSS for that element is now
.component--reversed .component__child-element[.]
Source link:
Allow Ctrl- and Shift-clicking links in event handlers
I just recently updated a bunch of my click handlers to not act when the Ctrl or Shift keys are pressed during the click, so that links can be opened in new tabs or windows by the user if so wanted:
Javascript
// Don't do anything and defer to the default action if a modifier key
// was pressed during the click (to open the link in a new tab, window,
// etc.) - note that this is a truthy check rather than a strict check
// for the existence of and boolean true value of the various event
// properties:
// * https://ambientimpact.com/web/snippets/conditional-statements-and-truthy-values-robust-client-side-javascript
// * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey
// * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey
if (event.ctrlKey || event.shiftKey) {
return;
}Progressive Web Apps on iOS
My Browser - Easy to digest browser details to help you with QA and tech support
This seems like a useful tool to point users to when you need some information about their browser following an error, to make debugging easier. It also seems to be in active development, so new features will be added over time.
Source link:
Awesome Service Workers: a curated collection of resources
The Accessibility of Styled Form Controls & Friends
A repository of styled and “styled” form control patterns, and how they are announced by screen readers.
Why?
Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form controls without having to exclude users who may rely on assistive technology to get things done.