Feed aggregator

Roy Scholten: Vetting Drupal product ideas

Planet Drupal - Wed, 17/08/2016 - 23:57

We’ve made big strides since Drupalcon New Orleans in how we add new features to Drupal core. The concept of experimental modules has already helped us introduce features like a new way to add blocks to a page, content moderation and workflow tools and a whole new approach for editing all the things on a page while staying at that page.

In New Orleans we started to define the process for making these kinds of big changes. Probably the most important and defining aspect of it is that we’re (finally!) enabling a clearer separation between vetting ideas first, implementation second.

True to form we specified and detailed the latter part first :-)

So, on to that first part, vetting Drupal product ideas. In my core conversation I outlined the need for making bigger UX changes, faster and suggested possible approaches for how to design and develop those, borrowing heavily from the Lean UX method

Since then, we’ve been reminded that we really do need a clearly defined space to discuss the strategic value of proposed new features. A place to decide if a given idea is desirable and viable as an addition to core.

The point being: core product manager with help from Drupal UX team members wrote up a proposal for how to propose core product ideas and what’s needed to turn a good idea into an actionable plan.

It needs your feedback. Please read and share your thoughts.

Tags: drupaluxprocessdrupalplanetSub title: Agree on why and what before figuring out the how
Categories: Elsewhere

Gunnar Wolf: Talking about the Debian keyring in Investigaciones Nucleares, UNAM

Planet Debian - Wed, 17/08/2016 - 20:47

For the readers of my blog that happen to be in Mexico City, I was invited to give a talk at Instituto de Ciencias Nucleares, Ciudad Universitaria, UNAM.

I will be at Auditorio Marcos Moshinsky, on August 26 starting at 13:00. Auditorio Marcos Moshinsky is where we met for the early (~1996-1997) Mexico Linux User Group meetings. And... Wow. I'm amazed to realize it's been twenty years that I arrived there, young and innocent, the newest of what looked like a sect obsessed with world domination and a penguin fetish.

AttachmentSize llavero_chico.png220.84 KB llavero_orig.png1.64 MB
Categories: Elsewhere

Mediacurrent: DrupalCon NOLA: The People Behind the Usernames

Planet Drupal - Wed, 17/08/2016 - 20:33

As we work every day on our own projects, with our own deadlines and priorities, it is often too easy to forget about the entire community of others using Drupal in much the same way. When we're working with Drupal in our various capacities, there is no shortage of methods to interact with the community and contribute back, but those aren't the focus of this post.

Categories: Elsewhere

myDropWizard.com: Drupal 6 security updates for Panels!

Planet Drupal - Wed, 17/08/2016 - 20:16

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 Critical security releases for the Panels modules for multiple Access Bypass vulnerabilities.

The first vulnerability allows anonymous users to use AJAX callbacks to pull content and configuration from Panels, which allow them to access private data. And the second, allows authenticated users with permission to use the Panels IPE to modify the Panels display for pages that they don't have permission to otherwise edit.

See the security advisory for Drupal 7 for more information.

Here you can download the patch for 6.x-3.x!

If you have a Drupal 6 site using the Panels 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).

Categories: Elsewhere

Rakesh's DSoC 16 blog: Last week - GSoC16 - Detected and Solved Merge Conflicts in Drupal8.

Planet Drupal - Wed, 17/08/2016 - 20:04
Last week - GSoC16 - Detected and Solved Merge Conflicts in Drupal8. rakesh Wed, 08/17/2016 - 23:34
Categories: Elsewhere

Miloš Bovan: The final week of Google Summer of Code 2016

Planet Drupal - Wed, 17/08/2016 - 19:56
The final week of Google Summer of Code 2016

It’s been more than 13 warm weeks since I’ve started to work on my Google Summer of Code 2016 - Mailhandler project. During the past few weeks, I finished the coding and worked on latest improvements related to documentation.

In the past week, the project documentation has been updated which was the last step before merging Github repository and Sandbox project into Mailhandler. Drupal 8 release section was updated and it summarizes the features of D8 version. If you are wondering where you can use the code I developed this summer, feel free to read about real Mailhanlder use-cases.

This week, I am doing the latest cleanups and preparing the project for the final evaluation. It is the second evaluation after I submitted the midterm evaluation. In case you missed the previous posts from Google Summer of Code series, I am providing the project retrospect below.

Project Retrospect

In early February, in an ordinary conversation, a friend of mine told me about this year’s Google Summer of Code program. I got interested in it since I took apart in GHOP (The Google Highly Open Participation Contest; This program was replaced with Google Code-In) during high-school.

In March, I’ve found out that Drupal will be one of the participating organizations and since I did a Drupal internship last year, this seemed to be a perfect opportunity to continue open-source contribution.

Among many interesting project ideas, I decided for “Port Mailhandler to Drupal 8”. Miro Dietiker proposed the project and during the proposal discussions, Primoz Hmeljak joined the mentoring team too.

The great news came in April. I was one of the 11 students chosen to contribute Drupal this summer! First Yay moment!

The project progress could have been followed on this blog, so I’m will not go deeper into it.

3 months of work passed quickly and at this point, I can confirm that I learned a ton of new things. I improved not only my coding skills but communication and project management skills too.

In my opinion, we reached all the goals we put on the paper in April. All the features defined in the proposal were developed, tested and documented.

Google Summer of Code is a great program and I would sincerely recommend all the students to consider participating in it.

Future plans

The future plans about the module are related to its maintenance. Inmail is still under development and it seems it will be ready for an alpha release very soon. In the following days, I am going to create an issue about nice-to-have features of Mailhandler. This issue could serve as a place for Drupal community to discuss the possible ways of the future Mailhandler development.

Thank you note

Last but not least, I would like to give huge thanks to my mentors (Miro Dietiker and Primoz Hmeljak) for being so supportive, helpful and flexible during this summer. Their mentoring helped me in many ways - from the proposal re-definition in April/May, endless code iterations, discussions of different ideas to blog post reviews, including this one :).

I would like to thank my company too for allowing me to contribute Drupal via this program and Google for giving me an opportunity to participate in this great program.



Milos Wed, 08/17/2016 - 19:56 Tags Drupal Google Summer of Code Open source Drupal Planet Add new comment
Categories: Elsewhere

Raphaël Hertzog: Freexian’s report about Debian Long Term Support, July 2016

Planet Debian - Wed, 17/08/2016 - 16:45

Like each month, here comes a report about the work of paid contributors to Debian LTS.

Individual reports

In July, 136.6 work hours have been dispatched among 11 paid contributors. Their reports are available:

  • Antoine Beaupré has been allocated 4 hours again but in the end he put back his 8 pending hours in the pool for the next months.
  • Balint Reczey did 18 hours (out of 7 hours allocated + 2 remaining, thus keeping 2 extra hours for August).
  • Ben Hutchings did 15 hours (out of 14.7 hours allocated + 1 remaining, keeping 0.7 extra hour for August).
  • Brian May did 14.7 hours.
  • Chris Lamb did 14 hours (out of 14.7 hours, thus keeping 0.7 hours for next month).
  • Emilio Pozuelo Monfort did 13 hours (out of 14.7 hours allocated, thus keeping 1.7 hours extra hours for August).
  • Guido Günther did 8 hours.
  • Markus Koschany did 14.7 hours.
  • Ola Lundqvist did 14 hours (out of 14.7 hours assigned, thus keeping 0.7 extra hours for August).
  • Santiago Ruano Rincón did 14 hours (out of 14.7h allocated + 11.25 remaining, the 11.95 extra hours will be put back in the global pool as Santiago is stepping down).
  • Thorsten Alteholz did 14.7 hours.
Evolution of the situation

The number of sponsored hours jumped to 159 hours per month thanks to GitHub joining as our second platinum sponsor (funding 3 days of work per month)! Our funding goal is getting closer but it’s not there yet.

The security tracker currently lists 22 packages with a known CVE and the dla-needed.txt file likewise. That’s a sharp decline compared to last month.

Thanks to our sponsors

New sponsors are in bold.

No comment | Liked this article? Click here. | My blog is Flattr-enabled.

Categories: Elsewhere

Jamie McClelland: Nice Work Apertium

Planet Debian - Wed, 17/08/2016 - 16:07

For the last few years I have been periodically testing out apertium and today I did again and was pleasantly surprised with the quality of the english-spanish and spanish-english translations (and also their nifty web site translator).

So, I dusted off some of my geeky code to make it easier to use and continue testing.

For starters...

sudo apt-get install apertium-en-es xclip coreutils

Then, I added the following to my .muttrc file:

macro pager <F2> "<enter-command>set pipe_decode<enter><pipe-entry> sed '1,/^$/d' | apertium es-en | less<enter><enter-command>unset pipe_decode<enter>" "translate from spanish"

If you press F2 while reading a message in spanish it will print out the English translation.

If you use vim, you can create ~/.vim/plugins/apertium.vim with:

function s:Translate() silent !clear execute "! apertium en-es " . bufname("%") . " | tee >(xclip)" endfunction command Translate :call <SID>Translate()

Then, you can type the command:


And it will display the English to Spanish translation of the file you are editing and copy the translation into your clip board so you can paste it into your document.

Categories: Elsewhere

lakshminp.com: Tagged services in Drupal 8

Planet Drupal - Wed, 17/08/2016 - 16:07

We saw how to write a simple service container in Drupal earlier. We shall build a tagged service now. To illustrate a proper use case for tagged services, let's contrive a scenario where you add a pipeline custom filters to user text before rendering it on the page.

First, clone the code which will be used in this post.

$ git clone git@github.com:drupal8book/process_text.git

Checkout the first version of the code where we take custom text from user, process and display it in a page without using services.

$ cd process_text $ git checkout -f just-filtering

We get custom text from a user using a config form.

class CustomTextSettingForm extends ConfigFormBase { /** * {@inheritdoc} */ protected function getEditableConfigNames() { return [ 'process_text.settings', ]; } /** * {@inheritdoc} */ public function getFormId() { return 'custom_text_setting_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $config = $this->config('process_text.settings'); $form['custom_text'] = [ '#type' => 'textarea', '#title' => $this->t('Custom Text'), '#default_value' => $config->get('custom_text'), ]; return parent::buildForm($form, $form_state); } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { parent::validateForm($form, $form_state); } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { parent::submitForm($form, $form_state); $this->config('process_text.settings') ->set('custom_text', $form_state->getValue('custom_text')) ->save(); $form_state->setRedirect('process_text.show'); } }

We save it as a piece of configuration called process_text.settings.custom_text.

Before rendering this text, let's say you would want to:

  • Remove any <div> tags.
  • Substitute a token [greeting] with <span class"greeting">hello world</span> throughout the text.

We get the text and do all the above processing inside a custom controller.

class ProcessTextController extends ControllerBase { /** * Processtext. * * @return string * Return processed custom text. */ public function processText() { $custom_text = \Drupal::config('process_text.settings')->get('custom_text'); // do processing // remove divs $custom_text = str_replace(["<div>", "</div>"], "", $custom_text); // replace greeting tokens $custom_text = str_replace("[greeting]", '<span class="greeting">hello world</span>', $custom_text); return [ '#type' => 'markup', '#markup' => $custom_text ]; } }

This is good, but we could do better. What if we change the filter applying mechanism? We have to change this code. Instead, let's convert it into a service.

$ cd process_text $ git checkout -f services-first-cut

Our text filter service takes a set of filters and applies them to a given text when we call applyFilters.

class TextFilterService { private $filters = []; /** * @param Filter $filter */ public function addFilter(Filter $filter) { $this->filters[] = $filter; } /** * applies all filters to given text and returns * filtered text. * * @param string $txt * * @return string */ public function applyFilters($txt) { foreach ($this->filters as $filter) { $txt = $filter->apply_filter($txt); } return $txt; } }

We need to crate a services.yml file for the above service.

services: process_text.text_filter: class: Drupal\process_text\TextFilterService

Here's how the processText function text looks now.

public function processText() { $custom_text = \Drupal::config('process_text.settings')->get('custom_text'); // do processing using a service $filter_service = \Drupal::service('process_text.text_filter'); // remove divs $filter_service->addFilter(new RemoveDivs()); // substitute greeting token $filter_service->addFilter(new Greeting()); // apply all the above filters $custom_text = $filter_service->applyFilters($custom_text); return [ '#type' => 'markup', '#markup' => $custom_text ]; }

Now the filter applying mechanism is swappable. We can add write a different functionality and inject that implementation using service containers.

Now, what if we want to add a new filter to this code, like, enclosing the whole text within a <p> tag.

Sure. We could do that.

Let's checkout the specific tag where we add a new filter.

$ cd process_text $ git checkout -f add-new-filter

We build that filter.

class EnclosePTags implements Filter { public function apply_filter($txt) { return '<p>'. $txt . '</p>'; } }

…and add it to the set of filters being applied.

public function processText() { $custom_text = \Drupal::config('process_text.settings')->get('custom_text'); // do processing using a service $filter_service = \Drupal::service('process_text.text_filter'); // remove divs $filter_service->addFilter(new RemoveDivs()); // substitute greeting token $filter_service->addFilter(new Greeting()); // Enclose p tags $filter_service->addFilter(new EnclosePTags()); // apply all the above filters $custom_text = $filter_service->applyFilters($custom_text); return [ '#type' => 'markup', '#markup' => $custom_text ]; }

How about injecting the filter adding mechanism itself? Wouldn't it be cool if we are able to add new filters without changing this part of the code? Not to mention the fact that the code will be more testable than before if we follow this approach. This is exactly what tagged services help us accomplish.

Let's write each filter as a tagged service.

$ cd process_text $ git checkout -f tagged-services

Here's how our process_text.services.yml looks now.

services: process_text.text_filter: class: Drupal\process_text\TextFilterService tags: - { name: service_collector, tag: text_filter, call: addFilter } remove_divs_filter: class: Drupal\process_text\TextFilter\RemoveDivs tags: - { name: text_filter } greeting_filter: class: Drupal\process_text\TextFilter\Greeting tags: - { name: text_filter } enclose_p_filter: class: Drupal\process_text\TextFilter\EnclosePTags tags: - { name: text_filter }

There are many changes here. Firstly, all the filters have been converted to services themselves. The have a common tag called text_filter. The main service also has a few changes. It has a tag called service_collector and a tag parameter call. This ritual of creating a service container and adding a set of tagged services is such a common pattern that Drupal 8 has a special tag to do this, called the service_collector. This tag takes an additional parameter called call which indicates what function has to be called in the service to add all the tagged services.

What happens is, Drupal's TaggedHandlersPass picks up all services with "service_collector" tag, finds services which have the same tag as that of this service(text_filter in our case) and calls the method in call to consume the tagged service definition. If you're coming from Symfony world, this might seem familiar for you. In order to execute some custom code, like applying a set of filters, we implement CompilerPassInterface, which is run whenever the service cotainer(ApplyFilter in our case) is being built. You can find more about CompilerPassInterface here.

Your controller code looks a lot simpler now.

public function processText() { $custom_text = \Drupal::config('process_text.settings')->get('custom_text'); // do processing using a service $filter_service = \Drupal::service('process_text.text_filter'); $custom_text = $filter_service->applyFilters($custom_text); return [ '#type' => 'markup', '#markup' => $custom_text ]; }

Now, all you need to add new filters is to update the service yaml file with the new filter service and tag it with "text_filter" tag.

Tagged services in the wild

Drupal allows developers to add a new authentication mechanism using tagged services. The authentication_collector is defined in core.services.yml.

authentication_collector: class: Drupal\Core\Authentication\AuthenticationCollector tags: - { name: service_collector, tag: authentication_provider, call: addProvider }

To add a new authentication provider, one has to implement the AuthenticationProviderInterface and flesh out the applies and authenticate functions. This will be the subject of another post.

Here's how the addProvider function looks like:

public function addProvider(AuthenticationProviderInterface $provider, $provider_id, $priority = 0, $global = FALSE) { $this->providers[$provider_id] = $provider; $this->providerOrders[$priority][$provider_id] = $provider; // Force the providers to be re-sorted. $this->sortedProviders = NULL; if ($global) { $this->globalProviders[$provider_id] = TRUE; } }

And here's how we would register our hypothetical authentication provider service.

services: authentication.custom_auth: class: Drupal\custom_auth\Authentication\Provider\CustomAuth tags: - { name: authentication_provider }

Another example is the breadcrumb manager service.

breadcrumb: class: Drupal\Core\Breadcrumb\BreadcrumbManager arguments: ['@module_handler'] tags: - { name: service_collector, tag: breadcrumb_builder, call: addBuilder }

To add breadcrumbs from your module, you would need to implement BreadcrumbBuilderInterface and add the following entry to your services.yml,

services: foo.breadcrumb: class: Drupal\foo\MyBreadcrumbBuilder tags: - { name: breadcrumb_builder, priority: 100 }

The BreadcrumbManager::addBuilder collects all breadcrumb bilders and builds it using the BreadcrumbManager::build function.

public function addBuilder(BreadcrumbBuilderInterface $builder, $priority) { $this->builders[$priority][] = $builder; // Force the builders to be re-sorted. $this->sortedBuilders = NULL; } Drupal, Drupal 8, Drupal Planet
Categories: Elsewhere

Lullabot: Making Web Accessibility Great Again: Auditing the US Presidential Candidates Websites for Accessibility

Planet Drupal - Wed, 17/08/2016 - 15:00

Imagine that you arrive at a website, but you cannot see the screen. How do you know what’s there? How do you navigate? This is normal for many people, and the accessibility of your site will make or break their experience. Accessibility is about including everyone. People with physical and cognitive disabilities have specific challenges online—and making your site accessible removes those barriers and opens the door to more users.

Severely disabled Americans constitute a population of 38.3 million people, and make up a huge swath of voters (see the #CripTheVote movement on Twitter). Some notable U.S. presidential elections have been decided by much less, and because of this, we’re auditing the US presidential election candidates’ websites.

During this audit, we’ll see what the candidates’ websites are doing right and wrong, and where the low-hanging fruit lies. This article won’t be a full top-to-bottom audit, but we will show some of the important things to look for and explain why they’re important.

Our Methods Automated Testing

The first step in our a11y audit is to do a quick automated check. If you’re new to accessibility, the WAVE tool by WebAIM is a great place to start. It’ll check for standard accessibility features and errors in alt attributes, contrast, document outline, and form labels. For the features or errors it finds, it provides an info icon that you can click to learn what the issue is, why it’s important, and how to do it right. WAVE is free, and highlights both negative (errors, alerts, features, structural elements, ARIA attributes, contrast), and positive (features, structural elements, ARIA attributes).

Keyboard Testing

As great as WAVE is, an automated tool is never as good as a live person. This is because some accessibility requirements need human logic to apply them properly. For the next part, we’re going to navigate around each website using only the keyboard.

This is done by using the tab button to move to the next element, and shift-tab to move backwards. The spacebar (or return) is used to click or submit a form element. If everything is done right, a person will be able to navigate through your website without falling into tab rabbit-holes (tabbit-holes?). We should be able to tab through the whole page in a logical order without getting stuck or finding things that we can’t access or interact with.

Beyond that, we need to be able to see where the focus lies as we tab across the page. Just as interactive elements give a visual cue on hover, we should get an indication when we land on an interactive element while tabbing, too. That state is referred to as ‘having focus’. You can extend your hover state to focus, or you can make a whole new interaction for focus. It’s up to you!

.link--cta-button:hover, .link--cta-button:focus { /* The :focus pseudo-class for a11y */ background: #2284c0; } Screen Reader Audit

Screen readers are used by visually impaired and blind people to navigate websites. For this purpose we’ll use VoiceOver, which is the default pre-installed screen reader for OS X. We’re looking for things that read oddly (like an acronym), things that don’t get read that should get read (and vice-versa), and making sure all of the information is available.

Let’s start with Donald Trump’s website

The first thing that we did while looking at Donald Trump’s website was audit it using the WAVE tool. Here’s what we found:

  • 8 Errors
  • 14 Alerts
  • 15 Features
  • 35 Structural Elements
  • 5 HTML5 and ARIA
  • 5 Contrast Errors (2 were false flags)
The Good Bold Colors for a Bold Candidate

The color scheme is very accessible. On the front page, there were only two places where the contrast wasn’t sufficient. Outside of that, his color scheme provides text that stands out well from the background and is easy to read for low-vision users.

The Bad Lacking Focus

Remember how we talked about focus states? This site has almost none. Tabbing through the page is confusing because there are no visual indications of where you are.

This is especially egregious because the browser automatically applies focus states to focusable elements for you. In order for there not to be focus elements at all, the developer has to actively go out of their way to break them by applying outline: 0; to the element’s focus state. This is okay if you’re doing it to replace the focus state with something more decorative, but taking it off and not replacing it is a big accessibility no-no.

Skipped Skip Link

When tabbing through The Donald’s website, the first thing we notice is the absence of a skip link. Without a skip link, a keyboard user is forced to tab through each link in the navigation when arriving at each page before they can access the rest of the content. This repetitive task can become aggravating quickly, especially on sites with a lot of navigation links.

Unclear Link Text

Links should always have text that clearly explains where the user is going. The link’s text is what a person using a screen reader will hear, so text like ‘Read More’ or text and icons that require visual context to understand their destination aren’t ideal.

In this area, the link text that goes out to the linked Twitter posts read ‘12h’ and ‘13h’. Without the visual context of a Twitter icon (that’s a background image, so there’s no alternative text to provide that), the user probably has no idea what ‘12h’ is referring to or where that link will lead.

The Ugly Navigation Nightmares

The most important part of any website, in terms of access, is the navigation. An inaccessible navigation menu can block access to large portions of the website. Unfortunately, the navigation system of Trump’s website does just that, and prevents users with disabilities from directly accessing the sub-navigation items under the issues and media sections.

A more accessible way to do this is to use a click dropdown instead of a :hover. If that doesn’t work for the design, make sure that the :hover state of the menu applies to :focus as well, so that the menu will open the nested links when the parent menu item is tabbed to.

Disorganized Structure

Structural elements (h1, h2, h3, etc tags) are very helpful when used properly. In this case, they’re definitely not. Heading levels aren’t sequential, and nested information isn’t always relevant to its parent.

Audit of Hillary Clinton’s website The Good

Overall, Clinton’s website is better than most when it comes to accessibility. It’s that clear that her development team made it a purposeful consideration during the development process. While it’s not perfect, there was a lot of good done here. Let’s explore some examples of things done right.

Keyboard Accessibility

The keyboard accessibility on this site is very good. We found that we could access the elements and navigate to other pages easily without a mouse. It was easy to open and shut the drop-down ‘More’ area in the navigation, and access its nested links, which is a good example of how to implement what we were talking about when we covered the shortfalls of the navigation system on Trump’s website.

Skip Link

Hillary Clinton’s website includes a proper skip link, which allows users to skip the navigation and go directly to the content.

Great Focus States

The other thing we found when checking the keyboard accessibility was that everything has a focus state that makes it visually obvious where you are on the page. The light dotted border focus state is a bit subtle for low-vision users, but the fact that the focus state of the elements was styled independently from the hover state shows that the developer was aware of the need for focus indicators and made a conscious effort to implement them.


We usually think of accessibility in terms of people with disabilities because they often benefit from it the most, but accessibility is really just about including as many people as possible. A nice touch we found on Clinton’s site was a button at the top to translate the site into Spanish. With 41 million native Spanish speakers in the US, providing the option to experience the content in the user’s first language is a great accessibility move.

Video Captioning

Deaf people rely on captions to get the dialogue from videos, since it’s very difficult to lip-read in film. The videos on Hillary’s site are furnished with open captions, which means that they’re always on. Open captions are great for people with disabilities, but they’re also a smart move to capture your non-disabled audience as well. Often autoplay videos won’t play any sound unless they’re interacted with, but providing open captions on the video gives you another chance to capture the audience’s interest by displaying the words on the screen.

The Bad No Transcripts for Video

While it was great that the videos were captioned, we couldn’t find a transcript provided. Many people erroneously believe that you only need one or the other, but captions and transcripts actually serve different purposes, so it’s ideal to provide both. Captions are great for the Deaf, who want to read the words in real-time with the video. Transcripts are more useful for the blind and the Deaf-blind, who benefit from a written summary of what’s visually happening onscreen in each scene before the written dialogue begins. A braille terminal, used by the Deaf-blind, can’t convert open captions inlaid into the video’s frames into braille for its users, so these users won’t benefit from that.

Low Contrast

Contrast is important for low-vision users. We know that subtlety is all the rage, but design choices like putting blue text on a blue background makes it really difficult for some people to read. There are some great free tools like Das Plankton that will let you see if your contrast level is high enough to meet accessibility standards.

Schemes like this fail contrast testing on every level, so it’s best to avoid them. A better choice probably would have been white over a slightly darker blue.

The Ugly The Horrible Modal

Despite the obvious hard work that went into making Hillary’s website accessible, much of the effort is lost due to a modal that appears when visiting the website for the first time (or in incognito mode). The problem is that the modal doesn’t receive focus when it pops up, and its close button has no focus indicator. While it technically can be closed via keyboard by navigating backwards (or tabbing through every single link on the page) once it pops up, it’s not obvious visually when that close button has focus, and navigating backwards isn’t exactly intuitive.


With one glaring exception, it’s obvious that lots of thought and work had been put into making Hillary Clinton’s website accessible to voters with disabilities. There is definitely room for improvement with small things like somewhat irrelevant alternative attributes on photos, but on the whole the site is better on accessibility than the vast majority of the sites that we see.

Unfortunately, it is also obvious that accessibility is deeply neglected within Donald Trump’s website, which leaves a large swath of potential voters unable to browse to his stance on issues and other content. Hopefully, this will be attended to shortly.

Hopefully these auditing case studies lead you to think about your own website from the point of view of a person with a disability. There are plenty of challenges online for the disability community, but lots of those can be fixed with a few easy tweaks like the ones we covered here. We hope you'll use what you've learned to make your website accessible, too.

Categories: Elsewhere

Anexus: How to use ES6 in Drupal 8

Planet Drupal - Wed, 17/08/2016 - 12:58
How to use ES6 in Drupal 8

I bet many of you doesn't understand what is ES6, being honest I didn't know this term until a few days ago. 

ES6 stands for ECMAScript v6 or ES2015, but in simple words, is just Javascript; Correct Javascript as simple as that.

So, ES6 one of the latest version of Javascript specification, but is not supported by all browsers, because was released in June 2015, even worst in June 2016 we got ES7 and as you can imagine not supported yet.

Right now all browsers support ES5, then, if it's not compatible with all browsers, why ES6+ is a big thing? Because, now Javascript is more OOP, using classes, constants, and modules, enabling to create more complex and organized projects.

So, how we could use ES6 in our web projects like Drupal, to avoid to have a particular version of our site based on our client's browser? The solution is Babel

Babel transforms your code to ES5 to be used in your web applications. 

Babel works using plugins that allow the transformation and enable to use a particular plugin based on the source of your code like React that requires an especial plugin to do the conversion.

Let me show an example that creates a simple ReactJS.

1. Install Node.js

The first thing we need to do is install Node.js in your system, the easy way to do that is downloading the proper installer for our platform from https://nodejs.org/en/download

We need to install Node.js because we are going to use the NPM which is a package manager for javascript libraries 

2.  Modify gitignore file

Drupal 8 projects include their own .gitignore file, but because we are about to include npm in our development process, we need to add some extra rules listed below:

# Node.js # Logs logs *.log npm-debug.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # node-waf configuration .lock-wscript # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules jspm_packages # Optional npm cache directory .npm # Optional REPL history .node_repl_history
3. Create a package.json file

To be able to distribute later your javascript library you need to create a package.json file, you create that file in interactive mode using the command:

$ npm init

In the end, you will get a file similar to the following file.

{   "name": "drupalreactform",   "version": "1.0.0",   "description": "ReactJS form to be embed in Drupal 8 Controller",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   }   "author": "enzo - Eduardo Garcia",   "license": "ISC" } 4. Install Webpack

To expose our library in Drupal we need to create a distribution package, for that purpose, we will use [Webpack](webpack.github.io) that is a module bundler which takes modules with dependencies to generates static assets by bundling them together.

$ npm install webpack --save

The command about will install webpack with all required libraries and modify our package.json, in the same way that we use in Composer the composer.json file.

5. Configuring Webpack & creating bundle

It's necessary to inform to Webpack using file webpack.config.js, how we can to create our bundle to be used Drupal, the following configuration assumes we have a custom module located in web/modules/custom/mysearch.

var webpack = require('webpack'); var path = require('path'); var MODULE_BUILD_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js'); var MODULE_APP_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js/es6'); var config = {   entry: MODULE_APP_DIR + '/mysearch.form.jsx',   output: {     path: MODULE_BUILD_DIR,     filename: 'mysearch.form.js'   } }; module.exports = config;

With the configuration above, we are saying we will load the file mysearch.form.jsx and all included files in mysearch.form.js file

If you write something simple like

console.log('Hello ES6!');

You don't need any special transformation and you can create the bundle, for that propose you need to execute the following command:

$ ./node_modules/.bin/webpack -d

You will get an output similar to this image:

The generation will work correctly because the source in ES5 and the output too; So, no transformation was required.

6. Testing transformation

I know I said we would embed the file generated in Drupal, but in a development process is faster if we could test first outside Drupal, for that, we could create a file named test/es62es5/index.htm inside module directory  with the following content.

          Testing transformation ES6 -> ES5              

Opening that file in our browser would enable any possible error and reduce the change to blame Drupal 8 for a malfunction in our code.

7. Use Babel to transform ES6

Now we need to install Babel and Babel loaders to be able to transform our ReactJS form into ES5; the next command installs the required packages.

$ npm install babel-loader babel-preset-es2015 babel-preset-react --save

Also, we need to create a .babelrc file, to inform to Babel what presents will be used in transformation, check and example of that file below:

{   "presets" : ["es2015", "react"] }

Finally, we need to modify out webpack configuration to report what loader we are going to use in our transformation, the new aspect of webpack.config.js will be like this:

var webpack = require('webpack'); var path = require('path'); var MODULE_BUILD_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js'); var MODULE_APP_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js/es6'); var config = {     entry: MODULE_APP_DIR + '/mysearch.form.jsx',     output: {         path: MODULE_BUILD_DIR,         filename: 'mysearch.form.js'     },     module : {         loaders : [             {                 test : /\.jsx?/,                 include : MODULE_APP_DIR,                 loader : 'babel'             }         ]     } }; 8. Create React form

Before to create the form we need to install some libraries to build our form.

$ npm install react react-dom antd --save

If we plan to embed CSS or LESS files in our app, need to install loaders for that using the following instructions, and register the loader in webpack

$ npm install css-loader less less-loader style-loader  --save-dev

The code of our form will be an example form React created in a previous blog post:

import React, { PropTypes } from 'react'; var Search = React.createClass({     render: function(){         return (             React.createElement('form', {onSubmit: this.onSubmit, className: 'SearchForm', noValidate: true},                 React.createElement('input', {                     type: 'text',                     placeholder: 'Search'                 }),                 React.createElement("select", { placeholder: 'Category', value: '', onChange: this.changeHandler },                     React.createElement("option", { value: 1 }, "Software"),                     React.createElement("option", { value: 2 }, "Movie")                 ),                 React.createElement('button', {type: 'submit'}, "Go")             )         );     }, }); ReactDOM.render(React.createElement(Search),  document.getElementById("app"));

Of course, you can create a more advanced form, importing other libraries.

9. Include form in a Drupal controller

After "compile" our form in one file, the remaining step is to include it in a Drupal Controller, to do that you just need to follow the blog entry www.anexusit.com/blog/how-to-load-js-and-css-libraries-a-drupal-8-controller.

I hope did you find this blog entry useful.

enzo Wed, 08/17/2016 - 04:58
Categories: Elsewhere

Rapha&#235;l Hertzog: My Free Software Activities in July 2016

Planet Debian - Wed, 17/08/2016 - 12:53

My monthly report covers a large part of what I have been doing in the free software world. I write it for my donators (thanks to them!) but also for the wider Debian community because it can give ideas to newcomers and it’s one of the best ways to find volunteers to work with me on projects that matter to me.

DebConf 16

I was in South Africa for the whole week of DebConf 16 and gave 3 talks/BoF. You can find the slides and the videos in the links of their corresponding page:

I was a bit nervous about the third BoF (on using Debian money to fund Debian projects) but discussed with many persons during the week and it looks like the project evolved quite a bit in the last 10 years and while it’s still a sensitive topic (and rightfully so given the possible impacts) people are willing to discuss the issues and to experiment. You can have a look at the gobby notes that resulted from the live discussion.

I spent most of the time discussing with people and I did not do much technical work besides trying (and failing) to fix accessibility issues with tracker.debian.org (help from knowledgeable people is welcome, see #830213).

Debian Packaging

I uploaded a new version of zim to fix a reproducibility issue (and forwarded the patch upstream).

I uploaded Django 1.8.14 to jessie-backports and had to fix a failing test (pull request).

I uploaded python-django-jsonfield 1.0.1 a new upstream version integrating the patches I prepared in June.

I managed the (small) ftplib library transition. I prepared the new version in experimental, ensured reverse build dependencies do still build and coordinated the transition with the release team. This was all triggered by a reproducible build bug that I got and that made me look at the package… last time upstream had disappeared (upstream URL was even gone) but it looks like he became active again and he pushed a new release.

I filed wishlist bug #832053 to request a new deblog command in devscripts. It should make it easier to display current and former build logs.

Kali related Debian work

I worked on many issues that were affecting Kali (and Debian Testing) users:

  • I made an open-vm-tools NMU to get the package back into testing.
  • I filed #830795 on nautilus and #831737 on pbnj to forward Kali bugs to Debian.
  • I wrote a fontconfig patch to make it ignore .dpkg-tmp files. I also forwarded that patch upstream and filed a related bug in gnome-settings-daemon which is actually causing the problem by running fc-cache at the wrong times.
  • I started a discussion to see how we could fix the synaptics touchpad problem in GNOME 3.20. In the end, we have a new version of xserver-xorg-input-all which only depends on xserver-xorg-input-libinput and not on xserver-xorg-input-synaptics (no longer supported by GNOME). This is after upstream refused to reintroduce synaptics support.
  • I filed #831730 on desktop-base because KDE’s plasma-desktop is no longer using the Debian background by default. I had to seek upstream help to find out a possible solution (deployed in Kali only for now).
  • I filed #832503 because the way dpkg and APT manages foo:any dependencies when foo is not marked “Multi-Arch: allowed” is counter-productive… I discovered this while trying to use a firefox-esr:any dependency. And I filed #832501 to get the desired “Multi-Arch: allowed” marker on firefox-esr.

See you next month for a new summary of my activities.

No comment | Liked this article? Click here. | My blog is Flattr-enabled.

Categories: Elsewhere

Michal &#268;iha&#345;: Weekly phpMyAdmin contributions 2016-W32

Planet Debian - Wed, 17/08/2016 - 12:00

Tonight phpMyAdmin,, and 4.6.4 were released and you can probably see that there are quite some security issues fixed. Most of them are not really exploitable unless your PHP and webserver are poorly configured, but still it's good idea to upgrade.

If you are running Debian unstable, use our phpMyAdmin PPA for Ubuntu or use phpMyAdmin Docker image upgrading should be as simple as pulling new version.

Besides fixing security issues, we're generally hardening our infrastructure. I'm really grateful that Emanuel Bronshtein (@e3amn2l) is doing great review of all of our code and helps us in this area. This will really make our code and infrastructure much better.

Handled issues:

Filed under: Debian English phpMyAdmin | 0 comments

Categories: Elsewhere

Liip: Drupalaton 2016

Planet Drupal - Wed, 17/08/2016 - 11:13

Last week Drupalaton 2016 took place. With about 150 registrations this was the largest Drupalaton so far. The organizers did an amazing job in coping with this mass. There were two session threads and a sprint room. Of the many interesting presentations I would like to mention Fabian Bircher’s “Configuration Management: theory and practice” (a must for everyone who gets lost while trying to work in a team on a Drupal8 project) , Pieter Frenssen’s “Working with REST APIs”  (it was good to see how simple it is in Drupal8) and “Drupal 8 Media” from Pónya Péter, Szanyi Tamás and Rubén Teijeiro (seems we have a huge step forward in media handling since Drupal7!). I held a session on caching in Drupal 8 which was the shortened version the one I did on Drupal Developer Days in Milan.

Liip was a silver sponsor of the event.

Finally, some pictures on the Friday ship cruise. Thanks to Brainsum for sponsoring it!

Categories: Elsewhere

Michal &#268;iha&#345;: Revoking old PGP key

Planet Debian - Wed, 17/08/2016 - 10:00

It has been already six years since I've moved to using RSA4096 PGP key. For various reasons, the old DSA key was still kept valid till today. This is no longer true and it has been revoked now.

The revoked key is DC3552E836E75604 and new one is 9C27B31342B7511D. In case you've signed the old one and not the new one (quite unlikely if you did not sign it more than six years ago), there has been migration document, where you can verify my new key being signed by the old one.

Filed under: Debian English | 0 comments

Categories: Elsewhere

Charles Plessy: Who finished DEP 5?

Planet Debian - Wed, 17/08/2016 - 06:08

Many people worked on finishing DEP 5. I think that the blog of Lars does not show enough how collective the effort was.

Looking in the specification's text, one finds:

The following alphabetical list is incomplete; please suggest missing people: Russ Allbery, Ben Finney, Sam Hocevar, Steve Langasek, Charles Plessy, Noah Slater, Jonas Smedegaard, Lars Wirzenius.

The Policy's changelog mentions:

* Include the new (optional) copyright format that was drafted as DEP-5. This is not yet a final version; that's expected to come in the release. Thanks to all the DEP-5 contributors and to Lars Wirzenius and Charles Plessy for the integration into the Policy package. (Closes: #609160) -- Russ Allbery <rra@debian.org> Wed, 06 Apr 2011 22:48:55 -0700


debian-policy ( unstable; urgency=low [ Russ Allbery ] * Update the copyright format document to the version of DEP-5 from the DEP web site and apply additional changes from subsequent discussion in debian-devel and debian-project. Revise for clarity, to add more examples, and to update the GFDL license versions. Thanks, Steve Langasek, Charles Plessy, Justin B Rye, and Jonathan Nieder. (Closes: #658209, #648387)

On my side, I am very grateful to Bill Alombert for having committed the document in the Git repository, which ended the debates.

Categories: Elsewhere

Sean Whitton: Tucson monsoon rains

Planet Debian - Wed, 17/08/2016 - 05:28

When it rains in Tucson, people are able to take an unusually carefree attitude towards it. Although the storm is dramatic, and the amount of water means that the streets turn to rivers, everyone knows that it will be over in a few hours and the heat will return (and indeed, that’s why drain provision is so paltry).

In other words, despite the arresting thunderclaps, the weather is not threatening. By contrast, when there is a storm in Britain, one feels a faint primordial fear that one won’t be able to find shelter after the storm, in the cold and sodden woods and fields. Here, that threat just isn’t present. I think that’s what makes us feel so free to move around in the rain.

I rode my bike back from the gym in my $5 plastic shoes. The rain hitting my body was cold, but the water splashing up my legs and feet was warm thanks of the surface of the road—except for one area where the road was steep enough that the running water had already taken away all lingering heat.

Categories: Elsewhere

DrupalCon News: Build your DrupalCon agenda: the session and BOF schedule is live

Planet Drupal - Wed, 17/08/2016 - 05:00

DrupalCon starts in just 40 days. But you can plan your schedule today. There'll be more than 140 sessions, three keynotes, and one unforgettable pre-note.

Categories: Elsewhere

Ben Hutchings: Debian LTS work, July 2016

Planet Debian - Wed, 17/08/2016 - 02:12

I was assigned another 14.7 hours of work by Freexian's Debian LTS initiative and carried over 1 from last month. I worked a total of 15 hours, carrying over a fraction of an hour.

I spent another week in the Front Desk role and triaged various new CVEs for wheezy.

I spent the remainder of the time working on the next Linux stable updates (3.2.82 and Debian 3.2.81-2), but didn't release them - that will be done in the next few days.

Categories: Elsewhere


Subscribe to jfhovinne aggregator