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 well as responsibilities to us in regards to owning, building, packaging, documenting, and maintaining our pattern libraries. …


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

Custom Form Elements

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>

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

Reboot

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 . …


Image for post
Image for post
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 direct parent and is relative to its pixel value. …


Image for post
Image for post

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.

The Bullets

· 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 with cards. …


Image for post
Image for post

Components (React Library)

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 = React.createClass({
render: function (){ /* markup */ },
componentDidMount: function (){ /* Init logic */ },
componentWillUnmount: function (){ /* Teardown logic */ }…


Image for post
Image for post

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

Step 1: Create a Rails-API application

Image for post
Image for post

A new UX for a 1-page Angular App

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. Hitting the back button wouldn’t take me back a step in the page, but instead, would take me off the page completely. The cause is simple enough. My application was never actually going to another page. It instead was showing and hiding different elements on the same page, rather than changing the page entirely. …


String Sanitizing Quick and Easy

About

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