Friday, May 26, 2017

xml4jQuery 1.1.0 released

Proud of it. Finally passed a full set of tests on all features I had in mind:

  • event handling 
  • call chain results propagated into callbacks 
  • Promise support for single run and $then() for recurrent call chain invocation 
  • error handling matching the Promise behavior 

$(".toFill")    .html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .xmlTransform( 'test/test.xml', 'test/test.xsl')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');
 Also not so visible:

  • moved tests to ES6, they shortened at least twice 
  • made release build script to match CDN and NPM deployments, before it was a manual process 
  • started to use ApiFusion.com for project documentation 
For next release:

  • IE tests compatibility via AMD loader shim to load ES6 in IE on fly
  • $then() to accept other async chain 
Somewhere in future
  • refactor sources to ES6, target compiler to ES6, 
  • auto-transpiler shim for IE reference implementation

  xml4jQuery.com

Thursday, May 18, 2017

JS in browser tricks

Convert arguments, NodeList, attributes to normal JS array

Little notes for myself
[].concat(arguments).forEach( el=>console.log(el) ) // arguments to normal JS array
Object.keys({a:0}) // keys to array


[... this.attributes].filter( el=>!el.name.indexOf('data-') ).forEach( el=> console.log(el.name, el.value) ) // DomElement attributes (NamedNodeMap) to array es6
Array.from(this.attributes).filter( el=>!el.name.indexOf('data-') ) // -||- es5 + shim
Array.prototype.forEach.call(document.querySelectorAll( 'input[type=checkbox]' ), item => item.checked = true ); // es5
For IE and legacy use polyfills from core-js or babel-polyfill

Sunday, October 16, 2016

Deployed first site to Amazon Elastic Beanstalk

It is a single environment to manage DB, site, firewall, load balancer,... cool stuff. But also quite useful. Need to organize the process though, but it is justifiable. Now could replicate environment without many manual steps. I hope the site will grow to the level of need for auto-scale feature in Beanstalk.

In competitive stacks with automatic scaling given by Heroku or Google Apps Engine there is a huge gap in supported frameworks. The decent CMS is almost impossible to configure and support by night-time project owner there. Unlike others Amazon made a classic LAMP available out of the box. Well, almost: for complete Drupal app I still need to:

  1. add DB in RDS, open access to my IP in security group, create schema 
  2. install app, create key pair for ssh access, open ssh access to my IP in site security group, 
  3. adjust .htaccess zip and download application folder. This archive content is now a primary deployment unit. For convenience it will be placed in git repo. 
My wish to Amazon folks: with covering the steps above you will completely reach the declared goal of creating the ready-to-use complex site like CMS with a push of a button. Just make a GIT repo for each app type and have the process started with a git fork and finished with running app. 

Another wish: make a DNS server( or configure /etc/hosts in each instance) a part of BeanStalk so entries like "dbhost" could be used inside of instances and configured as part of sub-cloud without ever need to know what is ec2-123-45-678-8.us-west-2.compute.amazonaws.com means.

Tuesday, June 21, 2016

OSX UX is counterproductive

In another words why I hate OSX UX. It is designed for house wives but not for professional. There are many work around but nothing given out of the box like in Windows 10. Most of ways around is to substitute what has been done by OSX.
  • In open dialog there is no space to paste the file path. Even in Xcode. Google's adwise made me hysterical.
    trick CMD+SHIFT+G opens text input for path. Unfortunately it is blank and does not match the current folder. At least TAB makes similar to bash suggestion.
  • No folder tree in finder, neither the current path. trick CMD+I opens folder preferences popup. At least here you could see the breadcrumb where the folder is located. No way to copy into clipboard though.
    hack to create a context menu for folder path. Not for ordinary people, not convenient either.
  • Functional keys so mixed with OS and application that became useless. As sample CTRL-F3 works as in application as in desktop preventing consistent behavior. Look at complains list.
  • Image editor, even primitive is not a part OSX.

Saturday, October 17, 2015

Link with embedded image

Try to click on this smile link and browser should open the new window with image but without any server connection. The image will be taken from the link itself.

Clean html version of this sample. SVG belong to wikipedia commons

How it could be used? The dynamic content created by JS to be opened as another window. Useful for printable content without server roundtrip utilizing JS and current page data.

Do you know or guess another use?

Friday, July 3, 2015

AmdHarness is capable of CDN fallback

Another phase of AmdHarness has been accomplished. This time the feature I and many folks around been asked AMD authors: to have a fall back in case the CDN is not available.
When the primary application module loader.js failed to load google CDN, the in-project copy of AMD loader is used.
Perhaps you would ask yourself: why it is needed?
The answer is simple. While there are many good CDN reason to use CDN, it is not the environment you have control on. The network could be blocked in intranet, DNS is hijacked by local government, or whatever another reason preventing CDN access ... your app will be dead because the hunt for CDN candies.
Now it is not a case anymore. Embed the AMD loader into app, but make the loader on CDN default one. Enjoy the app running from CDN when available and still serve the app when CDN is broken for client.
Links:
Happy coding!

Wednesday, May 6, 2015

Multiline text trimming with CSS

For some reason I have not found decent CSS only solution for multiline text trimming. Here is a simple and universal solution for current browsers. The height could be set to any you like, just remember to fit whole lines. Partially cut line will not have ellipsis shown properly.

Edit text and watch how the end of this text is trimmed. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Edit text and watch how the end of this text is trimmed. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Live sample

Idea by www.mobify.com/blog/multiline-ellipsis-in-pure-css