2015年08月27日

Stop cell in HTML table from moving when using the browser finder

This is weird so I'll try to keep it simple.

I have an html table with td elements that have overflow: hidden; and text-overflow: ellipsis; set. There's some other css to make the text actually ellipse but that's not the point other than to note it's all html and css, no javascript to make this happen.

So if the text in a cell is long enough the text will be truncated to a particular width.

e.g. 'a really long name' -> 'a really lo...'

Now the awkward part is that when this occurs and you use your browser finder (ctrl+f/cmd+f) to search for text that has been truncated, the text in the table cell shift so the text that you're looking for is in a visible position but it's still not actually visible because it is being truncated.

Given the above text as an example if you searched (ctrl+f/cmd+f) for the text 'name' the text would shift to the left so that it would no longer be positioned correctly and there would be a yellow highlight over the position where the text 'name' is. Obviously the name value is actually present in the DOM but it's not visible to the user because it's being truncated.

Here's an image of this behavior on my system.

I noted this behavior in Chrome - 43.0.2357 but not in Firefox - 38.0.5.

Any ideas on how to prevent this cell data from shifting to the left?

2015年08月27日

Gulp Sass Bourbon, Not give me style.css

I have the problem, is went I run the task, everything is ok, but never give me the style.css result or output.

var gulp = require('gulp'),

concat = require('gulp-concat'),

uglify = require('gulp-uglify'),

sass = require('gulp-sass'),

compass = require('gulp-compass'),

neat = require ('node-neat').includePaths,

bourbon = require('node-bourbon');



// Bourbon Compile

gulp.task("compileBourbon", function(){

    gulp.src('./src/sass/bourbon.scss')

    .pipe(sass({

        includePaths: require('node-bourbon').includePaths,

        style: 'compressed',

        quiet: true

    }))

    .pipe(gulp.dest('./builds/development/css'));

});

Answers

Bourbon is a mixin & function library so simply using it won't actually output any code, similar to how defining a function doesn't actually run the function. Neat is the same way, it only defines things that can be called but doesn't actually make any code by itself.

You'll want to @import "bourbon"; and @import "neat"; and then right css that uses the imported libraries like…

    // mystyles.scss

    @import "bourbon";



    .my-class {

      @include position(relative, 5em 2em null null);

      color: blue;

    }

As a side note, you probably don't want to be importing/using bourbon and compass at the same time. There is a bit of over lap and weird things can happen if you use them both.

2015年08月27日

Run parametrized task using grunt.task.run(taskname)

I did stackoverflow search and looked at Grunt API docs but couldn't find a way to run a parametrized task using grunt.task.run(taskname).

I have a simple task which accepts a parameter and prints the message on console:

grunt.registerTask('hello', 'greeting task', function(name) {

   if(!name || !name.length)

        grunt.warn('you need to provide a name');



    console.log('hello ' + name + '!');



});

I call the above task using below task which validates the task and if task exists then it runs it:

 grunt.registerTask('validateandruntask', 'if task available then run given  task', function(taskname) {

       if(!taskname || !taskname.length) {

           grunt.warn('task name is needed to run this task');

       }



    if(!grunt.task.exists(taskname)) {

        grunt.log.writeln('this task does not exist!');

    } else {

        grunt.log.writeln(taskname + ' exists. Going to run this task');

        grunt.task.run(taskname);

    }



});

Now from command line, I am passing 'hello' task as parameter to 'validateandruntask' but I am not been able to pass the parameter to 'hello' task from command line:

This is what I tried on command line but it didn't work:

grunt validateandruntask:hello=foo

grunt validateandruntask:hello:param=name

Answers

First thing, the way to pass an arg through the command line is to use :.
For example to call hello directly:

grunt hello:you

To call it with multiple arguments, just separate them by :, like

grunt hello:mister:president

And to use these multiple arguments in the task, you do the same as plain Javascript: use arguments (all details here):

grunt.registerTask('hello', 'greeting task', function(name) {

  if(!name || !name.length)

    grunt.warn('you need to provide a name');

  // unfortunately arguments is not an array,

  // we need to convert it to use array methods like join()

  var args = Array.prototype.slice.call(arguments);

  var greet = 'hello ' + args.join(' ') + '!';

  console.log(greet);

});

Then you want to call grunt validateandruntask:hello:mister:president, and modify your code to handle the variable parameters as well:

grunt.registerTask('validateandruntask', 'if task available then run given  task', function(taskname) {

   if(!taskname || !taskname.length) {

       grunt.fail.fatal('task name is needed to run this task');

   }



  var taskToCall = taskname;

  for(var i = 1; i < arguments.length; i++) {

    taskToCall += ':' + arguments[i];

  }

  console.log(taskToCall);



  if(!grunt.task.exists(taskname)) {

      grunt.log.writeln('this task does not exist!');

  } else {

      grunt.log.writeln(taskname + ' exists. Going to run this task');

      grunt.task.run(taskToCall);

  }

});