omnisis

(* helper functions *)
exception AssertionFailure;
fun println(msg) = print(msg ^ "\n");
fun printStatusWithWidth(label, msg, width) = println("\t- " ^ (StringCvt.padRight #" "  width msg) ^ label);
fun printStatus(label, msg) = printStatusWithWidth(label,msg,80)

fun msg_pass(msg) = printStatus("[ PASS ]", msg);
fun msg_fail(msg) = printStatus("[ FAIL ]", msg);

quchen

13:15 <xQuasar>      | HASKELL IS FOR FUCKIN FAGGOTS. YOU'RE ALL A BUNCH OF 
                     | FUCKIN PUSSIES
13:15 <xQuasar>      | JAVASCRIPT FOR LIFE FAGS
13:16 <luite>        | hello
13:16 <ChongLi>      | somebody has a mental illness!
13:16 <merijn>       | Wow...I suddenly see the error of my ways and feel 
                     | compelled to write Node.js!
13:16 <genisage>     | hi
13:16 <luite>        | you might be pleased to learn that you can compile 
                     | haskell to javascript now

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.

---

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

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

mmrko

// setup.js
import hook from 'css-modules-require-hook'
import sass from 'node-sass'

hook({
  extensions: [ '.scss' ],
  preprocessCss: data => sass.renderSync({ data }).css
})

alekseykulikov

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

• SUIT CSS naming conventions + SUIT CSS design principles;
• PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
• Flexbox is awesome. No need for grid framework;
• Normalize.css, base styles and variables are solid foundation for all components;

dschinkel

/* 
   Tools: mocha, chai-enzyme, jsdom, airbnb enzyme 
   
   Using WebStorm test runner and WebStorm to write code.  
   For the prod code, using Flow for type checking 

   These are isolated unit tests (not integration) that test behavior for particular React components
   
   A big reason why I like React.js vs Vue, Angular, or other types of frameworks or 
   libraries is the simplicity at which you can test behavior.  Also there's no magic going on here in terms of

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.