Skip to content

Instantly share code, notes, and snippets.

@pibby
pibby / JS: Smooth Scroll Hashed Links
Last active December 23, 2015 13:19
JS: Smooth scroll from links with hashed href with fixed header
@pibby
pibby / JS: Highlight current menu item on fixed nav as user scrolls
Last active May 29, 2018 15:05
JS: Highlight current menu item on fixed nav as user scrolls
// Highlight current page menu item as user scrolls
var lastId,
pageMenu = $(".nav"),
pageMenuHeight = pageMenu.outerHeight() + 126,
// All list items
menuItems = pageMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
@pibby
pibby / JS: Convert navigation to select dropdown on mobile
Created September 20, 2013 18:37
JS: Convert navigation to select dropdown on mobile
// Convert page navigation to dropdown menu on smaller screens
$(function() {
$("<select />").appendTo("#navigation .wrapper");
$("<option />",
{
"selected": "selected",
"value" : "",
"text" : "Page Menu" // default <option> to display in dropdown
@pibby
pibby / jekyll-bash-new-post
Last active May 16, 2021 23:16
This bash script will setup a new Jekyll blog post in Markdown and open it for editing in Sublime Text 2
#!/bin/bash
# Katie Harron - @pibby
# This bash script will setup a new Jekyll blog post in Markdown and open it for editing in Sublime Text 2
echo "Post Title: "
read title
echo "Post Description: "
read desc
echo "Post Tags: "
read tags
@pibby
pibby / Preferences.sublime-settings
Created October 11, 2013 23:50
My Sublime Text User Preferences
{
"auto_complete": true,
"auto_complete_commit_on_tab": true,
"auto_indent": true,
"auto_match_enabled": true,
"bold_folder_labels": true,
"caret_style": "smooth",
"color_scheme": "Packages/User/Flatland Dark.tmTheme",
"detect_indentation": true,
"draw_minimap_border": true,
@pibby
pibby / new-project.sh
Created December 5, 2013 00:08
This bash script will ask for a Project Name and Directory name to create in Sites folder, clone my boilerplate repo, create a README with the project name and date this script was run, and open the directory in Sublime Text 2 (save as a project once opened)
#!/bin/bash
# Katie Harron - @pibby
# This bash script will ask for a Project Name and Directory name to create in Sites folder, clone my boilerplate repo, create a README with the project name and date this script was run, and open the directory in Sublime Text 2 (save as a project once opened)
echo "Project name: "
read name
echo "Project directory in ~/Sites: "
read directory
created=`date +%Y-%m-%d` # create date as Year-Month-Date
@pibby
pibby / rem-mixins-margin-padding.less
Last active January 1, 2016 00:19
LESS CSS mixins for margin and padding in rem units with pixel fallback
// This assumes that the font-size on your <html> is 100% (1rem = 16px)
@font-size: 16;
// Margin mixin - enter pixel values in order: margin-top, margin-right, margin-bottom, margin-left
// Usage: .mar(10, 30, 15, 20);
.mar(@mt: 0; @mr: 0; @mb: 0; @ml: 0;) {
@mtv: @mt / @font-size;
@mrv: @mr / @font-size;
@mbv: @mb / @font-size;
@mlv: @ml / @font-size;
@pibby
pibby / dotfiles.sh
Created February 18, 2014 01:55
Dotfiles backup on Linux
#!/bin/sh
## Backup dotfiles and commit to git
## by Katie Harron - @pibby
date=`date "+%Y-%m-%d %H:%M:%S"`
dest=~/dotfiles
cd ~
cp -r .fluxbox/ $dest/fluxbox/
cp -r .irssi/ $dest/irssi/
@pibby
pibby / screencap-responsive-firefox
Last active August 29, 2015 13:57
Using watir-webdriver, take screenshots in Firefox of a responsive website entered by the user at different breakpoints
#!/usr/bin/ruby
# Katie Harron - @pibby
# Use Firefox to take screen captures of a responsive website at multiple breakpoints, ask the user to input the URL
require 'watir-webdriver'
puts "Enter URL to capture: "
site = gets.chomp()
mq = [320,480,640,768,1024,1280,1440]
@pibby
pibby / screencap-responsive-local-safari
Last active August 29, 2015 13:57
Using selenium, take screenshots in Safari of a responsive website running on a local python simple server at different breakpoints
#!/usr/bin/ruby
# Katie Harron - @pibby
require 'selenium-webdriver'
mq = [320,480,640,768,1024,1280,1440]
driver = Selenium::WebDriver.for :safari
driver.get 'http://localhost:8000'