May 10 2017
May 10
May 9th, 2017

DrupalCon is many things to many people. For me, this year’s North America DrupalCon in Baltimore was a chance to connect with my remote co-workers in the same place, help share knowledge while learning things myself, and celebrate all the things that Drupal makes possible.

The Drupal 8 with React.js and Waterwheel Training

Our first big event was “API First Drupal 8 with React.js and Waterwheel Training”, where Web Chef Luke Herrington took a canonical JavaScript application—a todo list built with React—and hooked it up to Drupal 8 through a new JavaScript library called Waterwheel.js. Todos were stored in a headless Drupal site via the JSON API module, and we even provided a login page and a `like` button for todos. Although we had a small army of Web Chefs available to help, Luke had created such a great training that our extra support wasn’t needed, and the attendees were really able to dive deep into how everything worked.

Future of the CMS: Decoupled

“I’ve completely rewritten my talk,” said Todd, the Four Kitchens CEO, at the team dinner on Monday night. I’ve seen him give this talk before but this declaration really piqued my curiosity.

There were a lot of talks at DrupalCon about the “how” of decoupling, but Todd’s revised talk is a great summary of the “why”. In it, Todd talks about the differences between CMSes being “content management systems” versus “website management systems” and about how that content can be managed so that it is reuseable on all categories of devices. Because the technology is always changing, it’s a talk he rewrites at least once a year, and I’m glad I got to see this version of the 2017 talk when I did.

Supercharge Your Next Web App with Electron

To show off his work in Electron, Web Chef James Todd brought two drawing robots to DrupalCon that he set up in our booth. Each machine was powered by RoboPaint, a packaged-up web app. I’ve been curious about Electron for a while, and when I learned that James was giving a talk on the subject I immediately reached out to help him build his slide deck so that I could learn more. His presentation was thorough and entertaining, and he encouraged people to “experiment and play with it, it’ll be fun”.

Drinks with a Mission

The Drupal community believes that open source technology has the power to improve the lives of others, so instead of the usual DrupalCon party, this year, Four Kitchens teamed up with Kalamuna and Manatí to host “Drinks with a Mission”.

We started the night by asking, “If you had a magic wand that would fix a problem, what problems would you fix?” Answers were written down on post-it notes, which were then sorted into groupings, and finally assigned to teams. Each team took their topic, such as How to Better Connect with Nature, and had to come up with solutions to the topic problem. Great ideas can begin in unexpected places, and the ensuing solutions were as thoughtful as they were hilarious.

Watch the recorded stream of the event: Part 1, Part 2

Taking the Train Home

In the last few years I’ve started to become enamored with the concept of “taking the train”. So at the end of DrupalCon I got my wish, and instead of flying, I spent an entire day traveling by rail: from Baltimore, through Philadelphia’s gorgeous train station, and then on to home in the middle of Pennsylvania.

Recommended Posts

  • A mostly full report on what went down last week in the Big Easy, gonzo journalism -style.
  • Fun & Games DrupalCon Baltimore is next week and we’re so excited to get back together in Baltimore! As the official Drupal Games sponsors, we take fun very seriously and…
  • "API First" or, as some may call it, "Decoupled Drupal", remains a topic of much discussion among the Drupal community. Here are just a few sessions being presented at Drupalcon…
Randy Oest
Randy Oest

Randy Oest is an avid Star Trek fan, plays too many board games, and bought his mother an iPad so that he wouldn't have to fix her computer anymore.

Dec 13 2016
Dec 13
December 13th, 2016

WordPress is growing. It currently runs more than one quarter of all websites on the Internet, including Four Kitchens’ own website). I’ve been immersed in Drupal for the last five years or so, but I’m curious what is going on with WordPress and its community. And so I bought a ticket to WordCamp US, dusted off my WordPress skills (that I haven’t used in over a quinquennium), and drove to Philadelphia.

What is WordCamp US?

WordCamp US (WCUS) is a conference that focuses on everything WordPress. People from around the world attend—casual users to core developers— to participate, share ideas, and get to know each other.

Community

The first thing that I noticed about WCUS is that WordPress has a huge umbrella—international travelers were plentiful, there were a lot of women, and there was a wide range of diversity. There was even a 10 year old boy in a hallway, face in his laptop, working on his WordPress blog for Minecraft.

The sessions were setup to be accessible to everyone. Each presenter’s slide deck had a space at the top for closed captioning that was done live at the event. And for those who couldn’t make it to the event, every session was recorded and live-streamed in real time.

Everyone was welcoming, questions were encouraged, and conversation flowed. I was upfront with everyone that I was a Drupal developer exploring a foreign land and I got a lot of good information about the WordPress ecosystem.

Comparing Modules and Plugins

Drupal and WordPress both share a love for being open source. Both communities strongly encourage contributing back to the project. But there is one place where Drupal and WordPress have very different opinions—paid modules and plugins.

Drupal modules generally provide building blocks for developers to use as they implement custom solutions for clients. In WordPress, this is sometimes the case, but usually WordPress plugins are complete solutions for a need. For example, to implement a custom intranet with user groups and a Facebook-style feed, a Drupal dev would install a few modules, build some views, and style the new theme elements—and that would all take time and expertise to put together. To accomplish the same thing on WordPress, a user (who doesn’t even have to be a developer) would simply install BuddyPress.org and fill out some administration choices.

I believe that because of this difference between modules and plugins, the WordPress community welcomes paid plugins. And just because they are paid doesn’t mean that they get to be proprietary. The expectation for paid plugins is that they still be open source and what you are paying for is a license for upgrades and support. A lot of the people who I talked to either have their own plugins that they sell as part of their own business or make generous use of paid plugins. Why not pay $100 for a full featured calendar plugin that saves you hours (or weeks) of work?

Looking Forward to WordPress

I enjoyed my trip to WCUS and exploring WordPress. It is a great community and I’m looking forward to continuing to explore it more. Right now I’m looking into development workflows, so if you have any advice, I’d love to hear it in the comments.

Recommended Posts

  • In this issue: Launching the new EW.com, MeteorJS; plus Sane Stack, Herp Derpsum, and switching to Sublime Text 3.
  • The Drupal community is self-reflective enough to see the flaws in the project and brave enough to reinvent itself.
  • Halloween is over, but have one last batch of _spoopy_ links to kill off your Friday. Here's what we've been talking about this week…
Randy Oest
Randy Oest

Randy Oest is an avid Star Trek fan, plays too many board games, and bought his mother an iPad so that he wouldn't have to fix her computer anymore.

Nov 10 2016
Nov 10
November 10th, 2016

Dynamic Style Guides in Drupal 8 with KSS

With a smile on my face I sat down at my desk and installed Drupal 8. I’ve been following along with the all of the feature announcements and now I had my first Drupal 8 project. The client was open-minded and receptive to ideas, so I decided to not only explore Drupal 8 but to see how far I could push it—I was going to create a living style guide.

The designer in me loves style guides. They allow me to talk through design choices and serve as a point of reference for discussions with marketing, design, and development. When you have new needs you add a component to your style guide to see how it fits in, and when a component retires you can remove it. The pain point with style guides is that they are their own artifact and frankly, once created, they rarely get tended to or updated.

Keeping It Living

Drupal 8 solves this problem with its “get off the island” thinking. This means that instead of needing to create something “in Drupal,” I was free to use tools from around the Web. A pair of my favorite style guide tools—Twig and KSS—work wonderfully with Drupal 8.

Every website has a wealth of components that need to be built and maintained. The header may have the site logo, navigation, search bar; the footer has utility navigation, social media, and a feed of the latest content; and the main content area has all the wonderful things that folks come to the site for, articles, image galleries, and forms to sign up for more information.

When we use a component-driven design approach, we are better able to maintain a site and provide consistency. We can predict changes across the whole site. By having a style guide, a client can see how the design comes together and understand how the whole will work.

What is KSS?

KSS (or Knyle Style Sheets) is documentation for humans. You enter some information into your CSS (or SASS, LESS, etc.) and when the CSS is processed by KSS, a style guide is created.

Let’s go through a common example: creating buttons. For our buttons, we’re going to create a call to action button and a disabled button. We’ll start by adding the following comment to the top of our buttons.scss file.


// Buttons
//
// .button--call-to-action - Call to action button.
// .button--disabled - Disabled button.
//
// Markup: buttons.twig
//
// Style guide: components.button
//

Let’s breakdown the content of this comment and how it relates to KSS.

The first line, “Buttons,” is the header for the section in the style guide.

The next few lines define our alternate classes for the buttons. This is because KSS will generate all the examples that we need to demonstrate the different states of the button.

For the markup, there are two ways to integrate it with KSS. The first, which isn’t shown here, is to actually write the code in the CSS comment, e.g. <a href="#" class="button {{ modifier_class }}">{{ label }}</a>. We aren’t doing that here because we want the markup to be in its own file so that it can be used by Drupal templates. Because of that, we point to a separate TWIG file.

The last line in the comment, “Style guide,” is how we keep the style guide organized. References can be either be numbers (1.2.1) or alpha (a.b.a or components.button). Use whatever makes sense for you and your team.

Using KSS to Build Components

Let’s build another component, a promo card, to show this process. This promo card is going to be a self-contained element on the site that will be used to promote content and entice users to click through.

Here is the HTML for the promo card as card--promo.twig:

<article 
  {% if attributes %}
    {{ attributes.addClass('card-promo') }}
  {% else %}
    class="{{ classes }} {{ modifier_class }}"
  {% endif %}
>
  <h2>{{ label }}</h2>
  {% if content.body %}
    {{ content.body }}
  {% else %}
    {{ body }}
  {% endif %}
</article>

Then we create a card--promo.json file with the information (title, content, etc.) that we’d like to have displayed in the template. KSS was built to recognize that when a .json file shares a name with a .twig file and is in the same folder, it will import the json data into the template.


{
  "classes": " card-promo ",
  "label": "This is the card title",
  "body": "JSON Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque doloremque eligendi, fugiat fugit laudantium mollitia obcaecati perspiciatis quasi rem rerum saepe sint voluptate? Ab dicta eius harum magnam praesentium.

” }

Here is the SCSS for the promo card as card--promo.scss:


.card-promo {
  border: 1px solid rebeccapurple;
  border-radius: 3px;
  max-width: 300px;
  padding: 20px;

  h2 {
    margin-top: 0;
    color: rebeccapurple;
    font-family: $font-family--garamond; 
    font-size: 1.5em;
    text-transform: none;
  }

  &:hover,
  &.pseudo-class-hover {
    border-color: red;
    color: red;

    h2 {
      color: red;
    }
  }
}

And now we add our KSS comment at the top of card--promo.scss:


// Promo Card
// This promo card is used to promote content on the site.
//
// :hover - Hover state for the promo card.
//
// Markup: card--promo.twig
//
// Style guide: components.card.promo
//

Bringing all this together in the style guide shows us what the card will look like.

Promo card

Making Components out of Components

Now that the single promo card has been built we can create an example of what a row of three promo cards might look like in the site.

Since we are using TWIG, we will simply include card--promo.twig into our new component, card--triptych.twig. (A triptych is a piece of artwork shown in three panels. This is a bit of my art history studies influencing my naming conventions.)

Here is card--triptych.twig:

<section class="card-triptych-wrapper">
  {% include 'card-promo.twig' %}
  {% include 'card-promo.twig' %}
  {% include 'card-promo.twig' %}
</section>

And here is the corresponding card--triptych.scss:


.card-triptych-wrapper {
  display: flex;
  flex-flow: row nowrap;

  .card-promo {
    margin: 0 10px;
  }
}

Now that we have the HTML and CSS written, let’s add the KSS comment at the top of card--triptych.scss:


// Promo Card Triptych
// This shows the cards in a row of three, just like on the home page.
//
// Markup: card--triptych.twig
//
// Style guide: components.card.triptych
//

And here you can see the triptych in action:

Promo card triptych

Adding KSS Components to Drupal Templates

Now that we’ve put together a few components and got the client’s acceptance, it is time to connect our templates with Drupal templates. We’re going to connect up the promo card with an article teaser view.

Now we will setup our Drupal template. We start by creating the file that we need, node--article--teaser.html.twig. Inside this file we will be extending our original card file, card--promo.twig, and overwriting generic style guide content with Drupal-specific content.

{#
/**
 * Extending the base template for Drupal.
 */
#}
{% extends "@styleguide/card-promo.twig" %}

With this in place every change or edit that we make to our promo cards will be reflected on the live Drupal 8 site!

Creating Dynamic Style Guides Benefits the Whole Project

This component-driven approach is a big win for everyone in the process. The client wins because they can always see what is going on in their site via the style guide and make decisions based on live comps. Backend developers win because connecting Drupal templates to other TWIG files is an easy process. Frontend developers win because they can use their own organization structure or methodology for building components. And designers (who code) win because they can use their own skills to create components.

If you’d like to play with KSS and Drupal yourself here is a repo for you.

Stay tuned next week for part three of our frontend style guide miniseries, when Evan Willhite will cover atomic design principles with Pattern Lab!

Recommended Posts

  • Welcome to Part Three of our frontend miniseries on style guides! In this installment, we cover the bits and pieces of atomic design using Pattern Lab.
  • In this issue: come see us at DrupalCon Amsterdam, Instagram CSS3 filters, ontology is overrated, Douglas Crockford: the better parts, iPhone promo products from Japan, Go-powered robots, tree simulator MMO,…
  • Welcome to the final post of our frontend miniseries on style guides! In this installment, the Web Chefs talk through how we chose Pattern Lab over KSS Node for Four…
Randy Oest
Randy Oest

Randy Oest is an avid Star Trek fan, plays too many board games, and bought his mother an iPad so that he wouldn't have to fix her computer anymore.

Design and UX

Posts about user experience: best practices, tools we use, methodologies we love. Posts about the design process: wireframes, colors, shapes, patterns. Frontend posts that focus more on the user interface aspects (visual, aural, etc.) than on coding practices.

Read more Design and UX
Nov 02 2016
Nov 02
November 2nd, 2016

We are pleased to introduce to you and the world to the new website for the New York University Robert F. Wagner Graduate School of Public Service . NYU Wagner is a public policy school that offers a comprehensive curriculum in public and nonprofit administration, policy, and management. Over the course of only five months the site has been updated front-to-back to better serve the educational and community goals of Wagner’s students, faculty, and staff.

On the backend we’ve upgraded the site from Drupal 7 into a fresh and modern Drupal 8 installation, continuing our focus on keeping our clients current on technology for a longer project lifetime. On the frontend the site has fresh visuals and updated content to aid visitors as they explore or search the site. For site admins we integrated a living style guide into the site that stays up-to-date when changes to the Drupal theme are made.

Migrating to Drupal 8

The NYU Wagner team was eager to take this opportunity while migrating from Drupal 7 to Drupal 8 to streamline their architecture. We reviewed the previous architecture and consolidated the myriad specialized content types into a consistent collection of reusable and scalable content types.

The migration process was tricky. As work progressed on the site the Migration path between Drupal 7 and Drupal 8 was evolving, which necessitated updates mid-stream. The process also brought a few migration bugs to light which were fixed for this project and then submitted to the Drupal community so that they could get resolved.

Creating a Living Style Guide

Drupal 8 opens up a lot of new options for frontend development, thanks to the new template engine, Twig, and we used this to create a solution for Wagner’s site editors. One of the concerns on this project was making sure that site editors were consistent in the application of styles across the site. Enter a living style guide, built with KSS and Twig. KSS was used to organize and assemble the style guide and Twig was used for the style templates which were in turn were directly used in Drupal templates. Now when styles are updated in the theme, the style guide is too.

Engineering and Development Specifics

  • Drupal 8 site extended with contrib and custom modules
  • Migration advancements for Drupal 7 to Drupal 8 migrations
  • Migration of videos hosted on Vimeo and controls to keep all video information up-to-date from Vimeo
  • Living style guide for site editors by integrating twig components with Drupal templates
  • Config-based build utilizing Drupal 8 improvements to Aquifer, GitHub, and CircleCI

The Team

The Four Kitchens team was headed by Allan Chappell (backend engineer and migration) and included Alex Hicks (project manager), Jon Peck (backend engineer), Donna Habersaat (UX), Randy Oest (frontend engineer) and Ben Teegarden (frontend engineer). Thanks also to the NYU Wagner internal team of Lawrence Mirsky, Hollis Calhoun, Rachel Szala Grant, Chun Fang and Haris Ahmed.

Randy Oest
Randy Oest

Randy Oest is an avid Star Trek fan, plays too many board games, and bought his mother an iPad so that he wouldn't have to fix her computer anymore.

Nov 01 2016
Nov 01

Trip Report: BADcamp 2016I've just returned from my first big Drupal camp and I'd like to tell you about my experience.

The post Trip Report: BADcamp 2016 — Teaching, Learning, and Bonding appeared first on Four Kitchens.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web