diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..d63b1470 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "permalink" + ] +} \ No newline at end of file diff --git a/source/_posts/2017/boilerplate-project-for-react-typescript-webpack-2-postcss-css-modules-and-hmr.md b/source/_posts/2017/boilerplate-project-for-react-typescript-webpack-2-postcss-css-modules-and-hmr.md index 979ce45d..b0320190 100644 --- a/source/_posts/2017/boilerplate-project-for-react-typescript-webpack-2-postcss-css-modules-and-hmr.md +++ b/source/_posts/2017/boilerplate-project-for-react-typescript-webpack-2-postcss-css-modules-and-hmr.md @@ -33,7 +33,6 @@ You can see, download and use freely the boilerplate on this link: [https://gith [![image](https://blog.josequinto.com/wp-content/uploads/2017/04/image_thumb-1.png "image")](https://blog.josequinto.com/wp-content/uploads/2017/04/image-1.png) -  Lot’s of configurations are happening on this template, but I will recap the main features: @@ -50,7 +49,7 @@ Lot’s of configurations are happening on this template, but I will recap the m - Split out css files using [ExtractTextPlugin](https://webpack.js.org/plugins/extract-text-webpack-plugin) - [UglifyJsPlugin with options](https://github.com/webpack/webpack/blob/v2.4.1/lib/optimize/UglifyJsPlugin.js) - Use include in the loader instead of the exclude. [More info](http://stackoverflow.com/questions/37823764/how-include-and-exclude-works-in-webpack-loader) - - More perfomance tips: [here](https://medium.com/@khanght/optimize-webpack-production-build-ec594242b222#.bj3eyg65p) + - More performance tips: [here](https://medium.com/@khanght/optimize-webpack-production-build-ec594242b222#.bj3eyg65p) - [Webpack stats](https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.stats.js) (bundle optimization helper) - Generate stats.json file with profiler. Use [[http://webpack.github.io/analyse/](http://webpack.github.io/analyse/)] to analyze it. - [webpack visualizer](https://chrisbateman.github.io/webpack-visualizer/) diff --git a/source/_posts/2017/dynamic-import-expressions-and-webpack-code-splitting-integration-with-typescript-2-4.md b/source/_posts/2017/dynamic-import-expressions-and-webpack-code-splitting-integration-with-typescript-2-4.md index 375189d0..dee553d7 100644 --- a/source/_posts/2017/dynamic-import-expressions-and-webpack-code-splitting-integration-with-typescript-2-4.md +++ b/source/_posts/2017/dynamic-import-expressions-and-webpack-code-splitting-integration-with-typescript-2-4.md @@ -23,7 +23,6 @@ Two days ago (27/06/2017), was released [TypeScript 2.4.0](https://github.com/Mi From other side, webpack bundler has a feature called Code Splitting – Async: > **Code Splitting – Async** allows you to split your bundle into chunks which can be downloaded asynchronously at a later time. For instance, this allows to serve a minimal bootstrap bundle first and to asynchronously load additional features later. -  At first glance, I did a **strict relationship between** these two features. I mean, it’s **natural** to **think** (if we are using **webpack** in our dev **workflow**) that by using** TypeScript 2.4 dynamic import expressions, **will automatically **produce bundle chunks** and automatically **code-split you JS final bundle**. BUT, that is not as easy as it seems, because it **depends** **on** the **tsconfig.json** configuration we are working with. @@ -35,21 +34,17 @@ In the following code I want to lazy load the library moment but I am interested -  ## Unexpected configuration for Code Splitting with webpack - Output: -  Note how the** JS output from TypeScript 2.4.0 is resolving directly with a Promise.resolve() instead of using import().** Then, even if that solution will **work in terms of functionality**, but **not in terms of code splitting**, because that is NOT the input expected by webpack. -  ## Expected TypeScript configuration for Code Splitting with webpack @@ -59,30 +54,20 @@ Output: -  - -  > However, **this output is the ideal for webpack Code Splitting**, and we don’t have to worry about the other “normal” imports which are transpiled using esnext, because **webpack knows how to handle all of them (imports and exports).** -  -  ## Conclusions - **Using “module”: “esnext”** TypeScript produces the mimic impot() statement to be input for** Webpack Code Splitting.** -- Currently (TypeScript 2.4.0) There is a **bug** using “**module”: “esnext**”. Some external libraries like moment are not recognized by TypeScript if you don’t configure explicitely **“moduleResolution” : “node”.** **PLEASE, DON’T FORGET TO INCLUDE IT IN YOUR TSCONFIG.JSON.** +- Currently (TypeScript 2.4.0) There is a **bug** using “**module”: “esnext**”. Some external libraries like moment are not recognized by TypeScript if you don’t configure explicitly **“moduleResolution” : “node”.** **PLEASE, DON’T FORGET TO INCLUDE IT IN YOUR TSCONFIG.JSON.** - You can see a working sample here: [TypeScript 2.4, Dynamic Import Expressions with webpack Code Splitting Sample](https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/app/src/components/AsyncLoading/AsyncLoading.tsx#L57-L68 "https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/app/src/components/AsyncLoading/AsyncLoading.tsx#L57-L68"). -  Some TypeScript forums for reference: - [[Master] wip-dynamic import](https://github.com/Microsoft/TypeScript/pull/14774 "https://github.com/Microsoft/TypeScript/pull/14774") - [[Design Spec] ESNext import()](https://github.com/Microsoft/TypeScript/issues/14495 "https://github.com/Microsoft/TypeScript/issues/14495") - -  - -Enjoy! \ No newline at end of file diff --git a/source/_posts/2017/how-to-configure-webpack-for-replacing-your-api-module-path-with-a-mock-api.md b/source/_posts/2017/how-to-configure-webpack-for-replacing-your-api-module-path-with-a-mock-api.md index 571b2c01..05f35e1c 100644 --- a/source/_posts/2017/how-to-configure-webpack-for-replacing-your-api-module-path-with-a-mock-api.md +++ b/source/_posts/2017/how-to-configure-webpack-for-replacing-your-api-module-path-with-a-mock-api.md @@ -21,7 +21,7 @@ I’ve been working with **React**, **webpack** and **TypeScript** for almost tw Today, I am going to write about how to configure webpack to provide different Module path depending on our configuration. In my scenario I have two different APIs one is the “**REAL**” one and other is the “**MOCK**”. And I’d like to use the mocked API for development configuration and the real one for Production. -Let’s say we have a function to get all terms of a given taxonomy term set (in SharePoint Online) in order to display them in a React application. We are going to describe how to create the real  API, Mock API, how to configure webpack to do the “**generic replacement**” and how to use the API. +Let’s say we have a function to get all terms of a given taxonomy term set (in SharePoint Online) in order to display them in a React application. We are going to describe how to create the real API, Mock API, how to configure webpack to do the “**generic replacement**” and how to use the API. ### Real API @@ -40,5 +40,3 @@ My recommendation is using a [NormalModuleReplacementPlugin](https://webpack.js. ### Usage - -Enjoy! \ No newline at end of file diff --git a/source/_posts/2017/pnpjs-2-creating-select-and-expand-typescript-property-decorators-to-be-used-in-pnp-js-core.md b/source/_posts/2017/pnpjs-2-creating-select-and-expand-typescript-property-decorators-to-be-used-in-pnp-js-core.md index 46d7f24f..7d83d85f 100644 --- a/source/_posts/2017/pnpjs-2-creating-select-and-expand-typescript-property-decorators-to-be-used-in-pnp-js-core.md +++ b/source/_posts/2017/pnpjs-2-creating-select-and-expand-typescript-property-decorators-to-be-used-in-pnp-js-core.md @@ -69,7 +69,7 @@ Now, we are going to describe how to** implement two decorators for select and e -## Importatnt Notes +## Important Notes - **@select** decorator implementation has **queryName as optional,** so if there isn´t queryName, we are getting the** property name itself** to be used in the query. diff --git a/source/_posts/2017/pnpjs-5-how-to-consume-our-decorators-models-and-parsers-from-spfx-the-winning-combination.md b/source/_posts/2017/pnpjs-5-how-to-consume-our-decorators-models-and-parsers-from-spfx-the-winning-combination.md index 29926086..a9783e6f 100644 --- a/source/_posts/2017/pnpjs-5-how-to-consume-our-decorators-models-and-parsers-from-spfx-the-winning-combination.md +++ b/source/_posts/2017/pnpjs-5-how-to-consume-our-decorators-models-and-parsers-from-spfx-the-winning-combination.md @@ -33,7 +33,7 @@ In the previous posts of this series we explained why we should use [**Custom Bu All code samples we are going to see here, actually, are implemented in this **Github project**: [spfx-react-sp-pnp-js-property-decorators](https://github.com/jquintozamora/spfx-react-sp-pnp-js-property-decorators "https://github.com/jquintozamora/spfx-react-sp-pnp-js-property-decorators"). > There are some **requisites** to have in order to run this webpart sample. -> 1\. Create a list called PnPJSSample with four colums (ID, Title, Category and Quantity). +> 1\. Create a list called PnPJSSample with four columns (ID, Title, Category and Quantity). > 2\. Upload some documents in the Documents library. In the following code sample, we can see different ways to consume and query against PnP JS Core using different combinations of decorators, models and parsers: diff --git a/source/_drafts/upload-json-object-as-a-file-into-office-365-using-javascript-jsom.md b/source/_posts/2017/upload-json-object-as-a-file-into-office-365-using-javascript-jsom.md similarity index 59% rename from source/_drafts/upload-json-object-as-a-file-into-office-365-using-javascript-jsom.md rename to source/_posts/2017/upload-json-object-as-a-file-into-office-365-using-javascript-jsom.md index f444f819..d7071134 100644 --- a/source/_drafts/upload-json-object-as-a-file-into-office-365-using-javascript-jsom.md +++ b/source/_posts/2017/upload-json-object-as-a-file-into-office-365-using-javascript-jsom.md @@ -1,34 +1,32 @@ --- -title: Upload JSON Object as a File into OFfice 365 using JavaScript (JSOM) -tags: - - English -url: 902.html +layout: post +title: Upload JSON Object as a File into Office 365 using JavaScript (JSOM) +language: English +permalink: upload-json-object-as-a-file-into-office-365-using-javascript-jsom id: 902 categories: - javascript - JSOM - Office 365 date: 2017-03-03 13:11:24 +featuredImage: + url: featured.png + width: auto + height: auto --- -[![image](https://blog.josequinto.com/wp-content/uploads/2017/03/image_thumb.png "image")](https://blog.josequinto.com/wp-content/uploads/2017/03/image.png) - -Hi, - -In this post, I am going to show how to convert and upload a JSON Object into a SharePoint library using JavaScript Client Object Model. +This post is intended to explain how to **convert** and upload a **JSON Object** into a SharePoint library using **JavaScript Client Object Model**. That approach will be valid using the code inside a SharePoint Web Part, will not be valid for SP Apps or JavaScript applications running outside of SharePoint context. Here you can see the code: -  -I tested it in Chrome 56 and Internet Explorer 11 and it worked. - > IMPORTANT: -> +I tested it in **Chrome 56** and **Internet Explorer 11** and it worked. +  +> **IMPORTANT**: > If you want to upload other kind of documents (more that 2 MB). Then I recommend you take a look to this post: [http://sharepointcookies.com/2017/02/programmatically-uploading-large-files-client-side-to-sharepoint-2013/](http://sharepointcookies.com/2017/02/programmatically-uploading-large-files-client-side-to-sharepoint-2013/ "http://sharepointcookies.com/2017/02/programmatically-uploading-large-files-client-side-to-sharepoint-2013/") from my colleague [Kev](https://twitter.com/BeckettKev). -Please, feel free to write a comment if that is not working in your specific scenario! - -[@jquintozamora](https://twitter.com/jquintozamora) \ No newline at end of file +  +Please, write a comment if that's not working in your specific scenario! diff --git a/source/_posts/2017/upload-json-object-as-a-file-into-office-365-using-javascript-jsom/featured.png b/source/_posts/2017/upload-json-object-as-a-file-into-office-365-using-javascript-jsom/featured.png new file mode 100644 index 00000000..550273a0 Binary files /dev/null and b/source/_posts/2017/upload-json-object-as-a-file-into-office-365-using-javascript-jsom/featured.png differ