Broken images? Show a placeholder instead

In my recent employee directory app, I had an interesting problem with personnel photos: not everybody had one. Those who did had them stored in a single directory as “{{employee.id}}.jpg”, so it was easy to add a link to the image using AngularJS. But it wasn’t easy for JavaScript to detect if the image was missing or not.

I pondered several possible solutions, and decided on this one: Instead of inline images, which show a “broken image” icon when the image can’t be found, I’d use a fixed-size div element and a style attribute to add the employee’s photo as a background-image. When the employee photo couldn’t be found, the background image would simply be invisible. Continue reading

What I’ve been up to

Nothing new to add to the portfolio right now, so I’ve been continuing to study up on AngularJS 1.3 and improving my employee directory app, mostly through code optimizations — I’ve still got a lot to learn.

I bought an e-book version of ng-book by Ari Lerner recently, and have been working my way through it. I have an unusual approach to learning a new language or framework, I think — first I learn what it is, then I study the tutorial, then I study the documentation and try to build something, and then (if I still need it) I buy a good book to help me out.

When I was first learning jQuery, that book was O’Reilly’s jQuery Cookbook by Cody Lindey (et.al.) — it didn’t try to teach me jQuery from scratch, but approached it in a “here’s a problem, here’s how to solve it” way that I personally prefer. (It might be worth mentioning that I was never a good classroom learner in school. In my opinion, the best thing about a good instructional book is that you can learn from it at your own pace.)

ng-book doesn’t use the cookbook approach, but it does walk through AngularJS in a much clearer manner than the documentation does. So far, almost every chapter has taught me something new that I’ve implemented in my existing code. If you were to ask me the best way to learn AngularJS from the beginning, I’d suggest the official tutorial followed by ng-book, and use the documentation to fill in the technical gaps as you implement what you learn.

new Angular app: employee directory

All programming is a learning experience. Case in point: I recently spent about three weeks working independently on updating an insurance client’s web app from PHP to AngularJS, only to be told after that time that the client wasn’t interested in using AngularJS. At all.

Frustrating, to be sure, but it turned out those three weeks of work were excellent practice in using this new-to-me framework. When I saw an opportunity to use it on a different, internal project, I was able to dive right in and get it done in three days.

impact directory mobile app

Continue reading

CSS-styled strikethrough

The CSS specification lets you specify line-through as a property on a text element, but it doesn’t give you much control over it.  Unlike CSS borders, you can’t control the color (except in Firefox) or thickness of that line.

However, we can simulate this using a CSS :after element. We can even slant the strikethrough line a little, if we’re so inclined (ha!):

s, strike {
  text-decoration: none;/* replacing line-through default */
  position: relative;
  display: inline-block; /* keep it on one line */
}
s:after, strike:after {
  content: "";  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;  /* adjust depending on line thickness */
     /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px); /* half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}

http://jsfiddle.net/mblase75/zd174wb4/

If you want your text to wrap across multiple lines, we need a different approach. By using a wrapper element we can change the color of the line, but not anything else:

.strike-wrapper {
  text-decoration: line-through;
  color: red;
}
.strike-wrapper s, .strike-wrapper strike {
  text-decoration: none; /*replacing line-through default*/
  color: black;
}

http://jsfiddle.net/mblase75/8f3zugja/

two-column form labels and inputs

The usual technique to maintain a two-column form (labels on the left, inputs on the right) is to put the input after the label, fix the width of both elements, and float them to the left. This works well, but I prefer to keep inputs inside of label elements when possible, just to cut down on the number of attributes. (If the input is outside of its label, the input needs an id= attribute and the label needs a matching for= attribute.)

One solution would be to put the text inside the label inside a span, but that’s still adding extra HTML. This solution works by fixing the width of the label and then absolutely-positioning the input element outside of it to the right.

label {
  position: relative;
  display: block;
  overflow: visible; /* if necessary */
  box-sizing: border-box; /* if necessary */
  width: 9em;
  padding-right: 1em;
  margin-bottom: 0.5em;
}
label select,
label input {
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px;
}
/* add overriding styles for radio and checkbox inputs

jsFiddle example