Drupal News

Ashday's Digital Ecosystem and Development Tips: End of the line for Drupal 7

Main Drupal Feed - Fri, 12/07/2018 - 20:00
   

In case you missed the news from September, Dries Buytaert announced the end of life dates for both Drupal 7 & 8. The date for both Drupal 7 & 8 is slated for November of 2021, and that may seem strange, but it really makes sense given the differences in 7 & 8 and the widespread usage of 7. Drupal 8 is ending alongside Symfony 3 which powers a lot of the underlying framework of Drupal 8, so that makes perfect sense.

Drupal.org blog: A visual prototype of Drupal.org's integration with GitLab

Main Drupal Feed - Fri, 12/07/2018 - 16:32

At Drupal Europe in September, we were very pleased that project founder Dries Buytaert highlighted a visual prototype of our upcoming integration with GitLab in his keynote.

This video outlines the migration phases that we discussed in the announcement of our partnership with GitLab. Our migration window for Phase 1 is targeted for the first weeks of January, and we hope Phase 2 to be completed shortly in the beginning of 2019.

So what has it taken to get this integration working between September and now?

We're now in the midst of serious migration testing. Testing and re-testing the process in our staging environment, putting load testing in place to stress test our integration, and doing user-validation testing to ensure that the workflows affected by this integration are working as expected.

All in all, we're thrilled with the progress, and very thankful for GitLab's close collaboration. We're excited to be moving the Drupal project to its next generation tooling soon. Once Phase 1 of our migration is complete, it'll be time for Phase 2 and our community will start seeing some tremendous improvements in efficiency and collaboration.

Cheers!

Tim Lehnen

Drupal Association - Executive Director

Agiledrop.com Blog: Our blog posts from November 2018

Main Drupal Feed - Fri, 12/07/2018 - 13:49

Check out our blog posts from November 2018.

READ MORE

OpenSense Labs: Google Will Never Tell You About These Best Drupal Practices

Main Drupal Feed - Fri, 12/07/2018 - 13:00
Google Will Never Tell You About These Best Drupal Practices Akshita Fri, 12/07/2018 - 18:30

In this blog, we will talk about the best practices which will help you enhance your user experience from good to better and how Drupal 8 can be a game changer in this quest. 

Often we have heard how Drupal is not for beginners. While setting up a Drupal website has become a lot easier with Drupal 8.6, a good website is not just about setting up some web pages under a single domain name. 

Google processes over 3.5 billion searches per day. A stale site, which is not usable or loads very slow and you risk leaving your potential customers frustrated and reflects poorly on your business. While maintenance should never be out of the plan, investing in some good practices can result in the longevity of your website and business alike.  


Here are some of the best Drupal web development practices to ensure your website is as much providing a great user experience as it helps you rank your content on Google page 1. 

8 Best Drupal Practices

Creativity isn’t alone when it comes to considering, there are many other factors which can influence your reputation in the online market. 

Drupal’s Architecture

A healthy architecture will not only ensure the demands of different stakeholders is met, but also that the site remains robust for future initiatives as well. 

Make your architecture robust. 

On a basic level, your content structures must include all the fields and content types. A clean content architecture not only helps ensure good performance but a great user experience, and easier maintenance too. 

Although a well-maintained website is critical, you can’t do much if the base is full of errors. 

Less is always more. 

In your development plan choose limited content types and fields so as not to confuse your content creators. Drupal is a powerful tool for displaying content in different formats, languages, and screens. 

Configuration plays an important role in architecture. 

In simple words, configuration is the collection of settings of how the default site functions for the admin as against the popular notion of the placement of content on the website. It includes site name, the content types and fields, taxonomy vocabularies, views and so on.

You can also check out this video by Pantheon on Drupal 8 architectural practices.

Site configuration data in Drupal is consistent, everything from the list of enabled modules, content types, taxonomy vocabularies, fields, and views can be done easily. 

Your approach must be flexible. 

In the basic level, you must use a new entity type for different types of data. In case of similar data types, use bundles for a single entity type. However, for modules, they are designed to work with Nodes, and not other entity types. 

Using nodes is easy, as it allows to create a new content type through the admin interface without much coding against the case of creating entities which require coding. As a developer, your approach should be flexible. 

Bonus tip: Don’t make configuration changes on a live site without testing them locally.

Check the Codes

We all know how good coding helps improve quality and get better results. Basics should be to start with simple codes. Remember, it is always difficult to modify complicated codes in the future. Thus, you should keep your coding simple for the longer run.

Drupal coding standards are version-independent and "always-current". All new codes follow the current standards, regardless of (core) version. In case you want to update existing code for the current standards, always create separate and dedicated issues and patches instead of squeezing into unrelated patches.

Remember to use US English standards for spellings in your code, which means it will be "color" not "colour".

Here are the top 6 coding practices by Drupal.org:

  1. Use an indent of 2 spaces, with no tabs and the lines, should have no trailing whitespace at the end.
     
  2. All binary operators (operators that come between two values), such as +, -, =, !=, ==, >, etc. should have space before and after the operator, for readability.
     
  3. Control statements should have one space between the control keyword and opening parenthesis, to distinguish them from function calls. Control structures include - if, for, while, switch, etc.
     
  4. All lines of code should not be longer than 80 characters. Lines containing longer function names, function/class definitions, variable declarations, etc are allowed to exceed 80 characters. Conditions should not be wrapped into multiple lines.
     
  5. Arrays should be formatted using short array syntax with a space separating each element (after the comma).
     
  6. When unconditionally including a class file, use require_once(). When conditionally including a class file, use include_once(). In either case, it will ensure that class files are included only once.

You can use Coder for coding standards validation without loading Drupal. 

Infrastructure

Infrastructure covers the stack your website lives on, including the server, the database, and any software layers, such as Varnish or Memcached, which ensure your visitors have a snappy experience. Planning the infrastructure from the start and developing in the same environment can greatly reduce variables and risk at launch time.

Having reliable multiple environment configurations and a solid disaster recovery plan shouldn’t be left to last-minute decisions. When it is, mistakes start arising. Here are a few tips to avoid the most common errors.

Best Practice:
  • Size your stack correctly, not too large, not too small. This can ensure you’re economically prepared for anything.
     
  • Bottlenecks can arise from the hardware or from processes hogging memory.
     
  • Check logs for errors and prepare for growth and spikes. Your stack is only as fast as the slowest component. Focus your efforts there; you’ll probably find low hanging fruit.
     
  • In terms of security, it’s crucial to configure to protect from internal attacks as well as external attacks
Optimize the Frontend

The frontend is more than just theming. 

While the features and their functioning depends on the backend, the usability and aesthetics depend on how well the frontend is taken care of. 

Performance of the website is shouldered equally between both.

“..powerful, adaptable, accessible, clear, concise, natural.”

Quickly brushing up the basics, here’re the best Drupal frontend practices: 

  1. Define component elements (sub-objects) using their own classes. This is to avoid relying on markup structure and overly-generic class names, prefixing them with the component’s name followed by two underscores. 
     
  2. Thoroughly exercise and test your site and resolve any PHP errors that are displayed during theming development.
     
  3. Use a stable administrative theme during development.
     
  4. Use DRY CSS and group reusable CSS properties together. Name these groups logically. 
     
  5. Name components using design semantics. HTML elements already impart semantics on the content and machines cannot derive content-level semantics from class names.
     
  6. In order to reduce the load on the frontend performance of your website:
     
    • Minify JavaScript, CSS, and HTML
    • Aggregate JavaScript and CSS
    • Enable gzip compression
    • Use lazy loading for site assets
    • Keep Inline background images under ~4KB in size
    • Remove unused CSS
    • Use efficient CSS selectors
    • Download 3rd party scripts asynchronously
       
  7. Use SASS to keep your responsive design more organized
Test, Error. Repeat. QA is Important

It is very important to keep the quality of your website an utmost priority before you move on to other technical stuff. While this might feel like a lot of work for your lot to do, it can make an actual difference. A review by your peers (is a must) will help you get an additional idea of how things look and should work.

Successful regression testing gives you the much-needed confidence.

It is also very important that you keep an eye on previous things while adding new stuff. The testing framework PHP unit is inbuilt in Drupal 8. By setting up the testing environment, websites can be tested easily (as samples of test cases which have been written by the community are already available).

Drupal has a very active community support. With almost 1,00,000 active developers who write test cases (which are later merged into Drupal) and submit solutions. With this, you can say that Drupal is quick in providing you with solutions to your problems.

Aim for Google Page 1. Don’t Forget the SEO 

75% of users don’t even click past the first page! 

Starting with the search, it is very important that the user gets the best results in her first search. Now, as a user, you must have tried different keywords in an attempt to connect to the content of your website. Here comes the art (and science) of SEO. 
Drupal offers a suite of SEO modules. However merely deploying the modules isn’t enough, it is important to configure and enable them as well. 

The SEO best practices include: 

  1. Using Robots.txt, so the right pages and information is indexed. 
     
  2. Ability to customize page titles and metadata. Also, it should be capable of automatically populating these respective fields as per SEO norms and best practices. 
     
  3. Navigational drop-down menus are crucial internal link structures, silently contributing to search engine optimization. They establish relevancy and hierarchy across your website to help search engines index them in from the beginning of time. It should also provide easy customization of navigation menus.
     
  4. URL aliasing must be enabled with Pathauto as it ensures the search engine understands what the webpage implies. 
Security Practices

Security is a vast area of expertise and it is quickly changing with time. While the list of do’s and don'ts is extensive and exhaustive to keep up with the threats, vulnerabilities and mitigation strategies, here are the best Drupal security practices to follow in order to keep up the health and security of your website. 

  1. Keep your core updated: A key practice, keeping the core updated will always be the first when listing healthy security practices. Always look out for core updates (include the minor releases as well). In all of its advisories, the Drupal Security Team asks for updating the core version of the system. 
     
  2. Use additional security module: When covering security, there is nothing as better than equipping yourself with more and more. To keep the walls up high, you can use the additional security modules like security kit, captcha, and paranoia. Drupal Security Review can be used as a checklist to test and check for many of the easy-to-make mistakes making your site vulnerable.  
  3. But use only security team approved modules: Your site probably uses a number of contributed modules, although that’s not an issue. Using the stable and approved modules is where the key lies. This is especially worth noting for contrib modules which are more susceptible to vulnerability. 

    Always look out for the green batch when downloading a contrib module. Rest, as the advisory reads, Use it at your own risk! 

  4. Keep Up your Backup:  As an administrator, you have to be prepared for all uninvited events.

Drupal’s open-source basics give it a possibility that it is updated frequently with more and better security modules. 

Maintenance Practices

The life cycle of a website begins from initial plans and extends to the end of the site. The site exists in three different phases: development, deployment, and maintenance. After the site is launched, your website lifecycle practices become critical to the success of changing and maintaining your site.

  • Keep your code under version control.
  • Maintain separate environments for the different stages of the site, and keep them up to date.
  • Restrict access to the production site for all but the most trusted users.
  • Review all logs periodically, including Apache, Drupal, and MySQL.
  • Review and assess your architecture periodically, and plan for the future.

At OpenSense Labs, we understand how important your website is to you. Reach out to us at hello@opensenselabs.com to get a holistic view on how to enhance your user experience.

blog banner blog image Drupal 8 Drupal practices Blog Type Articles Is it a good read ? Off

Drudesk: Drupal Commerce 2.x features for your great Drupal 8 online store

Main Drupal Feed - Fri, 12/07/2018 - 12:44

Online stores open unlimited opportunities with no geographical boundaries. Behind their lines of code are successful purchases, great profits, and happy customers. So online stores should be reliable, efficient, and attractive in everything — from product catalog to e-commerce checkout. An awesome choice for building an online store is Drupal 8, particularly with one of its greatest treasures — Drupal Commerce 2.x. Let’s explore Drupal Commerce 2.x features for your Drupal 8 online store in more detail.

I Fix Drupal: Drupal 7 vs Drupal 8 - A Technical Comparison

Main Drupal Feed - Fri, 12/07/2018 - 12:40
I don't find a lot of time to get on the tools these days and sometimes I miss getting into code. Recent projects have seen me focus on strategy, architecture, data and systems integration. Despite that I am comfortable describing myself as an expert in Drupal 7, having spent years giving the D7 codebase a forensic examination. However, despite Drupal 8.0.0 being released three years ago on November 19, 2015 I have not yet looked at a single line of code or even taken in a demo of its feature set. Today that changes. For starters I would like to see just how D8 differs from D7 when we start...

WeKnow: Improving Drupal and Gatsby Integration - The Gatsby Plugin

Main Drupal Feed - Fri, 12/07/2018 - 08:00
Improving Drupal and Gatsby Integration - The Gatsby Plugin

On the first post of this series “Improving Drupal and Gatsby Integration - The Drupal Modules”. I introduced two contributed modules we wrote to simplify the Drupal usage while working with Gatsby. One of the modules mentioned was `tui_editor` a WYSIWYG markdown editor integration with the Toast UI Editor project. This module allows content editors to enter content as markdown, making easy to implement JSON-API endpoints that return markdown.

jmolivas Fri, 12/07/2018 - 08:00

Freelock : What's up on Nerd Mountain? Go Ahead Make Changes in Prod! We Got Your Back

Main Drupal Feed - Fri, 12/07/2018 - 00:34
What's up on Nerd Mountain? Go Ahead Make Changes in Prod! We Got Your Back Ben Weagraff Thu, 12/06/2018 - 17:34

Have you ever heard the one about the web developer who goes in to make one last change to the site at 4:45PM on a Friday afternoon? It is SUCH an easy fix--he can get it done and go home for the weekend with his head held high. Ah, what a relaxing weekend it will be! Cleaning out the gutters, hiking with the kids, and really just taking some "me time". As it turns out, that plug-in update was not well-architected. As a result, it impacted the structure of the site--and now all of the content is right-justified. WHAT JUST HAPPENED?

DevOps Drupal Planet Visual Regression Testing

Drupal Association blog: Update on the Drupal Association Executive Search process

Main Drupal Feed - Thu, 12/06/2018 - 23:06

In September of this year I was privileged to be asked to serve as the Interim Executive Director for the Drupal Association, after Megan Sanicki's departure to her next adventure.

At that time, the Drupal Association board announced the formation of a search committee, to begin the process of finding the Drupal Association's next leader in earnest.

That search committee consists of the following members:

  • Adam Goodman (board chair)
  • Baddy Breidert (board member)
  • Dries Buytaert (project founder)
  • Tiffany Fariss (former board member)
  • Tim Lehnen (Interim ED)
  • Jacob Redding (board treasurer)

This search committee has engaged the services of Lehman Associates, an internationally recognized executive recruiting firm. Working closely with the executive search committee and the board as a whole, Lehman Associates has developed a position profile for the Drupal Association's next leader.

View the profile

Please feel free to share this position profile with individuals you believe would be good candidates for Drupal Association leadership. If you are interested in putting your own name forward, please use the contact information listed at the bottom of the profile.

Interested parties should submit their candidacy no later than January 15th, 2019.

The search committee is excited to work together with the Lehman team to develop our pool of candidates as we go into the new year!

Drupal Association blog: Summary of the December 5, 2018 Board Meeting

Main Drupal Feed - Thu, 12/06/2018 - 17:49

On December 5, 2018, the Drupal Association Board met online for their regular Fall/Winter board meeting.

You can find the official meeting minutes and board packet on the Board Meeting Minutes and Materials page of the Drupal.org website.

OpenSense Labs: A musical journey with Drupal

Main Drupal Feed - Thu, 12/06/2018 - 13:48
A musical journey with Drupal Vasundhra Thu, 12/06/2018 - 19:18

If I say that in today’s booming social era, having a Facebook or Twitter account is not enough in terms of web presence for your music, you would agree, right?

We all know that having a website for the same purpose, not only delivers a professional impact on the audience but also eliminates the restrictions that these external sites would have. 


For instance, you desire to put banners on your site to increase the song sales or wish to provide details about your latest concert to your fans - How do you do it?

Of course, it is only possible if you have your own music website. And there is no better option than Drupal for this task. 

If you are thinking that why specifically I am talking about Drupal then you need to know that Drupal is one of those CMSs which is flexible and consists of an excellent API framework that can accommodate almost all conceivable functionalities. 

Choosing Drupal for your music website 

Yes, it is important to unite music composers i.e musicians and bands, with their fans and loved. The sole reason to trust Drupal for this task is only because:

It has responsive web designs 

There would be a variety of audience for your music website, using different devices. While switching from big screen to small screen, things change. Size of the image is modified, menu items become drop down, columns are pushed around the webpage that makes sense with content being the supreme leader. All of this is easily handled by Drupal.

Drupal 8 consist of responsive web designs that makes it “100% good to go” with all the devices.

Responsive Design is a strategy for optimizing the display of a website using CSS and javascript to respond to different device capabilities. 

Every musician wants that his work leads to more word of mouth referrals and that new fans are added to the list every day. A responsive website leads to a better user experience with them spending more time on your site. Moreover, responsive web designs would help the end users to access menu, links, buttons and fill out forms easily.  More users mean more traffic. According to statista, 52% of the web traffic is generated from mobile devices. 

52% means half of the internet traffic, making responsive websites an important aspect of the whole scenario.

 


Multisite Setup 

There are chances that you might be building a music website for a band. Which means that each member of the band would require an individual site. This is where Drupal is the best option for you. It provides you with the ability to run multiple sites from one single Drupal codebase. Each site has a separate database, however, the projects that are stored in modules, profiles and themes can be installed by all the sites. 

Warner Music Group (built on Drupal )is a great example of this. The website manages and creates the web and mobile sites for more than 300 artists and bands. It serves millions of yearly visitors, promotes news, music releases etc. 
 


ABC ( Aliases, Block and Content type)

Your fans need details to keep up with your band’s performance or music concerts. This can be done with the help of multiple addresses or aliases. Aliases provide an option to the end users to find a particular website easily. With modules like pathauto, metatag, redirect you can make your music website search engine friendly. 

  • Pathauto modules help in automatic generation of URL/path aliases for various kind of content without requiring the end user to manually describe the path alias. 
  • The Meta tags modules allow you to automatically provide structured metadata for a website. These meta tags help in improving the ranking and display of the site in search engine results.
  • Once your website has a lot of content, you may need to audit it. This would include merging and deleting of pages that are no longer in use, and for that, you need to create URLs redirects. The Redirect module lets you create and manage these URLs using a simple user interface. 

A block would essentially act like a container that would hold all the content, lists of content, images and can be placed anywhere on the page. For example: if you want the visitors to contact you regarding any collaboration or get information about the latest concerts then the additional field can be constructed with the help of block. 

A content type is the collection of data fields grouped together in a logical set to facilitate content entry and display. Drupal core is preconfigured with two content types which allow you to create and save multiple posts. For example: In your music website you might have a content type “concert” that would include individual fields to collect the data about dates, place, price etc. The concert content type could be used to create hundreds of individual concert records.   

Performance and Scalability

Loading time serves as a major role when it comes to the performance of the website. According to Google developers, 40% of the users abandon a website if it takes more than 3 seconds to load. Thus, making speed a huge factor for the strength of the website. 

When it comes to a music website, the factor contributes even more. The visitors of your website definitely need a fast and a swift platform that loads the website quickly, and Drupal by default is the best CMS for this task.  Drupal 8 can scale well to millions of users if it is optimized well. A poorly optimized website not only slows down a website but affects the performance as well. Thus to improve and keep up the site performance modules like Blazy and Google analytics are used. 

  • Blazy module is used to provide its end users with faster load time and helps in saving data usage when they are not browsing the whole page.
  • Google Analytics module is a type of web statistics that are used to track and monitor the traffic of a particular website. It comprehends on the links which are being tracked (downloads, outgoing and mailto) by the visitors which are there on your page.
Content Editing /Customizing and managing 

The site has to be easy for you to manage. It is important that formatting of content and adding of images ( without seeing any spooky HTML codes) on your music website is simple and accessible. Drupal provides with modules that would allow you to edit your content the way you want. With drag and drop and WYSIWYG tool content authors/non-developers can create and design pages easily. With the evolution of the Drupal platform, new upcoming layout builder seems even more promising. 

Drupal upcoming layout builder which would be stabilized in Drupal 8.7, is unique in offering a single, powerful visual design tool with three use case:

  • Use case 1: Layouts for template contents 

For the sites that have a significant amount of content, it is important that similar content have the same type of appearance. For instance, you are selling songs from the same album. For your fans, it would provide a consistent experience when browsing the song list, making them easier to differentiate. For content authors, the templated approach means that they don’t have to think about the layout of each song. 

Drupal 8's new Layout Builder lets you to visually construct a layout template that will be utilized for each item of the same content type (e.g. a "songs layout" for the "song" content type). This is achievable only because the Layout Builder serves from Drupal's powerful "structured content" abilities.

  • Use case 2: Customizing the layouts  

Suppose you desire to put a video of your jam sessions on your website and later think of updating a band picture with the video, it may not make sense to add an optional “highlighted video” field with the band picture.

Drupal 8 Layout Builder offers the ability to customize templates layouts on a case per case basis. In the above example, Layout Builder would let a content creator rearrange the layout for just that one band picture and put the video directly below the image. 

  • Use case 3: Custom Pages 

It should be noted that not everything is templated and content authors often need to create a one-off page on “About us”. Drupal 8 Layout Builder can be used to create dynamic one-off custom pages. A content author can begin with a blank page, design a layout with the addition of blocks. 

Hosting

The Drupal-based website which is specially designed for Lady Gaga witnesses heavy traffic spike every day. The burst in the traffic has to be handled periodically. 
Web Hosting provides space that you can buy on a web server to store your website files. When you tend to buy website hosting you basically rent server space on a server where all your files are placed. 
Drupal provides you with many websites hosting options. Which are not only safe to use, but it handles your site traffic also.  Some of the most popular Drupal based web hostings are:

  • SiteGround
  • A2 Hosting
  • GreenGeeks
  • Pantheon
Strong Roadmap

With a variety of modules in Drupal 8, from enhanced media management to out-of-the-box experience, Drupal 8 is getting stronger with each update. It makes sure that the visitors on your website have a good user experience with no backward compatibility breaks.

With the release of Drupal 8.6, a large number of improvement has been foreseen for content authors, evaluators, site builders, and developers. 

For content authors, Drupal has added a support for “remote media type”. In other words, you can easily embed Youtube and other videos in your content. 

For evaluators, Drupal 8.6 brought about “out-of-the-box experience” that let them install and test drive Drupal in minutes. They can install with the help of a demo profile that showcases all the capabilities by presenting a beautiful website filled with content right out of the box. This makes it easy for an end user to download and install a fully functional Drupal demo application within minutes. 

For the developers, Drupal 8.6 has brought about an API first platform that involves an overview of REST improvements. 

Drupal 8.7 has promised to bring even more sophistication the Drupal family. It ensures its end users with:

  • Stabilized features that target content author.
  • Adding of JSON API (that did not make it to the release of Drupal 8.6) that would allow users to rapidly create and decouple the applications.
  • It would present with stable multilingual migrations
  • Would continually improve the evaluators' experience.
  • Iterate towards an entirely new and unique decoupled administrative experience. 
Variety of modules for a music website

The best part about Drupal is that it provides its end users with a variety of modules that help them to build their website. Some of the modules which you can use for your music website might include:

  • AudioField 

AudioField module enables you to upload or link audio files and play them on your site using one or many audio players. It has the power to support many audio formats. Currently, the module supports the following audio formats:

  1. Default HTML5 audio player (which is built-in)
  2. Audio.js 
  3. jPlayer
  4. MediaElement 
  5. Projekktor
  6. SoundManager 
  7. wavesurfer.js 
  8. WordPress Audio 

AudioField also supports player libraries and comes with the basic HTML5 audio player.

HTML5 is a built-in HTML audio player and requires no additional libraries to be installed 

It also supports additional audio player libraries which requires installation before use. 

  • Audio Embedded Field

Audio Embedded Field module creates a simple field type that enables you to embed audio from SoundCloud and other custom URLs to a field with the integration of media entity module for Drupal 8. You only need to provide URL to the audio and the module creates an embedded audio player. 

(It should be noted that this module is not covered by the security advisor)

Go Beatles (Case study)

No doubt on the fact that the music of Beatles have created history and has been marked as “evergreen”. With such a wide fan base audience, the website was expected to be more engaging. It needed to promote new albums, merchandise, and events in a way that engaged fans.  

Drupal was chosen because of its flexibility and excellent API framework.  

Goals of the Project
  • It was a need for the site to be easy for content editors to manage.
  • It was expected that the new articles could be pushed to Facebook.
  • The existing users could easily migrate to the new site, along with their prior profile and comments.
  • The user experience must be truly responsive and engaging on all devices.
  • It was required that the content pages must be built from existing collections of text, quote, image, and audio.
  • With millions of fans, it was evident that the site experiences heavy traffic every day.
  • Thus it was important that the site was eligible to handle large surges of visitors and traffic spikes.
How Drupal was used?

In terms of presenting an engaging story, one of the creative inspirations of the whole project was “The Beatles Anthology Book”. The key idea was to provide story snippets, images audio clips, videos of the band that allowed an arrangement in a different order. Different content types with the field to accommodate image, audio, video, the text was created. All the snippet of information was tagged using taxonomies and tile width. The story node used Entity Reference, Entity Reference View Widget that allowed the editor to sort vast content and filter it as well. 

As regards to theme layer, Drupal highly contributed to the website. The whole website was responsive and demonstrated the actions that had to be done by the editors. The site also depicted that Drupal can cope up with heavy loads and traffic spikes with the help of CDN module that contributed highly to deliver image and file assets via Amazon CloudFront (which was the main concern). Optimized and bandwidth efficient images were also required to deliver a responsive website. Thus, usage of modules like pictures and breakpoint along with some heavyweight template.phpcustomization was done to achieve a perfect theme layer.

Another vital requirement of the site was to tie the site with Facebook for the whole purpose of logging in, registering, and commenting. This was done to promote visibility of the site. Drupal provided with several packages that allowed the website to integrate with Facebook at various levels. With modules like Facebook auto post, Facebook OAuth and Drupal for Facebook the integration was possible. Not only this but feeds and SQL parser module were also used to query the old database.

Thus, without the help of Drupal and its modules, it would have taken an incredible amount of time and money.
 


Conclusion 

Yes, it is important for an artist to have a website that is specifically dedicated to them. Without it, there are chances of you losing out on gigs, promos, press etc. Thus, contributing to your music career and talent, the need for a website is clear.

Drupal here emerges as a helping hand. The CMS would provide you with a collection of modules that contributes to the construction of your website. 

At Opensense Labs we present you with services that not only enhance the performance of your website but we also help you in getting close to your dreams by embracing innovative technologies that can be implemented on Drupal framework. Contact us at hello@opensenselabs.com to know how you can build a Drupal-based music website. 


 

blog banner blog image Drupal Drupal 8 Drupal Themes Drupal web designs Responsive web design CSS JavaScript Grammy awards Warner Music Group Multisite Aliases Blocks Content Types Pathauto Metatags performance and scalability Google Analytics Content Editing Layout Builder Hosting Media management Drupal 8.6 Music website Beatles Blog Type Articles Is it a good read ? On

Lullabot: Diving Into The Deep End: Tips for UX Designers When Joining an Ongoing Project

Main Drupal Feed - Wed, 12/05/2018 - 21:18

It's never too late to start thinking about user experience design when working on a project. To help ensure the project is a success, it's best to have a UX designer involved in the project as early as possible. However, circumstances may not always be ideal, and User Experience may become an afterthought. Sometimes it isn't until the project is already well on its way when questions around user experience start popping up, and a decision is made to bring in a professional to help craft the necessary solutions. 

What’s the best way for a UX designer to join a project that is well on its way? In this article, we will discuss some actions that UX designers can take to help create a smooth process when joining a project already in progress.

General Onboarding

Planning and implementing an onboarding process can help set the tone for the remainder of the project. If it’s disorganized and not well planned out, you can feel underprepared for the first task, which can lead to a longer design process. It’s helpful to designate a project team member to help with on-boarding. It should be someone who knows the project well and can help answer questions about the project and process. This is usually a product owner or a project manager but isn’t limited to either. If you haven’t been assigned someone to help you with the on-boarding process, reach out to help identify which team member would be best for this role. During the on-boarding process, discuss what user experience issues the team is hoping to solve, and also review the background of significant decisions that were made. This will help you to evaluate the current state of the project as well as the history of the decision-making process. You should also make sure you understand the project goals and the intended audience. Ask for any documentation around usability testing, acceptance criteria, competitive reviews, or notes for meetings that discuss essential features. Don’t be afraid ask questions to help you fully grasp the project itself. And don’t forget to ask why. Sometimes entertaining the mindset of a five-year-old when trying to understand will help you find the answers you’re seeking.

Process Evaluation How you climb a mountain is more important than reaching the top. - Yvon Chouinard

Processes help ensure that the project goes smoothly, is on time, and on budget. They can also be a checkpoint for all those involved.  If a process doesn't already exist that includes UX Design, work together with the team to establish a process to discuss, track and review work. If you feel that a process step is missing or a current system isn't working, speak up and work with the team to revise it. Make sure to include any critical process that the team may be lacking. You also may want to make sure that discussions around any important features include a UX Designer. Ask if there are any product meetings that you should be joining to help give input as early as possible.

Schedule Weekly Design Reviews

One example of improving the process to include UX Design is scheduling weekly meetings to review design work that’s in progress. This also gives project members an opportunity to ask questions and discuss upcoming features and acceptance criteria.

Incorporate Usability Testing

Another suggestion is to include usability tests on a few completed important features before moving ahead. The results of the usability tests may help give direction or answer questions the product team has been struggling with. It can also help prioritize upcoming features or feature changes. The most important thing to remember is that usability testing can help improve the product, so it’s tailored to your specific users, and this should be communicated to the project team.

Collect General User Feedback

Establishing early on the best way to collect and give feedback on a design or feature can help streamline the design process. Should it be written feedback? Or would a meeting work better where everyone can speak up? Sometimes, when multiple people are reviewing and giving feedback, it’s best to appoint one person to collect and aggregate the input before it filters down to you.

Track Project Progress

You also want to discuss the best way to track work in progress. If your team is using an agile process, one idea is to include design tickets in the same software that you’re using to keep track of sprints such as Jira [link] or Trello [link]. Discuss the best way for summarizing features, adding acceptance criteria and tracking input in whatever system you decide to use.

Prioritization of Work Efficiency is doing things right; effectiveness is doing the right things. - Peter Drucker

The team should be clear on priorities when it comes to work, features, and feedback. Joining a team that’s in progress can be very overwhelming to both the designers and stakeholders and creating clear priorities can help set expectations and make it clear to both sides on what the team should focus on first. If a list of priorities doesn't already exist, create one. It doesn't have to be fancy. A simple excel sheet or Google Sheets will do. You can create separate priority lists for things like upcoming features that need design, QA, or user feedback. You can also combine everything into a single list if that works better for your team. Just make sure that it links to or includes as much detail as possible. In the example below, a feature that has completed acceptance criteria is linked to a ticket in Jira that explains all of the details.

undefined

It’s also helpful to group related features together, even though they may have different priorities. This will help you think about how to approach a feature without needing to reworking it later down the line. Be proactive. Ask questions around the priority of items if something doesn't make sense to you. If needed, volunteer to help prioritize features based on what makes sense for a holistic finished product or feature. Creating diagrams and flowcharts can help get everyone to understand how separate features can be connected and what makes the most sense to tackle first. Make sure that QA and user feedback is also part of the priority process.

undefined Summary

Having any team member join a project mid-process can be intimidating for all parties involved, but it’s important to be open and understanding. Improving the process and the end result is in everyone's interest, and giving and accepting feedback with an open mind can play an important role in ensuring that the project runs smoothly for everyone involved.

For User Experience Designers, it’s important to respect what’s already been accomplished and established with the idea that you should tread lightly to make small improvements at first. This will help gain confidence from the team, while also giving you time to learn about the project and understand the decisions that lead up to where it’s at today. For stakeholders involved, it’s important to listen with an open mind and take a small step back to reevaluate the best way to include UX in the process moving forward. The above suggestions can help both parties understand what actions they can take to help make the onboarding process for a UX Designer a smooth transition.

myDropWizard.com: Drupal 6 security update for Password Policy module

Main Drupal Feed - Wed, 12/05/2018 - 19:59

As you may know, Drupal 6 has reached End-of-Life (EOL) which means the Drupal Security Team is no longer doing Security Advisories or working on security patches for Drupal 6 core or contrib modules - but the Drupal 6 LTS vendors are and we're one of them!

Today, there is a Less Critical security release for the Password Policy  module to fix a Denial of Service (DoS) vulnerability.

The Password Policy module makes it possible to set constraints on user passwords.

The "digit placement" constraint is vulnerable to Denial of Service attacks if an attacker submits specially crafted passwords.

See the security advisory for Drupal 7 for more information.

Here you can download the Drupal 6 patch.

If you have a Drupal 6 site using the Password Policy module, we recommend you update immediately! We have already deployed the patch for all of our Drupal 6 Long-Term Support clients. :-)

If you'd like all your Drupal 6 modules to receive security updates and have the fixes deployed the same day they're released, please check out our D6LTS plans.

Note: if you use the myDropWizard module (totally free!), you'll be alerted to these and any future security updates, and will be able to use drush to install them (even though they won't necessarily have a release on Drupal.org).

Drupal blog: Drupal's commitment to accessibility

Main Drupal Feed - Wed, 12/05/2018 - 19:58

This blog has been re-posted and edited with permission from Dries Buytaert's blog. Please leave your comments on the original post.

Last week, WordPress Tavern picked up my blog post about Drupal 8's upcoming Layout Builder.

While I'm grateful that WordPress Tavern covered Drupal's Layout Builder, it is not surprising that the majority of WordPress Tavern's blog post alludes to the potential challenges with accessibility. After all, Gutenberg's lack of accessibility has been a big topic of debate, and a point of frustration in the WordPress community.

I understand why organizations might be tempted to de-prioritize accessibility. Making a complex web application accessible can be a lot of work, and the pressure to ship early can be high.

In the past, I've been tempted to skip accessibility features myself. I believed that because accessibility features benefited a small group of people only, they could come in a follow-up release.

Today, I've come to believe that accessibility is not something you do for a small group of people. Accessibility is about promoting inclusion. When the product you use daily is accessible, it means that we all get to work with a greater number and a greater variety of colleagues. Accessibility benefits everyone.

As you can see in Drupal's Values and Principles, we are committed to building software that everyone can use. Accessibility should always be a priority. Making capabilities like the Layout Builder accessible is core to Drupal's DNA.

Drupal's Values and Principles translate into our development process, as what we call an accessibility gate, where we set a clearly defined "must-have bar." Prioritizing accessibility also means that we commit to trying to iteratively improve accessibility beyond that minimum over time.

Together with the accessibility maintainers, we jointly agreed that:

  1. Our first priority is WCAG 2.0 AA conformance. This means that in order to be released as a stable system, the Layout Builder must reach Level AA conformance with WCAG. Without WCAG 2.0 AA conformance, we won't release a stable version of Layout Builder.
  2. Our next priority is WCAG 2.1 AA conformance. We're thrilled at the greater inclusion provided by these new guidelines, and will strive to achieve as much of it as we can before release. Because these guidelines are still new (formally approved in June 2018), we won't hold up releasing the stable version of Layout Builder on them, but are committed to implementing them as quickly as we're able to, even if some of the items are after initial release.
  3. While WCAG AAA conformance is not something currently being pursued, there are aspects of AAA that we are discussing adopting in the future. For example, the new 2.1 AAA "Animations from Interactions", which can be framed as an achievable design constraint: anywhere an animation is used, we must ensure designs are understandable/operable for those who cannot or choose not to use animations.

Drupal's commitment to accessibility is one of the things that makes Drupal's upcoming Layout Builder special: it will not only bring tremendous and new capabilities to Drupal, it will also do so without excluding a large portion of current and potential users. We all benefit from that!

Drupal blog: Pilot Program: Help us improve reliability of minor updates

Main Drupal Feed - Wed, 12/05/2018 - 18:50

The Drupal Association seeks volunteer organizations from Agency and Drupal site owners running production Drupal 8 sites for the creation of an official minor-release beta-testers program.

Since Drupal 8.0's release in November 2015, the Drupal community has successfully transitioned to a scheduled release process whereby two minor releases are made every year.

The most recent of these releases was Drupal 8.6, released in September 2018.

In a significant change from Drupal 7, these minor releases may contain new features and maintain backwards compatibility. This means that every six months there are new features in Drupal core, instead of waiting for the next major release.

This rapid acceleration in feature development has resulted in the need for greater real-world testing of upgrade paths and backwards compatibility. Drupal core has a vast automated test-suite comprising almost 25,000 tests—however, these can be greatly complemented by real-world testing of production sites. There are an infinite number of ways to put Drupal together that cannot always be handled in automated tests.

In order to improve the reliability of the minor-releases, the Drupal community—in conjunction with the Drupal Association—aims to develop a minor-release beta testers panel comprised of agencies and site-owners who maintain complex Drupal 8 production sites.

Many companies and Drupal users are looking to help with core development but aren't always sure where to start. Membership in this panel presents a new way to help the development of software that powers their website.

Who should apply?

Agencies and site owners who maintain large and complex Drupal 8 production sites. In particular, sites that use a wide range of contributed and custom modules or have large volumes of content.

What is involved?

When the beta release becomes available, the Drupal core committers will work in conjunction with the Drupal Association to contact the members of the beta-testing panel to advise that the next minor release is ready for testing.

Members of the panel will be asked to attempt updating to the beta using a staging version of their site (not straight-on production) and report back any issues found. New issues will be opened to track and resolve reported issues. If a predetermined percentage of the program participants have not yet reported back their results, a decision may be made to delay releasing subsequent beta versions or a release-candidate. Participants whose participation lapses may be removed from the program.

At the moment, testing of the new release occurs in a largely ad-hoc fashion, but once the program is established, this will become more structured and maintainers will have access to statistics regarding the breadth of testing. This will then inform release management decisions in regards to release preparedness.

What's in it for participants?
  • Updating early helps find issues beforehand, rather than after the release is out.

  • Reporting issues encountered lets you tap the wealth of experience of the Drupal core contributors that you'd not have the same level of access to if you update on your own after the release.

  • All organizations and individuals taking part in the testing will receive issue credits for both testing the update and fixing any issues that arise.

  • Satisfaction in the knowledge that you helped shape the next minor release of Drupal core.

  • Advanced preview of upcoming features in Drupal core.

Apply to participate in the program

Community: Values & Principles Committee Update - November 2018

Main Drupal Feed - Wed, 12/05/2018 - 12:00

The Values & Principles Committee has formed and has started its work. It has started by looking at Principle 8.

Why are we doing this?

As Dries said, when announcing the first iteration of the Drupal Values & Principles, the Drupal project has had a set of Values & Principles for a very long time. Historically, they were mostly communicated by word of mouth and this meant that some in our community were more aware of them than others.

Writing down the Values & Principles was a great first step. What we need to do now is continually refine the common understanding of these Values & Principles across our whole community and ensure that they are built-in to everything we do.

How will we work?

The Values & Principles are held very closely to the heart of the members of our community and we absolutely recognise that any work on them must be inclusive, clear, structured and accountable.

We are, therefore, going to be open about the work we are doing. While there are members of a committee that will focus on this task, it is not the committee’s job to make decisions “behind closed doors”. Instead, the committee is responsible for enabling the whole community to refine and communicate our common Values & Principles.

We will record actions and progress in the Drupal Governance Project so that all in our community will be able to have the necessary input.

How will we communicate?

We will continue to post updates on the Drupal Community Blog and, as already mentioned, you will always be able to see and, most importantly, participate in issues in the Governance Project. We even have a board on ContribKanban!

Who is on the committee?

Hussain Abbas (hussainweb) works as an Engineering Manager at Axelerant. He started writing programs in 1997 for school competitions and never stopped. His work focus is helping people architect solutions using Drupal and enforcing best practices. He also participates in the local developer community meetup for PHP in general and Drupal in particular. He often speaks at these events and camps in other cities.

Alex Burrows (aburrows), from UK, is the Technical Director of Digidrop and has over 10 years working in Drupal, as well as an avid contributor and a member of the Drupal Community Working Group. As well as this he is a DrupalCamp London Director and Organizer and the author of Drupal 8 Blueprints book.

Jordana Fung (jordana) is a freelance, full-stack Drupal developer from Suriname, a culturally diverse country where the main language is Dutch. She has been steadily increasing her participation in the Drupal community over the past few years and currently has a role on the Drupal Community Working Group. She loves to spend her time learning new things, meeting new people and sharing knowledge and ideas.

Suchi Garg (gargsuchi), living in Melbourne Australia is a Tech Lead at Salsa Digital. She has been a part of the Drupal community for more than 12 years as a site builder, developer, contributor, mentor, speaker and trainer. She had been a part of the Indian community before moving to Australia and is now an active Drupal community down under.

John Kennedy (johnkennedy), lives in Boston, works as a Product Manager for AWS. Over 10 years in Drupal as a site-builder, developer, speaker and on the business side. Co-organiser of Drupal Camp London 2012-2015. PM for Acquia Lightning and the Drupal 8 Module Acceleration Program.

Rachel Lawson (rachel_norfolk), UK and the Community Liaison at the Drupal Association will finally be providing logistical support to the committee and helping wherever she can. Having been in the Drupal community for 11 years as a site builder, a contributor and a mentor, she has had opportunity to experience how the community understands its collective Values & Principles.

In order to be as transparent and forthcoming as possible we wanted to address the fact that there are currently 2 CWG members on the committee. The initial call for people to join the Values & Principles committee happened at the same time as the Community Working Group was calling for new members and, as luck would have it, Alex Burrows applied for both.

In October 2018 a current member of the CWG, Jordana Fung joined the Values & Principles committee and at same time he was being vetted for potential membership to the CWG, Alex joined the Values & Principles committee as well. After the vetting process, Alex officially became a member of the CWG in November. So as it stands now, there are 2 CWG members on the V&P committee.

There are a few possible options going forward, some are:

  • Both CWG members continue for now (whilst the V&P committee is in the very early formation stages) and then possibly:
    • One member drops off
    • They act as a team and only one member (whichever is available) participates in meetings
  • The CWG decides which member is on the VP committee
    • We may need to add another member to the VP committee to take the place of the member that will no longer attend.
So, what’s next?

We have started by compiling a summary of feedback from the community so far that relates to the project’s Values & Principles from such places as the Whitney Hess Interviews, community-led conversations around governance and some anonymized feedback from the Governance Taskforce. We will be adding this summary to an issue in the project.

Call to action

We recognize, though, that what we really want to understand is how you understand what we already have written in Principle 8. THis is how we intend to do that…

The members of the committee have each written stories from their own memories of the Drupal community that demonstrate Principle 8 in action.

We invite you all to write your own stories, from your memories of the Drupal community, other tech communities or indeed any other aspect of life, that demonstrate Principle 8 to you. You should add your story to this issue we have created:

Add my story about Principle 8

One thing we do ask, though, is that you only add your own stories (as many as you like!) and NOT comment or question others’ stories. All stories are valid.

By the end of the year, we hope to have a rich set of stories that show how we, as a global community, interpret Principle 8 and we can then look to see if any changes need to be made to the words or, maybe, it is more a case of linking the Principle to the stories or providing other statements supporting Principle 8.

Kristof De Jaeger: Send me a webmention with Drupal!

Main Drupal Feed - Wed, 12/05/2018 - 11:07

After months of reading, experimenting and a lot of coding, I'm happy that the first release candidate of the Drupal IndieWeb module is out. I guess this makes the perfect time to try it out for yourself, no? There are a lot of concepts within the IndieWeb universe, and many are supported by the module. In fact, there are 8 submodules, so it might be daunting to start figuring out which ones to enable and what they exactly allow you to do. To kick start anyone interested, I'll publish a couple of articles detailing how to set up several concepts using the Drupal module. The first one will explain in a few steps how you can send a webmention to this page. Can you mention me?

Step 1: enabling modules

After you downloaded the module and installed the required composer packages, enable following modules: IndieWeb, Webmention and Microformats2. In case you are not authenticated as user 1, also toggle the following permissions: 'Administer IndieWeb configuration' and 'Send webmention'.

Step 2: expose author information

To discover the author of a website after receiving a webmention, your homepage, or the canonical url of a post needs author information. The module comes with an Author block so you can quickly expose a block where you can configure your name. Your real name or nickname is fine, as long as there's something. The minimal markup should look like something like this:

Your name


Note: this can be anywhere in your HTML, even hidden. Step 3: configure webmention module

All configuration exposed by the modules lives under 'Web services' > 'IndieWeb' at /admin/config/services/indieweb. To configure sending webmentions go to /admin/config/services/indieweb/webmention/send. Ignore the ' Syndication targets' fieldset and scroll down to ' Custom URL's for content' and toggle the 'Expose textfield' checkbox.

Scroll down a bit more and configure how you want to send webmentions, either by cron or drush (webmentions are stored in a queue first for performance reasons)

Step 4: configure Microformats module

When sending a webmention to me, it would be nice to be able to figure out what exactly your post is. To achieve this, we need to add markup to the HTML by using CSS classes. Let's configure the minimal markup at /admin/config/services/indieweb/microformats by toggling following checkboxes:

  • h-entry on node wrappers
  • e-content on standard body fields. In case your node type does not use the standard body field, enter the field name in the 'e-content on other textarea fields' textarea.
  • dt-published, p-name, u-author and u-url in a hidden span element on nodes.
Now create a post!

Create a post with a title and body. Your body needs to contain a link with a class so that when I receive your webmention, I know that this page is valid. As an example, we're going to write a reply:

Hi swentel! I just read your article and it's awesome!

Save the post and verify the markup more or less looks like underneath. Make sure you see following classes: h-entry, u-url, p-name, dt-published, e-content, u-author.


 
    
       
          Published on Tue, 04/12/2018 - 22:39
       
       
         
            Test send!
            2018-12-04T22:39:57+01:00
         

         
       
     
     
 
  Hi swentel! I just read your article and it's awesome!
 

If everything looks fine, go to the node form again. Open the 'Publish to' fieldset where you can enter 'https://realize.be/blog/send-me-webmention-drupal' in the custom URL textfield. Save again and check the send list at /admin/content/webmention/send-list. It should tell that there is one item in the queue. As a final step, run cron or the 'indieweb-send-webmentions' drush command. After that the queue should be empty and one entry will be in the send list and I should have received your webmention!

Note: You can vary between the 'u-in-reply-to', 'u-like-of' or 'u-repost-of' class. Basically, the class determines your response type. The first class will create a comment on this post. The other two classes will be a mention in the sidebar.

What's next?

Well, a lot of course. But the next step should be receiving webmentions no? If you go to /admin/config/services/indieweb/webmention, you can enable receiving webmentions by using the built-in endpoint. Make sure you expose the link tag so I know where to mention you!

I tried it, and it didn't work!

Maybe I missed something in the tutorial. Or you have found a bug :) Feel free to ping me on irc.freenode.net on #indieweb-dev or #drupal-contribute. You may also open an issue at https://github.com/swentel/indieweb

Dries Buytaert: Drupal's commitment to accessibility

Main Drupal Feed - Wed, 12/05/2018 - 10:56

Last week, WordPress Tavern picked up my blog post about Drupal 8's upcoming Layout Builder.

While I'm grateful that WordPress Tavern covered Drupal's Layout Builder, it is not surprising that the majority of WordPress Tavern's blog post alludes to the potential challenges with accessibility. After all, Gutenberg's lack of accessibility has been a big topic of debate, and a point of frustration in the WordPress community.

I understand why organizations might be tempted to de-prioritize accessibility. Making a complex web application accessible can be a lot of work, and the pressure to ship early can be high.

In the past, I've been tempted to skip accessibility features myself. I believed that because accessibility features benefited a small group of people only, they could come in a follow-up release.

Today, I've come to believe that accessibility is not something you do for a small group of people. Accessibility is about promoting inclusion. When the product you use daily is accessible, it means that we all get to work with a greater number and a greater variety of colleagues. Accessibility benefits everyone.

As you can see in Drupal's Values and Principles, we are committed to building software that everyone can use. Accessibility should always be a priority. Making capabilities like the Layout Builder accessible is core to Drupal's DNA.

Drupal's Values and Principles translate into our development process, as what we call an accessibility gate, where we set a clearly defined "must-have bar". Prioritizing accessibility also means that we commit to trying to iteratively improve accessibility beyond that minimum over time.

Together with the accessibility maintainers, we jointly agreed that:

  1. Our first priority is WCAG 2.0 AA conformance. This means that in order to be released as a stable system, the Layout Builder must reach Level AA conformance with WCAG. Without WCAG 2.0 AA conformance, we won't release a stable version of Layout Builder.
  2. Our next priority is WCAG 2.1 AA conformance. We're thrilled at the greater inclusion provided by these new guidelines, and will strive to achieve as much of it as we can before release. Because these guidelines are still new (formally approved in June 2018), we won't hold up releasing the stable version of Layout Builder on them, but are committed to implementing them as quickly as we're able to, even if some of the items are after initial release.
  3. While WCAG AAA conformance is not something currently being pursued, there are aspects of AAA that we are discussing adopting in the future. For example, the new 2.1 AAA "Animations from Interactions", which can be framed as an achievable design constraint: anywhere an animation is used, we must ensure designs are understandable/operable for those who cannot or choose not to use animations.

Drupal's commitment to accessibility is one of the things that makes Drupal's upcoming Layout Builder special: it will not only bring tremendous and new capabilities to Drupal, it will also do so without excluding a large portion of current and potential users. We all benefit from that!

Kanopi Studios: Kanopi 2019 DrupalCon Seattle Sessions

Main Drupal Feed - Tue, 12/04/2018 - 20:29

We are thrilled to have had three of our sessions chosen for DrupalCon Seattle in April 2019. You’ll find us at the booth, in the hallway, and out and about in Seattle, but make sure to visit us in our three Builder Track sessions:

Keep Living the Dream! How to work remotely AND foster a happy, balanced life

Virtual. Remote. Distributed. Pick your label. This style of organization is becoming wildly more in demand and popular among many Drupal shops. While many folks have gone remote, some people find the experience quite isolating and disconnected.

In this session we will talk about how to be the best remote employee, as well as provide ideas if you are a leader of a remote team. We will talk about key tactics to keep you (and all other staff) inspired, creative, productive and most importantly, happy!

Presenter: Anne Stefanyk

Beyond the Screen Reader: Humanizing Accessibility

We talk a lot about the basics of accessibility. But what does it really mean to be accessible? How do we ensure we are including everyone and empowering every user in every scenario to use our sites, products, and devices? We think about deaf and blind users, we check contrast for colorblind users. We consider the elderly and sometimes those with dyslexia. Are we including trans folks? Parents? The chronically ill? People with limited literacy? The injured? People in a major emergency? Who are we designing for? What should we be considering?

If you’re wondering how these folks might be affected by accessibility and you want your website to be inclusive for everyone, this is the session for you.

Presenter: Alanna Burke

Deep Cleaning: Creating franchise model efficiencies with Drupal 8

COIT offers cleaning and 24/7 emergency restoration services. Their 100+ locations serve more than 12 million homes & businesses across the United States and Canada.

It had been years since the COIT site had been updated, and it posed a host of technical challenges. Franchise content optimizations resulted in redundant updates for the SEO team. The mobile experience wasn’t optimized for conversions. There was a mountain of custom technical debt. And despite the current content administrative challenges, the localized experience lacked the level of context-awareness that consumers have come to expect. It was time for COIT to clean up its own mess.

In this case study we will cover the more technical parts of this Drupal 8 implementation: how we kept a multinational but distinctly separate brand presence with geolocative features, maintained custom promotions tailored to each franchise location, and kept the existing hard-won SEO and SEM business drivers intact.

Presenters: Anne Stefanyk and Katherine White

The post Kanopi 2019 DrupalCon Seattle Sessions appeared first on Kanopi Studios.

ComputerMinds.co.uk: Open links in popups with Foundation

Main Drupal Feed - Tue, 12/04/2018 - 11:16

Let me take you on a journey. We'll pass by Drupal content renderer services, AJAX commands, javascript libraries and a popular front-end framework. If you've only heard of one or two of those things, come lean on the experience I took diving deep into Drupal. I'm pleased with where my adventure took me to, and maybe what I learned will be useful to you too.

Here's the end result: a contact form, launched from a button link in the site header, with the page beneath obscured by an overlay. The form allows site visitors to get in touch from any page, without leaving what they were looking at.

Drupal has its own API for making links launch dialogs (leveraging jQuery UI Dialogs). But our front-end of the site was built with Foundation, the super-popular theming framework, which provides components of its own that are much better for styling. We often base our bespoke themes on Foundation, and manipulate Drupal to fit.

We had already done some styling of Foundation's Reveal component. In those places, the markup to show in the popup is already in the page, but I didn't really want the form to be in the page until it was needed. Instead, AJAX could fetch it in. So I wondered if I could combine Drupal's AJAX APIs with Foundation's Reveal markup and styling. Come with me down the rabbit hole...

There are quite a few components in making this possible. Here's a diagram:

So it comes down to the following parts, which we'll explore together. Wherever custom code is needed, I've posted it in full later in this article.

  • A link that uses AJAX, with a dialog type set in an attribute.
  • Drupal builds the content of the page that was linked to.
  • Drupal's content view subscriber picks up that response and looks for a content renderer service that matches the dialog type.
  • The content renderer returns an AJAX command PHP class in its response, and attaches a javascript library that will contain a javascript AJAX command (a method).
  • That command returns the content to show in the popup, and that javascript method name.
  • The javascript method launches the popup containing the HTML content.

Let's start at the beginning: the link. Drupal's AJAX API for links is pretty neat. We trigger it with two things:

  1. A use-ajax class, which tells it to open that link via an AJAX call, returning just the main page content (e.g. without headers & footers), to be presented in your existing page.
  2. A data-dialog-type attribute, to instruct how that content should be presented. This can be used for the jQuery UI dialogs (written up elsewhere) or the newer off-canvas sidebar, for example.

I wanted to have a go at creating my own 'dialog type', which would be a Foundation Reveal popup. The HTML fetched by the AJAX call would be shown in it. Let's start with the basic markup I wanted to my link to have:

Enquire

This could either just be part of content, or I could get this into a template using a preprocess function that would build the link. Something like this:

<?php // $url could have come from $node->toUrl(), Url::fromRoute() or similar. // For this example, it's come from a contact form entity. $url->setOption('attributes', [ 'class' => [ 'use-ajax', ], // This attribute tells it to use our kind of dialog 'data-dialog-type' => 'reveal', ]); // The variable 'popup_launcher' is to be used in the template. $variables['popup_launcher'] = \Drupal\Core\Link::fromTextAndUrl(t('Enquire'), $url);

After much reading around and breakpoint debugging to figure it out, I discovered that dialog types are matched up to content rendering services. So I needed to define a new one of those, which I could base closely on Drupal's own DialogRenderer. Here's the definition from my module's mymodule.services.yml file:

services: main_content_renderer.foundation_reveal: class: Drupal\mymodule\Render\MainContent\FoundationReveal arguments: ['@title_resolver'] tags: - { name: render.main_content_renderer, format: drupal_reveal }

Adding the tag named 'render.main_content_renderer' means my class will be picked up by core's MainContentRenderersPass when building the container. Drupal's MainContentViewSubscriber will then consider it as a service that can render responses.

The 'format' part of the tag needs to be the value that our data-dialog-type attribute has, with (somewhat arbitrarily?) 'drupal_' prepended. The arguments will just be whatever the constructor for the class needs. I often write my class first and then go back to adjust the service definition once I know what it needs. But I'll be a good tour guide and show you things in order, rather than shuttling you backwards and forwards!

Onto that FoundationReveal service class now. I started out with a copy of core's own ModalRenderer which is a simple extension to the DialogRenderer class. Ultimately, that renderer is geared around returning an AJAX command (see the AJAX API documentation), which comes down to specifying a command to invoke in the client-side javascript with some parameters.

I would need my own command, and my FoundationReveal renderer would need to specify it to be used. That only two functional differences were needed in comparison to core's DialogRenderer:

  1. Attach a custom library, which would contain the actual javascript command to be invoked:
$main_content['#attached']['library'][] = 'mymodule/dialog.ajax';
  1. Return an AJAX command class, that will specify that javascript command (rather than the OpenDialogCommand command that DialogRenderer uses) - i.e. adding this to the returned $response:
new OpenFoundationRevealCommand('#mymodule-reveal')

We'll learn about that command class later!

So the renderer file, mymodule/src/Render/MainContent/FoundationReveal.php (in that location in order to match the namespace in the service file definition), looks like this - look out for those two tweaks:

<?php namespace Drupal\mymodule\Render\MainContent; use Drupal\Core\Ajax\AjaxResponse; use Drupal\Core\Render\MainContent\DialogRenderer; use Drupal\Core\Routing\RouteMatchInterface; use Drupal\mymodule\Ajax\OpenFoundationRevealCommand; use Symfony\Component\HttpFoundation\Request; /** * Default main content renderer for foundation reveal requests. */ class FoundationReveal extends DialogRenderer { /** * {@inheritdoc} */ public function renderResponse(array $main_content, Request $request, RouteMatchInterface $route_match) { $response = new AjaxResponse(); // First render the main content, because it might provide a title. $content = drupal_render_root($main_content); // Attach the library necessary for using the OpenFoundationRevealCommand // and set the attachments for this Ajax response. $main_content['#attached']['library'][] = 'core/drupal.dialog.ajax'; $main_content['#attached']['library'][] = 'mymodule/dialog.ajax'; $response->setAttachments($main_content['#attached']); // Determine the title: use the title provided by the main content if any, // otherwise get it from the routing information. $title = isset($main_content['#title']) ? $main_content['#title'] : $this->titleResolver->getTitle($request, $route_match->getRouteObject()); // Determine the dialog options and the target for the OpenDialogCommand. $options = $request->request->get('dialogOptions', []); $response->addCommand(new OpenFoundationRevealCommand('#mymodule-reveal', $title, $content, $options)); return $response; } }

That AJAX command class, OpenFoundationRevealCommand sits in mymodule/src/Ajax/OpenFoundationRevealCommand.php. Its render() method is the key, it returns the command which will map to a javascript function, and the actual HTML under 'data'. Here's the code:

<?php namespace Drupal\mymodule\Ajax; use Drupal\Core\Ajax\OpenDialogCommand; use Drupal\Core\StringTranslation\StringTranslationTrait; /** * Defines an AJAX command to open certain content in a foundation reveal popup. * * @ingroup ajax */ class OpenFoundationRevealCommand extends OpenDialogCommand { use StringTranslationTrait; /** * Implements \Drupal\Core\Ajax\CommandInterface:render(). */ public function render() { return [ 'command' => 'openFoundationReveal', 'selector' => $this->selector, 'settings' => $this->settings, 'data' => $this->getRenderedContent(), 'dialogOptions' => $this->dialogOptions, ]; } /** * {@inheritdoc} */ protected function getRenderedContent() { if (empty($this->dialogOptions['title'])) { $title = ''; } else { $title = '' . $this->dialogOptions['title'] . ''; } $button = 't('Close') . '" type="button">×'; return '' . $title . parent::getRenderedContent() . '' . $button; } }

Now, I've mentioned that the command needs to match a javascript function. That means adding some new javascript to the page, which, in Drupal 8, we do by defining a library. My 'mymodule/dialog.ajax' library was attached in the middle of FoundationReveal above. My library file defines what actual javascript file to include - it is mymodule.libraries.yml and looks like this:

dialog.ajax: version: VERSION js: js/dialog.ajax.js: {} dependencies: - core/drupal.dialog.ajax

Then here's that actual mymodule/js/dialog.ajax.js file. It adds the 'openFoundationReveal' method to the prototype of the globally-accessible Drupal.AjaxCommands. That matches the command name returned by my OpenFoundationRevealCommand::render() method that we saw.

(function ($, Drupal) { Drupal.AjaxCommands.prototype.openFoundationReveal = function (ajax, response, status) { if (!response.selector) { return false; } // An element matching the selector will be added to the page if it does not exist yet. var $dialog = $(response.selector); if (!$dialog.length) { // Foundation expects certain things on a Reveal container. $dialog = $('').appendTo('body'); } if (!ajax.wrapper) { ajax.wrapper = $dialog.attr('id'); } // Get the markup inserted into the page. response.command = 'insert'; response.method = 'html'; ajax.commands.insert(ajax, response, status); // The content is ready, now open the dialog! var popup = new Foundation.Reveal($dialog); popup.open(); }; })(jQuery, Drupal);

There we have it - that last bit of the command opens the Foundation Reveal popup dialog!

I should also add that since I was showing a contact form in the popup, I installed the Contact ajax module. This meant that a site visitor would stay within the popup once they submit the form, which meant for a clean user experience.

Thanks for following along with me!

Pages