Ski bum sabbatical

Posted: December 7, 2016, filed under: Updates


I currently write from my new home at Goldminer’s Daughter Lodge in Alta, UT. I’ve made quite the transition from life in New York City. After a few months back at home in Pittsburgh, I have migrated to Utah for a ski bum sabbatical at Alta, a ski resort outside of Salt Lake City. I’ll be working as a bartender at Goldminer’s and fulfilling my bucket list item of skiing 100+ days in a season (today will be number 1!).

I had planned to write a long, heartfelt post about burnout and working too hard and how I’m totally over New York, but instead I will simply bid my web presence adieu for the time being and head for the slopes. Actually, it is currently 2°F, so I will take my time getting out there…

Oh yeah, during this time all Tackle Box classes are $10 each! So, for the cost of a decent sandwich you can learn web development. Check them out here.

How to render a code block of Haml in Haml

Posted: April 28, 2016, filed under: Tutorials+Tips

I’m currently working on a style guide for a Rails app (fun!). The documentation is built as a baby Rails app of it’s own, thus in Haml, an HTML pre-processor (think Sass, but for HTML). Like any style guide worth it’s salt, I wanted to have a block of the markup for each element alongside a representation of the element itself (example). That way, a person could grab that block of code to use that element.

The problem of syntax highlighting is easily solved with the amazing Prism JS library, but it took me forever to figure out how to not render the Haml inside the Haml <pre> and <code> tags. The answer is a filter called :preserve. Other than this blog post by the wise Chris Eppstein, I have found 90% of Haml documentation incredibly cryptic, at least by my standards which, granted, as a front-end and WordPress developer may be quite high.

That being said…

In the hopes of saving someone somewhere a bit of time and headache, here, officially, is how to render a code block of Haml in Haml:

 

See the Pen A Code Block of Haml in Haml by Lara Schenck (@laras126) on CodePen.

Why don’t code schools teach WordPress?

Posted: April 7, 2016, filed under: Thoughts

In the coding classes I’ve taught (which, for the record, have been part-time, not bootcamps) students’ intentions are often to make their own websites, work on existing ones, or to incorporate web development into a freelance practice. Regarding bootcamps, I’ve met several graduates who began their careers with freelancing, where a lack of WordPress competence quickly becomes an issue.

Freelance WordPress projects are a fantastic way for novice developers to gain the problem-solving skills and portfolio they need to transition into a full-time tech job, yet ‐ to my knowledge ‐ proper attention to WordPress is rarely allocated more than a day in coding courses, if that.

There’s no doubt that knowledge of JavaScript, frameworks, and the like is valuable in a product-focused tech industry, and that WordPress is not a particularly “cool” technology. But WordPress also powers at least 25% of the web, and it is undeniably a skill set in high demand with a relatively low barrier to entry.

Am I missing something? Why don’t more code schools take this into account?

Year in Review

Posted: January 25, 2016, filed under: Thoughts

I genuinely enjoy reading other people's updates, and it was depressing when my 2015 Facebook "Year in Review" was, like, three posts, two of them Instagram repeats. What happened to original content and life updates? This isn't Facebook, but there is no better place for life updates than your very own blog. Plus it's healthy to intersperse the tech-y posts with personal ones.

Read More →

The Twig for Timber Cheatsheet

Posted: October 16, 2015, filed under: Tutorials+Tips, WordPress

Timber is a library for WordPress that allows you to work with object oriented templates using the Twig templating engine. I've written about it before, and have used it on just about every project I've done in the last year and a half. I'm even teaching a class on it!

Anyhow, although Timber ultimately simplifies templating in WordPress, there's a bit of a barrier to entry. If you haven't worked in a templating language before, it takes some time to get a handle on what's possible. The following are some introductory Twig concepts and snippets I've found particularly useful when working with Timber and Advanced Custom Fields.

Conditionals

Let's say you have an ACF option for the display of the header that is either an image or text. You could check like this:


<header class="single-header">
    {% if post.header_display == 'Image' %}
        {# Markup for header image #}
    {% else %}
        {# Markup for plain text header #}
    {% endif %}
</header>

Shorthand Conditional

That's all well and good, but what if you want to put a class on the <header> tag that indicated the display choice? It's pretty gross looking to do it this way:


<header class="single-header {% if post.header_display == 'Image' %}header-image{% else %}header-text{% endif %}">

Luckily, we can use shorthand conditionals!


<header class="single-header {{ post.header_display == 'Image' ? 'header-image' : 'header-text' }}">

Read More →

@include upperspace;

Posted: August 27, 2015, filed under: Tutorials+Tips

I’ve made a few websites over the past year or so, and I finally feel like I’ve nailed down the process. Of course there’s a lot more to it, but potentially the most useful, simple, and adorably named part has been a typography mixin I call upperspace:

@mixin upperspace {
    letter-spacing: 1px;
    text-transform: uppercase;
}

I’ve been jamming on a class called .meta lately as well, and they work together nicely:

$size-base: 1.1rem;
$size-sml: $size-base*0.8;

$color-text-meta: #999;

.meta {
    color: $color-text-meta;
    font-size: $size-sml;  
}

.meta--upper {
    @extends meta;
    @include upperspace;
}

I’ve been a little anti-extends lately, but after reading Una Kravet’s post on Atomic OOBEMITSCSS (nice), I’ve opened up to them again.

Anyhow, just a simple Sassy snippet for your viewing pleasure.

Pricing and Economic Relativity

Posted: July 9, 2015, filed under: Ideas, Research

I'm usually not one for non-fiction, but the times have changed. I'm currently reading Predictably Irrational: The Hidden Forces that Shape Our Decisions by a cool dude named Dan Ariely. In short, we humans are constantly influenced by "hidden forces" that cause us to make decisions that don't always make logical sense. Can't say I'm surprised.

I'm only about a third of the way into the book but the content is super applicable, particularly if you deal at all with pricing. I'm so excited about it, in fact, that I've regressed to college student mode and wrote a nice, summary/commentary of a few points for your reading pleasure. First up:

The Decoy Effect

I like this one. Here's a chart:

decoy

Credit to the book for this, and to me for recreating it.

Imagine you are choosing to go on a romantic vacation to either Paris or Rome (something I am not doing, unfortunately). They are both very romantic locations with delicious food and drink, and it would be hard to choose between the two. Say you have three options for hotels:

  1. Rome, breakfast included (A)
  2. Rome, no breakfast (A-)
  3. Paris, breakfast included (B)

There should still be no difference between Paris and Rome but because of how we respond to relativity, the Rome without the breakfast package makes the Rome with a breakfast package more attractive, and Paris is cast aside. This is completely irrational; the decision between Rome and Paris should still be as challenging.

The lesser Rome is the "decoy", or the A- option, and exists to make A look better. But then there's B (Paris) or the "comparison" option. It may be of the same quality as A, but has slightly different characteristics. The relativity of A to A- makes A the most attractive option. If B had a decoy, or a B-, a similar effect would take place.

Read More →

It’s identity crisis, not impostor syndrome

Posted: July 1, 2015, filed under: Thoughts

Let’s be done with impostor syndrome.

I think we've gotten to a point where non-impostors, myself included, are using impostor syndrome as a way to describe ever-human insecurity. It's not productive anymore, and belittles the experience of those who really are dealing with it.

If I was a fake, I wouldn't be able to make websites. But I do make websites, and I'm paid to make them and teach people to make them. That's not to say I don't feel like a fake every five minutes, but a lot of cooler and smarter people than me have admitted to feeling the same.

I think there's another word for what we web people are calling impostor syndrome: identity crisis.

The web is in its awkward twenties.

And so are many, many of the people working on it. Fortunately or unfortunately, with your twenties comes the inevitable, quarter-life identity crisis. I'm living it, and it's not that fun.

Read More →

WP Super Cache and Browser Caching

Posted: June 21, 2015, filed under: Tutorials+Tips, WordPress

I've been jamming on WP Super Cache these days. As great as Super Cache is (and it is great), however, you will consistently be failing in YSlow's "Expires Headers", Web Page Test's "Cache Static Content", and Google Page Speed Insights' "Leverage Browser Caching". Shouldn't a plugin with name "Super Cache" take care of all things caching? Not necessarily.

cachingF

"Supercaching" vs. Browser Caching

Super Cache stores copies of your posts and pages in static HTML in wp-content/cache/. These are then loaded instead of querying the database and processing a PHP file every time. So, when you update a post and don't see the changes reflected immediately, that's because the cached, static HTML file hasn't been updated. You then delete the cache to make sure the new content is reflected when its rebuilt. That's "Supercaching".

There's another thing called browser caching that's also pretty cool but not accounted for in WP Super Cache. Browser caching means saying, "Hey, browser, remember what this file is until I tell you to forget it". For example, when you cache your stylesheet, the browser won't need to load it again when you go to another page that uses the same stylesheet because it remembers it from last time.

This is where CDNs (Content Delivery Networks) can be awesome, too - if many sites use and cache jQuery from a CDN (which they do), linking your site to jQuery on that CDN means the browser likely will already have it memorized i.e. cached.

Read More →

Sassy WordPress and some updates

Posted: May 31, 2015, filed under: Updates, WordPress

I gave a talk at WordCamp Montreal last fall called "Sassy WordPress":

I'd explain a few things differently now (which I will be June 16th at the NYC WordPress Meetup, actually). Everything goes from "do this" to "don't do this" pretty quickly, and you learn a lot in six months. Anyhow, here are some updates and an opinionated take on the word "module".

Read More →

Let’s try “Full-Stack Designer” instead of unicorn

Posted: May 18, 2015, filed under: Thoughts

At An Event Apart last week, one speaker asked, “How many of you refer to yourselves as designers? … Developers? … Or maybe you design and develop…so…unicorn?”. The latter had the most hands, along with a few modest chuckles.

Let’s take a step back here. Because there is no better way to describe our set of skills, we have a roomful of people (myself included) identifying with a mythical beast that does not exist.

In early 2012, Sacha Greif wrote about unicorns. He described them as:

… a designer who can come up with your identity, design your site, create UIs with great user experience for your web and mobile apps, and on top of that code his or her work in HTML/CSS (and why not throw JavaScript in the mix!).

This skill set is not so uncommon anymore. Sure, in all likelihood these individuals are happily employed or working for themselves, but they certainly exist, and the “unicorn” metaphor no longer applies (and arguably didn't before, I think bluefin tuna is more accurate).

Read More →

I wrote a post for CSS-Tricks and people read it

Posted: May 13, 2015, filed under: Thoughts

This week, I had a guest post published on CSS-Tricks. You should read it.

It kinda blew up. Well, definitely blew up. What started as legitimate comment thread on the post turned quite sour when the article was shared on r/programming:

Screen Shot 2015-05-13 at 3.18.16 PM

Yes, that would be me. I failed FizzBuzz in a job interview and I wrote about it. Whoever he is, “jm_” got a lot of karma for that one. To clarify, that’s Reddit karma, not the nice kind of karma. There’s nothing nice in that thread, and most of that crowd completely missed the point of the article anyway.

But hey, these are bullies*! And a response that huge is actually awesome – there’s a conversation to be had, and the feedback from the audience I care about has been fantastic. Stay tuned.

* The article was also posted on r/webdev and r/web_design – much better conversations over there, and good (I think heavily moderated) discussion on Hacker News.

A favorite tweet

Posted: May 1, 2015, filed under: Inspiration


I mention this tweet at least three times a week (both while teaching CSS and in general conversation). Now you will too!

Iterate over Keys and Values in Twig with Timber

Posted: March 6, 2015, filed under: Tutorials+Tips, WordPress

I found the Twig documentation for using key value pairs from PHP arrays a little sparse, so thought I'd elaborate.

The Scenario

I'm working on a Timber site (redoing this one, actually!) and had a bunch of redundant markup for a list of social links in the footer. Here's the markup for one list item (I'm using grunt-svgstore for svg sprites - it's fun, more here):


<!-- In footer.twig -->

<li>
    <a href="http://twitter.com/laras126" target="blank">
        <svg viewBox="0 0 100 100" class="icon icon-twitter">
            <use xlink:href="#icon-twitter"></use>
        </svg>
    </a>
</li>

That's pretty gross to write four or five times when you are only changing the URL and part of the class names. So, in the spirit of DRY and making my life more difficult, I wanted to figure out abstracting those values into a PHP array to pass to the Twig file instead of writing everything over and over.

The Solution

In the add_to_context() function in your theme's functions.php (and equivalent in other Twig projects), I created a simple array of strings to pass into the site-wide $context variable:


// In functions.php

function add_to_context($context) {
    
    // My array
    $social = array(
            'twitter' => 'http://twitter.com/laras126',
            'linkedin' => 'http://www.linkedin.com/in/notlaura/',
            'github' => 'http://github.com/laras126'
        );
    
    // Add social array to site context
    $context['social'] = $social;
        
    // ... probably more $context here (e.g. sidebars, menus, etc)

    // Essential (and included in Timber starter theme)
    $context['site'] = $this;
    return $context;
}

Now that content is available on any page in the site, and I'll have that in the footer is on every page so it's okay. If I only had this on pages for example, I would add the context within the page.php template. You want to only use global context when something really is on every view of the site.

Read More →