rauchg

From zero to microservice with 𝚫 now

The following guide will show you how to deploy a simple microservice written in JavaScript using 𝚫 now.

It uses Open Source tools that are widely available, tested and understood:

• Node.JS
• NPM
• Express

bomberstudios

This is what Craft does:

function loadFramework(pluginRoot) {
  if (NSClassFromString('PanelsManager') == null) {
    var mocha = [Mocha sharedRuntime];
    return [mocha loadFrameworkWithName:'Panels' inDirectory:pluginRoot];
  } else {
    return true;
 }

Restuta

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

bomberstudios

Using sketchtool to diff your .sketch files using text

Requirements

You need to have SketchTool installed somewhere in your path.

Setup

Add this in your ~/.gitconfig file (for some reason, it won't work in a local .gitconfig file):

jlongster

A lot of people mentioned other immutable JS libraries after reading my post. I thought it would be good to make a list of available ones.

There are two types of immutable libraries: simple helpers for copying JavaScript objects, and actual persistent data structure implementations. My post generally analyzed the tradeoffs between both kinds of libraries and everything applies to the below libraries in either category.

Libraries are sorted by github popularity.

Persistent Data Structures w/structural sharing

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

markdalgleish

import transitions from './transitions.css';

export default () => (
  <ReactCSSTransitionGroup transitionName={transitions}>
    { ... }
  </ReactCSSTransitionGroup>
);

callumlocke

/*
  UPDATED for 2023 - Now much simpler. The old tricks are no longer needed.

  The following code makes an 800×600 canvas that is always as sharp as possible for the device.

  You still draw on it as if it's the logical size (800×600 in this case), but everything just
  looks sharper on high-DPI screens. Regular non-sharp screens are not affected.
*/

const width = 800

ed-lea

class Main extends Layer
	constructor: (options={}) ->
		
		# override Layer default
		options.width ?= 200
		
		# introduce the scaling factor
		# Using Nexus 5 @3x by default
		options.finalScale ?= 3
		

abynim

// Name of layer to copy
var sourceLayerName = "gray_rectangle"

// Ask user to select a Sketch file:
var openDialog = NSOpenPanel.openPanel()
openDialog.setCanChooseFiles(true)
openDialog.setAllowedFileTypes(["sketch"])
openDialog.setCanChooseDirectories(false)
openDialog.setAllowsMultipleSelection(false)
openDialog.setCanCreateDirectories(false)