Dragula - So Simple it Hurts(Very Useful stuff for every web designer)

Discussion in 'HTML & Website Design' started by masthan_8, Aug 15, 2015.

  1. #1
    Recently I came across a new java script library which is lightweight and very useful to create drag n drop interface for websites. It is a wonderful addition to your library and it is based on Vanilla java script. Anyone familiar with Vanilla JavaScript can get a joyride with this new Dragula.

    To know more about this and get your hands dirty with this new wonderful javascript library Visit the below mentioned link.
    https://github.com/bevacqua/dragula
     
    masthan_8, Aug 15, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I don't know if I'd call 10k minified and 58k normal "lightweight", but then I have a VERY different definition of that than most people, particularly when it comes to JavaScript.

    Though a LOT of the code bloat is simple stuff that could be cleaned up without minification, like the endless pointless "VAR" declarations that could be combined into one comma delimited list, weird needlessly complex class handling functions, multiple IF statements that have the same result...

    It could be far leaner and more useful if the codebase were just cleaned up a bit. Like just this mess:

    var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}
    Code (markup):
    Is a pretty nasty mess to do the job of this:

    var g= typeof window !== "undefined" ? window : (typeof global !== "undefined" ? global : (typeof self !== "undefined" ? self : this));
    Code (markup):
    Which is smaller even with whitespace, and WAY more efficient. Though really I'd question given what it looks like is being referenced like window, self or global if undefined vs. false vs. 0 vs. empty string would matter... in which case...

    var g = window || global || self || this;

    Would probably do the job... though I'd really wonder, is there EVER a situation where this library would be in use that the core DOM element "window" wouldn't exist?!? Seems damned unlikely. I've never seen anyone check for "window" before! The rest of that shouldn't even fire.

    Or just stuff like this:
    var cache = {};
    var start = '(?:^|\\s)';
    var end = '(?:\\s|$)';
    
    Code (markup):
    That could simply be this:

    var
    	cache = {},
    	start = '(?:^|\\s)',
    	end = '(?:\\s|$)';
    Code (markup):
    Minor things, but they add up quick. Laugh is it's done in some places not others, making it look a bit like no common style guide was used, or the devs just blindly did copypasta from one thing to another.

    Has some promise, not wild about the lack of a graceful degradation plan common to this type of scripting on websites (which is why I say don't do this on websites) whilst at the same time, I'm looking for something like this for my first major web application (a big long project that may amount to nothing depending on the answers I get to some questions from the folks at Electron / Atom) so it's interesting to see how others would go about it. Again applications live under different rules and requirements than websites which is why I'm even looking at this.

    Some of it seems very well coded -- a lot of it has me scratching my head going "what the devil is this even trying to accomplish?!?" -- that entire condensed, minified and possibly obfuscated 'first line' being filled with "what is this even trying to do, much less WHY?"

    At the same time very interesting since I'm working on much the same thing -- my needs being that I need to be able to say that it can "be child of this ID", or "child of any elements with THESE ID's (passing an array)", as well as "siblingTo" to say classes or tagnames it can go before or after... and I need a procedural call or other way to attach it to DOM elements created on the fly from the app.
     
    deathshadow, Aug 16, 2015 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #3
    This can be done in 30 lines of javascript (no hack, no compress). It makes use of file reading api. Go to html5rock for tutorial.
     
    ketting00, Aug 17, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I don't think that's what this is -- this is dragging and re-arranging elements on the page, NOT dragging and dropping files from outside the browser to the browser.

    I'm pretty sure that has jack **** to do with the new FileReader Web API object.
     
    deathshadow, Aug 17, 2015 IP