Posts

Showing posts from 2014

How Does Font-Awesome Work?

Image
So I asked myself one day how does this cool library work and how can I start making my own vector scaled icons? They are many reasons why I might want to create my style of font-awesome and understanding what going on behind the scenes. Rather than just use some png files into a sprite they can be embed icons in the style sheet. Font-awesome kind of hides the icons in the stylesheet with before and after content.
      Without going too deep into the rabbit hole, and to somewhat answer this question in my own words. I would say that font-awesome which is being built with Adobe using vector scaled icons that have transparent grey scale in order for customizable color schemes and references them in the css with the "content" style. Not familiar with the syntax being used but the css uses some kind of path points to the icon's location. Example of that is "\f132"which output a shield icon. The file path.less probably explains much of the syntax behind this. 

Google Analytics for Multiple Environments (Dev/QA/Prod)

Image
Let's cut to the chase, I was looking for a way to use a single account with a single property and have multiple views. I thought this was very possible would be easy to manage data that way but I wasn't sure how. After playing around a little with the interface I figured it out. None of the resources directly helped but were really good insight. What I also figured out was that you can use a single line of code to do this, so no need to change the javascript in each environment. This is great because I don't need to alter the javascript snippet to point to the difference environments.

Filters
You will need these order to separate the data between different views, use the filter on your views not the property. Under Admin, select your view and then Filters. For all the filters (Dev,QA, Prod) I did a Predefined, Included only, traffic to the hostname and that contains.  I've seen in some environments where dev and qa are on a subdomain in which case you might want to…

Installing Android Studio Beta 0.8.14 exe

Image
This week I installed android studio however but I didn't want manually install it and to use the zip file. So looked for the appropriate exe file (if there was any). In the recent notes there is explanation on why the zip version pointed the download link. I installed v.0.8.14 but I pretty sure I wasn't paying attention because there is later versions available. Infact the release Candidate 4 was updated just yesterday but v0.8.14 is what's currently listed on the downloads


Notes (v.0.8.14) 
after my install for android studio, prompted to startup the application but got that jvm missing error. When I ran the application myself and it worked fine. Also the icon is different for the program in the taskbar from the zip to the exe file.After running both the zip and the exe files, both made a configuration in the user's folder but only one of them was called beta. After pinning the program to the taskbar, the program duplicated itself. I then tried to unpin it and p…

Android Studio 'tools.jar' file is not present in classpath

Image
I move around from machine to machine a lot and this is an issue hidden in another form. The error doesn't really help but it is clear something is missing. Two things that I was missing was the correct file path to my sdk and didn't the JRE included/installed.

Things to make sure you always do
install the JDK and JREinstall the version you want 64 or 32 bitsometimes I install both just to be safe but I don't like to do that.create the environment path JAVA_HOMEsometimes the installer doesn't create this...path (64 bit) should be something like..  C:\Program Files\Java\jdk1.8.0_25     Right click on the window icon in the right and go to systems (advanced settings).

Notes https://www.java.com/en/ - Does not include the JRE. http://www.oracle.com/technetwork/java/javase/downloads/index.html
Resources
ide - Android Studio 'tools.jar' file is not present in classpath - Stack Overflow - Linux help
Getting Started with Auto | Android Developers
How to set the java path…

Unity: Notes for My Next Game V

Image
So I broke one of my own rules, which was staying on task. With a lot of my notes being scattered all over the place the last few weeks it has been difficult to keep track of things. I have accomplish a lot, but I think I will go back to publishing my notes to better focus on my deadline. I could have written the notes and just not publish them but I think it would be a waste of time, especially since I was already using a issue tracker. Publish these article forces my hand to show what I've got (which may not look like much for this article but I'll let you be the judge). 

Notes:    I wanted to start getting my game in a playable state and since a lot of the small things bugged me. I just had to get them working right. I started worked on the things that just make it difficult to control my player but I did spend too much time on the player's character model.

Controls on Android are not helpful with PC controls.

Pc to android conversion (input),Unity3D input conversion -…

LPI Certification Material

At one time I really wanted to take the LPI certification but I feel my experience speaks for itself. However I do want to cover the material and refresh myself on some of the stuff that I don't use on a regular basis. I bolded the commands I use the least and reworded the description a little more to my liking. Most of the information is just examples I found and stuff I think would be covered. Commands declare - Use the declare command to set variable and functions attributes.quota - displays users' disk usage and limits. By default only the user quotas are printed.date  - display or set the time.rpm- package manager. (I prefer debian)xvidtune - tweaks the screen resolution.nl - prints line numbers before each line in a file.od  -dumps files in octal format.su - option m is pretty useful, do not reset environment variables.mkfs - “used to build a Linux file system on a device, usually a hard disk partition.”XF86Config-the section concerned with fonts: The Files sectionsXF…

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…

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 see that I do …

CSS3 Transition Rotating Does Not Fit

Awhile back I created an application to display some data inside of a table but after it was all said and done I was then asked if I could make it so the information could be rotated. With that I thought I could easily implement this using CSS3 transition and rotate on the x-axis but I would much prefer doing this in a canvas.Which make this a great solution but current my content is displayed in a table and isn't scalable this way, so it doesn't help for me. I could also use d3js, from what I've seen in the examples it could be easier to implement.
I did find that some created a solution to handle the issue with Css3 transition, where as you rotate the element the content around it does not adjust appropriately. There is reasons behind why this happens, but no proper way to handle it with just css. As you rotate a given element it does not remove or change any of the styles attached to it. So margin, padding and whatever else will still be applied but also as you rotat…

Server-side Browser Detection with Bootstrap

One thing I love about bootstrap is that it eliminates the need to create separate views or pages to handle both types of clients (mobile/desktop) . A few years back when Asp.net MVC 4.0 first came out and before the big boom of "mobile first" styled css libraries there was a huge additional feature for server side detection. Now this was back in the early parts of my career so I was not sure where this feature would fit in or if it would ever. Since then I have been looking at all types of frameworks and server side detection systems but ultimately have been moving toward the bootstrap style mentality until I looked at my blog. Blogger actually does all the work for me so I didn't have do anything to create this.
    The thought behind this is to minimize the amount of information you sent to the user. Its great that you hidden it to the user on mobile devices and even design it with them in mind. However they are still getting all that information, which seems lik…

Bootstrap: Navbar Header

I don't see too many examples in bootstrap with something like this but what it is incase you don't know is a banner of some kind above the navbar. In fact I don't see too many sites with this kind of structure lately and from my experience I can understand why not. If you're going for responsiveness it's difficult to create since you are always checking to see if you have enough space on both sides for whatever it is your trying to display in between. From the sites that I have seen that do have this can really pull it off and use something similar to bootstrap's affix feature.
    When I first started using bootstrap which was sometime around 3.0, I was using the navbar-brand to hook into the styles already written for me. However since bootstrap 3.1navbar-brandhas now been given a height where before I was using the image's auto or attributes to adjust the height. I was able to give my header an even amount of padding around my header which might not …

Razor syntax in Javascript files

I don't always mix server side code with client side code... but continuing with my thoughts on server and client models. I wanted to know if I could use razor syntax in a javascript file. Which means I woud be able take advantage of the Asp.net Bundling and Minification feature. Now I probably didn't bring this approach up in the article but what I did talk about was using query url with the javascript. Not being able to cache javascript files is the major reason why avoid using using it and I didn't think I would take this approach either but I did want to see if it was possible.
  In my research I did notice some loss of performance, I didn't do any benchmarking but I felt the process was a little wonky. I think the third link best describes my thoughts on this approach. So what  I have been doing now since this is using the "data" attribute and assigning a value with razor syntax. It's not completely perfect but it does have some advantages. A lot …

Compiling Bootstrap LESS using Asp.net MVC and Web Essentials

Image
My goal is to work with others in whatever framework they choose but I'm constantly update css styles with a pre-processor so that I do not have to work with the css libraries directly. Download the  Web Essentials and the Bootstrap less nuget package.


I see it all the time where developers install the wrong packages, sometimes theres ones with similar names and you just not sure what the differences are. So just so we're clear its the first package with the bootstrap .less in the name. Just search for bootstrap less as two seperate keywords, should be no problem.

Solution
For this solution did not have to change thing with my setup or move around files on the directory once I got things up and running. I even made it easier for colleagues to come into web applications without any problems so in case they are new to bootstrap they can simple ignore the less files. Now what I did was create separate bootstrap.less file and did some regular expression @import " replaced wi…

A Thought on Server Side and Client Side Models

The truth is if you want to take server side models for example in Asp.net Mvc directly to a client side mvc framework's enviroment the common approach is via ajax. What has me troubled about this approach is that in some cases we already know the information that will be passed from server side to client before the call based on the request in some cases. So why do we make clients call this ajax? It's simply because we don't have enough ways to bridge the two technologies. Now just to be clear I'm not talking about third party api's or in any extreme case where the data is so dynamic that it is dependent on the front-end. What I am talking about is in cases where the data is in within the web application and we know what is needed by the page request. In case I haven't made myself clear (probably not) here is an example of what I mean.

Example
I'm going to use an example from a Asp.net Mvc perspective just because that is what I'm familar with but I …

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> <div cla…

Editing Blogger Post on Github, Rough Draft

Image
This was an idea that came to me when I was looking at haacked's blog (awesome blog by the way!) which is mostly built with jekyll site since he uses github to host his site. I'm not really a fan of jekyll, I won't lie never played around with it. If github hosted a web server in nodeJs I probably would just move my blog in a heartbeat over to github completely but for now I like having it on blogger. 
    Now I haven't implemented this but here is a rough idea what I would do to achieve it. I think the image is pretty detailed but to sum it up I would IFTTT to notify my application when a new post is available and then create a commit to github and allow people to fork the blog's repository and then create edits. I've even started the repo here... 

Research Blogger JSON API: Using the API - Blogger — Google Developers http://jekyllrb.com/docs/posts/ - If I ever need to move my blog to github it would be good to know. Comments | GitHub API - Could I tie in with …