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

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. Google Analytics 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 ...
Read more

Installing Android Studio Beta 0.8.14 exe

Image
    This wee k 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 dup...
Read more

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  JRE install the version you want 64 or 32 bit sometimes I install both just to be safe but I don't like to do that. create the environment path JAVA_HOME sometimes 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 ...
Read more

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

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 partiti...
Read more

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

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( ' %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...
Read more

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

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 . Hey these colors look familiar! 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 draw...
Read more

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:/...
Read more

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

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

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 see...
Read more

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.1    navbar-brand   has 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 he...
Read more

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 complete...
Read more

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. Get this 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....
Read more

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 w...
Read more

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

Popular posts from this blog

Aspetcore: NLog with Postgresql

This Article is base ASP.Net Core 2 and the latest version of Nlog. 1. Install NLog and the Postgresql Package Using NuGet to install the package into your ASP.NET Core project: PM > Install-Package NLog.Web.AspNetCore PM > Install-Package Npgsql 3. Register NLog Add in your Startup.cs  public void Configure ( IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory ) { ... env.ConfigureNLog( "nlog.config" ); ... // make sure Chinese chars don't fk up Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); //add NLog to ASP.NET Core loggerFactory.AddNLog(); //add NLog.Web app.AddNLogWeb(); } 4. Add to Your Controller Add a logger object to your Controller. private readonly ILogger<YourController> _logger; Modify the constructor to use it public YourController ( ILogger<YourController> logger = null ) { if ( null != logger) { _logger = logger; ...
Read more

Mongodb Cheatsheet

This cheat sheet is based on the latest version of mongodb, which initial had setup and didn't encounter any problems. However that all changed when I was working remote and forgot I disabled the port no my network, rather than with the server. So I went pointing around where I didn't need to and ended up messing things up. The Best tutorial out there is of course on digital ocean for my setup on ubuntu 16.04 , this articles isn't so much about getting setup. I just wanted to include it because I found myself looking back at it to see if I missed a step. Bugs/Problems Now comes all the messed up things I found and had to deal with. firewall - Port seems to be open, but connection refused try using 0.0.0.0 in the bin_ip for the /etc/mongo.conf try sudo ufw disable and check to see if it works without the firewall (probably still wont but worth a shot), then just sudo ufw enable. Make sure port 27017 is open. Then check this  linux - Connection refused to MongoDB e...
Read more

Installing Windows on Acer chromebook 15 cb3-532

Much of my notes are just small problems I faced (what's new!) haha. Either way this was a really fun project to do for a friend and I got excited once I research all the information. You can find instruction videos but what helped me the most was the coolstar website. Sadly they don't have parameters in the url so I can link the machine I used in this article. -  https://coolstar.org/chromebook/windows-install.html Scared of messing with the bios? Don't be!    So you need to first remove the screw to put a legacy bios on the machine. Its easy to backup the chrome os one and with the same steps to change it. You can go back in and revert to the chrome version bios. Its that last part that had me worried and its very easy to do.  Problems getting into Developer Mode?   Follow the instructions to the letter, during the step to disable the OS verification, press Ctrl-D to boot into os. If you hear two beeps I would go back to set one. I got in a loo...
Read more