Laravel comes with some very good testing tools but I also wanted to use Vue’s testing tools on my components. I ended up reading quite a few tutorials and watching a few videos before finding enough information to get it working.
I decided a good idea would be to list the most helpful resources and also setup a GitHub repo for future reference.
My starting point was the series of videos on Laracasts. Despite being nearly 3 years old the videos contain some very useful tips and techniques. Some of the examples need a bit of updating but I’d highly recommend watching all of them to get started.
I found two other articles that were of use although I did find I couldn’t follow them exactly, but it gave enough information that I could get up and running.
If you’ve been following on from the previous post you will be on the Page Structure page, if not then from the dashboard double click on the Hello World course, then from the Course structure page double click on the Take the test and say “Hello World” page.
You’ll now be back on the Course structure page. Double click on the page box which is now labelled Take the test and say “Hello World!”
To give ourselves a blank canvas we will first remove the default article, which will also remove its child block and component. Click the bin icon to the right of New Article Title and then click Yes, I’m sure in the confirmation dialog.
Now we can add in our articles, blocks and components.
Click Add article and then double click New Article Title
Change the title value to Hello World Test
Change the Instruction text to Answer all the questions
And then click the green Save button in the top left.
Double click New Block Title
Change the title to Question 1
And then click the green Save button in the top left.
Click on Add component and scroll to the bottom of the list that appears and click on Text Input. You may need to scroll the list down a bit more to see the options that appear for adding the Text Input. From those options choose Add full.
Click the cog icon in the top left of the Text Input component that will now be inside the Question 1 block and click Edit.
Change the Title to What will be our greeting?
Under Input Items click the Add button. For answers enter Hello and then click the blue OK button.
Change attempts to 2 so the user can have another attempt if they get it wrong the first time.
Tick the Allow ‘any case’ answers input so the user can enter hello or Hello.
We can add some feedback for our users to help them out during their learning. Update the following fields.
You are correct we will say Hello
That is not our greeting
Incorrect Not Final
That is not our greeting, please try again
Leave everything else as the defaults and click the green Save button in the top left.
If you now click the green Preview course button and then the View button to take you to the questions you can try adding correct and incorrect answers.
Where’s the feedback?
If you enter an incorrect answer and then click Show feedback you will notice that nothing happens. To fix this we need to enable an extension.
Back in the Authoring Tool select Manage extensions form the left hand menu. Under Available extensions find the Tutor extension and click the green Add button beside it.
This will now appear in the Enabled extensions at the top of the page.
If you read the description of the Tutor extension you will see it does exactly what we are after “An extension which provides a basic feedback overlay for question components”.
If you now return to our course, preview it and enter an incorrect answer you will see our feedback now appears.
To finish up we will add one more component to utilise a different question format.
Return to the Page structure page and click on Add block below our Text input.
As we did earlier we will change the block title, this time to Question 2
Click Add component and choose Multiple Choice Question from the list and Add full.
Click the cog icon to edit the Multiple Choice and update the following fields
What are we greeting?
World – Mark this as a correct answer, see the image below
You are correct we are greeting the world
That is not what we are greeting
Incorrect Not Final feedback
That is not what we are greeting, please try again
If you now preview the course you will see our second question in the format of a multiple choice list.
Now we have a couple of questions for our users the next post will cover letting our user know how they did with by adding an assessment.
Website search can often be a thorny subject. Expectations of search capabilities have been set very high by search engines. The default search offered by content management systems (CMSs) is often a bit basic by comparison. For example, the results are often not the most relevant to the search term used because the CMS is only offering a simple “does this page contain this word” method.
Our discovery work for the Competition Appeal Tribunal site revealed
a specialised set of search requirements. When working with a CMS, I’m a
firm believer that you go with the flow of its strong and weak points,
and try not to fight it. With that philosophy in mind, my instinct was
not to struggle to make native CMS search fit the requirements but
rather to develop a custom solution for this site.
We opted for Elasticsearch, which is described as a “RESTful search
and analytics engine”, combined with the very well maintained and
documented Elasticsearch PHP library.
As soon as you put some data into Elasticsearch it does a good job of
returning relevant results. But where it really excels is when you
begin to fine tune it to your needs.
As an example, there is a field on the site that we needed to be able
to perform full text searches and sorts. This can be accomplished by
duplicating the field into two different “types” allowing one to have
all of the full text search capabilities whilst the other is used for
On another project for US law firm Buckley Sandler (that is built on
Drupal), the different content types and fields did not all have the
same relevance in search results. By applying a “boost” to specific
content types and fields we were able to deliver the most relevant
results to users. Whilst Drupal’s native search API does allow a boost
to be applied to certain fields, using Elasticsearch we were able to
boost specific content types, individual pages and taxonomy terms.
This level of customisation may not be required on your project, but
if it is I highly recommend trying Elasticsearch as I’m confident it can
meet your needs.
After reading Build Chatbots with PHP by Christoph Rumpel I started making some simple chatbots and quite quickly moved on to more complex interactions. It didn’t take long to get something basic up and running, which in turn, got me really excited about the possibilities.
But – there’s always a ‘but’ isn’t there – it also didn’t take long for the bots to fail to have answers, especially when I showed them to colleagues who didn’t know the precise phrases the bots were listening for.
To try and get over this I used Dialogflow for the backend as it has natural language parsing capabilities. It also has a very nice UI that will allow even non-technical users to build up conversations. After a short tutorial I found Dialogflow easy to use and very powerful for the little effort needed to start using it.
Highlighted by others asking my bot questions it did not understand, it is essential that you do in-depth user research before you launch your bot. The last thing you want is to spend a lot of time and money only for people to never use the chatbot as they had a bad first experience.
Just like any web project, speaking to the people who will be interacting with your site / bot will show you interactions you can never have imagined by yourself.
It’s highly likely that you run some analytics or monitoring code on your website to ensure users are moving through the site as expected. You should also be monitoring the chatbot’s interactions to see where users take conversations and if any of these lead to dead ends.
This could be in the form of capturing the sessions with a tool such as Full Story, or logging the conversations to a database that you can then analyse at a later date.
Machine learning is great but machines also need help as well. Whilst Dialogflow has a machine learning aspect to it there will more than likely be cases where a user asks a question that it cannot learn from. By spotting new forms of interaction early you can return to the research phase to see how others would phrase the same question and then feed these alternatives into the backend.
You may also find people are looking for specific areas of your site and your overall information architecture could do with some readjustment. Or better still, maybe people are coming to you looking for a service or product you do not yet offer but could do, leading to new lines of business.
Chatbots are an exciting development and give the potential to have a form of customer support that’s always on hand. But they are not something that can be set up and never looked at again, otherwise their lack of knowledge can leave users feeling frustrated and abandoning your site.
Towards the end of last year I had several ideas for blog posts
rattling round my head. I made a conscious decision I should actually
finish the blog posts instead of leaving them as “Draft” and thinking
“I’ll finish that soon”.
Off To A Flyer
When you have lots of ideas the posts just flow, you have momentum and enthusiasm and you’re a blogger master.
I even started setting myself reminders and began blogging quite
regularly. Then it stopped. Like so many people stop and I’m not sure
why. I missed a week, promised I’d finish the post next week and then
all of sudden I was out of the habit.
I had a think about what made me start blogging in the first place
Had some ideas
Sure up my own thoughts and processes
It was good to finally finish off some of the blog posts I had stored
as drafts and that made me look at other aspects of my job and think “I
could post about that”.
I’m sure most developers document parts of their jobs that they don’t
do so frequently. My own website seems a good place to keep those
A bit like rubber ducking the act of writing out a process really
helps me to straighten out my thoughts and ensure I’ve covered all
aspects of a job.
Maybe I aimed a little too high with once a week at the start and things started to feel forced.
My aim going forward is to commit to once a month but if I have a
series of posts I’ll possibly look at releasing those a little closer
Ultimately I want it to be a thing I enjoy rather than forcing myself to do it.
Thanks To Anyone Who Blogs
I’ve learnt so much from blog posts over the years. People just
sharing a little bit of knowledge they’ve learnt to people consciously
documenting the process they’ve been through.
It’s also given me a huge appreciation of people like Paul Boag who
have consistently produced lots of high quality content over a long
period of time.
Maybe, just maybe, this blog post will make you write a blog post,
and you never know maybe I’ll find that blog post and it will help me.
Even if that never happens there is a good chance it will help someone,
even if it’s just your getting your thoughts in order.
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.
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.
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.
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.
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.
Design kickoffs are great, it’s the start of the project, expectations are high, ideas are thrown around liberally and everyone is excited about what’s to come. So why should you bring along the person responsible fo database tables and code no one will ever see?
Get to know the business
Invitations to tender and design briefs are very useful documents to get an initial idea of what a business does and what they offer. You may even be able to gather some useful information from their existing website, or you may not and that maybe the reason you’ve been brought in.
Having attended many kickoff meetings now it has become obvious to me that you only really get to know the goals of a business when you speak to those that work there.
As an example the company streamline may be “We provide widget X to 90% of the industry” but when you speak to the web team the real problem is embedding YouTube videos means copy and pasting embed code into a text box. You aren’t hired to try and sell more widgets, you are there to help the web team be able to sell more widgets.
Overall knowledge of project
“We want to modernise the look and feel of our current site and make it responsive” this may be the driving force behind project but more than likely there are many other goals that the client has in mind that can easily be accomplished within scope and budget.
I can guarantee that in the meeting someone will jokingly complain about a current process that they have to go through that can easily be automated in the new project. When offering a solution to the client it is always met with a smile and a comment such as “that would save me so much time”.
Having a broader idea of the whole project can also help you set up for potential future work. Somethings may be identified that can’t fit in the current timescale but you can build in the foundations that will allow future updates to be made.
Possible technical hurdles
Whilst I love the excitement a new project brings it can be the case that enthusiasm takes over a little and it can be an excellent time to spot any potential technical hurdles that are flagged up. I have been on plenty of projects where it’s casually mentioned that content lives in this system or the data needs to be sent to another place for a contact database.
Some companies may have certain limitations on the technologies they wish to use. They may only want to use their own servers or a certain application stack to allow for easy integration with other services they use.
Forming a relationship
As I work for Headscape, who are an agency, rather than an in house team forming a relationship with clients early on is highly valuable for a good working relationship.
Once the kickoff is done I rarely see the client again face to face. We do however normally have at least a weekly meeting on Skype or GoTo Meeting. Having met in person I always find it helps these calls as you can at least picture the people and their mannerisms. In every project I’ve done the calls always have a friendlier tone to them after having met.
Gets me out for the day
Us backend developers may be stereotyped as shy people who want to sit in a room with no social interaction but if you are in two minds as to wether you should take your backend developer along to the design kickoff meeting I hope the above will convince you that it will really help the project if you do.
In my younger days I worked in a surf shop where the owner was very hot on customer service. He liked us to greet every customer when they entered and left. To start with this seemed quite unnatural and the odd customer even seemed confused. In general though it did open up communication and people seemed genuinely happy with the interaction even when you said thanks to them for leaving empty handed.
Now I’m a web developer and spend the majority of my days sat in a room by myself but customer service is just as important. With you’re building an agency building a site or working on an app you will have customers and they deserve to be treated well.
These days there are many developers and agencies out there that all do fantastic work. You can no longer rely on being a scarce resource. Providing great customer service goes a long way to making the project enjoyable and successful as well as paving the way for repeat business and recommendations.
It may seem like basics you teach small children but remembering to be polite in the digital world so not be taken for granted. A simple “thank you” when the client helps by sending you the updated text or images you requested sets up a good working relationship.
It’s their site, they use it, try to accommodate them
You may not always agree with your clients requests and often this comes down to opinion. At he end of the day they are the ones who are paying for a website and will have to live with it everyday.
As an example there maybe a content management task with two options.
Simple technologically but harder for the CMS user
Harder technologically but makes the CMS user’s job easier
Always try to go for option 2. I often find it’s the small things that make people’s lives easier that are most appreciated.
They may not understand as well as you, try different explanations
If only clients could see what I see in my head. Everyone learns and understands differently and concepts that make perfect sense to me about a database can be baffling for others. There are many times you will need to take a different approach to explanations to help clients understand your concept.
For me nothing is better than quickly mocking something up so we are all looking at the same thing rather than relying on a fuzzy dewscription that can easily be interpreted wrongly.
Check they understand, ask if they are happy
Sometimes people end up agreeing when they aren’t 100% sure of the outcome. There is always lots to be thinking about in web projects. Taking a few seconds at the end of a discussion to ensure everyone understands the next steps and they are happy with them can save doing unnecessary work when the client reveals this wasn’t what they really wanted.
I find there is rarely a single option for solutions. Many times it’s a case of there being at least two ways we could achieve a task, both of which come with pros and cons.
Using the above advice provide the client with the options and a clear explanation of the pros and cons and let them decide their preferred implementation.
It not just for customers
Looking back at my time in the surf shop it didn’t take long before I was chatting to everyone I came into contact with and I instantly recognised how this simple act made all interactions easier and more enjoyable. All of the above points can be applied to your colleagues as well.
For example if a designer comes to you with an idea for an interactive menu there maybe two ways it could be implemented on the website. Discuss the merits of each idea and which will benefit the design the best and everyone will be happy. The designer gets to choose the best visual and you don’t get a technically impossible PSD.