Today I am Not Working From Home

Posted on March 27, 2018 by ian

I’m a full time remote worker and have a room at home set up as an office I can shut myself away in. As I’ve talked about before I love working from home but this week for the first time I decided to try remote working from a public space. I choose a local Wetherspoons as it seemed to tick all the boxes and was a short walk from home.

Setting Off

The night before I actually made a list to ensure I’d have everything I needed. Small things like earphones that I don’t normally use should come in very handy in a public space. One last mental check before leaving home and I was off. Luckily it was a dry morning and having a walk first thing was very nice.

Essentials, Free WiFi and Power

A lot of places have free WiFi these days so I knew that wouldn’t be a problem but it was only on my way that I realised I would need a power supply to last the whole day, rookie error. I opted for the honest approach and just asked when I arrived. Handily there was a nice table tucked away at the back with a power socket.

What do I do When I Need the toilet?

Everything was going well and then I hit my first “What do I do now?” moment. When I need to pop to the toilet what do I do with all my stuff. By this time there was a table of retired gentlemen sat on the table beside me. I had protectors of my belongings.

Not as Many Screen Breaks

When I’m at home I find myself getting up to make a drink a bit more often and normally have few paces around the kitchen while I wait for the kettle to boil. Being somewhere where food and drink are brought to you I found myself sitting in the same place for a lot longer than I usually would.

Planning Calls

As I mentioned in my “Make working from home work for you and your team” post I like to make myself available for quick chats with colleagues. Today I had no client calls planned and didn’t end up needing to chat with anyone else. I had my earphones and I suppose I would just have had to try and talk at a polite volume had I needed to.

How Long Can I Stay

Then came the second “What do I do now?” moment. When I arrived I ordered food and drink, but now I feel like I’ve outstayed my welcome, and that was nothing to do with the staff just my internal thoughts. So I ordered another drink and a small bite to eat.

Overall Productivity

When lunchtime came I made sure to leave and have some time away from the “desk” just as I do at home. I got plenty done away from home and don’t feel it impacted my productivity at all. It was nice to be somewhere different and it adds to my enjoyment that I’m lucky enough to have a job where I can do such a thing.

Would I do it Again?

Yes, but certainly not everyday. Ignoring the cost of buying food and drink so I feel like I can stay, I do like being in the home office. Maybe I shall save it as a once a month treat.

Posted in Uncategorized | Leave a comment

Fractal – A Backend Developers Perspective

Posted on March 20, 2018 by ian

One of the great thing about attending conferences is attending a talk and learning about something you didn’t even realise you wanted to know about.

During DrupalCon Vienna I saw a talk by Anton Staroverov and Tassilo Groeper from Wondrous titled Decouple your Twig from PHP and make Frontenders happy! In the talk they showed a tool called Fractal which has been developed by Clearleft. After seeing the presentation I felt this would be a very useful tool so set about looking into it further.

Easy to Use

That evening I started to try out Fractal and within 10 minutes I had a build up and running and had added a component to it.

Since then at Headscape we have switched the default templating language to Twig to tie it into our Drupal 8 development. We’ve also used it’s static output to produce pattern libraries for clients.

Reference Point for All

Not only is Fractal a useful tool for frontend developers as mentioned above we also use it to show clients both individual components and components working together.

As a predominantly backend developer I also find it useful when I need to add a button for example. I can easily find all the button options in the nice frontend UI and see what classes I need to add.

Helps Building Templates and Reusable Components

Having one place where we can list all of the components and then using this as the actual templates for the production build is very useful for me.

During development, wether that is early stages or updates in the future, I find having a reference point of components speeds up the process.

For example if we have a new content type I can look at the various view modes we already have to see how I should be outputting the content.

With how quick it is to get something up and running with Fractal I’d encourage you to try it out. It might take a little bit of settings adjustment and maybe even splitting you’re templates and CSS out into more componentised methods but I think the benefits you’ll gain will be worth it.

Posted in Uncategorized | Leave a comment

The Importance of Real Data

Posted on March 13, 2018 by ian

At the start of a project there are many different objectives and everyone involved has their own sense of priorities or tasks they wish to a tackle first. For me that is generally sorting the backend into a nicely organised structure that will allow flexibility in the output both now and in the future.

A big part of this is getting real data in so the front end output is as close to final content as possible. This allows us to realistically analysis how the content and design will work together.

Does it Fit

As flexible as the web is with it’s layouts there are still times when a design will only allow a certain amount of text or number of items to appear before it looks squeezed. For example text in a sidebar can be excellent if it’s short and snappy. However if the actual content is a long paragraph it will be very hard to read.

I’ve also experienced this with titles where they can be in a large font size. Taking into consideration how that works over multiple lines is a useful exercise.

Lining Up

Adding columns or boxes to a layout is a useful way of defining content areas. Without real data these areas normally contain filler text, occasionally the same filler text, which can mean boxes are the same height as each other.

On many occasions I’ve seen a design change as soon as real content is output as one boxes contains many more lines than the other causing them to no longer vertical match in height.

There are ways to handle this with JavaScript and more and more CSS but it is still a consideration at this point in time.

Missing Anything

This is normally the realm of imagery as it is the hardest part of content to populate. Instead of just using test images take the time to ensure the design works with other no images or a placeholder repeated multiple times.

CMS Tools

Content editors often need to add some classes or styles to text entered in wysiwyg editors to help front end presentation. By their nature these editors don’t or can’t always output perfect markup. By using them to populate the site at design and development time you can save a lot of headaches by utilising the markup they do produce and not battling against it.

Overall

On every project I find the use of real data and content smooths out the development process as all involved parties can see a “real world” example of how the site will function with it’s content.

Posted in Web Development | Leave a comment

Drupal 8 Workflow Notifications with Rules Part 3

Posted on March 6, 2018 by ian

In previous posts I’ve covered enabling and editing a Workflow and then sending an email when a new content moderation state has been saved.

In this post we will complete the loop by sending emails when a content moderation state has been updated.

In this example an editor will publish the node and the rule will email the node creator to tell them it has been published.

Head to the Rules admin page /admin/config/workflow/rules and click Add reaction rule

This time we want to choose After updating content moderation state from the React on event select.

Adding a rules event for updating content moderation state

This time round we will need two conditions.

  1. Check the unchanged moderation state
  2. Check the new moderation state

Click the Add condition button and then choose Data comparison from the select.

For the data to compare value you can either use the data selection or enter

content_moderation_state_unchanged.moderation_state.value

Then for the data value enter review

This is the moderation state the node was in before it was saved.

Now click save.

Moderation state unchanged data comparison condition

Add another data comparison condition then this time enter the following

Data to compare value

content_moderation_state.moderation_state.value

Data value

published

New moderation state data comparison condition

Next we need to fetch the entity so we can use it’s values in our email.

Back on the edit page for this rule click Add action and choose Fetch entity by id from the select.

For Entity type enter node and for the Identifier value enter

content_moderation_state.content_entity_id.value

Then click save.

Now we can send an email to the node creator.
Click Add action and choose Send email.

In the Send to field use direct input and enter

{{entity_fetched.uid.entity.mail.value}}

This is a token that gets replaced with the users email address.

For subject we can just enter something appropriate such as Published Notification

For the message we will use the direct input mode an a token that provides the entity title

Your content {{entity_fetched.title.value}} has been published.

Email action

Save that and then save the rule.

As is often the case with Drupal it’s worth clearing your cache before testing.

Rules is still in it’s infancy for Drupal 8 but I feel it provides enough functionality and is well enough supported that it can be included in production site.

Posted in Uncategorized | Leave a comment

Changing the Default Content Moderation State in Drupal 8

Posted on February 27, 2018 by ian

I have been working with the Content Moderation module in Drupal 8 and one slight niggle we came across was the default option for the Moderation state.

If the current state was In Review we would like the Change to option to also be In Review rather than Draft.

Current default moderation state

The desired default state option

This means the default is to keep the entity in it’s current state rather than switching to a new state. Switching to a new state is then an active task for the editor.

I did this by implementing hook_form_alter() in a custom module.

/**
 * Implements hook_form_alter().
 */
function my_module_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

if ( array_key_exists('moderation_state', $form) ) {

$node = $form_state->getFormObject()->getEntity();

$moderationState = $node->get('moderation_state')->getValue('state');

if (isset($moderationState[0]['value'])) {
 $form['moderation_state']['widget'][0]['state']['#default_value'] = $moderationState[0]['value'];
 }

}

}

In this function we first check if the form contains the moderation_state key.

Next we load the node so we can access it’s properties.

The moderation state is then retrieved from the node.

The last part is to check if the moderation state has a value. If we are creating a node this will not be set.

In the if statement we then set the default value to the current state.

Posted in Web Development | Tagged , | 2 Comments

Drupal 8 Workflow Notifications with Rules Part 2

Posted on February 20, 2018 by ian

In my previous post I talked through setting up Content Moderation with a review state. In this post we will complete the process by sending email notifications via the Rules module when the moderation state is changed.

Install Rules

To enable the Rules module we first need to require it via Composer. Run the following from the command line in the root of your project
composer require drupal/rules

Once this has run you can return to the Extend page and enable the Rules module.

Create the First Rule

By the end we will have three rules for different states and transitions. The first rule will handle the creation of content the state is set straight to Review.

To create a rule navigate to Manage -> Configuration -> Rules (/admin/config/workflow/rules)

Once on that page click on the Add a reaction rule button. Fill in the details with the following.

Label: Notify reviewers of content created for review

React on event: After saving new content moderation state

Selecting React on event: After saving new content moderation state

We now need to add a condition so click the Add condition button.

From the select box choose Data Comparison from under Data and then click Continue

Selecting Data Comparison condition

When adding our condition it is useful to Switch to data selection for the Data selector input. This will help us drill down into the available data.

Using data selection to find the required selector

The Data selector we want is content_moderation_state.moderation_state.value

Leave the Operator as ==

Set the Data value to review. This is the machine name of our state that was created in the Editorial Workflow.

Completed data comparison condition

We can now save our condition.

Adding an Action

Before we create our action to send the email we need to make the node available to our rule so we can use it’s title and ID in the email body.

Click Add action and then choose Fetch entity by id under the Entity section.

Adding a fetch entity by id action

On the next screen set the Entity Type value to node and then for the Identifier we will again switch to data selection.

Using the autocomplete we set the Identifier value to content_moderation_state.content_entity_id.value

Completed fetch entity by id action

Sending the email

We can now add an action for sending the email. Click the Add action button and choose Send email from the System section of the dropdown.

Choosing the send email action

For the Send To we use an email address that will forward to all reviewers, e.g. reviewers@example.com

For the Subject we use Item Ready For Review.

For the body we want to provide some information for our reviewers so we set it to

Please review {{ entity_fetched.title.value }} at https://example.com/node/{{ entity_fetched.nid.value }}

The two parts in curly brackets are tokens from our fetched entity, node, that we performed earlier.

When the email sends the body would would look something like

Please review My New Page at https://example.com/node/12

In the next part we will create two more rules to handle updating the moderation state.

Posted in Web Development | Tagged , , , | Leave a comment

Drupal 8 Workflow Notifications with Rules Part 1

Posted on February 13, 2018 by ian

For Drupal projects I’ve always used the comprehensive suite of tools provided by Workbench. But when I started a new project and saw that Workflow is hopefully making it’s way into core it felt like a good time to try it out. One part of the project was the addition of notifications when Workflow states were changed. With the Rules module also receiving lots of attention I decided combining the two modules was the best approach.

The following example was made using Drupal 8.4.4

Enable the Modules

First of all we have to enable the Workflows module and the Content Moderation module. Click on Extend form the admin menu or go to /admin/modules and find these two modules.

When enabling Content Moderation you will be warned that it is an experimental module. https://www.drupal.org/core/experimental

Edit the Workflow

If you go to /admin/config/workflow/workflows you will see we have one workflow called Editorial.

List of available Workflows

Click the Edit button to go to /admin/config/workflow/workflows/manage/editorial

States in the Editorial Workflow

We currently have three states but we want to add a new one for Review. Click the Add a new state link. On the Add state page all we need to enter is a label of Review and then click Save.

Adding a new Workflow state

Back on the Edit Editorial Workflow page drag the Review state to in between Draft and Published and then click the Save button at the bottom of the page.

Reordering the Workflow States

We now need to edit the transitions to allow the flow between draft, review and publish. This is how the transitions look by default. We need to enable a draft to be become a review and a review to become published. We want to cut out the draft to published transition.

Below are the default transitions, we’ll first add our new ones and then modify the existing ones.

List of the Editorial Workflow transitions

Click the Add a new transition link and you will be on a page with options for Label, From and To. Set the Label to Review, From to Draft and To as Review then click Save.

Adding a new Workflow transition

Back on the main page drag the new Review transition up so it is between Create New Draft and Publish and then click Save.

Reordering the Workflow transitions

We now need to update the existing transitions. Change the Create New Draft From value. It is currently Draft, Published and we need it to be Draft, Review.

Lastly for transitions change the Publish transitions’s From value to Review, Publish. This means a node has to go from Draft to Review before it can be published.

The completed transitions

Add The Workflow to Entities

The last part of the workflow setup is to enable it for any required content types or entities. At the bottom of the page there is the section This Workflow Applies To. In this example we will enable this workflow for Basic Pages.

Click the Select button beside Content types, select Basic Page from the overlay and then click Save. Now If you go to add a Basic Page you will see at the bottom there is a select where you can choose the State of you node.

Available Workflow states when saving a node

In the next part we will look at sending email notifications when the Workflow state changes using the Rules module.

Posted in Web Development | Tagged , , , | Leave a comment

Coding With Pen and Paper

Posted on February 6, 2018 by ian

Producing a rough sketch on a piece of paper may seem more like the realms of a designer desperately trying to get an idea out of their head into a physical form to share with others but I find it can also help me develop backend code.

Planning

When starting a new bit of work I normally have the rough idea in my head of how I’m going to modularise the code and what functionality each piece will need. However, if I plunge straight into coding I can at times duplicate functionality that maybe better condensed into one function of a class that other classes can extend.

By listing all the functionality I require first I can then begin to separate these concerns into classes and functions. This helps me to spot where functionality is needed in several places and any variations that maybe required, e.g. giving the option to return in differing formats.

Visualisation

My head can be a great place to start work and it all seems very clear, but putting it down on paper really helps me visualise how code can work together.

Is there a certain flow of data that must be followed? Lining up each step with a simple visual and showing how data can flow through a process and the possible outcomes at each step will highlight any areas that need special attention.

Collaboration

There are so many times when I’m speaking to clients or colleagues and I wish they could see the picture that was in my head. Things that seem very logical to me can sometimes not be vocalised as simply.

By sketching out the concept it can help others to understand what the plan is and how all the pieces will work together.

Reference

As I move forward with the work it can be easy to start focusing on the small details of each individual piece of functionality. By having a good visual reference for the overall work it helps me to keep considering the overall functionality and how it will all fit together.

In much the same way that testing can help you organise your thoughts on how your code should be structured, I find that using pen and paper is a great way to get my thoughts in order and keep the work on track.

Posted in My work, Web Development | Tagged | Leave a comment

Curse of the Redesign: Moving to the Live Environment

Posted on January 30, 2018 by ian

When we develop sites we start off locally and in a development environment. During the development process we continue this process as we evolve the design and functionality.

But there comes a point where the site we’re working moves to the stage where it will become the live site. At this point it’s preferable to move it to the live environment.

Configuration

We try and match development and live environments as much as possible but it’s not always possible to get exact matches due to various constraints.

By working on a live environment as early as possible any differences in configuration such as file permissions can be worked out early on.

With PHP and Drupal moving to Composer based workflows there constraints on PHP versions for different modules. Even Drupal will be implementing a minimum PHP version. Discrepancies like this need to be spotted and resolved as early as possible to ensure the site functions as expected when launched.

Content

As I talked about in my previous post on Handling Existing Content, we often import content and do some manipulation of it. Further to this both the client and team at Headscape will add additional content.

We don’t want to risk this being incorrectly updated or lost. Having a copy of the site on the live server gives a clear distinction as to where the true source of content lies.

File uploads is another source of content that should not be ignored. By working on the live environment you ensure that file uploads and access work correctly, as described above with regards to permissions.

It also saves a time consuming task of moving any uploads from a development environment to the live environment before launch.

SSL Certificates

It’s rare to work on a site that does not include an SSL certificate. Even simple sites often have a contact form so data can be securely sent and combined with search engines ranking https sites better it makes a lot of sense.

I won’t go into detail here but in a previous post I detailed how to test an SSL certificate without the domain name.

Reassurance

Overall working on the actual live environment provides a nice level of reassurance before you make that all important DNS switch.

A simple thing like ensuring the server is correctly sending out emails can make launch day an enjoyable experience rather than a mad scramble to debug why your killer feature isn’t working as expected.

Posted in My work, Web Development | Tagged | Leave a comment

Curse of the Redesign: Handling Existing Content

Posted on January 23, 2018 by ian

As I spoke about in the previous post about redesigns my work generally focuses on clients who have existing sites that need to be moved to a new Content Management System and have a new design applied to them.

Whilst this can have it’s advantages for design work by allowing the front end developers far more freedom with markup it has some challenges for the backend.

Discovery

Every database I have received have been from a different CMS, some have been MySQL and some have been Microsoft SQL database but all have required some discovery.

We do a lot of work in Drupal so I always import the old database to MySQL to make working between the two databases as smooth as possible.

Once I have the old database imported I then set about piecing together the structure. Most database are actually fairly simple when you start to look into them and follow the same patterns.

A base table with master ID
Associated tables with extra data tied to the masterID
A table joining master IDs together e.g. blog posts and authors

Once you have found the patterns it is usually the same for all content types that you will be importing.

Tidy Up

Running an import of data gives us a great chance to tidy up both content and data.

Tidying up the content can be simple clauses such as only import items that have been created in the last 5 years.

Or it can be more complicated. We worked on a project where the tagging had got out of hand so we set a limit of a maximum of 5 tags in the new site. This meant a decision had to be made on how to handle the import of a subset of tags.

We made a list of priority tags, if these were linked to from the item then they were included. If they were not then we had a manual review process. The manual job actually ended up being a lot smaller than anticipated and could be worked through very quickly.

Old data from a CMS is often littered with poor HTML that needs to be cleaned and during a pragmatic import of data is a perfect time to do it. A tool such as HTML Purifier can help you clean up that old mess.

Store IDs

Probably my top tip for importing data is to keep a mapping between the old IDs and the new IDs. This allows repeated updating of the data and also a useful way to compare the two data sets.

It also allows the import of join tables as mentioned above. If you import authors and store their old IDs when you import the blog posts you have a way of joining the two together. The basic logic would be

Find old author ID for this blog post
Look up mapping between old author id and new author ID
Set the blog post to be connected to the new author ID

Choose Candidates

If the dataset is large enough to warrant migration scripts then it is also too large to check every single imported item. Work with the client in selecting some candidate items for data comparison. This will mean you have useful reference points for both you and the client to cross check the imported data.

Use Your CMS Tools

Most Content Management Systems offer an API for data creation and Drupal is no exception. You should always use these APIs for content creation rather than inserting the data straight into the database.

Run It and Run It Again

The great thing about computers is you can get them to do things over and over again very quickly in exactly the same way.

We always have to run scripts many times. This can be due to new fields being added or data needing to be formatted in a different way.

It is also highly likely that lots of new content will be added between the time you got a copy of the old site database and the new site going live. All these items can also be imported saving the client manually adding them.

Get Stuck In

The first time I was faced with an unknown database it was quite overwhelming but many years on and many different databases in I’m no longer phased by it. My advice is to logically work through the data and always think about repeatedly running the import scripts.

Posted in My work, Web Development | Tagged , | Leave a comment