Category: UI

Posted on

Debugging Webpack

This has caused me several days of exciting times… some of the errors Webpack gives can be a little misleading, showing one error when there’s in-fact a totally different underlying issue which will fix everything!

The following shows you everything you need;

<./node_modules/.bin/encore (or your command here> --watch --progress --display-error-details --verbose

You’ll need to replace the start of this command with something relevant to you, depending on the location of your encore / webpack executable.

Posted on

Webpack Encore & CometD

This drove me nuts for hours;

These dependencies were not found:
* org/cometd in ./node_modules/cometd-jquery/jquery/jquery.cometd.js

The solution … in your webpack.config.js file;

config = Encore.getWebpackConfig();
config.resolve.alias["org/cometd"] = path.resolve(__dirname, "./node_modules/cometd-jquery/org/cometd");
config.resolve.alias["jquery.cometd"] = path.resolve(__dirname, "./node_modules/cometd-jquery/jquery/jquery.cometd");

// export the final configuration
module.exports = config;

After that you should be all good to go!

If you get an error about the ‘path’ function not existing, then just include the following at the top of the file;

var path = require('path');
Posted on

Responsive images

<picture>
 <source media="(max-width: 768px)" srcset="path/to/img-small.png">
 <source media="(min-width: 768px)" srcset="path/to/img-big.png">
 </picture>

Not supported in IE though 🙁

http://html5hub.com/html5-picture-element/

Posted on

jQuery Book – Basics through to Performance Optimisations

A few things to note;

  • When using selectors with ID tags, use $(‘#abc’).find(‘.defg .higk’); instead of $(‘#abc .defg .higk’);
  • Also use named functions more-so than anonymous ones;
    var PI = {
    onReady : function() {
    $(‘#magic’).click(PI.candyMtn);
    $(‘#happiness’).load(PI.url + ‘ #unicorns’, PI.unicornCb);
    },
    candyMtn : function(e) {
    $(‘#yayeffects’).slideUp(PI.slideCb);
    },
    slideCb : function() { … },
    unicornCb : function() { … }
    };
    $(document).ready(PI.onReady);
  • Plugin creation;
    // defining the plugin
    (function($){
    $.fn.hoverClass = function(c) {
    return this.hover(
    function() { $(this).toggleClass(c); };
    };
    }(jQuery);// using the plugin
    $(‘li’).hoverClass(‘hover’);
  • see here for signs of poorly written plugins; http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/
  • See here for details on plugin development; http://www.learningjquery.com/2007/10/a-plugin-development-pattern

http://www.rebeccamurphey.com/jqfundamentals/book/release/html/

jquery-fundamentals-book

Posted on

DataTables

DataTables – post row-rendering;

$(document).ready(function() {
$(‘#example’).dataTable( {
“fnRowCallback”: function( nRow, aData, iDisplayIndex ) {
/* Bold the grade for all ‘A’ grade browsers */
if ( aData[4] == “A” )
{
$(‘td:eq(4)’, nRow).html( ‘<b>A</b>’ );
}
return nRow;
}
} );
} );

More bed-time reading – http://www.datatables.net/usage/callbacks

http://datatables.net/forums/comments.php?DiscussionID=1478&page=1#Comment_7568 looks to be of some use as well for multiple search fields (eg. text field and dropdown box and this and that, etc).

http://datatables.net/examples/server_side/select_rows.html is something also to implement for keeping track of which rows were selected\

http://datatables.net/examples/basic_init/table_sorting.html initial column sorting

$("#example").dataTable({
  "aaSorting": [[ 2, "asc" ]]
 });