Potherca

The search for a Regex to match BEM CSS class-names

TL;DR

Use this regular expression to match BEM class-names:

^\.[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$

screeny05

(function bemLinter(){
    const namespaces = ['o', 'c', 'u', 's', 't', 'is', 'has'];
    const suffixes = ['xs', 's', 'ms', 'sm', 'md', 'lg', 'l', 'xl', 'print'];

    const SEVERITY_ERROR = 'error';
    const SEVERITY_WARNING = 'warn';
    const SEVERITY_INFO = 'info';

    const ERR_TYPE_STRAY_ELEMENT = 'stray-element';
    const ERR_TYPE_MISSING_NAMESPACE = 'missing-namespace';

mcnamee

# Installation ---
# 1. In Bitbucket, add FTP_USERNAME, FTP_PASSWORD and FTP_HOST as environment variables.
# 2. Commit this file (bitbucket-pipelines.yml) to your repo (in the repo root dir)
# 3. From Bitbucket Cloud > Commits > Commit Number > Run Pipeline > Custom:Init (this will
#    push everything and initialize GitFTP)
#
# Usage ---
# - On each commit to master branch, it'll push all files to the $FTP_HOST
# - You also have the option to 'init' (see 'Installation' above) - pushes everything and initialises
# - Finally you can also 'deploy-all' (from Bitbucket Cloud > Commits > Commit Number > Run Pipeline > Custom:deploy-all)

bastman

Docker - How to cleanup (unused) resources

Once in a while, you may need to cleanup resources (containers, volumes, images, networks) ...

delete volumes

// see: https://github.com/chadoe/docker-cleanup-volumes

$ docker volume rm $(docker volume ls -qf dangling=true)

$ docker volume ls -qf dangling=true | xargs -r docker volume rm

gajus

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

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

bobbygrace

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?

razwan

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

jasny

/**
 * Use em or rem font-size in Bootstrap 3
 */

@font-size-root: 14px;
@font-unit: 0rem; // Pick em or rem here


// Convert all variables to em

donnykurnia

ErrorDocument 503 /index.html

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* /index.html [R=503,L]