en en en en en en en en en en en en en en en en en en en de en en en en en gu la la la la la en en en en mk en mk en en ru en kn en kn en kn en gu kn uk ru fa en en en en en en en en en en en en en en en en en en en en en en az de az ru en eo en en en hbs_lat uk kn kn kn hbs_lat de en da en en en kn en en en en en en de en en es kn en en en en en en en en hbs_lat en en ko kn en en en en en kn kn en en en lv it en en en en en en en en en en en en en en en en en en en en en en en en en cs cs da en da cs en en cs cs en en en cs cs da en da cs en en cs cs en en en de cs da en da en en en cs da en en en cs cs da en da cs en en cs cs en en en cs cs da en da cs en en cs cs en en en cs cs da en en en en en en zh en en en en en en en en en en en fr en en en en en en en
cool virtual whiteboard service (also: planning poker site)
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
the great works of software
Conceptualizing the Canon of Software Great Works. Not sure if I agree with all of the choices, but I like the idea.
coding is fun: a simple random text table generator
Today I wanted to make some randomly generated tables, you can set the rows and cols and how words per entry... wrapped up here in my old boilerplate html for your copy and paste convenience...
function makeRandomTable(sel, rows, cols, wordsPerCol){
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla purus metus, sed sagittis erat elementum nec. In fringilla, mauris eu congue blandit, massa ante placerat nisl, at semper diam nibh non lorem. Aenean non nibh ligula. Vivamus luctus ligula ipsum, a euismod sapien varius at. Nam et augue nulla. Cras velit nunc, congue in iaculis vel, consectetur ut massa. Nulla condimentum sit amet nunc sed mollis. "+
"Donec venenatis sollicitudin eleifend. Pellentesque vitae adipiscing nulla, eu consequat sapien. Integer auctor metus dolor, sed venenatis lectus congue non. Curabitur vestibulum sem sed quam tincidunt, sagittis hendrerit orci ultricies. Integer at eleifend mi. Nullam magna lorem, ornare vel varius ut, faucibus at neque. Ut commodo purus ac turpis vulputate condimentum sed non metus. Donec sollicitudin tincidunt eros, non blandit turpis ultrices vel. Etiam feugiat lacus magna, nec pharetra risus congue eget. Fusce vitae augue tellus. Aliquam ut ipsum vitae augue adipiscing ultrices. Nullam id dolor ac nibh sollicitudin fringilla. Fusce vitae libero iaculis, tincidunt ligula nec, varius erat. "+
"Aliquam ornare, tellus sed facilisis tincidunt, dolor leo blandit lorem, rutrum porttitor nulla lorem ut mauris. Sed eu consectetur urna, in vehicula dolor. Vivamus neque nibh, consectetur eget porta vitae, consectetur ut lacus. Aliquam erat volutpat. Quisque in nibh porttitor odio aliquet euismod id ac est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget elit tristique, semper lorem nec, porttitor nisi. Cras bibendum tincidunt vehicula. Etiam fringilla nec dolor sed sagittis. "+
"Nullam cursus, turpis sed accumsan condimentum, velit nisi blandit nulla, eget adipiscing quam sapien eget arcu. Sed quis velit leo. Curabitur quis pulvinar lectus. Vestibulum ut nisi ultricies, porta orci at, facilisis ligula. Morbi sed suscipit turpis, vitae tincidunt lorem. Nunc scelerisque nibh gravida mollis consectetur. Cras lacus mi, fermentum vel gravida quis, mollis eu ligula. Fusce porttitor sem quis molestie dignissim. Maecenas sollicitudin commodo libero ut sagittis. Morbi justo dui, commodo vel ipsum vitae, tristique rhoncus diam. Aliquam dapibus iaculis ultrices. Donec tincidunt placerat pellentesque. Vivamus et libero tempor, convallis lorem nec, cursus est. Nam a bibendum eros. Donec et rutrum velit, sit amet dapibus sapien. Vivamus consectetur, diam sit amet molestie sodales, eros elit bibendum est, sed sodales eros eros at ipsum. "+
"Mauris tincidunt faucibus nibh. Vivamus venenatis urna ac est auctor, eget dignissim orci fermentum. Donec eget nisl condimentum, ultrices est quis, sodales justo. Sed aliquam neque nulla, rhoncus lobortis sapien consequat eu. Nullam pellentesque magna turpis, vel consequat massa porttitor ac. Integer sit amet tortor eget ligula ornare sodales. Morbi sollicitudin mi vitae imperdiet volutpat. Nam vel tincidunt est, quis porttitor tellus. Sed aliquet, ante et lobortis laoreet, arcu leo ullamcorper ipsum, sit amet faucibus dui metus ut felis. "
var words = rawText.split(" ");
for(var r = 0; r < rows; r++){
buf += " ";
for(var c = 0; c < cols; c++){
buf += " ";
for(var i = 0; i < wordsPerCol; i++){
buf += words[Math.floor(Math.random()*words.length)] + " ";
buf += " ";
buf += " ";
buf += " ";
Posted by Kirk Is at 1:27 PM No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Monday, April 21, 2014
Many of you probably know about   the "non-breaking space" -- I think it gets used more often for padding than anything else. Lesser known but possibly more useful is ­ the "soft-hyphen", like when you have a compound word or what not, maybe something separated by - or /, and you want to say "it's ok to insert a linebreak here, but otherwise keep these parts next to each other." Word is most browsers now support this. (For a while it was in competition with the oddball tag  , but it seems to have won in this HTML5-ish world.)
Posted by Kirk Is at 2:14 PM No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Saturday, April 19, 2014
cheap infinite scroll in jquery
"Infinite scroll" is what you see on twitter and tumblr, where scrolling to the bottom of the current set of entries triggers the load of the next set.
I was looking for something similar for a work project. The jscroll project seemed to be it at first, but on closer inspection is about loading the next set of static content, and I was looking for a "simpler" trigger of a callback to load the next set of data via jQuery.
I ended up rolling my own, with a little help from the stack overflow entry Check if element is visible after scrolling.  (Note for this and the next code bit: for this project, my company uses the more verbose "jQuery()" rather than "$()" because of namespace conflicts. Also, I am encouraging the use of "jqo" as a Hungarian Notation prefix to indicate a jQuery Object.)
So when I set up the table, it's something like:
jqoTable = jQuery("  ");
jqoScrollTrigger = jQuery("  ");
I made a variable noMoreToLoad that is set to true when the query has returned all available records (in practice, this is set when the "next batch" query returns an empty array). So at the end of of my data receiving function, I write
And then the supporting code is:
var checkForInfiniteScroll = function(){
var isTriggerScrolledIntoView = function(){
var docViewTop = jQuery(window).scrollTop();
var docViewBottom = docViewTop + jQuery(window).height();
var elemTop = jQuery(jqoScrollTrigger).offset().top;
var elemBottom = elemTop + jQuery(jqoScrollTrigger).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom  = docViewTop) );
So why am I doing all this? "mixgrowGrid" is meant to be a substitute for jQuery datatables. Datatables is great if you want to take an existing html table on a page and bless it with client side functions like sorting and filtering. It handles infinite scrolling too, but poorly in my opinion: you pretty much have to have a fixed height display window (datatables seems more geared at pages where a table is just one element in the page flow, rather than being the center of attention, like it is on my company's dashboards) For the most part, I am less happy with widgets that carry their own scrollbar. My other beef with Datatables (besides its general complexity, which is par for the course for a genral purpose tool that tries to solve a LOT of different people's problems...) is that it is not great for mixed data; like if you have some parent/children rows, and especially if you would like some of the children rows to use "colspan". My mixgrowGrid says what it features in the name: mix-ed data (each type can have different column definitions) and designed to grow on the page.
There's a lot to do before this is ready for prime time: I will be making a footer that uses position:fixed to glue it to the bottom of the page, independent of the scrolling, and will probably have to do something similar for the headers, as well as install a "loading" notification. But one of the nice thing about rolling your own (the classic "Make vs Buy" conundrum) is that you can have a lot of control over that kind of detail, without having to learn and/or hack on someone else's big code base.
The header turned out to be pretty cool to do; I had to make a separate table above the main table (which means I had to make a separate function to make sure the widths were consistent with the main table, I didn't get that for free) and I had it be position:relative - the nice thing about that setting vs float is that it still preserves its space in the page flow, so things are simpler when it's "normally" visible, I don't have to think about making space for it. Then, on window scroll and resize (i.e. the same events as for infinite scrolling) I had this function, for the wrapper element (also position:relative, so that any children will be repositioned relative to it) and header table:
var adjustHeaderLocation = function(){
var eTop = jqoTableWrapper.offset().top;
var scrollTop = - jQuery(window).scrollTop();
var newOffset =  -(scrollTop + eTop);
if(newOffset < 0) newOffset = 0;
FOLLOWUP TO THE FOLLOWUP:
I re-ran into a problem we had already solved, where it can be surprisingly tricky to make two tables the exact same width: border and padding and what not makes things weirder than you might expect. Some people suggest making a div version of the headers instead, but the short of it is you want to read the .outerWidth, not the .width()of the "td"s in question, and then apply that as the width, max-width, and min-width of the respective matching "th"s. Stackoverflow had some good discussion, including this bit of democode -- it looks like it could be a plugin, almost. I wasn't sure if the complex table I was building (with multirow headers) would use it as a drop-in, but I'll keep it in mind for the future.
Posted by Kirk Is at 10:17 AM 1 comment:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Friday, April 18, 2014
more improvements to object like encapsulation in js
An improvement to what I wrote about here-- I was still thinking in terms of a singleton pattern, but I think it can be easily extended to be reusable:
var somePrivateVariable = init;
var somePrivateFunction = function(){
//still has access because of function level scoping
You can make multiple instances
var m = new someObject(1);
var n = new someObject(2);
Posted by Kirk Is at 10:43 AM No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Wednesday, April 16, 2014
simple pixel programs for OSX
There were two things I started missing when I switched from Windows to OSX: one is the program IrfanView for folder based image viewing and basic manipulation (resizing, cropping, rotation). Those functions are handled pretty well though with a combination of Finder's builtin viewer (hit space when a file is selected, then use arrow keys to navigate through the folder itself) and OSX Preview.
The other was an editor more advanced pixel work, without running smack into the cost and/or usability hurdles of Photoshop or GIMP. On Windows I enjoyed Paint.NET (after a decade of getting by with an ancient copy of Paint Shop Pro). It was tougher on OSX -- Pixelmator was somewhat ok, but did a lot of things oddly, and fell into the mistake of assuming its native format was preferable for everything. (Sometimes you just want to open a PNG, edit some pixels, and save it again, but that wasn't trivial in Pixelmator.)
Now, however, I think I might have found my new favorite: "Acorn". I didn't experiment with it before, but it (temporarily?) knocked down its price from $50 to $15, and it seems well worth it.
So: "Acorn" for OSX. Recommended, and well-priced. (For the time being at least.)
Posted by Kirk Is at 10:08 AM No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Newer Posts Older Posts Home
Subscribe to: Posts (Atom)
This blog is all about making great UIs in the browser, with a side of UX excellence. See alienbill.com for some of Kirk's portfolio.
a little front end reading
weirdbinary: fun (?) with an alternate binary pack...
grumblesmurf: pointless css lint rules
fun with word line art
the aesthetic of the old and "worse is better"
note to self: custom pretty url path handling/redi...
get offa my lawn grumbling about new school lintin...
a simple jquery slot machine effect
Update! This is now a proper github project with a lot of details filled in...  More Information Here ! For work they wanted a "jui...
JQuery, JSON, and Java Servlets...
So my blog has gotten a bit dry lately. It has to do with my new job: there's some flashy stuff, but less than at my old gig, and I'...
My  html5 w/ jQuery boilerplate code  grabs jQuery from the CDN, but sometimes I pull it down for local development. (I still use jQuery 1.9...
paste images right into chrome!
OK, this, despite some serious limitations, is right-sexy, "browsers can do that now?" stuff. I found a page that has a jQuery &...
For some reason, the standard set of CSS cursors don't include a magnifying glass. But most browsers support .cur files, i.e. custom c...
animation nation part 2: introduction to raphael.js
So the other day I was talking about making an animation for my company's registration process. I quickly put together an animatio...
https://javascript30.com/  - build 30 things in 30 days. Interesting!
more html5 sound toys and games goodness
Last night I gave a brief presentation about my lowLag.js audio library at the Boston HTML5 Game Dev Meetup . I was able to show off the pr...
Merry Christmas! Today is the last day for my  2016 advent calendar . I admit it ends on a bit of wimper, some of the earlier entries were...
jquery animating background positions (and colors)
Short but sweet: "background-position" tends to be a compound kind of setting, with a separate value for x and y, but the single k...
View my complete profile
Simple template. Powered by Blogger.