How I Integrate Front-End Libraries Into My Development Process

Integrate front-end libraries into your workflow.

As I was listening to the latest episode of SyntaxWes Bos’ and Scott Tolinski’s great new podcast on front-end web development—the question was posed among the hosts over how they integrated front-end libraries—and more specifically, their CSS—into their own code while keeping everything up-to-date. Both admitted that they didn’t have a great answer (usually involved copying and pasting), so I thought I would share a system that works for me.

Most front-end libraries these days are kept on some sort of package management system. Usually this is NPM, but could also be Bower or something else. Assuming NPM, I would load it like I would any other node module, and save it to my package.json file. Take one of my go-to libraries, Breakpoint Sass. I’d install it like so:

npm install --save breakpoint-sass

Now, to include the Sass into my project, I would reference it as I would any other Sass partial, by writing the following line somewhere near the top of my main Sass file (following the path relative to where my main Sass file is located):

@import "../../node_modules/breakpoint-sass/stylesheets/breakpoint";

Obviously the exact path is going to depend on how your project files are organized, but you get the drift.

This works just as well for components like form element prettiers (think something like Nice Select), or anything else that enhances the visual design of your project. Often in those cases, it makes more sense to put the @import statement near where you will be adding in your own CSS to customize the look to your design.

I hope to expand upon this post a little more at some point to give some more workable examples, but for now, ping me in the comments or on Twitter if you have questions on how I do this.

From HTTP to HTTPS: Why Marketers Should Embrace Encryption.

This post was originally co-written with Jim Lansbury and Kurt Roberts for the RP3 Building Opportunity blog on January 26, 2016.


Lately the news has been full of articles about encryption: Big tech companies say it’s essential, the FBI says it’s terrible. Here’s how all that news affects marketers.

Americans now spend over eight hours a day consuming media, and two hours of that are spent on the web, where all of it is accessed by URL.  In the past 20 years, we’ve gone from almost no awareness of what a URL is to nearly complete awareness.  Still, there’s quite a few parts to the URL, and they’re all decided by how you structure your website.

The first part of your URL is the part that specifies the protocol; on the web, that means either HyperText Transfer Protocol (HTTP) or HyperText Transfer Protocol Secure (HTTPS).  It seems obvious that your bank should be using HTTPS, just from the name, but why would you want to serve your marketing sites over an encrypted connection?  Here’s three reasons:

HTTPS improves your search ranking.

Google has been using encryption as a signal for search ranking since April, 2014.  At the time they announced the move, they made it a very small part of your search ranking – only 1% of the final ranking.

Two years later, however, encryption is a hot topic, and Google has a very strong stance on it. The Google Webmasters Blog announced in mid-December that the crawler will start defaulting to the HTTPS version of a link over the HTTP version.

While no one knows exactly what the implications are for each search ranking, it’s certainly in Google’s own interest to favor secure sites while lobbying lawmakers to protect private access to strong encryption.

Going HTTPS is cheap—and it could pay for itself.

In terms of actual dollar costs, webhosts for years have charged a tidy little premium to give you that coveted SSL certificate. But these days, your options for obtaining one have never been more numerous, or more cost-effective. Heck, you can even get a certificate completely free thanks to Let’s Encrypt.

What about paying for itself in terms of better metrics?  HTTPS alone won’t lead to higher conversion rates or sales, but it is a prerequisite for HTTP/2 – and HTTP/2 is here, bringing with it speed boosts of about 50%. And those speed boosts matter in two important ways.

First, speed matters to your Google search ranking. Google has been considering page speed a factor in search rankings since 2010.  And second, it matters to your customers. It’s well-established that visitors leave slow-loading pages, with Amazon stating a few years ago that a 1 second delay in page load time would cost $1.6 billion in annual sales.

The bottom line is a small dollar investment and a faster website will convert more of your site’s visitors into paying customers.

HTTPS aligns you with high-tech companies.

Google isn’t the only brand advocating an HTTPS-only Internet.  Facebook and Twitter have both been HTTPS by default for years, and increasingly other tech companies are joining the call.

Governments across the western world are clamoring for major tech companies to open “backdoors” into their encrypted systems in the name of thwarting terrorism, but fortunately these companies have refused to bow to the pressure. Meanwhile, research continues to mount that encrypted communications are not offering terrorists any advantages.

The reason the tech companies support encryption is they have audiences that really value their right to privacy and know how technology is capable of undermining that right. Those users are their early adopters, beta testers and often loyal supporters. Their support is critical for new product launches, upgrades and changes.

So how do you get started?  Implementing HTTPS (and HTTP/2) properly takes expertise from your IT department or web partner, but it isn’t a difficult change to make in most cases. And as you can see, it can make a big difference to the success of your marketing.

Introducing: Taupecat Studios

I’m thrilled to announce that I’m diving into the independent developer market full-bore with the launch of Taupecat Studios.

I’m calling it “the brand-new digital agency with the long history of success.” After more than twenty years in the industry, and working for such luminary brands as Marriott International, Discovery Communications, and Long & Foster Real Estate, I knew I would be able to add value to a brand new roster of clients under my own banner.

Look for more details on this venture to come in the future, including some awesome client announcements.

Taupecat Studios is starting off small, but I have big plans. Let’s get to work!

My WordCamp US Wishlist

Inspired by Liam Dempsey’s post, I thought I, too, should write about what I’m looking forward to most about WordCamp US, now that it’s less than one week away.

Friends, Friends, Friends

WordCamp US is the largest annual gathering of WordPress professionals and practitioners in the world. I’m so fortunate that I’ve become involved in such an inclusive, welcoming, and helpful community. This is likely the only time this year I’ll get to see some of my best WordPress friends like Tracy Levesque, Mika Epstein, Brad Williams, and so many, many more. Expect a big freaking hug from me, folks!

Opportunities

This year, especially, as I’m trying to find my next career move, WordCamp US couldn’t come at a better time. It would be a fallacy to deny that WordCamp US is an enormous networking opportunity, with the best of the best in the WordPress community available to chat, share a drink, share a meal, or just get to know better. Again, the helpfulness and inclusiveness I mentioned above can be almost overwhelming.

Deep Knowledge

Oh yeah, there’s the sessions, too! While I was extremely fortunate to speak at last year’s inaugural WordCamp US, this year I get to sit back, relax, and absorb the knowledge that others are sharing. Lately, I’ve been trying to “go outside my comfort zone” when attending WordCamp talks, and I expect the trend to continue here. Instead of focusing on just developer-centric talks (okay, yes, I still intend to go to Nacin’s; that’s required viewing despite the lack of description), I want to attend more talks based on contentdesign, and other topics of which I know very little.

What are you looking forward to about this year’s WordCamp US? Let me know in the comments.

And if you don’t have your tickets yet, hurry! Time is running out.

Musings from Someone Discovering PostCSS

I originally wrote this piece about PostCSS as an internal post for my team at RP3 Agency, but I believe it might have relevance for front-end developers everywhere.

The new hotness in the CSS world is something called “PostCSS”, which I haven’t completely figured out yet but am getting there. Basically, things that happen after your Sass (or whatever) is done and has created a true CSS file go into this ecosystem. Think autoprefixer (for automatically entering browser vendor prefixes) and minification. (There’s even a school of thought that says this kind of thing can completely replace Sass, but I am so not there yet…)

In trying to bring a two-year-old project up to modern standards (the original project used things like Grunt which we don’t use anymore, having switched to Gulp), I’ve been trying to learn how to do things the “right” way.

So here’s the Gulp “styles” task I’ve come up with:

var gulp = require( 'gulp' ),
    sass = require( 'gulp-sass' ),
    rename = require( 'gulp-rename' ),
    plumber = require( 'gulp-plumber' ),
    gutil = require( 'gulp-util' ),
    sourcemaps = require( 'gulp-sourcemaps' ),
    postcss = require( 'gulp-postcss' ),
    autoprefixer = require( 'autoprefixer' ),
    csswring = require( 'csswring' ),
    del = require( 'del' ),
    concat = require( 'gulp-concat' ),
    uglify = require( 'gulp-uglify' ),
    connect = require( 'gulp-connect' );

gulp.task( 'styles', function() {

  gulp.src( __dirname + '/src/scss/*.scss' )
  .pipe( sourcemaps.init() )
  .pipe( plumber( function( err ) {
   gutil.beep();
   var errorText = err.message + '\n\n' + err.source;
   gutil.log( gutil.colors.red( errorText ) );
  } ) )
  .pipe( sass.sync() )
  .pipe( rename( function( path ) { path.extname = '.css' } ) )
  .pipe( postcss( [ autoprefixer( {
   browsers: [ 'last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ]
  } ), csswring() ] ) )
  .pipe( rename( function( path ) { path.extname = '.min.css' } ) )
  .pipe( sourcemaps.write( '.' ) )
  .pipe( gulp.dest( __dirname + '/dist/css/' ) )
  .pipe( connect.reload() );

} );

“autoprefixer” and “csswring” are plugins to PostCSS. I’m processing my Sass into CSS using “gulp-sass”, and then using PostCSS to do the autoprefixing and minification (in a sourcemap-friendly way, and that’s important as I’ll get to in a sec).

But I’ve come across a downside to this new flow. In the past I’ve written out two versions of the finished CSS file: an “expanded” one that’s more or less human readable for our development environments, and a minified version for production. In WordPress, for example, it’s easy to tell the theme which one to use and when based on whether we have debugging turned on or not.

But “csswring” was choking when trying to minify a CSS file that had a sourcemap, regardless of whether the sourcemap was inline or external. So if you’ll notice in this gulp task, the “expanded” CSS file never gets written out; the pipe goes directly from Sass file to minified CSS. But the sourcemap is written for the minified CSS, so if you’re working in Chrome, you can see where your property is being written in the Sass, like in this screenshot:

Screenshot of my project, demonstrating how sourcemaps are working on minified CSS.

It’s not a result that I’m 100% comfortable with, but I’m learning to stop worrying and love the minification. However, I’m wondering how this will fly in production. From one sense, there’s a certain amount of front-end civic responsibility in letting other developers see the source Sass you actually wrote, rather than just the processed and minified CSS that a computer crunched out. On the other hand, 99.9999% of your audience wouldn’t give one shit about that, so is the browser pulling down a sourcemap file that’s actually twice as large as the actual CSS file? Something else to figure out…

 

The Case for WordPress Certification

In the realm of digital and creative agencies that work with WordPress as their primary platform, there are a few major players whose names keep coming up time and time again. Their employees and affiliates show up at every WordCamp (often as speakers and organizers), they have notable core and lead developers on their staff, and whenever major news happens in the WordPress world—such as a high-profile launch of a major website running WordPress—the same few agency names are often behind it.

However, there are hundreds of smaller agencies and individual developers out there who are also using WordPress in their businesses, but not necessarily at the core of their business. Agencies may develop in WordPress where it makes sense for a particular project, but work with other platforms on others.

What ends up happening is that potential clients, looking for a qualified WordPress developer, either go to one of the big “names” almost out of default, or else sign with an agency or individual without a way of being certain whether that individual is truly an expert in WordPress site development.

To this point, often the only “credentials” an agency can offer to assert its expertise is having a WordPress core contributor on staff, or participating in the “Five for the Future” program (in itself, an “unofficial” endeavor which has its own issues, as noted below). Many agencies and individuals can bill themselves as “Wordpress” [sic] experts, but there’s no official way of vetting actual experience in a way that approaches an industry standard.

Articles Addressing This Topic

Organizations Offering “WordPress Certification”

Something called the “National Website Certification Council” offers a WordPress certification. This is not sanctioned by any organization closely affiliated with WordPress (Automattic, The WordPress Foundation, etc.), yet comes up high in Google searches for “WordPress professional certification”.

ExpertRating—who bill themselves as “Leaders in Online Certification Training & Employee Testing”—offer a WordPress test. Their description of such is somewhat misleading and can be confused into construing that this test follows ISO standards. The test offered is a 40 question multiple choice, and they charge $9.99 to take it.

There are others as well, offered by profit-driven companies that offer these certifications in conjunction with their own training programs.

“The WordPress Foundation”

Unlike other platform foundations and organizations (a few of which I’ll mention below), the WordPress Foundation is not open to membership. Rather, it exists primarily to defend the WordPress trademarks and to promote the goals of the GPL under which it is licensed.

Debate Points

  • Automattic is not officially aligned with the WordPress community. However, it is the de facto authority in the respect that it runs and maintains WordPress.com, the company was founded by the co-founder of WordPress, has built a multi-million U.S. dollar business with WordPress code as its foundation, and many of the employees at Automattic are core contributors, core developers, development leads, and core committers to WordPress and other WordPress-related projects (Jetpack, _s, etc.).
  • As an open source project, there is no “governing body” that oversees development. However, there are recognized core and lead developers, and the annual community summit which serves in the capacity of a steering committee.

How Other CMSes Handle This

Many commercial CMSes offer partnership programs which serve to benefit the platform (partners will tend to sell more implementations of the CMS when there is financial incentive for them to do so) and the partner agencies (the platform will direct potential customers to their preferred partners). Sitecore, Percussion, Adobe Experience Manager, and TeamSite (to name some CMS examples), all offer some sort of certification and/or partnership program.

How Other Open Source Projects Handle This

Open source projects rarely exist in a vacuum. They often have the backing of private companies that take on a “shepherding” role of the project. (In the WordPress community, Automattic is often associated with fulfilling this role, as noted above.) Zend calls itself the “PHP company” for its leadership role in that community. Part of Zend’s business is to offer training and certification in PHP software development.

jQuery has the jQuery Foundation which serves as a means of supporting the project’s various sub-projects, providing funds for documentation, and generally advancing the cause of open source and JavaScript. Foundation membership can be either individual or corporate, and corporate membership can fall into one of four tiers: silver, gold, platinum, and diamond. WordPress is a diamond-level jQuery Foundation member.

Drupal and Joomla!

Drupal and Joomla! are projects of special significance since they are the closest “cousins” to WordPress in that both are PHP/MySQL-based open source CMSes. Drupal has the Drupal Association which offers individual and organizational memberships, much like jQuery does. From the project’s perspective, its “mission is to foster and support the Drupal community by maintaining Drupal.org software and infrastructure…”. However, individuals and organizations that join the association can use that as a marketing tool to show their commitment to the platform to prospective clients. To further that end, membership badges are available for display on members’ collateral, and members are listed in the Drupal Association Annual Report.

Joomla! has a certification project with the stated purposes:

  • Establish a standard
  • Ensure competence and develop a qualified workforce
  • Provide a documented measure of knowledge
  • Offer guidance on choosing a Joomla! service provider.

It’s again important to note that marketing an agency as a Joomla! expert is part of the rationale for this certification. The project itself does not offer certifications directly, but provides a structure for how other organizations can provide recognized certifications of their own to others. This project does not appear to be fully implemented, and it’s unclear from the website how long this project has existed in its current, unfinished, state.

Unofficial Efforts Within the WordPress Community

While there is no official certification process in WordPress, nor a publicly-joinable association, there are some small steps in that direction available through the more closely-aligned WordPress community groups and individuals.

Matt Mullenweg has advocated a “Five for the Future” program, where in companies who derive a substantial portion of their earnings from WordPress should dedicate 5% of their resources to working on core projects. Unfortunately, most organizations don’t have the resources to dedicate 5% of their workforce full-time to WordPress, or any other single open source project. For RP3 Agency, for example, 5% would equate to about one and a half people, and really the only candidates for this would come from our Creative Technology team, so you’re looking at using nearly a third of our six-person CT department at something other than billable work and internal projects. It’s a commitment we simply can’t afford. Ben Metcalf posted a rebuttal that spells out this argument further.

While not offering “certification” per se, the WordPress Developers Club bills itself as an organization that “actively teaches, advocates, and promotes excellence in WordPress Software Development.” (Emphasis theirs.) Code Poet offers a quiz which, when completed, posts the scores of those who’ve taken it.

Conclusion

Without an “officially sanctioned” means of establishing WordPress developer credentials, a void exists. Into this void are other operations offering their “WordPress certification” programs, but with no watchdog controlling the quality, there is no way to assess whether developers and agencies that achieve these certifications are truly knowledgeable about building sites with WordPress.

I feel that a certification process, subject to scrutiny and standards, would benefit those that seek these credentials for their professional goals, as well as the overall WordPress community by further supporting the developers who continue to drive the platform’s adoption around the world.

Front-End Architect

At last year’s CSS Dev Conf, one of the more outstanding presentations I saw was Micah Godbolt’s “Raising a Banner for the Front-End Architect.” It was a powerful and motivational piece that aimed to bring recognition to the fact that front end development is development, and that as a discipline, front end development is every bit as nuanced and challenging as any other aspect of development. Even before the talk had ended, I changed my Twitter profile to include “Front-End Architect,” not as a job title, but more as a complete description of my role on our team at RP3 Agency.

Today, “Front-End Architect” officially became my job title. After recent and long-standing bouts of self-doubt (am I too old? am I too female? am I too front-end focused to be considered a “real” developer?), I see this redefinition of my position as something of a validation that front-end architecture is as vital to the process of bringing a website to life as the application or system architecture.

Development is not limited to Java, or PHP, or Node.js. Despite the options in a Stack Overflow survey, specializing in Sass and CSS is just as crucial to the development of a successful website as any other part of it. Even if what you code can only be executed in a browser and not on a linux server, without it websites would be nothing, would look like nothing, and the whole web would still look like this.

I’m also, by terms of skillsets, a full-stack developer. I not only code in Sass and front-end JavaScript, but in PHP building WordPress themes and plugins. But throughout my career, my heart has been in the code that has made it to the browser—HTML, CSS, and JavaScript—and while I’m stronger in some sides of that triangle than I am in the other, it’s still a complete, complex, and challenging discipline that has languished in its own imposter syndrome for far too long.

General Assembly

Recently, I got some intriguing direct messages from Nick, a friend of mine from the D.C. Sass meetup. He told me that one of General Assembly’s WordPress instructors hadn’t worked out, and wanted to know if I’d be interested in teaching a class about once a month or so. It sounded intriguing, so I followed up with GA.

What quickly unfolded was a tremendous opportunity. Starting in April, I’ll be teaching WordPress for developers classes and bootcamps. The first will be a two-hour evening class on April 23, and will focus on creating child themes for WordPress. I think this would be a good introduction for front-end developers to get a taste of the WordPress development world.

Then in June, I’ll follow this up with a two-day weekend bootcamp on building custom WordPress themes and plugins using all the development best practices we’ve established at RP3 Agency. This will be an intensive dive into the WordPress world, and we’ll get into topics like using a starter theme (_s, of course), building with Vagrant, Sass, Gulp.js, etc.

The plan for now is to teach each of these courses (the evening course and the bootcamp) about once a quarter, #ParentingLife permitting. Of course, there’s a drawback in all of this. In preparing for these upcoming courses, I’ll likely have to take a break on speaking at WordCamps for the time being. There’s just not the time to prepare for a new WordCamp talk, while simultaneously preparing for these classes and managing my other projects and commitments.

RP3 Agency has been a long-time partner with General Assembly, and while this opportunity didn’t come directly from that relationship, I still see it as a great next step to work together to help produce more great developers in the Washington, D.C. community. I’m excited to be a part of this.

Washington Area Women’s Foundation

I’m super-excited to share the latest launch by RP3 Agency: The Washington Area Women’s Foundation website.

This website launch is the culmination of nearly a year of close collaboration with the client, extensively reimagining their outdated website and delivering a clean, modern and responsive new site.

Additionally, the new site is built on WordPress, leveraging the platform’s strengths as a full-featured content management system. My goal as the technical lead of the project was to deliver a site that not only was more pleasing and easy to use for visitors, but easier and more intuitive to manage for our clients.

In coming days and weeks I’ll be sharing more about the structure of the site: how we created a flexible content entry system yet maintained simplicity in the entry fields; our use of technologies such as Backbone.js to improve site performance, and how we architected the front end with Sass, Breakpoint and Susy grids.

My sincerest thanks to everyone on the team who made this site possible:

  • Jared Arrington
  • Suriporn Bridge
  • Bryan Cox
  • Mark Lovett
  • Kat Piscatelli
  • Allison Rinaldi
  • Kurt Roberts
  • Julie Smith
  • Deanna Steers
  • Lauren Turner

Way to go, team!