DEV Community: Nick Trierweiler

Local SEO is simpler than you think

Nick Trierweiler — Mon, 02 Jun 2025 04:54:38 +0000

If you are trying to improve local SEO for a small website and read this post, I will save you from reading 3 books, listening to 30 podcast episodes, and reading another 100 blog posts about SEO.

This year I read a number of great books. About half of them were business related, and the other half development related.

Among these, I stumbled into a book on SEO. It was great to finally learn about how the internet really functions after being a web developer for 6 years.

The first thing I learned is that SEO is really Really REALLY complicated. The second thing I learned is that it's complicated because of developers.

It's our fault because we are so good at automating, scaling, and spamming that is automatable, scalable, and spam-able. If you're a dev reading this right now, you are not surprised in the slightest.

As an example, I learned from GrumpySEOguy on Youtube that sidebars with links to other sites can hurt rank because back in the day this was one of the best ways to create backlinks on thousands of pages from website A to point at website B and get a lot of authority. Google has had to take great countermeasures in page rank to avoid the spamming of links because programmers are great at putting links on hundreds of pages.

There are 100 more examples like this, and they can all be summarized as "Google does X because programmers do Y if they don't do X".

But having said all of this, there's one thing I want to give y'all that I think is really nice to know if you are a website builder who builds small local websites, has a small local business, or is helping a family member of friend with their local site.

Local SEO is much simpler than SEO.

GrumpySEO guy hasn't made a video about this yet, but there's only a few things to do if you have a website that needs to serve traffic for searches with "near me" at the end. Ex: "plumber near me", "coffee shop near me", etc.

You need to fully fill out a google business profile(GMB) and add the website to it. Full out the profile in a way that users searching for your services would see you if they searched "___ near me".
Be sure that the google profile has an address or service area that is local to where you are providing services.
Be sure that any other websites that mention you, like yellow pages, facebook pages, instagram accounts, etc. all reference the same name, address or service area, etc. that your GMB profile does. This will help google to know about who your business is and tie these items together.
Get reviews. If you have already served customers, you want to follow up with them and get reviews. Reviews are going to directly help the business to show up when a local user searches for your service.

That's it. Don't go read 3 books, listen to 30 podcast episodes, and read 100 blog posts on it. Just read what I typed here, and implement it.

If you got something out of this. Follow me on X. I am always hacking on something new. Right now, it's studynearme which is my site that finds laptop-friendly places to work for a day with 1 tap.

Cheers.

Simple Free Flexible Styled SVG Icons in React

Nick Trierweiler — Fri, 15 Sep 2023 14:17:17 +0000

Simple Pattern to Use SVG Icons in a React App

When building a React app, it's common to need a variety of icons. You might use them for buttons, navigation, or simply for decoration. One of the best resources for free, high-quality icons is Tabler Icons.

In this blog post, I'll show you the simplest way to use svg icons in a React application, especially if you're already comfortable with creating React components.

Creating an Icon Component

Firstly, navigate to the Tabler Icons website and find an icon that you like, and copy the SVG code.

Note: If you are using your own .svg files, you can copy the html out of the file and place it directly in the component. Loading svg files in react can be overly complex, so I usually opt for this.

Create a new React component within the icons folder and paste the SVG code inside of a new component.

For example, let's create a search icon component:

// SearchIcon.tsx
const SearchIcon = ({ className = "" }: { className?: string }) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={`${className} icon icon-tabler icon-tabler-search`} width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
      <path d="M21 21l-6 -6"></path>
    </svg>
  );
};
export default SearchIcon;

Customizing the Icon

Notice the optional className prop. This allows us to pass any Tailwind CSS classes (or any other classes) to style our icon, making it versatile. We can adjust the text color, background color, dimensions, and margins.

Basic Usage

import SearchIcon from './icons/SearchIcon';

const App = () => {
  return (
    <div>
      <SearchIcon />
    </div>
  );
};

Styled with Tailwind CSS with text, margin, and color

import SearchIcon from './icons/SearchIcon';

const App = () => {
  return (
    <div>
      Search<SearchIcon className="ms-2 text-blue-500" />
    </div>
  );
};

Note: We can also use this pattern for other .svg images which may have additional styling requirements.

Conclusion

This pattern is simple, flexible, and free. If you found this valuable, or have a better pattern for icons, let me know!

Improved JSX Readability with Switch-Case Statements in React Components

Nick Trierweiler — Fri, 08 Sep 2023 00:17:07 +0000

Recently, I've come across this pattern more frequently and I wanted to share. It's a bit more verbose initially, but is nice on the eyes.

The Typical Approach: Conditional Rendering in JSX

The Traditional Version

Consider this example where a button component could take on one of three styles: primary, secondary, or danger.

interface ButtonProps {
  type: 'primary' | 'secondary' | 'danger';
}

const Button: React.FC<ButtonProps> = ({ type }) => {
  return (
    <>
      {type === 'primary' && <button className="btn-primary">Primary</button>}
      {type === 'secondary' && <button className="btn-secondary">Secondary</button>}
      {type === 'danger' && <button className="btn-danger">Danger</button>}
    </>
  );
};

Here, we used conditional rendering directly within the JSX. It's not a problem in this small example, but as your component grows, this pattern can create clutter and hamper readability.

A Switch-Case Version

By using a switch-case statement, we can make the code much more readable:

interface ButtonProps {
  type: 'primary' | 'secondary' | 'danger';
}

const Button: React.FC<ButtonProps> = ({ type }) => {
  switch (type) {
    case 'primary':
      return <button className="btn-primary">Primary</button>;
    case 'secondary':
      return <button className="btn-secondary">Secondary</button>;
    default:
      return <button className="btn-danger">Danger</button>;
  }
};

The Readability Advantage of Using Switch-Case

Easy Scanning

Switch-case statements are visually easier to parse, allowing developers to understand the code faster.

Logical Grouping

The case and default keywords signal distinct branches clearly, unlike conditional rendering where the logic can get lost amidst JSX tags.

Decreased Cognitive Load

Reading through a switch-case statement requires less cognitive effort than tracking multiple conditional operators.

Finally, I want to point out that often the best version is a combination of switch case and conditional statements:

interface ButtonProps {
  type: 'primary' | 'secondary' | 'danger';
  size: 'small' | 'medium' | 'large';
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ type, size, disabled }) => {
  const baseClass = `btn-${type}`;
  const sizeClass = `btn-${size}`;
  const disabledClass = disabled ? 'btn-disabled' : '';

  switch (type) {
    case 'primary':
      return (
        <button className={`${baseClass} ${sizeClass} ${disabledClass}`}>
          Primary
        </button>
      );
    case 'secondary':
      return (
        <button className={`${baseClass} ${sizeClass} ${disabledClass}`}>
          Secondary
        </button>
      );
    case 'danger':
      return (
        <button className={`${baseClass} ${sizeClass} ${disabledClass}`}>
          Danger
        </button>
      );
    default:
      return <button className="btn-default">Default</button>;
  }
};

In my personal opinion, this is far more readable than just conditional statements alone which often become difficult to digest when they are nested more than one level deep.

This is just another tool for the toolbelt. Use it as you find useful. That is all.

Today I started using a habit tracker

Nick Trierweiler — Sat, 07 Dec 2019 16:42:10 +0000

I have allowed some bad habits to form which are affecting my effectiveness and productivity. One of my costly time wastes is opening my phone for a task which is okay for work - reading an important email, answering a text from my girlfriend or family member - and then proceeding to unconsciously open the "reddit is fun" app. Before I know it, I've spent 30 minutes to an hour to cats and programmer jokes. sigh

Recently, I listened to an audiobook Atomic Habits by James Clear and have decided to design some habits instead of setting new goals. The writer says that this is the best way to improve and setting a habit that helps facilitate a goal is more effective than simply setting a goal. It's read in a fun way with motivational stories and examples. Let's get into it, I am fired up and ready to start making some improvements!

Here's the idea: to start a habit I need to make it...

Obvious
Attractive
Easy
Satisfying

... and to stop a habit make it...

Hidden
Unattractive
Difficult
Unsatisfying

So here's my short list for now:

Wanted habits:

Side hustle project work (coding 30 minutes per day) - Although this one seems like a difficult habit to start, I am already on track so I just need to maintain it.
Get up at 5 am every day even when I am working from home
Work out every day (not just when I feel like it)
Writing content for dev.to and my personal site

Unwanted habits:

Browsing reddit at work when I use my phone
Staying up too late
Hitting the snooze button
Staying up late in bed watching videos

I am going to use some strategies from the book here to help me.

Starting a habit:

Habit pairing and chaining: Easy habits can help facilitate harder habits if they lead into each other.

In my case, I have a hard time going to bed when it's time, so I have set a habit that I already do to help lead to this result.

Useful Habit: drink some water, brush my teeth, and then floss at 9PM.
- The important part for me on this habit is brushing my teeth right at 9.
- This will help me to also get to bed before 9:30 PM since I most often lie down for the night after I brush my teeth already.
Useful Habit: get in bed before 9:30 PM
- Now I have set myself up for success to wake up at 5 AM since I will likely have gotten 7-7.5 hours of sleep at that point.
Useful Habit: wake up at 5 AM everyday

Once in bed, I can read until 10 if I choose to. A friend suggested this as a way to wind down for the night. Thanks Michael.

Getting rid of a habit:

What about that pesky reddit browsing problem?

Useless Habit #1: Browsing reddit on my phone mindlessly.
To remove the autopilot reaction, I have moved my reddit app off my home screen so I can't click it so easily. I want to disrupt the behavior by making it a bit less convenient so I have to think about it.
If this doesn't work, I have to go stand outside to browse reddit. I have used this one before to quit vaping and it worked well for me. It's a subtle reminder that what I am doing is something that I should be doing less, or not at all.

Seriously, make these easy and start slow

The book says this many times in different ways. Start with just one or a few habits that you want to build, and then get those going before taking on new things. The book calls habits compound interest and reminds the reader that a 1% improvement per day is over 300% improvement by the end of the year. I have created 4 habits, but two of them will work together synergistically. For me, this counts as two habits total: one I want to start, and one I want to stop.

How to track this?

Clear Habit Journal - James Clear's habit tracker journal with his design.
Loop - Android - This is what I am using now.
Do It Now - Android - An RPG like tracker but for real life with xp!
Habit-Bull - iOS - This one looks great! But it's for IOS so I haven't tried it.

Check out The Ultimate Habit Tracker Guide: Why and How to Track Your Habits on the author's website if you want to learn more before buying the audiobook.

Thanks for reading!

Nick Trierweiler
kicksent.dev