I had some fun building a crazy diamond responsive grid for a project at work. This article explains how I did it.
";s:7:"website";s:61:"http://viget.com/inspire/who-says-the-web-is-just-for-squares";}i:1;a:6:{s:5:"title";s:27:"Dumbwaiter Chrome Extension";s:4:"slug";s:27:"dumbwaiter-chrome-extension";s:2:"id";s:2:"51";s:10:"typeHandle";s:4:"blog";s:4:"body";s:3079:"I recently got around to trying out Statamic to create a little recipe manager. Yes, I know there are tons of apps out there that do this type of stuff, but I wanted to really be able to control everything.
I also wanted to figure out some way that my wife could bookmark recipes for us, and I didn’t expect her to login to my Statamic install and go through that whole process of adding a new entry. I wanted her to be able to click a button when she was on a site displaying a recipe that she wanted to bookmark, and an entry would then be created. That led me to create my first Chrome Extension, Dumbwaiter.
The basic idea is that you provide a URL that will be opened in a popup window when you click the exntension. Then you provide some JavaScript to do something on the current page you are on, and then some more JavaScript to do something with that data. So in my case, I grab the URL of the page where the recipe is coming from, grab the name of the recipe, and then whatever text is highlighted on the page. So, the process to add a recipe is to highlight the actual recipe, then click the Dumbwaiter icon, and all the data will be pre-populated into my Statamic new entry form.
Here is some example code that I am using, but the options are limitless: whatever you can do with jQuery, you can do with Dumbwaiter.
var title = jQuery('meta[property="og:title"]').attr('content');
var source = window.location.href;
var img = jQuery('meta[property="og:image"]').attr('content');
var content = window.getSelection().toString();
if(!title) {
title = jQuery('title').text();
}
var data = {
title: title,
source: source,
img: img,
content: content
};function makeSlug(str) {
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
var to = "aaaaeeeeiiiioooouuuunc------";
for (var i=0, l=from.length ; i < l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // collapse whitespace and replace by -
.replace(/-+/g, '-'); // collapse dashes
return str;
};
$('#publish-title').val(data.title).focus();
var slug = makeSlug(data.title);
$('#publish-slug').val(slug);
$('input[name="page[yaml][source]"]').val(data.source);
$('textarea.markItUpEditor').val(data.content);You can download Dumbwaiter here, and let me know if you guys find any creative uses!
";s:10:"bodyBlocks";a:0:{}}i:2;a:6:{s:5:"title";s:61:"jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point";s:4:"slug";s:15:"jquery-stick-em";s:2:"id";s:2:"52";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:164:"I created a plugin, jQuery Stick ‘em, to allow items to be “sticky” but only within a container.
";s:7:"website";s:40:"http://viget.com/inspire/jquery-stick-em";}i:3;a:6:{s:5:"title";s:50:"“Advanced” Templating with ExpressionEngine";s:4:"slug";s:41:"advanced-templating-with-expressionengine";s:2:"id";s:2:"54";s:10:"typeHandle";s:4:"blog";s:4:"body";s:443:"I was luckily enough to be asked to speak at the DCEERs Day conference yesterday. I was asked to speak about best templating practices, which ended up being a talk about how I use Stash and how I build custom plugins to streamline templating. It was a great day filled with discussion about ExpressionEngine, and it made me look forward to EECI even more!
";s:10:"bodyBlocks";a:0:{}}i:4;a:6:{s:5:"title";s:51:"Sass & Compass: Never Write Regular CSS Again";s:4:"slug";s:42:"sass-compass-never-write-regular-css-again";s:2:"id";s:2:"56";s:10:"typeHandle";s:4:"blog";s:4:"body";s:640:"I gave a presentation last week at Refresh DC about Sass & Compass. After being introduced to Sass & Compass about six months ago, I can’t imagine writing regular CSS ever again. I was a little hesitant at first, but now I can’t live without it. I posted my slides online, and here is the git repo with all of the code samples.
";s:10:"bodyBlocks";a:0:{}}i:5;a:6:{s:5:"title";s:18:"A Long Time Coming";s:4:"slug";s:18:"a-long-time-coming";s:2:"id";s:2:"57";s:10:"typeHandle";s:4:"blog";s:4:"body";s:1083:"It’s funny how quickly you come to hate your own site. Almost exactly 2 years ago, I launched a redesigned version of my site. After maybe a year, I hated it. But who has time to redo their own site? Apparently it took me 6 months to find the time to finish mine.
Even within those 6 months, I found things that I had started on the site that I hated. My goals were to simplify things a bit, make it responsive, and play around with Sass and Compass. I also wanted to take some of the focus off of my blog, since I really don’t write too much on it anymore (I write almost all of my articles on the Viget Blogs these days).
Since I’m giving 2 presentations in the next few weeks (Refresh DC & DCEERS), I wanted to get my new site up. So I may have rushed a few things, but I’m pretty happy with it. Let me know if you run into any errors.
";s:10:"bodyBlocks";a:0:{}}i:6;a:6:{s:5:"title";s:53:"Building a Nested Responsive Grid with Sass & Compass";s:4:"slug";s:51:"building-a-nested-responsive-grid-with-sass-compass";s:2:"id";s:3:"798";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:405:"Whether you are a hater of the technique or not, Responsive Design is one of the most important things happening on the web right now. I am finally getting a chance to work on a project where we are taking a responsive approach to the site, and it’s been great, but I have definitely come across a few gotchas here and there.
";s:7:"website";s:76:"http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass";}i:7;a:6:{s:5:"title";s:54:"The ExpressionEngine Side of the New Viget.com: Part 2";s:4:"slug";s:53:"the-expressionengine-side-of-the-new-viget-com-part-2";s:2:"id";s:3:"797";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:297:"I’ve already talked about the EE setup for the new viget.com, but now I want to talk about the code. It took a little longer than I wanted to get to it, but let’s finally talk templates and custom addon development.
";s:7:"website";s:55:"http://viget.com/extend/ee-side-of-the-new-viget-part-2";}i:8;a:6:{s:5:"title";s:54:"The ExpressionEngine Side of the New Viget.com: Part 1";s:4:"slug";s:53:"the-expressionengine-side-of-the-new-viget-com-part-1";s:2:"id";s:3:"796";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:612:"Before I started at Viget, I remember thoroughly enjoying the articles by Doug about building Viget.comin EE. That was really some of my first exposure to EE, and from there I’ve come to love it. My hope is that I can recreate some of Doug’s magic and talk through how I built the current iteration of the Viget site in EE. I know, it’s gonna be hard to do. This post is going to be broken into multiple posts, but buckle up, this is gonna be a long one.
";s:7:"website";s:55:"http://viget.com/extend/ee-side-of-the-new-viget-part-1";}i:9;a:6:{s:5:"title";s:49:"Background-clip, Text-shadow, & Gradients; Oh My!";s:4:"slug";s:47:"background-clip-text-shadow-amp-gradients-oh-my";s:2:"id";s:2:"59";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:247:"I have been able to play around with background-clip, text-shadow, and gradients on a few recent projects, and I wrote up some tricks that I have come across.
";s:7:"website";s:67:"http://www.viget.com/inspire/background-clip-text-shadow-gradients/";}}s:5:"total";i:270;}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.46162700 1707493692";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.34758900 1706282441";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.22771600 1711953912";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.87777500 1713035607";}s:8:"reusable";b:0;}}