DEV Community: Justin Noel

Using AI to Research Available Domain Names

Justin Noel — Sat, 12 Jul 2025 16:29:27 +0000

We've all been there. You had a great idea for a new service. Vibe coding helped you develop the front end and back end in a few ~~days~~ ~~hours~~ minutes 😜.

Now you're stuck trying to choose a domain name for it. As we all know, all the good ones are taken, right?

How are you going to find some good domain names for your service? Tell AI all about your amazing idea. Then, let it generate a list of possible domain names for you and see if they're available. Rinse and repeat.

Next step? Fame, instant riches, private jets, and attending weddings with other gazillionaires!

Here's a demo of how to do that.

Video of Generating Domain Name Ideas with AI

Transcript from video:

Here's an interesting use case for AI.

Say you're starting a website to help people remember to brush their teeth.

But as we all know, choosing a domain name is the hardest part of creating a new SaaS.

Well, use AI to do it for you.

Tell it what you're going to do and ask to suggest some domain names.

I'm using TypingMind to query OpenAI for this.

You get this nice list of domain names and a question mark next to each one of them.

When you move your mouse over the results, you can see that you can actually check if a domain name is already registered.

If I click here you'll see that BrushBuddy is already registered.

You could contact the broker to buy it or see the WHOIS information on it.

Let's see, mintireminders.com.

This is not taken, so you could register this domain name and use it for your great new service.

FYI, the domain name status is provided by https://instantdomainsearch.com.

There you go. Now you're well on your way to dot com riches!

Photo Credit: https://unsplash.com/photos/a-black-and-white-photo-of-the-word-comm-S7GcgdI7WjQ

Real Code is Better than "leet" Code

Justin Noel — Mon, 03 Apr 2023 13:49:09 +0000

I'm a member of the amazing Virtual Coffee online community. For about 2 1/2 years, I've watched aspiring developers discuss their struggles, wins/losses, ask for help, learn, and grow into professional developers.

In our many video and Slack discussions, we talk about job hunting, interview preparation, and the struggles of live coding and take home assignments during interviews. Many of the aspiring developers go to great lengths to create portfolio apps from boot camps, maintain an active Github a profile, and participate in "leet" code, kata, or code war challenges. I'm always very impressed by their tenacity and dedication to their craft.

WARNING: Opinions below. Take them with a grain of salt. YMMV.

I often see these aspiring developers spend so much time "preparing" that they have never actually produced anything that solves a real problem. I have often given the advice that scratching your own itch and building a useful product might be better than all this preparation. This "product" doesn't have to be a money making thing. Otherwise you might actually not need a job! It could just be some tool you've created for yourself to solve a simple problem. It could be an amazing spreadsheet you created for your accountant friend. It could be something to help a local charity process new food intakes. Perhaps you've created a website for a local business. It can literally be anything that solves a problem or entertains someone.

As anecdotal evidence, I present this quote from Tony Dinh, the creator of BlackMagic and TypingMind.

My technical skills: I can write code very fast. Coding is the easy part for me. I’ve been writing code since 15. I have written code almost every day over the past 8 years. I can’t solve medium Leetcode problems and don’t write the best clean code out there, but I still love writing code and putting code together to make something useful.

Personally, I have never even attempted any of these "code war" problems before. I don't do any of those katas or other type challenges. I bet most of you "junior developers" would run circles around me at those challenges.

My point is that you can create profitable, useful, and/or innovative products without being a particularly good programmer as long as you find something you like to work on and solve a problem that you or someone you know has.

If you enjoy doing these code challenges, that's great. I'm sure they can be very educational. Enjoy! However, if you're just doing them to "level up", I think you'd be better off just solving a real problem with code. Then in interviews, you'd have a real code base to demonstrate your skills to potential employers. They will see that you have the ability to solve actual problems. Your code base can demonstrate to them you have the technical skills, the initiative, and the tenacity to solve problems just like they will need you to do in their work environment.

Please understand, that I'm not discounting your struggles. Breaking into the tech industry is very hard to do. There are way too many hurdles and ridiculous hiring practices in this industry. However I believe a real product that you have created yourself and can demonstrate during interviews may do more to help you get the job you desire than some scorecard on a "coding wars" website. In the long run, you have to do what is best for you to get a job in the tech industry. Maybe the best thing is what you're already doing or maybe it's a combination of what you're doing now and what I'm suggesting.

But!!: Sometimes, I've suggested this approach and heard back from people that you shouldn't have to be a programmer in your spare time. Your hobby shouldn't have to be programming. You should be able to have a life outside of work! That is all 100% true. However, if you're trying to get your first developer job, you have the choice of either spending your spare time on code challenges that may not help you at all or spending that same time building something useful. I know which I would choose.

To Hiring Managers: Please stop using coding challenges, white boarding, and take home assignments as your default way of evaluating a candidate. Instead, find out if they have a project that they've created themselves from scratch. Get permission to access their git repo, review the code, evaluate their coding style, and see their growth over an extended period of time. In the interview have them walk through the code to make sure they truly understand it. Also ask them for an explanation of why they wrote a function a particular way and how they may change it now that they're more experienced. You're much more likely to find out how well somebody can code this way than from some random coding challenge or whiteboard problem.

Photo Credit: Nubelson Fernandes

Without Us

Justin Noel — Wed, 30 Nov 2022 14:58:20 +0000

tl;dr: The marvels of the modern world aren't possible without the contributions of us all. YOU are important. Your role is vital. So is everyone else. Let's treat each other that way.

Backstory

Mid December, 2020

My wife received news that her father, Brendan, was in hospital and about to pass away from a very aggressive type of cancer. He would soon be sent home for palliative care. My mother-in-law, Carmel, was not in the best of health either and was not able to take care for herself, let alone Brendan. So, we rushed to England with our boys to take care of them both.

Brendan was brought home from hospital late Thursday, December 17th. For several days, many family members took turns caring for him while several hospice care nurses came in and out to monitor and assist. At some point, the hospital he'd been at called us with some bad news. The ward Brendan had been in for several weeks had a bad COVID outbreak. The doctors suspected Brendan had been infected as well. We were advised to take additional precautions. Sadly, Brendan died on December 19.

Within a few days, we realized that eight family members that had brought food or helped care for Brendan had COVID - including me, my wife, our two boys, and Carmel. The next few days were pretty miserable with us all sick and suffering with grief.

Christmas morning, 2020 at about 8:30 am.

My wife and I were asleep in bed, still sick with COVID. An unusual noise startled me from my sleep. Then, I heard it again. My phone was alerting me to something, but the sound was only vaguely familiar. I ignored it and waited to drift off to sleep again. As the sound repeated a third time, realization dawned on me that it was the ring tone for the Be My Eyes app. Someone with limited vision was using the app to ask for help.

I snatched up my phone and answered the call, "Hello. I'm Justin. Can I help you with something?" The caller explained she was trying to find a snack in her pantry. She was blind and unable to tell the difference between several different bags of chips (crisps if you're in England). She turned on her camera to let me see her pantry. I was able to tell her which bag had the flavor she wanted. When I confirmed she didn't need any more assistance, I told her I was happy to help and hoped she'd have a Merry Christmas. She told me it wasn't Christmas yet for her. She explained she was in Alaska where it was Christmas Eve and about 11:30 pm. She'd just finished wrapping presents for her little kids and wanted to relax a bit with a snack before going to bed. She asked where I was, and I answered, "London, Englad". We exchanged more pleasantries and then said goodbye.

Later in the day, our Christmas "celebrations" consisted of sitting on Carmel's bed while our boys each opened the one present I had brought with us. As we were all sick, we couldn't be bothered with a meal and spent most of the day in bed. Despite this being a less than cheerful scenario, I was actually elated that I'd helped someone earlier in the day with what to me was such a simple task.

NOTE: This next portion is written from the perspective of technology. However, don't stop reading if you're not in that sector. Everything I describe here applies to anyone in any job or home life position.

The Wonders of Technology

Over the next few days, with nothing much more to do, I started to really think about what had transpired that Christmas morning.

A blind person 4500 miles away had picked up a phone, placed a "call", was able to share video of her home, and get some assistance with such a "mundane" task from a complete stranger.

On previous Be My Eyes calls, I had helped a caller find the puke her cat had left on her carpet, helped a person select a can of green beans from their cabinet, and assisted someone with reading a portion of a letter.

I've only assisted with Be My Eyes about 4 or 5 times. However, there are 6 million volunteers and 500,000 blind and low vision people using the service - all for free.

Those of us in the technology industry probably have a good idea of the scope of people, job functions, tools, and material required to make this and many other near-miracles happen.

Without any one part of the chain, none of this could have happened. With no radio engineers, the phone couldn't connect to cellular networks or WiFi. With no software developers, the Be My Eyes app wouldn't exist nor would the databases nor servers that the app relies on. With no silicon, the computer chips would not exist for the phones or servers involved in this service. Literally hundreds of job functions and millions of workers were required for me to assist someone in picking a bag of Flaming Hot Cheetos rather than a bag of Doritos.

Thanks to millions of other people, I was able to help someone on Christmas ~~Day~~ Eve relax and just have a slightly more pleasant life.

Without (all of) Us

Over time, I thought about this more. Above, I only mentioned the technology aspects of that near magical call. Looking a little deeper, it's clear that hundreds of millions, actually billions, of people made that "simple" phone call possible.

Farmers produced the food that fed countless tech workers
Truckers and other transportation workers got the food to stores
Grocers provided a safe and sanitary place for people to buy the food
Chefs, parents, wait staff served that food to their customers or family
Sanitation workers collected all the refuse produced in this whole process

I could go on and on with the chain of workers that help us live everyday. If you look between the "Truckers" and "Grocers" section above, you could add hundreds of other sub functions. Then, you could split each of those dozens of ways.

The point is that it takes all of us to make the world work. There are no "Essential" or "Vital" workers. Without all of us , the world stops working. We all"make the magic happen".

Without YOU

Many times in my life, I've heard people say something like, "I'm just a ..." or "I only do ...". It's like they are ashamed of the work they do. These people have been friends, coworkers at multi-billion dollar companies, or casual acquaintances.

In the past, I've agreed with them and even said the same thing myself. It can be a bit humbling to have a less than glamorous role in a group of peers that seem to make "the magic" happen. Working as a bagger in a grocery store can seem less important than helping to launch a space ship.

"In the beginning", humans had only one job. They had to feed themselves. Anyone that didn't participate in the job of hunting or gathering, didn't eat and didn't survive long.

Over time, humans began to specialize. One group hunted, one group gathered, and another group cooked. Later came farmers, potters, ship builders, sailors, historians, teachers, engineers, and astronauts.

Despite these specializations, every person on earth still has one primary job - to feed themselves. However, now, they outsource it to billions of other people so they can focus on their specialty. No single role is more important than any other. We all play an essential role in ensuring goods, services, and health care are available worldwide.

If you're "just" the cashier, administrative assist, accountant, barista, sailor, homemaker, salesperson, cook, CTO, cotton picker, designer, planner, etc., you are a linchpin in the entire process of the world. If you stop doing your secondary job, each of those specialists will begin to slow down. If you walk away from your phlebotomists role, people start dying! Instead of having their clothes dry-cleaned, they'll need to wash them at home. House cleaners all start farming? That CEO has to start to vacuum themselves. Eventually, as more and more "secondary" jobs are abandoned, everyone has to revert to their primary job of feeding themselves. The world would devolve into chaos.

The world needs you in whatever capacity you provide. You are important. Your job is vital. Those rockets aren't going to launch themselves!

But I'm just a cashier in a coffee shop.

If you "just" numbly ring up purchases and hand coffee across the counter, then you really are "just" a cashier. If you instead greet each customer with a smile, wish everyone a good day, and learn to greet returning customers by name, you are much more. You're an ambassador to everyone's morning. You build good will for your company. More importantly, you can set the tone for all your customers' days. Greet them with a kind friendly smile, and they'll walk out of that coffee shop ready to take on the world. They'll have a smile on their face, and they'll return your courtesy to others. It's infectious! Go spread the disease!

But I'm just a housekeeper.

No, you're not. You're a household maintenance expert. Your employer(s) leave(s) their house knowing the mess they left behind will magically get taken care of. They won't dread their afternoon because of thoughts of returning home to a mess that they have to deal with.

But I'm just ....

It's so easy to denigrate ourselves and for others to do the same to us. Learn to get out of this mindset trap. Figure out what you can do in any role that helps someone else in their role. You have to be at your job anyway. Why make it miserable for you and others? If you can do this routinely, you just might find you will no longer "just" be "X" because you've been promoted to "Y".

P.S. Now that we see how everyone is equally important, let's please start treating each other that way. There are no "peons". No job is worthless or meaningless. Please don't be condescending to the accountants, waiters, nurses, or bell boys you encounter each day. Don't yell at management because someone didn't do something "just so". Be pleasant to everyone you interact with. If possible, put a smile on their face. Your kindness will make it easier for them to deal with so many others that are less than pleasant.

Keep in mind that if your rudeness causes someone to get fired or to quit, you might soon regret it ... Someday you may discover they are much better at hunting and gathering than you are.

Cover Image by Dillon Wanner on Unsplash

Photo by Crawford Jolly on Unsplash

Using the Side Door to Get a Developer Job

Justin Noel — Thu, 28 Jan 2021 08:26:34 +0000

I recently left my "Senior Mobile App Devleper" job to deal with some mental health issues, get myself back to "normal", and explore what I wanted to do with my life.

Fortunately, I stumbled across the amazing Virtual Coffee community started by Bekah Hawrot Weigel and Sara McCombs. They've fostered a very welcoming community for tech professionals from many diverse backgrounds and different skill levels.

A frequent topic in our meetings and Slack conversations is about how hard it is to get hired for a "junior" developer role. There are horror stories of 3 hour interviews, no call backs, "we only hire senior developers", etc.

It's clearly demoralizing for so many of these very talented people. I see their conversations, check their portfolios from boot camps, see their Github repos and their blog posts, and think, "Many of these 'wannabe' or 'junior' developers are more capable than me 🤯!" (Looking at you Lucia Cerchie, Tori Crawford, Debra-Kaye Elliott, Aurelie Verrot, Dominic Duffin, Meghan Gutshall)

However, they are still struggling to get in through the front door 🚪. I recently wrote this screed in a #job-hunting Slack channel for Virtual Coffee. Since I also needed to post it in another group, I decided to just blog about it and share it with more people. Maybe it will help you figure out how to get started as a developer in a non-traditional way.

OpenPhone has some “open” 😜 positions.

If you're struggling to get into an engineering role, maybe consider applying for a different role like "Customer Experience Representative".

Suggestion: If / when you interview for something like that, explain to them that your real goal is to get into web/frontend/mobile/back-end development. You’d love to start with them to get experience in their company. However, you’d be very interested in:

Starting at Job X with a goal of being considered for Y Jobs after Z months

Hope this introduction actually leads them to say, “You know what, I know Helen in Engineering is looking for a junior developer. Let me send your resume to her.”

Now, don’t be deceptive or intending to waste their time. If you’re really in need of a job, be ready/willing/able to do Job X and commit to it for at least a year.

Long Personal Story:

I applied for a job at MCI (now defunct - thanks, Bernie Sanders 😡!!) and got invited for an interview. I had ZERO telecom experience. Fortunately, before the interview, I found a downloadable course online about telecom switches. This was back in 1995 when "online" was very different to today. I had to pay $65 💰 to buy the course!

When I arrived, the recruiter talked to me for a long while as we waited for the hiring manager to arrive. We got to know each other (yes, this works well @Gant!) at a personal level.

Finally, the hiring manager came in. She was quite abrupt and rude. She literally walked in, looked at my resume, and said, "He doesn't have any skills I need." Then she walked out. That was the extent of my "interview".

The recruiter was shocked and angry. She apologized profusely and then said, "I know Don is looking for someone. Let me go get him."

He came in, looked at my resume, and then asked me a few questions. "You were a nuclear reactor operator?". It was clear he knew I had no relevant experience but was intrigued with my ability to learn something so difficult as that. He finally asked, "What's tip and ring?".

OMG 🤯! Thank goodness for purchasing that course! I was able to explain it. He asked how I knew the answer, and I told him. He hired me on the spot for $10K more than what I was previously making and had stupidly offered as my starting salary.

Within 4 months, I had excelled at the job, purloined a Windows 95 computer (we were on Windows 3.1 & NeXTSTEP) that had Microsoft Access on it, and developed a massive time saving program using Visual Basic for Applications. I got a huge raise, was awarded the "Ring of Champions", went to lunch with a Vice President of the company, and flown out to California for 5 days for an award ceremony.

While I was not officially a "professional" programmer (not my job title), this was really the launch of my programming career. Through 2005, I had other telecom job titles but did "shadow IT" work developing tools for my department to improve workflow and productivity. Again, I ... umm .... got access to a server to build web apps using the LAMP stack.

Finally, in 2006 after leaving the company to try (and fail) at starting my own business, a former co-worker that was now a manager called and offered me a job doing full-time development work for his entire department.

I had finally "made it"!

Moral of the Story:

Good managers / corporate recruiters are looking for people that can prove they are willing and able to learn and persevere. That is infinitely more important than checking all the boxes on a bogus job requirements list.

They know that no one can do all those things. They know that no one already knows their processes, workflows, and road blocks.

They are looking for someone that can come in and get up to speed quickly and deal with all their internal hurdles.

If you're having trouble breaking in through the front door ("Frontend Developer"), then consider sneaking in through the side door. Consider jobs that might not be exactly what you want (but are still appealing) that can get you a foot in the door.

Prove your skills. Maybe make a tool that speeds up your workflow and show it to your manager. You just might get a chance to ride the escalator up to the next level.

P.S. I really struggle with depression, self-confidence, and impostor syndrome. Many times, I've considered hanging up my developer hat because:

"I just can't hack it anymore"
"I'm not good enough"
"Tech moves too fast for an older person like me"

Often, I've also considered those "alternative" roles like "Customer Success", "Tech Support", and "Developer Relations". I've developed applications, web sites, and mobile apps. I know how non-technical users can struggle to get things to work. I can empathize with them, create tutorials, etc. One of my favorite things is to see how delighted someone can be after they've struggled with making something work and then I show them how to do it.

Does anyone have stories, advice, or suggestions on how to stay in tech while not actively contributing to a code base? I just don't feel in the right frame of mind to keep up with the developer pace anymore. However, developer jobs at my level pay a whole lot more than these other roles. Ideas? Let me know on Twitter or DM me in any Slack/Discord servers we share.

Door Photo Credit: NeONBRAND

Job Hunting Advice for Developers

Justin Noel — Tue, 08 Dec 2020 15:06:54 +0000

I hope you and your family are well in these trying times. This is a tough situation for millions of people right now. However, as software developers, we are pretty fortunate that we can generally work from anywhere and there are lots of opportunities out there.

Having said that, finding work is a job in and of itself. If you're looking for developer jobs, here's a list of sites I've learned about over the years that list jobs or have advice on looking for work. I've also added some of my personal advice. I hope it helps you find the right opportunity!

Remote / Contracting / Freelance Jobs

(Listed in the order of my familiarity with them)

https://weworkremotely.com Excellent resource!
https://www.gun.io
https://remoteok.io
https://nocsok.com Great newletter service of jobs not requireing a Computer Science degree
https://github.com/sourceful/jobs
https://communo.com/
https://justremote.co
https://remote.co/remote-jobs
https://www.dl-remote.com
https://www.moonlightwork.com (Thanks Randy Brown)
Tech Remote Jobs App
https://jobspresso.co
https://www.flexjobs.com
https://knack.io/

Big Name Job Search Sites

General Info Sites & Tools

Grow Your Community === Grow Your Opportunities

Since becoming a "professional developer", I haven't actually ever had to search for a job. In most cases, they came to me. I've been incredibly blessed. While freelancing from 2013 to 2019, I actually got 3 contracts just through referrals on Twitter (thank you Jeremy Wilken!) and the Ionic Framework forum. Every week, I receive numerous emails and LinkedIn messages from recruiters.

The key to this I my involvement in the developer community. I was very active on the Ionic Framework forum in the early days. I answered questions, posted sample code, etc. As I was learning AngularJS and Ionic Framework, I used the forum to help myself and others. I actively use Twitter to keep aware of the tech I'm interested in and connect with others with the same interests. From time to time, I answer a question on Stackoverflow.

Blogging

Another key to building a community is blogging. Blogging really helps to get your name out there. It showcases your knowledge, growth, and writing skills. Development jobs require the ability to communicate with others, express complex ideas in easy to understand ways, and the ability to teach and educate. Your blog can prove to an employer that you have those skills. It also demonstrates your passion and commitment to your craft. Finally, it will be a great resource for you when you forget how to do something you already solved in the past 🤣.

Kadi Kraman 💚

@kadikraman

One of the awesome benefits of writing blog posts is being able to refer back to a past you who had in depth knowledge in a particular topic that current you has long since forgotten

09:09 AM - 28 Oct 2020

Keep your Linkedin profile up to date and follow your coworkers (past and present). An expansive network on Linkedin will lead many recruiters to your door. Former coworkers might have become managers and are looking for new hires. Occasionally, instead of blogging about something, post it on Linkedin or put it on your blog and cross-post it on sites like dev.to .

FYI: I advise not accepting Linkedin connections from recruiters. This will pollute your recommendations with more and more recruiters instead of people you've worked with in the past and others you're actually interested in. Instead, just let recruiters message you directly via Linkedin. If you do get a connection request with some job info you're interested in, look the person/company up and contact them directly.

UPDATE: Linkedin a bit too "corporatey" for you? I just discovered another networking service that's starting up now - Plural.com.

Social Media

Use your social feeds to promote others. If you see a great new blog post, tool, or service, post about it! We all love a little recognition. By helping others get noticed, you are also raising awareness of you.

Remember that it is better to give than to receive. Don't be out there shilling yourself non-stop. Instead, engage with others and get to know them on a professional level and later personally (depending on your comfort level). Share info and links that will help others. Once you are part of the community, you'll find others will be there when you need help.

Follow other developers on Twitter and join discussions that interest you. Use Twitter to search for specific topics and follow the people in those discussions.

https://twitter.com/search?q=%23ReactNative
https://twitter.com/search?q=%23ReactJSGirls
https://twitter.com/search?q=%23ImpostorSyndrome
Search on just about any of your professional interests

Local/Virtual Meetups

Use Meetup & Meeting Place (thanks @ChrisAchard) to attend events (virtually of course 🤣). Now that everything is virtual, you don't need to worry about not finding something of interest in your city. Here are some I attend or just discovered:

Almost all of these events start off with a jobs discussions. People looking for work get to announce themselves, and people hiring get to describe their company and open positions. This is a great opportunity to get an interview and get exposure in the community.

At these events, get to know other developers and most importantly the organizers. Once you feel comfortable with the group, offer to present on a topic you're really interested in. Organizers are frequently looking for new people to present. Don't miss this chance to get yourself out there. This can open many doors for you.

Discord and Slack Groups

Find a Discord or Slack group that matches your professional interests and participate. Most often, they have general discussion, jobs, and help channels. Get in there and be part of a community. Examples:

React Podcast

@reactpodcast

Join is in Discord today for a New Episode Party!

These events are a great way to meet other React folks in a fun, casual way

@tylermcginnis is joining us today and excited to meet you too 🥳

Today, 10am PT

discord.gg/dx7ZWCy twitter.com/chantastic/sta…

16:30 PM - 27 Nov 2020

HTML Developer @chantastic
Tyler takes it back, waaaaaaay back to 2015 and the first React Conf 🐣 @tylermcginnis shares everything new at https://t.co/SzEqm6HOC1, cheating our way into React events, and the curious link between Mormon missions and React education… https://t.co/p4pWHlTkDD #reactjs

Madison Kanna

@madisonkanna

An announcement I'm very excited about!

Are you learning JavaScript in 2020? Or are you a JS dev who wants to level up his/her skills?

Myself & 2 of my friends are starting an online JS book club. I wrote up some details below. I hope you'll join us!👇

dev.to/madisonkanna/j…

20:42 PM - 11 Jan 2020

Open Coffee Clubs

Get out of the house (hopefully soon!) and meet new people by attending a local Open Coffee Club. Most of these have gone virtual as well. A broad spectrum of people are at these meetings. Quite often the discussion is about entrepreneurship, new technology, etc. They also frequently start with job discussions. This is a great way to slowly begin networking with professionals in your area.

Unlike "meet and greet" events, you won't be on the spot to do small talk with someone you've never meet before (introverts raise your hand 🖐 - you know what I'm talking about). Instead, these meetings are about group discussions and casual back and forth. You can lurk here safely without fear of being in the spotlight.

Be Nice!

You can post whatever you like on your social media accounts (no judgement from me). However, be aware that your posts, likes, favorites, and even followers are a window into your personality.

If you're kind, caring, and helpful online, potential employers will see this. If you're caustic, mean, and uncaring, potential employers will see this as well.

Again, post whatever you like. Sometimes social media is the right place to rant about a subject to get someone to fix a problem. However, lean towards more positive than negative content.

Employers are of course looking for someone that knows their tech stack or can learn it quickly. Just as importantly, they're looking for someone that's a good fit for their team. How you present yourself in public can be the difference between getting an interview or having your resume ending up in File 13.

Suggestions?

I really hope all this info helps someone in their job hunt. If anyone else has suggestions or other resources, feel free to let me know on Twitter. I'll be happy to add them here with your permission.

Photo Credit: https://unsplash.com/@kevnbhagat

Enforcing Consistent and Error Free Code in an Expo React Native Project with TypeScript

Justin Noel — Mon, 20 Jul 2020 10:40:09 +0000

Have you ever done any development in a team environment - anywhere it's not just one person committing code? You've probably seen inconsistent code formating, different structure, etc. You've probably even been in a few "tabs vs. spaces" debates - perhaps more than a few times on the same team 🤦‍♂️.

Several teams I've worked with have solved these problems by either using EditorConfig or Prettier in their IDEs. However, this has alway lead to someone's IDE or config file being slightly different and not always being consistent.

Another pain point in group development is with code that has cruft. Say for example, someone adds a variable or imports a library in a file and never actually uses them. Other teams might have a "rule" of "No for loops!", but they have no way to enforce it other than code reviews. We know many of our team's rules are going to slip through the cracks.

The best way to solve all these problems, improve productivity, and prevent constant bike shedding is to have automated tools enforce code quality. Don't worry, this doesn't mean you can't choose your own rules, it's just that you won't have to repeatedly insist on them during code reviews. After implementing the suggestions in this post, your code will be "perfect" - but not necessarily bug free (that's on you).

TL;DR: You can see the final configuration on this Git repo: https://github.com/calendee/expo-lint-demo

The open source tools I'll present here will save you & your team/company countless hours of bickering or developing custom tooling.

Please consider contributing to them to ensure the developers have the funding and motivation necessary to keep making these great tools.

You can find links to several of these tools on my own contribution record on Open Collective or their respective GitHub Sponsorship pages.

In this article, I'm going to walk through starting a brand new Expo tabs project (this whole article can be used for ANY React or React Native project) from scratch and do the following:

Configure Prettier
Configure Linting with TypeScript
Solve all the existing linting & formatting issues
Setup auto-commit hooks that enforce all the new configuration rules
Teach you how to speed up your auto-commit hooks
Explain the neeed for CI/CD build tools to prevent anyone from bypassing the team's rules before PRs are merged

Start an Expo Project

Our base project is going to be the default Expo "tabs" project with TypeScript.

expo init expo-lint

The Expo CLI will prompt us to choose a template and then install it for us.

NOTE: The configuration ideas from this point forward are from several of my own older blog posts and code I liberally copied from Khalil Stemmler's great series on doing similar things in TypeScript projects.

Configure ESLint for TypeScript

First, we need to get ESLint configured to support TypeScript:

yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Now, let's add an .eslintrc file in our project's root directory so that it looks like this:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

Next, we'll need to add an .eslintignore file to ensure our linter doesn't go to crazy and start linting every directory in our project:

node_modules
dist
.expo
.expo-shared
web-build

Now, we'll need to add a lint script to our package.json:

{
...,
"lint": "eslint . --ext .ts,.tsx,.js,.jsx,.json",
"lint-and-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.json --fix",
...
}

The two script above will let you run yarn lint or yarn lint-and-fix to see/fix all the linting errors in your project.

If you run yarn lint right now, you'll see an explosion of errors/warnings 🤯!

Let's just ignore those for now and move along.

Installing and Configuring Prettier

To install Prettier, run this command

yarn add --dev prettier

Now, we need to add the magic sauce to keep all your files formatted just the way your team likes (after arguing for a few days).

Add a .prettierrc file to look something like this:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": false,
  "printWidth": 80
}

Now, everytime you save a file, your IDE will hopefully respect this file and format it just the way you've requested. You may need to adjust its settings to get this to work properly.

For example, Prettier will automatically convert const a = '1' to const a = "1"; every time you save the file.

However, the real magic will happen later on. Even if someone codes in VI with no IDE assistance, we'll make sure those files are formatted properly.

We also need to keep Prettier and ESLint from whacking each other over the head. Modify your .eslintrc file to look like this:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

Finally, add a script to package.json to run prettier on all your existing files:

{
...,
"prettier-format": "prettier --config .prettierrc '**/*.{json,js,jsx,ts,tsx,css,scss,md}' --write",
...
}

This script will automatically cleanup all the files we care about. If other file types are needed, include them inside the brackets with a comma - be sure to NOT have any spaces!

Now, run yarn prettier-format and watch it automagically format many of the files in our project. Just like that, we've updated the formatting for every file in the project. Now, if a team member modifies one of those files days or weeks later, their PR won't be polluted with tons of formatting changes that hide their real changes.

Configuring React & Jest Linting Support

When we ran yarn lint earlier, there was something pretty strange in the output. It frequently pointed out things like:

warning 'React' is defined but never used @typescript-eslint/no-unused-vars
warning 'View' is defined but never used @typescript-eslint/no-unused-vars
warning 'TouchableOpacity' is defined but never used @typescript-eslint/no-unused-vars
warning 'it' is not defined
warning 'expect' is not defined

WTH??? The problem is that ESLint doesn't understand React and JSX. So, we need to introduce it to them.

yarn add --dev @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-react eslint-plugin-prettier eslint-plugin-jest eslint-plugin-react

Now, once again, edit the .eslintrc file as follows:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint", "prettier", "jest"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:jest/recommended"
  ],
  "rules": {
    "no-console": 1,
    "prettier/prettier": 2,
    "jest/no-disabled-tests": "warn",
    "jest/no-focused-tests": "error",
    "jest/no-identical-title": "error",
    "jest/prefer-to-have-length": "warn",
    "jest/valid-expect": "error"
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "env": {
    "jest/globals": true
  }
}

If we run yarn lint again, there are still a ton of problems, but React ain't one of em.

Adding pre-commit Hooks with Husky

We've finally got our project configured to lint and prettify everything! Now, let's configure Husky to make sure our code can't be committed with linting issues and that all code is automatically prettified.

yarn add --dev husky

Now, modify the scripts section of package.json again:

{
...
"husky": {
  "hooks": {
    "pre-commit": "yarn prettier-format && yarn lint"
  }
},
...
}

Now, every time a developer runs git commit -m"here's my awesome code!" Husky will try to run prettier and linting to make sure that code really is "awesome".

Running that right now, results in a big, " NOT!"

Husky blocks the commit because there are a ton of errors in the code. Woohoo! Mission accomplished!

Fixing All the Linting Errors

Our new yarn lint output frequently shows issues like this:

/Users/jn/Documents/Apps/expo-lint/App.tsx
  10:16 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types

Missing Return Type

In our IDE, the function App() is underlined to show that ESLint thinks something is wrong with this code.

Moving the mouse over the underlined code will show a hint about what is wrong:

The issue is that TypeScript really likes to have the return value of every function explicitly identified. This helps avoid bugs by ensuring any calling functions are expecting and properly using the return value of the function. It also forces a developer to seriously think about the consequences of changing the return signature of the function. If they just let type inference happen, they might not go investigate what impacts their change might have.

With React, there are several ways to solve this problem. In the sample above, ESLint helpfully displays the inferred return value of the function. So, one possible fix to this problem is:

export default function App(): JSX.Element | null {...}

This code explicitly tells TypeScript what to expect this function to return.

Another possible refactor depending on style preferences is:

export const App: React.FunctionComponent = () => { ... }
export default App;

So, let's go through finding all these Missing return type issues and solve them like

export default function ???(): JSX.Element | null {...}

We're not done with missing return types yet 😢.

/Users/jn/Documents/Apps/expo-lint/components/Themed.tsx
7:8 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types

This one's a bit different as this is just a function. We need to explicitly type the return as a string like:

export function useThemeColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
): string {...}

And another similar one:

/Users/jn/Documents/Apps/expo-lint/hooks/useColorScheme.web.ts
  3:16 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types

Again, this one is a bit different. Let's look at this code:

// useColorScheme from react-native does not support web currently. You can replace
// this with react-native-appearance if you would like theme support on web.
export default function useColorScheme() {
  return "light";
}

We could fix it just like this:

export default function useColorScheme(): string {
  return "light";
}

However, since this function literally can't return anything other than light, we can fix this linting issue more precisely with a "string literal".

export default function useColorScheme(): "light" {
  return "light";
}

Component Definition is Missing Display Name

Our next big issue is about the navigation/BottomTabNavigator.tsx missing a display name.

The react/display-name warning hints that the code in question is going to make debugging more difficult. When using the React debugging tools, it's very helpful for every component to have a name. This makes it easier to "see" what code is generated and search for a component in the debugger.

Normally, a developer doesn't have to provide a "display name" to their components. React automatically derives it based on the variable assigned to it.

However, in this file, the bottom tabs icon is generated in an anonymous, inline function. React can't make up a display name for it - hence the warning.

To solve this, we need to get rid of those inline functions and replace them with a component as follows:

const BottomTabTabBarIcon = ({ color }: { color: string }) => (
  <TabBarIcon name="ios-code" color={color} />
);

export default function BottomTabNavigator(): JSX.Element {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}
    >
      <BottomTab.Screen
        name="TabOne"
        component={TabOneNavigator}
        options={{
          tabBarIcon: BottomTabTabBarIcon,
        }}
      />
      <BottomTab.Screen
        name="TabTwo"
        component={TabTwoNavigator}
        options={{
          tabBarIcon: BottomTabTabBarIcon,
        }}
      />
    </BottomTab.Navigator>
  );
}

Tada! Problem solved!

Module is Not Defined

We've got yet another problem with the babel.config.js file. ESLint is warning:

/Users/jn/Documents/Apps/expo-lint/babel.config.js
  1:1 error 'module' is not defined no-undef

There are several solutions to this, but this file is not very irrelavant to our code; so, we're going to just ignore it like this:

// eslint-disable-next-line no-undef
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
  };
};

React/No-Unescaped-Entities

Another issue in our yarn lint output:

/Users/jn/Documents/Apps/expo-lint/components/EditScreenInfo.tsx
   9:16 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
  42:39 error `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;` react/no-unescaped-entities

Let's focus on the react/no-unescaped-entities part of this. When writing HTML, developers should avoid the use of apostrophe's, quotes, etc. "But..... this is a React Native project!", you might exclaim. That's true, but thanks to Expo for Web (via React Native Web), our React Native project can also run in the browser. So, we need to be good citizens and fix our code.

Replace:

Tap here if your app doesn't automatically update after making changes

with:

Tap here if your app doesn&apos;t automatically update after making changes

There are several such issues throughout the app; so, go tackle them. This escaping works just fine in React Native views as well.

Finally, run another yarn lint and 💥! No more linting errors!

Commit All The Thingz!

We're finally done! We fixed all the linting errors.

Before committing, let's make one intentional mistake to prove our pre-commit hook prevents the commit. In App.tsx, add this:

const a = 1;

This should cause the pre-commit hook to fail because the variable a is defined but never used, right?

git add .
git commit -m"cleanup all the code!"

Prevent Commits with ESLint Warnings

Husky let us down 🤦‍♂️!

What the heck?? Our pre-commit hook worked, prettified all the files, but it let our warning go through and commit?

The problem is that ESLint doesn't consider "warnings" as fatal errors; so, yarn lint runs and quits with an exit code of 0. So, Husky thinks, "Looks good to me!"

We do NOT want this. The whole goal of this process is to enforce coding standards. If a developer can commit code with tons of warnings, we haven't really solved any problems. In fact, it can lead to buggy code if you attempt to use techniques like type safe switch statements.

To fix this, we need to make ESLint consider "warnings" as fatal errors. Modify the lint script in package.json to :

"lint": "eslint . --ext .ts,.tsx,.js,.jsx,.json --max-warnings 0",`

Now, we're explicitly telling ESLint that warnings should not be allowed. When it encounters any warnings, it will exit with a status code other than 1 and our pre-commit hook will reject the commit.

Let's test to make sure it works.

Again, in App.tsx, change const a = 1; to something like const a = "1";.

Then,

git add App.tsx
git commit -m"Don't fail me now, little doggy!"

Woohoo! Husky saw there was a problem with the code and rejected the commit!

Now, just delete that offending code, recommit and you're done.

My Commits are So Slow 😡!!!

As your project grows, you'll add more and more files. When you commit, lint and prettier are going to examine every one of those files for issues. You can imagine in a very large project, it can take several seconds for your commits to get accepted. This gets really irritating, really fast.

Let's fix this by adding lint-staged to our project. With lint-staged, only the files we've touched and staged for commit will go through the linting process and be evaluated in the pre-commit hook. This will drastically speed up your flow.

Install and configure lint-staged as follows:

npx mrm lint-staged

By default, the installation process modified our Husky config in package.json to:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

and added this:

  "lint-staged": {
    "*.{ts,tsx,js,jsx,json}": "eslint --cache --fix"
  }

There are 3 issues with this:

I don't like automated fixes. So, I remove the --fix. I feel it's important for the developers to be warned about their mistakes and fix them manually.
It removed our --max-warnings 0 flag; so, no ESLint warnings can make their way back into our code
It removed our automatic prettification 😞

So, let's modify the lint-staged section of package.json to get it back the way we like:

"lint-staged": {
  "*.{json,js,jsx,ts,tsx,css,scss,md}": "prettier --config .prettierrc --write",
  "*.{ts,tsx,js,jsx,json}": "eslint --cache --max-warnings 0"
}

Now, all commit attempts will run prettier and linting checks on any files we're attempting to commit and no one can commit bad code anymore! Huzzah!

Here's what a commit looks like now:

Danger Will Robinson!

Developers are human. Sometimes, we get in a rush, stuck on a problem, or just need to "Ship It!". So, we sometimes try to bypass the rules to get something out the door. Sometimes, we just need to commit code even though we know it's got warnings to get it pushed up for another developer to work on.

Be aware that anyone on your team can do the following to bypass the pre-commit hooks:

git add .
git commit -m"Damn the torpedoes. Full steam ahead!" --no-verify

Now, it's important to add something into your PR process (GitHub Actions, CI/CD tests, etc) to make sure this code doesn't actually get merged until it's fixed.

I sure hope this walk through helps your team get on the path of clean, consistent code. If you have suggestions or questions, ping me on Twitter.