WWJNTOOHE (What Would Jesus Name This Object Oriented HTML Element)?

I love CSS, and I really love OOCSS. To me being Object Oriented means two things: breaking down patterns, and using a clear easy-to-adopt naming convention.

Patterns: If you’ve used a framework like Inuit CSS you’ll be familiar with some of the abstracted patterns: a grid system, or the spacing on and around various elements. A useful pattern need only do one thing very well to be helpful.

Naming conventions can be benefitted by a system like BEM, but ideal names can be instantly understood. Think about “accordion”, “radio button”, “carousels”, “tabs” – these are all digital elements we understand, they get names from real world application. BEM takes it a step further and uses underscore and hyphens to establish an easily understood relationship on variations and child elements (ok, technically the naming convention doesn’t make a CSS methodology object oriented, but I would argue that some naming conventions are object disoriented!).

So the big question: If he were a front-end developer, would Jesus do OOCSS?! To find out we need to dig into the documentation a bit. Yes, I’m employing WWJD into coding methodology.

Think about the parables! They’re really the “front-end” of a much deeper message Jesus is conveying. Just like in websites, the front-end of a parable is usually to make the message easier to consume. I believe there are some OO principles at play in these. Let’s look at “the most important parable” (Mark 4:13): sometimes called the parable of the sower, or the parable of the soils. It’s in 3 places; let’s look at one.

“A farmer went out to sow his seed. As he was scattering the seed, some fell along the path, and the birds came and ate it up. Some fell on rocky places, where it did not have much soil. It sprang up quickly, because the soil was shallow. But when the sun came up, the plants were scorched, and they withered because they had no root. Other seed fell among thorns, which grew up and choked the plants. Still other seed fell on good soil, where it produced a crop—a hundred, sixty or thirty times what was sown. Whoever has ears, let them hear.”

Jesus relates to us first with a common object: “Soil”. When Jesus talks about the soil I can instantly relate. Let’s bridge this parable into CSS, and make this a class:

.soil {...}

And we can go a bit farther:

.soil > .soil__seed {...}

Jesus gets more specific though! Now let’s use BEM and make variations on our object.

.soil--hard, .soil--rocky, .soil--thorny, .soil--good

Jesus uses parables to make valuable lessons easier to process, understand, and remember for people. This is the key to a great naming convention too. I like class names like “.soft” better than less clear prefixes like “.pd” as they’re just so relatable, memorable and easy to remember, and rediscover.

I think Jesus would use OOCSS; parables break down patterns into simple object we can understand and relate to, and often the object will have variations and children that lend themselves nicely to naming methodologies like BEM.

Literary Goldfish

In 2006 there was an era when spam seemed to have been written by infinite monkeys with infinite typewriters. It caught my attention since there was apparently nothing I could do – no call to action that would actually make money for the sender! The text was fascinating. I saved some!

Here’s some vintage spam, circa 2006.

Continue reading

Persuade

Aside

My colleague here says that I have a way of trying to persuading people that is unique.

He says I’ll give a short synopsis of my point, then go into a narrative where I’m explaining a hypothetical situation and how my thesis supports it. This will often make people see my thesis from either my actual point of view, or the hypothetical person involved.

That whole sentence I just said is an actual example (which I didn’t realize until I was almost done writing it).

B+

There are two sides of me that work on making websites: The perfectionist that wants every single detail polished before another human sees it, and the speeder who wants pixels public as soon as humanly possible, even at the expense of quality and refinement.

Now that I’m working in a product-based shop, I’m trying to strike a balance. I’m aiming for a solid B+. Moderation is hard, but B+ is a pretty great score; and all of the sites we launch can be refined easily.

How do you “release early, release often” without turning out garbage, or waiting too long?

Romania.

In a few days I’m going to Romania as a part of a short mission trip with a team from my church (Harvest Bible Chapel Oakville). We’re doing a one week Youth Camp. It’s going to be a lot of fun.

World travel (heck, travelling 45 minutes to Toronto) is not my kind of thing; so it’s been challenging and interesting to be faced with this! I’m excited to do my part (I’m doing photography / AV stuff / showing animated gifs which is all right up my alley), and to get to share about Jesus.

It’s truly a privilege to have the chance to do what Jesus commands in the Great Commission:

Matthew 28:16-20English Standard Version (ESV)

The Great Commission

Now the eleven disciples went to Galilee, to the mountain to which Jesus had directed them. And when they saw him they worshiped him, but some doubted. And Jesus came and said to them, “All authority in heaven and on earth has been given to me. Go therefore and make disciples of all nations, baptizing them in[a] the name of the Father and of the Son and of the Holy Spirit, teaching them to observe all that I have commanded you. And behold, I am with you always, to the end of the age.”

ASCII Art in Sublime

Link

Yesterday  tweeted a link to a handy way to get around stylesheets. I was stunned to see it was a post I wrote last year. I actually had no idea that this had caught on or made so much noise on Twitter, so that was cool.

To be fair, a search on Twitter showed me that way more people had this idea before me, but I guess just I was the first to get retweeted by someone with as many followers as Chris Coyier.

http://sublimetexttips.com/this-one-weird-trick-will-make-your-stylesheets-easy-to-navigate/

Designer vs. Terminal

It was 2010. It was the first time I would square off against the dreaded terminal. I was a web designer at an agency, and I had just read an article in .net Magazine about Sass. “I’d like to give that a shot!” The “getting started” bit began with Terminal. Predictably it didn’t go well, or make any sense to me. My anti-terminal stance began, and held me back professionally for a couple years.

Fast forward a few years and we’re in an era where Terminal is not an option. Thankfully there are some things you can do to make this tool more designer friendly. Continue reading

Adding a Time Stamp to preprocessed stylesheets

A couple weeks ago I started hunting the Internet for a way to add a timestamp to my Sass compiled CSS. I’m currently collaborating with a lot of other front end devs on a very large project. The bottleneck happens in the CMS – there’s no way to run a local copy; so we often have to push out our CSS into the actual CMS dev site. Collisions are too easy, and it’s valuable to know how fresh the styles are, and who did them.

My Googling failed, but my colleague and desk-neighbour Tim Ziegel came to the rescue! Here’s his email:  Continue reading