In need of more hands

Part-time WordPress Contractor / Junior Developer

MIGHTYminnow Web Studio & School is looking for a part-time to full-time contract Junior WordPress Developer! If you are a motivated, reliable developer with a passion for CSS and WordPress, read on. . .

The Work – what you’ll be doing:

  • Lots of WordPress theming (using comps to write CSS, sometimes winging the design with your awesome design-eye)
  • Some basic WordPress site assembly / coding
  • Working tightly with the close-knit MIGHTYminnow team

The Position – what and how:

  • Hours: as needed – full time to part time
  • Hourly pay (based on skill, experience, etc)
  • Flexible on days/times/scheduling, great for folks who need a *flexible* schedule. Parents, part time freelancers, etc.

Us – all about MIGHTYminnow:

  • Builders of awesome WordPress websites
  • “Do Good” company – emphasis on non-profits, social enterprises, local companies, entrepreneurism, empowering business owners through our Website Weekend
  • Looking for folks who strike us as minnows. Small but strong. Shiny. Bright!

You – the skills/traits we’re looking for:

  • Excellent fluency with CSS, including CSS3 and the latest trends/techniques – this is definitely the #1 thing we’re looking for
  • Proficiency with WordPress (the more experience, the better)
  • Eager/quick learner – bonus points to those who can, and will, learn quickly (our Senior Developers will support you on this, just as we were/are supported!)
  • Bay Area local – we need someone who can make it into our downtown Oakland office pretty consistently
  • Reliable – someone who would help us win a tug-o-war (we’re really trying not to use cliches and say “team player”, but someone who isn’t afraid of HARD WORK and who is helpful)
  • Good communicator – desire to help train students in our Website Weekend program is a plus
  • PHP is a plus, jQuery is a plus

Next Steps – moving forward:

Excited? Want to know more? Think we might be like to learn more about you?
If so, please:

  • Contact Senior Developer, Mickey Kay, at mickey@mightyminnow.com
  • Tell us a bit more about yourself and why you’re interested in working with us
  • Share some links to your work/portfolio – if it’s not totally obvious, please tell us what exactly your role was in the work
  • Anything else we should know? Now’s your time to share / shine!
  • Contact details – what’s the best way we can get a hold of you?
  • Availability and Expectations: Keeping in mind that we are a small, grassroots agency, tell us a bit about what you would expect to give and what you would expect to get in return?

The Great Escape of Houdini (the dog)

Minnows and dogs just go together.

Last week, we got an email from the fabulous (and minnow-y) designer who helped us with the Rocket Dog Rescue redesign, and lots of other projects. It read like this:

I am hoping you can help me. I know you have connections at Rocket Dog and I hoped you may be able to ask them on my behalf for help.

2 months ago someone dumped a small dog into our neighborhood. I saw him when I pulled up to my house and immediately could tell he was lost. No collar, his tail between his legs, he was terrified. I tired to get him, but he was too fast. I roamed the street for an hour and finally went home. There he was sitting on my porch as my wife came home. He ran off, of course, and I have been chasing him since. I put out flyers and received dozens of calls. I figured out his roaming schedule and decided to set a trap. I drove back and forth all day hoping I’d catch him, but nothing. He figured out how to get the food without triggering the trap. He knew when I would come and go. Needless to say, he was getting fat and I was getting tired. I told myself I would have to stop pursuing him by Friday and said a long prayer. As part of my last ditch I bought a better trap, went to KFC for chicken nuggets and set the trap one final time. Sure enough, I caught him! He’s now at the Berkeley shelter and being evaluated. We named him “Houdini”.

Now I’ve been talking with a dozen rescue groups to try and find him a foster home and NOBODY will take him because they are all full! I’ve offer medical help. I’ve offered to hire a trainer. NOTHING. He is fading FAST there. They said his chances of getting adopted are slim to NONE. He’s changes of euthanasia are HIGH. He needs to be socialized and to feel safe. He likes other dogs. Being under pressure and stress at the shelter he is now growling and unapproachable. He just sits in the corner. They haven’t even bathed the poor guy after a week of being there.

Do you think Rocket Dog can pull him, foster him and rehabilitate him? They are my last chance.

Needless to say, a few emails, a few texts, and a bit of logistical rigamarole later, Houdini is in the safe arms or Rocket Dog Rescue, where he will be evaluated, nurtured, and cared for until he can find his forever home.

It feels great to have our networks come together in this way. We have been pretty immersed in Rocket Dog Rescue for the last few years, and because they do the amazing and admirable work they do, we have invested in their success. But their work hadn’t yet touched our lives this personally. In this unique moment, when Kathy, a lover and protector of dogs (and a minnow), came upon a dog in need, Rocket Dog Rescue swung into action to do what we know they always do, what we’ve been helping them to do, and it felt magical.

Kudos to Kathy, who couldn’t leave a helpless dog out there alone in the world, no matter how inconvenient it was for her. And kudos to Pali (“the dog whisperer”, according to Kathy) for giving her life over to the welfare of dogs in need, and for inspiring so many other people to do the same.

We have long since been proud to be the pro-bono web team of Rocket Dog Rescue, and to help facilitate the wonderful work they do. But we are all the more pleased, proud and grateful now that their work has touched our lives so personally.

PART_1401421498960_PART_1401406148980_IMG_19671

Pali & Houdini

PART_1401421423555_PART_1401406471464_IMG_13741

Houdini getting a well-deserved rest

PART_1401421464724_PART_1401406423842_IMG_42201

Kathy and Houdini, reunited at the shelter.

UPDATE June 1, 2014: A few short days after Rocket Dog Rescue accepted Houdini, he was adopted at a weekend adoption event. Renamed “Virgil”, he has already found his forever home.

Houdini / Virgil and his new girl!

Houdini / Virgil and his new girl!

Rocket Dog Rescue Redesign highlighted on Dreamweaver Blog

The work we did creating a new website for Rocket Dog Rescue was recently featured on Adobe’s Dreamweaver Blog. Read about how we used Adobe technology to make adopting or fostering a dog in need easier than ever.

http://blogs.adobe.com/dreamweaver/2013/12/responsive-web-design-with-heart.html?scid=social15678394

Mixer Madness!

MIGHTYminnow hosted the Oakland Chamber of CommerceAfter 5 Mixer” last night. It was great fun connecting with other local business people, enjoying delicious Urban Legend Cellars wine (our favorite!), and generally learning about what’s going on in Oakland.

Thanks to everyone who attended, to the Vegetarian Gourmet for the yummy food, to Urban Legend Cellars for the wine and to the Chamber for putting it together!

BXYeno8CcAM9O2x

20131024_194204

20131024_185453

photo 2

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 »

Contortionist on BART

Unrelated to work or web, we saw (and captured video of) these amazing performers on BART last night. While not everyone seems to enjoy having the BART car they are riding in transformed into a performance art space, we have to admit, we do. Especially when the performance is this impressive.

The SFWeekly’s Snitch (Erin Sherbert) even picked it up!
http://blogs.sfweekly.com/thesnitch/2013/08/bart_contortionists_use_michae.php

If anyone know who these fellas are, let us know so that we can give them credit. And yes, of course, we tipped them.

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).

Hacking the Hood

Hack the Hood and Panelists

Hack the Hood participants and panelists

Oakland gets its fair share of negative press, especially when it comes to the political demonstrations we have hosted surrounding Occupy Oakland, the shooting of Oscar Grant and the more recent murder of Trayvon Martin. But anarchists smashing widows is, contrary to the media coverage, only a tiny part of what happens here. What these news stories miss and what is often overshadowed is the immense sense of community Oaklanders feel and how many great organizations have boots on the ground here, working to help Oakland reach it’s full potential.

Panelists speaking to Hack the Hood participants

Panelists speaking to Hack the Hood participants

Hack the Hood is one such program. They pair local youth webmasters-in-training with local small business “clients,” and train the youths to create websites for the businesses. These neighborhood businesses are un- or under-represented online and the youths help each business get on the map (like, specifically, Google Maps), and create for them a high quality web presence. The training is run out of an amazing nonprofit called United Roots and the trainers use a very concrete and skills focused approach that helps young people gain real world skills – both digital and interpersonal.

Particpant asking the panel a question

Particpant asking the panel members a question

Last week we had the pleasure of visiting United Roots to talk about MIGHTYminnow and our work, in a panel about “real world practitioners.” The students had a lot of smart and thought-provoking questions. This was our favorite: “How does your work facilitate change?” (which is a topic for another blog post, another day).

We hope to have additional opportunities to work with these talented young people to share our skills and knowledge in the future, and so far, we are very impressed!

*All photos by Sophia Hussain, Hack the Hood’s documentarian

Styling TinyMCE content in WordPress

I, for one, was tired of my left aligned images creating a staircase in TinyMCE when my theme CSS is set for them to nicely clear. Here is what it looks like in WordPress TinyMCE:

2013-06-28_10-12-37

When this is what it looks like on the page:

2013-06-28_10-16-01

In TinyMCE it can often be challenging to tell what the true layout of the page will look like when your front-end CSS is applied, but it turns out that it’s easy to change the TinyMCE styles as well. All you need to do is drop this code into your theme’s functions.php:

And then create a corresponding CSS file called custom-editor-styles.css in your theme folder.

Write the CSS to clear your <h2>’s, make any other style changes you want to show up in TinyMCE, and voilà! You’ve got a page that makes visual sense.

Clearing Headings

There is a lot more you can do with this, like incorporating more of your actual theme CSS, but the main point is just to make your TinyMCE (back-end) and theme (front-end) CSS more consistent. We don’t need it to look exactly like the site, just enough to understand how the final page is going to lay out.

If you’d like to learn more, you can always check out the add_editor_style() post in the WordPress Codex.