DEV Community: Sam Turrell

New package - Storybook Directories

Sam Turrell — Wed, 29 Jan 2020 00:00:00 +0000

If you haven’t heard of storybook, you’re missing out. We’re big fans of it at Netsells, and it has really helped us have clear visibility of what’s available to us when build our web apps. In a nutshell, Storybook gives you an isolated sandbox environment in which you can code up your components outside of your main application. It has a variety of addons available, which allow you to influence your stories and test them with different data and situations. I highly recommend you check out the Official docs and give it a go.

Organisation is key in your storybook, whether it’s only visible internally or is part of a public-facing component reference. Keeping your stories categorised will mean you’re able to find the components you’re looking for a lot easier, and ultimately save time.

What also takes time is figuring out the structure you want, and updating multiple stories with the perfect structure that works for you. This is a lot of duplicate code, just for the sake of formatting.

That’s why I built this package. This simple module solves this problem by allowing you to control the story structure right from the drag and drop UI of your file system, meaning no code updates are required.

Installation

yarn add @netsells/storybook-directories

Usage

Simply import the package into your storybook config, and update your configure statement to pass in the storybookDirectories function with a stories parameter which matches your require.context call.

import storybookDirectories from '@netsells/storybook-directories';

configure(
    storybookDirectories({
        stories: require.context('../stories', true, /\.stories\.js$/),
    }),
    module
);

Your stories now no longer need to specify a default export, although if you require it you can simply omit the title property. However, if you wish to override the directory structure for a story you can do this by simply specifying a title as you would normally.

Take the following directory structure:

stories/
│
├─ 0. Welcome/
│ └─ Welcome.stories.js
│
├─ 1. UI/
│ ├─ Typography.stories.js
│ ├─ Buttons.stories.js
│ └─ Icons.stories.js
│
├── 2. Forms/
│ ├─ Inputs/
│ │ ├─ TextInput.stories.js
│ │ └─ CheckboxInput.test.js
│ └─ ContactForm.stories.js
│

Would generate stories with titles in the following format:

0. Welcome|Welcome
1. UI|Buttons
1. UI|Icons
1. UI|Typography
2. Forms|Inputs/TextInput
2. Forms|Inputs/CheckboxInput
2. Forms|ContactForm

This format matches the Storybook separator formats, and would generator a storybook with grouped sections matching your directory structure.

Gitprefix - Automatically formatting commit messages

Sam Turrell — Sun, 26 Jan 2020 00:00:00 +0000

At work, part of our code standards means we are asked to prefix our branches and commits with the ID of the Jira issue we’re working on. This allows our Jira instance to hook into our activity on Github.

When you’re working away on a few different issues, sometimes it’s easy to forget to add this to each commit. To combat this I had been using a git pre-commit hook to prepend the branch ID to each commit for years. When I updated my mac to Catalina last year I performed a fresh install and subsequently lost this script, so I decided to recreate it, with a few additions of my own.

I believe the original script was written in bash, and was extremely difficult to build on if I ever wanted to. Being a primarily frontend developer, it made sense to write this in javascript, or more specifically node. After a bit of research and poking I managed to get it built in a fairly short amount of time, and have been using it ever since.

Recently I was asked if it was available anywhere for anybody else to use, and obviously it wasn’t as I’d built it to solve a problem of my own. This weekend I decided to change this and packaged it up. Rather than just stick up a gist and let people manually add it to their templates, I decided a CLI was the best choice to handle the automatic installation and update.

Introducing gitprefix!

Gitprefix does a couple of things. Firstly it covers the functionality of the original script I used, and parses the branch you’re on and prefixes the current commit message. A simple example of this would be, say you’re on a branch named task/ABC-123, and ran the following command git commit -m"Updated header text", the actual commit message would be logged as ABC-123 - Updated header text without any additional work from you.

The second feature of this formatter is something I’d wanted to do for a while. I wanted to easily and visually distinguish the type of change in a commit via emoji’s, much like the gitmoji project.

Currently the formatter doesn’t handle all of the different types of changes, but does handle a number of them, as listed in the table below.

Emoji	Text trigger	Description
🔧	`fix`	Fixing something
🚧	`wip`	Work in progress
🐛	`bug`	Related to a bug (often paired with fix)
🔨	`refactor`	Performed a refactor
⏪	`revert`	Reverted a change
👌	`pr`	Changes based on PR comments
🎉	`initial commit`	Initial commit of the project
📱	`responsive`	Responsive changes
♿️	`accessibility`	Accessibility updates

The way this works is by finding the text trigger in the message of the commit and appending the relevant emoji. Nothing clever, but it gets the job done.

The list is far from extensive, but does the job for now.

You can install the formatter extremely easily by running the following command:

npx gitprefix install

If you’d like to contribute, you can check out the source code here.

Automated Pull Request Checks on Github

Sam Turrell — Mon, 26 Nov 2018 00:00:00 +0000

There aren’t many jobs out there where you have the direct ability to make your day to day tasks more efficient. This is part of what makes being a developer so great. Problem solving is our jam. We can identify problems and simplify them or automate them entirely.

As a lead, one of my duties is to approve and merged Pull Requests on GitHub. A task that can take long enough in itself (depending on the size of the PR) without the semi-frequent back and forth involved in making sure appropriate guidelines are followed. With the beta launch of GitHub Actions a couple of weeks ago, it seems like as good a time as any to start looking at this area and see how we can streamline this process.

So, some of the problems:

Titles not following the correct format
PR template not being adequately filled out
Users not reviewing their own code before submitting
Debug code left in
Make sure WIP branches cannot be merged
Etc, etc.

Don’t get me wrong, these things don’t happen all the time, but all of these can be automated out of existence before we even come to check the PR. This means that merges are not needlessly delayed, and our Project Managers don’t get twitchy. So how do we do that? Well, if you’ve ever used Travis or similar CI tooling you’ve probably seen how “Checks” are used to prevent PRs being merged until the test suite has passed or the assets have been built. Seems to be the perfect functionality for most of our problems.

Travis CI Checks on Github

The handy GitHub REST API allows us to achieve everything we need here, and even better than manually calling multiple endpoints there is an entire framework for building GitHub apps to install your integrations across your entire organisation. Check out the docs for Probot if you’re interested in building one yourself.

As it was my first time using Probot I decided to start with a simple one: PR Titles. There are only two things required in a title. The Jira task identifier and a short description of the changes.

The plan:

When a PR is created we’ll run a check
- Webhook via Probot ✅
Check that the title matches the format
- JavaScript logic ✅
If the check fails leave a comment on the PR for the user to fix
- GitHub API via Probot ✅
When the PR is updated we’ll check again
- Rinse and repeat ♽

Probot was incredibly straight forward to use and within a few hours I had the had completed the app, with a full test suite on all possible title variants using jest and nock (again, Probot made this almost effortless).

Deployment of your bots is documented as being incredibly simple, but in my experience it was a bit of a pain. However I put this down to never having used now.sh before and a recent major bump in their version that didn’t play too well with the setup. I downgraded to the earlier major and it was a lot more pleasant.

There’s still some work to be done to iron out the kinks, but this initial app makes me excited to expand on our automation in this area. Hopefully we can build up a comprehensive suite of checks to make everything run just that little bit smoother.

If you’d like to check out the code for the App, you can do so here.

Maximising Productivity with Slack

Sam Turrell — Mon, 05 Mar 2018 00:00:00 +0000

In the development sphere you probably use Slack pretty heavily in your general day to day activities. It’s an extremely helpful form of communication and its use can vary from discussing work matters to sending hilarious gifs. So there can be a high rate of messages throughout the day.

On a single small team this isn’t so bad, but if you’re part of multiple workspaces with large teams, you may find it becomes quick a hindrance and distraction with the constant notifications and unrelated chit chat you might not necessarily care about.

Here are a handful of tips to improve your slack usage to make you more productive through the day.

Silence Noisy Channels

Are you in channels that you’re not necessarily a part of, but need to be on hand if required? Maybe you have automated build/deployment tools that message specific channels on success, and not much else. Try and silence these channels using the /mute command. This will grey out the channel in your channel list and suppress any and all notifications, even mentions. If you are mentioned, you’ll get the standard notification number on the channel in the sidebar but you won’t be notified.

Set Notification Preferences

Slack is extremely useful, but there can be many messages throughout the day, most of which -are gifs- probably aren’t too important. Slack unfortunately sends notifications for all of these regardless of whether you were mentioned or not.

But there is a solution! The notification preferences! Slack provides three main settings here:

All new messages - you’ll be notified of all new messages
Direct messages, mentions & keywords - you’ll be notified when a teammate mentions you, sends you a direct message or uses one of your keywords
Nothing - you won’t receive notifications from Slack

If you want full radio silence, the last option is what you want, but in most cases this is probably overkill. You’ll usually just want to filter out all non-direct chaff, and that’s the second option.

Set Yourself to ‘Do Not Disturb’

If you’re particularly busy, working on an infuriating issue, or generally just want people to leave you alone, you can set yourself to “Do Not Disturb”. This has the added benefit of showing other members of the team that you would prefer not to be distracted at this time.

Simply type /dnd into slack and you’ll be able to toggle your Do Not Disturb status on and off. Or provide a description of time and Slack will automatically remove your DND status when the period ends.

You can also specify an automatic do not disturb period in the notifications preference.

Reserve Time for Catching Up

Try to contain your Slack usage to specific moments throughout the day to catch up on what you may have missed. Maybe when you find yourself transitioning to a new bit of work, or you find yourself struggling with a troublesome bit of logic and need to give your mind a rest. This way you’re not constantly being pulled out of the coding mindset by checking every message, and can concentrate on solving the real issues.

Starred Channels

Separate the important form the noise. Star individual channels and direct messages to separate them from your main list of channels in the sidebar. This makes it easier to see the channels that matter most.

Group Unread Messages

Slack provides a handy way for you to catch up on your unread messages within a single list view. You’ll need to enable this in the settings of your workspace under the “sidebar” section.

You can choose how you want to sort messages with the options of Alphabetically, Oldest First, Newest First, or leave it up to Slacks magic algorithms with the “Scientifically” option. I don’t know what that means, but it sounds cool, eh?

Mark Messages as Read

If you’ve been away for a while and haven’t been explicitly notified via a mention/highlight, why not just clear all unread messages for a single channel or all channels? With the handy keyboard shortcuts provided, you can quickly clear unreads at the press of a button.

Use Threads

Try and get into the habit of using threads for responding to messages. This allows you to keep an eye on specific discussions, and will reduce the amount of noise in general for the entire team. A win-win!

Defer Actionable

Sometimes you may be asked to do things, but you don’t have time to jump off what you’re currently doing to handle it. In these instances, you can simply get slack to remind you at a more convenient time.

Most of the preferences mentioned above are defined on a per-workspace basis, so if you’re part of multiple teams you may want to go through and apply these settings to each active workspace.

I use quite a lot of the above on a regular basis, and it really does help. They allow me to concentrate on what’s important and filter out the general noise of multiple channels and workspaces.

Stop with the unhelpful loading spinners

Sam Turrell — Sat, 03 Feb 2018 00:00:00 +0000

I get a train to work every day and have recently renewed my season ticket for a new e-ticket directly on my phone. I no longer have to carry around a ticket wallet, I just flash my phone when needed. Very convenient. However, when the ticket man comes by I load up the TPExpress app, go to my tickets and BOOM, get hit with a loading spinner as the ticket man looms over me impatiently waiting. It usually loads for ~5 seconds - but why? What is it doing? The ticket can be used offline, what on earth is it checking for? And why does it take so long?

The problem here isn’t so much the wait. It’s the lack of feedback to the user of what’s going on. I see it a lot in apps and on websites that just hang on loading screens when you open them or when you perform some kind of action such as on a form or checkout process.

What I like to do is actually inform the user of what’s going on and avoid unhelpful loading spinners at all costs. This is especially handy for multi-step processes such as payment forms where you might have to:

reserve the items
create a user
create a new card
create a payment token with stripe
and finally send the payment request to the backend to handle

Each of these steps are an API call that take time to complete. If you simply show the same “loading” indicator for all of these steps, it just looks like your platform is extremely slow. The user isn’t aware of that multi step process. If these APIs are somewhat slow, a slightly impatient user might even exit out or refresh because they think it’s broken.

It something in that process fails, it’s also less indicative of where it failed. You’ll thank yourself when you’re sent screenshots from QA/users with the specific text of the step it’s hanging on.

I’m not saying you have to tell the user exactly what’s happening at each step, but give some kind of indication to the user of why things are taking so long to load and that something is actually happening. Your process will feel a lot more responsive and users (me) will be a lot happier.

Responsive Blocks and Vertical Alignment

Sam Turrell — Thu, 11 Jan 2018 00:00:00 +0000

Today I’m going to show you two of my favourite CSS “hacks.” Responsive height blocks, and vertical alignment. These two often go hand in hand, usually with some sort grid of blocks with text in the centre. I’m sure you’ve come across the pattern before.

Responsive blocks

First up, responsive blocks. We’ve all used responsive width columns, but you’ve probably never used responsive heights. If you apply height: 50%; to an element, you’re not going to see any results. Unlike width, height cannot be set as a percentage as block container elements do not not have a height, whereas they do default to 100% width.

We can, however, make the height relative to the width. To do so, we will be making use of the padding rule. If you apply the rule of padding-bottom: 100%; to a div, you will end up with a perfect square. However, a full page square isn’t exactly helpful is it. We want a grid of squares. You may think this is easy to a accomplish by setting a width on this div and watching it scale, however that is not the case. The padding is actually relative to the parent element, not the element with the rule applied.

So to make box smaller and responsively sized, we just need a container element with a width value. This is usually fine as it’s probably within a grid column anyway. Now you just tell the child how big it should be relative to the parent and there you have a perfect responsive height square.

<div style="margin: 0 -10px;" class="clearfix">
    <div style="width: 25%; float: left; padding: 0 10px;">
        <div class="primary" style="padding-bottom: 100%;"></div>
    </div>
    ...
</div>

You can of course do responsive rectangles by following the pattern and just adjusting the padding percentage.

Vertical Alignment

Ah, vertical alignment, the bane of frontend developers lives. However it doesn’t have to be. Depending on usage, you can follow a simple pattern to achieve vertical alignment that works extremely well with the above responsive blocks tip.

You’ll probably shudder at the thought, but we’re going to be using tables! Well, not exactly tables. Fake tables. Tables have the awesome ability of being able to make use of the vertical-align CSS rule for aligning content, and with the use of display: table; and display: table-cell; we can actually take advantage of this functionality with standard divs.

All you need is a div with display: table; and within it, a div with display: table-cell; and vertical-align: middle;. Just give the parent div a height and you’ll have perfectly entered content.

<div class="playground">
    <div class="primary" style="display: table; height: 100px; max-width: 100%; width: 100%; text-align: center;">
        <div style="display: table-cell; vertical-align: middle; padding: 15px;">
            Look at me being all vertically aligned!
        </div>
    </div>
</div>

Some may argue flexbox can solve this problem in much less lines of code, however table-cell is supported in every browser for a worry free dev experience.

The double whammy

Combining with the above is simple. If you try to put your faux-table inside the responsive block however, you’ll end up with a no longer reliably responsive block. This is because of the height from the padding trick combined with the height of your table. Instead we’ll need to add another container block within the responsive block.

Simply set position: relative; on the block with the padding, and add a new div within this with position: absolute; top: 0; right: 0; bottom: 0; left: 0; which will make this div the same size as the parent which allow you to add content to the block.

This block also now has a fixed height, so you can now used a percentage height value for your content. Simply add your vertical aligned block to this div and give it a 100% height and width and you’ll have perfectly aligned content within your block.

Check out the original post to see these examples in action.