threepointone

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

tomma5o

#!/bin/bash

# For use this script copy&paste this in your terminal:
# bash <(curl -s https://gist.githubusercontent.com/tomma5o/302be3dc6e2092743e6049570e102a09/raw/superShell.bash)

OPTIONS="OSX Debian"
SELECTED="null"

echo Where you want to activate zsh?
select opt in $OPTIONS; do

mburakerman

{
  "name": "webpack-sass",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",

joshbuchea

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

lirantal

# Use hyper.is or iTerm2 as terminal emulators

# Install ohmyzsh 
# https://github.com/robbyrussell/oh-my-zsh

# Copy over configs from ~/.bash_profile
# For example, it may have the nvm setup or any aliases like exa=ls and cat=bat

# ~/.hyper.js configuration:
copyOnSelect: true

donmccurdy

Installing Node.js live-server

The NodeJS live-server package runs a temporary server displaying any HTML/CSS/JS resources in the current folder. It automatically reloads the page in your browser when any of these files change.

OS X

• Verify that Node.js is installed. If you see anything when you run which npm in a terminal, it is. If not, follow the instructions at nodejs.org to install.
• Install live-server: npm install -g live-server
• Move your terminal to where your pages live: cd <path-to-content>
• Start the server: live-server .

tracker1

Directory structure for JavaScript/Node Projects

While the following structure is not an absolute requirement or enforced by the tools, it is a recommendation based on what the JavaScript and in particular Node community at large have been following by convention.

Beyond a suggested structure, no tooling recommendations, or sub-module structure is outlined here.

Directories

• lib/ is intended for code that can run as-is
• src/ is intended for code that needs to be manipulated before it can be used

sonnyt

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

var myDiv = document.getElementById('MyDiv');

hasClass(myDiv, 'active');

// OR

tarolandia

@mixin placeholder-color($color) {
  &::-webkit-input-placeholder { /* WebKit browsers */
      color: $color;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: $color;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: $color;
  }

jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso