DEV Community: Braydon Coyer

5 Basic Tips for Angular Unit Testing

Braydon Coyer — Tue, 31 May 2022 13:23:52 +0000

Unit testing provides assurance that your application works as intended by running an automated piece of code that invokes a unit of work (a separate piece of code). The test passes or fails based on an assumption about the behavior of that unit of work (we call this the code under test).

While unit testing across frontend frameworks hold the same core principals, it isn’t surprising that unit testing in Angular holds some key differences. Unit testing is a skill that requires time and patience to develop. If you’re learning how to write unit tests in Angular, here are 5 basic tips to accelerate your learning: understand Angular dependencies, test in isolation, write granular tests, test logic rather than the DOM and write your tests before the implementation code.

Understand Angular Dependencies and Modules

The first tip is to take time to understand how Angular handles dependencies. This tip is a prerequisite to the next tip; you’ll need to identify dependencies in order to properly test in isolation.

Angular’s Module architecture is a bit unique, and probably one of the hardest parts for beginners to pick up. Angular Modules are built on top of ES Modules - a solution to sharing code between files. A module, at its core, is simply a way to import and export code for other files to consume. There are differences in the way ES Modules and Angular Modules work, but the core idea remains the same.

Angular Modules list dependencies that other code (components, services, etc) can use. For example, in order to use and consume a reusable button component in your application, it needs to be registered in a corresponding Angular Module. If it’s not, the compiler will throw an error.
Why is this important? That brings us to the second tip.

Test in Isolation

Testing in isolation means that the unit that is being tested should be separate from other parts of the application. What does this mean when we talk about unit testing in Angular? Whatever you're testing (whether that be a component, service, pipe, etc) should have all other dependencies separated/mocked. If you think it through, this makes sense.

We don’t want to test the entire application, we only want to test a specific slice of it. That’s the whole point of unit testing!

If you don't test in isolation, you'll end up with hours of headache as you sift through ambiguous console errors trying to figure out why (and where!) your tests are failing.

As mentioned earlier, in order to test in isolation, you need to mock out dependencies. This is why it’s very important to understand how Angular handles dependencies. A dependency can be a component you’re consuming, a service that is injected, or a handful of other things.

Thankfully, mocking is very straightforward. If you want to learn how to mock an Angular component, read my other article. If you want to mock an Angular service, I wrote another little article here to show you how.

Write Granular Unit Tests

Thirdly, I recommend that you write small, independent unit test cases. It can be tempting to write a catch-all test scenario where you call an implementation function and make multiple expectations in a single unit test. Failing tests that have multiple assertions make it difficult to understand what went wrong.

Rather than falling into the catch-all single test case scenario, identify how a single unit can be split into multiple test cases (if the situation calls for it). For example, if a component function subscribes to a service and updates local component state with the result, you can easily create two or three test cases instead of a single bloated test.

For more information about what makes an Angular unit test valuable, click here.

Test logic, not the DOM

This tip can be a bit controversial. It’s possible to write unit tests that search the DOM for elements, perform an action (like a click), and assert that certain behavior was executed.
While I do think that some situations calls for this type of structure, it should not be the norm. If you find yourself writing a bunch of DOM queries in your tests, you may want to delegate those tasks to an End-to-End (E2E) test.

Consider the classic calculator example which contains many buttons that perform various mathematical operations. Each time a button is clicked, data is manipulated and a new number or sum is displayed on the screen. This is a perfect scenario for a unit test! Data is changing with each button click; the calculator produces a certain output when given a certain input.

On the other hand, it’s not uncommon for a button to navigate the user to a different page, or to make something else appear or disappear. Rather than solely changing data, these scenarios represent application functionality and is a great opportunity to write an E2E test.

Test First, Code Second (Test Driven Development)

Finally, and perhaps most important, discipline yourself to write your unit test cases first before you write the component or service logic. Does that sound odd? It’s okay if it does - it’s a bit backwards in a sense.

Writing test cases first is called Test Driven Development (TDD). Rather than the implementation code influencing how the unit test is written, TDD allows the test scenario to drive the implementation of the code. Because of this, code written in a TDD pattern generally is cleaner and less bloated.

Test Driven Development has a few rules and conventions that go along with it. If you’re want to learn more about TDD, BrowserStack has a detailed explanation.

Remember, unit testing in this fashion takes time to learn; it’s a skill that you must develop. I encourage you to start small and experience the benefits that TDD provides.

Conclusion

In this article, we looked at five general tips for unit testing in Angular. If you’re starting to learn how to test in Angular and feel overwhelmed, remember that unit testing is a skill that takes time to develop.

My hope is that by understanding Angular dependencies, testing in isolation, writing granular test cases, testing the underlying logic rather than the DOM, and giving Test Driven Development a try, you’ll have a better toolbox to successfully accelerate your learning and have the skills needed to write tests that provide assurance that your code behaves as expected.

Learn How to Click a Button when Angular Unit Testing

Braydon Coyer — Fri, 27 May 2022 23:45:20 +0000

Buttons play a large part in the user experience of your user interface. Angular makes working with buttons extremely easy, but perhaps you’ve hit a wall when your mindset switches to testing. Should you have unit test cases for button clicks in your Angular application? Is it really that important? And if so, how would you go about testing that scenario?

There are two prominent approaches when it comes to writing unit tests for button clicks in Angular: either you search the DOM for the button, perform an actual click and verify the expected behavior, or you simply call the component-code that will run when the button is clicked. Both options have their pros and cons. In this article, we’ll investigate each testing route thoroughly and look at various examples so that you understand everything you need to know about how to write unit tests for button clicks in Angular.

Why and when should you unit test button clicks in Angular?

If you have some experience with automated testing, it wouldn’t be surprising if you’re wondering if a button click is something that even needs to be handled with a unit test in Angular. Perhaps in the past you’ve opted to forgo a unit test and defer that responsibility to an E2E (End-to-End) test. There isn’t anything wrong with that decision - E2E tests validate functionality by performing tests from a user’s experience by simulating real user scenarios in the application.

A unit test, on the other hand, is a bit more granular. It’s an automated piece of code that invokes a unit of work (a separate piece of code) in the application and is usually approached from a black-box perspective. The test passes or fails based on an assumption or expectation about the behavior of that unit of work.

🤔 If you’re interested in learning more about writing well-structured and valuable tests in Angular, check out my other article.

A unit test is almost always written using a testing framework, allowing it to be written efficiently and run quickly. If you generate a new Angular project with the Angular CLI, your application comes with Jasmine and Karma (the testing framework and runner) out of the box.

📢 This article assumes that you’re using Jasmine and Karma for your unit testing. However, if you’re using another testing framework like Jest, the approach will be almost identical.

Angular Button testing: Data Validation or Application Functionality

There isn’t a set rule on if buttons should be covered by a unit test. In fact, the decision of whether to write a unit test for a button click ultimately comes down to personal opinion. If you prefer to defer that functionality to an E2E test, that’s great! But in my opinion, there are certain situations where a button click unit test provides valuable reassurance in an Angular application.

On the other hand, it’s not uncommon for a button to navigate the user to a different page, or to make something else appear or disappear. Rather than solely changing data, these scenarios represent application functionality and is a great opportunity to write an E2E test.

With this in mind, does your situation call for a unit test or would it be best to create an E2E test?

Recall that there are generally two approaches to writing a unit test for buttons: either you locate the button on the DOM and simulate a click, or you test against the code that will be run when the button is clicked by a user. Let’s look at the more complex example first.

How to Test a Button Click in Angular

This approach may be useful in some situations, but the act of delegating a unit test to browse the DOM to find the button and perform a click is a point of contention. The unit test still makes expectations around the notion of what’s supposed to happen when the button is clicked, but many argue that performing the click is the responsibility of an E2E test.

Regardless, locating the button on the DOM is a trivial task, especially when you isolate the button into a reusable component. The following is an example of just that - a reusable isolated button component that, as mentioned prior, assumes you have TestBed configured properly with Jasmine and Karma.

describe('Component: Button', () => {
  let fixture: ComponentFixture<ButtonComponent>;
  let component: ButtonComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ],
      declarations: [ ButtonComponent ],
      providers: [  ]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(ButtonComponent);
      component = fixture.componentInstance;
    });
  }));
});

it('should call onButtonClick when clicked', fakeAsync(() => {
  spyOn(component, 'onButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();

  tick();

  expect(component.onButtonClick).toHaveBeenCalled();
}));

The TypeScript file for this button component has a function called onButtonClick that is bound to the button element in the template. This test first spies on the local function, locates the button and then performs a click. After a simulated passage of time with tick(), we make an assertion that the onButtonClick function was called.

📣 Events can be tested using async / fakeAsync function imported from '@angular/core/testing’.

Notice that the button was located on the DOM using querySelector and passing button as an argument. This works fine in an isolated component like this, but in different scenarios where multiple button elements may exist, you need to use something that provides more specificity.

This example is pretty straightforward - we simply verify that the function is called when the button is clicked. But we can take this further. Let’s look at the onButtonClick function and see what else can be tested.

@Output() buttonClicked: EventEmitter<any> = new EventEmitter<any>();

...

onButtonClick(): void {
  this.buttonClicked.emit();
}

Since this is a reusable button component, it makes sense to delegate the responsibility of functionality to whichever component consumes it. In order for the parent component to identify when the button has been clicked, it can listen to an event emitter inside the button component (buttonClicked). In response for the event being emitted, the parent component calls a local function to, for example, perform a mathematical operation in the calculator example above.

From a testing perspective, it would provide value to have a unit test that ensures that the event is emitted when the onButtonClick function is called. Here’s what that may look like.

it('should emit the event when #onButtonClicked is called', () => {
  const emitSpy = spyOn(component.buttonClickEvent, 'emit');

  component.onButtonClick();

  expect(emitSpy).toHaveBeenCalled();
});

Spies come to the rescue here again. The emit function lives on the buttonClickEvent object, and the test simply verifies that the spy was called when the code under test is executed.

What about other situations?

There may be other situations in a reusable button component where unit tests could prove useful and provide reassurance that it’ll continue to work in the future with additional changes. We won’t be discussion or covering those scenarios in this article, though.

How to Test Button Functionality in Angular

Now that the reusable button component has a supporting test cases, let’s turn our attention to situations where it may prove beneficial to test local code that is wired up to that button component.

Recall that the reusable button component emits an event when clicked. Other parts of our application can listen to that event, and call a local function to perform isolated operations.

Continuing our calculator idea from earlier, here’s one example where we consume the reusable button component and listen to the buttonClickEvent.

<app-button (buttonClickEvent)="add(5)">
  5
</app-button>

We already have unit tests that locate the button on the DOM and initiate a click event, so there’s no need to test that here in the parent component. Instead, let’s look directly at the add function and see if there’s anything inside worth testing.

add(toAdd: number) {
  this.total += toAdd;
}

This is a very basic and straightforward example specifically for this article. This function mutates data, and if you recall from earlier, this is a great opportunity to add supporting test cases.

But what do you test?

For the add function, we would write a test that ensures the total class variable increments with the appropriate value passed to the function. This example is pretty simple, but the skill of determining what to test is something that comes with practice.

📣 If you’re wanting to develop the skill of identifying test cases, consider reading my article titled The Gumball Machine - How To Quickly Identify Unit Test Cases

Here’s what the test would look like. Again this assumes you have the test suite set up correctly with TestBed.

it('should add 5 to the calculator total', () => {
  const expectedTotal: number = 10;
  component.total = 5;

  component.add(5);

  expect(component.total).toEqual(expectedTotal);
});

Notice that we call the add function directly in the parent component test. Remember, we already have assurance that the button works as intended when clicked, so in this case we simply call the code under test.

⚠️ It’s never good to trust that a test is working as intended without seeing it fail. I recommend making an intentional error in the add function (not the test) to see if the test fails when it needs to fail.

Conclusion

In this article, we investigated the different ways to test button clicks in Angular. One option is to write a unit test that locates the button on the DOM, perform a click and assert that something happened in the test. On the other hand, it may be appropriate to simply call function that is called when the button is clicked and write expectations based on what occurs in the code under test.

Ultimately, it comes down to your personal preference. Whichever route you choose to take, I hope this article has proven helpful and shown you how to write unit tests for button clicks in Angular.

Enable Autocomplete for Tailwind CSS in VSCode

Braydon Coyer — Wed, 27 Apr 2022 14:30:22 +0000

If you’ve recently found Tailwind CSS, you’re no doubt amazed at how quickly you can write CSS! But you may be wondering if there is a way to add autocomplete in VSCode so you can write Tailwind CSS even more quickly and more efficiently?

Absolutely! The Tailwind Labs team has developed and released an official plugin that adds autocomplete to your VSCode environment, and it only takes a few clicks to enable! The Autocomplete extension allows you to quickly apply appropriate utility class names to your markup, removing the guess work and providing relevant information at a glance. Furthermore, the plugin also supports linting, hover previews and syntax highlighting! Let’s quickly add autocomplete to VSCode!

Install the Tailwind CSS VSCode Plugin

Adding autocomplete to VSCode for Tailwind is easier than you think. Head to the Visual Studio Code Marketplace and search for Tailwind CSS IntelliSense. Alternatively, you can open VSCode and click on the Extensions tab in the sidebar and search for the plugin.

Once you’ve found the plugin in VSCode, click the Install button to install the plugin globally in your workspace. From here, the plugin should automagically ✨ work so long as you have Tailwind installed and a tailwind.config.js or tailwind.config.cjs file in your repository. If you aren’t seeing the changes take affect, you may need to restart VSCode and try again.

Unlike some other VSCode extensions for Tailwind, this plugin is developed and maintained by the Tailwind team! You can expect this extension to be updated as new major versions of Tailwind are released with new features!

Benefits of Autocomplete

Writing CSS with Tailwind is already insanely effective, but it can be even better if you use VSCode with the autocomplete plugin! With autocomplete added in VSCode for Tailwind, you can start to type in a utility class and a pop up suggests a few options to choose from. This is extremely helpful for a few reasons:

You may not need to fully type the utility class. Simply start to type the class name and the intelligent autocomplete will suggest a few options. You can use the arrow keys to navigate up and down in the suggestion list, and hit Enter or Return on your keyboard to add the class name into the markup. It’s super quick!
If you can’t remember which Tailwind class to use, the autocomplete can help you narrow down and find the correct utility.
The autocomplete can be very useful, especially when selecting color-based utility classes! Not only can you quickly scan through the color palette, but the autocomplete also gives you a preview of the color in the list!

Identify Tailwind CSS Errors with Linting

Using Tailwind out-of-the-box provides a fast way to write CSS in your application. But the real power of Tailwind begins to shine when you extend the library to use your own design system. Supplying your own color palette, extending the default typography settings and even using the @apply feature can help set your site above others made with the library and provide a custom solution to fit any development need.

As you extend the library, you run the risk of configuration code that produces errors at compile time. Without the Tailwind VSCode extension installed, you may not know that an error has occurred until the site is built.

Thankfully, the plugin helps guard against error and small mistakes by providing real-time linting, allowing you to not only quickly identify when something is wrong and should be changed, but also get an idea of how to make the code compliant.

For example, when using @apply and stringing together class names in an external .css file, I occasionally use a text-color that I have not defined in my tailwind.config.js file. If (and when) these small mistakes occur, the Tailwind VSCode plugin puts a red squiggly underneath the offender, making it easy for me to see the error and quickly fix before saving the file and beginning a refresh of the development server.

Use Hover Previews to Peek at The Underlying CSS

Tailwind CSS is a CSS framework, allowing you to write your styles without leaving your markup. Unlike other CSS frameworks like Bootstrap where you can learn Bootstrap-specific class names, Tailwind suggests that the user understands CSS as a prerequisite. Generally, Tailwind won’t aid developers write CSS faster if they don’t understand CSS in the first place.

However, with the Tailwind CSS autocomplete plugin installed in VSCode, it is possible to peek into the underlying CSS implementation. Simply hover over a utility class in your markup and the extension will provide a window showing the actual CSS happening behind the scenes.

Why is this helpful?

First, having the ability to look at the CSS behind the utility class can be helpful in better understanding CSS and proper syntax. Second, for some non-utility Tailwind classes like the prose class, you can peek at all of the CSS rules and statements that are applied to the code. This may not be super useful in your day-to-day operations, but I’ve already run into a few situations where this has helped me solve an issue or quickly see which CSS unit is applied to the elements on the DOM.

What about JetBrains IDEs?

Can you get autocomplete with Tailwind CSS if VSCode isn’t your IDE of choice? Absolutely!

First, make sure you have Tailwind installed in your project and a tailwind.config.js file at the root of your repository. Next, open the Settings/Preferences | Plugins page and enable the CSS and Tailwind CSS plugins.

That’s it! WebStorm will now provide autocomplete for Tailwind classes in your markup! Additionally, Webstorm will also allow you to preview the resulting CSS if you hover over a Tailwind class, and the IDE can provide code completion based on the customization made through the tailwind.config.js file (if you add new colors, or extend the default typography settings, for example).

Conclusion

Tailwind makes writing CSS a breeze. It’s lightning quick! But with the aid of the Tailwind CSS VSCode autocomplete feature, not only is it faster to find utility classes you want to add to your markup, but you also get the added benefit of a plugin that bundles linting for real-time error identification and hover previews for when you want to glance at the code beneath the class name. Furthermore, you can have peace of mind knowing that the plugin will never become stale or outdated because the Tailwind CSS team are behind the extension and will continue to push updates as new features are released!

What Makes a Unit Test Valuable?

Braydon Coyer — Mon, 25 Apr 2022 14:16:07 +0000

The goal of unit testing is to ensure that your application behaves as expected. However, many unit tests miss the mark, neglecting to provide value to the business and failing to discover defects in the codebase.

In this article, we’ll discover how to craft unit tests that are valuable and catch defects quickly. But first, let’s look at a definition of a unit test.

What is a unit test?

A unit test is an automated piece of code that invokes a unit of work (a separate piece of code) in the application. The test passes or fails based on an assumption about the behavior of that unit of work (we call this the code under test). A unit test is almost always written using a unit testing framework, allowing tests to be written efficiently and run quickly.

If you're just getting started with unit testing, one of the most important steps you can take is understanding the value that unit testing provides, and making sure that you have enough tests in place to keep your application stable. Whether you're writing a single component test or a suite of unit tests for an entire module, it's important for your code to be tested thoroughly and in isolation.

📢 If you want to learn more about testing in isolation, I wrote another article that may prove helpful.

Unit tests are most valuable when they are easy to read, test a single outcome, share the same structure, aren’t concerned about underlying logic, and all unit tests are repeatable.

Unit Tests Should be Easy to Read (Unit Testing Naming Conventions)

The naming convention of your unit tests is also important because it can help make the test’s purpose clear to new developers (this is especially useful for large teams where there are many developers contributing to a codebase). Furthermore, the more specific the test name, the easier it is to identify what went wrong when a test fails.

For example, imagine you have a function that uses geolocation services to return the longitude and latitude of the user’s current location. Instead of creating a test and calling it getCurrentLocation() or getLocation(), be a little more verbose and name the method returnsLongAndLatOfUser(). This name describes what the test is actually doing: checking to see if the function returns the expected location of the user.

Some testing frameworks have their own convention for naming your unit tests. Test functions in Jasmine, an open-source frontend testing framework, are declared as it(), and accept a parameter for the name of the test. This provides a suite of tests that can be read in plain English.

it("returns the longitude and latitude of the current user", () => {
    // Test code here
})

💡 This test could, arguably, be split into two separate tests - one that checks that the function returns the longitude and one that checks that the function returns the latitude.

If this test were to fail, it would be very easy to understand what’s going wrong in your application.

Unit Tests Should Only Test One Outcome

This is a common mistake I see in many test suites. It can be tempting to write a catch-all test scenario where you call an implementation function and make multiple expectations in a single unit test. Tests that have multiple assertions and fail make it difficult to understand why the test is failing. And as you can expect, testing multiple outcomes in a single unit test usually have vague test names.

Valuable Unit Tests should be granular and only make a single assertion.

Unit Tests Should Share the Same Structure

Ultimately, how you structure your unit tests is up to you and the team you are working with. Take the time to research patterns and conventions put into place by larger, more seasoned teams. Work with what makes sense for your team, and always keep an eye out for improvements that could be made.

Unit Tests Shouldn’t be Concerned About the Underlying Logic

You must be very careful when writing unit tests to ensure that you do not couple the test to the implementation logic. If your test fails due to a change in implementation while the behavior remains the application remains the same, it can be an indicator that you may need to re-examine your test.

Valuable tests should only be concerned with the expected behavior of a class or method, not how that behavior is implemented.

Unit Tests Should be Thorough

Thorough is a tricky word and can mean different things to different people. What's important is that you take the time to consider your code through different lenses and discover paths that may have been missed (if statements determine different logical routes; ensure your tests check each scenario!).

A Unit Test Should be Repeatable

Finally, valuable unit tests are repeatable. If you run the same test ten times in a row, you should expect to get the same result each time.

If your unit tests fail this simple check, then something may be wrong with how your test is set up.

Conclusion

In this article, we looked at the characteristics of valuable unit tests. These points aid in the correctness of the code under test which saves time for the developers and saves the business a significant amount of money that would otherwise be spent on hours of debugging. Unit testing provides implicit code documentation and can be a great way for new developers to understand what’s happening in the codebase. Unit tests are extremely valuable - make sure you take the time to craft valuable tests.

You Don't Need a CS Degree to Land a Web Development Job

Braydon Coyer — Tue, 19 Apr 2022 19:23:53 +0000

This article was originally published on my personal blog

Demand is high as many set their sights on a career in web development.

One of the most appealing aspects of learning web development is the incredible versatility of this sphere of programming. People just starting out can choose between front-end or back-end development—or even full-stack engineering! If you're interested in any field that touches on technology or design, learning to code is a terrific way to build foundational knowledge that will help you succeed in any occupation.

Whether you’re looking to start your career in web development or switching from a different type of work altogether, the question of education and experience has no doubt crossed your mind.

Do you really need a Computer Science (CS) degree to land a job in Web Development? Here’s my argument on why I think the answer is no (spoiler: I don’t have a CS degree).

Degrees Aren't as Important as They Once Were

I’ve interviewed over 150 candidates for entry and senior level web development positions and at the end of the day, the decision to extend an offer wasn’t dependent on their level of education.

The reality is that a formal degree isn't as important as it once was. Most employers aren't looking to fill a position because you have the piece of paper. Rather, they're looking for someone who can do the job and achieve results to benefit their business. Experience is becoming more important than education.

In fact, computer science degrees are not required for any of the work done at FAANG companies like Google. Only 15% of Google's employees worldwide have a CS degree, according to Laszlo Bock, the company's senior vice president for people operations.

You Can Learn to Code Online

If you're looking to break into web development, there are plenty of opportunities to enhance your skills and gain experience outside of college, including many free online resources. Code Academy, FreeCodeCamp, Khan Academy, Egghead and online course providers like Udemy and Pluralsight are only a few examples of the wide range of helpful resources available.

Being an online learner also allows you to learn at your own pace. Have a full-time job? No problem - study a little bit in the evening after you get home. Only have time to dedicate time on the weekends? Not to worry - there’s no pressure on cramming or meeting deadlines. The pace at which you learn is up to you and your unique situation.

If you have more money than time (or if you'd prefer to learn from a teacher), there are many different paid courses and bootcamps designed specifically for those learning how to code.

Web Development Bootcamps Provide More Real-world Experience

In my experience, graduates from bootcamps are often far more prepared than those with traditional computer science degrees. Bootcamp grads are able to hit the ground running and dive into projects because of the real-world experience and training they receive in the program.

In fact, many college curriculums are extremely outdated and fail to teach students the skills that they need to succeed in most real-world jobs.

Bootcamp graduates also often have more technical experience than those with a relevant degree, as compared to a college program where students spend a lot of time learning theoretical concepts and not necessarily applying them to real-life situations.

Bootcamps are designed to force students to spend time programming and solving problems that they would face in an actual development position.

It’s important to note, though, that coding bootcamps usually aren’t free. Like a traditional college degree, many bootcamps require some form of compensation for the training students undergo. However, it’s extremely uncommon for the expense to be anywhere as high as the daunting student debt that can pile up with with a four-year degree.

If you’re looking for a structured program to help you land your first web development position, consider looking into bootcamps such as Code Up, Flatiron School, Udacity and Coding Dojo.

What if I decide to get a Computer Science Degree?

I’m not saying that going to school and earning a 4-year degree isn’t worth it. On the contrary, if you decide that a degree is the best route for you to take, then it is worth it! You’ll learn valuable skills and you’ll still be able to land a job!

The argument I’m extending in this article is rather to provide an alternate viewpoint: that the job landscape has shifted and a degree is no longer required to land a programming job.

Granted, this is from my personal experience and I’m sure this may not be the case everywhere in the world. There will be some who disagree with me - and that’s fine! But I’ve seen countless individuals land jobs in tech with as little as 4 months of programming experience. Some create their own path and are self-taught. Others choose to be a little more structured and attend a bootcamp. There is no “right” way to get your foot in the door!

The job market is wide open for coding jobs

Landing a web development job in 2022 is more achievable than ever before; the demand for people with coding skills far exceeds the supply.

Companies across nearly every industry are eager to find someone with coding experience, but they're having trouble finding candidates who meet their standards. Many companies choose to hire junior programmers straight out of high school and train them on the job, or even bring on non-programmers and teach them how to code.

Now is the time for you to start programming and become a web developer - with so many online resources available, you can even do it without a college degree - I did, and I’ve found great success and fulfilment in this career!

The Powerful CSS not Selector

Braydon Coyer — Tue, 29 Mar 2022 12:56:38 +0000

This article was originally posted on my personal blog.

The :not() CSS selector is a powerful addition to the pseudo-class toolbelt, allowing you to select elements that are omitted by its argument.

A basic :not() CSS Selector Example

Here’s an example. I have a few classes set up - one applies base styles for all buttons, one sets the styles of a primary button, and another determines what a primary disabled button should look like.

📢 I’m using SCSS in the example below to gain the benefit of class nesting and variables, but the application of the :not() selector is the same.

.button {
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
    margin-top: 1rem;
}

.button--primary {
  background: $button--primary;
  color: white;
}

.button--disabled {
  background: $button--disabled;
  cursor: auto;
}

In order to align with accessibility, it’s important that the background of the button changes when in hover state. That’s simple enough; here’s the change.

.button--primary:hover {
  background: $button-primary-hover;
}

But, after adding the :hover selector, we run into a problem. Try hovering over the disabled button and notice that the background changes as if we were hovering over an active primary button.

How do we get around this? The :not() selector makes this an easy fix, allowing the change to only affect primary buttons that are not disabled!

.button--primary:hover:not(.button--disabled) {
  background: $button-primary-hover;
}

📢 Instead of using a class to determine if the button is disabled, I could have opted to use the :disabled attribute. I think the examples above are a bit easier to follow.

Browser Compatibility for the :not Selector

Thankfully, the :not() selector is supported by most major browsers.

Check out caniuse.com to see the exceptions.

Conclusion

In this article, we briefly discussed the :not() selector and saw a real-world example. A variety of options open up when using this selector - what applications can you think of?

How to Enable Preview Mode in Next.js for your CMS

Braydon Coyer — Tue, 15 Mar 2022 13:37:51 +0000

I’m using Notion as a CMS by utilizing the Notion API (which was just released to the general public) for my website and blog. There are a lot of benefits to using Notion as a CMS and if you’d like to read more, I wrote a little blurb about it here.

Writing articles in Notion is great and all, but I didn’t have a way to preview what the article would look like on my blog before publishing. I would cross my fingers and hope that everything worked on my live site. But, as you may suspect, there were times when I didn’t catch small issues before I published the article and it wasn’t uncommon for people to message me on Twitter to inform me that something wasn’t right.

There had to be a way that I could preview unpublished content without affecting visitors to my site. Turns out, Next.js provides a very simple but powerful solution. It’s called Preview Mode.

What is the Next.js Preview Mode?

Preview Mode renders pages at request time at a specific URL so you can preview draft content without having to worry that visitors to your website will see your unfinished work. This was specifically created for headless Content Management Systems like Strapi, Contentful, Sanity.io and Notion - though the implementation is CMS agnostic.

Let’s take a look at how the Next.js Preview Mode works.

How does Preview Mode work?

Next.js needs to understand that we’re trying to preview the site and any unpublished content. In order to do that, Next.js created a special function that sets specific cookies in our browser and turns on the Preview Mode.

Because those cookies were set, any incoming requests to the browser with these cookies will allow us to make quick checks in our logic to filter out draft content if the visitor is not browsing in Preview Mode.

📢 Please note that Preview Mode is only available for Next.js versions 9.3 and up.

Make sense? Let’s see it in action.

How to Use the Next.js Preview Mode

Remember, we first need to inform Next.js that we want to view our site in preview mode. To do that, create a new API Route. The name of the API Route doesn’t matter, but for the sake of this tutorial let’s call it pages/api/preview.js.

Next.js provides a special function that we can call which will set cookies in our browser. Inside the API Route, call the setPreviewData function.

export default function handler(req, res) {
  res.setPreviewData({});
}

That’s literally all you have to do to enable Preview Mode in your Next.js application.

But let’s take it a step further. Let’s pass in a query parameter so we can redirect to a specific page once the cookies have been set.

Thankfully, Next.js makes this extremely easy. Simply call the redirect function on the res object and pass in the appropriate value.

export default function handler(req, res) {
  res.setPreviewData({});
    res.redirect(req.query.redirect);
}

Display Draft Content with Preview Mode Enabled

Now that Preview Mode is active, we need to add some logic to our application that will allow unpublished content to be displayed on our website.

You may have a certain flag in your content object that identifies if it's published or not - since I’m using Notion as a CMS, I have an isPublic boolean on each of my articles that controls whether or not the article is available for visitors to read.

I’m fetching this data in getStaticProps method so I can take advantage of static generation. If you’re doing the same thing, destructure the new preview prop and use it to filter content based on its boolean value.

export const getStaticProps = async ({ preview = false }) => {
  const articles = await getAllArticles();

  if (!preview || preview === undefined) {
    articles = articles.filter((article) => article.isPublic === true);
  }

  return {
    props: {
      articles,
    },
    revalidate: 30
  };
};

Notice our conditional check - if Preview Mode is disabled, we only want to return articles that have been published. Otherwise, we skip that block and return all of the content.

Nifty - and super simple to use!

Try it out!

Now that everything is set up, let’s give it a shot!

Try navigating to www.yoursitename.com/api/preview?redirect=/blog.

You should be automatically redirected to your intended path and you should see your draft content as well!

If you open the storage tab in your browser, you’ll see the Preview Mode cookies that Next.js set when we hit that special URL!

Conclusion

I feel much more confident writing articles for my blog with Preview Mode enabled; I finally have a way to check the content before I hit the publish button!

Tailwind Gradients - How to Make a Glowing Gradient Background

Braydon Coyer — Thu, 10 Feb 2022 00:18:54 +0000

This article was originally published on my blog.

Gradients have become extremely popular on the web. In fact, it’s unusual to see a product website without a gradient to add a splash of color and contrast all of the negative space.

Subtlety can go a long way - and in this brief article, I’ll show you how to achieve a powerful glowing gradient effect with Tailwind.

Here’s what we’ll be building:

Tailwind CSS Gradients

Before we dive into the implementation, it’s important to understand how gradients work in Tailwind. Tailwind added support for gradients in its second major release, providing several new utility classes to add color stops to achieve a gradient background on an element.

In a very basic linear example, you must define the starting color and the ending color, using the from-{color} and to-{color} utilities respectively. Here’s an example.

<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>

Define the gradient direction

You may have noticed an extra utility class in the example above (bg-gradient-to-r). In addition to the color stops, it’s important to define the direction of the linear gradient on the targeted element.

There are several utility classes available to define the Tailwind gradient direction:

bg-gradient-to-t
bg-gradient-to-tr
bg-gradient-to-r
bg-gradient-to-br
bg-gradient-to-b
bg-gradient-to-bl
bg-gradient-to-l
bg-gradient-to-tl

It’s also worth noting that you can apply the direction and color of the gradient conditionally.

For example, if you wanted to change the direction of the gradient on element hover, you may use the following utility classes:

<div class="bg-gradient-to-r hover:bg-gradient-to-l from-purple-500 to-pink-500"></div>

Tailwind Gradients with more than two color stops

It’s possible to add an additional color stop to Tailwind linear gradients. You can achieve this using the via-{color} utilities. Elements with this utility applied will fade seamlessly between the first, second and ending color stops.

<div class="h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

Setting Up Your Environment to Create a Glowing Gradient

Now that we have a basic understanding of how Tailwind handles gradients, we can turn our attention to the implementation. If you’re wanting to add this glowing gradient effect in a side-project, chances are you have a React, Vue or Angular repository already spun up and standing by. If you haven’t installed Tailwind in your framework of choice, check out the official spin-up guides here.

If you’re just tinkering and want to try new things, the Tailwind team has their own web-based editor with the library configured and ready-to-go. I recommend trying Tailwind Play and following along with this tutorial. CodePen is another great option.

Creating the Background and Constraints with Tailwind CSS

Before we start working on the card and glowing gradient, let’s create the background and add in some width constraints so that the card doesn’t take up the entire screen. You can tweak this to your needs. The code below adds a subtle gray background, uses Flexbox to center the child div and applies a max-width.

For future steps, all markup will be wrapped inside these two container div elements.

<div class="min-h-screen bg-gray-50 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="max-w-7xl mx-auto">
    <!-- All markup will go here -->
  </div>
</div>

Create the Card with Basic Utility Classes

Next, create a div element representing the card itself. Apply some X and Y padding, make the background white, round the corners and apply some Flexbox utility classes for what’s to come.

<div class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex items-top justify-start space-x-6">

</div>

Add Card Content

Now that the container of the card has been established, we can fill it out with some content. The example I’ve created uses an icon on the left, and the card information on the right.

Give the icon a size and optionally add a color using the text-{color} utility class.

The actual text content of the card is placed within a containing div , breaking free from the parent’s flex layout and changing it back to the default display value of block.

The containing div has a space-y-2 utility applied to it which will add margin between the child elements, providing some subtle negative space.

<div class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex items-top justify-start space-x-6">
    <!-- card content -->
  <svg class="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z"></path>
  </svg>
  <div class="space-y-2">
    <p class="text-slate-800">Learn how to make a glowing gradient background!</p>
    <a href="#" class="block text-indigo-400 group-hover:text-slate-800 transition duration-200">Read Article →</a>
  </div>
</div>

👉 NOTE: The card container does not need to be a flex element if you don’t want content side-by-side.

With all this in place, we’re ready to add the gradient!

Create the Glowing Gradient with Tailwind Utility Classes

Making the glowing gradient is shockingly simple. In fact, we really only need one additional element.

Inside of the first container div used to apply a max-width, create an additional div at the same hierarchy level as the div used for the card. Apply the following class names to the new element:

<div class="min-h-screen bg-gray-50 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="max-w-7xl mx-auto">

        <!-- New Div -->
        <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-25"></div>

        <div class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex items-top justify-start space-x-6">
           <svg class="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z"></path>
       </svg>
       <div class="space-y-2">
         <p class="text-slate-800">Learn how to make a glowing gradient background!</p>
         <a href="#" class="block text-indigo-400 group-hover:text-slate-800 transition duration-200">Read Article →</a>
       </div>
    </div>
  </div>
</div>

The magic happens with the -inset-1 utility class that Tailwind provides, anchoring absolutely positioned elements against the edges of the nearest positioned parent. Since the inset utility class is prefixed with a negative value, the element will be positioned outside of the top, right, left and bottom of the parent element.

Of course, since we haven’t set a reference point for this element, it doesn’t give us an expected result. To fix this, add the relative class to the parent div.

<div class="relative max-w-7xl mx-auto">
        <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-25"></div>

        <div class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex items-top justify-start space-x-6">
           <svg class="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z"></path>
       </svg>
       <div class="space-y-2">
         <p class="text-slate-800">Learn how to make a glowing gradient background!</p>
         <a href="#" class="block text-indigo-400 group-hover:text-slate-800 transition duration-200">Read Article →</a>
       </div>
    </div>
  </div>

Feel free to tweak the gradient colors, gradient direction, blur and opacity to your liking!

Implementing the Gradient Hover State in Tailwind with the Group Utility and Hover Modifier

In its current state, the gradient is noticeable behind the card but it may be nice to increase the opacity of the gradient when the user hovers over the card. Thankfully, Tailwind makes this an easy task with the help of the hover modifier.

Traditionally, the hover modifier activates when your mouse overlaps with the element. However, what if we want our gradient to change when the mouse is over any part of the card, not just the gradient?

This is where the group utility class comes into play. The Tailwind group utility class allows styles to be applied based on the state of some parent element. The target element can change with the group-{modifier} utility.

In our example, we want to apply the group class to the parent card div, and then set group-hover:opacity-100 modifier on the gradient itself.

<div class="group relative max-w-7xl mx-auto">
 <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
 <div class="px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex items-top justify-start space-x-6">
   <svg class="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z"></path>
   </svg>
   <div class="space-y-2">
     <p class="text-slate-800">Learn how to make a glowing gradient background!</p>
     <a href="#" class="block text-indigo-400 group-hover:text-slate-800 transition duration-200">Read Article →</a>
   </div>
 </div>
</div>

Now, whenever the mouse is over any part of the card, the gradient’s opacity will increase to 100%. The effect is a bit jarring, though - let’s add a nice transition to allow the opacity to gradually increase and decrease.

To do this, simply add transition duration-1000 to the gradient div signaling Tailwind to make the transition 1 second long. Optionally, if you wanted the increase in opacity to be quicker, you can add the group-hover:duration-200 utility class to the div as well.

With that we now have replicated the popular glowing gradient effect with Tailwind CSS!

Here’s the final result!

A Word on Safari Support

If you test your changes in Safari, the result may look a bit strange and unexpected. Because of key support missing in Safari, you may need to ensure Autoprefixer is installed and configured in your project.

Conclusion

Thanks for reading! If you enjoyed this article, consider signing up for my newsletter so you don't miss out on helpful content like this!

6 BEST Fonts for Programming in 2022

Braydon Coyer — Wed, 26 Jan 2022 14:34:11 +0000

If you’re looking for a fresh font at the beginning of the year, this list is sure to help you discover a few new favorites!

Monospaced fonts are often considered ideal for programmers, as all characters occupy the exact same width making it easy to check, align or compare text.

1: MonoLisa

Remaining in the #1 slot from last year, MonoLisa features a few unique techniques that increase the legibility and make it visually pleasant to look at for longer periods of time.

While MonoLisa is a premium font, it no doubt sticks out as unique even with a quick glance.

Check out MonoLisa here!

2: Consolas

A font released by Microsoft and available by default with each Windows installation, Consolas provides an elegant monospaced typeface that many developers choose to use as their daily driver.

Check out Consolas here!

3: Input Mono

Input is a typeface system that allows for many customizations. Crafted by David Jonathan Ross, Input offers monospaced and proportional fonts.

Check out Input here!

4: Monofur

Monofur, an elegant and free typeface designed by Tobias Benjamin Köhler, is a monospace font that isn’t as widely known as it should be.

Each character is crafted with specific meaning and provides an easy-on-the-eyes option for programmers who spend a lot of time in front of the computer screen.

Check out Monofur here!

5: Source Code Pro

A companion to Source Sans, this monospace font was designed by Paul D. Hunt specifically for coding environments.

Check out Source Code Pro here!

6: DejaVu Sans Mono

An unknown font to me until recently but now one of my favorites, DejaVu provides a beautiful typeface and elegant reading experience for those wanting something a bit more premium without having to pull out the wallet.

Check out DejaVu Sans Mono here!

Conclusion

Whether you’re a new developer looking to find a font style you like, or a seasoned vet looking for a change, I trust that the list above provides a great few font options for 2022!

Thanks for reading! If you liked this article and want more content like this, read some of my other articles and subscribe to my newsletter below!

🤔 Want to see which fonts I recommended in 2021? Check out the list here!

Resources

Explore more highly legible and beautiful fonts in the links below!

A New Opportunity at LogicGate

Braydon Coyer — Mon, 17 Jan 2022 16:24:54 +0000

The last 6 weeks have been filled with new beginnings for many individuals in Tech Twitter. It seems the arrival of the new year has sparked many career transitions, and the same is true of me.

I’m excited to announce my next career move, but before I dive into that I want to look back on my time at Cognizant.

What I Accomplished at Cognizant

I transitioned to Cognizant in May of 2019, coming on board as a Senior Full-stack Engineer. Cognizant appealed a lot to me - I had the opportunity to dive deep into a side of web development I hadn’t touched, I worked in a paired programming environment with strict test-driven development workflows, and I even got to work alongside my brother on the same development team!

Going Full-Stack

Before migrating to Cognizant, most of my experience was in front-end development. I had touched back-end here and there, and while I could make some fundamental endpoints, I didn’t consider myself a back-end developer.

Working in a full-stack environment meant more than back-end though, I also got to work with security and, one of my personal favorites, DevOps.

I had the opportunity to work with Java and Spring Boot, .NET, the Netflix OSS stack (before some of the tooling was sunset), microservice architecture, Docker, Jenkins, GCP, K8s, Pivotal Cloud Foundry, and much more. I absorbed a lot of information and new tech, and expanded my skill set.

Leading Component Design

Shortly after joining Cognizant, I was asked to lead the front-end portion of a team working with a major health-care client. Before rolling on, it was decided that a component library would be best suited to aid and speed up the work required by the front-end team.

I architected, developed and maintained an Angular-based component library that was published to a private Nexus instance and pulled down into the repositories of the development team.

This also meant I had the opportunity to work with the client and design team to understand the upcoming work, create POCs and help shape the product solution.

Internal Bootcamp - Enablement

Cognizant is a huge corporation with hundreds of thousands of employees. Unlike many other consultant companies, each new employee spends the first 4 weeks in an internal bootcamp called Enablement. After completing the work on the component library, I rolled onto the Enablement team to bring my front-end expertise to the program and help teach, train and prepare developers for client delivery.

The internal bootcamp allows developers to work in a mock-client engagement, picking up user stories, fleshing out features and working on a green-field project.

Over the course of two years, I helped train 1,000 developers, brought new front- end frameworks into the Cognizant consultant practice, helped define the front-end interview process for the organization, and had the pleasure of working with some amazing colleges.

Why it’s time to move on

I’m extremely proud of everything that I was able to accomplish at Cognizant.

I learned a lot. I gave a lot.

But all good things must come to an end. I felt it was time for me to get a change in scenery - and so, December 31st, 2021 was my last working day at Cognizant.

My next step - LogicGate

I’m proud to announce that I’ve joined LogicGate as a Software Engineer II Front End!

LogicGate is a company that has crafted an agile GRC cloud solution that combines powerful functionality with intuitive design to enhance enterprise GRC programs.

My first day is January 18th, 2022 and I couldn’t be more excited.

Returning to my Speciality

The last 2.5 years working full-stack have been fantastic. I’ve gained a suite of skills that will serve me throughout my career, but my passion is front-end development. I’m ecstatic that I get to change gears and go back to specializing in my preferred vertical.

I’ll be bringing my Angular expertise to LogicGate to help shape the future of their GRC cloud solution.

Why LogicGate?

I find myself in a privileged situation and at a point in my career where I can be picky about what my future looks like. I interviewed with many companies in Q4 of 2021 and had the opportunity to say “no” to some organizations and “yes” to others. At the end of the day, I was left with a few offers on the table, and ultimately I chose LogicGate.

I knew I wanted to find an organization that put its employees first, believed in its product, had great career growth potential, and ultimately, aligned with many of my values.

I could not be more excited about my future at LogicGate, and look forward to starting on January 18th!

Create a Newsletter Subscription Form with Next.js API Routes and the Twitter Revue API

Braydon Coyer — Mon, 10 Jan 2022 16:02:15 +0000

Collecting emails and shepherding a trusting newsletter list is one of the best ways to nurture a community and grow your personal brand.

In this article, I’ll show you how easy it is to create a newsletter sign-up form with Next.js API routes, React hooks and the Revue API.

What is Revue?

Revue is a newsletter platform that allows writers to easily send both free and paid newsletter issues.

Revue was originally a service created by a Dutch startup, but was acquired by Twitter in January of 2021.

More recently, Twitter announced that creators can embed their Revue newsletter into their profile page, allowing visitors to easily discover and subscribe and driving more web developers to choose Revue as their newsletter service of choice.

Haven’t created a Revue account yet? Create your newsletter here!

The Revue Newsletter API

One of the benefits of using Revue as a newsletter service is the easy-to-use API.

In order to make API calls with Revue, head to the Integrations tab under your profile, collect the API key at the bottom of the page, and store it in an environment variable in your Next.js project.

Take your API key and store it in an environment variable

⚠️ NOTE: Revue just recently changed how their API works. Before you can start to consume the API, you have to verify your account. Contact Revue support for more instructions.

Create the Subscribe Next.js API Route

In order to subscribe someone to your newsletter, a function must be created that passes the user’s email to the Twitter Revue API.

While you could use the Revue API directly in a component, creating an abstraction and using a Next.js API Route allows for greater flexibility and separation of concerns. Plus, if you decide to move away from the Revue newsletter service down the line, the only code you’ll need to update is in the API Route - the function interacting with the Revue API.

If you’re unfamiliar, an API Route in Next.js is a serverless function that provides a solution to build your own API endpoints.

Under the pages/api directory in your Next.js project, create a new file called subscribe.ts and export a default handler function.

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {

}

📣 I’m using TypeScript for this tutorial, but the logic remains mostly the same if your project is in JavaScript.

Next, assume that this function is passed an email from the req object. Destructure the email address from the req object and make a check to see if the email exists.

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email } = req.body;

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

}

If the email is passed to the function, make an API request to the Revue newsletter API and pass the email address along with the API token as part of the Authorization header.

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email } = req.body;

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

  const result = await fetch('https://www.getrevue.co/api/v2/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${process.env.REVUE_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, double_opt_in: false })
  });

}

📣 I’ve passed an additional property to the request called double_opt_in and set it to false, informing Revue to add the subscriber to the list without having to confirm their email.

Finally, parse the result and check to make sure there aren’t any errors before returning the status of 201 to the caller. The function in final form should look like this:

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email } = req.body;

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

  const result = await fetch('https://www.getrevue.co/api/v2/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${process.env.REVUE_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, double_opt_in: false })
  });

    const data = await result.json();

  if (!result.ok) {
    return res.status(500).json({ error: data.error.email[0] });
  }

  return res.status(201).json({ error: '' });

}

Create the Form Types with Typescript

We can leverage TypeScript to apply a state or mode to the subscription form.

Create a new enum called Form and add the following states:

export enum Form {
  Initial,
  Loading,
  Success,
  Error
}

Next, create a new type for the form and utilize the enum that was just created:

export type FormState = {
  state: Form;
};

Create a React Hook to Subscribers Users

With the API Route ready-to-go, create a hook called useSubscribeToNewsletter.ts in your project. While we could put the form subscription logic in the component itself, creating an abstraction allows for reusability throughout your project and simplifies the component itself.

First, create a slice of state to hold the value of the subscription form and then create a reference to the form. The form can be in one of four modes: Initial, Loading, Success, and Error.

import { useRef, useState } from 'react';

export function useSubscribeToNewsletter() {
    const [form, setForm] = useState<FormState>({ state: Form.Initial });
    const inputEl = useRef(null);

}

Next, create a subscribe function inside the hook and call the API Route that was created just a few moments ago.

async function subscribe(e) {
  e.preventDefault();
  setForm({ state: Form.Loading });

  const res = await fetch(`/api/subscribe`, {
    body: JSON.stringify({
      email: inputEl.current.value
    }),
    headers: {
      'Content-Type': 'application/json'
    },
    method: 'POST'
    });

}

After the request has been completed, check to see if there’s an error, otherwise set the value of form to Form.Success and clear out the content in the form.

async function subscribe(e) {
  e.preventDefault();
  setForm({ state: Form.Loading });

  const res = await fetch(`/api/subscribe`, {
    body: JSON.stringify({
      email: inputEl.current.value
    }),
    headers: {
      'Content-Type': 'application/json'
    },
    method: 'POST'
    });

    const { error } = await res.json();

    if (error) {
      setForm({
        state: Form.Error,
        message: error
      });
      return;
    }

    inputEl.current.value = '';

    setForm({
      state: Form.Success,
      message: `Success! You've been added to the list!`
    });
  }
}

Finally, expose the various items created in the hook so that they can be accessible in a component.

return { subscribe, inputEl, form };

The final hook should look like this:

export function useSubscribeToNewsletter() {
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
  const inputEl = useRef(null);

  async function subscribe(e) {
    e.preventDefault();
    setForm({ state: Form.Loading });

    const res = await fetch(`/api/subscribe`, {
      body: JSON.stringify({
        email: inputEl.current.value
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    });

    const { error } = await res.json();

    if (error) {
      setForm({
        state: Form.Error,
        message: error
      });
      return;
    }

    inputEl.current.value = '';
    setForm({
      state: Form.Success,
      message: `Success! You've been added to the list!`
    });
  }

  return { subscribe, inputEl, form };
}

Create a Subscribe Component

Create a new component called Subscribe.js, import the useSubscribeToNewsletter hook and destructure the form, subscribe and inputEl values.

export function Subscribe() {
  const { form, subscribe, inputEl } = useSubscribeToNewsletter();

}

Next, add the appropriate markup to create a signup form. Feel free to tweak the markup below to fit your needs.

export function Subscribe() {
  const { form, subscribe, inputEl } = useSubscribeToNewsletter();

    return (
    <div>
      <p>Updates delivered to your inbox!</p>

      <p>
        A periodic update about my life, recent blog posts, how-tos, and
        discoveries.
      </p>
      <p>No spam - unsubscribe at any time!</p>

      <form onSubmit={subscribe}>
        <input
          ref={inputEl}
          placeholder="bobloblaw@gmail.com"
          type="email"
          autoComplete="email"
          required
        />
        <button type="submit">
          {form.state === Form.Loading ? <span>loading...</span> : 'Subscribe'}
        </button>
      </form>
    </div>
  );
}

Notice the subscribe function attached to the onSubmit event, and the inputEl reference on the input element.

The button provides a call to action unless the form is in the process of submitting, in which case it updates to give visual feedback to the user.

👏 Feel free to add the appropriate logic to display an error or provide visual feedback to the user of a successful submission.

Conclusion

There are three main characters in play for this implementation: the component, the hook, and the Next.js API Route. The component remains simple because the logic is encapsulated in the hook while the Next.js API Route is delegated to contact the Twitter Revue newsletter API and add a subscriber to the list.

Add some styles to your form and try subscribing!

Thanks for reading!

If you found this article helpful, consider signing up for my newsletter below! I often write helpful articles like this one and notify you of new articles each month!

How to Dynamically Create Open Graph Images with Cloudinary and Next.js

Braydon Coyer — Tue, 21 Dec 2021 14:47:42 +0000

Have you wondered how sites like dev.to create dynamic and engaging social sharing banners on Twitter, LinkedIn and Facebook?

I revamped my blogfolio this year and knew I didn't want to continue to create banner images for my articles, and manually create Open Graph images for my social outlets.

I'm extremely happy with the result - now when I share my articles online, my Open Graph images look something like this:

Open Graph image contains article title, author, domain and article banner as an image underlay aligned on the right

In this article, I'll show you how to leverage the powerful Cloudinary API to create dynamic Open Graph images and banners for your website or blog.

TL;DR

Want to know the secret right away? We'll be passing various variables to the Cloudinary image request URL which will transform a template image and add an article title and banner image.

Read on to learn how to do this, or check out my open source blogfolio on GitHub and see how I accomplished this.

What are Open Graph meta tags?

Open Graph meta tags help make your content more clickable, sharable and visible on the web, especially on social media.

meta tags are small self-closing tags that inform the web how to display your content. The Open Graph protocol is part of Facebook's endeavor to consolidate the various technologies and provide developers a single protocol to adhere to in order to allow content to display more richly on the internet.

Sign up for Cloudinary

First, head to Cloudinary and create an account.

Cloudinary has a free tier containing 25 monthly credits, which can be consumed by transforming images, storing images and videos, and spending the bandwidth needed to access assets in your bucket.

✨ Cloudinary gifts you extra monthly credits if you follow their social accounts and spread the word about the service through a message on your timeline. Look for these options on your Dashboard.

Upload your OG template to Cloudinary

Next, either find or create a template image that will be used as a starting point for all of the Open Graph banners. This takes care of a lot of initial layout positioning and creates consistency for the OG images.

The Twitter card images shown in the feed are a 1.91:1 ratio. ****If you're creating your own template, ensure to design it at the recommended resolution of 1200x630.

As an example, here is a preview of the template I created for my blog. It contains the basic layout, a transparent section on the right-hand side for the article banner to be used as an underlay, and most importantly, contains the text that will remain constant for each social sharing image we create.

For the purpose of this preview, I’ve included a visual transparent section of the template. When you export to png, this will not be visible.

Once you've found or created a template, upload the image to Cloudinary under the Media Library.

Add Article images to Cloudinary

It’s also important that your article images are hosted on Cloudinary so you can easily reference the image name when performing the transformation via the API.

You can either upload images to Cloudinary from your computer, or use one of their integrated tools to discover and import images into your media library. I use the built-in Unsplash integration to add my article banners to my library, but you can use other tools like Shutterstock and iStock.

With the template and article images uploaded to Cloudinary, we're ready to move to Next.js.

Create a Shared SEO Component

This part is optional depending on your setup.

I tend to create reusable layout components that I consume on each page depending on the need and purpose.

If you already have a preexisting Next.js project, you may already have a reusable layout component. Either way, here's the general idea:

Create a layout component to be used on your article pages.
Pass children (the actual page content) and render accordingly.
Pass meta information to be used for SEO purposes, including information which will be used with Cloudinary.

Here's an example of a layout component I've created called Container

export function Container(props) {
  const { children } = props;

  return (
    <div className={`bg-white dark:bg-dark min-h-screen'}>
      <NavMenu />
      <main className="flex flex-col mx-auto max-w-6xl justify-center px-4 bg-white dark:bg-dark prose prose-lg md:prose-xl dark:prose-dark relative">
        {children}
      </main>
    </div>
  );
}

From the snippet above, you can see that I have passed children to this component which is rendered inside a main element with appropriate Tailwind utility classes to achieve my desired layout for my blog.

Since this component will be reused on every page of my application, we can also include SEO information and dynamically pass information based on which page is rendered.

import { useRouter } from 'next/router';
import Head from 'next/head';

export function Container(props) {
  const { children, ...customMeta } = props;

    const router = useRouter(); // create a router to be used in the meta object below

    const meta = {
    title: "My site",
    description: "A description about my site",
    imageUrl: "path-to-an-image",
    type: 'article'
    twitterHandle: "https://twitter.com/BraydonCoyer",
    canonicalUrl: `https://braydoncoyer.dev${router.asPath}`,
    date: null,
    ...customMeta // this replaces any properties that we pass to the component as props
  };

  return (
    <div className={`bg-white dark:bg-dark min-h-screen'}>

            <Head>
        <title>{meta.title}</title>
        <meta name="robots" content="follow, index" />
        <meta content={meta.description} name="description" />
        <meta
          property="og:url"
          content={`https://braydoncoyer.dev${router.asPath}`}
        />
        <link rel="canonical" href={meta.canonicalUrl} />
        <meta property="og:type" content={meta.type} />
        <meta property="og:site_name" content="Braydon Coyer" />
        <meta property="og:description" content={meta.description} />
        <meta property="og:title" content={meta.title} />
        <meta property="og:image" content={meta.imageUrl} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content={meta.twitterHandle} />
        <meta name="twitter:title" content={meta.title} />
        <meta name="twitter:description" content={meta.description} />
        <meta name="twitter:image" content={meta.imageUrl} />
        {meta.date && (
          <meta property="article:published_time" content={meta.date} />
        )}
      </Head>

      <NavMenu />
      <main className="flex flex-col mx-auto max-w-6xl justify-center px-4 bg-white dark:bg-dark prose prose-lg md:prose-xl dark:prose-dark relative">
        {children}
      </main>
    </div>
  );
}

While this looks like a lot of code, we are simply crafting a meta object to be consumed inside the Head component that Next.js exposes.

This is enough to properly have your application leverage SEO: simply pass a few props to the Container component and you should be good to go!

However, notice that the meta tags containing og:image and twitter:image using a static image URL.

Let's make it dynamic with Cloudinary.

Building a Dynamic OG Image with the Cloudinary API

Cloudinary's API supports text and image overlays, providing an easy way to dynamically transform images.

Utilizing the API is as simple as appending variables to the URL of an image hosted on Cloudinary.

In the end, the URL may look something like this:

https://res.cloudinary.com/braydoncoyer/image/upload/w_1200,h_630,c_fill,f_auto/w_580,h_630,c_fill,u_learn_tailwindplay_banner.jpg/fl_layer_apply,g_east/w_630,h_450,c_fit,co_rgb:FFFFFF,g_west,x_45,y_-40,l_text:arial_60_bold:Learn%20Tailwind%20with%20TailwindPlay/og_social_large.png

The URL is a bit cumbersome, but let me break it down from top to bottom:

https://res.cloudinary.com/braydoncoyer/ - a base URL containing my Cloudinary account name.
image/upload - the asset type.
w_1200,h_630 - the width and height for the entire image.
c_fill - crop mode.
f_auto - automatically chooses the best format based upon which browser is being used.
w_580,h_630 - the size of the image underlay.
u_learn_tailwindplay_banner.jpg - the name of the banner associated with the article.
fl_layer_apply - applies all chained transformations on the underlaid image.
g_east - informs Cloudinary which sector on the image to place the underlay.
w_630,h_450 - the size of a text box
co_rgb:FFFFFF - specifies the text color
g_west,x_45,y_-40 - determines which sector to place the text, and includes exact pixel positions.
text:arial_60_bold: - font name and size.
Learn%20Tailwind%20with%20TailwindPlay - the encoded text value to display on the left-side of the image.
og_social_large.png - the name of the template uploaded to Cloudinary.

Configure a function to generate the Cloudinary URL

Manually creating a URL like this would be extremely tedious and time-consuming. To make the process easier, let's create a function to build the Cloudinary URL and return it to us.

I've created a file called generateSocialImage in my lib directory.

export default function generateSocialImage({
  title,
  cloudName,
  imagePublicID,
  cloudinaryUrlBase = 'https://res.cloudinary.com',
  version = null,
  titleFont = 'arial',
  titleExtraConfig = '_bold',
  underlayImageWidth = 580,
  underlayImageHeight = 630,
  underlayImage = '',
  imageWidth = 1200,
  imageHeight = 630,
  textAreaWidth = 630,
  textAreaHeight = 450,
  textLeftOffset = 45,
  textBottomOffset = -40,
  textColor = 'FFFFFF',
  titleFontSize = 60
}): string {

  // configure social media image dimensions, quality, and format
  const imageConfig = [
    `w_${imageWidth}`,
    `h_${imageHeight}`,
    'c_fill',
    'f_auto'
  ].join(',');

    // configure the underlay - the actual article banner
  const underlayClonfig = [
    `w_${underlayImageWidth}`,
    `h_${underlayImageHeight}`,
    `c_fill`,
    `u_${underlayImage}/fl_layer_apply`,
    `g_east`
  ];

  // configure the title text
  const titleConfig = [
    `w_${textAreaWidth}`,
    `h_${textAreaHeight}`,
    'c_fit',
    `co_rgb:${textColor}`,
    'g_west',
    `x_${textLeftOffset}`,
    `y_${textBottomOffset}`,
    `l_text:${titleFont}_${titleFontSize}${titleExtraConfig}:${encodeURIComponent(
      title
    )}`
  ].join(',');

  // combine all the pieces required to generate a Cloudinary URL
  const urlParts = [
    cloudinaryUrlBase,
    cloudName,
    'image',
    'upload',
    imageConfig,
    underlayClonfig,
    titleConfig,
    version,
    imagePublicID
  ];

  // remove any falsy sections of the URL (e.g. an undefined version)
  const validParts = urlParts.filter(Boolean);

  // join all the parts into a valid URL to the generated image
  return validParts.join('/');
}

For the most part, you can plug in your information and the function will work as expected. You can tinker with the destructured props to change the position of the text and image to fit your needs.

I call this function on my article page, where I can pass the article title and banner image to the function. The function returns the new Cloudinary URL and is then provided to the Container component.

📣 Recall that the Container component hosts the meta tags needed for proper search engine optimization.

Please note the image named passed as imagePublicID - this is the name of the template image uploaded to Cloudinary. Make sure you swap this name out to match the name of the template you uploaded in your Cloudinary media library.

// [slug].ts

const socialImageConf = generateSocialImage({
  title,
  underlayImage: coverImage.slice(coverImage.lastIndexOf('/') + 1),
  cloudName: 'braydoncoyer',
  imagePublicID: 'og_social_large.png' // the OG template image name uploaded in Cloudinary 
});

...

return (
    <Container
    title={title}
    description={description}
    imageUrl={socialImageConf} // pass the dynamic URL here
    date={new Date(publishedDate).toISOString()}
  type='article'
>
        ...
    </Container>
)

Testing your social sharing Open Graph images

Once everything is hooked up and configured appropriately, you should be able to run your Next.js project ( npm run dev ) and see the meta tags on the DOM under the head element.

Look for the og:image tag, copy the URL and paste it in a new tab. If everything works, you should see your new dynamic Open Graph image that will appear on social media outlets!

Using online tools to validate the Open Graph images

Once your application is published, grab the full article slug and paste it into the textbox on socialsharepreview.com - a tool that validates that your meta tags are correctly configured for the web.

Conclusion

And with that - you've now created a system that dynamically creates Open Graph images for social outlets using Cloudinary and Next.js!

If you've made it this far and completed this article, I'd love for you to reach out to me on Twitter and send me a link to your blog or website so I can see the Open Graph images at work!