icreativepro

UI/UX Blog

Welcome to my personal blog, my name is Todd Wilson and my goal is to share my experiences around using the modern web and tools in front end development.

Reimagining Layouts using Block Editors

I recall the early days of web development where you would build a layout using tables. This forced you to think through designs in a way that allowed you to use the confines of tabular blocks. Ahh the good ol’ days of colspan. Tabular data is now the primary use for table markup and we […]

Three Useful UI Development Patterns

During this difficult time of isolation and quarantine across the United States, I hope you and yours are staying safe. In a time of reflection and as I think about the development patterns that have been serving me well, I thought I’d share them here with you. Component Explorers It’s been almost a year since […]

Automated Integration Testing with Cypress

I’ve had the pleasure of working with Cypress lately and have been impressed by the testing framework. The test runner interface allows you to inspect the state of the test at that given moment where you can also “pin” that step for further inspection. The debugging process is easier when you can visually see the […]

Integrating UI designs with state machines in React

There are many design tools that help designers in the hand-off process that show developers how each concept should be executed. They do tend to leave a lot to interpretation and have a simple way of presenting their vision.

Learning GatsbyJS with WordPress and ACF

A few months ago, I stumbled across an excellent video series on Gatsby & WordPress, by Jack Pritchard. This allowed me to follow along each section of the series as I progressed through the initial setup with WordPress. Initially, I installed a WordPress instance locally using the Trellis bedrock project which uses composer to gather […]

Using structured content to prototype interface designs

When starting on a new concept or project, I normally first start by considering how the data will be structured. There are many solutions to building out data resources and APIs and in working across multiple teams, you normally have to start the conceptual process without having to wait for those endpoints to be provisioned. […]

Brizy cloud as a layout builder

Layout builders have come a long way over the years and they continue to evolve across content management systems and WordPress. I do manage a few sites that are using outdated layout builders and I suspect a lot of other “legacy” layout builders are catching up to this change with Gutenberg-style block layouts. I came […]

The resurgence of the analog web

When I started learning about web design, I recall having a Geocities page that allowed me to explore page layouts and graphic design. Animated gifs mixed with tiled backgrounds was something worth sharing with your friends.

Using docker cache with NPM dependencies

There’s been a frequent pattern that I’ve come across in maintaining local project dependencies across a team. Changing npm contexts can be taxing and when the complexity of maintaining node packages and configuration continues to get in the way of development workflow.

Learning how to extend web components

What are web components? Web components are based on four specifications: Custom Elements Shadow DOM ES Modules HTML Template Browser support has been increasing over the years and has risen to over 85% and those browsers that implement native custom elements also support ES6. For those browsers that do not support it, you can simply […]

Using starter layouts to learn and enhance your workflow

I found a few patterns in front-end development that are extremely useful to have around in the form of a “starter” layouts or templates. Similarly, I’ve found common libraries like Bootstrap with WordPress layout builders to also be quite effective in building out site designs. Here are two customizable front-end frameworks that I’ve been working […]

A simple way to set up a dark mode switch

Not long ago, I was noticing that some browsers were starting to enable the dark mode browsing through themes and extensions. Chrome recently released a “Dark Reader” extension and with the recent Mojave update in Mac OS, you get a system wide dark mode and this certainly will help alleviate the strain on the eyes […]

When to consider going with static content versus dynamic?

Over the years of developing various types of sites, I’ve noticed that the majority of content remains rather static with very few edits over time. I also notice that most blog pages will remain untouched and with no real effort to publish content that attracts new customers.

How I explore front end frameworks

The front end web design landscape is evolving at such a fast pace and learning new frameworks is a selective process for me. This becomes a highly selective process as we only have a limited time to apply these new design trends and adopting new frameworks as we learn.

A site redesign project and my experience with Nuxt.js

Learning Nuxt.js I’ve been working with Vue.js as I continue to learn more about modern JavaScript and front end development. I normally try to explore various implementations of frameworks with a quick demo and with the latest Vue CLI tool, this becomes even easier to do.