Skip to content

Instantly share code, notes, and snippets.

💻
Close 2nd to surfin'

Jeff Wainwright yowainwright

💻
Close 2nd to surfin'
Block or report user

Report or block yowainwright

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@yowainwright
yowainwright / app.js
Last active Dec 28, 2018
load images with Promises from MPJ
View app.js
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
yowainwright / build.js
Created Dec 9, 2017
Build function, used for a Webpack abstraction in the wild
View build.js
const build = () => {
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) return reject(err)
resolve(stats)
})
})
}
export { build }
@yowainwright
yowainwright / ie-hack.scss
Last active Dec 9, 2017
Useful IE Hack SCSS Mixins
View ie-hack.scss
// 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
yowainwright / stripes-mixin.scss
Created Nov 30, 2017
Useful Stripes SCSS Mixin
View stripes-mixin.scss
@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
yowainwright / progress-bar.scss
Created Nov 30, 2017
Useful Progress Bar SCSS Mixin
View progress-bar.scss
@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
yowainwright / positioning-mixins.scss
Created Nov 30, 2017
Useful SCSS Positioning Mixins
View positioning-mixins.scss
// 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
yowainwright / css-front-end-interview-questions.md
Last active Nov 29, 2017
General CSS Front-end Interview Questions
View css-front-end-interview-questions.md

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
yowainwright / html-frontend-interview-questions.md
Last active Nov 29, 2017
General HTML Front-end Interview Questions
View html-frontend-interview-questions.md

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?

View zshrc.txt
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH
# Path to your oh-my-zsh installation.
export ZSH=/Users/jwainwright/.oh-my-zsh
# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
ZSH_THEME="powerlevel9k/powerlevel9k"
You can’t perform that action at this time.