Sign in

Gavin Macken
let bio = [‘Software Engineer’, ‘Tech Blogger’ ] ☯

Together, with some help from our favourite heroes and villains in the Marvel Universe let’s look at the 5 key areas to master

TypeScript is popular.

A recent survey carried out by Stack Overflow places TypeScript as the second most loved language after Rust. That's up 8 places on the 2019 rating.

What's more, you’re our in good company if you are using it. TypeScript is at the moment used by Microsoft, Asana, Lyft, Slack, all Angular 2+ developers, many React & Vue.js developers, and thousands of other companies, so it has been and continues to be battle-tested.

I’m a believer in the 80/20 rule and think a case can be made that having a great understanding of 20% of the language can…

Adding tests to a login form using yup and React Hook Form

Image courtesy of the author

Client-side testing is a massive topic. If you’ve read “Developing a Client-Side Testing Strategy,” you’ll have been introduced to the best practices and challenges faced when selecting a client-side testing strategy.

We could choose to take a deeper look at any of the following below:

  • Testing devices and different browsers where users view your product
  • Static types and linters to validate values and syntax during development
  • Testing CSS, comparing the final design, and markup results
  • Testing a native application and the testing suites available
  • Manual testing practices
  • Using visual libraries, e.g., Storybook

But for now, let's keep it simple and…

Advantages, challenges, and best practices

Photo by the author.

Why Test?

Testing improves the quality of your product and makes it easier to successfully scale your application by allowing for more developers to reliably make updates and push with confidence.

You know the drill: A user reports a bug, they get frustrated, perhaps they can’t use your application at all.

The bug is reported to the team, and because of its severity, it’s full steam ahead trying to resolve the problem. The sprint grinds to a standstill as your resources are sucked up and user trust erodes. …

Help your team with components that stay sane as you grow

So you want to build a component library — nice! The fact that you have even checked out this piece indicates that you’re working on a platform that's scaling. Or perhaps you’ve just hired some new devs and realized your codebase is diverging at a rate faster than quality checks can keep up with, while developers are introducing too many multiple ways of solving the same problem, increasing your technical debt.

A component library can help your developers and designers work in a much more consistent way, making efficient use of time when executed correctly.

There are always multiple ways…

Which option is right for you?

Greetings, earthlings.

At this point, it feels safe to say component-based design and development is here to stay. Gone are the days of designing and building pages in isolation. Instead, we’re building collections of components that all follow a shared design system and can be used across any application.

We’re achieving this with the help of UI development environments, by which I will refer to in this piece as component playgrounds — the most important tool to emerge from this paradigm. Component playgrounds allow us to build, test, and browse our components in isolation. …

Build a styling system that scales well with the size of your codebase

Style systems are essential for development and design teams who need to scale, improve efficiency, and create consistent components.

You can easily imagine different teams working on multiple parts of a project for a long time. How do we bring order to the style chaos that ensues — stopping inconsistencies from creeping into the product and technical debt from spiraling out of control?

To do that, we need a consistent style system, and that's what we’ll look at next.

A Brief History

In order to understand style systems, let’s look at a brief history of CSS.

CSS was first proposed in the '90s…

Storybook is a user interface development environment, a playground for UI components. Here’s how to use it

Storybook is a user interface development environment. Or, in simpler terms, it’s a playground for UI components. This tool enables developers to create components independently while showcasing components interactively in an isolated development environment.

Storybook runs outside the main app so users can develop UI components in isolation, without worrying about app-specific dependencies and requirements.

Create and Configure

Personally, I always find it difficult to code by merely following steps from reading content. I like to also have a repository to look at and play with. Here’s an example that’s available and free to use.

This repo includes work from my previous article…

My opinion on the advantages of Hooks

React Hooks were introduced in React 16.8 which was released to the public on February 16, 2019. If we were to look at the documents for a one-line explanation of what React Hooks are we would be greeted with

“ React Hooks let you use state and React lifecycle features without using class and React component lifecycle methods.”

But they are so much more than that…

They allow us to consider new design patterns, greater separation, and new ways to functionally program, giving us the chance to write cleaner code and approach problems from different angles.

It works quite…

Web applications are at the core of enterprise IT assets, functionalities and business workflows. At some point, many of these web applications end up with flaws, such as cross-site scripting and SQL injection.

These, of course, must always be considered. However, there are other weaknesses that are often overlooked and these are associated with the log-in.

Log-in and register vulnerabilities include:

  • Application logins that are not protected by encryption
  • Weak password requirements
  • Password complexity enforcement
  • Lack of intruder lockout
  • Descriptive error messages can sometimes give possible intruders a leg up

Building a secure log-in and register feature that takes into…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store