Posts

Showing posts with the label Javascript

Javascript Cheatsheet

At times I do still just use pure javascript and nothing else because how small I want the project to be. As always more coming soon...
JavaScript best practices19+ JavaScript Shorthand Coding TechniquesBest way to find an item in a JavaScript array? - Stack OverflowReplace multiple whitespaces with single whitespace in JavaScript string - Stack Overflowjavascript - How can I disable highlighting in html or JS? - Stack Overflowjavascript - drag and drop, prevent awkward highlighting? - Stack OverflowBasic Json RequestUsing XMLHttpRequest Performance
   There is a lot of talking about how to test the real performance of javascript and for the most part I have no clue where to start as I write this. Hopefully that will change be the end, skip to it if you dont want to learn the process as well.
http://stackoverflow.com/questions/1003855/howto-benchmark-javascript-code
Fun Example 
function DisplayQuestions() { var Questions = new Array(20); Questions[0] = "Question #1"; Qu…

Custom Data Scripting

This is just the name I like to call for the way I write my javascript. Which looks at the dom for configuration rather than in a script file or some api. This is a style of javascript that allows non-javascript developers to jump in if they can read basic html elements. There are many reasons why I use this approach other than the other two. For example to minimizing the overall javascript code which simplifies the website. I took this approach up because of what I learned with Aspnet razor syntax. Later made improvements to the style once I learned anguar/react (components).
  Now I don't not what other developers call this style or if they even acknowledge this pattern. I'm giving it a name cause I need a way to define it. Plus its easily explain to other developers where to look for with my code. The goal here is to always look at the Dom for something and if I need more complex stuff then place it in a object. However I could always argue that one could go back and makeu…

Posting Null File Input in Dataform Via Ajax

This was actually quite annoying and was needed since the api I was given by another developer won't change it so had to go around him to achieve this. To be clear I was posting a form and inside it was a file input with some other input text values. The file input needed to always be included even if it was null...Don't ask me why.
Common Errors 
These errors can be corrected from my notes.
Unexpected end of input response from wp_handle_uploadUnexpected end of input Notes
Create File Objectvar f =newFile([""],"filename.txt",{type:"text/plain", lastModified: date})Append file to form object form.append("blob",blob, filename);aFormData =newFormData($("form").get(0));Just check the length of files property, which is a FileList if( document.getElementById("uploadFile").files.length ==0){ console.log

Continuous Integration for Browser Apps/Extensions?

As far as I know none has thought of this idea but probably have. Sometime ago I had the chance to ask this question during an interview. I think interviews are a great opportunity to bound around ideas. and What I got out of this one was a statement on whether continuousintegration would be very useful with green browsers (browser that update themselves and keep only two or so versions around). I don't think this statement hurts or impacts my idea. I'm was not looking at just testing my apps and extensions but to automating pushes to production and to detect future issues with newer versions of  browsers  which is what I think the point of I thought..     That being said its just an idea and maybe in the future I will implement it. I could there even spin up a couple more ideas off this one. Again not sure if anyone has thought of this, I think a lot of people in in web developers have moved away from making plug-ins and the only reason I'm thinking about this idea to remo…

Project: DuckSauce Notes Part 5

I've been secretly working on this project again (of course there's my game I am still working). However I wanted to take a step back and look at what this project has done for me. The biggest thing is that it has done is get me to question my work follow and think about how to improve it.

This project must
create filescreate templatesclean up code build manual.New Approach
Working with the chrome work-space has its limits and it appears there is a method to set the contents of a particular however it is not implemented and is filed as a bug. This is a long outstanding bug so chances are slim.

The guts
https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/filesystem-access/js/app.js

Reference
https://www.npmjs.org/package/livereload
https://github.com/livereload/livereload-extensions/tree/master/Chrome/LiveReload

Resources
https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/filesystem-access
http://stackoverflow.com/a/15197993/1265036

Make d3js Responsive

Image
This is probably the most popular quesition I see and is somewhat my main concern as far as things go with one of my projects. Now this isn't a perfect solution but its doesn't depend on jquery or anything else. So it keeps things in the d3js scope which is really what I want since I don't always include jquery in all of my projects.
function resize() { //Top Nav has a bottom padding for 50px's width = window.innerWidth, height = window.innerHeight; svg.attr("width", width).attr("height", height); force.size([width, height]).resume(); } window.addEventListener('resize', resize()); var svg = d3.select("body").append("svg") //.attr("viewBox", "0 0 " + width + " " + height) //.attr("preserveAspectRatio", "xMidYMid meet");
     I didn't include the comments in my project but I think others might and I feel they are v…

Chrome App: Can't Open app within a tab

Image
Currently using chrome 43 so this issue currently does exist but also is an very old one from the looks of it. It might seems silly to create an chrome app that simple opens up a link in a new tab but I thought it was so basic for my personally needs that it wouldn't be a problem. Plus I didn't plan on releasing most of the custom apps I created, simple just wanted to clean up some bookmarks and make them feel more like apps. There's also the possiblity to leverage them to be offline but that's outside the scope.

What I've tried
"window.open() in chrome.app.runtime.onLaunched",
chrome.tabs.create (this is only for extentions but worth a shot)

    With the current bit of code I have thisn't what I see (image above) anymore but instead the tab just closes and nothing happens...

Alternative solution
   One of the basic ways around this is drag and drop a url in the chrome app panel, but I really don't like this approach plus the icon doesn't work sinc…

AngularJS: ng-model cannot be assigned to functions

Image
This was one of the errors I faced when I started out with Angularjs, and the problem comes from thinking like Jquery developer still. I still use Jquery heavly in a few of my personal projects but have been avoiding this issue complete since.

Common error: nonassign Non-Assignable Expression


Solutions
One approach is to use directives to solve the issue and another is to use ng-init from what I've seen but I prefer using directives instead. http://jsfiddle.net/z5z9s/ - an example using ng-init (not by me).

Resources
AngularJS - ngModel cannot be assigned to function - Stack Overflow
http://stackoverflow.com/a/17793772/1265036

Project: Aptitude-Words Update 1.2.5

Image
Recently returned to my chrome extension because I had some features I wanted to see and needed improving. I like to pretend I'm the only person who really uses this extension because I really don't know who my users are or what they would like to see but I'm open to suggestions. There is stats for the extension on weekly users but I don't think much of it.

You will need to re-enable with this update since I added Google Analytics but not using it yet.
Features ( Live now!)
Trash button (rather than click checkbox)Donation button (I'm doing this with all my free apps)This is a one time purchase in the app, I'm looking to get rich.Redrawing words after delete.In the Future  New Logo (working on the art with a material design look).Google Analytics (I'm curious to know what popular words ppl are captured.)Page to display - word of the day, logic to prevent bad words from showing so dont try it...Reordering words - Just a really nice thing to have but watc…

Javascript: Track Errors with Google Analytics (analytics.js)

I came across an article by David Walsh and just wanted to expand on the topic. When implementing this feature watch out for the differences between analytics.js and ga.js. The code below is works with analytics.js. Another thing to be aware of is that some errors will be created from Adblocker. I thought of adding the logic but I didn't want to leave it up to chance that I might accidentally ignore some real errors. Instead what you can did is just filter it in Google Analytics and aggregate against with the number hits.

(function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'YOURID', 'auto…

The New Way to Create Jquery Plugins Using Grunt & QUnit

Image
This is my take on the Jquery basic documentation for creating a plugin. There are a lot of new ways to create a jquery plugin and even more frameworks to replace jquery altogether. However I found myself at that point where the scope of the project was limited in a framework but had large enough components that could separated into plugins. I've removed all the business logic and now just want to create a very scalable plugin.

Example Project & Setup
With my Jquery Plugin, I'm using Nodejs and continuous integration to do the heavy lifting. All I'm doing is taking a selected element from the caller and determine if it already has a table. Then if it does attach data to provided url's from the developer. Simple enough but there more to it, I just simplified the explanation incase people want to skip over this part and others who are interested can just read more about the plugin on github.

Tools & Systems
Travis-ciNodejs packagesgrunt/grunt-clijshintqunitJs …

Bower: Installing Bootstrap without jquery

For one of my projects I was using AngularJs and UI Bootstrap. Which converts all the jquery code to angular code and adds some helpful directives. From what I notice with bower was that I couldn't install bootstrap without jquery. Since it was a dependency of bootstrap.
   Note, I'm still working on this! It's important for me publish this since I've gotten so far with it. As started out I thought what I could do was to install the bower components and then try to exclude jquery in a separate folder. However in another article I will look at a better solution. Which will be where just ignore the jquery and combine the files I want. However I can see reasons for both approaches. Like in my case I wanted to remove some nuget packages and then pass off that task to bower, which I think is now how Asp.net vnext is doing it. In my case though there was too many views names js/css files and just too many js and css files.
    So this first part isn't much but I thin…

AngularJS: Not Working on Plunker

Image
Plunker is my goto cloud based IDE for quick setup and demo purposes. It's all about what you prefer really and there a tons of choices out there. This is two common problems that I faced but haven't since I'm aware of them, they're not really a problem anymore. I just wanted to keep notes on this incase I forget in the future.

First: "The plunker has ng-app instead of ng-app='directive' in the index.html"
Resource: Why this angularjs example doesn't work on plunker?

Second: "useangular.bootstrap($('#your_div_loaded_in_ajax'), "myApp","other_module"]);"
Resource:  AngularJs ReferenceError: angular is not defined

Notes
Also for the angular file don't use async or defer. This always goes without saying your custom script should come after the angular file even if its in the index.html file itself; just for good measure.

Chrome Extension Project: Aptitude Words Part 2

On my previous article  I briefly introduced this project because it came to me when I had very little time but I knew if I didn't publish it at the time I probably wouldn't for another month. The project was finished as far as things going with a first wave of implementation and I have a lot of ideas to add on this project. This is application really for myself rather than any particular audience. With my design I looked at first how I wanted it to behave and its kinda interesting to see where I'll end up with this one. I don't let this project get in the ways of my high tasks and its really just for fun. So updates will probably minimal. You can get all the information about the project on Chrome marketplace.

Future releases

Categories - sometimes you need to organize them in a way to remember them.Removing - delete a whole category.Adding - Drag n' drop a word into a categoryEmails - Get weekly emails to let you know which words you use less often or moreAlso pro…

Bootstrap: btn-lg is smaller than input-lg

Link: btn-lg is smaller than input-lg
Example: input-size-bootstrap

Issue
    In all modern browsers except in IE10+, it seems that the large buttons with large inputs for input groups are smaller. The difference is only a pixel but is noticeable on some screens. To be clear this issue can be avoided if you use the input-group-lg however my test prove that the heights stay consistent regardless which style classes you use. I didn't find this out until I started looking into the issue and I think this is kinda nit picking but something that should be corrected to prevent future mistakes.

Changes
    For my first attempt I tried changing the @line-height-large but if I changed the @line-height-large this affects the input-group-lg, and select input-group-lg as well as the large buttons. So instead to just change the large buttons I set the large button line-height by adding a 0.01 value. This still had problems in firefox, which lead me to the final solution below. File(s) - just thebu…

AngularJS: Facets in a Search Grid

Sometime back I really needed this code however it came a little too late and unfortunately didn't make it into the final product. However I have since then built a complete explain showing how to hand facets with little javascript code and with a whole lot of functionality!

Requirements
Load appropriate facets, make a search. Update the UI, reload page if necessary but scale up for a single page application. Make things bookmarkable but don't lose that awesomeness from SPA's.

Example
http://jsfiddle.net/t7kr8/211/ - I forget where I found this but its probably buried somewhere in my resources.

My Example
https://fassetar.github.io/blog-examples/catalog-facets/

Javascript code
var myApp = angular.module('myApp', []); myApp.controller('mainController', function($scope) { $scope.items = [{ item:"apples", flag: true }, { item:"oranges", flag: true }, { item:"pears&quo…

Chrome Console Log Styling

Image
The devtools console is probably one of my best friend when it comes to web development and it just so happen that one day when I was randomly looking at the console while visiting facebook. What I found was some styles being applied to a console.log command. After looking a little into this cool new concept I found what many would find after doing a quick search.

Example
console.log('%cHello World!', 'color: white; background-color: black; font-size: 70px;');


     I really like the image example I found (in the resources), this just leaves me wondering what can't you do in the devtools console. I know awhile back I even saw that you can use "require" to install modules into chrome.

Side Note
    I learned there are two short-cuts to pull up the devtools console. There's Control-Shift J which I use and Control-Shift I. Probably will just stick with J though. Also this I already knew but just wanted to share because I think it's very important …

Project: DuckSauce Notes Part IIII

A lot of this article not going to make sense to people because it relates to my thoughts as I wrote them down and what I researched or tried to understand. Some of it is wrong, and looking back probably could have approached somethings better but that's just a natural way of learning. Also a lot of my notes are going to appear as if I'm going in circles (or that's just how I see it). Previous articles can be found here.

Day 1- 10/2/14
    I started looking at thechrome.devtools.panels.openResource, by resources I think the docs means a web page's resources not the devtool's resources (something that work-spaces might have access to). The next part, "Requests DevTools to open a URL in a Developer Tools panel." 
"The real power of Work-spaces lies in being able to map a local file to a URL (or “Network Resource”). Whenever Chrome loads the mapped URL, it displays the work-space folder contents in place of the network folder contents. It’s as if it’s…

The Four Components of a Web Application

Image
If I had to go back in time and explain to myself web development (primary what most call front-end) in a nutshell this is how I would organize it. I would purposely leave out explaining to myself any middle tier or backend frameworks as I would place those types of technologies in another category. Which may or may not be how others organize it but I'm open to suggestion.
Structures ( HTML)Not to be confused with styles, controls the structure/flow and order of things.Ignore tags like bold or italic because they kinda break this idea. The same could  kinda be said about a break tag.Styles (CSS) - looks, not functionality but the two do work together a lot!Mobile first baby!Content (Other) - separate from all the rest but drives the app is in Forget for a moment everything you know about databases, middle-tier, back-end or whatever there is that draws your users to a website. Focus on just the meaning around the fact that all information is content and can be located elsewhere.…

AngularJS: Select All Checkboxes

There were very few examples I found on this idea however most of them were not complete or depended on libraries were not included in my projects. I could simply include them and call it a day but that would be too easy. So I took the best example I could find and rewrote it in just AngularJS.

Code:
$scope.items = [ {item:1, flag: true}, {item:2, flag: true}, {item:3, flag: true }]; $scope.allNeedsClicked=function () { var newValue =!$scope.allNeedsMet(); for (var i =0; i <$scope.items.length; i++) { $scope.items[i].flag = newValue; } }; $scope.allNeedsMet=function () { var needsMet = []; for (var i =0; i <$scope.items.length; i++) { if ($scope.items[i].flag ===true) needsMet.push(true); } console.log($scope.items.length, needsMet.length); return (needsMet.length===$scope.items.length); };

Solution: https://fassetar.github.io/blog-examples/angularjs-select-all-checkboxes/

Notes
I should probably put this in a direct…