Posts

Showing posts with the label Web Development

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