Create a modal with styled components

Cook Your Own Modal with Styled Components

Lou Mauget Articles, Development Technologies & Tools, JavaScript, React, Tutorial Leave a Comment

I created several JavaScript modal dialogs – I always extend a framework modal instead of scratch-coding my own. I thought I knew the things a framework needs to implement in order to present a modal but did I? There was only one way to find out: cook my own JS browser modal, and that is exactly what weโ€™ll do in this post.

In this blog, I’ll cover a short approach to hand-coding your own modal with Styled Components. You can find the entire project on GitHub.

Testing React Native Apps

Using Jest and Testing Library with React Native Part III: Element Not Found

Justin Leach Articles, Development Technologies & Tools, JavaScript, React Native, Testing, Testing React Native Series, Tutorial 1 Comment

In the last installment (Part II), we walked through creating and executing our very first test. With that out of the way, let’s move on to something slightly more complicated. Elements that cannot be found typically are elements that are initially hidden. In this post, weโ€™ll cover how to test for an element or component that isnโ€™t found.

Refactoring Strategies For Ugly Code The Does Everything

Refactoring: Ugly Code That Does Everything

Gabe Schmidt Articles, Development Technologies & Tools, JavaScript, Node.js, Programming, Tutorial Leave a Comment

If youโ€™ve been writing code for a significant amount of time, youโ€™re sure to have seen theโ€”anything but godlyโ€”โ€œGod Method.โ€ It’s a method that performs way too many processes in the system and has grown beyond all realistic logic to become โ€œThe Method That Does Everything.โ€

This single unsightly method can span dozens, if not hundreds, of lines. Sometimes even over 1,000! This type of โ€œugly codeโ€ is an unbearable beast to maintain. This is why itโ€™s considered a โ€œcode smellโ€ or anti-pattern.

In this tutorial, we walk through a tangible โ€œGod Methodโ€ and step through the process to refactor it into something more manageable and human-readable. Our code is written in JavaScript for a Node.js service, but the principles apply to any language.

Testing React Native with Jest and Testing Library

Using Jest and Testing Library with React Native Part II: Our First Test

Justin Leach Articles, Development Technologies & Tools, JavaScript, React, React Native, Testing, Testing React Native Series, Tutorial Leave a Comment

This is Part 2 of our series, Using Jest and Testing Library with React Native. This post will cover the steps you’ll need to take to write your first test. We will also break down the code line-by-line, so you have a clear understanding of the process.

Using Jest and Testing Library with React Native Part I: Setting Up

Justin Leach Articles, Development Technologies & Tools, JavaScript, React, React Native, Testing, Testing React Native Series, Tutorial 1 Comment

In this post, Part 1 of Using Jest and Testing Library with React Native, I’ll give a brief introduction to Jest, Testing Library, and React Native. Then, we’ll walk through how to set each of them up. This will prepare us for Part 2, creating our first test.