DEV Community: Jordan Rudman

The Email I Almost Ignored That Saved My GitHub Repo

Jordan Rudman — Fri, 02 Jan 2026 21:52:50 +0000

Just the other day, a mysterious email landed in my inbox warning me that I had leaked sensitive information in one of my GitHub repositories. Since it came from a sender I didn’t recognize, my first instinct was to ignore it. Still, curiosity got the better of me, so I decided to check the repository myself.

Sure enough, the email was right. I had accidentally committed my settings.json file from a new project, which contained my Snowflake login credentials. If someone with malicious intent had discovered it first, the consequences could have been serious: losing access to my Snowflake account, exposing personal data, or even racking up fraudulent charges on my credit card.

At that point, I took a closer look at the email itself. It turned out to be from GitGuardian, and after a quick search, I found plenty of similar stories. Developers accidentally push secrets to GitHub all the time. According to this blog post from GitHub, they found 39 million secret leaks in 2024. That’s an absurd amount of sensitive information potentially exposed to anyone who knows how to look for it.

Configuration files, environment variables, and test credentials routinely slip into commits, especially during rapid development or prototyping. Simply making the repo private or deleting/modifying the file in GitHub isn’t enough either; the secret still exists in the repository’s git history and can be recovered. The only real fix is to revoke or rotate whatever credentials were exposed. But sometimes you have no idea that you leaked anything at all and that a fix is required.

This is where GitGuardian comes in. GitGuardian automatically scans repositories for leaked secrets and alerts the repository owner as soon as it detects an issue.

I went ahead and created an account, and I ended up thoroughly impressed with the product. I was surprised by how quickly I could see exactly what had been exposed, where it lived in the repository, and why it was flagged. GitGuardian also offers preventative tools to stop secrets from ever being pushed in the first place. Since this isn’t a mistake I make often, I chose to rely on their alert system instead, so I can respond immediately if something slips through.

When you connect GitGuardian to your GitHub account, it will continuously monitor your repositories for exposed secrets and clearly report what was leaked, along with its location. All of this is presented in a clean, intuitive, and informative UI that makes remediation straightforward instead of stressful.

This experience was a reminder that security incidents don’t always come from sophisticated attacks. They often stem from small, human mistakes. Tools like GitGuardian don’t eliminate those mistakes entirely, but they dramatically reduce the time between "oops" and "fixed," which is often what matters most. If you’re a developer working with GitHub, this is one of those tools you hope you’ll never need, but you’ll be glad it’s there when you do.

I’m not affiliated with GitGuardian in any way, just a user who was impressed enough by the product to give it a shoutout. You can check it out and get started for free here. I hope this helps you keep your secrets safe.

Thanks for reading. Have you ever been alerted to a security mistake you didn’t even know you made? Do you use any tools to scan your repositories for mistakes? Let me know in the comments!

Stop Hard-Coding API Keys: Why You Need Environment Variables Right Now

Jordan Rudman — Fri, 31 Jan 2025 20:58:15 +0000

Have you ever built a project using an API that you wanted to post in a public repository so that you can share your code with the world? Perhaps you hard-coded in your API key and called it good. Well, did you know that there are malicious actors out there who use tools to scan public repositories for API keys? Without the proper security measures, they can have access to your secret key and do a number of things with it, including shutting down your service entirely. But no need to fear, environment variables are here to save the day!

Step 1: Create a `.env` File

In your project folder, create a file called .env at the same level as your /src directory. Inside this file, you’ll store your API key. The standard naming convention is all caps with words separated by underscores. If you're using React, the name must start with REACT_APP_. Here’s what a valid .env file can look like:

API_KEY=your_api_key_here

REACT_APP_API_KEY=your_react_api_key_here

Step 2: Access the Environment Variable

Next, in the file where you want to use the API key, create a variable that references your .env file like this:

const apiKey = process.env.REACT_APP_API_KEY;

Now you can use the apiKey variable to represent your API key while keeping it hidden.

Step 3: Add `.env` to `.gitignore`

Finally, ensure your .env file is not uploaded to your repository by adding it to your .gitignore file:

.gitignore

.env

Pro Tips:

Restart Your Development Server: Remember to restart your development server after making changes to your .env file. Otherwise, your changes won’t take effect!
Frontend Security Limitation: While .env files are great for hiding keys during development, remember that environment variables used in React are embedded in the build and can be accessed by anyone who inspects the client-side code. For truly sensitive keys, consider using a backend server to handle API requests.

Example Usage:

Here’s how you might use the apiKey variable in an API call with fetch:

const fetchData = async () => {
  const apiKey = process.env.REACT_APP_API_KEY;
  const response = await fetch(`https://api.example.com/data?api_key=${apiKey}`);
  const data = await response.json();
  console.log(data);
};

Wrap-up

And just like that, your API keys are safe and you may share your code online without worry. Give it a try in your next project and let me know how it goes! Do you have another good way of hiding API keys? Share it down below- I’d love to hear your thoughts!

Easily Render PDFs in React!

Jordan Rudman — Thu, 30 Jan 2025 02:20:20 +0000

Insert a PDF in your project in minutes!

Have you ever wanted a quick and easy way to render a PDF in React? Look no further than react-pdf. It provides a fast and simple method to beautifully display any pdf just like an image.

First, install react-pdf. Below are examples of how to do so with npm, yarn, and bun. Please note Bun is not officially supported by react-pdf, but many users report it works well.

npm

npm install @react-pdf/renderer --save

Yarn

yarn add @react-pdf/renderer

Bun

bun add @react-pdf/renderer

Next, make sure you have your necessary imports. I will also be using a Box component from MUI as I find it gives good control over how my components look. The following code is at the top of my Resume.js file from the resume page on my personal website.

import React from 'react';
import { pdfjs, Document, Page } from 'react-pdf';
import { Box } from "@mui/material";

Now, you can insert your PDF! Make sure the PDF that you wish to display is in your /public folder. Then, render it in the file you are working with in /src. The code framework is as follows, where you can change the filename and desired size:

<Document file={{ url: process.env.PUBLIC_URL + '/file.pdf' }}>
    <Page size="A4" />
</Document>

This is how I have worked it into my code for my personal website.

<Box>
    <div style={{ maxWidth: '800px', margin: '0 auto', maxHeight: '1025px', overflow: 'hidden', marginBottom: '20px' }}>
        <Document file={{ url: process.env.PUBLIC_URL + '/resume.pdf' }}>
            <Page pageNumber={1} width={800} />
        </Document>
    </div>
</Box>

For more information on react-pdf's components and their props, visit their documentation page here.

🎵 🎵 🎵

Thank you for reading! What project are you working on that needs a PDF insertion? Did react-pdf work well for you? Have a better method? Let me know down below!

Music, Programming, and You 🎵

Jordan Rudman — Wed, 03 Jan 2024 08:33:50 +0000

Enhance Your Work Focus with Alternative Sounds

If you're like me and love music but tend to get distracted from work by your favorite tunes, check out this list of other sources of sonic bliss to use while you grind.

1. Music for Programmers

Over 100 hours of music tailored to programmers? Yes, please. No account necessary, completely free with no ads, and a cool interface make this site a no-brainer to turn to for some background audio. New "episodes" added occasionally.

2. Lo-fi Music

Fun, relaxing sounds that won't overstimulate your brain while you code. There's a reason the Lo-fi girl has been the go-to for thousands of people over the years and is still widely popular. Endless playlists throughout YouTube and Spotify are also available, so find some that you like!

3. Brain.fm

If you want something more robust, there's no better place to turn than brain.fm. Scientifically proven (yes, really) to help you focus better, brain.fm provides a customizable experience with loads of great tracks and a simple UI.

4. Video Game Soundtracks

This one might be controversial, but I've found some games have fantastic OSTs for focusing. My personal favorite is the music from Risk of Rain 2 (check it out on Spotify here). You can often find these soundtracks in their entirety on YouTube or Spotify.

5. Ambient Noise

Want to switch it up? Try throwing on some calming sounds like rain, forest ambiance, or beach noise. Often used to aide sleep, these sounds can also help increase focus and concentration while working. Just don't fall asleep at your computer!

🌟🌟🌟

Enhancing your work focus can be as simple as finding the right sonic companion. Give these alternatives a try, and let the music lead you to a more productive and focused work environment. I've personally found these alternatives to be game-changers in improving my work focus. Experiment with each one and discover what works best for you!

What's your favorite work music alternative? Share your thoughts and recommendations in the comments below. Thanks for reading!

9 Tools to Use for Your Next Website

Jordan Rudman — Wed, 08 Nov 2023 07:31:26 +0000

Whether you're embarking on a new web project or seeking to enhance existing ones, having the right set of tools at your disposal can make all the difference. Here are nine of my favorite tools that I currently use to boost productivity and supercharge my websites' performance.

Design

Coolors.co + Canva color wheel
Crafting an eye-catching and harmonious color scheme is a breeze with Coolors. This tool offers beautifully curated color sets rooted in color theory. To further customize your palette, the Canva color wheel is your creative playground. Bid farewell to dull and uninspiring websites!
LOGO.com
Need an outstanding logo but lack design skills or extra time? Simply describe your vision, and LOGO.com will bring it to life with professional flair.
Framer
Elevate your website design with Framer by creating buttery-smooth animations that captivate your audience.

Development
Favic-o-matic
Don't overlook the details – give your website a polished touch with a custom favicon generated effortlessly by Favic-o-matic.
Rulers Guides
In the world of web development, precision is paramount. Rulers Guides makes it easy to align elements with pixel-perfect accuracy.
Ceaser
Enrich your website with stunning CSS animations, all within your grasp through the user-friendly interface of Ceaser.

Performance
DOM Monster
Boost your website's performance and loading speed by optimizing its Document Object Model (DOM) structure.
CSS Stress Test
Uncover and resolve performance bottlenecks within your CSS code using the insights provided by CSS Stress Test.
Better Uptime
Keep your website running seamlessly with Better Uptime, a tool that continuously monitors your site's uptime and promptly alerts you to any issues.

🌟🌟🌟

With these powerful tools at your disposal, you'll be well-equipped to create, refine, and maintain a top-notch website. Whether you're focused on design, development, or performance optimization, these tools offer a range of features and functionalities to meet your specific needs.

In conclusion, these 9 tools are essential for anyone involved in building and maintaining websites. They save you time, enhance the user experience, and keep your site performing at its best. Don't hesitate to explore these tools and incorporate them into your web development toolkit to create websites that shine in terms of design, functionality, and performance. Your website visitors will thank you for it!

Web Design Wonderland: 10 Portfolio Inspirations to Elevate Your Site 🚀

Jordan Rudman — Sun, 01 Oct 2023 19:31:09 +0000

Looking for some inspiration for your own portfolio website or other projects? Just want to check out some well-designed sites? Look no further than these 10 digital portfolios that are bound to get your creative juices flowing. ✨

1) Jo Ash Sakula

With a satisfying intro animation and an interesting horizontal-scrolling projects section, Jo's portfolio is sure to captivate visitors right from the start.

2) Effy Zhang

Effy's portfolio is a perfect example of a single-page portfolio—simple yet effective and infused with personal flair.

3) Robin Clediere

As an experienced designer, Robin's portfolio boasts an elegant layout with a seamless flow, eliminating distractions.

4) Timothy Achumba

Timothy's portfolio resembles a high-end fashion magazine layout, bringing an air of sophistication to your screen.

5) Grace Larosa

Grace's portfolio exudes elegance and refinement. Similar to Robin's, it flows gracefully, offering just the right blend of style without overwhelming.

6) Damjan Stankovic

Damjan's portfolio stands out with its innovative approach. His homepage proudly showcases his projects, and the navigation element in the bottom right adds a unique touch.

7) Ram Maheshwari

Ram's portfolio can be described in one word: clean. It presents everything with crystal-clear precision, combining features and functionality seamlessly.

8) Jonnie Hallman

While simplicity is often praised, Jonnie's portfolio is an exception. It impresses with beautiful animations that seamlessly enhance the user experience.

9) Karolina Szczur

Karolina's site is organized into different pages, which works brilliantly. Each section has its dedicated space, making it easy for visitors to find what they need.

10) Matt Farley

Matt's portfolio has served as a significant inspiration to me. It is fun, friendly, and informative, providing everything you need to know about him and his projects, along with testimonials from peers— all just a scroll away.

🌟🌟🌟

Thanks for reading my first DEV post! I'm excited to share my learning as I journey into the world of web development.