Posts

My Orchard CMS Experience

Image
Introduction This post is just to document my experiences with Orchard CMS and to list some of the resources that I used while developing a orchard module. I will go back through later and clean this post up but for now here is the code that I created with a previous employer. Github Resources sadomovalex's blog: Hide content type fields in Orchard CMS Orchard Project - View Discussion orchardcms - Orchard CMS: Right way to get field value from view? - Stack Overflow orchardcms - Orchard CMS module that uses HTTP session state - Stack Overflow Dynamically switching the theme in Orchard - Tales from the Evil Empire Let’s Install an Orchard “Module” | Ponderings - Various Topical  Thoughts by Brad Kingsley Custom Orchard Module that Plays HTML5 Video with Flash Fallback - Orchard CMS Development Accessing and rendering shapes - Orchard Documentation Packaging and sharing themes - Orchard Documentation Creating custom content type

The Sandbox Methodology

Image
    "Sandbox Methodology" is a term I like to use to describe environments that have zero rules in place against the quick and the dirty practices when it comes to designing an application or implementing one. The term comes from of course sandbox and what most developers are used to with development practices. In a sandbox you have a place where you can experiment with all your work before it faces the harsh world of usability. However in reality, this environment is miss used and becomes a playground for project managers or basically anyone in management to see how far you are in the implementation. Or it’s used to build out requirements, "let the developer figure out what I want to be build playground". Long name, terrible results… You might be familiar with other methodologies but this is one you will definitely regret using.     It could be said this approach is more of a waterfall methodology and employers will call it Agile. Chances are it’s a horrible me

Node and NPM Configuration behind a Firewall

    These are the notes for using npm behind a company firewall and a windows roaming account. With the help of a former colleague these are the steps I have used. Most of my issues with a company firewall have been with a package not being downloaded or installed properly. ​​Install Node: NPM is bundled w/ Node https://nodejs.org/download/​ Set your local proxy settings: ​run: setx HTTPS_PROXY http://YOUR-PROXADDRESS/ run: setx HTTP_PROXY http://YOUR-PROXYADDRESS/ ​ Configure local NPM directories: run: npm config set prefix C:\Local\npm --global​ run: npm config set cache C:\Local\npm-cache --global​ Configure PATH so that we can execute the node binaries via command line run: setx PATH "%PATH%;C:\Local\npm"​ If none of these steps resolve the issue my final solution is to install the package directly from github itself which all you need to do is list the git repo inside package.json. Failed to install tar-2.2.1: 403 e

Setuping Google Domain with Firebase

Image
    Do you want https without all the cost! I know I do which is why I have converted most of my site to firebase or to azure. However for a lot of my apps I don't intial think they will be big enough for me to justify a high cost starting out. After you have purchased your custom domain, go to firebase hosting and publish the hosting site from the examples provide by firebase. You can create your own or just use the website firebase created. Once the firebase hosting files are uploaded, you should see the dialog to add a custom domain. Run through the process of verifying that you own the domain, and get to set three in the setup process. Step three is the most important part of this process. The recommended way for this is using a cname, however I couldn't get it to work with the cnames. Instead use " Custom resource records" inside your Google Domain profile, inside there save the old ip address and update them to the new ip address provide by firebase. For

Making Internal Web Apps into Software Apps

Image
    When you're building an internal web app I think about some of the business solutions I  can create inside a company that might shrink the workload for my co-workers. Its awesome to see this happen but it only works where it makes sense, so below is some of these features I've easily used by general users. Hotkeys - are power ways to help your users get what they want faster, and overlooked in my opinion. Since users are in house users can make requests on what the would like to see. I don't like use the excuse that your users are "dumb" especially in house. This is an argument I hear a lot and it bugs me. For example if the app looks like a excel sheet one would think it behaves like one, so include those hotkey! Below is a hotkey I look to use a lot with my users on a search page looking to you the typeahead feature I created. Instead I popup with the search automatically and return the results since it a common action. Another good example to look at is

Android: Retrieving SHA1 key for Firebase on Windows

    If you using firebase and want to debug for Oauth or Messaging you will need to add a certificat e  SHA1 from your app key. You might need it for other features but this is what I'm sure about. Assuming java is installed then wherever you java is installed is where you will need to point to for  Example of File location C:\Program Files (x86)\Java\jre1.8.0_60\bin Command "keytool -exportcert -list -v -alias "YOURALIAS"  -keystore YOURKEYFILE.jks > file.txt"  I would output to a file so you can copy it later... Resources Authenticating Your Client

UI-Grid Percentage CellFilter and Color

    Today I got a chance to create a filter for my grid and apply some color which was simple enough to make. Initially I tried to apply both the style and the modification at the same time which cause a ton problems. This solution is less about code and more a remember to me how or why I split the two up. app.controller('exampleCtr').filter('percentage', function () {   return function (value) {     return '<span class=" (value "'>' +(value*100).toFixed(0) + "%";   }; }); //Quick snippet to setup data for colors.  angular.forEach($scope.GridOptions.data, function(col, key) {     col.cellClass = function(grid, row, col, rowRenderIndex, colRenderIndex) {       if (col.cellFilter === 'currency' || col.cellFilter === 'percentage')         if (grid.getCellValue(row, col) < 0) {           return 'text-danger';         } else {           return 'text-success';         }     };   }); Resour

My Express/Nodejs Project (5/12/16)

    I currently have a project where I want build websites inside a website azure and output to github but I need to rapidly build them and demo the site without continuous integration. So basically I need something like plunker or codepen but with a more permanent repository system. I can't provide right now a url but just wanted to provide some notes and details on the project because I think it could be helpful to others who are looking for this type of solution (leave comment if you would like to see a feature).  I do have so of this project started, and currently using it for a few of the projects using bootstrap or angular. Without Jade & Stylus Developing template engines for Express How to make an Express site without a template engine? - Stack Overflow adjohnson916/express-views-dom: A DOM view engine for Express. Sass instead of stylus

Mobile Design for Multi-Navigation Systems

      So awhile back I started a project that would extend or solidify the bootstrap sidenav. This is because I didn't think the grid system was qualified for such a major role. Bootstrap works great for mobile design up until you start talking about a different navigations than what the guidelines recommend. I'm still working on this project but for I now have hopes of finishing it which you can find on github under the  name bootstrap-sidenav-component. Much of my effect in the last couple years has been to extended bootstrap not recreate or overlap it, which is what this project will do as well hence why I call it a component of bootstrap. Project: https://github.com/fassetar/bootstrap-sidenav-component

A Very Un-Bootstrapy Navigation

    Sometimes you have to create something against your own principles but this isn't too much of a bad design its just that doesn't have a place in the modern web. I took this code from the https://getmdl.io/ website and removed all the code not related to this feature. Also just to be clear I didn't use bootstrap to style this, the point is that this design goes against bootstrap's guidelines. However it does solve a problem for me when project managers won't listen to my suggestions. Later I will come back with angular directive on this. Solution:  https://github.com/fassetar/blog-examples/tree/gh-pages/horizontal-collapse-nav Resources https://docs.angularjs.org/api/ng/function/angular.element http://stackoverflow.com/questions/27576643/finished-loading-of-ng-include-in-angular-js https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

Web/Game Development - Math Isn't going to be a Problem

    When I was in college I wondered how much math I would need to become a game developer. Just for one of my associate degrees I had to take calc 2 which honestly wasn't that bad, I think the physics based calc was more of a challenge but that's in the past now. The real work begins is in my career and a lot of times my math isn't what it needs to be to create a proper solution. When I was building penguins-rising I didn't have any problems with coding just solving some algebra. So I went out of my way after that project to study what I could. Terms & Studies Geometrics Orientation (vector space) Making a Rotation Matrix From Scratch - YouTube Textures Phong reflection model http://cs.jsu.edu/~leathrum/Mathlets/parapath.html created by a student that shows how graphs can be modified . Fuzzy set Algebra (of course) Vertices Vectors? Just going off my knowledge with C++ This is just a few things I've come across over the years as a devel

CSS3 Vertical Scrolling Text

    Initially I created two separate ways of implementing, both used css3. The solutions I landed on was the one that allowed me to reposition the starting point for the scrolling text. I couldn't remember the more popular name for this type of feature but it doesn't matter the title kinda explains it better. It's sorta like when I'm looking for an autocomplete feature in bootstrap and keep forgetting that its called typeahead, since my first introduction was with jquery-ui. On a final note I did create a directive in angular to handle creating the content but its not necessary for the solution. Modified someone's  code to work the way I wanted, but later I will be using this for one of my projects. Solution: https://codepen.io/anon/pen/yJqbjV Resources http://www.html.am/html-codes/marquees/css-slide-in-text.cfm Infinite loop http://stackoverflow.com/a/13309775/1265036

UI-Bootstrap Collapsible Sticky Footer

    I could have done this a lot of ways and ultimately I made it work with javascript modifying the class names. I also had to create multiple class names which I didn't like to much, I might come back and improve this but for now this is was I got. Also I call bootstrap+angularjs = ui-bootstrap, not sure if that's common sense but thought I should include it somewhere in my notes. Working Example: http://plnkr.co/edit/2N9ENlbw3bSvg1W9n0ch?p=preview This little css was key to prevent any kind of animation on the collapse, which would result in a scrollbar appearing on the body. A scrollbar can appear when the content's too long but not on the sticky foot duh! .no-animate { transition-duration: 0.0125s; } Research Angular-UI Bootstrap Collapse without animation - Stack Overflow http://jsfiddle.net/paulalexandru/Z2Lu5/  - Was looking at this to see if I could reuse it but I ended but just doing my own thing. Another way which I've seen Using a sticky

My Patco Now Runs on Firebase

   Over the past two months I've do to made a critical decision due to costs and completely redid the backend for mypatco. Of course there was breaking changes but that wasn't related to the bad reviews that came in (caused by another developer). Instead of using azure now the app is hosted on firebase which everything I need starts out for free. Key Features Free Https Later needed for Geolocations Free use of Custom Domain  *Databasing (real-time) Json type database greatly reduces time for developing with api's Static Hosting Plugins for Angular with Database Authentication The first two really sold me on the idea but the static hosting had me worried since a lot of my data was handle at the middle tier level. Pretty soon though I had my data flatten and it just made sense but the process of updating my database is still in the works luckily though not all my code had to be scraped. To get the database corrected I still have my azure code to handle th

D3js Pie Chart with Toggle for 3D/2D View

   I found an example that does this already out there however I found it on accident after playing around with the code. I know that any examples with a 3D pie-chart would help to get me started but I didn't think any example would just have a straight shot answer. Here are links to both the used example and my example to play around with the chart. Even got a cool toggle button going on! The trick is to play with the inner radius parameter in the Donut3D js file. Solution:  https://github.com/fassetar/blog-examples/tree/gh-pages/toggle-dimension-d3 Research http://bl.ocks.org/NPashaP/9994181

A Better Material UI/UX SwipeRefreshLayout Style

Image
    When I was thinking of the designs for mypatco, I decided to use a pulling down gesture to handle user requests for updating train schedules. If your not familiar with android's UI/UX jump to what the images to get what I mean. Default UI/UX The Issue with my design     At first this is what I did and where I ran into trouble with is when I was loading in the data I would use a second spinner. The pull to refresh spinner would disappear but for a split moment both spinners would be in the user's view. This was a design fail in implementation, and I didn't better design for fixing this. Material Up version   I don't like this version of the pull to refresh but I wanted to include it because I think its interesting it combines what I would call the old style of Google's spinner with a "pull to refresh" gesture. The correct way would be to use the material progress bar. The spinner used in this image is too large for its parent container an

Firebase Realtime Data - "setPersistenceEnabled() must be made before any other usage"

    Just a small issue I encountered with my android app with how to correctly implement firebase real time data to be persistent. I did found a few notices on how to correct this and most of them was just making the database instance static or with a flag to see if the object wasn't already created. A better solution would be having the later version of the object handle this in a method. What I did was just wrap it with my own object and create a method like its explained in the github issue. The purpose of this post is really just make the information more available and public so the documents get updated or the code get addressed. Code public class FirebaseUtil { private static FirebaseDatabase mDatabase ; public static FirebaseDatabase getDatabase() { if ( mDatabase == null ) { mDatabase = FirebaseDatabase. getInstance (); mDatabase .setPersistenceEnabled( true ); } return mDatabase ; } } Usage DatabaseRef

My Patco - Version 14

    My goal for the support of "My Patco" is to create updates every once a month, and have the schedule automated from here on out. I think for the next few months I will need to validate most of my work but for the most part the updates coming in the end of this should really start to be stable. Initially I created the database around google's train system standard however looking things from a direct approach this approach doesn't need the same level of architecture. In fact it hurts me because I'm constantly looking for things and need to join tables just to query a single schedule. I could probably do it all with just two parameters.    For I'm aiming to finishing this version up which requires some work on the backend more than the app but users should see the app respond a lot faster. I know there was a bug when I released but had to meet my deadline or else I would just keep pushing it back. Things like that can happen a lot if your just doing it for

Make Android studio behave like Visual Studio

    I really enjoy using Android Studio compared to eclipse, a years ago I would be frustrated looking for things but now days this isn't the case. With my job I need to use Visual Studio and over the course of five years I think I've mastered most of the hotkeys. The transition isn't too much difficult between the two but it can get annoying with the hotkeys. Also I want to say love look of both IDE's so other than functionality the two are awesome tools to work with. Prevent Last Project from Auto Opening    I sometimes forget what my last project even was, thankfully its a simple to fix. Open your Setting and under General remove the check for "Reopen last project on startup" and you're done! Prevent Auto Gradle Running  This really slow things down when starting up. If its know working project doesn't make sense to just waste time processing. I'm talking about projects where the dependencies are already included. Disable Gradle auto

Google Service Account with Aspnet MVC Behind A Proxy

    Recently I had a fun project to attach google analytics data to an internal site which took longer complete than I thought intial thought but now I could complete in just a day. My biggest issue was finding out the issue was related to the company's proxy. Which I quickly fixed by just added the following snippet at the bottom of this article. For everything else this is just my notes and things I found to help me drill down into the queries for grabbing the data.  Questions How to get the Access Token for GA? - C redential.RequestAccessTokenAsync Querying example -  Use Google Analytics API to show information in C# - Stack Overflow Behind a Company Firewall     Both errors I encountered were "No connection could be made because the target machine actively refused it 172.217.1.77:443" and  “requested service '…' could not be activated” the first time it's accessed ".   <system.net>     <defaultProxy useDefaultCredentials="

AngularJS: Single Page App Notes

    This is article long overdue and I just wanted to talk about a few things I think others should know before starting. My first piece of advise is use use ui-route rather than ng-router. Really get to know ui-router because of its awesomeness. Using Parameters     I've come to really enjoy using parameters in all my apps and if you work with them well enough you can find some really cool ways to simplify your code. Example using the value of a parameter to set up detailed information in a child view saves time building out the whole app because with the url you can save the state. Just a small way to change your app rather than always looking up a global list. So that in mind for tracking information. Also when possible make "beautiful routes" or readable routes it helps other people following the structure. Backward Compatible     I have been able to get ui-router to work with ie8 using es5-shim, if you don't need to control the browser history you pretty m

Bootstrap integrated UI Block with Zero Flicker

The jquery plugin “UI-Block” is an oldie but goodie, which has helped me in some hairy situations from previous developers' work. A lot of code I come across isn’t prepared for delays but this library is the easiest way for handling delays and preventing user click events after ajax calls have happened. A while back I created a graph to help create consist flow for all the possibilities but I may have over just over complicated. With this new approach I have a straight forward solution that doesn’t require much js code. Rather that using JavaScript it uses. css for performance reasons. There is a angular UI-Block and even a update version of UI-block for bootstrap, but I didn’t see the performance of either that I was looking for. Inside a div element! The final piece is important. found an example - http://jsfiddle.net/wilsotobianco/b5LkaLan/2/ which I need to recreate, but for now I just used the modal for global use and inside the div display a process bar o

Use Seo for Employment!

    I think I have a pretty good understanding of  structured data. Most of my experience comes from my blog but now I'm using it with my personal sites and it got me think what good it could do for others if people used bring in work maybe they do and I just don't know. No more recruiters, headhunters, etc. However my personal experience taught me that it's much more than just putting your name out there. Its proving by example which is becoming easier each day for me, still this is what I did for my site. For Workers    Use schema.org and google's structured data tool, as a added bonus I recommend using microsoft's seo tools as well. Both bing and google have a webmaster tools, bing's isn't as nice in my opinion. The Gist of it (Microdata) <div itemscope="" itemtype="http://schema.org/Person">       <link itemprop="sameAs" href="http://www.anthonyfassett.blogspot.com/" />       <img itemprop=&q

Bootstrap: File Input Style + Angular

    Usually with file inputs for bootstrap I use simple  the "form control" class however it comes up too often for a little more. With my recent article on using font-awesome for checkboxes, I've been working to create the same approach. I even have an example I can show later on, right I'm using it to demo a service I have for parsing pdfs. Before I found the font-awesome idea here are some libraries or resources I found to add top of that. I'm using both of the angular links in one or more projects! Libraries jasny bootstrap dropzonejs With Angular Support http://nervgh.github.io/pages/angular-file-upload/examples/simple/ https://github.com/danialfarid/angular-file-upload Notes http://bootsnipp.com/snippets/featured/bootstrap-drag-and-drop-upload

Asp.net: Dynamic Sitemap.xml

    This is an article I started to working for the project: rustkickers, which for now I'm putting on hold. What I was trying to do was kill two birds with one stone. If you need a good sitemap to submit to google or to create a "site map" for you users then this would do it. I haven't finished making it but there is where my notes are. Generating dynamic XML Sitemaps in ASP.NET MVC - Ben Foster ASP.NET MVC: Get all controllers - Stack Overflow Resource http://www.robtennyson.us/post/dynamic-sitemaps-with-aspnet-mvc  - Example http://blog.divergencehosting.com/2009/04/01/dynamic-create-google-sitemap-aspnet/  - Another example Create a Google Site Map with ASP.NET ASP.NET MVC: Get all controllers - Stack Overflow http://msdn.microsoft.com/en-us/library/yy2ykkab(v=vs.100).aspx Maybe create a atom feed instead of a sitemap.xml? http://weblogs.asp.net/seanmcalinden/create-rss-and-atom-feeds-using-custom-asp-net-mvc-action-results-and-the-microsoft-syndicat

Retrofit Callback instead of Async Handler

   For a quick and dirty solution I used an async handler in my activity, to call an api. I sometime need to see things work right for a sanity check, and win whatever small achievement it holds. Whether its just to reassure me I'm on the right path. So below is a quick and simple change but makes all the difference. @GET ( "/GetTimes/{id}" ) public ArrayList<YourObject> GrabData ( @Path ( "id" ) String id); vs @GET ( "/GetTimes/{id}" ) void GrabData( @Path ( "id" ) String id, Callback<ArrayList< YourObject >> callback); Resources using Square's Retrofit networking library Retrofit.Callback's success() and failure() If you callback is in a fragment Receiving custom parameter in retrofit callback

Bootstrap Styled Checkbox with FontAwesome

   I was inspired recently when I cam across some quick css that leverage font-awesome for browser specific inputs, which I liked so much I wanted to further but as luck would have it I already found a project that did this. Which added support for the different types of components in bootstrap. I'm still looking for a project does this with the file input style. Regardless if I don't I'm going to make one and adapt it in a project that uses my npm package. References http://codepen.io/jamesbarnett/pen/yILjk/ https://github.com/flatlogic/awesome-bootstrap-checkbox Side note https://github.com/HourlyNerd/angular-bootstrap-checkbox

Company Logo's by CSS and maybe with Seo support?

Overview     What I want to do is take a company logo and instead of an image to display is by css instead. Then using the favicon of the as the seo image and for backward support on older browser. With css3 animations this would allow me to add more flare to the logo as well as the company name that usually appears inside the logo image. This Separation would give much a lot flexibility as well as quality over an image. Example Below is an example of a logo (similar but exact to company logo), and as stated usually a company name is either beside the logo or the company itself is apart of the logo. With internal apps I would reuse this logo but not the company name. Code: https://github.com/fassetar/blog-examples/tree/gh-pages/logo-svg Notes     I haven’t fully tested this on a website buts it’s still just an idea and if it works it could save time retrieving the logo in a single favicon which can still be a png. There is were a fallen can take place, in m

Another look at using Steppers and Menu Wheels

    With a lot of my websites I don't get to thinking about the number of clicks and simplifying the number of clicks is sometimes difficult. So for a large part of my projects its sticking to the old tricks unless I rare opportunity. However playing around cordova and working on my nanodegree for udacity as gotten me to thinking. I like the concept of steppers but they case really fits for predefined, short and simply lists that would otherwise be a dropdown. Reference:   https://www.youtube.com/watch?v=CW4qKTJqHPo A better and more general use would be menu wheel kinda like on a iphone when it its a select list, I'm not a iphone user so I get the simple version on android. Making the experience the same is key so in the past when I was at coriell I got the chance to implement something similar for mobile and desktop users which was successful. I forget what I used but one thing I know is it didn't leverage the mouse wheel. I would have liked to have added that fo

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Installing Windows on Acer chromebook 15 cb3-532

Aspetcore: NLog with Postgresql