Develop Reference

React.js ... is there a CDN for the ReactCSSTransitionGroup?

I am teaching myself React.js. For now, I am avoiding having to set up and use node.js, servers, etc. (I want to focus on front-end functionality first). To avoid having to set up my own node server and worry about endpoints, etc., I have been using these CDNs:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
These have worked great so far. But now I am trying to use the React.JS CSS transition library. I tried using cloudflare:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.3.1/react-transition-group.js"></script>
But this is not working. This is the only cloudflare link I could find on the topic.
Is there a way to use
<ReactCSSTransitionGroup></ReactCSSTransitionGroup>
without having to set up my own node server?
I would like to be able to pull the library in from a web link. Or if I could get the entire JavaScript file, I could simply put that file in the same folder and try to load from a local folder using:
<script src="ReactCSSTransitionGroup.js"></src>
It seems that there should be a way to use ReactCSSTransitionGroup without having to do npm, command line launch server, express, etc.

This may come too late but just in case somebody else is looking, just like me.
As per https://reactcommunity.org/react-transition-group/, the cdn is at https://unpkg.com/react-transition-group/dist/react-transition-group.js
And you can use <ReactTransitionGroup.Transition>...</ReactTransitionGroup.Transition>
or <ReactTransitionGroup.CSSTransition>...</ReactTransitionGroup.CSSTransition>, and the same goes for SwitchTransaction and TransitionGroup, to do the animation.

I'd suggest using Create React App https://github.com/facebook/create-react-app.
Bundling and tests all taken care of for you. Not the best way to learn about build processes, but it's very fast to get going and you get to install and import from npm. win win in my books.

Just a suggestion, but it will save you a lot of time and hassle if you learn npm and just add things like "ReactCSSTransitionGroup" etc. via npm.
Also Webpack + Babel are part of the build most React developers use.
Check out this article to get up and running: https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr.

Angular 2+ server-side rendering with jQuery

I encountered something debilitating.
I'm pretty far in a project right now, and it definitely needs to be rendered server-side at some point.
The webapp lets users upload pictures such as profile picture and also "regular" pictures.
I'm using Croppie from Foliotek (https://github.com/Foliotek/Croppie) to do the cropping, which works well and is exactly what I need.
But Croppie relies on jQuery. Yesterday I found out that could be an issue if I want to make the app server-side rendered.
All the jQuery is used in ngAfterViewInit lifecycle hooks, so I'm hoping this makes it server-side rendering proof?
I know there is ng2-img-cropper available, but I'm not so keen to implement that one. BUT, if I can use ng2-img-cropper together with server-side rendering then I'll have to.
Or is there something far better I'm overlooking?

You can use jQuery on server, with Node, AFAIK. Just browse npm and search for suitable module. And do not forget, that Node have no DOM implementation, so you need module for virtual DOM also.
For example, you can use this jQuery wrapper with this DOM implementation. Example:
npm install jsdom
npm install jQuery
var jsdom = require('jsdom').jsdom
var myWindow = jsdom().createWindow()
var $ = require('jQuery')
var jq = require('jQuery').create()
var jQuery = require('jQuery').create(myWindow)
$("<h1>test passes</h1>").appendTo("body")
console.log($("body").html());

I found out there is an Angular Universal (server-side rendering) starter project available:
https://github.com/angular/universal-starter
I cloned it and implemented Croppie as I did in my development version and everything works just fine!
So... I wonder why I've read multiple times that things will totally break if using jQuery in your Angular 2+ SSR project. Also Max Schwarzmuller told so in his lectures on Udemy. Anyway. I'm happy to have found everything still works.

as i know, when ever jquery use "Window", ssr gets confused, because in server we don't have window(window is in browser).
but normally, jquery works.

Convert HTML + CSS to PDF with nodeJS or Javascript?

I have a problem. I've tried some libraries that convert html to PDF but they don't import CSS, so my PDF is invalid.
I's tried with "html2pdf" , "pdfmake", "jspdf"..
PDFMake does not help me because it need to generate a JSON with HTML data...
The structure of file that I would like to convert to PDF is:
html: www/templates/phase_one_report.html
css: www/css/phase_one_report.css
Some ideas? I am using nodeJS with sailsJS in backend and javascript with ionic in frontend.
Sorry about my english.

This is a difficult problem. I have also found that existing HTML to PDF libraries usually don't handle the HTML & CSS that I throw at them.
The best solution I have found is not Javascript at all: wkhtmltopdf. This is essentially a program that wraps up the webkit rendering engine so that you can give it any HTML + CSS that webkit can render and it will return a PDF document. It does an outstanding job, since it's actually rendering the document just like a browser would.
You mention that you're using node.js, but it's not clear exactly what your environment is, so I'm going assume that your report is available at a URL like http://my.domain/phase_one_report.html. The simplest way to get this working would be to install the wkhtmltopdf application on your server, then use child_process.exec to execute it.
For example:
import { exec } from 'child_process';
// generate the report
// execute the wkhtmltopdf command
exec(
'wkhtmltopdf http://my.domain/phase_one_report.html output_file.pdf',
(error) => {
// send the PDF file to the client
}
);
There are a lot of different command-line options for wkhtmltopdf - you'll need to look into all the different ways to configure it.
If your report is not accessible at a URL, then this becomes a little more complicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.

There are a number of options available right now:
Edit 09/2018: Use puppeteer, the JS Headless Chrome driver. Firefox now also has headless mode but I'm not sure which library corresponds to puppeteer.
wkhtmltopdf as mentioned before does the job but is slightly outdated.
You will have to watch the latest chrome releases which will have a --headless option to enable html+css+js to pdf conversion.
Then there is PhantomJS and Slimer.js. Both are possible to use with node and Javascript. Nightmare.js is also an option but sits on top of it.
However, Phantom.js is currently the only solution that is truly headless and javascript based. Slimer.JS works with Firefox but requires you to have a window manager, at least xvfb, a virtual frame buffer.
If you want the latest browser features you will have to go with slimer.js or, another option, go with one of the Electron based solutions that keep popping up. Electron is based on Chrome and is scriptable too. A fine solution that also ships with Docker containers is currently https://github.com/msokk/electron-render-service
This list is possibly incomplete and will change a lot in the near future.

CKEDITOR.tools.getindex is not a function

I'm trying to upgrade my version of CKEDITOR, from 4.4.1 to 4.5.1. To do so I'm uploading my build-config.js to fetch the same plugins as before with the latest ckeditor version.
The problem is that using the download CKEDITOR, whenever I try to use it I get the error CKEDITOR.tools.getindex is not a function. And this error comes from the widget plugin.
In widget/plugin.js file in line #1951 you have:
var index = CKEDITOR.tools.getIndex( widgetsRepo._.upcasts, function( element ) {
and that is exactly here the problem. Any idea?
Thank you very much.

I think that the only idea may be that you haven't upgraded everything correctly.
CKEDITOR.tools.getIndex was added in 4.5.0. And if the widget plugin tries to access it it means that you upgraded the plugin, but apparently not the core. Additionally, it means that you haven't used the online builder to build the whole package at once, because then the core would be concatenated with all the plugins and there could be no problem with different versions being deployed.
Therefore, try from scratch. Build a package containing all plugins that you need, unpack everything to a new directory to avoid problems with write access and similar, and all should be fine.

Can you provide a module by another name?

In our application we use our own logging framework. Some of the external modules we use uses the debug module, which logs directly to the console.
I would like to wrap these logging calls, so that they are piped through our own framework.
I didn't want to override/hook console.log, because that's what our logging framework uses internally (and it feels dirty). So my next idea was to somehow instruct Node to load my own code when another module uses require('debug'). Is that possible? And, if so, how? Or is there maybe a better solution altogether?

For the time being, we just forked debug and we're now simply using our fork in our project.
We adjusted the fork to make use of our own logging solution. Integrating it was pretty easy, due to the support of GitHub URLs in package.json.