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
View scss-text-underline-mixin-for-beautiful-underlined-text.md

This Gist contains a SCSS Mixin for Optimal Text Underlining

This SCSS Mixin changes the text underline color or its location relative to the text it underlines.

A Pen by Jeff Wainwright on CodePen.

License.

View .ruby_setup
# Quik Setup For Ruby
# ===================
# This gist provides a quick ruby env setup for mac
# This gist is deeply inspired by:
# https://gist.github.com/MicahElliott/2407918
# installs homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
@yowainwright
yowainwright / Preferences.sublime-settings
Last active Jun 19, 2017
Quick Settings for Sublime 3 Setup
View Preferences.sublime-settings
// Settings in here override those in "Default/Preferences.sublime-settings",
// and are overridden in turn by syntax-specific settings.
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"ensure_newline_at_eof_on_save": true,
"folder_exclude_patterns":
[
".git",
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"
@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?

@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 / 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 / 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 / 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;
}
You can’t perform that action at this time.