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

arielsalminen

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

@mixin link-line($shadow, $shadow-context, $color, $position, $size) {
  text-shadow: em(1,$shadow-context) 0 0 $shadow, em(2,$shadow-context) 0 0 $shadow,
               em(3,$shadow-context) 0 0 $shadow, em(-1,$shadow-context) 0 0 $shadow,
               em(-2,$shadow-context) 0 0 $shadow, em(-3,$shadow-context) 0 0 $shadow,

joepie91

"How do I get started with Node?" is a commonly heard question in #Node.js. This gist is an attempt to compile some of the answers to that question. It's a perpetual work-in-progress.

And if this list didn't quite answer your questions, I'm available for tutoring and code review! A donation is also welcome :)

Setting expectations

Before you get started learning about JavaScript and Node.js, there's one very important article you need to read: Teach Yourself Programming in Ten Years.

Understand that it's going to take time to learn Node.js, just like it would take time to learn any other specialized topic - and that you're not going to learn effectively just by reading things, or following tutorials or courses. _Get out there and build things!

wesbos

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {

Avaq

const I  = x => x
const K  = x => y => x
const A  = f => x => f (x)
const T  = x => f => f (x)
const W  = f => x => f (x) (x)
const C  = f => y => x => f (x) (y)
const B  = f => g => x => f (g (x))
const S  = f => g => x => f (x) (g (x))
const S_ = f => g => x => f (g (x)) (x)
const S2 = f => g => h => x => f (g (x)) (h (x))

jfmengels

lodash v4.17.20

Array

• _.chunk
• _.compact
• _.concat

slightlytyler

// Root.js
const Root = () =>
  <Router>
    <Route component={UserScene} path="/users/:userId" />
  </Router>;

export default Root;

// UserDetailsScene.js
const USER_DETAILS_FRAGMENT = gql`

andyrbell

# use ImageMagick convert
# the order is important. the density argument applies to input.pdf and resize and rotate to output.pdf
convert -density 90 input.pdf -rotate 0.5 -attenuate 0.2 +noise Multiplicative -colorspace Gray output.pdf

vcarl

I bundled these up into groups and wrote some thoughts about why I ask them!

If these helped you, I'd love to hear about it!! I'm on twitter @vcarl_ or send me an email [email protected]

Onboarding and the workplace

https://blog.vcarl.com/interview-questions-onboarding-workplace/

• How long will it take to deploy my first change? To become productive? To understand the codebase?
• What kind of equipment will I be provided? Will the company pay/reimburse me if I want something specific?

JoeyBurzynski

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}