This article is about the tech stack I’m using for WingTask in 2022.

Read more

I’ve found web components are a game changer when it comes to building user interfaces. I’ve written about them previously regarding the benefits of using them no matter what your framework happens to be but because they offer another way to do javascript interop I think it’s worth discussing some of the special benefits they bring when combined with Elm.

Read more

After adopting web components to solve a specific technical hurdle I found them so useful that they quickly became my new favorite browser standard in recent years. Web components are the basic building block of my frontend design system for WingTask, and I’m really happy with the final results I’m getting in terms of the development process and the finished product. There’s multiple reasons why web components work well for me and since they don’t seem to be so popular I’d like to try to explain why I think they should be given wider consideration.

Read more

TailwindCSS emerged in the past few years as one of the most popular new developments in the web development sphere. When I set out to build a frontend system for WingTask I chose to use TailwindCSS for reasons that had little to do with utility classes, the most obvious feature of Tailwind, and instead chose it because it also provides a turnkey CSS design system that can be extended for a specific application with the end result being a complete customized design system. In this article I will discuss why I think this prebuilt design system concept is as much a reason to adopt Tailwind as utility classes are.

Read more

You can take the views of any Elm app and “mount” them in Storybook UI explorer then create different stories in Storybook that allow you to see the same view in a multitude of different viewport sizes and states. The benefit of this is that it makes it really easy to see how fixes and changes are affecting the visual UI of the view. Rather than having to launch dev tools, pick the right viewport setting, and then going through app functionality to get to the desired state, the combinations of viewport and state of a single view can be represented as a navigable menu where each can be inspected quickly by a click.

Read more

Storybook is an essential tool in my development process for WingTask. I depend on it to be the workspace where I create the user interface . Storybook is self-described as “a tool for UI development”, this vague description is not inaccurate in that storybook seems to have a pretty broad set of use cases it can support.

Read more

An idea for a new app feature usually sits in my mind for some time before I commit to actually building it. I’ll do some research, jot some notes, and maybe even write a script for how the user process will be, and then when I feel I’m ready to go from abstract idea to concrete concept I’ll pull out a pad and pen and sketch a user interface. I need this first step of concept to sketch to help confirm my idea is fleshed out all the way and also to stop myself from looping in my head over details that I’ve already established.

Read more

The first version of WingTask was built using Material Design and a first It was fine, it allowed me to launch WingTask quickly without having to take on the burden of creating a custom UI. However, not too far after the launch I began to realize it wasn’t the right choice for look and feel going into the future. The biggest problem is that WingTask needed a UI that was platform neutral, since it’s a web app trying to perform like a native app, it’s not really particularly android nor particularly IOS. The problem with Material Design is that it conveyed that WingTask had a preference for the Android platform which wasn’t really the case.

Read more