Anthony's Blog

From reading the document on bootstrap (version: 4.3.1)  and comparing my notes from version 3. There doesn't seem to be an example for a right dropdown with a navbar. Flexboxes can be a challenge and moving from bootstrap 3 isn't but here is some solutions. https://stackoverflow.com/questions/51013313/bootstrap-dropdown-with-angular-6 https://ng-bootstrap.github.io/#/components/dropdown/examples https://stackoverflow.com/questions/51013313/bootstrap-dropdown-with-angular-6 Examples -  https://www.codeply.com/go/bRSyq1ooFu/bootstrap-4-navbar-dropdown-right -  https://www.codeply.com/go/cxXqBnGrPx  (icon on the right) -  https://www.codeply.com/go/1ZFF5CEXM5 https://www.codeply.com/go/1ZFF5CEXM5 https://medium.com/wdstack/bootstrap-4-custom-navbar-1f6a2da5ed3c https://www.codeply.com/go/bRSyq1ooFu/bootstrap-4-navbar-dropdown-right With Queryjs  I should probably put this in another article, still I'm killing two birds with one stone....

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

One of the many behaviors that I was asked recently to create was to allowing hide/show of the password and warn users that the locked character key is active. Since this solution could get complex and I just wanted to create a quick/simple demo and because of that I'm going to pick jquery. I could late come back and do it in another library but I already have a few ideas what I want to do. Notes: input - Is it standard practice to indicate on the form that Caps Lock is on? - User Experience Stack Exchange html5 - What's the difference between HTML 'hidden' and 'aria-hidden' attributes? - Stack Overflow Examples:  Edit fiddle - JSFiddle Better Passwords #3: Caps-lock Warnings — SitePoint Code Bins : Password masking in jQuery

There are many things I wouldn't call myself a master of but bootstrap is one of them. I never seem to have difficultly with css but do forget a few things cause they aren't really all that important ! Haha css joke... https://stackoverflow.com/questions/11425115/css-media-queries-for-pixel-density-moz-min-device-pixel-ratio-vs-min-moz-de https://stackoverflow.com/questions/23700941/bootstrap-full-responsive-navbar-with-logo-or-brand-name-text https://stackoverflow.com/questions/8805208/css-min-width-and-max-width-and-flexible-layout Positions Learn CSS Positioning in Ten Steps: position static relative absolute float CSS z-index property CSS Positioning Free responsive html5 CSS website templates, create your own free website How to Center Anything with CSS 50+ Nice Clean CSS Tab-Based Navigation Scripts Table centering using CSS or HTML: theodorakis.net HTML5 Simplequiz 6: Zeldman’s fat footer | HTML5 Doctor CSSTidy https://css-tricks.com/multi...

Its comes to my attention that handling integers suck and probably as much for me as it does the users. Who's got time to plug in a number? In a lot of cases I've default to an text input instead of a integer type because I hate the way browsers display it. That side toggle doesn't work on mobile and isn't very intuitive. So instead I'm using these displays, a slider and a "input spinner"(not the name I would have given it but I'm going with it). I ha rols ve use cases for both styles of these inputs. The slider works great on mobile and in cases where the integer is small works to speed up input. The second is more of a fall back and works on almost everything. Examples: https://github.com/seiyria/bootstrap-slider https://bootsnipp.com/snippets/featured/simple-input-spinner-cont

   With this solution I limiting myself to just css as much as I could without javascript. The draw backs are writing out multiple css selectors and statically writing out the width of column. Also I had to make a max-height for the table, which I was already doing. I could have easily added ag-grid or ui-grid but I wanted to keep it simple and look at the performances. From a development point of view I would say the time to setup either approach is the same. That is building out this static approach verses just using a library. From the image you can see the max-height is only applied to the tbody.  I'll place the code in my github repo when I'm ready.

   This idea came from awhile back when I was working on my project rustkickers. The purpose of the site is to provide documentation on all things motor related. While working on a demo for the site used a old car manual to create some of the designs. That goes me thinking why not make multiple site designs around different car manufactures. Then even further down the rabbit I landed here, which is what this article. Another thought but a cool one I think and yes I know you can't trust the user-agent but it doesn't matter its just the style not the content.  Intial Solution Optimizing content for different browsers Filter based on webkit Chrome conditional comments Is there any equivalent to IE conditional comment for chrome and safari? IE10 CSS Hacks load webfonts through the offline storage cache manifest After playing around with this idea for awhile I figured handling this is the frontend at all was not worth it because of performance. Unless your lo...

    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

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

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

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

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

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

     The time  has come where I need a change in my career and sadly that requires me to leave my current position at Coriell Institute . So just like what I did way  back in 2013 with Northern Safety , I thought I would wrap things up in an article and look back on my achievements.  Achievements (Order of Completion) The ones with asterisks are ones I built in groups.  Atlas Project - Storage Module -   Provided an interface to store unique data sets in multi-forms . Coriell Bio-Repository Catalog *  Atlas Project - Manager Module -  Provided managers to control other user to access data. Blits Project - Modules   Issues & Repairs* - Reported equipment  that were broken or had problems. Inspections* - Collected equipment w/ schedules for inspections.  Maintenance - Collected equipment  for  regular maintenance and  setup schedules.  Dashboard* - G raphical dashboard ...

     If you've looked at my catalog-demo , you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids. Code : $scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); }; Solution:  https://fassetar.github.io/blog-examples/uigrid-responsiveheight/   Notes     To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap ...

     If you've looked at my catalog-demo , you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids. Code : $scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); }; Solution: Notes     To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and probably could use a lot more styling. Like...