Learning Angular and Backbone

This was kind of a random decision for me, but so far its been very fruitful. For a long time I was considering getting into Backbone.js. I read up on a lot of articles that compared them and while all of them were really useful, neither of them really could tell me which one was right for me, so I figured there was really only one way to go about it.

I tried to learn Angular and Backbone both

Well, sort of. I did them separately,  and I can honestly say that if you know more javascript then just jQuery it will do wonders for you. At the first time I tried i really didn’t. I understood the logic, and wrote it all the time, but more then anything I reimplemented existing snippets that I found around. For a time it was the same with PHP and SQL. Maybe thats just how you learn, but thats not the point really. I didn’t understand either and could really only slowly follow my tutorials and it felt kinda crappy.

Some time later, I decided that I was going to give it another shot, and this was after having considerable more experience with javascript, jquery and bootstrap. The community support for Angular.js had really changed a lot at this point. Now I haven’t really done anything exciting of note yet, but I took tutorials for both again, and had a much easier time.

Learn the basics first.

I guess what I’m trying to say is that learning Angular and Backbone may be really exciting, but it could potentially be very frustrating if you don’t know enough javascript to make you feel good learning it. Ultimately whatever side you stick with in the end, Angular or Backbone, Laravel or Fuel, WordPress or Joomla, its going to be way easier with a solid foundation.

On the other hand, if you’re way past all this already and just wanted a comparison chart, I’d recommend this article.

https://www.airpair.com/js/javascript-framework-comparison

Bootstrap 3 Modal issues PT 1

As some of you may know , I’ve been working on a new website using the new version of Bootstrap. I had previously been using Bootstrap 2 before switching to Bootstrap 3 and have welcomed the plethora of new features.

Unfortunately I can’t really say that I had a flawless execution of working with it. For quite some time I had been using Zurbs Foundation framework and still prefer it, but I did not want to fall out of practice with Bootstrap.

I switched to using modals to display the data on my portfolio pieces, but had some serious modal issues. By using the modal-toggle and modal-dismiss data values I was able to easily control which modals were active and inactive, however I still had scrolling issues in the background. That is, after having set up the display and loading all my data, I wound up scrolling the document body rather then the modal taking over fullscreen.

I wrote some custom javascript functions to add and remove various classes that fixed the problem with CSS.

Mainly, if you encounter this problem you can solve it by applying overflow:hidden and position:fixed to the document body while the modal is open, but its kind of a hack and requires a bit more work then should be necessary. If you inspect the document while interacting with the modals you’ll notice that Bootstrap applies the class modal-open to the body when a modal is active.

I set the previous fixes to that class, and the trick wound up making sure that it was always applied. A simple matter, except for the fact that nested modals only had limited support and required a little more work to get functioning properly.

It just so happens though that there was a plugin developed to fix that very issue. If you head over to github and look around for bootstrap modal, you’ll find a project that makes sure that the nested support is provided as well as the appropriate CSS. Theres a little bit more CSS required for Bootstrap 3, but its all provided in the documentation.

Truth be told, just including the script in my file solved everything immediately. If you have similar issues to what I had, I would suggest going over to https://github.com/jschr/bootstrap-modal/ and taking a look.

It provides great support for stackable nested modals, fixes the background scrolling issues, allows for backwards compatibility and has its own options for loading and managing data in modals with AJAX.

I only wish I found it sooner.

For those looking, you can find the github repository here:

Bootstrap Modal

Creating a new website

I’ve been at my desk working hard over the last two weeks to create a new website look. While not necessary, I am doing so because I do believe that its good for a business to change its look around as often as every year. Its been far longer then that since my website has gotten a real facelift, and in fact , I haven’t posted on this blog in even longer.

I’m really looking to change that. A lot of things both good and bad have been happening lately, and it just felt like the right time. I always advocate having a blog for your business, but for years I didn’t follow my own advice very well.

For now, I’m using this awesome 2015 default theme for WordPress, but am behind the scenes working on integrating and converting the new website and blog together to create something great. It will be slow going at first, but ultimately completely worth it. In the  mean time, anything I learn that might be of some use to others in the same boat, I aim to post here.

Morning Glory House

This is a piece I’ve done about a year ago, but never wound up adding to my portfolio. The design was made for Morning Glory House which is an elderly retirement home near Kalamazoo, Michigan. They were looking for a solution to create and manage pages so they could easily update the website for their business as well as a floral themed design to match the name of their business.

For this custom wordpress theme development I used the thematic wordpress framework by Ian Stewart to cut down on cross browser inconsistencies and made a general layout.

The Site URL can be found at MGH Seniors.

WordPress Thematic Framework and jQuery Fixes

So recently I’ve been developing with the Thematic Framework for wordpress. I wanted to get to know some of the more popular frameworks out there and see if it could speed up my development time. Well, I’m not completely certain it decreased my development time yet, but I know for sure that I learned a lot. It really showed me just how powerful action hooks and functions.php is. I did a large percentage of the work by using action hooks and filters. Eventually I went on to writing page specific information and creating separate files for each page, so I was able to get out of using the action hooks for everything. However when I started working with jQuery to get some extra functionality out of the site, I ran into a lot of situations where elements just weren’t responding.

After doing a little research I discovered that the $ sign was causing a lot of problems because there was a jQuery conflict somewhere. I still haven’t found it yet, and at one point I wanted to use a plugin that was written only with Mootools. Again more problems. Even after calling jQuery.noConflict() I still wasn’t able to resolve the issue. The fix I used would seem kind of monotonous to some, but I actually went into the files that were being used and replaced $ with jQuery. All $ really is, is shorthand for jQuery from what I’ve read.

Well rather then go and do it all individually I actually ran a find and replace all on $ to jQuery and reloaded the files. Chances are that if you already are working with jQuery then you already know about jQuery.noConflict() and what $ does. However, if you haven’t maybe this will be of some use. It definitely was useful for me.

Moving Along

For those of you who’ve been following me, I’ve been designing and developing this website for just under a month now. I’m coming really close to the end now. Just when I think I’m going to be done soon, I find more to add. This is, however, a byproduct of learning. I’ve discovered new techniques and bits of information that I want to incorporate. Behind the scenes of it all I’ve been updating my sketches and design to accommodate for this.

It’s taken a while now but I think the time will have been well spent and I’m eager to add the rest of the content and all of the features that weren’t part of the original design. I’m much happier with how the end result will be and can’t wait to get working on it.