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

IskenHuang

module.exports = {

  host: process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1',

  // port: process.env.PORT || 1337,
  port: process.env.OPENSHIFT_NODEJS_PORT || 80,

  // environment: process.env.NODE_ENV || 'development'
  // environment: process.env.NODE_ENV || 'production'
  environment: process.env.NODE_ENV || 'development'

mikermcneil

/**
 * An example of how to use a CA certificate in your Sails app.
 * 
 * Would love to see support for the `ca` key on the main ssl config object
 * (if you write it up, please just send the PR to the associations branch so it's easier to merge-- thanks!)
 */

var fs = require('fs');

tschaub

AngularJS Whitespace Guide

The purpose of this style guide is to suggest formatting conventions for AngularJS modules that result in readible, maintainable, and lint free code (see the linter configurations for JSHint and gjslint.py.

All-in-one example

Typically, an AngularJS application would be structured with many modules in separate files. The example below shows a monolithic module to illustrate the formatting conventions for various module methods.

angular.module('module.name', [

kevin-smets

Default

Powerlevel10k

lelandrichardson

(function (ko, handlers, unwrap, extend) {
    "use strict";
    extend(handlers, {
        href: {
            update: function (element, valueAccessor) {
                handlers.attr.update(element, function () {
                    return { href: valueAccessor() };
                });
            }
        },

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

taras-d

React native on VS Emulator and Windows 10

Visual Studio Emulator

1. Download and install emulator - https://www.visualstudio.com/vs/msft-android-emulator/

Android SDK tools

1. Download commandline tools (see bottom of page) - https://developer.android.com/studio/index.html
2. Unzip archive to C:\Program Files (x86)\Android SDK
3. Go to C:\Program Files (x86)\Android SDK\tools\bin and run .\sdkmanager.exe "platform-tools" (it will install adb required by react native)
4. Specify SDK path:

richbai90

import Paper from "@material-ui/core/Paper";
import { withStyles } from "@material-ui/core/styles";
import { graphql } from "react-apollo";
import { compose } from 'recompose';
import getTree from './queries/getTree';
import styles from './styles';

const Canvas = ({
  classes,
  // activeItem,

stevecastaneda

import React, { useState, useContext, useRef } from "react";
import { useOverlayTriggerState } from "@react-stately/overlays";
import { useButton } from "@react-aria/button";
import { Modal } from "components/overlays/Modal";

export function Example() {
  let state = useOverlayTriggerState({});

  function onOpen() {
    state.open();