Oct 11 2018
Oct 11

The second Amazee Labs webinar took place last Friday, 28th September 2018. Philipp Melab gave a stunning presentation on “Atomic Design in Drupal with GraphQL & Twig”. Here's a short recap of what we learned together. You can watch the entire webinar online here

We kick-started the webinar with a summary of what we learned in the first webinar, in case you missed that you can read up on it here. This time our focus was to build a real-world example website for a fictional web agency called Amazing Apps.

Amazing Apps design

Philipp wanted to pack as much information as possible into the webinar, so he set up a Github repository with everything you need to get started. We were shown a brief design of the end goal then jumped straight into the meat of the presentation by dissecting the git history of each commit in the repository together.

Clean, concise, & a well-structured frontend.

Fractal is a tool to help you build and document web component libraries and then integrate them into your projects. We were led through the basics of what Fractal provides as a starting point. Then we jumped through the repository to a point where we had a couple of components built, along with colours defined using CSS variables along with demo text content.

As part of atomic design, we explored and learned the use of atoms, molecules, and organisms. Atoms demonstrate all your base styles at a glance, such as a logo or a button. Molecules are UI elements containing two or more atoms functioning together as a unit, such as a menu. Organisms are relatively complex UI components containing multiple molecules, atoms, or other organisms, such as the header or footer.


fragment Menu on Menu {
  links {
    label
    url {
      path
    }
  }
}

Once we got to the menu component, we were treated with the first GraphQL fragment, from here we could navigate up the templates from molecule to the header organism, and then to the page layout template which called the twig block named header. We can then override these blocks with the use of the twig tag extends to inject our Fractal based templates as necessary along with our GraphQL fragment.

GraphQL Twig should be used to decouple things where it makes sense, building a fully decoupled solution still costs a lot regarding development; therefore GraphQL Twig is the right solution to enhance and modernise a site in a feature based manner.

Learnings as a webinar host

It was our second webinar, so we had a few learnings from our first edition which we incorporated into the new session. We made sure to start earlier with the marketing campaign to ensure a good turn out, and ideally a larger audience; we ended up with over 40% increase in the total audience!

Check out the Github repository and accompanying videos:

Amazee Labs would like to thank everyone who attended the live session, we enjoyed being able to share this with you, and we look forward to hosting another Amazee Labs webinar in the future.

May 14 2018
May 14

“Absolutely incredible!” - just one quote from our first Amazeenar in which we explore the power of GraphQL Twig. Decoupling Drupal is the future, however, it may be a big leap to learn a whole new development stack. With GraphQL Twig, we can take baby steps with a soft-decoupled approach by writing GraphQL inside our Twig templates.

TL;DR

On Friday 11th May, Amazee Labs hosted its first Amazeenar - a live video training session presented by Philipp Melab who demonstrated some of the capabilities of GraphQL with the Drupal module GraphQL Twig.

We started the webinar while a crowd joined live from over 13 countries around the world, including Belgium, Brazil, Canada, South Africa, and as far east as Thailand.

It felt exciting to have a community of enthusiastic people connecting from so many different locations across the globe. This once again reinforced that Drupal is really about coming for the code and staying for the community.

Philipp dove into the talk by giving us a quick introduction to GraphQL, with an example query for us to better understand the concept:


query {
  node:nodeById(id: "1") {
    title:entityLabel
    related:relatedNodes {
      title:entityLabel
    }
  }
}

Running this example GraphQL query would give us the following JSON response:


{
  “node”: {
    “title”: “Article A”,
    “related” {
      { “title”: “Article B” },
      { “title”: “Article C” }
    }
  }
}

laptop

Inversion of control

Philipp then explained the need for decoupling, providing us with a good overview of the fundamental differences between standard Drupal and Decoupled Drupal, in which the control moves from a push approach to a pull approach.

React is great, but the inversion of control is crucial.

Enable the template to define its data requirements, allow's us to achieve a clear data flow with significantly increased readability and maintainability. The GraphQL Twig module allows us to add GraphQL queries to any Twig template, which is then processed during rendering and used to populate the template with data.

Philipp entertained the audience with a live working demo in which, together, we learnt how to enhance the default “powered by Drupal” block to pull in the username of user 1. He then blew our minds with an additional surprise - pulling in the current number of open bug issues for Drupal Core via the GraphQL XML submodule.

Catchup

Did you miss the webinar? Don’t fret; we recorded everything!

Amazee Labs would like to thank everyone who attended the live session, we enjoyed being able to share this with you, and we look forward to hosting another Amazeenar shortly.

Oct 03 2017
Oct 03

Fully recharged and back in Zurich, let’s recap what happened at DrupalCon Vienna; a week filled with exciting sessions, motivating BoFs (Birds of a Feather) and entertaining social evenings.

Of all the sessions, keynotes, BoFs, and social events that I attended during the week, the most notable and inspiring was Joe Shindelar’s keynote “Everyone Has Something to Share.” It was a very fun, motivating, and inspirational talk that led the crowd through Joe's personal experience of sharing and how he’s learned a lot about himself and the community. I highly recommend watching the captivating video of the talk.

Sarah & Lisa

Another session that I highly enjoyed was “Motion Design - Improving UX with animations” by Sarah Geissberger and Lisa Thesen. Watching the DrupalCon Vienna logo morph into past DrupalCon logos while learning about 3 of the 10 principles of motion design felt incredibly good.

It was a highly informative talk with lots of fun animations teaching the crowd that motion design should enhance the user's experience and add meaning to a design. Sarah and Lisa reminded us that it’s a powerful design tool that every designer should pay attention to.

Media crowd

Saša Nikolič and Tadej Baša gave their immense talk “Everybody cheer! Here comes Media!” to a completely full room. They took the crowd through the history of media in core, through the pain points every developer and site builder went through with the numerous media modules that required configuration and setup, to what we have now in Drupal 8.

Aside from the sessions, I also highly enjoyed the Drupal Cinema Zapping, a 15-20 minute video showcasing the creative side to the Drupal community in a collage of extremely entertaining video clips, Oida!

As we’ve all heard, unfortunately, the Drupal Association won’t be hosting DrupalCon Europe 2018, however over the course of the past week, in different sessions and BoFs, the community came together and decided to create Drupal Europe 2018. There will be a post-DrupalCon Virtual Meeting on Thursday October 12, at 16:00 CEST - be sure to join the webinar.

Drupal European Camps

 

For more photos, check out the DrupalCon Vienna Flickr album pool or the Amazee Labs DrupalCon Vienna Flickr collection.

I look forward to meeting you at a future event in Europe, perhaps in Belgrade for Drupal Iron Camp.

Jan 06 2017
Jan 06

With 16 February 2017 fast-approaching, Drupal Mountain Camp is closing the call for sessions at midnight CET on Sunday, 8 January, so hurry and submit your talk today.

What and When is Drupal Mountain Camp?

The camp is designed to mix the beauty of the Swiss Alps, sprinkled in snow, with the warmth of the Drupal community. It's a perfect combination of fresh tracks for those who ski or snowboard with inspirational talks by amazing people topped with Swiss cheese & chocolate.

The camp will happen from 16 to 19 February 2017 at the Davos Congress Centre.

Drupal Mountain Camp

Final call for sessions

The closing for call for sessions is rapidly approaching, so submit your talks as soon as possible! There is already over 30 great sessions with 2 confirmed key-notes by Laura Gaetano and Preston So.

Does that sound interesting and do you want to know more about the process to submit your session topic? Well, read on:

How can I submit a session?

So you've got something you'd like to talk about, awesome, here's how you can submit a session:

  1. Head on over to the submit a session link.
  2. Think of a catchy-title and fill in the Session Title.
  3. What is your talk about? Try to write 4-5 lines about what you'd like to talk about in the Description textbox.
    • Note: you can add images if it helps portray your talk.
  4. Select what kind of Session Type (how much time) you'd like.
  5. Select the appropiate Tracks - you can select multiple if your talk covers various topics.
  6. Select the Level of expertise - is it more of a beginner talk or does it become quite advanced with technical terms?
  7. Don't forget to add your Speaker name and Contact email.

Well that sounds easy, but why should I submit a talk?

Public speaking rates high among the top 5 phobias by people right alongside going to the dentist and flying. Why would anyone put themselves through that? Well, everyone has their own reasons, but here's what I've gathered.

  • Giving a talk will require a lot of work and preparation, but don't let that put you off. It will pay off in the end.
  • People who attend your talk are generally looking for help in your specific topic, so this will be a great time for networking.
  • You'll be noticed and people will tell you that you're cool.
    • Ok, maybe you don't want to be noticed, and maybe you're fine with not being called cool, but you'll definetly have fun talking.
  • You'll feel way more confident afterwards, which might be a good enough boost for you to jump on a snowboard and hit the slopes on the weekend.

There are some great talks already submitted for example on topics like Migrations, Styleguide, and Paragraphs

"I don't know if my session is good enough."

Don't worry. There's help available, you can contact Josef / dasjo directly or get in touch with the organising team via the contact email on the camps website. We are happy to provide feedback about possible talk topics and the general agenda.

Is it fun to speak at events?

Yes. Not only will you further cement your knowledge on the topic by giving a talk about it, you'll also learn from your peers who attend your talk.

So, go ahead and submit your talk and we'll see you 16-19 of February in Davos, Switzerland. In the meantime, follow the camp on Twitter.

Drupal Mountain Camp in Davos

Oct 31 2016
Oct 31

Last month, for DrupalCon Dublin, I participated in my first sprint day… as a mentor. It was a day packed with fun, inspiration, motivation, non-stop learning, and a mention of webchick’s cat. Let’s dive in and find out what Sprint Mentoring is all about.

First, let’s discuss what is a sprint day. A sprint in software development terms, is a get-together for focused work on a project. Thus a sprint day is a day long gathering of Drupalists, developers, project managers, and really just anyone interested in pushing Drupal to the next level. That means even you can help out in a sprint, there’s something for everyone. Sprints are an important part of Drupal's growth, and are also a great opportunity to get involved, because others are on hand to help you contribute.

d8 block

So let’s sprint, but how do I get started? Have no fear, help is at hand. As a mentor, we’re here to help guide you through finding an issue in the Drupal issue queue that you can work on, to working on and fixing the problem, than to actually posting a patch, reviewing others’ patches, testing, and finally getting your patch approved and pushed to the repository.

I enjoy helping others and I know how to jump into a project, look through the issues, and find bugs to fix. However since I feel that I’m still quite new to Drupal, I decided to help mentor the First-Time Sprinter Workshop. This hands-on workshop covers the basics of contribution essentials like the Drupal issue queue, IRC, as well as setting up development tools like git, and having a local copy of Drupal set-up to run on your laptop.

First-Time SprintersFirst-Time Sprinters, credits @thpoul - https://twitter.com/thpoul

It was a great experience, and I will definitely mentor again, that feeling you get when you’ve helped others learn and achieve something with Drupal is special and somewhat addictive. There were separate rooms for the more advanced coders and themers to work on their modules as well as on Drupal core, these rooms also had mentors available.

Sprint mentor

I spoke with a few of the participants for their feedback. Some of them found it difficult to find issues that they could work on because they were either new to Drupal or they did not have a strong development background. There were a few project-managers who wanted to help out, but the sprint issues were mostly aimed at people who code in some way, fortunately one Drupalist was able to gather the project-managers together and go through managing the issue queue from a project managers’ perspective. So, next time I'll look into improving how people from different backgrounds can easily find work related to their own skills. We do use a tagging system but this could possibly be improved.

Sprint Mentors

So why not come along and join us for the next mentored sprint, and maybe become a mentor too. You'll learn. By serving as a mentor, you'll learn from your mentees. You’ll receive recognition from your peers and you’ll feel more involved in the community; having a mentee come up to me and say "thank you" just made my day.

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