Writing Elegant HTML

The other day I was thinking to myself, "Self, I wonder if there are any books on writing elegant HTML and CSS."  I'm sure there are I thought, and spent some time looking on Amazon for a book.  I was hoping for something that would essentially teach me the correct way to do things since I am pretty much self taught in the area of web development and would like to know what I am doing right and what I am doing wrong.  Unfortunately I didn't find a book that was suitable for what I was looking for.  However I did find a site that I found just as good, if not better. The website, Webplatform.org, has a lot of nice tutorials on it, with explanations why to do it that way.

So far I have only gone through the HTML and part of the CSS tutorials, but I have already found plenty of flaws in the HTML I used to write and definitely plan on changing the way I write it to become more semantic of the page I am writing.  By writing html that is more semantic it makes everything clearer to other developers what the element does, and it also helps out those with disabilities that need to use things like screen readers.

Testing with Angular

I just got back from an Angular JS meetup and there was some good information on how testing your angular app. They used Karma and Grunt to automate and run their tests that were using Jasmine.  Here is a link to the Github page https://github.com/AngularJSChicago/TestingTheAngularWay.

Even though the topic was about testing, I learned a lot about Angular in general.  Seeing some of the things they did in their demo app was pretty cool to see.

.

Getting Started With Angular Part 3. Factories, Promises, and Injections. Oh My!

This post will cover a few major topics in Angular including factories, promises, and injection.  In Angular, when you are writing your actual app you will most likely have some kind of service or rest endpoint that you are hitting.  Angular has a lot of features that help you write your code in a cleaner and more maintainable way, or allow you to use your existing services and just leverage the features you want in an Angular app.

When defining a service in Angular, there are two different modules provided for you.  They are the factory module and the service module.  They are fairly similar, but in the end I chose to use the factory module because 99% of the examples on the Angular site are done using it instead of the service module.  For some more info on the differences on these two modules you can check out this SO post.

Getting Started with Angular Part 2. Filters.

The next topic to discuss in Angular is Filters.  Filters typically are used to format expressions in bindings in your template.  Filters can transform data to a new type, be chained, and take in optional arguments.

Building on the previous example, I added a new field to our models called Orbit.  This represents the orbit of the object in days.  In our view I added a new line to display the orbit on the page just like the other read-only properties before:

<div>{{object.Orbit}}</div>

Getting Started With Angular

Obviously the first thing you need to do to get started is to download Angular.js from http://code.angularjs.org/.  Let’s create a simple page with a script and index.html file.  The first thing we are going to do is define our UI.  What we are going to display is a parent entity (Sun) and a list of all of the orbiting bodies (planets and pluto). 

Angular JS Tutorial Intro

A couple weeks ago at Sonoma, we had a labs day where we could break into groups and work on whatever we wanted to.  My main goal for the labs was to work with something I hadn't worked with before.  The few areas I am currently interested in growing in are working with mobile (I don't have a mac so this is limited to android), JS frameworks, and open-sourced web frameworks (Rails/Django).  I joined up with a group that was going to work on keeping track of internal training.

My main part had to do with displaying child records in an iframe on the parent training record in our Microsoft CRM environment.  Unless you wanted to create your own app from scratch and link the URL to that page the only way to have a custom UI hosted inside the CRM app is to have a Silverlight page or HTML/JS page that is loaded into CRM.

I decided to write my part in angular so I would be working with a new framework.  I thought that it would be a breeze to learn it since I already had knockout experience, but it ended up taking me way longer than I expected.  I was able to get into the hang of it and created a directive using a custom html tag.  One thing I will say for Knockout is their tutorials and SDK are really well flushed out.  I found Angular's confusing and lack of definition irritating.  You can see one of the early versions of the project on my Github page here.