A Site To Behold: Open Content & Design Comes to jQuery

Posted on by

In the past few days and weeks, you’ve probably already noticed the new theme we’ve been rolling out across our websites. In fact, unless this is your very first time looking at the jQuery blog, this very post probably looks a lot different than what you’ve been used to seeing over the past few years. Today, as this new design finally reaches jquery.com, we are very excited to pull back the curtain and explain the work we’ve been doing and how it goes above and beyond the simple “facelift” it may appear to be at first glance.

As the jQuery ecosystem has grown, it’s become increasingly difficult for the jQuery Team to keep our arms wrapped around a burgeoning balloon of documentation, design, CMS installs and wikis. Community members who’ve wanted to report and fix documentation errors have been left with nowhere to take action, and the picture wasn’t much better even for those who did have access. With all this content and design locked away in production environments behind a slew of different user accounts, and nowhere to track bugs, visibility has been low and progress incremental at best. We knew we had to make a change.

Over the past year, we’ve undertaken a massive effort to consolidate and simplify our site infrastructure and open source all of our web site content, documentation, and design. We’ve done this because it has already done wonders for our own ability to collaborate and move forward, and because we hope it will open up new avenues of participation for all of you out there who have wanted to find a way to get involved with jQuery, but have been unsure you could contribute.

So, enough with the platitudes — on to the stack!

git + grunt + WordPress

We’ve moved nearly all of our documentation and site content into static content repositories on GitHub, where they are maintained in HTML, Markdown, or XML, depending on the type of content. Now, if you notice a typo or think something needs clarification, you can file an issue and even send a pull request with a fix. Everything from the source documentation for jQuery.ajax to the front page of jquery.com to the raw Markdown of this new page that includes the full list of content repositories is open source!

The content is brought to life on our websites using WordPress and our custom theme and multi-site configuration, jquery-wp-content. Using this single WordPress instance makes it exponentially easier and more manageable for us to keep the look and feel of all our different sites in sync, and preserves our ability to easily layer on dynamic features like site search and user accounts as we need them. jquery-wp-content also contains a custom installation script that makes it easy to stand up the entire jQuery sites network for local development, opening up the doors for much less conservative experimentation with fixes and new features. Again, all this means that if you notice bugs on any jQuery website, there’s somewhere to report them, and you can even work on the fix yourself if you want!

(We’ve received an incredible amount of help creating and maintaining jquery-wp-content from WordPress developers Andrew Nacin and Daryl Koopersmith, and we’d be remiss if we didn’t thank them right here for all their hard work!)

The link between WordPress and the static content repositories is a grunt build and deployment process that processes the content files and synchronizes them into a WordPress installation using XML-RPC. That means we don’t ever use the WordPress Administration pages; all authoring and editing just happens in your favorite text editor, then grunt does the hard work.

In order to deploy to our production and staging servers, we simply use git webhooks to respond to commits on the content repositories and jquery-wp-content. Whenever a commit lands on the master branch of these repositories, the content and design is reflected immediately in the staging environment, which is just the URL of the website with a stage. subdomain prefix, e.g., stage.jquery.com. To deploy to the production sites, all that’s necessary is tagging with a semver and pushing the tag.

New Sites

In addition to today’s new look for the blog and jquery.com, we’re happy to unveil some brand new sites that are all powered by this system, which you should find especially useful if you’re looking to find ways to get involved with with jQuery.

Contribute to jQuery

URL: contribute.jquery.org | Repo: github.com/jquery/contribute.jquery.org
Our new hub for information on how to actually get started with contributing to jQuery and open source in general. It’s also full of useful resources for contributors, like our CLA form and style guides used across all of our projects.

jQuery IRC Center

URL: irc.jquery.org | Repo: github.com/jquery/irc.jquery.org
The jQuery Foundation uses Internet Relay Chat extensively for support and project communication. This is where we host the logs from our channels and keep documentation about how you can get connected and what to expect when you get there.

jQuery Brand Guidelines

URL: brand.jquery.org | Repo: github.com/jquery/brand.jquery.org
As we’ve recently freshened up a lot of the conventions we’re using for representing jQuery, we’ve also published these guidelines so that the community can have a better understanding of how they can — and can’t — use the names and marks of jQuery Foundation projects.

Sunrise, Sunset

We’ll also be saying goodbye to some subdomains in the next few weeks, and we wanted to give you a heads up, so you can prepare if necessary.

docs.jquery.com

Our original MediaWiki documentation-and-catch-all site has served admirably over the years, but it is time to put it out to pasture. We’ll continue to redirect the popular URLs on this site to their more modern counterparts.

meetups.jquery.com

Hosting our own meetup network was an interesting experiment, but the site gets almost no usage and is cumbersome for us to continue to manage, so we will be shutting it down. We recommend organizers use other, more established platforms such as meetup.com.


In addition to the new sites we’ve just launched, we’ll be continuing to roll out other new sites and integrate more of our existing sites into with the new theme over the coming days and weeks. We’re really happy with how it’s working so far, and look forward to continuing to improve the sites — perhaps with your help! As always, if you have trouble with any of this, please file issues, join us in the #jquery-content channel on freenode, or send an e-mail to content at jquery dot com.

9 thoughts on “A Site To Behold: Open Content & Design Comes to jQuery

  1. You should’ve seen my face when I saw the new design that was applied to the API documentation!

    I’m loving the new design, it looks a hundred times better. Even better is the fact that the community can edit it themselves. It’s exactly what was needed, and what many websites need.

  2. albert on said:

    What happens to the disqus that was originally on the bottom of API documentation page?
    It was really helpful and now it’s gone.

  3. Nice redesign, but… you’ve removed the filtering on writing (keyup) in API search field. It was the best feature of the API documentation :(

  4. Jibbidy on said:

    Hi, I’m sad to see the site no longer runs on Drupal, that’s a shame.

    If there’s anything in particular about Drupal that meant you couldn’t use it, I’d like to hear the reasons (seriously).

    Very good new design though!

  5. Very nice theme, jQuery is advancing in leaps and bounds as compared to Flash and Java. The websites are much faster and no need to install any platform. That is why I moved from Flash to jQuery and I can tell you it is really amazing and working on grunt is so much fun.