Posts

Showing posts with the label Web Development

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

UI Design for Processing Modals

Image
    Dialogs, Light boxes, and Modals whatever you call them are a common interface used in websites. When I started out I constantly had to write code to handle multiple situations. After writing a few I started to list a few behaviors I think should happen in/after a modal close. Without going to deep in an explanation I really just wanted to come up with a good way to include offline mode in my applications. Rules Not all of them but just some examples, the image is a better example. Every action must give imitate feedback to the user (results can be async). I.E. "Buy" will convert to "Processing" Information should be logged and stored for users to retrieve it. Applications Types of applications these I thought of. Ecommerce quick way to buy Settings in a Dashboard Post back or User session stored variables. Social Media Log ins When attaching or connecting to main site account. P

Avoid Mixing Server Side and Client Side Code

Some Background      This article is from a time when I used primarily Asp.net 4 with razor syntax which was a love and hate relationship. I started out as a front-end developer but was limited by my peers on the technologies I could use as well as my skills. Even though I was peer reviewed much of my code was "acceptable" I however felt it lacked something. Currently      I avoid mixing MT (middle-tier) and FE (front-end) code; it goes in hand with my philosophy on how to design web applications. I strongly recommend going the extra mile. Ask yourself how will others use the code; not how will they reuse it, that's another concern. Also how will you debug it if something goes wrong? There are many reasons why I avoid doing this. Mainly cause I like to take the approach of SOC (separation of concerns).   After years of frustration trying to debug finally I made this rule for myself. Not only with my code but in my process of thought during developing. Which w

A Good Structure can say a lot

      So one of the things you got to love about developing Asp.net applications is the default folder structure. As a nou can easily pick up on the concepts and figure how to organize yourself. When starting out an unity3d project not so muc (in opinion). I look at the new Asp.net 6 as a perfect an example, ita not simple but labeled out and can teach you new concepts. Maybe is just me since I write more web apps than games. Whatever the case may be I've learned is its not easy to pickup on new concepts if the structure isn't there by example.    So a little bit of my experience and not to down play unity3d cause it is pretty simple to get. What I see as a constant problem is organization and structure. Which the two go in hand when developing. Whenever I use plugins and import other's code its doffocult to get back so some kind of structure. Everyone does it differently but it can get really annoying if you have a folder structure and you want to force it across your i

Svn Merging Dev/Prod with TortoiseSVN

Image
    For some of my  professional  projects I don't get to choose the environment and when that happens I'm forced to learn or re-learn in this case certain tools/technologies. I can't take complete credit for this article as it was mostly written by a previous co-worker however nothing here is secretive and it shouldn't be; since none of it is  proprietary .  Merging from Trunk to Branch   After making any change in trunk, immediately merge those changes to the branch, Make sure your working copy of your branch has no un-commited changes. Open command prompt and change into tortise bin folder. Usually: c:\Program Files\TortoiseSVN\bin\  Update your branch working copy with the following command: TortoiseProc.exe /command:update /path:C:\ Development \ YOURPROJECT Replace the path parameter with the actual path to your branch working copy Run the following command: TortoiseProc.exe /command:merge /fromurl:https:/ /subversion.com /YOURPROJECT The follo

Notes: Creating an Automated Testing Framework W/ Selenium

Image
     Recently finished watching all the videos on Selenium on automated testing and looking forward adding this framework to all my web applications tests. The rest of my knowledge can be found on the  Login-Automation  project ( I took the example and created it around google's login instead of the wordpress example show ). Types of Testing Unit Testing At the code level, code first! Such as "Mocking" or D.I. Integration Testing No need for mocking but still code. Black-box Automate Testing (BAT) Testing in a scope from a user  Regression - "worked yesterday" Absolute Requirements! Leverage Common failures Recorded brittle tests - weakly attached and simple changes break the tests, manual fixes. Not Building A Framework - Start out good, but end up the same problem. Writing Test like Code - Passed off to not programmers and slow degrade. Solution      Separate automation framework and simple tests. Test drive creation of

The Three Types of Content with Web Development

Image
Background        I don't know if anyone else thinks about content the   way I do and I'm always challenging myself to see if my thoughts hold true with others. This way idea might seem simple but it goes way back in college when I was just starting out and learning to code. During one of my classes I asked myself the old question " What is static? When is it static? " From all my experience and development in the field, I've came up with this approach which I think is based off current technologies but mostly on my experencies with cms technologies. This article goes really inhand with my other article on The Four Components of a Web Application . Details       The way I've answered both questions is by treating everything as dynamic (to some degree) and to imagine that everything eventually becomes static.Whether its a database query or whatever; to some degree everything becomes "out dated". So at what cost is it worth it to make something mo

The Three Types of Material Design Libraries Available

Image
     There are a tons Material Design projects out there but I choose these three because of their popularity and for the fact I just found these projects interesting for a few of own projects. I work in a variety of environments so each gave me certain advantages over the other. This article is just how I broke them down and what projects I plan use them for.                  Angular-UI Team | Materialize | Material Design for Bootstrap https://material.angularjs.org/ Useful for when you are using angularjs. missing some stuff or just not shown in the documents. Great for my single page example. http://fezvrasta.github.io/bootstrap-material-design/ Useful for bootstrap project and updating them to material design themes. Wish they used Sauce labs Tests like bootstrap. Great for updating my bootstrap sites and my blog. https://github.com/Dogfalo/materialize Uses Jquery, and simple to get up and run just like bootstrap. Very close to other css libraries but still

Just a Thought with Asp.net MVC and Portability

        Since the release of Vnext this idea has become less of a concern for me but a majority of my "professional" projects have been in MVC and with Vnext offering larger amount of support this article doesn't really reflect any of my current solutions. Instead it is just a thought on allowing me to continue with the frameworks that I currently use in my career with frameworks that are available to me in my personal projects.       It is very important to me, to create fast, low cost, and high processing application. As I like build with large number of tools in order to increase my productivity since I have less time at home. Working in familiar frameworks between work and home isn't a must but just something I think that works in my favor. If all else fails, I can just pick things up. I go along. Plus there's always the bonus of my javascript skills.      My original thoughts for this approach show below was to move all my controllers into an angular pr

Array Value Url Queries

Image
    I have written some articles on Solr and even more on AngularJs however when it comes to URL queries, I think a lot of production solutions do the opposite of what I'm about to suggest. I think the simpler approach is better and if major companies looked at their solution might find that their UI to be over cumbersome. I think if a URL is public it should be straightforward with what its values mean. This gives advanced users the ability to directly navigate and novice the ability to bookmark urls.        The problem with facets in search grid is that you have a limited number characters you can use. This is less of a problem in a post form but you won't get link for your novice users. I don't like the idea of a "bookmark button" - style UI where it provides the users with a guid that is unique to their search. So a get method approach is more appropriate for the behavior we want. At one point I thought it would be necessary for guid value kind of system.

My First Interview with Google

    Sometime after I  graduated back in March, 2013 I was lucky enough to have an interview with Google for a six month contact on the west coast.     A lot of time has passed since my interview and this is just some of the notes I took before hand in order to  prepare . Regardless of the outcome of this  interview  I still I learned a great deal, and look back at it as an example of how to  effectively  prove my skills. I was d efinitely  was  nervous on this one haha.   Jobs description and position daily work type at Google     "In this critical position, you will be part of exciting as well as   new fast-paced projects. Your role will include working as a team with mechanical, hardware and software engineers to  tackle challenging design issues while improving existing manufacturing processes. In  direct contact with engineers, you will be  i nvolved in the entire lifecycle of several products , from early prototyping to full production and  worldwide  deployment.&q

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

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 li

Base64 images in Web Applications

    Web essentials has this really cool feature that allows you to convert your images to base64 on the fly which at the time it was a very new concept to me. I had no idea that you could use a string of data in place of the url but right from the start I got the impression that it wasn't very efficient. Not only that but I was pretty sure that anything less than IE10 was going to cry about it. My experience and gut were right, now IE support aside this is still a really cool ability to have but I did some research still to see if it really wasn't efficient. Which also appeared to be true, but I didn't test that myself. Still the reason behind why I might use this feature would be when you have a small web application and for whatever reason you need all the resources  to be inline with the html. A better scenario is if the whole html page was being placed in a xml as cdata. I've actually had to do this before with an Google Hangout application. Resources php - Wh

Html: Download Files and Respond

    For a particular web application a user has selected to download a file but since the files is extremely large it will take sometime for it to return. In the process of write out this task, I knew already how I wanted the process to appear. However I didn't give it too much thought as to how I would implement it since I have multiple possible ways to approach it.     To make a long story short I ended up doing what I've seen before with Google Drive and just made a button that would direct to a new tab and return the content type in the headers. What this does is allow the user to see a response without impacting the whole page. Note that I used a button instead of a link. Inside the  button and create javascript function for the  onclick attribute. Inside that function I simply called  window.open . There is two reason why I didn't use just a link, the first is I had no clue what the link would point to until the user was done making a selection. The second was beca

CSS: 0px or 0?

    I've used zero's in my styles before but I think it has been an habit of mine to "px". In the end, and it was when I use checking out the features on Web Essentials  that I noticed this helpful hint. I think the benefits of choosing one over the over are very small. Something similar to choosing a comma or a double comma in javascript but I find myself in a grey area when it's one habit vs another. So what I've started to do is just use zero's instead. Not a very difficult habit to change but I need to be consistent so it has been more of a pain to go through all my projects and edit all the styles. Reasons Behind my Choice Saves space using single character. The definition is universal in all browser (zero is zero). There are a lot more reasons in the links below but these are the two the easiest to remember. Also just because I like to use bootstrap with a lot of my projects, I noticed that bootstrap already does this so that is another re

Seo Stuff for My Blog

    I've added some new features to my blog but most of it has probably gone unnoticed with what can directly be seen. So this is what I've done, first corrected any 404's and fixing broken indexed pages.  Replaced images with more compress versions and combined styles as well as scripts.  The other stuff I did is a little harder to document since it was varies based on what tools I was looking at but overall I simply just made my blog better for indexing or displaying in search results. Resources Webmaster Tools: 404 Redirection - YouTube DMOZ - the Open Directory Project Yahoo Directory Listings Google Product Forums Google Authorship Photo Snippet in Search Results Not Author Dependent Developer's Guide: Protocol - Blogger — Google Developers How to Add a Google Sitemap to your Blogger (Blogspot) Blog What are sitemaps? - Webmaster Tools Help Tools Index status - Webmaster Tools Help Search Engine Optimization (SEO) Tools | SeoSiteCheckup.com PageRank

Fiddler Tutorial/Notes

    I after using Fiddler for a few years now, I wanted to jot some notes down for myself so I don't forget. I really like using fiddler and most of the time I prefer using it over the developer tools inside chrome just because I can use it across different browsers at the same time. This Saves me a lot hassle in opening the developer tool everytime but you might ask what is fiddler? "Its a web Proxy", where you can debug traffic calls, test the network performance and tons more stuff.  Fiddler is a .net application and will not run on other platforms however you can point clients to a host machine that is able to run fiddler and debug from there. Notes Traffic Import- Seeing a client's web experience. FiddlerCap  - lightweight version of fiddler more for client users, to allow you to see specific http request and responses even if you not on that network. Example problems that you can use this for: DNS corruption Poison DNS or other known as DNS spoofin

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Installing Windows on Acer chromebook 15 cb3-532

Aspetcore: NLog with Postgresql