Showing posts with the label Javascript

Indeepth: Inheritance with the prototype chain

These notes are for none else but me, because I need them for a bigger project. No time to explain...C# and javascript are completely different worlds. let f = function ( ) { this . a = 1 ; this . b = 2 ; } let o = new f ( ) ; // {a: 1, b: 2} - you need the 'let' beause f.a will not exist. - - - - -

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 practices 19+ JavaScript Shorthand Coding Techniques Best way to find an item in a JavaScript array? - Stack Overflow Replace multiple whitespaces with single whitespace in JavaScript string - Stack Overflow javascript - How can I disable highlighting in html or JS? - Stack Overflow javascript - drag and drop, prevent awkward highlighting? - Stack Overflow Basic Json Request Using 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. Fun Example  function DisplayQuestions() { var Questions = new Array(20); Questions[

Research on AppScript for Blogger Sync

This a project I've given up since I'm creating my own platform but I wanted to include my notes incase someone wanted to continue my work. Probably not going to happen but maybe someone could create to organize their blog. Create blog posts and have them in separate foldersso you could use the google drive's UI. Unless I find time to waste I probably won't return to this idea but you can comment and let me know what you think. Project API External Service?

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 make

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_upload Unexpected end of input Notes Create File Object var f = new File ([ "" ], "filename.txt" , { type : "text/plain" , lastModified : date }) Append file to form object form . append ( "blob" , blob , filename ); aFormData = new FormData ( $ ( "form" ). get ( 0 )); Just check the length of files property, which is a FileList if ( document . getElementById ( "uploadFile" ). files . length == 0 ){ console . log ( "no files

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 continuous integration 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 thi

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 files create templates clean 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 Reference Resources http://stackoverfl

Make d3js Responsive

    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 ="body").append("svg") //.attr("viewBox", "0 0 " + width + " " + height) //.attr("preserveAspectRatio", "xMidYMid meet"); Secret project I'm working on...      I didn't include the comments in my proje

Chrome App: Can't Open app within a tab

    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 " in", chrome.tabs.create ( this is only for extentions but worth a shot ) Common issue seen     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

AngularJS: ng-model cannot be assigned to functions

    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 Feedback from users about pics in my blog. 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. / - an example using ng-init (n ot by me) . Resources AngularJS - ngModel cannot be assigned to function - Stack Overflow

Project: Aptitude-Words Update 1.2.5

       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 r

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', '//', 'ga'); ga('create', 'YOURID', 'aut

The New Way to Create Jquery Plugins Using Grunt & QUnit

     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. Like Peanut Butter and Jelly!  Tools & Systems T

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 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 t

AngularJS: Not Working on Plunker

    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. Plunker 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:  " use   angular . 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 category Emails - Get weekly emails to let you know which words you use less ofte

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

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  - I forget where I found this but its probably buried somewhere in my resources. My Example Javascript code var myApp = angular.module('myApp', []); myApp.controller('mainController', function($scope) { $scope.items = [{ item:"apples", flag: true }, { item:"oranges", flag: true }, { it

Chrome Console Log Styling

     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( ' %c Hello 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&#

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 the   chrome . 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