Lullabot

The New Lullabot.com

React.js, CouchDB, Node.js, de-coupling Drupal; if any of that sounds cool to you, then this is the podcast for you. Kyle Hofmeyer gathered a several Lullabots together, who helped create the new lullabot.com, to learn what kind of wizardry was used to make this thing purr like a happy kitten. Jared Ponchot talks about the advantages this process provided for him and his design team. Sally Young talks about the guts of the site and the magic that went in to making this de-coupled Drupal site a success. We are also joined by Kris Bulman, Wes Ruvalcaba, and Betty Tran as they share their experience building the site. From front-end advantages to lazyboyDB, this podcast has it all.

Announcing The New Lullabot.com

Mmmm… love that new website smell! Some history

It's been nearly 10 years since we launched our first company website at lullabot.com. During that time, we've done five full redesigns of the site. The company has grown from two people to 62. We've expanded from a small Drupal consulting and education company to a full-service agency with a complete Design team, dedicated front-end developers, and of course, the expert Drupal back-end development which has always been our foundation.

As we've grown, our site design has reflected our focus and skills. The first site that Matt and I put together back in 2005 was intentionally sparse – not exactly beautiful, but functional and simple to maintain for just 2 or 3 people. As we hired talented designers and skilled front-end developers, site redesigns became more complex. In 2010, we split our Drupal education services into Drupalize.Me and the main focus of lullabot.com became our client services work, showcasing our design and development projects and sharing insights from our team.

Revving up the new Lullabot.com

The newest iteration of Lullabot.com is our most ambitious to date. As with most of our client engagements, the project started with research. Our Design team interviewed existing and potential clients, site visitors, and the Lullabot team to understand how people were using our site – what they wanted to get out of it, and why they visited. Our team distilled all they'd learned into goals and early wireframes for the site. They then worked with our Development staff to try to come up with the most flexible way of achieving these goals so that we could have full control of the site in ways that Drupal often doesn't afford. They wanted full <html> to </html> blue-sky design of any arbitrary page on the site without losing Drupal's amazing content management capabilities.

The technical team settled on a decoupled, isomorphic approach using Facebook's React, Node.js, CouchDB (a noSQL database) and Drupal as the backend CMS.

Content management is what Drupal does best, and this happens through a purpose-built subsite where the Lullabot team can login and post articles, podcasts, and manage their bios. Drupal pushes content into CouchDB, which exposes a REST API for React to consume. React is an isomorphic library (its code can run both in the server and the client), which means that when a visitor first visits the site, they receive the html of the entire page. Then, the rest of the navigation happens client-side, updating just the parts of the page which are different from the current one. Furthermore, React is written to be completely backward compatible with older browsers.

Our clients are often in need of API-driven native mobile apps, television-based apps, and content ingestion on connected devices. We've implemented these things in less holistic ways with our clients in the past. But the new Lullabot.com gave us a chance to experiment with some methodologies that weren't quite tried-and-tested enough to recommend to our clients. But now that we've had a chance to see the type of flexibility they give us on lullabot.com, we'll be adding this to the array of architectural strategies that we can consider for our clients in the future.

Look ma, no hands!

The results are amazing; high-speed, high-performance, and superlative flexibility. In layman's terms, this means our Design and Front-end people can go crazy – implementing blue-sky ideas without the usual Drupal markup constraints. The new site is fully responsive. Articles and portfolio work pages can have giant, dazzling, full browser-height background images or videos. Articles have big text that is easy to read on any scale from large desktop monitors to the smallest phone screens. Furthermore, we did everything with an eye toward blazing fast page loads. We omitted jQuery, trading convenience in the development process for speedy page loads. Then we looked at every http request, every image, every library to make sure our website was as snappy on an older smartphone as it was on the desktop. Best of all, we off-loaded much of the heavy lifting to the client-side with React.

Design-wise, the new site is uncluttered, sparse, and relatively simple. But whether you're looking for our vast archive of articles or podcasts, information about what services Lullabot offers, who we've worked with and what we've done, or you're curious to know what it's like to work at Lullabot, it's all there.

Over the coming months, we will be writing a series of articles and doing a few podcasts talking about different aspects of the new site. Please subscribe to the Lullabot email newsletter below and you'll be the first to know when new articles are published.

SEO and Customer Data

In this podcast, hostess Amber Matz talks with Andrew Wilson, Senior Account Manager at Drupalize.Me about SEO, and gathering and analyzing customer data. Learn about how structured data and rich snippets can enhance search results, along with some important things to know about how Google works. We talk about some hard SEO lessons learned here at Drupalize.Me. We also discuss the aggregated data in Google Analytics versus user-specific data and tracking provided by services like Kissmetrics and Intercom.io, and how, as a business, you can learn more about your customers through gathering and analyzing site visitor data with an ultimate goal of serving your customers and clients (potential and present) more effectively.

Switching Drush Versions

Different versions of Drupal require different versions of Drush, here’s how to make the switch easily

Stu Keroff on Asian Penguins

In this episode of Hacking Culture, Matthew Tift talks with Stu Keroff about a Linux User Group for Asian middle-school students called Asian Penguins. The kids learn not only how to use Linux, but also maintain more than 30 Linux computers for their school and provide Linux computers to local families that cannot afford a computer. This episode is released under the Creative Commons attribution share alike 4.0 International license. The theme music used in this episode comes from the Open Goldberg Variations. The musical interludes all come from ccMixter.org. “Reverie (small theme)" by _ghost (http://ccmixter.org/files/_ghost/25389) under CC BY license. "Heartbit" by Alex featuring Onlymeith (http://ccmixter.org/files/AlexBeroza/37758) under CC BY-NC license.

Project Management

In this week's Drupalize.Me podcast, hostess Amber Matz chats about all things Project Management with Seth Brown (COO at Lullabot) and Lullabot Technical Project Managers Jessica Mokrzecki and Jerad Bitner. To continue the conversation, check out Drupalize.Me's series on Project Management featuring interviews and insights from these fine folks and others at Lullabot.

Drupal 8 Theming Fundamentals, Part 2

In our last post on Drupal 8 theming fundamentals, we learned to set up a theme and add our CSS and JavaScript. This time around we’re talking about the Twig templating engine, how to add regions to our theme, and then finish with a look at the wonderful debugging available in Drupal 8.

The Cutting Edge of the Web: VR

Back in October, I received the Oculus Rift DK2 for my birthday and found what I think will be the future of how we build websites, interact with customers, and communicate with each other. I found a community of enthusiasts who are building virtual worlds with the very same concepts we use to build two-dimensional websites today. This community is pushing the boundaries of the web in a way that is unlike any other, and we’re having an absolute blast discovering the possibilities.

Holly Ross on the Drupal Association

In this episode of Hacking Culture, Matthew Tift talks with Holly Ross, the Executive Director of the Drupal Association, about the Drupal community, the Drupal Association, non-profits, business, tax codes, and more. They get into some controversial issues, and some of Holly's answers may surprise you!

What is an isomorphic application?

Javascript was traditionally the language of the web browser, performing computations directly on a user’s machine. This is referred to as “client-side” processing. With the advent of Node.js, JavaScript has become a compelling “server-side” language as well, which was traditionally the domain of languages like Java, Python and PHP.

Importing CSS Breakpoints Into Javascript

There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The problem is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or require IE10+.

Let's Chat About Web Accessibility

Join Amber Matz as she chats with web accessibility aficionados Mike Gifford, Chris Albrecht, and Helena Zubkow about what web developers and Drupalistas can do to build more accessible web sites. How has web accessibility changed over the years? Who is being left behind? What are some common gotchas? What are some easy ways to get started testing for accessibility? All these questions and more are discussed in today's podcast. Don't forget to check out the links and resources in the show notes for all sorts of useful things mentioned in our discussion.

Drupal 8 Theming Fundamentals, Part 1

In this series of posts we’re going to dig into some of the fundamentals of Drupal 8 theming. By the time we’re finished we’ll have a solid understanding of how to apply many of the new tools and techniques in our work. We’ll also have a starter theme we’ll be able to use in our future projects.

We’re going to begin by building the bare minimum required to get our theme working. We’ll create the basic file structure as well as a critical configuration file so that Drupal will recognize our theme and let us enable it.

Pages