Jack of all trades? Or master of one?
An early temptation when setting up a development shop is to diversify: to provide logo design, SEO assistance, print work, marketing. The ability to sell yourself to clients as a one stop shop is compelling, with the idea being that you can capture more work and provide a better experience for customers.
At Go Tripod, we don't work that way.
We're software developers and web experts. We like focus. By being up front and telling clients that we concentrate on what we do best, we can avoid spreading ourselves too thinly. The flip side of being a one stop shop is that there's a lack of group knowledge about software best practices, such as using source control, automated testing, or keeping up to speed with the latest tools.
What happens when our clients do need other services? Then we hit our network. We can reach out to those who are using our approach: focusing on what they do best. That means that we can call upon the outstanding people in a particular field, bringing in specialists where needed. We'll use Teamwork to bring everyone together to make sure the lines of communication remain clear, and in doing so can create projects that are greater than the sum of their parts.
We know code, and we know the web. Let us show you.
Project planning with site maps and user flow diagrams
We're in the early days of planning out a web design-and-build project with a new client. A key part of this process is the creation of a site map.
The Site Map
In its simplest form, a site map is a pictorial representation of the pages required of a website. With smaller websites this list of pages is easy to define and it's not much more of a stretch to group them into a sensible order.
With larger web projects this task can be much more involved and producing a sensible site map relies on a host of other disciplines (like information architecture and user experience design) but the requirements of the job at hand fall mostly into the former camp.
It's worth demonstrating that a sensible site map doesn't merely need to show a breakdown of a website's pages. Instead it should also show how they fit together, where multiple pages might be grouped via dynamic data sources and what kind of elements might be common to every page.
The trick is fitting all of this information into a straight forward infographic that stakeholders can immediately understand (and preferably print).
Enter our case in point (click to expand):
Note that I have used the homepage to define the site-wide header and footer information as well as the main navigation options. It is clear each navigation option represents a top tier page and it is immediately obvious which option includes additional features, pages or sub-sections.
(Strictly speaking the header and footer should be represented on every page, rather than the homepage alone, but to harness the power of an infographic one must expect some inferral ability on the part of our audience.)
The User Flow Diagram
User flow diagrams differ somewhat from site maps in so far as they attempt to demonstrate how a user interacts with a website rather than how the website's contents are hierarchically broken down.
Naturally there is some crossover between these two approaches and again the complexity of a user flow diagram will depend on the complexity of the website (or process) concerned.
One way to think of these things is that whilst both diagrams might utilise boxes and arrows, the user flow diagram is more likely to take the shape of a flow chart.
With our current project, there was a loosely defined need for a restricted client area that would allow logged in users to access (mostly product based) information unavailable to regular visitors.
Whereas our client had been quite clear about what content was required of the front-end, defining this 'restricted area' proved much more elusive. Instead we were given a long list of bullet point thoughts and ideas regarding things they might like.
As it happens, attempting to formalise these loosely defined requirements suits the user flow approach better than the site map approach.
And here is the case in point (click to expand):
Note that this diagram demonstrates how a user might interact with the website and that the flow, in this instance, is shown from left to right.
Starting with the login process, the customer has a number of options; accessing important information available from their dashboard, amending their account details, or drilling down into specific product information.
Again, stakeholders can immediately make sense of what's been proposed. This diagram should, after all, reflect a sensible interpretation of the client's hastily compiled requirement list.
But also, importantly, it serves as an early conceptual blueprint that encourages client feedback. The flow diagram, once finalised, will additionally help formalise the development process.
In conclusion - a collection of carefully thought out infographics can serve as a powerful tool in terms of both defining a new project and improving an existing website or set of software processes.
Improved font loading
Back in February I wrote about a font-loading technique I'd implemented on a new project, but there was a problem with it - the script ran on every page load meaning the browser cache was never used to serve the fonts. There are many variations on the same theme with some using session cookies to determine if it's a user's first visit to the site, but they all come with their own quirks to overcome. After further research and testing I decided that, while not fully supported yet, the most effective and future-proof solution to this issue is not a JavaScript solution, but a CSS one.
Enter our old friend, @font-face
The @font-face rule has been around as long as I can remember but went steadily out of favour as the popularity of FOUT techniques grew. This is because its default behaviour results in a FOIT while the font is downloaded and with the rise of mobile devices on sluggish connections users can be left with a blank page for seconds or even minutes. This is no longer the case thanks to a new attribute, font-display.
Browser support for font-display is growing with the latest versions of Firefox, Chrome and Safari all playing ball. It degrades gracefully for all other browsers, falling back to its default behaviour and, as an added perk, we don't need to worry about users with JavaScript disabled.
Optimising fonts
Here at Go Tripod we use Google Fonts for most projects but in their default format (TTF) file sizes can be much larger than is required. On slower connections this means the web fonts will take noticeably longer to swap with the system fonts and it's best we do everything to deliver these assets to the user as quickly as possible. We use Font Squirrel's Webfont Generator to convert our TTFs from Google into WOFF and WOFF2 formats which often reduces their size by over 50% meaning the time it takes to download them is significantly decreased. This coupled with the font-display: swap; attribute means we're providing most users with a superior experience which doesn't rely on JavaScript, falls back gracefully and will soon be supported by all major browsers.
We work remotely - here's why and here's how
Go Tripod is based at Tremough Innovation Centre in Penryn, Cornwall, but our team members work remotely from locations of their choosing. By giving our staff the freedom to create their own environment, they're able to work smarter and in the way they prefer.
How do we make sure that everyone's on the same page, providing our clients with the best service we can? We've got a suite of tools that help us coordinate and communicate.
It may be seen as old hat but for most companies, including us, email is still a huge part of our operation. It's often the first point of contact for new enquiries, and it's an important mechanism for us to keep in contact with our clients.
Slack
We use Slack as our main means of communicating internally. It's a chat system that allows us to have distinct channels for a variety of different topics and typically we have one for each project. This gives our discussions focus, and allows us to have a history of what's been said (which is searchable for future reference). If we need to bring in a partner, such as a client or a contractor, then we can invite them to a channel as a guest so we can collaborate more easily.
Teamwork
As a project progresses, we track the outstanding items and the evolution of features using a project management tool called Teamwork. Our clients (you could be one too!) get their own login so they can participate in discussions, provide feedback and help us understand any issues. We can also track our time to invoice accurately, and we can see, at-a-glance, the status of any of our current projects.
Appear.in
No matter how fancy our chatroom and project management tools are, sometimes a phone call is the best way of getting a point across. We'll often use appear.in to share a screen between the team to demonstrate a new feature or discuss an implementation, but we'll also use it to let our team catch up. It supports webcams too so we can even look at each other's ugly mugs!
Yodel.io
Since we spend so much time on Slack, we wondered if we could hook phone calls into it. It turns out we can with Yodel.io. When someone calls our office number, if no-one's there to pick up, it'll be routed into Slack where it can be answered in the browser with the press of a button. We can even redirect the call to the correct person's mobile or send it to a customised voice message if we're all unavailable.
By using this set of tools we can work more efficiently and deliver better value to our clients. Working remotely is becoming increasingly popular, and at Go Tripod we've been remote-working advocates since our formation in 2009. In fact, we think that working remotely enables us to provide a better service. Why not try us out?
Ensuring the security of WordPress websites
We've worked with various content management systems (CMS) over the years but WordPress is our favourite. Thanks to its powerful user interface and open source architecture, it's the most popular CMS on the planet. (In fact its market share is 10 times the size of its closest rival!)
Whilst WordPress empowers millions of users to publish their own content, it also attracts hackers eager to find and exploit vulnerabilities in the WordPress system itself and (more often) in the myriad 3rd party WordPress plugins. As such, security issues are found on a regular basis and plugged just as regularly with frequent updates.
At Go Tripod, we thoroughly test any updates in a staging environment to ensure the new code doesn't cause any problems before it's pushed live to our clients' websites. We maintain the same care and attention throughout our development practice, investing time into researching the best tool for the job at hand.
So, to ensure our WordPress clients don't need to worry about the security of their own websites, we have recently partnered with a dedicated WordPress hosting company.
This means our WordPress clients enjoy:
- daily backups restored with a single click
- automated SSL/TLS certificates via Let's Encrypt
- unlimited development/staging environments
- rapid environment updates via Git
- a built-in one-click CDN
Do you have a WordPress site? Is it secure? Get in touch if you'd like to know more about what we can offer.
Work smarter, not harder, with VS Code
At Go Tripod, there are many ways in which we improve our working efficiency. We pick the best technologies, such as WordPress, React or Ruby on Rails. We pick the best services, such as Teamwork, Slack or Xero. But we spend our days sat in front of a computer and the way we interface with these technologies and services is just as important as how we select them.
When coding, the primary interface with code is via an editor, be that an IDE such as WebStorm or a classic editor like vi. My current editor of choice is Visual Studio Code, built from the ground up by Microsoft to be a fast and extensible editor for coders. In this post I'm going to show a couple of ways in which VS Code improves my day-to-day productivity.
Multiple Cursors
If I need to repeat something, it's going to quickly become tedious, and I'm more likely to make mistakes. How about if I can add magical automatic cursors that replicate my every keystroke?
In this GIF, I wanted to amend the hyphen to a colon. I could use find and replace, but it's also a good opportunity to try out multiple cursors. I select all lines, then press CMD+Shift+L to add cursors at the end of each line. Then I hold down Alt and move left to skip over the last word, and then begin editing the hyphens on all lines at once. Knowing the Alt-skip trick is invaluable, because it means you can move your cursors over a whole word at once and keep them aligned with punctuation over multiple lines. Without this, your cursors will become out of sync as you move over characters one-by-one.
Git Merge Conflicts
We love git, but hate resolving merge conflicts. These occur when two people have worked on the same file and the work needs to be combined, or merged, into a single version. VS Code's interface for resolving these is quick and intuitive:
As well as the UI in the editor pane that enables you to choose which change to select, the file explorer on the left on VS Code will show any files in your project with outstanding merge conflicts, and the gutter on the right-hand side of the editor will show any merge conflicts in the currently open file.
VS Code Extensions
While VS Code isn't unique in allowing extensions, I would say that it is unique in the quantity and quality of extensions that the community has created. Language support for VS Code is detached from the editor itself, instead being supplied by extensions. This means that languages such as go, python, and rust can be written in VS Code and use editor features such as autocomplete and refactoring. Here's a selection of the extensions I have installed:
Bookmarks
https://github.com/alefragnani/vscode-bookmarks.git
When I have multiple files open, I want to be able to quickly navigate between them. This extension lets me set bookmarks in a file, which I can skip back to at the press of a button.
WordCounter
https://github.com/Kirozen/vsce-wordcounter
This extends the VS Code status bar to include the number of words and characters in a document or a selection.
Prettier
https://github.com/prettier/prettier-vscode
Prettier is a code formatting tool which I primarily use for JavaScript and TypeScript. This extension will highlight any problems with my code formatting and even correcting it when I type or save.
Conclusion
VS Code brings together many different features to create a tool that improves my productivity. Take a look at the full documentation on the VS Code website and learn how to work smarter.
Managing change requests within the software development process
Software design is a complicated business. To illustrate this point, here is a user flow diagram from a previous project of ours. This level of detail is useful for a number of reasons; it gives the client a real feel for the end product before the need for any coding, it aids in the design process and it helps to formalise pre-development requirements.
Complications can arise when, down the line, it becomes apparent that a functional change is necessary. With all but the most menial of software, this scenario is inevitable.
By practising agile software development we allow for multiple changes during the design and build processes. These changes still need defining, but needn’t derail a project or upset its budget. In the example below what had been specified as an ‘About page’ within the app later became an ‘About section’. (Click the image to enlarge.)
We do our utmost to clearly define our software at the start of a project, but we have a well defined process for managing changes as and when the need arises. This enables us to crack on with development without getting bogged down in specification minutiae.
How to enqueue and defer scripts in WordPress
In a previous article I talked about adding the defer attribute to script tags to avoid blocking page render. However, if you’re developing a WordPress theme, chances are you won’t simply be able to amend this HTML. Instead you'll need to make use of the wp_enqueue_script function from within your theme's functions.php file. This function allows you to tell WordPress if your script has any dependancies, which you pass through as an array, and WordPress uses this information to load scripts in the correct order thus avoiding any JavaScript errors. Because plugins load assets via the wp_enqueue_scripts hook it's important you do too so your theme plays nice with them.
So we've got our scripts loading in the correct order - great! But unfortunately WordPress doesn't load them asynchronously for you meaning your HTML will pause parsing while the script is downloaded and executed. Sounds pretty bad for performance, and it is, so we'll be needing an extra something in our functions.php file. While this isn't a perfect solution it's the most solid I've found so far and is what we currently implement here at Go Tripod:
// Defer scripts
// Source: https://www.laplacef.com/2014/05/24/how-to-defer-parsing-javascript-in-wordpress/
if (!(is_admin())) {
function defer_js($url) {
if (FALSE === strpos($url, '.js')) return $url;
if (strpos($url, 'jquery.js')) return $url;
return "$url' defer onload='";
}
add_filter('clean_url', 'defer_js', 11, 1);
}Your scripts' src attribute will be replaced with itself along with defer and empty onload attributes resulting in them being loaded asynchronously and giving your site a dramatic performance boost.