Anthony's Blog

Last year I create a login page which I'm very happy to say I built it just how I wanted it. A rare thing if you've ever had to deal with management. Since the page only existed within sharepoint I want to keep things simple. So I went with jquery 2.x and bootstrap 3.3.7.  Oldies But Goldies; so  a few things I didn't want to create a lot of jquery code. So I had to really use the bootstrap collapsible component as much as I could without breaking it. Examples Bootstrap PixKrh7Su5 Bootstrap Fdjc8kQiER Disable collapse for link in a data-toggle element You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer. <div class = "panel panel-default" > <div class = "panel-heading" > <div class = "panel-title" data-toggle = "collapse" href = "#collapseOne" > ...

This is just a foot note in my career after years of developing websites. You can take it as a rant or a word of caution. So for a lot of reasons, I really don't like the select tag. For starters its buggy, there are many things about it that don't work across browsers or behave differently. I wish it didn't, and instead could replace the css alternative, dropdowns. An example of my experience over the years, where I tried disabling a option, apple's safiri didn't like that. On another project I tried to just style one of the options again I ran into a wall with firefox. I don't know if these issues still exist but its giving me enough reasons to avoid. Notes: Not allowed cursor of a disabled field appears in a select tag https://jsfiddle.net/3sq410wk/1/ https://github.com/twbs/bootstrap/issues/16088 https://github.com/twbs/bootstrap/issues/14528

    Continuing off my article on android's material timepickers I wanted to include this feature in the web based version of mypatco. I don't think it will be officially included in the material angular project but just something I could have as my own and if anyone comes across it to use it just as any other component. The key difference with timepickers vs. datepicker just picking time, since time is a more necessary feature for cases like notifications or alerts/alarms. Missing Cancel/Ok Buttons First and foremost I recommend checking out the project which I forked to personalize and strip out any code related to datepicker. Since the datepicker is already implemented in material angular, instead I'm just going to focus on time pickers.   The rest of my notes are in the repo's issue tracking . You may see the results on mypatco.org for an example.

    This article is my opinion on the subject of html entities vs. png or icon files in a web application. If you have been watching bootstrap and seen the beta version of bootstrap 4 you might have seen some of the examples using entities. Initial I thought this was an improvement and in a lot of ways still do. But now I have given it some thought about the longer term of solution. I still think font-awesome is a much better choice to go because of the ability to modify the styles or simply create custom ones in a svg.  I know entities are nothing new but just wanted to write out why I would use them in some cases and not others. Use case for  Entities       For one of my sites I actually used the up and down triangle entity.  I think it’s a good fit for one the ui-grid and other javascript libraries that require some kind of indicator of sorting. In this situation it’s really a grey area of whether the icon...

    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

    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

    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 y...

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

    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

   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

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

    For sometime I've wanted to merge these two libraries together without creating too much work for myself and reduce as much overlap as possible. I have completely moved toward the sass side for my development. I've come up with three approaches but I think the best one is the third one and it little more work than I would like. First Approaches Using an regular expression in node to remove whatever classes and component. This would be great for multiple projects and helpful reducing css on features not in my bootstrap projects. I'll keep this short because I plan to go more in depth for another project. Second Approaches Before I had my npm project I was trying to use grunt-uncss in by looking at the document pages from the source and simply removing the components and icons I didn't want! This would only work with the finally solution of the css and I found a few bugs with media queries. Third Approaches Using an approach like the one in my npm package f...

    Colors aside there's a lot more happening in css themes that one needs to develop or maintain. So I've asked myself countless times if I should just create my own Css library but time was always against me. I think having bootstrap as a base line is a good starting point. Not only for my sake but non front-end developers. As a front-end developer organization with my teams is critical. Every application sooner or later ends up with too many developers doing their “own thing” especially with the styles if there is not standard or company brand. Don't get me wrong the freedom can sometimes be great for a creative projects. However when looking to creating a brand, my applications need to force some rules. I'm not looking to challenge other developers on their approach to new things or change the way they develop. If I can include them in my work flow and at the same time organize them then I will.     So what I'm leading up to is this idea flavors ins...

     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 li...

Link:  btn-lg is smaller than input-lg Example:  input-size-bootstrap Issue     In all modern browsers except in IE10+, it seems that the large buttons with large inputs for input groups are smaller. The difference is only a pixel but is noticeable on some screens. To be clear this issue can be avoided if you  use the input-group-lg  however my test prove that the heights stay consistent regardless which style classes you use. I didn't find this out until I started looking into the issue and I think this is kinda nit picking but something that should be corrected to prevent future mistakes. Changes     For my first attempt I tried changing the @line-height-large but if I changed the @line-height-large this affects the input-group-lg, and select input-group-lg as well as the large buttons. So instead to just change the large buttons I set the large button line-height by adding a 0.01 value. This still had problems in firefox, which lead me t...

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

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

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

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

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