Anthony's Blog

Posts

Showing posts with the label Javascript

Hide Unlocked Achievements for Steam Website Mod

March 21, 2023

Currently I have 235 achievement out of 700 for Halo MCC, lets hope this makes things easier to focus on and filter out. This script should be useful for any game on the following url: https://steamcommunity.com/id/{users}/stats/{game}/?tab=achievements

Indeepth: Inheritance with the prototype chain

July 23, 2018

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. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain - https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype - https://stackoverflow.com/questions/11854958/how-to-call-a-parent-method-from-child-class-in-javascript - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes - https://www.ecma-international.org/ecma-262/6.0/#sec-class-definitions

Javascript Cheatsheet

July 23, 2017

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. http://stackoverflow.com/questions/1003855/howto-benchmark-javascript-code Fun Example function DisplayQuestions() { var Questions = new Array(20);...

Research on AppScript for Blogger Sync

July 16, 2017

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. https://security.google.com/settings/security/permissions https://script.google.com Project https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/bloggerapp API https://developers.google.com/blogger/docs/3.0/using#null https://ctrlq.org/code/20068-blogger-api-with-google-apps-script https://mashe.hawksey.info/2015/10/setting-up-oauth2-access-with-google-apps-script-blogger-api-example/ External Service? https://developers.google.com/apps-script/guides/services/external#connecting_to_public_apis

Posting Null File Input in Dataform Via Ajax

October 03, 2016

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?

August 03, 2015

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

Project: DuckSauce Notes Part 5

May 31, 2015

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 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 ht...

Make d3js Responsive

May 31, 2015

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"); Secret project I'm working on... I didn't include the comments in my proje...

Chrome App: Can't Open app within a tab

May 26, 2015

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

May 26, 2015

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. http://jsfiddle.net/z5z9s / - an example using ng-init (n ot 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

May 21, 2015

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

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

March 06, 2015

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', 'aut...

The New Way to Create Jquery Plugins Using Grunt & QUnit

February 27, 2015

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

Bower: Installing Bootstrap without jquery

January 31, 2015

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

AngularJS: Not Working on Plunker

January 14, 2015

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

January 10, 2015

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

January 10, 2015

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

AngularJS: Facets in a Search Grid

November 21, 2014

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 }, { it...

Chrome Console Log Styling

November 18, 2014

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

Project: DuckSauce Notes Part IIII

November 12, 2014

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 fol...

Search This Blog