Posts

Showing posts with the label Javascript

Javascript: Loop with Deferred Calls

    This is a solution I can across that really helped me out in a bind. I need to use a for loop with a series of calls, and each call took sometime to execute. So I looked at how I could make the calls asynchronous rather than synchronous. (function def() { var def = (new $.Deferred()).resolve(); var list = new Array(15);//My hacky way of doing it. $.each(list, function (index, val) { def = def.pipe(function () { return calls(index); }); }); })(); Example:  http://jsfiddle.net/nkzqa82s/7/ This example doesn't completely show the advantages but more of how the concept work. With my problem what I had was a multi-leveled or hierarchy rather leveled system of data. So data that I requested was start at the top level and return lower levels, then with values I would request the data for each values' lower level. This process worked for me but I'm  not able to completely show  for a number of reasons. Notes     If you look at the results you will

Ng-grid: Export Feature

   From a front-end standpoint it's easy to use ng-grid since a lot of the variables already exist. What I did in my implementation was leverage as much of ng-grid as possible before creating my own functions. Displayed fields in the grid that are checked by default are also checked in the export dialog. This feature was written up to handle hidden fields in the grid as well and gives the user the option to select or deselect all the available fields to export. However this example assumes that "name" field is a key on the server side and if passed to the server could give you whatever is in the database. So if you were looking to attach this to a more meaningful system you would pass just the key and fields to the server in order to get your results.   Solution: <!--Html part--> <button type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#exportModal">Export to Data</button> <

Project: DuckSauce Notes Part III

    It's been a couple of weeks since I've released an update on this project, but much of it is due to the fact that I have completely reimplemented my approach. I now have a better understanding where browserify will come into place and where grunt will come into place. Most importantly I understand the v8 javascript engine which runs underneath the chrome browser; this is a major win for me. Here is my  previous article ... Day 1 Day 7: GruntJS LiveReload--Take Productivity to the Next Level | Openshift Blog I basically want to remove the need for LiveReload. Moving from CodeKit to Grunt Watch + LiveReload for Real-time JavaScript/LESS/SASS Compilation - Justin Klemm Another great example what LiveReload can do. Chrome Apps Office Hours: NodeJS in Chrome packaged apps - YouTube Example with Browserify but you can't using it against Grunt. Iced Blog - node js in chrome http://stackoverflow.com/questions/16788731/grunt-watch-multiple-files-compile-only

Chrome Extension Project: Aptitude Words

    I am currently working on two chrome extension projects, however this one is more of a warm up for what is ahead. Not to be confused with my other Chrome Project Ducksauce and not that I worked very long on this but I really should get back to my Unity project... So ignore these until I'm free again. Notes to self.      Don't using the create context menu code in a regular script because everytime you right click. There is a difference from the background page and the extension popup page. Each has it's own devtool and console page. For the background you have to click on the link provided in chrome://extensions/  for chrome. As for the popup you can just inspect it like you would with any page. However if you reload or update the extension the window for inspecting it closes. Question How do I use the storage in the popup as I would for the background page? How to communicate between popup.js and background.js in chrome extension? - Stack Overflow sending c

Creating a More Intuitive UI with Bootstro.js

    Sometimes you can go to great lengths to implement a UI that is more intuitive for your users but still end up with some of them lost. In the past I have personally experienced this, specially when moving users from an old system to something completely new one. So what do you do? One approach that I was given was to write out documentation that could be passed out in an email attachment. However a lot of major website that I know and see don't this because they may not have their users on file. This wasn't the cause in my situation but still I wouldn't recommend it. What I needed was some kind of guide that would help users through a new workflows and after words if I want just for fun give the user a little reward. That last part is just something I think that would be good for exploiting some gamification concepts.     The points I'm really trying to make is that  users should not have to look up the information they need in a separate location and by using a l

Javascript: The global flag with String.replace

     The setup is this; I have some content on a page that needs all pipe characters changed to a newline. However there can be multiple pipes characters in a single body of content. One approach that I used was the global flag in String.replace's method. If you use \g  you be warned as the flag is not standardized and you will lose some support for certain browsers. I can't say which ones but I do know that chrome does not support this or whatever version I was using that the time. Not that chrome was my only target browser, just that I took it as a sign for concern. The solution I would use is a regular expression and passed through with a string, much like the example shown in the second link. Resources JavaScript String replace() Method  Fastest method to replace all instances of a character in a string - Stack Overflow replace global flag in Chrome or IE, and how to work around it? - Stack Overflow regex - How to escape backslash in JavaScript? - Stack Overflow

Angularjs: Blinking Syntax

    This is a issue I call the angularjs "blinking syntax" because for a quick second users are able to see angularjs syntax in the web page, which isn't good. This issue becomes a greater problem for those with a slow connection. Cause is simple, using  {{}}  inline, which is much slower compared to other methods. Instead one solution is to use the ng-bind inline or can also create a directive. Resource why ng-bind is better than {{}} in angular? - Stack Overflow inline conditionals in angular.js - Stack Overflow  - Also by using a directive you can separate your logic more. Making your code cleaner or easier to maintain. ng-cloak/ng-show elements blink - Stack Overflow  - This will not always solve the problem, but using this along with ng-bing or a directive I think is appropriate. 

Ng-grid: Start and End Items for a Grid

    With my recent experience using ng-grid, I came up with two dynamic variables that would display based on the location of where they were in relationship to a particular page. I wasn't sure how to find a specific example on this. Since most might wrap this up with pagination concept it's difficult to find something on this for Ng-grid.. Not that I need an example but I like to think of them as separate, or as metadata. Dependency      I could have made the dependency on a ajax  return call but I had multiple ways for the Grid data to be insert, so rather than set it at that point I just hooked in the dom. If you wanted to go the other route just change the  self.domAccessProvider call  to whatever you name your data object in the grid . As for the start number this is easier to handle, so there is no dependencies. Solution $scope.endItem = function () { var self = this; //Last page... if (self. maxPages () == self.pagingOptions.currentPage)

Penguins Rising: Possible Multiplayer

    With my first attempt, I started to look at what Google Game Services to see what it had to offer for real time multiplayer but quickly found my answer in the documentation. Game Service " Real-time multiplayer is currently only supported for the Android platform." So I looked at Google Hangout as an option. The example I found helped me test out this theory and proved that creating multiplayer mode would be possible. However there was minor issues with latency as the example code shows and also ways to handle it. I didn't publish any code on github since there is a lot more for me to do and this year  my plans  are  to start working more on my other games. For now its just important to make note of it so that I can pick up on it later... Example sendMessageApp.xml - google-plus-hangout-samples - It's sample code... for Google+ Hangout Apps https://developers.google.com/+/hangouts/resource-management line:188 gapi . hangout . data . sendMessage (        

Google App Engine - Bundling and Minification

    I love the Bundling and  Minification  feature in Asp.net MVC (4.0+) but sadly I couldn't find a similar process in Google App Engine. So I went looking to create it, but there was a few work arounds I had in place. For example for my styles I simply used Less.js but for my javascript I would have to either pass them through a minifier.     In order to create the best web application on Google App Engine you need to be able to bundle and minify your resources. Last week I looked at externally improve this speed of the game "Penguins Rising" which is hosted on Google App Engine. This externally services was  PageSpeed Insights  and managed under Google's  Webmaster Tools . Which is a little confusing of where I need to go or use for my Application since Webmaster tools is separate from Google API Console. Research for a Python Solution Approaches to minify js and css in grails applications - Stack Overflow Python script for minifying CSS? - Stack Overfl

HTML5 Game Asset Manager and Loading Screen

     Its important initialize a game if and when it is ready. I probably spent probably about two weeks looking for examples of this idea.One thing I was hope to get from this process was a way accurately update the loading and give the user a percent of when the game has loaded.For accurately updated the loading bar the best I have come up with is to have counter based on the number of assets and after each assets is loaded update the bar. The following setup is for the start button to change when the assets are loaded.   <button ><span class= "label" id= "Gamer" > Loading </span></button>     Follow code is taken directly from the example on  HTML5 Rocks  but I collected it into a single script and it proved to be very useful. I was working on some logic to queue not only images but sounds because more often than not audio files are larger than image files. Keep in mind though there is not a universal format that is supported like

Project: DuckSauce Notes Part II

Working on the second part of my project... I now need to automate bootstrap builds and compare the bootstrap's unmodified version of bootstrap to the new styles that I have added or modified on the bootstrap compiled css. From there DuckSauce should separate the style changes and place them in a .less file and recompile, which will then override or append the proper styles. Day 3 Managing module dependencies - How To Node - NodeJS package.json  - More reading... Getting started - Grunt: The JavaScript Task Runner  - Docs, docs and more docs Moving from CodeKit to Grunt Watch + LiveReload for Real-time Compilation  - Lots of help Day 4 gruntjs/grunt-contrib-watch  - This is the direction I am heading now! No compatible version found: chalk@'0.4.0'   - Helping myself. This week had to cut my research a little short but I feel I am really close to a solution with little effect on my part since a lot what I need is already built and simply needs to be configured

Error: No compatible version found: chalk@'0.4.0'

Image
    This error actually had me stumped for a bit but that's because I thought it was something I was doing wrong. However after looking around I found that I simply needed to update my Node version. Rather than getting too deep into the technical details, I will just list my researches. I forget what version of Nodejs I was using before the update but with one simply click all my problems went away.  Error: No compatible version found: chalk@'0.4.0' The reasoning behind my thoughts earlier was because of my use with the mark ">= version" in my dependencies package.json file. This attempt was made after looking into the documentation  which I noticed that grunt-contr-uglify requires grunt 0.4.0 or great. So this all started that point on with my research. Resources node.js  - Note to self update Nodejs! Error: No compatible version found: chalk · Issue #23 · segmentio/metalsmith npm install fails · Issue #163 · gruntjs/grunt-contrib-uglify  - The

Project: DuckSauce Notes

What is Ducksauce     Ducksauce is a small pet project I am working on to make everyday work easier with css and javascript cleanups. The hope is to automate those cleanups in controllable way I see fit, and to also make my code more scalable with third party libraries. Mission Listen to CSS changes and separate them into a .less file. Features  (Just for starters focusing on css cleanups) Console system to attach files/directories. Listen to CSS files Remove changes and separate into a less file. Compile new less files with Unmodified Third party styles (Overridering the css results) Log changes. Refresh page to see the changes? I would like this but it might get annoying. Day 1 Challenges: Listening to file, watch changes, find what those changes are. filesystems - Node.JS: How does "fs.watchFile" work? - Stack Overflow Node.js: Event Emitters and Listeners | Scribblings Accessing the File System in Node.js Observe file changes with node.js - Stack Ov

Npm Install Error - Invalid Package.json

    I felt pretty silly for this error I was seeing on one of my project , but lucky for me nothing a good night's sleep couldn't fix. I'm a nite programmer but that sometimes takes it's toll. The first problem was the fact I put an 's' on my file name. It should be "package.json" not "packages.json" which I carelessly did but the second for this error was actually one I think many people run into. Which is syntax, I found my mistake pretty quickly but you could always use online tools to validate your json file or use the pacakge-json-validator package . // package.json file {   "name": "ducksauce",   "description": "Web Application Tool",   "dependencies" : {     "open" : "*" ,  <-- Here is the problem!   },   "version" : "0.1.0",   "author" : "Anthony Fassett <XXXXXX@gmail.com>",   "keywords" : [  

Javascript Focus event on IPad

    This article goes in hand with one of my jquery plugins that I am creating. The purpose of my plugin is to store data items into a table. I'm not perceptually interested in writing out Sql so creating a plugin that can hand a database from a UI perspective is rather important to me. I know there are a few plugins out there that could achieve what I want but I wanted to take up the task as a learning experience. Either way that just some background information about this article, what this article is really about is a request that was given to me for my plugin that I could not directly met. The users wanted to have the Ipad auto focus on an input when a device returned some input via bluetooth. However because of how the Ipad's interfaced with input this was not allowed. My Solution There was a comment in one of the links that provided a possible solution but I think it was too much of a hack and didn't want to go down that road for such a small piece of functionali

Useful Javascript Libraries for IE8 Support

I hate to be held back because limitation and IE8  is a gross limitation for a browser. However when I can provided the support by doing little work on my end I say why not. So when iI have to met this little requirement the are two libraries that come to mind. The first is Respondjs  and one if the things I love about this library is that it works just how I would want it to. I don't need to change any of my CSS files, nor do I have to create my styles any differently than  what I am doing for modern browsers. So thinking ahead if I ever wanted to drop support for IE8 , would simply remove the js file. The second is  jquery-placeholder  which I like because of the fact along with the placeholder attribute so that is it not completely useful in IE8.   The things I would like to see with this  library  is it automatically be  set up  for all placeholders. Currently you have to set that part up but its super easy so no complains. 

Recursion in Javascript

    The setup goes like this... Prompt the users with a dialog which inside has a text box. Then allow them to place into comma separated data. When they are done have them click save which closes the prompt. So far so good, split the data and place them into a series of input boxes. Now it doesn't matter how many boxes of input there are because it will just create more if the user's input is greater than what is available. Given this task I thought I would try to do it by using a recursion. Up to that point I had never used a recursion in Javascript. Problems I faced Everything worked out fine until I hit this error which I got the  Maximum call stack size exceeded error  and what I had to do was define the upper limit to my recursion. In my opinion I would be wary with using recursion. Resources Recursion (computer science) - Wikipedia  - Just in case you forget. Javascript - Maximum call stack size exceeded error - Stack Overflow Calling a javascript function recu

Penguins Rising: Caching in Google App Engine

Image
      One day while I was exploring Google's Page-speed Insights to determine whether there was anything I could possibly improve with Penguins Rising. I discovered that I was not  Leveraging the browser cach e . Up to this point the only type of caching I had done was with the HTML5 cache manifest, however  this was  different than what Page-speed insight was advising me with and this was also what lead me to my question that is the  majority of what this article is about .        Question Lucky for me, I am not the only person to have asked this, but " What is the difference between a Cache Manifest and a Cache header? " As it stand with Page-speed Insight my current results with  Penguins Rising (will vary)  as you can see for yourself. Using Expiration in the Content Header You can set the expiration time however you like, I tested my application with 10 minute expiration date. //Inside the app.yaml default_expiration : " 10m " An Ex

Research on JQuery Editable Table Plugins

    My goal here was to find or create a jquery editable table that I could custom to my needs with a little or no work and helpfully be easy to maintain. I also wanted to make sure that what I chose would not impact how I implemented my back-end. The following is the basic a starting point of what I am working with but not limited to... <table class = "table table-condensed" > <thead class = "storage" >< / thead> <tbody>< / tbody> < / table> From this point I would pull my table data in by either a model binder or simply create the table via ajax and appending it there. Still is without looking at how a plugin is design or needs to be setup so I might have to look at that before I begin implementing which I got with. I started my research by listing what I was looking for and what I thought I might have to customize. My Requirements  Input check for duplicates. character input limiting (no more than 12 c

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Installing Windows on Acer chromebook 15 cb3-532

Aspetcore: NLog with Postgresql