yowainwright

switch (inputFrequency) {
  case 1: 
    date = this.nextBillDateIsWithinOneMonth(nextBillDate) ? 
      moment(nextBillDate) : moment(nextBillDate).subtract(1, 'month')
    break
  case > initialFrequency:
    newFrequencyDelta = (inputFrequency - initialFrequency)
    date = moment(nextBillDate).add(newFrequencyDelta, 'month')
    break
  default:

yowainwright

@mixin play-button ($fontsize, $circlesize) {
	position: relative;
	&:after {
		content: '▶';
		display: block;
		width: $circlesize;
		height: $circlesize;
		border-radius: 100%;
		position: absolute;
		left: calc(50% - #{$circlesize / 2});

yowainwright

import loadImage from 'loadImage'

const addImg = (src) => {
  const imgEl = document.createElement('img')
  imgEl.src = src
  document.body.appendChild(imgEl)
}
const imgArr = [
  loadImage('images/cat1.jpg'),
  loadImage('images/cat2.jpg'),

yowainwright

const build = () => {
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      if (err) return reject(err)
      resolve(stats)
    })
  })
}

export { build }

yowainwright

// target IE 10 and 11 with a media query
@mixin support-ie-10-11 {
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @content
  }
}

// hack for css styles for < ie 9 only
@mixin support-ie-9($property, $value) {
	$property: #{$value + '\0/'};

yowainwright

@mixin stripes($backgroundColor: black) {
    background-color: $backgroundColor;
    background-image: linear-gradient(to bottom right, transparent, transparent 25%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.2) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.2) 75%, rgba(255,255,255,.2));
    background-size: 4px 4px;
}

yowainwright

@mixin progress-bar-color($valueColor: $color-brand-contrast, $backgroundColor: transparent) {
  background-color: $backgroundColor;
  color: $valueColor;
  &::-moz-progress-bar {
    background-color: $valueColor;
  }
  &::-webkit-progress-bar {
    background-color: $backgroundColor;
  }
  &::-webkit-progress-value {

yowainwright

// vertically center
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}
// Example usage: @include vertical-align;

// horizontally align
@mixin horizontal-align($position: relative) {

yowainwright

Listed below are a few CSS questions for discussing CSS in an interview setting. Each answer should be a short sentence and be answerable over the phone. The question format is more to spur conversation rather than to define merit.

What is difference between the CSS property values inherit and initial? What is an example of when this is signicant?

the value inherit takes the value of it's parent the value initial takes the browsers initial value of that html element inherit could be used for links (<a>) within a title element (<h1—6>) to inherit colors, etc initial could be used to override a normalized style for optimal browser specific css.

What is reason to avoid using a *clear-fix? Why might not using a clear-fix be beneficial?

yowainwright

Listed below are a few HTML questions for discussing HTML in an interview setting. Each answer should be a short sentence and be answerable over the phone. The question format is more to spur conversation rather than to define merit.

What is the default style display property value of an image (<img>)? What is one reason why this is signicant?

it display: inline-block in browsers that support display: inline-block

it can cause random spacing issues within a content space

When the DOM is rendering in a browser, what element loads after the html element? Why is this signicant?