Meetup Fun and Productivity Tool Roundup

Lightbulb IconThe latest Bay Area Web Freelancers Meetup lived up to its name – “Productivity & Pinot” – with a healthy dose of both. Individuals from a wide variety of backgrounds and professions descended on MIGHTYminnow HQ to share their favorite tools of the trade. Here are some of our favorites:

Vimium

http://vimium.github.io/
This Chrome browser extension allows you to navigate the web mouse-free. Simple keyboard shortcuts are used for a wide array of browsing functionality (string search, quick link navigation, search tabs, etc). Takes some getting used to, but I’ve been at it for less than a week and I think I’m in love.

Emmet Package for Sublime Text

https://github.com/sergeche/emmet-sublime
If you use Sublime Text to code, then this package is a must. Emmet gives you a massive set of abbreviations that auto-magically turn into their fully-formed code/markup/CSS counterparts. HUGE time saver.

Default Folder X

http://www.stclairsoft.com/DefaultFolderX/
Great Mac app that turbo-charges your finder’s open/save functionality. No more navigating down through directory upon directory each time you save – Default Finder X lets you specify default save/open locations, remembers your most recent locations, and generally saves some serious time and clicking.

Google Hangout (Remote Desktop)

http://www.google.com/+/learnmore/hangouts/
We typically use Join Me for screen sharing because of its easy-to-use interface, but if you’re looking for a free alternative, Google Hangout now offers Remote Desktop functionality as well.

Skitch

http://evernote.com/skitch/
Looking for a better alternative to your standard screen capture tool? Skitch is a great app (and it’s free) that let’s you take screen grabs, make edits, add notes, and much more.

PopClip

http://pilotmoon.com/popclip/
PopClip takes selecting, copying, and pasting text to a whole new level. Right click selected text and you’ll get a contextual menu with over 90 actions.

Digital Ocean

https://www.digitalocean.com/
This $5/month, SSD, cloud hosting sounds too good to be true, but our trusted friend Eddie Monge (@eddiemonge) seems to think it rocks.

Google Keep

https://drive.google.com/keep/
Another handy tool for keeping your notes and lists organized. Plus it’s Google, so you know it works!

For Love. Part Two.

This is the continuation of “For Love. Part One.

The Time(s)

First, I’ll tell you that all told, making a new, responsive, beautiful (if we do say so ourselves) website for Rocket Dog took over 200 hours. But I’m getting ahead of myself.

The Design: Adobe Flash & Photoshop

Some time ago, we received a great Flash animation for Rocket Dog that was created by a talented designer and animator named Justin Klein. Kathy Allbright, of Allbright Design, then took that animation and created some sketches of what she thought a new website for Rocket Dog might look like, where she included Justin’s great animation in the masthead. Then time passed. Quite a bit of time, honestly, because 200+ hours (of unbillable time) is difficult to find. Unless you make it a priority. A real, concrete, front-of-the-line priority. Which is what we did, this summer. We made making Rocket Dog Rescue a shiny new website into our top priority.

The Process

Choosing Technology

Platform: WordPress

wordpress logoAt MIGHTYminnow, we like to build websites with WordPress. We do this because our clients find WordPress websites easy to maintain and we find them fun and (relatively speaking) easy to build. For some things we think other CMS’s are appropriate (or even better), but for a nonprofit like Rocket Dog Rescue, WordPress is the perfect solution. Using custom post types and Toolset’s Types and Views Plugin, it is easy(ish) for us to build in a structure that makes it simple for RDR volunteers to add dogs and success stories, place or remove slides on the home page slide show, feature news items and especially promote the dogs they have saved (and are trying to place) and highlight the adoption events they hold every month.

Framework: Genesis (plus Cobalt Genesis Extender)

On top of WordPress, we like to add the Genesis Framework. Genesis is great because it has one, two and three column layouts built in to every theme, the home page is pretty easy to lay out (especially if you add Dynamik or Genesis Extender), and many of the base themes are already responsive.

Base Theme: Genesis, but Mobile First

Mobile First Child Theme for Genesis 2.0All that said, one of our preferences is to have our responsive themes use media queries in a “mobile first” way, and therefore to have phones and tablets only load the styles that are relevant to them, with the style sheet defining the universal rules (that apply to all screen resolutions) first, then working its way up to rules that are specific to larger displays. Simply put: we like our theme to load as quickly and efficiently as possible, especially on mobile devices. Genesis has a base child theme that is great, but we decided to rework it to be mobile first. Enter our new Genesis Mobile First Child Theme. This Genesis child theme is what we used as a basis for the Rocket Dog site, but we also made the reworked version available to our community online.

Wireframing / Designopment*

MIGHTYminnow usually follows an approach to website design and development that we call Discover * Develop * Design * Theme. In most cases we first build a website with a “brown paper wrapper” type look, holding off on colors and other design elements, and instead just focusing on getting all of the blocks in the right spots on the page. That’s step one. We then take this plain Jane website (all blocked out and signed off by the client) and we send it to a designer to create a look and feel using Photoshop. We find that giving the designer an actual website to design from makes their job easier and minimizes the number of revisions we need to make, since the layout and visual hierarchy of the page are already established. Even for responsive sites, we usually just ask our designers to submit a desktop design. We then use this base design to extrapolate mobile elements and modifications during our theming phase, working back-and-forth with the designer as needed to decide how the site will reflow on different devices and at different breakpoints.

homeWe followed this process to some extent with the Rocket Dog redesign, but because we were using pre-exisiting sketches from Allbright Design and because we were doing a lot of “design in browser” or “design in Live View of Dreamweaver” to style elements that were not present in the Photoshop comps, what would normally be an un-styled wireframe started to take on a design pretty early in the process. The one place we really “wireframed” before theming was on the home page, where we used Genesis Extender to lay out all of the boxes and then start feeding in the content so that we could determine how the design sketches should be adapted to the real world needs of the client. A lot of the design elements were created in tandem with the development, using a collaborative approach that allowed us to build the features and determine the design for them as we went.

The idea of designing as you go, especially as it relates to responsive breakpoints and media queries is an idea Ethan Marcotte jokingly called “designopment,” about which he says:

Our goal is to get beyond the pixel limitations of Photoshop, and begin building a design that can flex and grow inside a changing browser window, that can scale to different devices. So the development team quickly begins producing a responsive design: converting the fixed grid into a fluid one, discussing ways to flexibly handle different types of media, and then finally applying the media queries that adapt our design to different resolution ranges.

Ethan Marcotte

This is the approach that we took with the Rocket Dog Rescue redesign, and we think this approach works very well. We hope you agree, and we’d be happy to get feedback on our efforts (on behalf of the dogs). More about our process in part three of this post, coming soon…

« Part One

For Love. Part One.

We are a small company. MIGHTYminnow, small but strong. That’s sort of our unofficial tagline. And at our size, the bottom line is a real consideration. Rent, payroll, expenses… Estimates, calculations, hours, invoices… These mechanisms (which we sometimes find quite tedious, in all honesty) are necessary components of our day-to-day. They are the business counterparts to the creative and technical work we really love to do.

We love making websites. Especially websites that can be easily maintained and that work well on every device and at every size. But making websites takes time and expertise, and for the reasons mentioned above, this usually costs money. Done well, with proper time and care, with tailoring for devices and screen resolutions, it can cost a lot of money.

So here’s the big reveal. And we’re nervous to tell you this, but here goes.

Sometimes money isn’t our motivation. Sometimes we do things for love. (And by “things” I don’t mean sprinkling rose petals on the bedspread, I still mean making websites.) Sometimes we make websites, for love.

Enter Rocket Dog Rescue

rdr-logoMIGHTYminnow and Rocket Dog Rescue have had a long relationship. We haven’t been with them since the start, but we’ve been making them websites since 2007 and in web years (or dog years), that’s a long time. Like MIGHTYminnow, Rocket Dog has an unofficial tagline: for the love of a dog. That’s why they do what they do, and they make nary a dime doing it (in fact, we’re sure it costs them pretty dearly). Out of the depths of their giant hearts, they find the strength to get up every day and rescue – meaning save the lives of – dogs who are destined, by no fault of their own, to be euthanized. That’s huge, generous, and amazing. Rocket Dog saves, one after the other, abused, neglected and abandoned dogs, and to date their courageous and loving volunteers have saved over SIX THOUSAND DOGS. That’s truly inspiring.

It inspires us, and we feel that Rocket Dog deserves all the help it can get. We also believe that the dogs Rocket Dog is working to save *really* deserve all the help they can get. And one of the things that we feel could help Rocket Dog to save more dogs is to have a really great website where people can see the dogs that are up for adoption (or who need a foster home), read their stories, connect with their photos, and see all of the vital information about each dog. And we believe that this website should be beautiful, functional, mobile phone and tablet friendly and overall awesome.

So we made them one…

Part Two »

MIGHTYminnow: Web Studio, School, and now Sewing Lab!

Sarah's SewingWe are lucky to have lots of great space at MIGHTYminnow headquarters and we love letting our coworkers use that space for building their businesses as well as for fun side projects. This weekend, our coworker Sarah of Support Labs turned our classroom into a giant sewing lab for her t-shirt blanket!

tshirt quiltLet us know if you have a project you want to work on but need a larger space to complete it. We love accommodating projects of all sizes from projects like Sarah’s that take a few hours to the folks at Workshop Weekend that use our space for the weekend. We can’t wait to see the completed blanket!

Another Successful Website Weekend!

mugsyLast Weekend, the minnows gathered with 8 eager students to take on the challenging but exciting task of creating websites for each student over the weekend! We feel that it was a great success and we’re excited that this was the third Website Weekend in a row to sell out. With it came some great new projects (case studies coming soon!) and some amazing new relationships. We love this workshop and the opportunity it gives us to empower our students to take control of their web presence and build new businesses online.

raven bike

We also had a very special student this weekend, Mugsy! Not all dogs are a good fit for a workshop like this, but Mugsy is an absolute gentleman and he was a great addition to the class.

I really enjoyed the class–I found it fascinating, and it gave me new insight into why it’s so expensive to build a website! I can’t believe how much I learned. I thought you did a fantastic job teaching the class, and splitting up your time with the different students. Not an easy task… I am really pleased with the site too. I think it looks very professional, which is what I was going for. I will enjoy tinkering with it, adding the photos and more text… Pretty amazing, that I could find you just by a Google search and come away with such a great product. I will be in touch for sure. And, I will highly recommend you to everyone I know!

Lisa L.Website Weekend Student

Bay Area Web Freelancers are SMART!

Last night we hosted the latest Bay Area Web Freelancers’ Meetup, where we shared tools of our trade. Everyone who had something to share just plugged into the projector and showed off the stuff they like. We already have better productivity, less eye strain, safer WordPress sites and an overall better outlook. Below are the tools that were shared, and thanks to Luke McCormick for making the list!

Alfred

http://www.alfredapp.com/ Alfred is a productivity application for Mac OS X, which aims to save you time in searching your local computer and the web.

MacVim

https://code.google.com/p/macvim/ MacVim is the text editor Vim for Mac OS X.

Moom

http://manytricks.com/moom/ Tool to easily arrange windows on Mac using your keyboard

Bug Herd

http://www.bugherd.com/ Allows you to bug track by placing pins on your website where issues exist and assigning those issues to teammates

Trello

https://trello.com/ Collaborative organizing tool. Similar to Asana or Eventbrite?

Push Pin Planner

http://pushpinplanner.com/ For resource planning helpful in managing the time allocation of a team

Blog Vault

http://blogvault.net/ WordPress website backups

Web Flow

https://webflow.com/ New responsive web design tool no one has tried yet. Similar to Adobe Edge Reflow?

Node JS

http://nodejs.org/ For building scalable network applications in JavaScript.

Yeoman

http://yeoman.io/ Comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

Yo

https://github.com/yeoman/yo CLI tool for scaffolding out Yeoman projects.

Grunt

http://gruntjs.com/ An automated JavaScript task runner.

Bower

http://bower.io/ Package manager by Twitter.

Code Kit

https://incident57.com/codekit/ Steroids for (front end) web developers.

Phabricator

http://phabricator.org/ Bug tracker from Facebook. Includes code review, wiki and more.

WorkFlowy

https://workflowy.com/ Way to organize your brain into nested lists.

Sublime Text

http://www.sublimetext.com/ Sublime Text is a sophisticated text editor for code, markup and prose.

Emmet

http://emmet.io/ Sublime plugin to improve html/css workflow.

Sublime SFTP

http://wbond.net/sublime_packages/sftp Adds direct SFTP access to Sublime.

Underscore.js

http://underscorejs.org/ A JavaScript utility library.

Lo-Dash

http://lodash.com/ A low level utility library delivering consistency, customization, performance, and extra features.

D3

http://d3js.org/ A JavaScript library for manipulating documents based on data using HTML, SVG and CSS.

JS Bin

http://jsbin.com/welcome/1/edit JS Bin is a JavaScript, HTML and CSS playground.

JS Fiddle

http://jsfiddle.net/ JavaScript and CSS testing interface.

Bit Bucket

https://bitbucket.org/ Like Github, but private and free, from the Jira people.

Groundwork

http://groundwork.sidereel.com/… Responsive design framework.

Font Awesome

http://fontawesome.github.io/Fo… Font-based icons.

Chrometa

https://app.chrometa.com Automatically track of your time, especially billable time.

Flux

http://justgetflux.com/ Automatically adjust your computer’s brightness and color palette based on time of day to ease eye strain.

One Tab

https://chrome.google.com/websto… Collect Chome tabs into a drop down menu to simplify your interface and save memory.

Org Mode

http://orgmode.org/ An Emacs add-in for keeping outlines of notes.

Linode

https://www.linode.com/ Xen VPS web hosting company.

Digital Ocean

https://www.digitalocean.com/ Scalable SSD cloud virtual servers.

Amazon Web Services

http://aws.amazon.com/ Scalable computing platform (hosting).

WordCamp: San Francisco Edition

Free t-shirt? Yes, please.

Free t-shirt? Yes, please.

This past weekend saw WordCamp SF come to town, and it pretty much rocked my socks off. Though MIGHTYminnow represented last year, it was before my time so this was my first WordCamp. I think I’m totally hooked now. Below are some highlights:

Speakers

The sheer number of hugely talented presenters was astounding: WordPress core developers, prolific theme/plugin authors, and generally a ton of high quality people working on cool stuff. Some of the sessions that stood out include:

  • Confident Commits, Delightful Deploys by Mark Jaquith Tons of useful info regarding version control, code deployment, and loads of helpful tools to check out. Bottom line: do version control!
  • (What’s So Funny ‘Bout) Themes, Love, and Understanding by Ian Stewart A full-on inspiring talk about WordPress, theming, and the amazing potential that is yet to be tapped in this field. Note to self: time to start theming!
  • State of the Word 2013 by Matt Mullenweg And. . . of course. . . the State of the Word. Cool to hear the man who (co-) started it all speak candidly about the strengths, weaknesses, and future of WordPress. End result: WordPress rocks!

Learnings & Doings

It was an information-filled 72 hours, and my brain feels like it just ate way too much knowledge-spaghetti, but here are some of the noteworthy takeaways:

  • Cool tools:
    • Grunt – cool automator, I’m thinking we can use it to quickly set-up plugin and theme files.
    • Jetpack – we’ve used this do-it-all plugin for a while, but it’s time to dig a little deeper into it all of it’s features.
    • WP-CLI – sweet-looking command line tool to expedite all things WP.
  • This crazy retina image technique – TLDR: you can blow images up to 2.2x their display size and export them at low-quality in Photoshop and BAM – you’ve got retinized images. Need to play with this one some more.
  • Got introduced to WordPress Trac and submitted my first patch!
  • query_posts is not so good.
  • The new post revisions interface in WP 3.5 is niiiiiice.

Shout Outs & Thank You’s

Me with Devin Price

Me with Devin Price, the man with the plan

I have to give a huge shout out to two people who made the weekend possible: Devin Price (@devinsays) and Chris Lema (@chrislema). As of one week ago, I had no ticket to this sold out event. I got in touch with Devin (rockstar themer and plugin developer) to see if he knew anything I didn’t. Devin put word out on the twitters, and Chris Lema (author, speaker, and lover of fine cigars) came to the rescue. A sincere “thank you” to both of these gentlemen for an awesome weekend.

MIGHTY Israel Adventure

Mickey here, the latest addition to the MIGHTYminnow team. I’m writing after just having returned from a whirlwind 10-day trip to Israel with a pretty special group of people. We ate. We laughed. We slept far too little. Read on to hear the juicy details…

The Adventure Begins…

mickey at the Tel Aviv port

Yours truly at the Tel Aviv port.

Each of the past four years, I’ve travelled to Israel as part of an organization called Taglit–Birthright, which provides free trips to Israel for Jewish young adults. The first year I went as a participant (amazing), and the last three years I’ve volunteered as staff (doubly amazing)! Hundreds of different groups participate each year, but our particular trip is unique in that it’s specially designed for people with disabilities (an idea I’m in love with, as a wheelchair user myself). This year we planned a fully accessible itinerary (which is saying a lot in Israel, a land of cobblestone, sand, and stairs) featuring a ton of awesome highlights.

Highlights

masada

The cable car up to Masada.

  • Climbing Masada Masada is an epic mountain fortress that is an important historic symbol in Israel. The hike up is normally a grueling 1-hour trek in desert heat, but we got to take the speedy gondola straight to the summit.
  • Swimming in the Dead Sea This is the lowest place on earth, and one of the saltiest bodies of water on the planet – which makes floating a piece of cake. We managed to get everyone in, leaving wheelchairs and walkers on the shore.
  • Touring the Old City of Jerusalem Jerusalem is probably one of the most significant historical/religious sites in the world, and was a fascinating stop for our whole group.
  • Sailing on the Mediterranean There’s this great organization in Israel called Etgarim (translates to “Challenges”) that runs adaptive sports programs for people with disabilities. With their help, we all piled into two sailboats and took a cruise just off the Tel Aviv coast.
  • Syria Overlook We ventured right up to the border, within site of the UN demilitarized zone, for a group discussion about the present-day conflict in Syria. Midway through the discussion, we heard muffled BOOMs in the distance, and looked up to see mini mushroom clouds of dust no more than 15 miles away. Quite different from reading about it in the newspaper.
  • Hummus, hummus, & more hummus I have to admit, one of the things I look forward to each year is getting back to the amazing hummus. It’s creamy. It’s rich. It’s sooooo good.

The Adventure Continues…

sailing

Sailing on the Mediterranean.

I have to admit, it feels great to be home. Coming back to my apartment, my girlfriend, our 17-year-old, 3-legged, deaf cat (this warrants another blog post – coming soon) is just what I needed after one-and-a-half weeks of serious adventure mode. And, I have to say, it feels great to come back to work. No, my boss did not pay me to write that. I love what I do, and I missed it while I was gone. I love creating, building, problem-solving, and I love love love making cool stuff, which is what I get to do on a daily basis! So, until next summer’s trip, you know where you can find me – at my desk, drinking far too much coffee, making awesome websites.   Special thanks to Netanel Yehuda Halevi for the great photos.

Free Ben & Jerry’s for the minnows today!

ice cream truckFirst a little back story before we get to the sweet stuff (pun intended): Our building has recently gotten a brand new security system. One of the features is an intercom system that our security guard uses to update us on the latest basketball scores. The real purpose though is to let the building know whether we should take the fire alarm – which goes off quite frequently around here do to all the construction – seriously or not. Today started off like any normal workday; lots of emails to answer, problems to solve, and code to write. BUT around 1:30, our work was interupted on the intercom system by our security gaurd for what we assumed was an Athletics update. As it turns out, there was a Ben & Jerry’s ice cream truck parked right outside our building giving away free frozen greek yogurt! We, along with the rest of the building, rushed down to test out the flavors.

Our Results:

Haley tried the banana and peanut butter frozen greek yogurt. This was a banana flavored yogurt with peanut butter mixed in. It was quite delicious, but the only complaint was that since the banana flavor and the peanut butter were so sweet, the sour yogurt flavor got in the way. Mickey tried the raspberry and chocolate frozen greek yogurt. This was a raspberry flavored yogurt with chocolate pieces mixed in. Since the raspberry was a bit more tart, it mixed much better with the flavor of the yogurt, and who doesnt like chocolate with fruit?! So, Ben & Jerry, if you wanted some input on your new flavors, there you have it!

Maker Faire: Greatest show & tell on Earth!

mousetrapThis past weekend, a few of us minnows went to our first Maker Faire. The tag line of the faire is “The Greatest Show & Tell on Earth,” which seemed perfect. The event was held at the San Mateo fairgrounds and seemed to have every sort of activity we could possibly have imagined. There were fantastic speakers like Adam Savage from Mythbusters and the Mentos and Diet Coke guys, a life-size Rube Goldberg mouse trap device, model battle ships, and so many workshops that it seems you could have spent an entire week learning, if not more. circuitThe longest line we saw was for the workshop “Learn to Solder.” As a participant, we received a robot pin and some soldering supplies. Soldering the robot (thus completing its circuit) made its little robot eyes light up. Other workshops we thought were cool involved making kimchi, sauerkraut, noodles (we like food), learning to sew, planting, and making speakers. skeletonThe most impressive technology we saw at the faire was the 3-D printer and the Arduino Board (which you can learn all about at Workshop Weekend on June 22nd & 23rd!). Some of the things people created with these tools were simply amazing! For example, there was a 3-D human heart with LED lights that simulated how the blood pumps through the heart’s chambers. And a middle school group made a human-sized game based off the popular iPhone and iPad app, Flow.

robot

Haley wearing her robot pin. Sweet!

The most important thing we got out of this event was the inspiration to create something new, just for the fun of it. The event really rekindled our love of learning. We like making the things we make every day (like websites), but we are also excited to make new things and continue to explore. Next stop, Workshop Weekend!