Thread: Help with some website design...

  1. #76
    Bored Programmer
    Join Date
    Jul 2009
    Location
    Tomball, TX
    Posts
    428
    Node.js's asynchronous nature and I'm not sure if it's a good thing or not.
    Its just a tool. When you learn how to use it then you will find it helpful, but when you don't expect its results it can be frustrating.

    The same thing happens in the DOM though imagine your object calls a jQuery animation and you want to write a step function. On the next iteration it won't be your object calling the function it will be the window. In the same way node.js provides the global object that will call your function. Not sure if its good or bad its just a paradigm shift from other languages. You can get your object by passing it into the function, making a variable to store it in the parent function, using the .bind(this) function method, or es6 fat arrow.

    Synchronous behavior can be murderous on the DOM rendering engine pipeline. There are web workers that simulate synchronous threads in JavaScript. The support isn't wide yet, but they can be pretty powerful.

    I'll give an example: We are currently building a database that manages a set of around 2.9 million and counting rent matrices. They are populated with every bit of information you would need to show all the details of each unit, when its available ect. Web workers have become the main way to import and export data onto the website. It is dependant on a daily updates, and accurately populated data. Data on that scale isn't small either so we have workers running nearly all day in node.js just building this website. The downside of workers in the dom is they don't have access to the dom, but that isn't really what they are for.

    I thought since you are requiring the results[1] spot to be the parameter value, it might also be a good idea to guard against the user passing in "(", ")" too. Although I don't know for sure that these would even be valid in the name?
    Yea that is a good idea, I haven't really protected it from invalid entry yet. That function is not directly accessible to the user since it is private, but the same variable they pass when they call the get method then gets passed to that function so indirectly it could be a problem.

    For a few months we'll probably just be using it at work on some of our Apps. The point is to go through multiple screens without causing page reloads by using
    Code:
    history.pushState
    and
    Code:
    history.replaceState
    We're hoping to greatly decrease the number of calls to the DOM rendering engine and get around it's shortcomings to make our hybrid apps feel more native.

    We figure if you just ask the rendering engine to animate transitions for a set of sequences rather than asking for a load everytime we'll be able to start playing by the rules a little more like the native guys do.
    Last edited by Lesshardtofind; 04-29-2015 at 07:58 PM.
    Virtual reality hello world http://www.rodneybrothers.com/vr/vrh...rld/index.html in html and javascript.
    Viewable with dodocase, google cardboard, OR, and other compatible VR gear.

  2. #77
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    Oops, I see I mis-typed. I do see the value of executing instructions out of order but my initial reaction is that the behavior seems to be implied rather than explicitly called by the programmer in code.

    Maybe I'm just too used to how other languages work but I, in my own personal opinions, would prefer to see some form of syntax that's like, "Hey, I'm going to be doing this stuff in a weird order, guys!" The example I saw was just a print-sleep one. Print one variable, sleep for 2 seconds and then keep printing to the console or w/e.

    The PHP one behaved exactly like a C program would but the Node.js one did not. It's neat behavior and I do like what it brings to the table. I just wish there was a more explicit way to mark how data dependencies will affect the execution of the code. I'm assuming it's data dependencies that are determining how the instructions are executed here. I could be wrong on that part.

  3. #78
    Bored Programmer
    Join Date
    Jul 2009
    Location
    Tomball, TX
    Posts
    428
    I'm assuming it's data dependencies that are determining how the instructions are executed here. I could be wrong on that part.
    You aren't wrong at all this is a tough spot in JavaScript it gets real racey in those parts (pardon the pun xD). I still get confused by it, but it usually comes down to everything behaving exactly like it is programmed and I just programmed it wrong the in framework of behavior. JavaScript is trustworthy it just may not always behave the way that you anticipate.
    Virtual reality hello world http://www.rodneybrothers.com/vr/vrh...rld/index.html in html and javascript.
    Viewable with dodocase, google cardboard, OR, and other compatible VR gear.

  4. #79
    Registered User Alpo's Avatar
    Join Date
    Apr 2014
    Posts
    877
    Quote Originally Posted by MutantJohn
    I'm assuming it's data dependencies that are determining how the instructions are executed here. I could be wrong on that part.
    You are pretty much right on that part, if I understand you correctly. I remember someone once saying "You can't have just a little asynchronous code", because introducing it tends to have a ripple effect. Take for instance if we want to write some vanilla JS to make asynchronous requests easier:

    Code:
    // Let our callback have this signature:
    // function (error, data);
    
    function request(options, callback) {
        var req = new XMLHttpRequest();
        // Remember in JS that the || operator evaluates to the first operand with true-ish value
        // (Or the right most operand if none do)
        req.open(options.method || "GET", options.path, true);
        req.addEventListener("load", function () {
            if (req.status < 400) {
                callback(null, req.responseText);
            } else {
                callback(new Error("Network error: " + req.statusText, null);
            }
        });
        // Can add additional callbacks to the request object here...
        req.send(options.body || null);
    }
    Alright, so if I didn't screw that up, we can now make requests with a call that passes in an object and a callback function (The only non-optional field of the object is the 'path' field). But now I want a function to make getting JSON easier, but because I wrote the original function in async fashion, the new one must be also:

    Code:
    function requestJSON(options, callback) {
        // We wrap the passed callback in our own function to parse the data:
        request(options, function (error, data) {
            var result;
            if (error) {
                callback(error, null)
            } else {
                try {
                    result = JSON.parse(data);
                } catch (e) {
                    error = e;
                }
                // Notice how the possible errors are continuing down the call stack :D
                // This is an odd part of asynchronous programming, but I've noticed this is how 
                // other modules do it...
                callback(error, result);
            }
        }
    }
    Now any code that wants a JSON object from a server can get it, and it will be available in the context of the callback function passed to requestJSON:

    Code:
    requestJSON({path: "/resources/map.json"}, function (error, object) {
        // if no error happened, we have the object.
    });
    This method of programming can be surprisingly intuitive. It's not really limited to JavaScript either, but since all functions are proper objects (which is awesome IMO) it just comes
    more naturally. Functions are pretty much the most awesome part of JS.

    [Note: I start going off on a tangent here]

    Like for instance in the 'request' function above, you can see that I used the 'req' variable in the onload callback for the request, even though that function will only be called after execution has left the scope of the function. I could have used 'this' instead, because it is bound to the XMLHttpRequest, but I was trying to show how functions created maintain a link to the context they were created in. This is an important concept to keep in mind when designing your code.

    For instance in the small example of my canvas drawing program, you probably noticed that it looked weird:

    Code:
    socket.on("drawing", (function () {
        var object_To_Hold_Drawing_Commands = Object.create(null);
        return function (toDraw) { 
            // ect...
        };
    }());
    The inner function that is being returned is the one actually called on the "drawing" event. All the data needed converges in that function only, so I wrote what's called a 'closure' that inserts a scope (containing the object that will hold commands) directly in the line of the returned function. No other place has access to that scope, and this allows for encapsulation.

    Sorry I just realized I went off on a tangent lol, I'm leaving it in anyway in case you find it helpful in some way .

    Quote Originally Posted by Lesshardtofind
    Synchronous behavior can be murderous on the DOM rendering engine pipeline. There are web workers that simulate synchronous threads in JavaScript. The support isn't wide yet, but they can be pretty powerful.
    I actually just discovered this earlier today, I've been looking to see if I could get it on the Raspberry, it looks really cool.
    WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;

  5. #80
    Bored Programmer
    Join Date
    Jul 2009
    Location
    Tomball, TX
    Posts
    428
    Functions are pretty much the most awesome part of JS.
    I agree 100%. The things that made JavaScript weird to me when I started learning it are what I love about the langauge now.

    I actually just discovered this earlier today, I've been looking to see if I could get it on the Raspberry, it looks really cool.
    When you get something going using them share it with me. I'm trying to get a good project going using promise generators, websockets, and webworkers just to try out some new things I'm not familiar with, but work has had me by the balls this week. I'm having to jump into a 6 month project that is 98%, but has to be delivered by the end of this month and the two programmers that wrote this mongo npm database api for a drupal front end are gone from the company as of friday. I'm playing catchup on the code base all week.

    Now I'm going on a tangent, but have you used any promise generators yet? I really want to get them down, but I'm still having troubles identifying practical uses (I hate just throwing new ideas at something when they aren't the better tool for the job).

    I watched these two videos
    https://www.youtube.com/watch?v=obaSQBBWZLk (skip past the first part that explains the basics the last two ways are pretty interesting)
    https://www.youtube.com/watch?v=QO07THdLWQo (this one really shows the potential of promise generators)

    And its really got my mind going.
    Virtual reality hello world http://www.rodneybrothers.com/vr/vrh...rld/index.html in html and javascript.
    Viewable with dodocase, google cardboard, OR, and other compatible VR gear.

  6. #81
    Registered User Alpo's Avatar
    Join Date
    Apr 2014
    Posts
    877
    Quote Originally Posted by Lesshardtofind;
    Now I'm going on a tangent, but have you used any promise generators yet? I really want to get them down, but I'm still having troubles identifying practical uses (I hate just throwing new ideas at something when they aren't the better tool for the job).

    I watched these two videos
    https://www.youtube.com/watch?v=obaSQBBWZLk (skip past the first part that explains the basics the last two ways are pretty interesting)
    https://www.youtube.com/watch?v=QO07THdLWQo (this one really shows the potential of promise generators)

    And its really got my mind going.
    Oh wow, no I don't think I had heard of this thing before. It does look useful, I will have to look into it more. I've watched several videos on the new standard, but I have trouble retaining things until I've used it. I'll have to try using the generators using the script tag trick from the video .

    Quote Originally Posted by Lesshardtofind;
    When you get something going using them share it with me. I'm trying to get a good project going using promise generators, websockets, and webworkers just to try out some new things I'm not familiar with, but work has had me by the balls this week
    That sounds like a powerful combination! When you say websockets, do you mean the "websocket" Nodejs module, or just any library that handles the protocol (or maybe the protocol itself)?

    I've used the "socket.io" module (~v0.9). It uses the Websocket protocol, but not strictly from what I understand. Basically the client side library uses the HTTP 1.1 'upgrade' field to switch protocols when you call io.connect(), where io is a global from the library. It lists compatibility with browsers that don't use Websocket, but when I tested it on IE8 it was noticeably slower. You just can't get that kind of speed with long-polling and whatnot. Also the documentation is so horrible that I've actually learned more just from enumerating components of the module lol.

    Still, I love what Websocket represents as far as speed of messages. A lot of the stuff you can do with it is either impossible with HTTP or requires serious arcane knowledge.
    WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;

  7. #82
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    Now I'm going on a tangent, but have you used any promise generators yet? I really want to get them down, but I'm still having troubles identifying practical uses (I hate just throwing new ideas at something when they aren't the better tool for the job).
    O_o

    I have no problem thinking in terms of event completion so I actually prefer to work directly with promises, but I did want to make the point that `yield', iteration, and limits can easily be hidden behind an interface.

    [Edit]
    I typed code into browser without testing so expect problems.
    [/Edit]

    Code:
    var anobject;
    while(anobject = load(['/object1.json', '/object2.json', '/object3.json'])) {
        // do stuff with `object1' then `object2' then `object3'
        console.log(anobject.whatever);
    }
    // do stuff now that all of the object# specific stuff is done
    The approach could be easier for a lot of people to understand than the equivalent.

    Code:
    var c, col = load(['/object1.json', '/object2.json', '/object3.json']);
    for(c = 0; c < col.length; ++c) {
        col[c].then(function (anobject) {
            // do stuff with one of `object1' or `object2' or `object3'
            console.log(anobject.whatever);
        });
    }
    Promise.all(col).then(
        // do stuff now that all of the object# specific stuff is done
    );
    I love generators. I use them with the Python language all the time. I do however think the overloaded use of `yield', waiting on a promises, is just a way to simplify structuring code in the presence of so many interfaces returning promises. My own library includes some code which shims a few extremely complex bits when demanded because of the cost. As is, the interface uses a callback which is hidden behind completion of a promise; if I could instead return the actual object instead of passing the object to a callback, I absolutely would return the actual object.

    The other day Alpo said that asynchronous code tends to have a ripple effect; using the new juice, including promise generators, has a potential to limit that problem. I don't know if you would say "practical", but I would say "pleasant".

    Soma
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

  8. #83
    Bored Programmer
    Join Date
    Jul 2009
    Location
    Tomball, TX
    Posts
    428
    I have trouble retaining things until I've used it
    Me too

    When you say websockets, do you mean the "websocket" Nodejs module, or just any library that handles the protocol (or maybe the protocol itself)?
    Anything. I've spent alot of time doing single player interactive games/apps, but I still haven't gotten around to putting multiplier connections into it. I've made apps that run html autobound off a mongo database using value binding, but this isn't direct connection and interaction between user events. I really want to get down to that, even if its just grabbing someones chess library and just wiring up the events. That drawing program you built with rasberri sounds awesome. I want to build something like that.

    I have no problem thinking in terms of event completion so I actually prefer to work directly with promises, but I did want to make the point that `yield', iteration, and limits can easily be hidden behind an interface.
    Yea the yield part is still getting me. I just need to use it like alpo said and I'm hoping it will start to click. I know the project sitting right in front of me needs it, but I can't put my finger on where yet.

    My own library includes some code which shims a few extremely complex bits when demanded because of the cost.
    You got a git link to that?

    The other day Alpo said that asynchronous code tends to have a ripple effect; using the new juice, including promise generators, has a potential to limit that problem.
    I read an article that was super, pro functional programming that pointed out the side-effects of scale-ability on largely built promise frameworks. But I've also seen the statistics of speed in mongo type databases versus sql databases in real world applications so I end up thinking the benefits of promises in the long run far outweigh the cots.

    I have to always leave on a tangent..... this guy uses a PNG compression and bit programming to write a crazy JavaScript effect in under 1024 characters for the ENTIRE html file.
    http://www.youtube.com/watch?v=RTxtiLp1C8Y&t=15m16s
    Virtual reality hello world http://www.rodneybrothers.com/vr/vrh...rld/index.html in html and javascript.
    Viewable with dodocase, google cardboard, OR, and other compatible VR gear.

  9. #84
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    I just need to use it like alpo said and I'm hoping it will start to click.
    O_o

    Code:
    var c, sBase = '://example.com/images/';
    for (c = 0; c < 10; ++c) {
        yield sBase + c.toString()
    }
    You may not see the advantage of `yield' with simple examples. You could return an array containing every element which could be iterated over just as easily as the generator. The advantage becomes more apparent when you have multiple sources of errors in a complex task. You might imagine `toString' performing a complex and expensive task which has multiple points of failure. The client, code iterating over the generated objects, can handle collection failures or individual failures with obvious code. You might argue that one could expose the same behavior with by packaging the state into an object using an explicit instance of the iterator pattern, but the code using `yield' is obvious.

    I think you are just making the point of `yield' more complex for no reason. The `yield' operator doesn't offer a new mechanism so much as a simple and obvious way of expressing established mechanisms. You don't need to return a collection with a bunch of `push' objects only for the client to sample the collection one element at a time; you can `yield' each object allowing the client to naturally sample one element at a time. You don't need to implement an instance of the iterator pattern; you can `yield' each object allowing the environment to generate the iterators on your behalf.

    You got a git link to that?
    I don't; I don't even use "git" at all.

    The one shim is a simple reworked implementation of a popular shim. I hate paying for stuff I don't need, and I refuse to automatically play anything. My changes separate the bulk of the shim from poster handling and buffering behavior. Basically, I conditionally shim just enough of the `video' element to display a poster with proper CSS handling and buffering behavior even if the video isn't played. If the user performs an action requiring the shim proper, the shim is fetched while the initial buffering animation is displayed.

    I am also shimming the Canvas API in pure Javascript. (I know. I am indeed crazy, but I'm not doing the Canvas because I care about old browsers. I'm just playing around as part of my reeducation in Javascipt because until somewhat recently I haven't touched anything web development in a long time.) I have a very tiny bit of code to handle the presentation of a primary application screen with or without native Canvas support. The Javascript implementation is then, if necessary, fetched as part of loading the applications primary resources before providing the context and resource manager to a callback.

    I read an article that was super, pro functional programming that pointed out the side-effects of scale-ability on largely built promise frameworks.
    I may or may not have read the referenced paper, but I don't imagine the argument attacks the mechanism so much as the implementation.

    Soma
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

  10. #85
    Bored Programmer
    Join Date
    Jul 2009
    Location
    Tomball, TX
    Posts
    428
    I don't; I don't even use "git" at all.
    I'm guessing you still use some sort of version control.

    The one shim is a simple reworked implementation of a popular shim. I hate paying for stuff I don't need, and I refuse to automatically play anything.
    Very interesting. Wish I could see the code. I agree with the paying sentiment. I usually get all my shims and libraries from github, and also try to help give back by putting my own solutions out there for free as well.

    I know. I am indeed crazy, but I'm not doing the Canvas because I care about old browsers. I'm just playing around as part of my reeducation in Javascipt because until somewhat recently I haven't touched anything web development in a long time.
    Crazy maybe, but I also like to build things from scratch... which I get nudged for at work. My boss is always saying to use a library first and program it only if there isn't one. Which I can agree he's probably right. Usually if a library does something I don't understand I really like to try to implement something myself so I can get a full grasp of the problem and what it took to solve it.

    You seem to have quite a firm grasp on it for not touching it in years. You probably know more about JavaScript than 3/4 of our web developers at work (its still a small startup). Not too surprising though you have a solid understanding of programming concepts in general the rest just ends up being syntax differences.

    Anyways if you start anything interesting for free time work I would be interested in collaborating. I have enjoyed this thread very much as about 2 1/2 years ago I moved from C++ to JavaScript as my main language and I just somehow fell in love with it.

    As for the yield stuff I totally get how it works, but Its just one of those things.. I'm waiting until it occurs to me that I SHOULD use it in this situation. When it comes to coding at work I try to keep my spent innovation points to a minimum and just keep to clean testable code.

    The experimental stuff I save for my free time and once I have a full grasp I'll bring the ideas back around into my workflow. Or decide the tech isn't ready yet and not use it at all.

    I just recently went through this with polymer. I thought the library and web components concept in general was amazing, and for the most part it worked like it should. All my hopes fell apart when we started building polymer web components into hybrid (ios, and android) apps, and shadow dom selectors started to splat the entire application. I'll be keeping a close eye on the project though once it actually hits alpha or beta I'll try using it again. I think the future of web programming will change dramatically when web components and harmony are just the normal accepted releases.
    Virtual reality hello world http://www.rodneybrothers.com/vr/vrh...rld/index.html in html and javascript.
    Viewable with dodocase, google cardboard, OR, and other compatible VR gear.

  11. #86
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    I don't; I don't even use "git" at all.
    Whoa, then where do you post your code online for all the world to see?

  12. #87
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    Whoa, then where do you post your code online for all the world to see?
    O_o

    I still post occasional patches to mailing list, but I don't really have a place for my own work. I had been using "Google Code" after having a bit of issue with "BitBucket", and I tried using the migration, but I wasn't happy with some of the results. I guess you could say I'm still looking.

    Soma
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

  13. #88
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    Github is pretty legit though. It's a nice, clean site.

  14. #89
    (?<!re)tired Mario F.'s Avatar
    Join Date
    May 2006
    Location
    Ireland
    Posts
    8,446
    Quote Originally Posted by phantomotap View Post
    I still post occasional patches to mailing list, but I don't really have a place for my own work. I had been using "Google Code" after having a bit of issue with "BitBucket", and I tried using the migration, but I wasn't happy with some of the results. I guess you could say I'm still looking.
    If you are after some free (as in freedom software) hosting solution that doesn't force you into vendor lock-in like GitHub or BitBucket, you may be interested in Kallithea. Fully supports Mercurial out-of-the-box. If I recall that is your VCS of choice.

    I've been testing it with Git on my home server and I'm liking it very much. Completely self-hosted. Don't be fooled by the beta status. It's very stable and robust. I wouldn't trust it with the more serious projects just yet. But for the pet projects, know that Kallithea has disrupted my 5 year-old love for Redmine.

    EDIT: Gitlab is another option for a self-hosted SCM. But there's a few problems. It's only free if you go with the basic features and also forces you into vendor lock-in, by making it very hard to migrate your entire SCM history to other systems.
    Last edited by Mario F.; 05-03-2015 at 01:07 AM.
    Originally Posted by brewbuck:
    Reimplementing a large system in another language to get a 25% performance boost is nonsense. It would be cheaper to just get a computer which is 25% faster.

  15. #90
    C++ Witch laserlight's Avatar
    Join Date
    Oct 2003
    Location
    Singapore
    Posts
    28,413
    Quote Originally Posted by phantomotap
    after having a bit of issue with "BitBucket"
    I see what you did there.

    Quote Originally Posted by Mario F.
    If you are after some free (as in freedom software) hosting solution that doesn't force you into vendor lock-in like GitHub or BitBucket
    Do you find that these sites have vendor lock-in with respect to the core aspect of code hosting? The way I see it, the vendor lock-in happens at the level of the bells and whistles like bug tracker or wiki. The version control repository itself, assuming that you use distributed version control, is not locked-in, other than the lock-in that happens at the level of the version control tool.
    Quote Originally Posted by Bjarne Stroustrup (2000-10-14)
    I get maybe two dozen requests for help with some sort of programming or design problem every day. Most have more sense than to send me hundreds of lines of code. If they do, I ask them to find the smallest example that exhibits the problem and send me that. Mostly, they then find the error themselves. "Finding the smallest program that demonstrates the error" is a powerful debugging tool.
    Look up a C++ Reference and learn How To Ask Questions The Smart Way

Popular pages Recent additions subscribe to a feed

Similar Threads

  1. Replies: 2
    Last Post: 12-11-2012, 12:25 AM
  2. Website Design....again
    By Sentral in forum A Brief History of Cprogramming.com
    Replies: 14
    Last Post: 10-29-2006, 05:47 AM
  3. Website design!
    By Sentral in forum A Brief History of Cprogramming.com
    Replies: 28
    Last Post: 10-07-2006, 12:38 AM
  4. website
    By the Wookie in forum Windows Programming
    Replies: 1
    Last Post: 11-07-2002, 02:25 PM