ichim-david

diff --git a/resources/package.json b/resources/package.json
--- a/resources/package.json
+++ b/resources/package.json
@@ -22,7 +22,8 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
-    "brace": "^0.10.0"
+    "brace": "^0.10.0",
+    "mockup": "git+https://github.com/plone/mockup.git#2.7.2"

ichim-david

.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
} 

ichim-david

// Promise.all is good for executing many promises at once
Promise.all([
  promise1,
  promise2
]);

// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
  if (somethingIsNotRight()) {
    throw new Error("I will be rejected asynchronously!");

ichim-david

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

ichim-david

import React from 'react'
import PropTypes from 'prop-types'

const Heading = ({children, cssClass, level}) => {
  const Tag = `h${level}`

  return <Tag className={cssClass}>{children}</Tag>
}

Heading.propTypes = {

ichim-david

Downloading Shared Files on Google Drive Using Curl

When the shared files on Google Drive is downloaded, it is necessary to change the download method by the file size. The boundary of file size when the method is changed is about 40MB.

File size < 40MB

CURL

filename="### filename ###"
fileid="### file ID ###"
curl -L -o ${filename} "https://drive.google.com/uc?export=download&id=${fileid}"

ichim-david

from . import templates
from guillotina.entrypoint import app as guillo
from starlette.applications import Starlette
from starlette.responses import PlainTextResponse
from starlette.responses import JSONResponse
from guillotina.component import get_utility
from guillotina.interfaces import IApplication
from guillotina.utils.content import get_database
from guillotina.utils.content import navigate_to
from guillotina import task_vars

ichim-david

Plone Content Importer

Background

Reads JSON files (exported using collective.jsonify) and Zexps. It imports them into a Plone 5 site.

Feel free to improve on this. I'm making this available with the hope that guys working on adding easy content import/export to Plone will have something of a working reference.

In your buildout, place your json files in a folder called "content".

ichim-david

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4
• Troubleshooting
  • Tracing broke after an NPM update

Profiling in production

ichim-david

/*  Sometimes it's pretty easy to run ito troubles with React ES6 components.
    Consider the following code: */

class EventStub extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.onResize.bind(this)); //notice .bind
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize.bind(this));