Planet Drupal

Syndicate content - aggregated feeds in category Planet Drupal
Updated: 33 min 33 sec ago

Phase2: Redis Sessions for and Service Decorators in Drupal 8

Tue, 05/16/2017 - 16:44
h2 dir=ltrstrongGoal: Getting PHP Sessions into Redis/strong/h2 p dir=ltrOne of several performance-related goals for was to get the production database to a read-only state. This included moving cache, the Dependency Injection container, and the key-value database table to Redis.  99% of all sessions were for logged-in users, which use a separate, internal instance of Drupal; but there are edge cases where anonymous users can still trigger a PHP session that gets saved to the database./p p dir=ltrspanFor all it’s cool /spanintegrationsspan with Symfony and its attempts at making everything pluggable or extendable, PHP session handling in Drupal 8 is still somewhat lacking. Drupal 8 core extends Symfony’s session handling in a way that makes a lot of assumptions, including one that developers won’t want to use any other native session handler, such as the file system or a key/value store like Redis or Memcached./span/p h3 dir=ltrSession Handlers in Symfony and Drupal/h3 p dir=ltra href= has some native session handling/a that’s baked in, and for basic PHP applications in simple environments, this is fine. Generally speaking, it works by storing session data in files in a temporary location on the host machine and setting a cookie header so that subsequent HTTP requests can reference the same session. However, since the default behavior doesn’t scale for everyone or meet every project’s needs, PHP offers the ability to easily swap out native session handlers. One can even create a user-defined session handler, thanks to PHP 5’s SessionHandler class./p p dir=ltrThe SessionHandler class defines some basic methods to allow a developer to create, destroy, and write session data. This class can be extended, and then span class=geshifiltercode class=php geshifilter-phpini_set('session.save_handler', TYPE)/code/span (where “TYPE” can be any of the known save handers, such as “file” or “pdo”) and span class=geshifiltercode class=php geshifilter-phpini_set('session.save_handler', PATH)/code/span (where “PATH” can be any writeable file system path or stream) can be used to tell PHP to use this extended class for handling sessions. In essence, this is what Symfony does, by extending this into a collection of NativeSessionHandler classes. This allows Symfony developers to easily choose PDO, file, or even memcached session storage by defining session handler methods for each storage mechanism./p p dir=ltrSymfony-based applications can normally just choose which PHP session handling is desired through simple configuration. This is well-documented at a href= Session Management/a and a href= Sessions and Save Handlers/a. It’s even possible to create custom session handlers by extending the NativeSessionHandler, and using ini_set() inside the class’ constructor. There is no default Redis session handler in Symfony, but there are plenty of examples out there on the Internet, such as a href= p dir=ltrDrupal 8 extends this even further with its own SessionManager class. This SessionManager class is a custom NativeSessionHandler (PHP allows “user” as one of the session.save_handler types). As part of the SessionManager class, several optimizations have been carried over from Drupal 7, including session migration and a few other things to prevent anonymous users from saving an empty session to the database. Because of these optimizations, however, we don’t want to simply ignore this class; however, the NativeSessionHandler service has the database connection injected into it as a dependency. This means future attempts to simply extend Drupal’s NativeSessionHandler service class will result in vestigial dependency injection./p h2 dir=ltrImplementation/h2 p dir=ltrNow that we understand a little more about the underpinnings of session handling in PHP, Symfony, and Drupal 8, I needed to determine how to tell Drupal to use Redis for full session management. Several important goals included:/p ulli dir=ltr p dir=ltrKeep all of Drupal 7 and 8’s optimizations made to session handling (which originated in Pressflow)./p /li li dir=ltr p dir=ltrDon’t patch anything; leave Drupal core as intact as possible, but not rely on the core behavior of using the database for session storage./p /li li dir=ltr p dir=ltrLeverage the Redis module for connection configuration and API./p /li /ulh3 dir=ltrJust Override the Core Session Service?/h3 p dir=ltrOne option that was considered was to simply override the Drupal core service. In the session_manager service is defined as using the Drupal\Core\Session\SessionManager class. In theory, a simple way to change Drupal’s database-oriented session handling would be to just replace the class. In this way, we would simply pretend the SessionManager class didn’t exist, and we would be able to use our CustomRedisSessionManager class, which we would write from scratch./p p dir=ltrHowever, there are a few flaws in this plan:/p ulli dir=ltr p dir=ltrWe would have to reimplement all session handler methods, even if nothing differed from Drupal’s core class methods, such as session_destroy()./p /li li dir=ltr p dir=ltrIf Drupal core changed to include new or modified session handling, we would likely have to reimplement these changes in our custom code. Being off of the upgrade path or not being included in any future security fixes would be a Bad Thing™./p /li /ulp dir=ltrFor more information about the proper way to override a code service in Drupal 8, see a href= h3 dir=ltrEnter: Service Decoration/h3 p dir=ltrFor the purpose of this blog post, I will briefly introduce service decorators; but for a more general, in-depth look, a good resource to learn about Service Decorators is Mike Potter’s blog post, a href= Symfony Service Decorators in Drupal 8/a. This is what I used as the basis for my decision to decorate the existing core session_handler service rather than overriding it or extending it./p h4 dir=ltrWhat is a Service Decorator?/h4 p dir=ltrService decoration is a common pattern in OOP that lets developers separate the modification of a service or class from the thing they’re modifying. In a simple way, we can think of a service decorator as a diff to an existing class. It’s a way to say, “hey, still use that other service, but filter my changes on top of it.”/p h4 dir=ltrDecorating the Session Manager Service/h4 p dir=ltrSymfony paves the way for services in Drupal 8, and carries with it several other design patterns, including service decorators. To decorate an existing service, you simply define a new service, and use the `decorates` key in your `MODULE.service.yml` file./p p dir=ltrFor the Redis Sessions module, here is `redis_sessions.service.yml`:/p pre div class=geshifilterpre class=yaml geshifilter-yamlolli class=li1div class=de1services:/div/lili class=li1div class=de1 # Decorate the core session_manager service to use our extended class./div/lili class=li1div class=de1 redis_sessions.session_manager:/div/lili class=li1div class=de1 class: Drupal\redis_sessions\RedisSessionsSessionManager/div/lili class=li1div class=de1 decorates: session_manager/div/lili class=li1div class=de1 decoration_priority: -10/div/lili class=li1div class=de1 arguments: ['@redis_sessions.session_manager.inner',/div/lili class=li1div class=de1'@request_stack', '@database', '@session_manager.metadata_bag',/div/lili class=li1div class=de1'@session_configuration', '@session_handler']/div/li/ol/pre/div /prep dir=ltrThe `decorates` key tells Symfony and Drupal that we don’t want use this as a separate service; instead, continue to use the core session_manager service, and decorate it with our own class. The `decoration_priority` simply adds weight (or negative weight, in this case) to tell Drupal to use our service above other services that also might try and decorate or override the session_manager class./p p dir=ltrThe `arguments` key injects the same dependencies as well as the original session_manager service as a sort of top-level argument. In this way, we can still use the session_manager as the service that handles PHP sessions, and it will have all of its necessary dependencies injected into it directly by our service class. This will also inject that service into our class in case we need to reference any session_manager methods, and treat them as a _parent class method./p p dir=ltrFor the same module, here is the `RedisSessionsSessionManager.php` class constructor:/p pre div class=geshifilterpre class=php geshifilter-phpolli class=li1div class=de1public function __construct(SessionManager $session_manager,/div/lili class=li1div class=de1RequestStack $request_stack, Connection $connection, MetadataBag/div/lili class=li1div class=de1$metadata_bag, SessionConfigurationInterface $session_configuration,/div/lili class=li1div class=de1$handler = NULL) {/div/lili class=li1div class=de1 $this-innerService = $session_manager;/div/lili class=li1div class=de1 parent::__construct($request_stack, $connection, $metadata_bag,/div/lili class=li1div class=de1 $session_configuration, $handler);/div/lili class=li1div class=de1 /div/lili class=li1div class=de1 $save_path = $this-getSavePath();/div/lili class=li1div class=de1 if (ClientFactory::hasClient()) {/div/lili class=li1div class=de1 if (!empty($save_path)) {/div/lili class=li1div class=de1 ini_set('session.save_path', $save_path);/div/lili class=li1div class=de1 ini_set('session.save_handler', 'redis');/div/lili class=li1div class=de1 $this-redis = ClientFactory::getClient();/div/lili class=li1div class=de1 }/div/lili class=li1div class=de1 else {/div/lili class=li1div class=de1 throw new \Exception(Redis Sessions has not been configured. See/div/lili class=li1div class=de1'CONFIGURATION' in in the redis_sessions module for instructions.);/div/lili class=li1div class=de1 }/div/lili class=li1div class=de1 }/div/lili class=li1div class=de1else {/div/lili class=li1div class=de1 throw new \Exception(Redis client is not found. Is Redis module/div/lili class=li1div class=de1enabled and configured?);/div/lili class=li1div class=de1 }/div/lili class=li1div class=de1}/div/li/ol/pre/div /prep dir=ltrIn RedisSessionsSessionManager.php, we define the `RedisSessionsSessionManager` class, which will decoration Drupal core’s `SessionManager` class. Two things to note in our constructor is that:/p olli dir=ltr p dir=ltrWe set span class=geshifiltercode class=php geshifilter-php$this-innerService = $session_manager;/code/span to be able to reference the core session_manager service as an inner service./p /li li dir=ltr p dir=ltrWe check that the module has the necessary connection configuration to a Redis instance, and if so, we’ll use ini_set to tell PHP to use our Redis-based `session.save_path` and `session.save_handler` settings./p /li /olh2Everything Else is Simple/h2 p dir=ltrIn our RedisSessionsSessionManager class, there’s just a few things we want to change from the core SessionManager class. Namely, these will be some Drupal-specific optimizations to keep anonymous users from creating PHP sessions that will be written to Redis (originally, the database), and session migration for users that have successfully logged in (and may have some valuable session data worth keeping)./p p dir=ltrWe also have to some extra things to make using Redis as a session handler easier. There are a few new methods that Redis Sessions will use to make looking up session data easier. Since Redis is essentially just a memory-based key-value store, we can’t easily look up session data by a Drupal user’s ID. Well, we can, but it’s an expensive operation, and that would negate the performance benefits of storing session data in Redis instead of the database./p p dir=ltrWith these custom methods aside, everything else just relies on PHP’s native session handling. We’ve told PHP to use the base Redis PHP class as the handler, which is just part of having Redis support compiled in PHP. We’ve told PHP where to save the session data; in this case, a TCP stream to our redis instance configured for the Redis module./p h2 dir=ltrBonus/h2 p dir=ltrAs of the writing of this blog post, I’ve begun the process of releasing Redis Sessions as a submodule of the a href= module/a. This can help serve as both a practical example of creating a service decorator as well as helping high-traffic sites that also wish to serve content from a read-only database. For those that would like to help test the module, here is the a href= to add Redis Sessions submodule to the Redis module/a./p p dir=ltrWant to read more about Drupal 8 architecture solutions and how to evaluate each solution based on your business objectives? Download our a href= here/a. /p p dir=ltr /p

Phase2: DrupalCon 2017: Reviewing the Impact

Tue, 05/16/2017 - 16:44
p dir=ltra href= 2017/a may be over, but we’re still feeling the impact. Last week 20+ Phase2 team members and over 3,000 sponsors, attendees, and speakers converged on Baltimore for 5 days of Drupal./p pIn case you weren’t able to join us in person, here is a recap:/p p /p pstrongImpact At The Phase2 Booth/strong/p pAt this year’s conference, we focused on highlighting the impact digital technology, and specifically Drupal, has and can have on the world around us. We also drew attention to the fact that technology would be nothing without the incredible vision and talent of the people who fuel it./p pPhase2’s booth was designed to showcase our event theme: “Vision + Technology: The Impact Is Infinite.”/p p dir=ltrimg alt=Large sign that says impact in the Phase2 booth data-entity-type=file data-entity-uuid=8953d448-454f-4126-84b6-20e870a4657b src= //p pWe believe, and are energized by the fact, that digital technology allows one person to reach billions, with the simple stroke of a key./p pAnd we know that the impact doesn’t end there.../p p dir=ltrWhen a vision is combined with technology, we have the power to set something into motion, the outcome of which is not entirely known. Actions build upon one another and inspire reactions, putting transformation entirely within reach - the impact of which is infinite./p pWe took our impact message and created a one-of-a-kind, interactive voting installation in the Phase2 booth. The voting station empowered DrupalCon attendees to come together and offer  their input by voting on important community issues./p p dir=ltrimg alt=DrupalCon attendees vote on community issues in the Phase2 booth data-entity-type=file data-entity-uuid=92151ba3-d0e5-4182-8533-54be62f19c79 src= //p p dir=ltrDrupalCon attendees voted by completing the following sentences:/p ulli dir=ltr p dir=ltrI want to live in a word where ______ doesn’t need an initiative, it’s just a given./p /li li dir=ltr p dir=ltrWith _________, anything is impossible./p /li li dir=ltr p dir=ltrThe impact of _______ is endless./p /li li dir=ltr p dir=ltrIf we focused more on ________ what we can achieve is infinite./p /li /ulp dir=ltrWith the words:/p ulli dir=ltr p dir=ltrPrivacy Security/p /li li dir=ltr p dir=ltrAccessibility/p /li li dir=ltr p dir=ltrCommunity/p /li li dir=ltr p dir=ltrEducation/p /li li dir=ltrDiversity/li /ulpEach vote deposited a corresponding color of sand in a plexiglass container. Voting data was displayed visually in real time as each person’s vote contributed to a unique piece of sand art./p p dir=ltrimg alt=Phase2 DrupalCon voting booth station data-entity-type=file data-entity-uuid=441dc838-83c2-461d-ae75-5db83869d751 src= //p p  /p pstrongThe Results of the Vote/strong/p pThe final results are in and DrupalCon attendees voted to make an impact on “education”. In response to the vote, Phase2 will make a donation to a href= Digital Harbor Foundation/a, a local Baltimore youth tech education nonprofit. We were thrilled by the participation in our booth and inspired by the beauty of the final sand art and how it really was a great visual representation of  what we can achieve as a community!/p p /p p dir=ltrimg alt=Sand art created by Drupal community vote data data-entity-type=file data-entity-uuid=c3cca453-282c-46e7-9546-ceed1b5de921 src= //p p  /p pstrongImpacting the Drupal Thought Leadership/strong/p pPhase2 was represented in six DrupalCon sessions and we were excited to invite some amazing clients on stage with us, including Pinterest, Turner (NBA), Score and Weight Watchers. Here’s the full session lineup - feel free to check out the video of each session:br /  /p ulli dir=ltr p dir=ltra href= on Drupal 8/a/p /li li dir=ltr p dir=ltra href=, New Technology, and the Aging Baby Boomers/a/p /li li dir=ltr p dir=ltra href= Dragons Drupal/a/p /li li dir=ltr p dir=ltra href=’s Component Based Design: Breaking Down Silos, Saving Time, and Empowering Content Editors/a/p /li li dir=ltr pa href= As Tech Education: Fostering New Staff Via the Drupal Stack/a/p /li li dir=ltr p dir=ltra href= User Experience for 320+ sites on one flexible platform!/a/p /li li dir=ltr p dir=ltra href= Summit/a/p /li /ulpOne great Phase2 moment involved our Director of Engineering, Tobby Hagler, and his a href= Dragons themed session/a. As a major DD fan, Tobby has submitted this talk to DrupalCon multiple times over the years, and this year it was finally accepted! To commemorate his perseverance and the awesome subject matter we created a DD themed t-shirt that everyone from Phase2 wore in support./p pimg alt=Tobby Haggler presents his Dungeons Dragons Drupal session data-entity-type=file data-entity-uuid=d016375d-acec-490c-94d5-6aeb24c9341d src= //p p dir=ltrimg alt=Phase2 team members show off their Dungeons Dragons t-shirts data-entity-type=file data-entity-uuid=9377c455-f62f-472d-afea-7a833d5d0fc9 src= //p p /p pCaitlin Loos and Chris Bloom spoke on the success of a href=’s BuilDesign Internship Program/a and offered some insightful strategic and tactical advice to agencies that are looking to build their own junior talent program. Watch the session a href=  /p p /p p dir=ltrimg alt=Caitlin Loos and Chris Bloom give their Drupal for Tech Education presentation at DrupalCon data-entity-type=file data-entity-uuid=42f333c0-c10c-44ef-a25c-15c4aaaeee79 src= //p p /p p dir=ltrstrongThe Impact is Infinite/strong/p pWe’re back from DrupalCon Baltimore exhausted, but exhilarated by the creativity and talent of the Drupal Community. We are reminded of the impact our collective talents can have on our lives and the world around us. It was an amazing week with team members, partners, clients and friends and we’re already looking forward to DrupalCon next year!/p pimg alt=The Phase2 family data-entity-type=file data-entity-uuid=be96ee81-b273-4d7e-b7cc-9667dde7d55f src= //p p /p p dir=ltr /p p /p

Phase2: Pattern Lab: Taking Our Workflow from a Linear to Parallel Process

Tue, 05/16/2017 - 16:44
pa href=http://patternlab.ioPattern Lab/a is many wonderful things: a a href= guide/a, a a href= inventory/a, a a href= system, and the embodiment of a a href= philosophy/a, all wrapped inside a fundamentally simple tool – a static site generator. It has greatly improved Phase2’s approach to how we build, theme, and design websites. Let’s talk about what Pattern Lab is, how we use it in our process by integrating it into the theme of a CMS like Drupal or WordPress, and the resulting change in our development workflow from linear to parallel./p pstrongNote: We’ll be discussing this topic in our webinar on June 16th. a href= here!/a/strong/p h2 id=what-is-pattern-lab-What is Pattern Lab?/h2 pPattern Lab allows us to easily create modular pieces of HTML for styling scripting. We call these modular pieces of HTML strongemcomponents/em/strong – you may have already heard of the iconic a href=, a href=, and a href= Pattern Lab provides an easy-to-use interface to navigate around this component inventory./p pPattern Lab also does much more: it fills the role of a style guide by showing us colors, fonts, and font sizes selected by the design process and demonstrates common UI elements like buttons, forms, and icons along emwith the code needed to use them/em. That part is important: it’s the distinction between “this is what we’re going to build” and “this is what has been built and here’s how to use it.” Pattern Lab provides a handbook to guide the rest of your complex CMS./p pimg alt=Pattern Lab menu data-entity-type=file data-entity-uuid=7f1c44d5-00d0-4097-8e95-6b0c0b3a66b2 src= //p pWe can also prototype with Pattern Lab because it supports “partials.” Partials allow our components to contain other components, giving us emstrongmodular components/strong/em. This lets us reuse our work in different contexts by not repeating ourselves, ensuring consistency of our design across a wide set of pages and viewports, and reducing the number of bugs and visual inconsistencies experienced when each page contains unique design elements. It supports either low fidelity “gray-boxing” or high fidelity “it looks like the finished site” prototyping. You can see an example of this by looking at the “a href=” and “a href=” in Pattern Lab below./p pimg alt=Templates and pages data-entity-type=file data-entity-uuid=37d92702-7d34-438a-ba8b-e5eb994f84ea src= //p pTo summarize, Pattern Lab is a style guide, a component inventory, and a prototyping environment where we can see our designs in the medium they are destined for: the browser! Now, let’s talk about the old way of doing things before we discuss how we implement this tool, and the difference the new way makes./p pThe Old Way/p pimg alt=Old design workflow data-entity-type=file data-entity-uuid=f80e1659-d2de-4c43-b63e-0f03260e9359 src= //p pGenerally speaking (and greatly simplifying), the old process involved several linear steps that effectively block subsequent steps: the goal of each step is to create a deliverable that is a required resource for the next step to start. The main point I want to make is that in order for the front-end developers to implement the designs they need HTML, so they have to wait for the back-end developer to implement the emfunctionality/em that creates the HTML./p pFront-end developers just need HTML. We don’t need the HTML required for the complex logic of a CMS in order to style it. We just need HTML to style and script so we can create our deliverables: emthe CSS JavaScript/em./p pTo reiterate this point: strongfront-end devs just need HTML, wherever it comes from/strong./p pNow that we’ve set the stage and shown the problem, let’s take a look at the way we implement Pattern Lab and how that helps improve this process./p pIntegrating Pattern Lab and the CMS Theme/p pInstead of keeping our Pattern Lab site (which contains our prototype and style guide) separate from the CMS, we keep them together. Pattern Lab is just a simple static site generator that takes HTML shorthand and turns it into HTML longhand. We just put the Pattern Lab folder inside the theme right here (for a Drupal site): span class=geshifiltercode class=php geshifilter-php/sites/all/themes/theme-name/pattern-lab/./code/span Now it’s next to other fundamental assets like CSS, JavaScript, Images, and Fonts. Sharing these assets between Pattern Lab and our CMS is a huge step forward in improving our process./p h2 id=folder-structureFolder Structure/h2 ptheme-name/ css/ style.css js/ script.js pattern-lab/ source/ # (HTML Shorthand) public/ # (HTML Longhand - a.k.a The Pattern Lab Site) templates/ *.tpl.php # (All our CMS template files)/p tabletbodytrtd p1/p p2/p p3/p p4/p p5/p p6/p p7/p p8/p p9/p p10/p /td td pspantheme/spanspan-/spanspanname/spanspan//span/p pspancss/spanspan//span/p pspanstyle/spanspan./spanspancss/span/p pspanjs/spanspan//span/p pspanscript/spanspan./spanspanjs/span/p pspanpattern/spanspan-/spanspanlab/spanspan//span/p pspansource/spanspan//spanspan /spanspan# (HTML Shorthand)/span/p pspanpublic/spanspan//spanspan /spanspan# (HTML Longhand - a.k.a The Pattern Lab Site)/span/p pspantemplates/spanspan//span/p pspan*/spanspan./spanspantpl/spanspan./spanspanphp/spanspan /spanspan# (All our CMS template files)/span/p /td /tr/tbody/tableh2 id=sharing-css--amp--js-assetsSharing CSS JS Assets/h2 pWith Pattern Lab inside our CMS theme folder, all we really need to do to “integrate” these two is include this HTML tag in Pattern Lab to use the CSS that our CMS theme is using:/p plink href=../../../../css/style.css rel=stylesheet media=all/p tabletbodytrtd p1/p /td td pspan/spanspanlink /spanspanhref/spanspan=/spanspan../../../../css/style.css/spanspan /spanspanrel/spanspan=/spanspanstylesheet/spanspan /spanspanmedia/spanspan=/spanspanall/spanspan/span/p /td /tr/tbody/tablepAnd then include this HTML tag to use the CMS theme’s JavaScript:/p pscript src=../../../../js/script.js/script/p tabletbodytrtd p1/p /td td pspanscript /spanspansrc/spanspan=/spanspan../../../../js/script.js/spanspan/spanspan/script/span/p /td /tr/tbody/tablepimg alt=Shared assets folder structure data-entity-type=file data-entity-uuid=1b1a3cb5-9261-41cf-b653-c99721c08bc0 src= //p pHow This Helps/p pAll a web page needs is HTML for its content, CSS for styling that content, and JavaScript for any interaction behavior. We’ve now got two ways to make HTML: programming the CMS (which takes a lot of time) to be able to let non-technical content editors create and edit content that generates the HTML, or using Pattern Lab to write “HTML shorthand” much, much quicker. Both of those environments are linked to the same CSS and JavaScript, effectively sharing the styling and interaction behavior to both our CMS and Pattern Lab./p pNow, most of the time we’re not working with our clients just to make style guides and prototypes; we’re making a href= CMS platforms/a that scale in some a href= big ways/a. Why would we want to waste time creating the HTML twice? Well, sites a href= big/a take time to build right. Remember that the front-end developers are usually waiting for the back-end developers to program in the functionality of the CMS, which ends up creating the HTML, which the front-end developers style by writing CSS JS./p pAll we need is some HTML to work with so we know our CSS and JS is working right. We don’t care if it’s editable to content editors at this point, we just want it to look like the comps! Now that front-end devs have an environment in Pattern Lab with real HTML to style and script, we can bring the comps to life in the browser with the added benefit of CSS JS being immediately available to the CMS theme. We are effectively un-blocked, free to work outside the constraints of a back-end bottleneck. This shift from a linear process to one where back-end and front-end development can happen concurrently in a parallel process is a major step forward. Obvious benefits include speed, less re-work, clarity of progress, and a much earlier grasp on UI/UX issues./p pThe New Workflow/p pimg alt=Parallel iterative process data-entity-type=file data-entity-uuid=b8e7e69d-6e3e-4c48-bae0-91e4fd49c96f src= //p pWith our style guide sharing CSS JS with our CMS theme, we can pull up Pattern Lab pages exposing every button – and every size and color button variation – and write the CSS needed to style these buttons, then open up our CMS and see all the buttons styled exactly the way we want. We can get an exhaustive list of each text field, select box, radio button and more to style and have the results again propagate across the CMS’s pages. Especially when armed with a knowledge of the HTML that our CMS will most likely output, we can style components even before their functionality exists in the CMS!/p pAs the back-end functionality is programmed into the CMS, HTML classes used in the Pattern Lab prototype are simply applied to the generated HTML to trigger the styling. It doesn’t matter too much if back-end or front-end start on a component first, as this process works in either direction! In fact, design can even be part of the fun! As designers create static comps, the front-end devs implement them in Pattern Lab, creating the CSS available in the CMS as well. Then, the Pattern Lab site acts to the designers as a resource that contains the summation of all design decisions reflected in a realistic environment: the browser. The designers can get the most up-to-date version of components, like the header for their next comp, by simply screen shooting it and pulling it into their app of choice. This frees the designers from the minutia of ensuring consistent spacing and typography across all comps, allowing them to focus on the specific design problem they’re attempting to solve./p pstrongWhen designers, front-end developers, and back-end developers are iteratively working on a solution together, and each discipline contributes their wisdom, vision, and guidance to the others, a very clear picture of the best solution crystallizes and late surprises can often be avoided./strong/p pThis parallel process brings many advantages:/p ulliFront-end can start earlier – often before a CMS and its environment is even ready!/li liEasy HTML changes = quick iteration./li liBack-end has front-end reference guide for markup and classes desired./li liPattern Lab acts as an asset library for designers./li liProject managers and stakeholders have an overview of progress on front-end components without being encumbered by missing functionality or lack of navigation in the CMS./li liThe progress of each discipline is immediately viewable to members of other disciplines. This prevents any one discipline from going down the wrong path too far, and it also allows the result of progress from each discipline to aid and inform the other disciplines./li liShared vocabulary of components and no more fractured vocabulary (emis it the primary button or the main button?/em). Pattern Lab gives it a label and menu item. We can all finally know what a Media Block objectively is now./li /ulpConclusion/p pBy decoupling the creation of a design system based in CSS and JavaScript (styling) from the process of altering the HTML that our CMS is generating (theming), we’re able to remove the biggest blocker most projects experience: dependence on the CMS for CSS JS to be written. We avoid this bottleneck by creating a nimble environment to build HTML that allows us to craft the delieverables of our design system: CSS JS. We’re doing this in a way that provides these assets instantly to the CMS so the CMS can take advantage of them on the fly while the site is being built strongemconcurrently, iteratively, and collaboratively/em/strong./p h2 id=helpful-linksHelpful Links/h2 ulliMyself, Joey Groh, and Micah Godbolt presenting on this very subject: a href= Los Angeles 2015: The New Design Workflow – YouTube/a/li lia href= Frontend Methodology Is All of Them: Atomic Design Pattern Lab/a/li liThe post that started the philosophy: a href= Design | Brad Frost/a/li lia href= Design Book by Brad Frost/a/li lia href= of Brad Frost’s presentation where he announces Pattern Lab/a/li liPhase2’s front-end starter theme that automatically builds Pattern Lab, Scss, and more with Grunt ready to go: a href= Lab Starter/a/li lia href= Lab Tools and Resources/a/li lia href= Style Guide Resources/a/li liLive demo of a href= Lab/a/li lia href= Lab Documentation/a/li /ul

Phase2: Features are not Reusable

Tue, 05/16/2017 - 16:44
p dir=ltrThe original purpose of the a href= module/a was to “bundle reusable functionality”. The classic example was a “Photo Gallery” feature that could be created once and then used on multiple sites./p p dir=ltrIn Drupal 7, Features was also burdened with managing and deploying site configuration. This burden was removed in Drupal 8 when configuration management became part of Core, allowing Features to return to its original purpose./p p dir=ltrBut, as the primary maintainer of the Features module, I sadly admit that:/p p dir=ltr“Features does not actually accomplish the goal of creating truly reusable functionality.”/p p dir=ltrLet’s look more closely the classic “Photo Gallery” example. Export your Gallery content type, your Image field storage and instance, your View and Image Style into a Feature module. You can copy this module to another site and install it to create a Gallery. But what happens if your other site already has an Image field you want to share? What happens when the namespace used for the features on your new site is different from the namespace of your original site? What happens if you want to add the gallery to an existing content type, such as a Blog?/p p dir=ltrThe problem with configuration in Drupal is that it is full of machine names: content types, fields, views, dependencies, etc. You are supposed to prepend a unique namespace to these machine names to prevent conflicts with other modules and project, but that means you are stuck with that namespace when trying to reuse functionality. When you make a copy of the feature module and change all of the machine names, it becomes difficult to update the original feature with any improvements that might be made on the new project./p p dir=ltrBasically, your Feature is not actually a reusable component./p h2 dir=ltrFeature Templates/h2 p dir=ltrTowards the end of Open Atrium development in Drupal 7, we started using an architecture that allowed reusable functionality to be layered across multiple content types. The Related Content feature added Paragraph bundles but had no opinion about which content type you added these paragraphs to. This was accomplished using the a href= Template/a module in D7, which allowed you to create a template of configuration and use it to create multiple instances of that same configuration across multiple content types. Until now, there was no way to reuse configuration like that in Drupal 8./p h2 dir=ltrIntroducing: Config Actions/h2 p dir=ltrThe new a href= Actions module/a helps to solve this problem and provides a replacement for both the Features Template and Features Override modules for Drupal 8. Config Actions is a plugin-driven module that simply does the following:/p ulli dir=ltr p dir=ltrLoad configuration from a source/p /li li dir=ltr p dir=ltrTransform the config data and perform optional string replacements./p /li li dir=ltr p dir=ltrSave the new data to a destination/p /li /ulp dir=ltrThese actions are read from YAML files stored within your custom module config/actions folder. When your module is enabled, each action is executed, allowing you to easily manipulate configuration data without writing any code. If you want to write code, you can use the Config Actions API to easily manipulate configuration within your own update hooks and other functions./p h2 dir=ltrCreating templates/h2 p dir=ltrLet’s take the “Photo Gallery” example and build a template that can be used by Config Actions:/p olli dir=ltr p dir=ltrUse Features to export the configuration (content type, fields, views, etc) into a custom module (custom_gallery)./p /li li dir=ltr p dir=ltrMove the YAML files from the config/install folder into a config/templates folder./p /li li dir=ltr p dir=ltrEdit the YAML files and replace the hard-coded machine names with variables, such as %field_name% and %content_type%./p /li li dir=ltr p dir=ltrCreate a Config Actions YAML file that loads configuration from these template files, performs string replacement for the variables, then saves the configuration to the active database store./p /li /olp dir=ltrOne of the edited feature configuration template files ( would look something like this:/p pre dir=ltr div class=geshifilterpre class=yaml geshifilter-yamlolli class=li1div class=de1langcode: en/div/lili class=li1div class=de1status: true/div/lili class=li1div class=de1dependencies:/div/lili class=li1div class=de1module:/div/lili class=li1div class=de1 - file/div/lili class=li1div class=de1 - image/div/lili class=li1div class=de1 - node/div/lili class=li1div class=de1id: node.field_%field_name%/div/lili class=li1div class=de1field_name: field_%field_name%/div/lili class=li1div class=de1entity_type: node/div/lili class=li1div class=de1type: image/div/lili class=li1div class=de1.../div/li/ol/pre/div /prep dir=ltrThe resulting Config Action rule looks like this:/p pre dir=ltr div class=geshifilterpre class=yaml geshifilter-yamlolli class=li1div class=de1replace:/div/lili class=li1div class=de1 %field_name%: my_image/div/lili class=li1div class=de1 %content_type%: my_gallery/div/lili class=li1div class=de1actions:/div/lili class=li1div class=de1 field_storage:/div/lili class=li1div class=de1 # name of yml file in config/templates folder/div/lili class=li1div class=de1 source: class=li1div class=de1 dest: class=li1div class=de1 field_instance:/div/lili class=li1div class=de1 source: class=li1div class=de1 dest: field.field.node.%content_type%.%field_name%/div/lili class=li1div class=de1 /div/lili class=li1div class=de1 content_type:/div/lili class=li1div class=de1 source: class=li1div class=de1 dest: node.type.%content_type%/div/lili class=li1div class=de1 /div/lili class=li1div class=de1 view:/div/lili class=li1div class=de1 source: class=li1div class=de1 dest: views.view.%content_type%/div/lili class=li1div class=de1 /div/lili class=li1div class=de1 .../div/li/ol/pre/div /prepNot only does Config Actions perform string replacements within the actual YAML configuration template files, but it also replaces these variables within the action rule itself, allowing you to specify a dynamic destination to save the config./p p dir=ltrEnabling the above module will do the same thing as enabling the original Gallery feature, but instead of creating a “gallery” content type, it will create a “my_gallery” type, and instead of a “image” field it will create a “my_image” field, etc./p h2 dir=ltrReusing a Template/h2 p dir=ltrBy itself, this isn’t much different from the original feature. The power comes from reusing this template in a different module./p p dir=ltrIn your “myclient” project, you can create a new custom module (myclient_gallery) that contains this simple Config Action file:/p pre dir=ltr div class=geshifilterpre class=yaml geshifilter-yamlolli class=li1div class=de1replace:/div/lili class=li1div class=de1 %field_name%: myclient_image/div/lili class=li1div class=de1 %content_type%: myclient_gallery/div/lili class=li1div class=de1plugin: include/div/lili class=li1div class=de1 /div/lili class=li1div class=de1module: custom_gallery/div/li/ol/pre/div pThis will cause Config Actions to include and execute the actions from the custom_gallery module created above, but will use the new string replacements to create a content type of “myclient_gallery” with a field of “myclient_image”./p /prep dir=ltrThe “custom_gallery” module we created above has become a reusable component, or template, that we can directly use in our own client projects. We can control the exact machine names being used, reuse fields that might already exist in our project, and customize the gallery however we need for our new client without needing to fork the original component code./p p dir=ltrIf our new client project makes improvements to the core gallery component, the patches to the custom_gallery template module can be submitted and merged, improving the component for future client projects./p h2 dir=ltrOverriding Configuration/h2 p dir=ltrRunning actions is similar to importing configuration or reverting a Feature: the action plugins manipulate the config data and save it to the active database store. Any additional imports or actions will overwrite the transformed config data. These are not “live” (runtime) overrides, like overriding config in your settings.php file in D7 or using the a href= Override/a module in D8. The configuration stored in the database by Config Actions is the active config on the site, and is available to be edited and used in the Drupal UI just like any Feature or other imported config./p p dir=ltrFor example, here is a simple “override” action:/p pre dir=ltr div class=geshifilterpre class=yaml geshifilter-yamlolli class=li1div class=de1source: node.type.article/div/lili class=li1div class=de1value:/div/lili class=li1div class=de1 description: My custom description of the article content type/div/lili class=li1div class=de1 help: My custom help of the article content type/div/li/ol/pre/div /prep dir=ltrWhen the destination is not specified, the source is used.  The “value” option provides new config data that is merged with any existing data. This action rule just changes the description and help text for the “article” content type. Simple and easy, no Feature needed./p h2 dir=ltrConfig Action Plugins/h2 p dir=ltrPlugins exist for changing config, deleting config, adding new data to config, and you can easily create your own plugins as needed./p p dir=ltrThe Source and Destination options also use plugins. Plugins exist for loading and saving config data from YAML files, from the active database store, or from simple arrays, and you can create your own plugins as needed./p p dir=ltrFor example, the above “override” action could be rewritten like this:/p pre dir=ltr div class=geshifilterpre class=yaml geshifilter-yamlolli class=li1div class=de1source: [/div/lili class=li1div class=de1 description: My custom description of the article content type/div/lili class=li1div class=de1 help: My custom help of the article content type/div/lili class=li1div class=de1]/div/lili class=li1div class=de1dest: node.type.article/div/li/ol/pre/div /prep dir=ltrThis specifies the configuration data directly in the source array and is merged with the destination in the active database store./p h2 dir=ltrConclusion/h2 p dir=ltrConfig Actions addresses many different use-cases for advanced configuration management, from templates to overrides. You can use it to collect all of your site help/description text into one place, or to create a library of reusable content components that you can use to easily build and audit your content model.  Developers will appreciate the easy API that allows configuration to be manipulated from code or via Drush commands. I look forward to seeing all the the different problems that people are able to solve using this module./p p dir=ltrTo learn more about Config Actions, read the a href= documentation/a, or come to my a href= of a Feather session/a at DrupalCon Baltimore to talk more about advanced configuration management topics./p p  /p

Phase2: Why You Should Invest in Voice Assistant Technology

Tue, 05/16/2017 - 16:44
p dir=ltrIn 1994, I was a huge fan of the X-Men animated series. I distinctly remember an episode titled “Time Fugitives”, which featured Cable, a time-traveling mutant vigilante from the future, talking to a floating cube that gave him historical information about the X-Men of the past. I never thought that technology would exist in my lifetime, but I found myself a week ago sitting in my living room asking my Google Home (which resembles an air freshener rather than a cube) questions about historical context./p p dir=ltrConversational UI’s - chatbot and voice assistant technologies - are becoming commonplace in consumer’s lives. Messaging apps alone account for a href= of all time people spent on mobile and desktop devices/a. Soon, almost every major smartphone and computer will be equipped with Siri, Google Assistant, Cortana, or Samsung’s Bixby. These voice assistants are even being integrated into common home electronics - televisions, set-top boxes, video game units, and even washing machines and refrigerators. Sales of home personal assistants are on the rise, with the Amazon Echo alone having increased sales nine-fold year over year. a href= giants Google and Microsoft are reporting significant increases in voice searches/a, each claiming about 25% of mobile searches are now performed using voice./p pfigure role=group class=align-centerimg alt=Graphic from e-consultancy that shows the Google trends from 2008 - 2016 data-entity-type=file data-entity-uuid=c6fde53b-a2e5-43d6-9e74-a16018cc4888 src= /figcaptionSource: Should financial services brands follow Capital One on to Amazon Echo?, E-Consultancy, 2017/figcaption/figurebr //pp dir=ltrThe trends are clear - conversational UI’s are only becoming more prevalent in our lives, and some predict will replace common technologies that we use today. And in order to continue to engage audiences wherever they are, in the way they prefer to engage, companies should be investing in developing apps that leverage these technologies at home and in the workplace./p h2 dir=ltrBenefits of Building Applications for Conversational UI’s Now/h2 p dir=ltrWhile you may question the business benefits of developing applications that leverage conversational UI’s at such an early stage in the maturation of this technology, there are some clear benefits that come with being on the leading edge of leveraging new technologies to engage consumers:/p h3 dir=ltrEarly adoption can lead to great PR/h3 p dir=ltrStanding on the leading edge and developing applications for these emerging platforms can present a great opportunity to earn publicity, and position your organization as an innovative brand. An example of this can be seen in this a href= article about CapitalOne’s Amazon Echo skill/a./p h3 dir=ltrYou can test new market opportunities/h3 p dir=ltrConversational UI’s may present an opportunity to engage with a market that your organization is not currently. You may identify opportunities to gain new customers, improve customer satisfaction, or create new revenue streams by extending existing products and services into platforms with voice and chat interfaces. Some companies are already starting to offer paid tiers for services delivered via or selling advertising on conversational UI applications./p h3 dir=ltrEarly adoption can provide a competitive advantage/h3 p dir=ltrWhile being first to market with a conversational UI app is not always a guarantee of success, it can provide you a leg up over the competition. If you start early, you will have an opportunity to identify best approaches to engage consumers on these new platforms, allowing you to have a well-defined experience once your competitors enter the market. Your brand may also be able to secure a percentage of the market share early due to a lower cost of user acquisition./p blockquotep dir=ltrUS consumers are creatures of habit, and prefer to go back to familiar stores, products, and services they trust. In an ideal scenario, your conversational UI application will become integrated into consumer’s work and or home life before the market is saturated./p /blockquote h2 dir=ltrPotential Drawbacks/h2 p dir=ltrIn all fairness, developing a conversational UI application is not easy. There are some risks associated that we would be remiss if we did not inform you of:/p ulli dir=ltr p dir=ltrThis is still the wild-wild west - very few best practices or standards have been established./p /li li dir=ltr p dir=ltrIt can be expensive to develop and implement, across the myriad of devices/services./p /li li dir=ltr p dir=ltrThere is a potentially high learning curve depending on the platform you are building for and technologies you use to develop your app./p /li li dir=ltr p dir=ltrAt this time, there are no clear methods for efficiently testing features on voice assistant applications./p /li li dir=ltr p dir=ltrDeployment of content to this various platforms may require use of many different CMS systems./p /li /ulp dir=ltrWhile there are risks associated with this starting to leverage conversational UI applications, the long-term benefits may outweigh the short-term losses./p p dir=ltrStay tuned for part 2, where we will discuss how you can start leveraging conversational UI applications to build your brand and grow your business./p p /p

Phase2: Responsive Design Patterns to Create Penn State’s Beautiful Online Experience

Tue, 05/16/2017 - 16:44
pWith the recent launch of Penn State University’s a href= site/a and a href= site/a, we were able to help Penn State breathe new life into their outdated online presence, to allow prospective and current students alike to have the best experience possible on a wide array of devices. Working closely with the PSU design team, we created a complete experience from desktop to mobile, utilizing popular design patterns that would help guide the user experience while never fully stripping away content from the end user./p pUtilizing the a href= Theme/a, we used the default media queries of mobile, narrow and normal or otherwise known as under 740px (mobile), under 980px (tablet) and anything else above (desktop). These media queries really helped the PSU design team explore the possibilities of what was possible at each one of these breakpoints and how fundamental elements can be optimized for the device that they are being displayed on. Most notable were, menus, search, curated news boxes, and featured article headers were all areas where the PSU designers and Phase2 teamed up to bring out the best experience for each breakpoint./p h2 Menus:/h2 pWhether we are talking about main menus, secondary, or even tertiary, all menus have their place and purpose for guiding the user through the site to their destination. The PSU design team never forgot this principal, and substantial effort went into making sure menu items were reachable at all breakpoints. While the main menu follows standard design patterns, the desktop to tablet change is just a slightly more condensed version of the original, and made to optimize the horizontal space of a tablet in portrait mode. Moving down to mobile, we made the biggest changes. The main menu collapses to a large clickable/tap-able button that reveals/hides a vertical menu with large target areas, optimized for mobile./p p /p pThe secondary menu also behaves in a similar fashion to the main menu by collapsing down to a larger clickable button that reveals menu items also enlarged in order to visually gain appeal while also providing a larger area for users to click on. The transformation happens earlier at the tablet level as we felt that the condensed horizontal space would make the tex-only menu items harder to read and more difficult to click on for smaller screens./p p /p h2Search:/h2 pSearch was another component that Penn State needed to emphasize  throughout the site. It was very important to leave this as simple as possible, so like the menus, it was decided to collapse the search, for mobile only, into a drawer reveal that focused on simplicity and a large focus area. Again, we went with a large icon that helped by having a large target area for the mobile and tablet experience./p p /p p /p p /p h2Curated news boxes:/h2 pOn the homepage, the curated news boxes provided a fun canvas to work with content that shifts around as the device changes from desktop to mobile. Knowing that space is limited in the mobile realm, it was important to provide something visually pleasing, but that would also still engage the user to click through a news story. So iconology was used to capture the specific type of news piece while the title was left to engage the user into clicking through to the story./p pMobile curated boxes/p pTablet Curated Boxes/p p /p h2Featured Article Header:/h2 pImagery was crucial to the PSU redesign strategy. It was only natural to have engaging treatments to the featured article headers. If the article header implemented a slideshow, we used flexslider. Otherwise, simple css scaled the images per breakpoint. The meta description related to the image would truncate and shift around depending on the breakpoint for better readability and appearance./p pBy implementing responsive design patterns, we were able to help the PSU team achieve their goal of making their online content and news accessible by any device./p

Phase2: Defining Content to Optimize your Editorial Experience

Tue, 05/16/2017 - 16:44
p dir=ltrNo doubt you’ve heard the phrase strong“Content is King.” /strongBut what exactly is content? The precise definition is subjective – it is influenced by the context in which it is defined. There is no universal definition within the industry, and it is highly likely there is no single definition within your organization./p p dir=ltrstrongTo have a successful content strategy, it is critical that your organization determines precisely what content means to you, as its definition will inform your entire editorial experience./strong/p h4 dir=ltrAn Efficient Editorial Experience/h4 p dir=ltrWhen designing editorial experiences, there is inherent friction between system architecture and user experience. The more complex the structure, the less usable the editorial experience of your CMS becomes. Content strategists strive to follow best practices when modeling content, but these object-oriented models do not take into account the workflow of tasks required to publish content./p p dir=ltrModern content management platforms offer organizations a variety of entities used to build an editorial experience – content types, taxonomies, components, etc. Although editors and producers learn how to use them over time, there can be a steep learning curve when figuring out how to combine these entities to perform tasks, like creating a landing page for a campaign. That learning curve can have two adverse effects on your websites:/p olli dir=ltr p dir=ltrYou lose efficiency in the content creation process, leading to delayed launches and increased costs./p /li /olol start=2li dir=ltr p dir=ltrIncorrect use of the CMS, resulting in increased support costs of ownership./p /li /olh4Content Management Best Practice: Focus on Tasks/h4 p dir=ltrAvoid these risks by designing task-based editorial experiences. Task-based user interfaces, like Microsoft Windows and Mac OS X, present quick paths to whatever task your content creator wants to accomplish, rather than allowing the user to plot their own path. The greatest efficiencies can be gained by creating a single interface, or multistep interface, for accomplishing a task. Do not require the user to access multiple administrative interfaces./p p dir=ltrTo enable this set-up, perform user research to understand how content is perceived within your organization and how users of your CMS expect to create it. This is easily done by conducting stakeholder interviews to define requirements. Our digital strategy team has also found success in following practices found in the a href= methodology/a, quickly prototyping and testing editorial experiences to validate assumptions we make about users’ needs./p pTo ensure the success of your content operations, define the needs and expectations of the content editors and producers first and foremost. Equally important, prioritize tasks over CMS entities to streamline your inline editorial experience for content producers and editors./p

Phase2: Phase2 Joins Forces with Cycle for Survival

Tue, 05/16/2017 - 16:44
pOver the past year, we’ve had the joy of working with a href= for Survival/a to update the organization’s digital assets. But there’s more than one way to make an impact, so this weekend we set out to fundraise and participate in a a href= for Survival team ride/a in New York City. Needless to say, it was a fun and inspirational event./p pimg alt=Group of Phase2 staff at Cycle for Survival data-entity-type=file data-entity-uuid=ea706709-cefc-473b-818f-9d1db9b39541 src= class=align-center //ppWe invited Brandy Reppy, Memorial Sloan Kettering’s Associate Director of Online Operations, to share how digital technology has made an impact on the organization./p pstrongWhat is the Cycle for Survival mission?/strong/p pCycle for Survival is the national movement to beat rare cancers. Through a series of indoor team cycling events, Cycle for Survival raises funds that are critical for rare cancer research with 100% of every donation being directly allocated to Memorial Sloan Kettering Cancer Center within six months of the events./p pRare cancer research is drastically underfunded resulting in fewer treatment options for patients. With fewer resources devoted to understanding and treating these diseases, patients face uncertain futures – Cycle for Survival is committed to changing that./p pimg alt=A woman riding at Cycle for Survival holding a sign that says Phase2 rides with MSK data-entity-type=file data-entity-uuid=62552472-176c-47f9-b2dd-229a45152c4a src= class=align-center //ppstrongHow does digital technology impact your mission?/strong/p pFundraising for Cycle for Survival focuses on peer-to-peer interactions. Participants register online for an event and fundraise for their team via the website. Digital technology is pivotal to allowing participants to navigate our website easily during registration and fundraising. Our website also houses critical information for our participants and their donors, so it’s critical that they can access this information seamlessly./p pimg alt=3 Phase2 staff members holding hands at Cycle for Survival data-entity-type=file data-entity-uuid=882f457f-aa64-4219-9eeb-3c46d1a891f3 src= class=align-center //ppstrongIn what ways does Phase2 support CFS in this effort?/strong/p pWith Phase2, Cycle for Survival is able to efficiently manage and update digital assets. These are key resources for our participants and donors – things like updates from around the organization, information on how to get involved, and what we are doing with the funds raised – that need to be easy to access. In working with Phase2, we’ve been able to streamline the process of maintaining these assets and branding elements./p pstrongWhat technical strides have we made together?/strong/p pWith Phase2, we’ve been able to be more efficient with time and resources spent on our digital assets and have been able to quickly manage our content. The major shift has been in having a responsive site (instead of a separate mobile one). This creates one seamless experience across many devices, which allows our visitors to easily access all their information from any browser or device, and allows us to manage one code base./p

Phase2: Developer Soft Skills Part 1: Online Research

Tue, 05/16/2017 - 16:44
pDeveloper Soft Skills/p pOne of my earliest jobs was customer service for a call center. I worked for many clients that all had training specific to their service. No matter the type of training, whether technical or customer oriented, soft skills were always a included. a href= Rouse/a said, “Soft skills are personal attributes that enhance an individual’s interactions, career prospects and job performance. Unlike hard skills, which tend to be specific to a certain type of task or activity, soft skills are broadly applicable.”/p pIn this blog series I will be discussing what I call “developer soft skills.” The hard skills in development are (among others) logic, languages, and structure. Developer soft skills are those that help a developer accomplish their tasks outside of that knowledge. I will be covering the following topics:/p ulliOnline research/li liTroubleshooting/li liEnhancing/Customizing/li liIntegrating/li liArchitecting/li /ulpPart 1: Online Research/p pOne of the first skills a developer should master is online researching. This is an area with some controversy (which will be discussed later) but a necessary skill for learning about new technologies, expanding your knowledge, and solving problems./p pOne of the best reasons for research is continuous education. For many professions (such as the military, education and medical fields) continuing education is required to keep up on updated information, concepts, and procedures. As a developer, continuing to grow our skill set helps us develop better projects by using better code, better tools, and better methods./p h2Search engine queries/h2 pWhen researching a topic on the internet it usually involves using a search engine. Understanding how a search engine works and how to get to the results.There are two parts to how a search engine works. Part one is data collection and indexing. Part two is searching or querying that index. I will be focusing on how to write the best possible query, to learn more about how search collect and index data see a href= link. In order to write good queries we should understand how search engines respond to what we type into the search box. Early search results were rendered based on simple (by today’s standards) comparison of search terms to indexed page word usage and boolean logic. Since then search engines have started to use a href= language/a queries./p pSo we can get better results by using this to our advantage. If I wanted to research how to make a calendar with the Java programming language. instead of searching for keywords and distinct ideas “java -script calendar” by themselves; use natural language to include phraseology and context in our queries: “how can I make a calendar with java”. The first result from the keyword search returns a reference to the Java Calendar class. The first result from the second query return example code on writing a calendar in Java. The better the query the better the results./p h2Search result inspection/h2 pOnce we have the right query we can then turn our attention to the results. One of the first things I do is limit the results to a date range. This prevents results from the previous decade (or earlier) to be displayed with more recent and applicable ones. Another way to focus our search is to limit the site that the search takes place on. If we know we want to search for a jQuery function search pimg alt=Google Search PHP with anytime selected data-entity-type=file data-entity-uuid=0ee605bc-081b-4bc0-97c4-1e627172a67d src= class=align-center //ppOnce we have filtered our results, it’s time for further inspection. When viewing a results page, the first thing I look for is the context of the article or post. Does the author and/or site have a lot of ads? This can sometimes mean that the site is more about making money then providing good answers. Does the page have links or other references to related topic or ideas? This can show if the author is knowledgeable in the subject matter./p h2The controversy/h2 pEarlier I mentioned online researching can be a controversial topic. One of the points of controversy is discussed in Scott Hanselman’s blog post, a href= I really a developer or just a good googler?/a While I agree with his major point, that researching bad code can be dangerous, I contend that using a search engine can produce good results and learning opportunities./p pAlmost anytime you search for any programming topic, one site or group of sites is predominant in almost every result: Stack Overflow or the Stack Exchange group of sites. Several articles have been written about reasons a href= to use/a, a href= of using/a and why some developers no longer use Stack Overflow. Using Stack Overflow will not solve all your problems or make you a better developer./p pAgain, these arguments make some good points. But I think that using Stack Overflow correctly, just like good use of search engines, can produce good results. Using a Stack Exchange site comes with the benefit of community. These sites have leveraged Stack Exchange QA methodology for their specific topic or technology and can be a great resource on how to solve a problem within the bounds of that community. One of my development mentors told me that there were thousands of ways to solve a programming problem and usually several wrong ones. The key is to not do one of the wrong ones and try to find one of the best ones. Searching within a Stack exchange site for answers can highlight the wrong ones but also provide the ones that work best in that system./p pHere is an example of a Stack Overflow Drupal community response that came up when I searched for: “drupal create term programmatically.”/p pimg alt=Image of programmatically creating taxonomy term data-entity-type=file data-entity-uuid=2228a7dc-bed9-4d5b-94b4-e2dabf42dc80 src= class=align-center //ppThis response is correct, but if you look at the a href= provided, you will see this is for Drupal 6. If you were looking for how to do this in Drupal 7, for instance, the answer provided would not be correct. We could have improved our results by adding “Drupal 7″ to our query. But most important is to keep in mind that sites like Stack Overflow, or other community sites such as a href= include a mix of user-generated responses. Meaning anyone can respond without being vetted./p h2Keep going/h2 pThe best piece of advice I can offer for the arguments against using online search results and Stack Overflow is: “This is not the end.” Keep going past the result and research the answer. Don’t just copy and paste the code. Don’t just believe the top rated answer or blog post. strongClick the references sited, search the function or api calls that are in the answer, and make the research a part of your knowledge/strong. And then give back by writing about your article or posting your own answers. Answering questions can sometimes be just as powerful a learning tool as searching for them./p pIn the end, anything you find through search, blog, and code sites should be considered a suggestion as one way of solving a problem – not necessarily the solution to your concern./p pIn the next post I will discuss a good use case for Stack Exchange sites, Developer Soft Skills Part 2: Troubleshooting./p

La Drupalera (en): La Drupalera, in the European Drupal Business Days

Tue, 05/16/2017 - 16:02
div data-history-node-id=308 class=node node--type-article node--view-mode-rss ds-1col clearfix img property=schema:image src= width=650 height=433 alt=La Drupalera, in the European Drupal Business Days typeof=foaf:Image class=image-style-max-650x650 /p dir=ltrspan id=docs-internal-guid-f3885dfd-1191-4c10-0278-8192a2255fe1This month, /spana href= Drupalera/a can’t stop. If some days ago, we told you about our success in DrupalCamp Spain 2017, where our colleagues Isaura Galafate y Bea González triumphed with their talks, now our Country Manager y Technical Leader, Rafa Martín, is news, because he is going to show one of our a href= Study/a in a href= Drupalera/a, in one of the most important events of Drupal in Europe: a href= Drupal Business Days/a. Furthermore, La Drupalera, which loves contributing with the Community, takes part in the event as a href= community/a./p div class=field field--name-node-link field--type-ds field--label-hidden field__itema href= hreflang=en-x-simpleRead more/a/div /div

Manifesto: Looking back at our Spring Drupal Sprint

Tue, 05/16/2017 - 14:51
On Saturday we opened the doors of the Manifesto studio once more to developers, site-builders and testers for a one-day sprint of Drupal contribution. An experienced bunch We managed to attract seven attendees to this sprint. Unfortunately we didn’t manage to bring in any first-time contributors. But the upside to having a room of experienced. a class=moretag href= reading.../a

InternetDevels: Drupal distributions and OpenFed as a great example

Tue, 05/16/2017 - 14:46
div class=field field--name-field-preview-image field--type-image field--label-hiddendiv class=field__itemsdiv class=field__item evenimg src=/sites/default/files/public/blog_preview/drupal_openfed_distribution.png width=937 height=622 alt=Drupal distributions and OpenFed as a great example //div/div/divdiv class=field field--name-body field--type-text-with-summary field--label-hiddendiv class=field__itemsdiv class=field__item evenpWith Drupal, there is no need to reinvent the wheel — the wheels are already in full motion! The vigorous community has created tons of ready made elements that make development easier, quicker and cheaper. What’s not covered by them can be custom made to fulfill whatever your heart desires. A great example are the contributed modules that Drupal has for all purposes, with custom ones being built for special features (see a href= target=_blankready-made vs. custom-made modules/a)./p a href= more/a/div/div/div

Code Positive: Optimising content previews for Drupal 8 using Opengraph

Tue, 05/16/2017 - 12:34
a href= src= width=940 height=230 alt=Drupal and social media title=Drupal and social media typeof=Image class=image-style-rss-banner //a pWhen we share our content on social media we have one goal in mind, people clicking on the link. This article looks at a simple and effective ways of achieving that goal./p pa href= MORE/a/p p /p

Code Positive: Optimised content previews for Drupal 8 using Opengraph

Tue, 05/16/2017 - 12:34
a href= src= width=940 height=230 alt=Drupal and social media title=Drupal and social media typeof=Image class=image-style-rss-banner //a pWhen we share our content on social media we have one goal in mind, people clicking on the link. This article looks at a simple and effective ways of achieving that goal./p pa href= MORE/a/p p /p

Tim Millwood: Programmatically install Drupal 8 module

Tue, 05/16/2017 - 08:41
spanProgrammatically install Drupal 8 module/span spanspan lang= about= typeof=schema:Person property=schema:name datatype= xml:lang=timmillwood/span/span spanTue, 16/05/2017 - 07:41/span div class=field field--name-body field--type-text-with-summary field--label-hidden field--itempThere are times, often in tests or upgrade paths, where we want to programmatically install a module. Here's how:/p/div div class=field field--name-field-code field--type-text-long field--label-hidden field--itempcode\Drupal::service('module_installer')-install(['workspace']);/code/p/div div class=field field--name-field-tags field--type-entity-reference field--label-above div class=field--labelTags/div div class=field__items div class=field--itema href= hreflang=endrupal-planet/a/div div class=field--itema href= hreflang=endrupal/a/div div class=field--itema href= hreflang=endrupal 8/a/div /div /div sectionh2Add new comment/h2 drupal-render-placeholder callback=comment.lazy_builders:renderForm arguments=0=node1=322=field_comment3=basic token=LModBMUzx8TnKZnGs-CaCw93EYioUzEdlm3tWsrCE3M/drupal-render-placeholder/section Blog: AGILEDROP: Third European Drupal Business Days with Agiledrop

Tue, 05/16/2017 - 06:52
a href= src= //a In the last blog post, we revealed that our development team will be present at Drupal Heart Camp Zagreb. But that won't be the only Drupal Event, where Agiledrop will be present at the end of this week. Namely, Marko Bahor and Iztok Smolic (our Commercial and Operations directors) will attend European Drupal Business Days in Frankfurt. That means that you'll be able to talk to us in person in two different locations across Europe, practically at the same time. From 19th to 21st May up to ten of our team member will be in Zagreb. On the other hand, Marko and Iztok will travel a little… a href= MORE/a

Evolving Web: How to Make Sure Your Content Editors Love Drupal

Mon, 05/15/2017 - 20:32
a href= img src= width=720 height=480 alt=Photo of content editor on a laptop typeof=Image class=img-responsive //apI train a lot of new Drupal users. Some find it easy-to-use and some find it a daunting maze of forms full of confusing terminology. Sometimes, it just depends on how the admin UI has been configured./p pHere are some tips for configuring Drupal so that content editors using your site will love Drupal!/p h2Give Editors Limited Permissions/h2 pOften users are overwhelmed by the number of things they can do once they're logged into Drupal. If you take the time to update their permissions and remove un-needed permissions, the administrative interface will be much simpler to use. Content editors probably don't need to modify image styles or manage view modes, so don't give them these permissions./p pThis is probably to single most important thing you can do to improve the admin UI, and has the added bonus of making your site more secure. It also makes it harder to for editors to break the site by accident by changing a setting they don't understand./p h2Configure the WYSIWYG Editor/h2 pOne of the exciting things about Drupal 8 is that the WYSIWYG editor is built-in. But Drupal doesn't know out-of-the-box what HTML you have and who your editors are. That's why you can and should customize the WYSIWYG editor (Configuration Content Authoring Text formats and editors)./p pYou can remove unneeded tools and add ones that are really useful (like Paste from Word and Paste as Plain Text). You can also configure the Styles and Format options that users can add from the WYSIWYG editor. /p pimg alt=Screenshot of WYSIWYG editor configuration data-entity-type=file data-entity-uuid=7501729c-564b-4f21-bdd5-b5e40ecbe3db src= //p h2Text Formats/h2 pText formats are one of the keys to content editing success. Remember that text formats are associated with permissions, so your content editors will need to permission to use any given text format. They are also associated with content. If I save a piece of content using Full HTML, the next user who edits the content will also need permission to use that text format. Otherwise, they the text field will be disabled.img alt=Screenshot of non-editable body text data-entity-type=file data-entity-uuid=5b36af17-a681-43c8-be57-97fa56066fd7 src= //p pSo make sure that your content editors have permission to edit all the text formats that will be associated with content that they need to edit./p h2Field Configuration/h2 pThe more that you break up your content into nice, manageable fields, the more consistently you can collect and display content on your site. If your content editors are used to one large text box where they enter content on the page, they might not be so excited at first about a set of separate fields. So here are some tips to configuring fields so content editors will like them:/p ulliMake sure you're using the right field widget. Should you be using an autocomplete instead of a select box? Check out the widget settings on the emManage Form Display/em tab. /li liUse help text when needed, especially if you need content in a certain format, or a particular image size./li liMake required fields required. Don't make your content editors guess what's required for the content to look right./li liWhen appropriate, add a default value./li liMake sure the order of the fields in the admin UI makes sense, and is consistent across different types of content./li liIf you have nested Paragraph fields in your content, try changing the widget to display a preview of each one, instead of an edit form./li /ulh2Content Type Configuration/h2 pMake it easy for content editors to pick the right content type by providing meaningful names and descriptions. Think of this as built-in documentation. Make sure you create different content types for distinct types of data, rather than using catch-all content types. At the same time, don't set up multiple content types with identical fields, since this will add to the administrative overhead of the site. Remember, you can always use taxonomy terms to distinguish different ways that content should be filtered/displayed on the site./p h2Hide the Cruft/h2 pThere are lots of elements in the Drupal node edit page, like the 'Sticky at top of lists' checkbox, that can be easily hidden. If you're not using these settings, or if there are legacy fields that are no longer relevant, hide them! It's easy to hide fields from the edit form using the 'Manage Form Displayem'/emstrong /strongtabstrong./strong/p h2Preview/h2 pFor those of you who haven't tried the Preview button for Drupal 8, it works a whole lot better than it did in Drupal 7. Your content editors might find this really useful. If you're using View Modes to control the display of content in different contexts throughout the site, you'll probably need to provide some documentation/instructions for you content editors, prompting them to switch the view mode when they're previewing./p pimg alt=Screenshot of the preview interface in Drupal 8 data-entity-type=file data-entity-uuid=b110cc0b-3335-4546-a879-b30b785bd989 src= //p h2Edit a Page with One Click/h2 pIdeally, content editors would be able to edit the main content of a page via a single 'Edit' link. If you're creating landing pages that have complex content, this can be difficult. You might be storing some of the page elements as blocks or related nodes./p pYou can use a href= to set up compound content that's specific to the landing page, or use the a href= Entity Form/a module to allow users to edit content that's referenced from within your page, and displayed elsewhere on the site./p h2Create Dashboards or Custom Admin Views/h2 pContent editors like to have a landing page they can go to to see the overall state of content on the site. This might take the form of a dashboard, or it might be a series of customized content listing pages (which you can easily build with views). The idea is to give content editors an easy way to search and edit the content, as well as links to the admin pages they'll need most often./p h2Contrib Modules for Content Editing/h2 pThe a href= module provides a nice interface for inserting links that your content editors will really appreciate./p pThe media management modules a href= Browser/a and a href= Entity Browser/a together to provide easy file-reuse. This is a usability win for content editors who are working with large libraries of files./p pUse a href= Group/a to group related fields together in the content admin UI./p h2Test/h2 pYou need to test your content admin UI. Test what it looks like for different types of users. The a href= module can help with this. Make sure your list of tests include editing different types of content, making sure that any content that's migrated into Drupal can be edited consistently./p pAll of this is a lot of work, not a task to do the day before site launch. It's best to start thinking about the content admin experience the day you start building your site./p pIf you liked this blog post and want more step-by-step tips for setting up your Drupal 8 website, we have several a href= trainings coming up/a online and in-person that you might like./p a href= target=_blank+ more awesome articles by Evolving Web/a

Dries Buytaert: Think beyond with Acquia Labs

Mon, 05/15/2017 - 20:18
figure class=figurediv class=img no-resize style=border: 1px solid #ccc; display: inline-block img src= style=display:block alt= //div /figurepFor most of the history of the web, the website has been the primary means of consuming content. These days, however, with the introduction of new channels each day, the website is increasingly the bare minimum. Digital experiences can mean anything from connected Internet of Things (IoT) devices, smartphones, chatbots, augmented and virtual reality headsets, and even so-called zero user interfaces which lack the traditional interaction patterns we're used to. More and more, brands are trying to reach customers through browserless experiences and a href=, not pull-based, content/a — often by not accessing the website at all./p pLast year, we launched a new initiative called a href= Labs/a, our research and innovation lab, part of the Office of the CTO. Acquia Labs aims to link together the new realities in our market, our customers' needs in coming years, and the goals of Acquia's products and open-source efforts in the long term. In this blog post, I'll update you on what we're working on at the moment, what motivates our lab, and how to work with us./p figure class=figurediv class=img no-resize style=border: 1px solid #ccc; display: inline-block img src= style=display:block alt= //div /figureh3Alexa, ask GeorgiaGov/h3 pOne of the Acquia Labs' most exciting projects is our ongoing collaboration with a href= Interactive/a. Through an Amazon Echo integration with the a href= Drupal website/a, citizens can ask their government questions. Georgia residents will be able to find out how to apply for a fishing license, transfer an out-of-state driver's license, and register to vote just by consulting Alexa, which will also respond with sample follow-up questions to help the user move forward. It's a good example of how conversational interfaces can change civic engagement. Our belief is that conversational content and commerce will come to define many of the interactions we have with brands./p pThe state of Georgia has always been on the forefront of web accessibility. For example, from 2002 until 2006, Georgia piloted a time-limited text-to-speech telephony service which would allow website information and popular services like driver's license renewal to be offered to citizens. Today, it publishes a href= standards/a and works hard to make all of its websites accessible for users of assistive devices. This Alexa integration for Georgia will a href= that legacy/a by making important information about working with state government easy for anyone to access./p pAnd as a testament to the benefits of a href= in open source/a and our commitment to open-source software, Acquia Labs backported the Drupal 8 a href= for Amazon Echo/a to Drupal 7./p pHere's a demo video showing an initial prototype of the Alexa integration:/p iframe width=640 height=360 src= frameborder=0 allowfullscreen=/iframe h3Shopping with chatbots/h3 pIn addition to physical devices like the Amazon Echo, Acquia Labs has also been thinking about what is ahead for chatbots, another important component of the conversational web. Unlike in-home devices, chatbots are versatile because they can be used across multiple channels, whether on a native mobile application or a desktop website./p pThe Acquia Labs team built a chatbot demonstrating an integration with the inventory system and recipe collection available on the Drupal website of an imaginary grocery store. In this example, a shopper can interact with a branded chatbot named Freshbot to accomplish two common tasks when planning an upcoming barbecue./p pFirst, the user can use the chatbot to choose the best recipes from a list of recommendations with consideration for number of attendees, dietary restrictions, and other criteria. Second, the chatbot can present a shopping list with correct quantities of the ingredients she'll need for the barbecue. The ability to interact with a chatbot assistant rather than having to research and plan everything on your own can make hosting a barbecue a much easier and more efficient experience./p pCheck out our demo video, Shopping with chatbots, below:/p iframe width=640 height=360 src= frameborder=0 allowfullscreen=/iframe h3Collaborating with our customers/h3 pMany innovation labs are able to work without outside influence or revenue targets by relying on funding from within the organization. But this can potentially create too much distance between the innovation lab and the needs of the organization's customers. Instead, Acquia Labs explores new ideas by working on jointly funded projects for our clients./p pI think this model for innovation is a good approach for the next generation of labs. This vision allows us to help our customers stake ground in new territory while also moving our own internal progress forward. For more about our approach, check out this video from a panel discussion with our Acquia Labs lead Preston So, who a href= some of these ideas/a at SXSW 2017./p pIf you're looking at possibilities beyond what our current offerings are capable of today, if you're seeking guidance and help to execute on your own innovation priorities, or if you have a potential project that interests you but is too forward-looking right now, a href= Labs can help/a./p pemSpecial thanks to a href= So/a for contributions to this blog post and to a href= Deshpande/a (GeorgiaGov Interactive) and a href= Heath/a for feedback during the writing process./em/p

DrupalCon News: Get Ready for DrupalCon Nashville

Mon, 05/15/2017 - 17:51
div class=field field--name-body field--type-text-with-summary field--label-hiddendiv class=field__itemsdiv class=field__item evenpAs we conclude DrupalCon North America for 2017, it is with great excitement that we officially invite you to join us ata href= DrupalCon Nashville/a! To stay notified on key dates, registration opening and call for papers leave us your email address and namea href=;id=6934bc4d06 here/a. Don’t forget to strongcheck the option for DrupalCon News under My Email Subscriptions/strong to stay notified on the latest DrupalCon News./p/div/div/div

Drupal core announcements: Drupal core security release window on Wednesday, May 17, 2017

Mon, 05/15/2017 - 16:02
div class=field field-type-datestamp field-field-start7 div class=field-items div class=field-item odd div class=field-label-inline-first Start:nbsp;/div span class=date-display-single2017-05-17 span class=date-display-start12:00/spanspan class=date-display-separator - /spanspan class=date-display-end17:00/span America/New_York/span /div /div /div div class=field field-type-userreference field-field-organizers div class=field-labelOrganizers:nbsp;/div div class=field-items div class=field-item odd xjm /div div class=field-item even catch /div div class=field-item odd David_Rothstein /div div class=field-item even stefan.r /div div class=field-item odd cilefen /div /div /div div class=field field-type-text field-field-event-type div class=field-labelEvent type:nbsp;/div div class=field-items div class=field-item odd Online meeting (eg. IRC meeting) /div /div /div pThe monthly security release window for Drupal 8 and 7 core will take place on Wednesday, May 17./p pThis does not mean that a Drupal core security release will necessarily take place on that date for any of the Drupal 8 or 7 branches, only that you should watch for one (and be ready to update your Drupal sites in the event that the Drupal security team decides to make a release)./p pThere will be no bug fix or stable feature release on this date. The next window for a Drupal core patch (bug fix) release for all branches is Wednesday, June 07. The next scheduled minor (feature) release for Drupal 8 will be on Wednesday, October 5./p pFor more information on Drupal core release windows, see the documentation on a href= timing/a and a href= releases/a, and the a href= that led to this policy being implemented./p