Skip to content

Instantly share code, notes, and snippets.

View raybrownco's full-sized avatar
🌝
embrace the mystery

Ray Brown raybrownco

🌝
embrace the mystery
36 followers · 0 following
View GitHub Profile
@raybrownco
raybrownco / improved-keyframe-code.sass
Created March 20, 2012 18:45
I just stumbled across theCSSguru's animate mixin for Sass (http://thecssguru.freeiz.com/animate/) and found it very useful for including animations in my Sass files. However, I saw room for improvement in the keyframe code. Below is a comparison of the s
// Using a list to loop through each prefix and cut down on duplicated code
$keyframe-prefixes: (-webkit-keyframes, -moz-keyframes, -ms-keyframes, keyframes)
@each $prefix in $keyframe-prefixes
@#{$prefix} fadeIn
0%
opacity: 0
100%
opacity: 1
@raybrownco
raybrownco / wp-pods-vs-ee.php
Created March 13, 2011 16:57
This file is a comparison between WordPress/Pods and ExpressionEngine. It shows the syntax required to display a list of three featured books on a site's homepage.
<!-- Featuring three books on a site's homepage -->
<!-- The Pods/WordPress way -->
<ul id="featured-books">
<?php
$book = new Pod('book');
$params = array(
'where'=>'t.show_on_homepage = 1',
@raybrownco
raybrownco / keybase.md
Last active June 7, 2021 14:02

Keybase proof

I hereby claim:

  • I am raybrownco on github.
  • I am raybrown (https://keybase.io/raybrown) on keybase.
  • I have a public key ASAjWu4kOFGRkQbkHct7Wr1Ur93e2rqxuvvEgirU1T-GNAo

To claim this, I am signing this object:

@raybrownco
raybrownco / image_helpers.rb
Last active July 10, 2021 13:37
Inline SVG in Middleman
# Middleman - Inline SVG Helper
# ------------------------------------------------------------------------------
#
# Installation
# ------------
# 1. Save this file at `[project_root]/helpers/image_helpers.rb`
# 2. Open the project's Gemfile and add this line: `gem "oga"`
# 3. Run `bundle install` from the command line
#
# Note: Restart your local Middleman server (if it's running) before continuing
@raybrownco
raybrownco / rem.scss
Created August 9, 2011 16:48
rem() is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
/*
* 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
* It returns two lines of code — one of the regular pixel values (for IE), and another with the
* converted rem values (for everyone else). Special thanks to Chris Epstein (http://chriseppstein.github.com)
* and Martin Bavio (http://martinbavio.com) for the help and code!
*
* Sample input:
* .element {
* @include rem('padding',10px 0 2px 5px);
* }
@raybrownco
raybrownco / resume.json
Last active November 6, 2023 17:29
resume.json
{
"$schema": "https://raw.githubusercontent.com/jsonresume/resume-schema/v1.0.0/schema.json",
"basics": {
"name": "Ray Brown",
"label": "Senior Frontend Software Engineer @ Bridge | Front-end Development, UX Design",
"image": "",
"email": "aniseed.sobs_0d@icloud.com",
"phone": "+1 616 647 7602",
"url": "https://raybrown.co",
"summary": "With over 16 years of experience in web development, I have honed my skills in creating engaging, accessible, and performant websites and applications. I am currently a Senior Frontend Software Engineer at Bridge, a leading corporate LMS and employee development platform used by organizations all over the world.\n\nAt Bridge, I work with a talented and diverse team of developers, designers, and product managers to deliver user-centric tools that enhance the e-learning and career path experience. I specialize in front-end development with a focus on design systems, responsive design, and performance optimization. I also have a strong background i