问:
Unknown custom element in Vuetify
I am new to Vuetify and vue. I am using vue and vuetify but due some reason I am not able open my page.The error I am getting when I run my project:

[Vue warn]: Unknown custom element:  - did you register the
  component correctly? For recursive components, make sure to provide
  the "name" option.

found in

--->  at resources/js/components/appContainer.vue

My code:

```<code>appContainer.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      app
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col class="text-center">
            <v-tooltip left>
              <template v-slot:activator="{ on }">
                <v-btn
                  :href="source"
                  icon
                  large
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-code-tags</v-icon>
                </v-btn>
              </template>
              <span>Source</span>
            </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer
      color="indigo"
      app
    >
      <span class="white--text">© 2019</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    props: {
      source: String,
    },
    data: () => ({
      drawer: null,
    }),
  }
</script>
</code>```

app.js

```<code>require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'

import Vuetify from './plugins/vuetify'

Vue.use(Vuetify);

Vue.component('app-container', require('./components/appContainer.vue').default);

const app = new Vue({
    Vuetify,
    Vue,
    el: '#app',
});
</code>```

spa.blade.php

```<code><!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <app-container></app-container>

    </div>
</body>
</html>
</code>```

vuetify.js

```<code>import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
</code>```

答:
Please make your component name camelcase.
Like Vue.component('appContainer',require('./components/apContainer.vue').default);</p>

Title: Unknown custom element in Vuetify

Body:
I am new to Vuetify and vue. I am using vue and vuetify but due some reason I am not able open my page.The error I am getting when I run my project:

[Vue warn]: Unknown custom element:  - did you register the
  component correctly? For recursive components, make sure to provide
  the "name" option.

found in

--->  at resources/js/components/appContainer.vue

My code:

appContainer.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      app
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col class="text-center">
            <v-tooltip left>
              <template v-slot:activator="{ on }">
                <v-btn
                  :href="source"
                  icon
                  large
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-code-tags</v-icon>
                </v-btn>
              </template>
              Source
            </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer
      color="indigo"
      app
    >
      © 2019
    </v-footer>
  </v-app>
</template>

app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'

import Vuetify from './plugins/vuetify'

Vue.use(Vuetify);

Vue.component('app-container', require('./components/appContainer.vue').default);

const app = new Vue({
    Vuetify,
    Vue,
    el: '#app',
});

spa.blade.php

<!doctype html>
getLocale()) }}">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

        <app-container></app-container>

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)


来源: stackexchange

问:
How to find mapping between page slots and CMS JSON in Spartacus?
I'm new to Hybris and is kicking off a project in Spartacus, and have setup a sample B2C storefront. According to the Spartacus documentation, CMS JSON maps to components in Spartacus, I was wondering how do I find the mapping of the content slots on the DOM with the JSON.

For exampple, in the home page of the sample site the PreHeader, Site Logo, etc slots are populated on the DOM, how do I map these from the CMS JSON? Or am I looking at the wrong sources?

答:
Take a look at the following pages in the Spartacus documentation, they should help:

https://sap.github.io/spartacus-docs/page-layout/

https://sap.github.io/spartacus-docs/creating-pages-and-components/

https://sap.github.io/spartacus-docs/customizing-cms-components/

ContentLicense: CC BY-SA 4.0


问:
Webpack4 does not execute main module to my page entry
When trying to migrate from webpack 3 to 4 some of the entry points generate code that actually does not execute the "main" module of the page.

The following example shows the key parts of the generated code that will loaded using two script tags. One for vendors.js and one for the attached entry las_dlg_projectstatus.js.

The actual code that should be executed is in D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js and should be loaded when loading the module with the id 86 but neither will be loaded/executed when loading the page.

Any help is most appreciated!

```<code>/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    function webpackJsonpCallback(data) {
/******/        var chunkIds = data[0];
/******/        var moreModules = data[1];
/******/        var executeModules = data[2];
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, resolves = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId]) {
/******/                resolves.push(installedChunks[chunkId][0]);
/******/            }
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/                modules[moduleId] = moreModules[moduleId];
/******/            }
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(data);
/******/        while(resolves.length) {
/******/            resolves.shift()();
/******/        }
/******/
/******/        // add entry modules from loaded chunk to deferred list
/******/        deferredModules.push.apply(deferredModules, executeModules || []);
/******/
/******/        // run deferred modules when all chunks ready
/******/        return checkDeferredModules();
/******/    };
/******/    function checkDeferredModules() {
/******/        var result;
/******/        for(var i = 0; i < deferredModules.length; i++) {
/******/            var deferredModule = deferredModules[i];
/******/            var fulfilled = true;
/******/            for(var j = 1; j < deferredModule.length; j++) {
/******/                var depId = deferredModule[j];
/******/                if(installedChunks[depId] !== 0) fulfilled = false;
/******/            }
/******/            if(fulfilled) {
/******/                deferredModules.splice(i--, 1);
/******/                result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/            }
/******/        }
/******/        return result;
/******/    }
/******/
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // object to store loaded and loading chunks
/******/    // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/    // Promise = chunk loading, 0 = chunk loaded
/******/    var installedChunks = {
/******/        "las_dlg_projectstatus": 0
/******/    };
/******/
/******/    // script path function
/******/    function jsonpScriptSrc(chunkId) {
/******/        return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
/******/    }
/******/
/******/    var deferredModules = [];
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/    var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/    jsonpArray.push = webpackJsonpCallback;
/******/    jsonpArray = jsonpArray.slice();
/******/    for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/    var parentJsonpFunction = oldJsonpFunction;
/******/
/******/
/******/    // add entry module to deferred list
/******/    deferredModules.push([86,"vendors",3]);
/******/    // run deferred modules when ready
/******/    return checkDeferredModules();
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/framework/completeness/completeness.js":
/*!****************************************************!*\
  !*** ./src/framework/completeness/completeness.js ***!
  \****************************************************/
/*! exports provided: completnessPercentbar, completnessPercentbarEvent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "completnessPercentbar", function() { return completnessPercentbar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "completnessPercentbarEvent", function() { return completnessPercentbarEvent; });
/* harmony import */ var Source_ODS_ods__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! Source_ODS/ods */ "./src/ods/ods.js");
/* harmony import */ var Source_ODS_convert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Source_ODS/convert */ "./src/ods/convert.js");
/* harmony import */ var Source_ODS_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Source_ODS/ui */ "./src/ods/ui.js");
/* harmony import */ var Source_Framework_backend_jsonData__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! Source_Framework/backend/jsonData */ "./src/framework/backend/jsonData.js");
/* harmony import */ var Source_ODS_ajax__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! Source_ODS/ajax */ "./src/ods/ajax.js");

/* >>>code has been removed to same some space<<< */

/***/ }),

/* >>>most modules have been removed to same some space<<< */

/***/ 86:
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** multi core-js/shim regenerator-runtime/runtime <<<...>>> ./src/modules/las_dlg_projectstatus/index.js ./src/modules/las_dlg_projectstatus/index.styl ./src/modules/las_dlg_projectstatus/widget.js ./src/modules/las_dlg_projectstatus/widget.styl ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! core-js/shim */"./node_modules/core-js/shim.js");
__webpack_require__(/*! regenerator-runtime/runtime */"./node_modules/regenerator-runtime/runtime.js");
/* >>>code has been removed to same some space<<< */
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js */"./src/modules/las_dlg_projectstatus/index.js");
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.styl */"./src/modules/las_dlg_projectstatus/index.styl");
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\widget.js */"./src/modules/las_dlg_projectstatus/widget.js");
module.exports = __webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\widget.styl */"./src/modules/las_dlg_projectstatus/widget.styl");

/***/ })

/******/ });
//# sourceMappingURL=las_dlg_projectstatus.js.map
</code>```

答:
I can't write comment, so let me do it via separated answer.
I had the same issue not with webpack itself, but with webpack-dev-server. Script was frozen under dev-server, noone other webpack builds included this problem.

Script has been added as separate entry point, early vendor's splitting were also configured.

The cause of issue with frozen script stuff was described at the first answer.

So the solution for me was setting ignore vendor cache group for particular chunk:

```<code>...
optimization: {
            splitChunks: {
                minChunks: 1,
                minSize: 30000,
                cacheGroups: {
                    vendor: {
                        name: 'vendor',
                        chunks: (chunk) => chunk.name !== 'organizations',//this line
                        minChunks: 1,
                        test: /[\\/]node_modules[\\/]/,
                        reuseExistingChunk: false
                    }
                }
            }
}
...
</code>```

Hope, someone will find it helpful.

Body:
When trying to migrate from webpack 3 to 4 some of the entry points generate code that actually does not execute the "main" module of the page.

The following example shows the key parts of the generated code that will loaded using two script tags. One for vendors.js and one for the attached entry las_dlg_projectstatus.js.

The actual code that should be executed is in D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js and should be loaded when loading the module with the id 86 but neither will be loaded/executed when loading the page.

Any help is most appreciated!

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    function webpackJsonpCallback(data) {
/******/        var chunkIds = data[0];
/******/        var moreModules = data[1];
/******/        var executeModules = data[2];
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, resolves = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId]) {
/******/                resolves.push(installedChunks[chunkId][0]);
/******/            }
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/                modules[moduleId] = moreModules[moduleId];
/******/            }
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(data);
/******/        while(resolves.length) {
/******/            resolves.shift()();
/******/        }
/******/
/******/        // add entry modules from loaded chunk to deferred list
/******/        deferredModules.push.apply(deferredModules, executeModules || []);
/******/
/******/        // run deferred modules when all chunks ready
/******/        return checkDeferredModules();
/******/    };
/******/    function checkDeferredModules() {
/******/        var result;
/******/        for(var i = 0; i < deferredModules.length; i++) {
/******/            var deferredModule = deferredModules[i];
/******/            var fulfilled = true;
/******/            for(var j = 1; j < deferredModule.length; j++) {
/******/                var depId = deferredModule[j];
/******/                if(installedChunks[depId] !== 0) fulfilled = false;
/******/            }
/******/            if(fulfilled) {
/******/                deferredModules.splice(i--, 1);
/******/                result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/            }
/******/        }
/******/        return result;
/******/    }
/******/
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // object to store loaded and loading chunks
/******/    // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/    // Promise = chunk loading, 0 = chunk loaded
/******/    var installedChunks = {
/******/        "las_dlg_projectstatus": 0
/******/    };
/******/
/******/    // script path function
/******/    function jsonpScriptSrc(chunkId) {
/******/        return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
/******/    }
/******/
/******/    var deferredModules = [];
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/    var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/    jsonpArray.push = webpackJsonpCallback;
/******/    jsonpArray = jsonpArray.slice();
/******/    for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/    var parentJsonpFunction = oldJsonpFunction;
/******/
/******/
/******/    // add entry module to deferred list
/******/    deferredModules.push([86,"vendors",3]);
/******/    // run deferred modules when ready
/******/    return checkDeferredModules();
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/framework/completeness/completeness.js":
/*!****************************************************!*\
  !*** ./src/framework/completeness/completeness.js ***!
  \****************************************************/
/*! exports provided: completnessPercentbar, completnessPercentbarEvent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "completnessPercentbar", function() { return completnessPercentbar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "completnessPercentbarEvent", function() { return completnessPercentbarEvent; });
/* harmony import */ var Source_ODS_ods__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! Source_ODS/ods */ "./src/ods/ods.js");
/* harmony import */ var Source_ODS_convert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Source_ODS/convert */ "./src/ods/convert.js");
/* harmony import */ var Source_ODS_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Source_ODS/ui */ "./src/ods/ui.js");
/* harmony import */ var Source_Framework_backend_jsonData__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! Source_Framework/backend/jsonData */ "./src/framework/backend/jsonData.js");
/* harmony import */ var Source_ODS_ajax__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! Source_ODS/ajax */ "./src/ods/ajax.js");

/* >>>code has been removed to same some space<<< */

/***/ }),

/* >>>most modules have been removed to same some space<<< */

/***/ 86:
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** multi core-js/shim regenerator-runtime/runtime <<<...>>> ./src/modules/las_dlg_projectstatus/index.js ./src/modules/las_dlg_projectstatus/index.styl ./src/modules/las_dlg_projectstatus/widget.js ./src/modules/las_dlg_projectstatus/widget.styl ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! core-js/shim */"./node_modules/core-js/shim.js");
__webpack_require__(/*! regenerator-runtime/runtime */"./node_modules/regenerator-runtime/runtime.js");
/* >>>code has been removed to same some space<<< */
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js */"./src/modules/las_dlg_projectstatus/index.js");
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.styl */"./src/modules/las_dlg_projectstatus/index.styl");
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\widget.js */"./src/modules/las_dlg_projectstatus/widget.js");
module.exports = __webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\widget.styl */"./src/modules/las_dlg_projectstatus/widget.styl");

/***/ })

/******/ });
//# sourceMappingURL=las_dlg_projectstatus.js.map

Body:
I can't write comment, so let me do it via separated answer.
I had the same issue not with webpack itself, but with webpack-dev-server. Script was frozen under dev-server, noone other webpack builds included this problem.

Script has been added as separate entry point, early vendor's splitting were also configured.

The cause of issue with frozen script stuff was described at the first answer.

So the solution for me was setting ignore vendor cache group for particular chunk:

...
optimization: {
            splitChunks: {
                minChunks: 1,
                minSize: 30000,
                cacheGroups: {
                    vendor: {
                        name: 'vendor',
                        chunks: (chunk) => chunk.name !== 'organizations',//this line
                        minChunks: 1,
                        test: /[\\/]node_modules[\\/]/,
                        reuseExistingChunk: false
                    }
                }
            }
}
...

Hope, someone will find it helpful.


问:
Proptypes in React with Typescript component throw error TS 2322
I'm working with TypeScript on React, plus I'm validating props on runtime with PropTypes.
Recently I updated to TypeScript 3.9.3 and since then things are breaking.
Given this interface:

```<code>interface StoryQuestionsProps extends WithMediaProps {
  questionObject: {
    question: string,
    answer: string,
    nid?: string,
    path?: string,
    type?: string,
  },
  children?: JSX.Element | string,
}
</code>```

If I declare these PropTypes:

```<code>StoryQuestions.propTypes = {
  questionObject: PropTypes.shape({
    question: PropTypes.string.isRequired,
    answer: PropTypes.string.isRequired,
    nid: PropTypes.string,
    path: PropTypes.string,
    type: PropTypes.string,
  }).isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]),
}
</code>```

Throws error TS2322:

Type 'Validator; answer: Validator; nid: Requireable; path: Requireable; type: Requireable; }>>' is not assignable to type 'Validator<{ question: string; answer: string; nid?: string | undefined; path?: string | undefined; type?: string | undefined; }>'.   Type 'InferProps<{ question: Validator; answer: Validator; nid: Requireable; path: Requireable; type: Requireable; }>' is not assignable to type '{ question: string; answer: string; nid?: string | undefined; path?: string | undefined; type?: string | undefined; }'.     Types of property 'nid' are incompatible.       Type 'string | null | undefined' is not assignable to type 'string | undefined'.         Type 'null' is not assignable to type 'string | undefined'.

Instead, expecting any type:

```<code>StoryQuestions.propTypes = {
  questionObject: PropTypes.any.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]),
}
</code>```

it doesn't return errors, but this way I would miss the questionObject properties validation. Why propType.shape() is not working?
I've also tried wrapping propTypes.shape() with propTypes.objectOf(PropTypes.shape( ... )) but has no effect.

答:
While propTypes are an excellent tool, there is no need to use propTypes when you are working with TypeScript and React. You can simply replace the propTypes with interfaces or type aliases for your component's props.

Once you have defined the interfaces, you can safely remove the propTypes from your components. You may want to do it incrementally and test it out properly in case you break anything.

That being said, I do not see any issues with the way StoryQuestionsProps is defined.

Body:
I'm working with TypeScript on React, plus I'm validating props on runtime with PropTypes.
Recently I updated to TypeScript 3.9.3 and since then things are breaking.
Given this interface:

interface StoryQuestionsProps extends WithMediaProps {
  questionObject: {
    question: string,
    answer: string,
    nid?: string,
    path?: string,
    type?: string,
  },
  children?: JSX.Element | string,
}

If I declare these PropTypes:

StoryQuestions.propTypes = {
  questionObject: PropTypes.shape({
    question: PropTypes.string.isRequired,
    answer: PropTypes.string.isRequired,
    nid: PropTypes.string,
    path: PropTypes.string,
    type: PropTypes.string,
  }).isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]),
}

Throws error TS2322:

Type 'Validator; answer: Validator; nid: Requireable; path: Requireable; type: Requireable; }>>' is not assignable to type 'Validator<{ question: string; answer: string; nid?: string | undefined; path?: string | undefined; type?: string | undefined; }>'.   Type 'InferProps<{ question: Validator; answer: Validator; nid: Requireable; path: Requireable; type: Requireable; }>' is not assignable to type '{ question: string; answer: string; nid?: string | undefined; path?: string | undefined; type?: string | undefined; }'.     Types of property 'nid' are incompatible.       Type 'string | null | undefined' is not assignable to type 'string | undefined'.         Type 'null' is not assignable to type 'string | undefined'.

Instead, expecting any type:

StoryQuestions.propTypes = {
  questionObject: PropTypes.any.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]),
}

it doesn't return errors, but this way I would miss the questionObject properties validation. Why propType.shape() is not working?
I've also tried wrapping propTypes.shape() with propTypes.objectOf(PropTypes.shape( ... )) but has no effect.


问:
sending data with a python socket isnt the same as netcat - buffer overflow
I am trying to practice buffer overflow using dostackbufferoverflowgood.exe and I encountered a problem.

While using netcat to send 5000 A's by using the command echo `python3 -c "print('A'*146 + 'BBBB')"` | nc 192.168.1.237 31337 the program is crashing and the value of EIP is 42424242, so that's good.

When trying to do the same thing with a python script, nothing is happening, and I tried debugging it for a while including using python2, wiresharking but all seems the same both on client and the server, except that the server isn't replying, which is weird but it is replying to nc, so it must be something with the python script.

python script:

```<code>import socket
server = '192.168.1.237'
port = 31337

data = b'A'*146 + b'B'*4
print(len(data))
print(data)
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
    print(f'trying to connect to {server}')
    s.connect((server,port))
    s.send(data)
    print('data was sent')

    data = s.recv(1024)
    print(data)

</code>```

Again, when capturing wireshark everything seems to be the same, so I have no idea why this is happening.

If someone encountered anything like that, would appreciate any help, thank you!

答:
I think you should put '\n\r' at the end of data.

The code should be like:

```<code>s.send(data +'\n\r')
</code>```

Body:
I am trying to practice buffer overflow using dostackbufferoverflowgood.exe and I encountered a problem.

While using netcat to send 5000 A's by using the command echo `python3 -c "print('A'*146 + 'BBBB')"` | nc 192.168.1.237 31337 the program is crashing and the value of EIP is 42424242, so that's good.

When trying to do the same thing with a python script, nothing is happening, and I tried debugging it for a while including using python2, wiresharking but all seems the same both on client and the server, except that the server isn't replying, which is weird but it is replying to nc, so it must be something with the python script.

python script:

import socket
server = '192.168.1.237'
port = 31337

data = b'A'*146 + b'B'*4
print(len(data))
print(data)
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
    print(f'trying to connect to {server}')
    s.connect((server,port))
    s.send(data)
    print('data was sent')

    data = s.recv(1024)
    print(data)

Again, when capturing wireshark everything seems to be the same, so I have no idea why this is happening.

If someone encountered anything like that, would appreciate any help, thank you!

Body:
I think you should put '\n\r' at the end of data.

The code should be like:

s.send(data +'\n\r')


问:
What happens to an Android thread after the Activity that created it is destroyed?
In my Android app, the main Activity will sometimes start a Thread to load data from a server.  This thread modifies the app's database and edits some important files.  AFAIK, it would appear that this thread continues to execute.  What will happen to this thread if the Android gets into a low memory situation and decides to kill the entire Application?  Will there ever be a situation were this thread might die prematurely?  If so, is there any way I can see that the thread is being killed, and do something about it?

I'm asking because this thread modifies important data in the database, and if it is suddenly killed, the application could stop functioning properly.

答: It sounds like you should move the db updating to a Service. Once an Activity goes to the background, Android assumes its process can be killed off if necessary and restarted later without ill effect. See Application Fundamentals for more info.</p>

ContentLicense: CC BY-SA 3.0


问:
Pillow - Transparency over non-transparent image with paste
Let me prefix with a disclaimer that I am clueless when it comes to imaging/graphics all together, so maybe I'm lacking a fundamental understanding with something here.

I'm trying to paste an image (game_image) to my base image (image) with a transparent overlay (overlay_image) over top to add some darkening for the text.

Here's an example of the expected result:

Here's an example of what my current code generates:

Here is my current code:

from PIL import Image, ImageFont, ImageDraw

# base image sizing specific to Twitter recommended
base_image_size = (1600, 900)
base_image_mode = "RGBA"
base_image_background_color = (0, 52, 66)

image = Image.new(base_image_mode, base_image_size, base_image_background_color)

# game_image is the box art image on the left side of the card
game_image = Image.open("hunt.jpg")
image.paste(game_image)

# overlay_image is the darkened overlay over the left side of the card
overlay_image = Image.new(base_image_mode, base_image_size, (0, 0, 0))
overlay_image.putalpha(128)

# x position should be negative 50% of base canvas size
image.paste(overlay_image, (-800, 0), overlay_image)
image.save("test_image.png", format="PNG")
```

You can see that the game image sort of inherits the transparency from the overlay. I suspect it has something to do with the mask added in my paste above, but I tried looking into what masking is & its just beyond my understanding in any context I find it in.

Any help on understanding why this occurs and/or how I can resolve is appreciated!

答:
You are super close... All you need, is to use Image.alpha_composite instead of paste. So, the last two lines of your code should be:

```<code>image = Image.alpha_composite(image, overlay_image)
image.save("test_image.png", format="PNG")
</code>```

Body:
Let me prefix with a disclaimer that I am clueless when it comes to imaging/graphics all together, so maybe I'm lacking a fundamental understanding with something here.

I'm trying to paste an image (game_image) to my base image (image) with a transparent overlay (overlay_image) over top to add some darkening for the text.

Here's an example of the expected result:

Here's an example of what my current code generates:

Here is my current code:

from PIL import Image, ImageFont, ImageDraw

# base image sizing specific to Twitter recommended
base_image_size = (1600, 900)
base_image_mode = "RGBA"
base_image_background_color = (0, 52, 66)

image = Image.new(base_image_mode, base_image_size, base_image_background_color)

# game_image is the box art image on the left side of the card
game_image = Image.open("hunt.jpg")
image.paste(game_image)

# overlay_image is the darkened overlay over the left side of the card
overlay_image = Image.new(base_image_mode, base_image_size, (0, 0, 0))
overlay_image.putalpha(128)

# x position should be negative 50% of base canvas size
image.paste(overlay_image, (-800, 0), overlay_image)
image.save("test_image.png", format="PNG")

You can see that the game image sort of inherits the transparency from the overlay. I suspect it has something to do with the mask added in my paste above, but I tried looking into what masking is & its just beyond my understanding in any context I find it in.

Any help on understanding why this occurs and/or how I can resolve is appreciated!

Body:
You are super close... All you need, is to use Image.alpha_composite instead of paste. So, the last two lines of your code should be:

image = Image.alpha_composite(image, overlay_image)
image.save("test_image.png", format="PNG")


问:
time complexity of if else statement c#
Which of the following two is more efficient from a processing / time complexity point - sorry just trying to get my head round time complexity and potential impact on computer processing time:

Option 1

```<code>if (condition1) {
  function1();
  function2();
}
else {
  function3();
}
</code>```

Option 2

```<code>if (condition1) {
  function1();
}
else {
  function3();
}

if (condition1) {
  function2();
}
else {
  function3();
}
</code>```

Assuming function1() and function2() are both O(N), I think both option 1 and option 2 are O(N) time complexity. However if we could measure how quick both options run on the same computer, would option 1 be quicker or will there be minimal difference?

Thanks!

答:
Option 2 cannot be faster than Option 1 since it is doing strictly at least as much work to figure out which functions to call. Note also that Option 2 results in two calls to function3 when condition1 is false, so in that case it's doing twice as much work (assuming the function is doing much more work than the snippets shown, which just figure out which functions to call).

In practice, these will probably have exactly the same performance (ignoring the repeated call to function3) because an optimizing compiler will recognize the opportunity to render binary code for option 2 that looks a lot more like what you'd expect for option 1. In the absence of optimizations, you're looking at one more conditional branch, which I think under reasonably assumptions could safely be characterized as being a minimal amount of extra overhead. Now, if this were in a tight loop, optimizations were turned off and condition1 were virtually always false, then maybe you'd see more of an issue (due to many missed branch predictions interrupting the pipeline) but I doubt it.

Title: time complexity of if else statement c#

Body:
Which of the following two is more efficient from a processing / time complexity point - sorry just trying to get my head round time complexity and potential impact on computer processing time:

Option 1

if (condition1) {
  function1();
  function2();
}
else {
  function3();
}

Option 2

if (condition1) {
  function1();
}
else {
  function3();
}

if (condition1) {
  function2();
}
else {
  function3();
}

Assuming function1() and function2() are both O(N), I think both option 1 and option 2 are O(N) time complexity. However if we could measure how quick both options run on the same computer, would option 1 be quicker or will there be minimal difference?

Thanks!


问:
Interface callback between fragments for android's navigation architecture library (nav_graph)
So when I was using a frameLayout to swap fragments with fragment manager i could do something like this to send arguments to the new pushed fragment

```<code>class TestFragment : GenericFragment(R.layout.test_fragment) {

    private var arg1: Int = 0
    private lateinit var onResult : ( () -> Unit )

    companion object {
        fun newInstance(arg1 : Int, onResult: ( () -> Unit )) = TestFragment().apply {
            this.arg1 = arg1
            this.onResult = onResult
        }
    }
}

frag = TestFragment.newInstance(1) {
    //some stuff to do when finished
}

val transaction = supportFragmentManager.beginTransaction()
transaction.replace(content.id, frag, tag)
transaction.commitAllowingStateLoss()
</code>```

The question is how do I do this with the arch navigation components (android.arch.navigation:navigation). I found that you could only send primitive types or some types of Serializable.

答:
One method to do this would be to use a Shared View Model in combination with Live data between these 2 fragments.

```<code>sharedViewModel = ViewModelProviders.of(this.getActivity()).get(SharedViewModel::class.java)
</code>```

Another option would be to use FragmentManager.BackStackEntry
I haven't tried this one. You can find more here https://developer.android.com/reference/android/app/FragmentManager.BackStackEntry

Body:
So when I was using a frameLayout to swap fragments with fragment manager i could do something like this to send arguments to the new pushed fragment

class TestFragment : GenericFragment(R.layout.test_fragment) {

    private var arg1: Int = 0
    private lateinit var onResult : ( () -> Unit )

    companion object {
        fun newInstance(arg1 : Int, onResult: ( () -> Unit )) = TestFragment().apply {
            this.arg1 = arg1
            this.onResult = onResult
        }
    }
}

frag = TestFragment.newInstance(1) {
    //some stuff to do when finished
}

val transaction = supportFragmentManager.beginTransaction()
transaction.replace(content.id, frag, tag)
transaction.commitAllowingStateLoss()

The question is how do I do this with the arch navigation components (android.arch.navigation:navigation). I found that you could only send primitive types or some types of Serializable.

Body:
One method to do this would be to use a Shared View Model in combination with Live data between these 2 fragments.

sharedViewModel = ViewModelProviders.of(this.getActivity()).get(SharedViewModel::class.java)

Another option would be to use FragmentManager.BackStackEntry
I haven't tried this one. You can find more here https://developer.android.com/reference/android/app/FragmentManager.BackStackEntry


问:
GraalVM javafx.fxml.LoadException: Error resolving onAction='#loginAction', either the event handler is not in the Namespace
I'm running into an error running the native image produced by GraalVM (latest GraalVM built on JDK 11) via the Gluon Client Plugin.

javafx.fxml.LoadException: Error resolving onAction='#loginAction', either the event handler is not in the Namespace or there is an error in the script. fxml/LoginScreen.fxml:17

The compililation step works fine:

mvn clean client:build

I see the binary in a folder called "projectname/target/client/x86_64-linux/binaryname"

The above error produced when I run the executable via "./binaryname"

The FXML line of code which its complaining about on line 17 is:

```<code><Button fx:id="_loginButton" layoutX="516.0" layoutY="174.0" mnemonicParsing="false" onAction="#loginAction" prefHeight="28.0" prefWidth="94.0" text="Login" />
</code>```

The backing code logic are as follows and marked with @FXML:

```<code>@FXML
void loginAction(ActionEvent event) throws InterruptedException {

    LoginService loginservice = new LoginService(_usernameTextField.getText(), _passwordTextField.getText());
</code>```

According to a JavaFX common errors list the problem is usually because the onAction event does not have the same name as specified in the controller - Introduction to JavaFX
for Beginner Programmers - Pg 27 . However this is not the case, my program's naming is accurate. Using the JavaFX maven plugin (seperate from the GluonClient) using

maven javafx:run

the program starts up correctly and works as expected. If I need to post more information, please let me know.

Here is my pom.xml (I only replaced only the name of my package below)

```<code><project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.demo</groupId>
<artifactId>com-demo-management-ui</artifactId>
<version>0.0.1-SNAPSHOT</version>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>11</maven.compiler.source>
    <maven.compiler.target>11</maven.compiler.target>
    <client.plugin.version>0.1.26</client.plugin.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>11</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.openjfx/javafx-fxml -->
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-fxml</artifactId>
        <version>11</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>4.5.12</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.8.6</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.6</version>
    </dependency>
</dependencies>
<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.8.1</version>
            <configuration>
                <release>11</release>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>0.0.3</version>
            <configuration>
                <mainClass>com.demo.Launcher</mainClass>
            </configuration>
        </plugin>
        <plugin>
            <groupId>com.gluonhq</groupId>
            <artifactId>client-maven-plugin</artifactId>
            <version>${client.plugin.version}</version>
            <configuration>
                <!-- Uncomment to run on iOS: -->
                <!-- <target>ios</target> -->
                <mainClass>com.demo.Launcher</mainClass>
                <graalvmHome>/opt/graalvm-ce-java11-20.2.0-dev/</graalvmHome>
            </configuration>
        </plugin>
    </plugins>
</build>

<pluginRepositories>
    <pluginRepository>
        <id>gluon-releases</id>
        <url>http://nexus.gluonhq.com/nexus/content/repositories/releases/</url>
    </pluginRepository>
</pluginRepositories>
</code>```

And finally, here is the code where I set the controller (This is a method call, which I exchange my views as I need them, thus controller is passed as an argument in the creating a view):

```<code>        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/fxml/"+baseController.getFxmlFile()));
        fxmlLoader.setController(baseController);
        Parent parent =  fxmlLoader.load();
        Scene scene = new Scene(parent);
        Stage stage = new Stage();
        stage.setFullScreen(fullScreen);
        stage.setMaximized(setMaximized);
        stage.setScene(scene);
        stage.show();
</code>```

答:
If you have a look at HelloFXML sample in the Client samples repository, you will see it uses the typical FXML file with a controller:

```<code><AnchorPane fx:id="pane" ... fx:controller="hellofx.HelloController">
</code>```

In your case, you don't have the controller in the FXML file, but you provide it like:

```<code>fxmlLoader.setController(new hellofx.HelloController());
</code>```

As you know, the FXMLLoader uses reflection to instantiate controller, controls and methods that are found while parsing the FXML file.

Either way, when you click the button that triggers the loginAction method, the FXMLLoader process that with this call:

```<code>MethodHelper.invoke(method, controller, params);
</code>```

that uses reflection to handle such event.

With GraalVM, reflection is an issue, and you have to "help" it a little bit, by providing the classes/methods/fields that are going to be used reflectively at some point. Find more about it here.

The Client plugin already takes care for you of adding the JavaFX core classes and methods. You can see what's added in target/client/x86_64-darwin/gvm/reflectionconfig-x86_64-darwin.json.

However, your custom classes have to be added to that file. There are two ways you can do that:

As in HelloFXML, via configuration/reflectionList, you will provide the custom class/es that will be used reflectively:

```<code><plugin>
    <groupId>com.gluonhq</groupId>
    <artifactId>client-maven-plugin</artifactId>
    <version>${client.plugin.version}</version>
    <configuration>
          <reflectionList>
               <list>hellofx.HelloController</list>   <!-- your custom classes -->
          </reflectionList>
          <mainClass>${mainClassName}</mainClass>
    </configuration>
</plugin>
</code>```

This has the effect of opening all class methods/fields to reflection. You will see the result in the json file as:

```<code>  {
    "name" : "hellofx.HelloController",
    "allDeclaredConstructors" : true,
    "allPublicConstructors" : true,
    "allDeclaredFields" : true,
    "allPublicFields" : true,
    "allDeclaredMethods" : true,
    "allPublicMethods" : true
  }
...
</code>```

This should be enough to fix your issue.

Via config files. As you can read in the Client's documentation, you can add a config file (reflectionconfig.json) to META-INF/substrate/config instead:

```<code>[
  {
    "name":"hellofx.HelloController",
    "methods":[{"name":"loginAction","parameterTypes":["javafx.event.ActionEvent"] }]
  }
]
</code>```

This will fix it as well. Of course, it might require adding other methods you have in the controller too (like initialize).

This will open to reflection only this method, so it has a lower impact in memory footprint, and follows what the plugin does with the JavaFX core classes.

Body:
I'm running into an error running the native image produced by GraalVM (latest GraalVM built on JDK 11) via the Gluon Client Plugin.

javafx.fxml.LoadException: Error resolving onAction='#loginAction', either the event handler is not in the Namespace or there is an error in the script. fxml/LoginScreen.fxml:17

The compililation step works fine:

mvn clean client:build

I see the binary in a folder called "projectname/target/client/x86_64-linux/binaryname"

The above error produced when I run the executable via "./binaryname"

The FXML line of code which its complaining about on line 17 is:

<Button fx:id="_loginButton" layoutX="516.0" layoutY="174.0" mnemonicParsing="false" onAction="#loginAction" prefHeight="28.0" prefWidth="94.0" text="Login" />

The backing code logic are as follows and marked with @FXML:

@FXML
void loginAction(ActionEvent event) throws InterruptedException {

    LoginService loginservice = new LoginService(_usernameTextField.getText(), _passwordTextField.getText());

According to a JavaFX common errors list the problem is usually because the onAction event does not have the same name as specified in the controller - Introduction to JavaFX
for Beginner Programmers - Pg 27 . However this is not the case, my program's naming is accurate. Using the JavaFX maven plugin (seperate from the GluonClient) using

maven javafx:run

the program starts up correctly and works as expected. If I need to post more information, please let me know.

Here is my pom.xml (I only replaced only the name of my package below)

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.demo</groupId>
<artifactId>com-demo-management-ui</artifactId>
<version>0.0.1-SNAPSHOT</version>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>11</maven.compiler.source>
    <maven.compiler.target>11</maven.compiler.target>
    <client.plugin.version>0.1.26</client.plugin.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>11</version>
    </dependency>

    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-fxml</artifactId>
        <version>11</version>
    </dependency>

    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>4.5.12</version>
    </dependency>

    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.8.6</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.6</version>
    </dependency>
</dependencies>
<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.8.1</version>
            <configuration>
                <release>11</release>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>0.0.3</version>
            <configuration>
                <mainClass>com.demo.Launcher</mainClass>
            </configuration>
        </plugin>
        <plugin>
            <groupId>com.gluonhq</groupId>
            <artifactId>client-maven-plugin</artifactId>
            <version>${client.plugin.version}</version>
            <configuration>

                <mainClass>com.demo.Launcher</mainClass>
                <graalvmHome>/opt/graalvm-ce-java11-20.2.0-dev/</graalvmHome>
            </configuration>
        </plugin>
    </plugins>
</build>

<pluginRepositories>
    <pluginRepository>
        <id>gluon-releases</id>
        <url>http://nexus.gluonhq.com/nexus/content/repositories/releases/</url>
    </pluginRepository>
</pluginRepositories>

And finally, here is the code where I set the controller (This is a method call, which I exchange my views as I need them, thus controller is passed as an argument in the creating a view):

        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/fxml/"+baseController.getFxmlFile()));
        fxmlLoader.setController(baseController);
        Parent parent =  fxmlLoader.load();
        Scene scene = new Scene(parent);
        Stage stage = new Stage();
        stage.setFullScreen(fullScreen);
        stage.setMaximized(setMaximized);
        stage.setScene(scene);
        stage.show();

Body:
If you have a look at HelloFXML sample in the Client samples repository, you will see it uses the typical FXML file with a controller:

<AnchorPane fx:id="pane" ... fx:controller="hellofx.HelloController">

In your case, you don't have the controller in the FXML file, but you provide it like:

fxmlLoader.setController(new hellofx.HelloController());

As you know, the FXMLLoader uses reflection to instantiate controller, controls and methods that are found while parsing the FXML file.

Either way, when you click the button that triggers the loginAction method, the FXMLLoader process that with this call:

MethodHelper.invoke(method, controller, params);

that uses reflection to handle such event.

With GraalVM, reflection is an issue, and you have to "help" it a little bit, by providing the classes/methods/fields that are going to be used reflectively at some point. Find more about it here.

The Client plugin already takes care for you of adding the JavaFX core classes and methods. You can see what's added in target/client/x86_64-darwin/gvm/reflectionconfig-x86_64-darwin.json.

However, your custom classes have to be added to that file. There are two ways you can do that:

As in HelloFXML, via configuration/reflectionList, you will provide the custom class/es that will be used reflectively:

<plugin>
    <groupId>com.gluonhq</groupId>
    <artifactId>client-maven-plugin</artifactId>
    <version>${client.plugin.version}</version>
    <configuration>
          <reflectionList>
               <list>hellofx.HelloController</list>   <!-- your custom classes -->
          </reflectionList>
          <mainClass>${mainClassName}</mainClass>
    </configuration>
</plugin>

This has the effect of opening all class methods/fields to reflection. You will see the result in the json file as:

  {
    "name" : "hellofx.HelloController",
    "allDeclaredConstructors" : true,
    "allPublicConstructors" : true,
    "allDeclaredFields" : true,
    "allPublicFields" : true,
    "allDeclaredMethods" : true,
    "allPublicMethods" : true
  }
...

This should be enough to fix your issue.

Via config files. As you can read in the Client's documentation, you can add a config file (reflectionconfig.json) to META-INF/substrate/config instead:

[
  {
    "name":"hellofx.HelloController",
    "methods":[{"name":"loginAction","parameterTypes":["javafx.event.ActionEvent"] }]
  }
]

This will fix it as well. Of course, it might require adding other methods you have in the controller too (like initialize).

This will open to reflection only this method, so it has a lower impact in memory footprint, and follows what the plugin does with the JavaFX core classes.


问:
How to find the highest number of passenger of all round?
im a new problem solver. recently i came across this problem on codeforces website. i managed to get the two values required for each turn depending on the number of turn given by the user, but i cant find the highest number of passenger at stop out of all.</p>

```<code>#include <iostream>
#include<cstring>
#include<algorithm>
using namespace std;
int main()
{
    int turn,get_off,get_on,total_passenger,highest_total;
    cin>>turn;
    int* stops=new int(turn);
    for(int i=0;i<turn;i++){
        cin>>get_off>>get_on;
        total_passenger=get_on-get_off;
        stops[i]=total_passenger;
    }
    for(int i=0;i<turn;i++){
        if(stops[i]>stops[i+1]){
            highest_total=stops[i];
        }
    }
    cout<<highest_total<<endl;
    return 0;
}
</code>```

答:
Firstly: int* stops=new int(turn); initializes a pointer to a new int with the value turn. See int a = 0 and int a(0) differences

Instead you should either use int* stops=new int[turn];, read about when you should use new here: When should I use the new keyword in C++?. An important note is that you have to delete the variable in order to avoid a Memory leak.

Or (which I would say is the case you should use in this scenario), int stops[turn];.
Besides that I can not argue with your logic since I believe this is not a forum to help you solve code, although the syntax seems correct.

I would recommend reading Why is "using namespace std;" considered bad practice? if you are interested in learning C++ though.

Body:
im a new problem solver. recently i came across this problem on codeforces website. i managed to get the two values required for each turn depending on the number of turn given by the user, but i cant find the highest number of passenger at stop out of all.

#include <iostream>
#include<cstring>
#include<algorithm>
using namespace std;
int main()
{
    int turn,get_off,get_on,total_passenger,highest_total;
    cin>>turn;
    int* stops=new int(turn);
    for(int i=0;i<turn;i++){
        cin>>get_off>>get_on;
        total_passenger=get_on-get_off;
        stops[i]=total_passenger;
    }
    for(int i=0;i<turn;i++){
        if(stops[i]>stops[i+1]){
            highest_total=stops[i];
        }
    }
    cout<<highest_total<<endl;
    return 0;
}


问:
Mapping Apple podcast episode id to rss feed element
I'm trying to map Apple podcast's episode id to that specific podcast entry in RSS feed. Say I have the episode with the following link https://podcasts.apple.com/us/podcast/the-numberphile-podcast/id1441474794?i=1000475383420 so the podcast_id=1441474794 and episode_id=1000475383420. Now I'm able to get the RSS feed with podcast id through this code:

```<code>from urllib.request import urlopen
import json
import xmltodict

podcast_id = "1441474794"
ITUNES_URL = 'https://itunes.apple.com/lookup?id='
with urlopen(ITUNES_URL + podcast_id) as response:
    res = json.load(response)
    feedUrl = res['results'][0]['feedUrl']
    print(feedUrl)

with urlopen(feedUrl) as response:
    res = xmltodict.parse(response)

with open('res.json', "w") as f:
    f.write(json.dumps(res))
</code>```

This gives me a JSON with some general info about the podcast and an array with all the episodes. For a specific episode the result looks like this:

```<code>"item": [
        {
          "title": "The Parker Quiz - with Matt Parker",
          "dc:creator": "Brady Haran",
          "pubDate": "Thu, 21 May 2020 16:59:08 +0000",
          "link": "https://www.numberphile.com/podcast/matt-parker-quiz",
          "guid": {
            "@isPermaLink": "false",
            "#text": "5b2cf993266c07b1ca7a812f:5bd2f1a04785d353e1b39d76:5ec683354f70a700f9f04555"
          },
          "description": "some description here...",
          "itunes:author": "Numberphile Podcast",
          "itunes:subtitle": "Matt Parker takes a quiz prepared by Brady. The YouTube version of this quiz contains a few visuals at https://youtu.be/hMwQwppzrys",
          "itunes:explicit": "no",
          "itunes:duration": "00:55:34",
          "itunes:image": {
            "@href": "https://images.squarespace-cdn.com/content/5b2cf993266c07b1ca7a812f/1541821254439-PW3116VHYDC1Y3V7GI0A/podcast_square2_2000x2000.jpg?format=1500w&content-type=image%2Fjpeg"
          },
          "itunes:title": "The Parker Quiz - with Matt Parker",
          "enclosure": {
            "@url": "https://traffic.libsyn.com/secure/numberphile/numberphile_parker_quiz.mp3",
            "@type": "audio/mpeg"
          },
          "media:content": {
            "@url": "https://traffic.libsyn.com/secure/numberphile/numberphile_parker_quiz.mp3",
            "@type": "audio/mpeg",
            "@isDefault": "true",
            "@medium": "audio",
            "media:title": {
              "@type": "plain",
              "#text": "The Parker Quiz - with Matt Parker"
            }
          }
        },
...]
</code>```

The episode_id=1000475383420 doesn't appear anywhere in the RSS feed response so there is no way to find which episode corresponds to this id. Is there a clean way to find the episode by id? For example an Apple api call with episode id which will give me info about the episode and then I can match the info with RSS feed entry.

答:
The element/tag that is supposed to uniquely identify an episode in a podcast RSS feed is:

<guid>

Here is some related info from the Apple Podcasts Connect Guide to RSS that might be helpful.

If you can get a hold of the <guid> then you can access the episode from the feed.

A less reliable option would be to try the <link> tag for the episode. On that URL that you provided, there is a link down toward the end of the page that is named 'Episode Website'

That may also get you a unique key to the episode in the RSS feed. But it may not work as you would expect in all cases. i.e. say the creator/publisher of the podcast RSS simply just put the same URL in each episode instead of a unique URL per episode.

Body:
I'm trying to map Apple podcast's episode id to that specific podcast entry in RSS feed. Say I have the episode with the following link https://podcasts.apple.com/us/podcast/the-numberphile-podcast/id1441474794?i=1000475383420 so the podcast_id=1441474794 and episode_id=1000475383420. Now I'm able to get the RSS feed with podcast id through this code:

from urllib.request import urlopen
import json
import xmltodict

podcast_id = "1441474794"
ITUNES_URL = 'https://itunes.apple.com/lookup?id='
with urlopen(ITUNES_URL + podcast_id) as response:
    res = json.load(response)
    feedUrl = res['results'][0]['feedUrl']
    print(feedUrl)

with urlopen(feedUrl) as response:
    res = xmltodict.parse(response)

with open('res.json', "w") as f:
    f.write(json.dumps(res))

This gives me a JSON with some general info about the podcast and an array with all the episodes. For a specific episode the result looks like this:

"item": [
        {
          "title": "The Parker Quiz - with Matt Parker",
          "dc:creator": "Brady Haran",
          "pubDate": "Thu, 21 May 2020 16:59:08 +0000",
          "link": "https://www.numberphile.com/podcast/matt-parker-quiz",
          "guid": {
            "@isPermaLink": "false",
            "#text": "5b2cf993266c07b1ca7a812f:5bd2f1a04785d353e1b39d76:5ec683354f70a700f9f04555"
          },
          "description": "some description here...",
          "itunes:author": "Numberphile Podcast",
          "itunes:subtitle": "Matt Parker takes a quiz prepared by Brady. The YouTube version of this quiz contains a few visuals at https://youtu.be/hMwQwppzrys",
          "itunes:explicit": "no",
          "itunes:duration": "00:55:34",
          "itunes:image": {
            "@href": "https://images.squarespace-cdn.com/content/5b2cf993266c07b1ca7a812f/1541821254439-PW3116VHYDC1Y3V7GI0A/podcast_square2_2000x2000.jpg?format=1500w&content-type=image%2Fjpeg"
          },
          "itunes:title": "The Parker Quiz - with Matt Parker",
          "enclosure": {
            "@url": "https://traffic.libsyn.com/secure/numberphile/numberphile_parker_quiz.mp3",
            "@type": "audio/mpeg"
          },
          "media:content": {
            "@url": "https://traffic.libsyn.com/secure/numberphile/numberphile_parker_quiz.mp3",
            "@type": "audio/mpeg",
            "@isDefault": "true",
            "@medium": "audio",
            "media:title": {
              "@type": "plain",
              "#text": "The Parker Quiz - with Matt Parker"
            }
          }
        },
...]

The episode_id=1000475383420 doesn't appear anywhere in the RSS feed response so there is no way to find which episode corresponds to this id. Is there a clean way to find the episode by id? For example an Apple api call with episode id which will give me info about the episode and then I can match the info with RSS feed entry.


问:
UML help C# Design Principles
I have a problem understanding an UML below:

Specifically, what is the relationship between PersistentSet and ThirdPartyPersistentSet?
What is the relationship between PersistentObject and ThirdPartyPersistentSet?

Please note that the UML is from Agile Principles, Patterns, and Practices in C#
By Martin C. Robert, Martin Micah 2006. Chapter 10

Thanks in advance!

答:
Specifically, what is the relationship between PersistentSet and ThirdPartyPersistentSet?

http://en.wikipedia.org/wiki/Class_diagram#Aggregation

What is the relationship between PersistentObject and ThirdPartyPersistentSet?

http://en.wikipedia.org/wiki/Class_diagram#Dependency

Title: UML help C# Design Principles


问:
How do we call this type of navigation tab menu
How do we call this tab menu with the next and preview option and also is there any material-ui component of it

答:
As per the comment, I have prepared an example for scrollable tab using material ui. Please have a look.

```<code>import React from 'react';
import PropTypes from 'prop-types';
import {makeStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

function TabPanel(props) {
    const {children, value, index, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`scrollable-auto-tabpanel-${index}`}
            aria-labelledby={`scrollable-auto-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={3}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `scrollable-auto-tab-${index}`,
        'aria-controls': `scrollable-auto-tabpanel-${index}`,
    };
}

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        width: '100%',
        backgroundColor: theme.palette.background.paper,
    },
}));

export default function ScrollableTabsButtonAuto() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <div className={classes.root}>
            <AppBar position="static" color="default">
                <Tabs
                    value={value}
                    onChange={handleChange}
                    indicatorColor="primary"
                    textColor="primary"
                    variant="scrollable"
                    scrollButtons="auto"
                    aria-label="scrollable auto tabs example"
                >
                    <Tab label="Item One" {...a11yProps(0)} />
                    <Tab label="Item Two" {...a11yProps(1)} />
                    <Tab label="Item Three" {...a11yProps(2)} />
                    <Tab label="Item Four" {...a11yProps(3)} />
                    <Tab label="Item Five" {...a11yProps(4)} />
                    <Tab label="Item Six" {...a11yProps(5)} />
                    <Tab label="Item Seven" {...a11yProps(6)} />
                    <Tab label="Item Eight" {...a11yProps(7)} />
                    <Tab label="Item Nine" {...a11yProps(8)} />
                    <Tab label="Item Ten" {...a11yProps(9)} />
                </Tabs>
            </AppBar>
            <TabPanel value={value} index={0}>
                Item One
            </TabPanel>
            <TabPanel value={value} index={1}>
                Item Two
            </TabPanel>
            <TabPanel value={value} index={2}>
                Item Three
            </TabPanel>
            <TabPanel value={value} index={3}>
                Item Four
            </TabPanel>
            <TabPanel value={value} index={4}>
                Item Five
            </TabPanel>
            <TabPanel value={value} index={5}>
                Item Six
            </TabPanel>
            <TabPanel value={value} index={6}>
                Item Seven
            </TabPanel>
            <TabPanel value={value} index={7}>
                Item Eight
            </TabPanel>
            <TabPanel value={value} index={8}>
                Item Nine
            </TabPanel>
            <TabPanel value={value} index={9}>
                Item Ten
            </TabPanel>
        </div>
    );
}
</code>```

Body:
As per the comment, I have prepared an example for scrollable tab using material ui. Please have a look.

import React from 'react';
import PropTypes from 'prop-types';
import {makeStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

function TabPanel(props) {
    const {children, value, index, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`scrollable-auto-tabpanel-${index}`}
            aria-labelledby={`scrollable-auto-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={3}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `scrollable-auto-tab-${index}`,
        'aria-controls': `scrollable-auto-tabpanel-${index}`,
    };
}

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        width: '100%',
        backgroundColor: theme.palette.background.paper,
    },
}));

export default function ScrollableTabsButtonAuto() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <div className={classes.root}>
            <AppBar position="static" color="default">
                <Tabs
                    value={value}
                    onChange={handleChange}
                    indicatorColor="primary"
                    textColor="primary"
                    variant="scrollable"
                    scrollButtons="auto"
                    aria-label="scrollable auto tabs example"
                >
                    <Tab label="Item One" {...a11yProps(0)} />
                    <Tab label="Item Two" {...a11yProps(1)} />
                    <Tab label="Item Three" {...a11yProps(2)} />
                    <Tab label="Item Four" {...a11yProps(3)} />
                    <Tab label="Item Five" {...a11yProps(4)} />
                    <Tab label="Item Six" {...a11yProps(5)} />
                    <Tab label="Item Seven" {...a11yProps(6)} />
                    <Tab label="Item Eight" {...a11yProps(7)} />
                    <Tab label="Item Nine" {...a11yProps(8)} />
                    <Tab label="Item Ten" {...a11yProps(9)} />
                </Tabs>
            </AppBar>
            <TabPanel value={value} index={0}>
                Item One
            </TabPanel>
            <TabPanel value={value} index={1}>
                Item Two
            </TabPanel>
            <TabPanel value={value} index={2}>
                Item Three
            </TabPanel>
            <TabPanel value={value} index={3}>
                Item Four
            </TabPanel>
            <TabPanel value={value} index={4}>
                Item Five
            </TabPanel>
            <TabPanel value={value} index={5}>
                Item Six
            </TabPanel>
            <TabPanel value={value} index={6}>
                Item Seven
            </TabPanel>
            <TabPanel value={value} index={7}>
                Item Eight
            </TabPanel>
            <TabPanel value={value} index={8}>
                Item Nine
            </TabPanel>
            <TabPanel value={value} index={9}>
                Item Ten
            </TabPanel>
        </div>
    );
}


问:
Minifed js files and css files are not loading with 403 error in Chrome Developer's tool console
I was using W3 Total Cache and it was working fine. Suddenly after updating Wordpress I started having issues with JS and CSS loading on the website. I checked Chrome DevTools console and there were these errors "Failed to load resource" for the minified js and css files.
I then installed Autooptimize plugin and now I am getting the same errors:</p>

```<code>autoptimize_single_5ee990907b315027da600eeeaee2e04b.js:1 Failed to load resource: the server responded with a status of 403 ()

Refused to apply style from 'https://site/wp-content/cache/autoptimize/css/autoptimize_8ddffc35874a442e23f067ea66798a49.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
</code>```

答: I solved the problem by setting the permissions for all the files and folders inside /wp-content/cache/ to 755 via FTP.</p>

Body:
I was using W3 Total Cache and it was working fine. Suddenly after updating Wordpress I started having issues with JS and CSS loading on the website. I checked Chrome DevTools console and there were these errors "Failed to load resource" for the minified js and css files.
I then installed Autooptimize plugin and now I am getting the same errors:

autoptimize_single_5ee990907b315027da600eeeaee2e04b.js:1 Failed to load resource: the server responded with a status of 403 ()

Refused to apply style from 'https://site/wp-content/cache/autoptimize/css/autoptimize_8ddffc35874a442e23f067ea66798a49.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.


问:
ORA-01722: invalid number for explicit cursor
I am trying to execute this procedure:

```<code>CREATE OR REPLACE PROCEDURE ALLPOSITIONS
IS
CURSOR C IS
SELECT *
FROM TRKEMPLOYEE
ORDER BY SUBSTR(NAME, ' ');
BEGIN

FOR TRKEMP IN C
LOOP
DBMS_OUTPUT.PUT_LINE('testing');
/*
DBMS_OUTPUT.PUT_LINE(TRIM(TRKEMP.NAME));

DBMS_OUTPUT.PUT_LINE(TRIM(TRKEMP.NAME) || ':' || CHR(10)|| TRKEMP.DOB);
*/
END LOOP;

END ALLPOSITIONS;
/
</code>```

but it keeps giving me ORA-01722: invalid number, what is going on?

答:
In your code:

ORDER BY SUBSTR(NAME, ' ')
```

<p>The <code>SUBSTR</code> function has the signature:</p>

```SUBSTR( string_value, start_position, [substring_length] )
```

<p>So, it is expecting a number in the second argument; <code>' '</code> is not a number.</p>

<p>If your <code>NAME</code> column contains <code>firstname lastname</code> and you are trying to <code>ORDER BY</code> the last name then use the <code>INSTR</code> function to find the position of the first space character:</p>

<pre class="lang-sql prettyprint-override"><code>ORDER BY SUBSTR( NAME, INSTR( NAME, ' ' ) + 1 )
</code>```

Body:
I am trying to execute this procedure:

CREATE OR REPLACE PROCEDURE ALLPOSITIONS
IS
CURSOR C IS
SELECT *
FROM TRKEMPLOYEE
ORDER BY SUBSTR(NAME, ' ');
BEGIN

FOR TRKEMP IN C
LOOP
DBMS_OUTPUT.PUT_LINE('testing');
/*
DBMS_OUTPUT.PUT_LINE(TRIM(TRKEMP.NAME));

DBMS_OUTPUT.PUT_LINE(TRIM(TRKEMP.NAME) || ':' || CHR(10)|| TRKEMP.DOB);
*/
END LOOP;

END ALLPOSITIONS;
/

but it keeps giving me ORA-01722: invalid number, what is going on?

Body:
In your code:

ORDER BY SUBSTR(NAME, ' ')

The SUBSTR function has the signature:

SUBSTR( string_value, start_position, [substring_length] )

So, it is expecting a number in the second argument; ' ' is not a number.

If your NAME column contains firstname lastname and you are trying to ORDER BY the last name then use the INSTR function to find the position of the first space character:

ORDER BY SUBSTR( NAME, INSTR( NAME, ' ' ) + 1 )


问:
AKS: How to get rid of load balancer?
When you create an Azure Kubernetes Service (AKS) it creates by default a load balancer and a networking set to access it. It creates it in a separate resource group.

We are however not interested at all in this load balancer, as we are going to use our own load balancer/Ingress configured within Kubernetes itself.

Question: How can we avoid this Load balancer from Azure to be generated all the time when we generate the cluster?

答:
Was discussed in AKS Creation Without Public Load Balancer github issue with afterward explanation

It is possible the SLB IP is just for egress.

Let me try to clarify.

AKS with Basic Load Balancer

You can create it by passing the load balancer sku parameter Has
  implicit Egress (you won't see a public IP, although it is there on
  the Azure infrastructure) You can create private services accessible
  only through private IPs using the internal annotation.
  https://learn.microsoft.com/en-us/azure/aks/internal-lb AKS with
  Standard Load Balancer

Used by default on latest clientes, or explicitly by using the same
  parameter as above Has only explicit egress, which means if there
  isn't an egress IP the cluster won't have egress and will be broken.
  This is like the gateway to the internet IP. You can control,
  pre-create or change this IP (or have more than one) You can create
  private services accessible through private IPs using the internal
  annotation. https://learn.microsoft.com/en-us/azure/aks/internal-lb In
  some cases, enterprises might have egress defined via UDRs through a
  firewall etc. In which case that egress IP will not be used, and will
  be effectively not needed. But as of now it will be needed at create
  time as we don't know the egress path defined. We are no working on a
  UDR outbound type for SLB that will allow users to confirm they have
  egress through UDRs and in this case the SLB won't be created with a
  Public IP for egress

Like @Sajeetharan asked- what is the use case?
Also how is it mandatory for you to use AKS? Maybe the same you can  easier resolve just regular with kubeadm cluster?

Deploying a Kubernetes cluster in Azure using kubeadm

Title: AKS: How to get rid of load balancer?


问:
Backbone.js How to use with PHP
I have been looking into backbone.js and I can't seem to figure out how to get it communicate with php in order to save the models data. It sends a request but how do I capture that request whether it be "Create", "Update", "Read", "Delete" etc.

Thanks

答:
The model of backbone.js uses specific urls for fetch and send data. You have to make sure, to have a php script called there.

Now there are two possibilities.

First, the method is send inside the $_POST as additional variable.
Second, you have to look for the used request method(GET,POST,PUT,DELETE) which you can with $_SERVER['REQUEST_METHOD']

Now you can use simple if-else or switch statements to handle the request and deliver the needed data as i think json.

Title: Backbone.js How to use with PHP


问:
Squeezing pandas DataFrame to have non-null values and modify column names
I have the following sample DataFrame

```<code>import numpy as np
import pandas as pd

df = pd.DataFrame({'Tom': [2, np.nan, np.nan],
                   'Ron': [np.nan, 5, np.nan],
                   'Jim': [np.nan, np.nan, 6],
                   'Mat': [7, np.nan, np.nan],},
                   index=['Min', 'Max', 'Avg'])
</code>```

that looks like this where each row have only one non-null value

```<code>    Tom Ron Jim Mat
Min 2.0 NaN NaN 7.0
Max NaN 5.0 NaN NaN
Avg NaN NaN 6.0 NaN
</code>```

Desired Outcome

For each column, I want to have the non-null value and then append the index of the corresponding non-null value to the name of the column. So the final result should look like this

```<code>    Tom_Min Ron_Max Jim_Avg Mat_Min
0     2.0    5.0      6.0    7.0
</code>```

My attempt

Using list comprehensions: Find the non-null value, and append the corresponding index to the column name and then create a new DataFrame

```<code>values = [df[col][~pd.isna(df[col])].values[0] for col in df.columns]

# [2.0, 5.0, 6.0, 7.0]

new_cols = [col + '_{}'.format(df[col][~pd.isna(df[col])].index[0]) for col in df.columns]

# ['Tom_Min', 'Ron_Max', 'Jim_Avg', 'Mat_Min']

df_new = pd.DataFrame([values], columns=new_cols)
</code>```

My question

Is there some in-built functionality in pandas which can do this without using for loops and list comprehensions?

答:
If there is only one non missing value is possible use DataFrame.stack with convert Series to DataFrame and then flatten MultiIndex, for correct order is used DataFrame.swaplevel with DataFrame.reindex:

```<code>df = df.stack().to_frame().T.swaplevel(1,0, axis=1).reindex(df.columns, level=0, axis=1)
df.columns = df.columns.map('_'.join)
print (df)
   Tom_Min  Ron_Max  Jim_Avg  Mat_Min
0      2.0      5.0      6.0      7.0
</code>```

Body:
I have the following sample DataFrame

import numpy as np
import pandas as pd

df = pd.DataFrame({'Tom': [2, np.nan, np.nan],
                   'Ron': [np.nan, 5, np.nan],
                   'Jim': [np.nan, np.nan, 6],
                   'Mat': [7, np.nan, np.nan],},
                   index=['Min', 'Max', 'Avg'])

that looks like this where each row have only one non-null value

    Tom Ron Jim Mat
Min 2.0 NaN NaN 7.0
Max NaN 5.0 NaN NaN
Avg NaN NaN 6.0 NaN

Desired Outcome

For each column, I want to have the non-null value and then append the index of the corresponding non-null value to the name of the column. So the final result should look like this

    Tom_Min Ron_Max Jim_Avg Mat_Min
0     2.0    5.0      6.0    7.0

My attempt

Using list comprehensions: Find the non-null value, and append the corresponding index to the column name and then create a new DataFrame

values = [df[col][~pd.isna(df[col])].values[0] for col in df.columns]

# [2.0, 5.0, 6.0, 7.0]

new_cols = [col + '_{}'.format(df[col][~pd.isna(df[col])].index[0]) for col in df.columns]

# ['Tom_Min', 'Ron_Max', 'Jim_Avg', 'Mat_Min']

df_new = pd.DataFrame([values], columns=new_cols)

My question

Is there some in-built functionality in pandas which can do this without using for loops and list comprehensions?

Body:
If there is only one non missing value is possible use DataFrame.stack with convert Series to DataFrame and then flatten MultiIndex, for correct order is used DataFrame.swaplevel with DataFrame.reindex:

df = df.stack().to_frame().T.swaplevel(1,0, axis=1).reindex(df.columns, level=0, axis=1)
df.columns = df.columns.map('_'.join)
print (df)
   Tom_Min  Ron_Max  Jim_Avg  Mat_Min
0      2.0      5.0      6.0      7.0