Apache serves cached files with garbled text at end

Reply

When using Apache running on a VirtualBox machine with a shared folder, small files such as JavaScript or CSS files might not get updated from the host and served with additional characters at the end. This happens because of a bug in VirtualBox when Apache is using sendfile to improve data transfer. Just turn the EnabeSendfile Directive off in your httpd.conf, e.g.:

EnableSendfile off

Use JSDoc 3 and PhpStorm to generate JavaScript documentation

1 Reply

This is an update to my former installation guide How to Generate JavaScript Documentation with JSDoc 3 and PhpStorm, which was written in 2013. Since then, JSDoc 3 moved from Mozilla’s Rhino to Node.js to generate the documentation, which is why that guide no longer works (unless you use an older version of JSDoc 3). This installation guide is written for Windows, but should also work on Linux and Mac.

Install and integrate Node.js

  1. Download and install Node.js.
  2. Integrate Node.js into PhpStorm:
    Open Settings (Ctrl+Alt+S) -> Plugins -> Install JetBrains Plugins -> Search for Node.js -> Install the Plugin
    Install NodeJS in PhpStormOpen Settings (Ctrl+Alt+S)  again and go to Languages & Frameworks -> Node.js and NPM. In the Node interpreter field, specify the local Node.js interpreter to use. Also press the Enable Node.js core button to enable code assist. For more details about Node.js in PhpStorm read IntelliJ IDEA 2016.1 Help | Node.js
  3. Install the node package manager npm from within PhpStorm:
    Install the npm package manager by clicking on the green add button icon add button. Beware to make the installation global by setting Options to -g, otherwise you end up with npm in your project folder. The -g option will install npm into your folder %AppData%/npm/step02For more details about using the package manager in PhpStorm read Installing and Removing External Software Using Node Package Manager.

Continue reading

PhpStorm: Complete code versus complete current statement

Reply

Here are two useful keyboard shortcuts for PhpStorm which sound similar, but are quite different:

complete code CTRL + SPACE
will either finish your code if what you typed so far is unambiguous or otherwise offer a list to choose from.

complete current statement CTRL + SHIFT + ENTER will add a semicolon at the end of your statement, no matter where the cursor is.

If you want to train your shortcut skills for PhpStorm or other software, the website shortcutFoo is really helpful and fun to use.

How to load leaflet.js and leaflet plugins with dojo AMD

Reply
<script type="text/javascript">
var dojoConfig = {
  baseUrl: '/lib',
  async: true,
  packages: [
    {name: 'Leaflet', location: './Leaflet'}
  ],
  map: {
    // lets you switch between minified and source version of leaflet for development
    '*': {
      'Leaflet/leaflet': 'Leaflet/leaflet-src'
    }
  }
};
</script>
<script type="text/javascript" src="lib/dojo/dojo.js"></script>

<script type="text/javascript">
require([
  'require',
  'Leaflet/leaflet'
], function(require, L) {

  // load plugin after loading leaflet, because it's referenced by the draw plugin
  require(['Leaflet/plugins/draw/leaflet.draw'], function() {

    var drawControl = new L.Control.Draw({...}),
    map = L.map(...);
    ...

  }):
});

Boxplot renderer plugin for jqPlot

4 Replies

For work I needed a way to show boxplots (see diagram to the right). All I had to do was override the draw() method of OHLCRenderer (see code below).

Update 13.10.2017: Upon request I created a working demo of the BoxplotRenderer using some helper classes to setup jqPlot charts from another project.

boxplot diagram

Example of a histogram and boxplot rendered with the jqPlot library.

Continue reading

How to import c3.js with the dojo AMD loader

2 Replies

I came across the nice chart library c3.js, which is based on d3.js. In order to load it via an AMD require call with dojo, you also need to set the main property in the dojoConfig, e.g.:

dojoConfig = {
    packages: [
        { name: 'd3', location: '../../../d3', main: 'd3' }
        { name: 'c3', location: '../../../c3', main: 'c3' }
    ]
}

This will let you load c3.js in your module, e.g.:

define(['d3', 'c3', ...], function(d3, c3, ...) {
    ...
}

How to use Google Maps API with Dojo and AMD

Reply

If you are using AMD or RequireJS for your JavaScripts and you would also like to use the Google Maps JavaScript API you have a problem. You can’t just require in the script file and then access the google.maps object from within your script, e.g.:

require(['http://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID'], function() {
    var myMap = new google.maps.Map(mapDiv, mapOptions);
}

This doesn’t work because the map script itself loads another script, which might not have been loaded yet, when you access the google.maps.Map object.

Continue reading