We’ve recently upped the ante in regards to pattern libraries developed by the front end team here at Markit Digital. Previously, these libraries were scoped to a use in only a single project. Our new approach is to focus either an entire client or a large subset of a client’s projects with a single pattern library. This means what was once a single use set of patterns could now, and hopefully will, span multiple projects. They can also more easily be used as a starting point for a client’s new design work.

This posed a number of new liberties as…

Here are the last odds and ends I’ve found throughout the new version 4.

Custom checkboxes, radios, file selects and select boxes have always take me longer than they should. I usually try to hunt down a previous version I’ve made in another project but, luckily, BS4 has these out of the box now. It provides a few helper classes that use svg/png images as background-image rules and spit out custom checkbox/radio buttons. The current markup looks like:

<label class=”c-input c-checkbox”>  <input type=”checkbox”>    <span class=”c-indicator”></span>  Check this custom checkbox</label>

I’ve used both the custom checkbox and select already and…

Like old cars, one day it’ll be cool again to have padding on the <body>

The new bootstrap reboot file adds an additional layer of resets and gotchas on top of the standard “normalize.css”. If you’ve ever wondered if using Bootstrap is really worth the potential bloat it may add, I’d recommend looking at this doc and its comments. The supplemental ~300 lines of code have a number of little UI fixes for specific browsers that almost certainly will save me from a lot of bug tickets in the future. The comments also include many URLs further documenting particular cases . …

Lucille tries to explain REMs.

BS4 is kicking pixel measurements for the more mobile-awesomeness of REMs & EMs. My first impression was a bit hesitant towards this change. EMs and REMs were a bit confusing for me at first. Just searching for information on what EM stands for is a total riddle.

But, after diving through a half-dozen or so blog posts, I’m feeling a lot better about the change. Here is the my most simple explanation of how they are used:

A REM looks at an element’s “root” ( <html> ) and is relative to its pixel value.

An EM looks at an element’s…

The amount of Github notifications I’m seeing on Bootstrap v4 is truly amazing and definitely suggests there will be more refinements and possible additions in the near future. However, I’ve put together a few posts on the big changes I’ve found so far.

· Goodbye IE8 (and iOS6). Support is now IE9 and up.

· Swapped from LESS to SASS (.scss) language.

· Dropped pixel measurements nearly everywhere in lieu of em’s and rem’s.

· A new grid tier @ ~480px, making the breakpoint syntax now xs, sm, md, lg, and xl.

· Panels, thumbnails and wells are all replaced…

React provides a neatly organized pattern for assembling web components. Each component is comprised of a render property that supplies it’s markup. It also has a slew of available properties that hook into the components life cycle. For a simple example, if a component needs to initialize its content data it can use the “componentDidMount” property. This hook would be fired as soon as the component is finished rendering to page. More complex needs can be addressed with similiar hooks such as “componentWillMount”, “componentDidUpdate”, or “componentWillUnmount”, to name a few. A component’s structure ends up resembling this:

var MyComponent =…

Second only to credit card hacks, one of the most common concerns of a web application user is password security. Luckily, for us rails devs, there are a plethora of gems that do this heavy lifting for us. If you look under the hood of some of these gems you’ll find a beauty of an algorithm called bcrypt. Now, if you’re like me and began developing rails within the last half-decade or so, it is very possible you first heard about this algorithm in Michael Hartl’s “Rails Tutorial” book. …

In six easy-to-code steps

A new UX for a 1-page Angular App

I ran into a few challenges recently while adding new Angular.js functionality to my own homepage. My goal was to create a one page-style app to demonstrate my projects a bit better and to just get more experience utilizing Angular. I’m very satisfied with the end result but there were a few trouble spots along the way that I thought would be good to write about.

The first hiccup I noticed, only after a large chunk of changes had been made, is a one page app loses a lot of “back” button functionality…

String Sanitizing Quick and Easy

I haven’t been coding much lately with all the work my wife and I are putting into our recently acquired Airstream. I managed to find a few minutes to hack a few mornings ago and decided to add a bit of security to our map feature. I’ve been aware since creation that it is open to a lot of security threats. However, I wasn’t too concerned until a recent slightly hostile blog post was written about none other than my wife and I! I could hardly believe we’ve attracted the attention of strangers from our tiny little nook in…

Eric Nolte

Gastroergonomist working for mediavine.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store