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

centering a perfectly circular frame

A StackOverflow visitor asked if it was possible to frame his webpages in a perfectly circular frame, which would resize to fill the browser window but not spill over the edges.

It was a curious problem, so I tinkered with it and found out we could, using a few modern tricks like viewport-height units (which aren’t universally supported, sadly). The result uses two divs, one inside the other:

<div class="wrapper">
  <div class="circular"><!-- content --></div>
</div>

And the following CSS:

html, body {
 height: 100%;
 padding: 0;
 margin: 0;
}
.wrapper {
 width: 100vh; /* viewport-height units */
 max-width: 100%;
 margin: 0 auto; /* for horizontal centering */
 position: relative; /* for vertical centering */
 top: 50%; /* for vertical centering */
}
.circular {
 overflow: scroll; 
 padding: 13% 13%; /* keep text within circle */
 border-radius: 50%;
 border: 10px solid #000;
 box-sizing: border-box; /* so 100% width includes border */
 height: 100vw; /* viewport-width units */
 max-height: 100vh; /* viewport-height units */
 margin-top: -50%; /* for vertical centering */
}

See the Pen vertically centered circular div by Martin Blase (@mblase75) on CodePen.

Bootstrap 3.2.0 and jQuery UI 1.11.0 released

The latest point update adds new responsive utility classes and responsive embeds for video, along with other minor changes.

The jQuery team also released a point update to jQuery UI, adding (among other things) a selectmenu widget and deprecating support for IE7.

Other than that, not a lot to report on the project front — I’m halfway through about four different websites, but nothing’s completed yet.