DEV Community: bob.ts

What is CodeMash?

bob.ts — Wed, 21 Jan 2026 18:14:00 +0000

CodeMash

CodeMash is a conference that runs early in January each year at the Kalahari in Sandusky, Ohio.

30-second Overview

A few weeks before the conference, I was asked to provide a 30-second overview of the event. I went on for more than 10 minutes.

Who I Am

I am Bob Fornal:

A Senior Solutions Developer II with Leading EDJE, Inc..
A Microsoft MVP (information HERE).
A Torc Ambassador: their community is amazing (Discord HERE).

And, I work with the Board for CodeMash:

I am on the Speaker Selection Committee (I help pick the amazing talks).
I am on the Safety Committee.
I am on the DEI Committee.

I do a lot for the conference because it means something to me. This year, I volunteered and proctored many sessions, going beyond just participating.

My wife and kids participate:

My son has attended KidzMash with me for the last 6 years (KidzMash is free).
My wife and daughter come up on Friday and stay until Sunday (my time to decompress).

The Kalahari

The Kalahari is not just a conference center. It is a hotel, conference center, and water park - all in one. It's amazing to be there for a week and never go outside!

KidzMash

As I said, KidzMash is free (they do need an adult present), and there are workshops and sessions just for them.

Workshops

Tuesday & Wednesday are workshop sessions (generally 4 hours) where we learn and put the skills to the test. This is the time to build and create things.

This year, I got to proctor for two close friends and two co-workers. It was a lot of fun helping their workshops come to life!

Sessions

Thursday & Friday are what most would consider regular sessions. Quite a few attendees are here for just these two days. There are more people and the pace is faster; it becomes much more fun.

I got to present on "Ditch your JavaScript for CSS!"

Additionally, I got to proctor four amazing talks (yes, some of the talks that I selected) and learn from my peers.

Maker Space

The MakerSpace is the "umbrella" that includes 3d printing, an electronics lab, hands-on sessions, and traditional presentations on Maker topics!

Outreach

This year, we got snow.

No real surprise.

The weather hindered our outreach program because the high school sending students was closed.

The plan was for them to attend a few sessions, have lunch with some of the speakers and attendees, and lead a workshop of their own.

Maybe next year.

And, more ...

Seriously.

There is so much more to this conference that I haven't even touched (lightning talks, dinners with co-workers and friends, etc.).

Summary

CodeMash is a fun and amazing conference.

It's impossible to cover all the amazing things that go on at CodeMash.

I am truly proud that they allow me to be such a significant part of this event that brings so much to our community!

Pixel-Perfect Designs versus AI

bob.ts — Fri, 31 Oct 2025 15:43:00 +0000

Artificial Intelligence

I see the boom and I poke at AI. I've got a pretty good understanding of Artificial Intelligence (AI), Machine Learning (ML), and Data Science. I will NEVER say I'm an expert, but I can hold my own when necessary.

My fear has always been misuse.

I've heard stories ...

People losing work.
Databases getting deleted.
Students using AI generated products and feeling the understand the content (code or otherwise).

Is there a place for AI in the coding world?

I firmly believe there is and that we're just beginning to scratch the surface of "good implementations."

I also firmly believe that we've got more "poor implementations" than good.

The Pixel-Perfect Design

A friend of mine, someone that is a good developer, asked me to step in and help him learn CSS.

Learning CSS

This is a huge task, monumental.

I started researching and built an outline of content.

This could be ...

A new course for Code Squid.
A series of articles.
A series of videos.
A series of conference presentations.

Oh, my ...

Back to the Design

Yesterday, he showed me the Adobe XD design. It wasn't complicated. He told me that his company truly wanted a pixel-perfect design.

Pixel-perfect

Pixel-perfect design is the meticulous creation of digital designs where every element is rendered exactly as intended, with precise attention to detail, alignment, spacing, and visual consistency across all devices and screens. It involves ensuring that the final product, such as a website or app, appears the same to users as it does in the original design file, paying close attention to every pixel. This approach aims for visual fidelity by meticulously controlling aspects like typography, color, and layout, using tools and systems to achieve exact specifications.
What Is Actually Pixel Perfect Design and How to Create It?

Then, I asked him to show me how he was working. What I saw was painful to watch.

He showed me the code related to the design he was working on. We started with adjusting a breadcrumb element under the header.

Then, I saw a strong, mid-level developer go into the DOM and select the element, right-click, and copy the element. Within his AI-tool of choice, he pasted the element an prompted it to "change the margin to 24px". This prompting had to be adjusted a few times to get the result "pixel-perfect."

I actually watched him do this a few times.

I asked about the title on the breadcrumb since it wasn't right.

He started to write a prompt to change the text on the breadcrumb using the same copy, paste, prompt method.

At this point, I stopped him ...

Confrontation

I stopped him and asked why he was using AI for such simple tasks.

In this case, doing a global search for the text to change yielded 3 results. The third value was the one that needed changed.

This whole process really relied on basic problem solving:

Define the problem (incorrect text).
Generate potential solutions (the text probably exists within the project, find it and change it).
Choose the best solution (step through the three versions and see if the content on-screen changes).
Implement the solution (save).
Evaluate the results (verified when changed above).

The whole process took just a few seconds and relied on problem solving skills. It didn't have to be offloaded to a tool

I confronted him.

You have the skill to solve these problems. Try to do it yourself and learn rather than offloading the problem onto a tool that might be able to solve the problem. Use the AI-tool when you get stuck and learn from the answers provided.

Pixel-Perfect

I confronted him ... and presented things in a different light.

A pixel-perfect design is difficult to achieve.

I suggested that this is as important as any online code challenge. The skills he can gain as a frontend developer will take him to a completely different level.

Pixel-perfect designs were the most challenging for me, and the most fun. I am extremely good at what I do as a frontend developer and a lot of that comes to doing this kind of development work early in my career.

Notes from a Friend

This is a different friend.

People need to be a "good or GREAT" prompt engineers to use AI since AI's age level is (currently) around 5-8 years old brain. You have to explain in detail, and I mean every detail, then it will execute it correctly. It's all about weights in training. Most people don't know how AI is trained. They just want to use it and think it is on par with talking to a mid level developer or mid level expert -- which is all hyped up by social media.

There's nothing "intelligent" in todays AI.

It's an extremely good search engine that is providing results efficiently and in a human-like manner.

That doesn't mean it's bad. It's not a bad set of tools; neither is it a good set of tools. It's just simply that, a tool.

If the tool is used correctly, you get good results.

If the tool us used incorrectly, you get bad results.

Conclusion

I understand that AI is everywhere and my fear has always been misuse.

This is one more story.

My friend is looking to do the best job he can and is doubting his abilities (maybe a bit of imposter syndrome). The results that AI can generate for him are alluring.

The reality is, that at the end of the day he's got the skill and can do the job, he just needs to see it in himself.

Is there a place for AI in the coding world?

I firmly believe there is and that we're just beginning to scratch the surface of "good implementations."

I also firmly believe that we've got more "poor implementations" than good.

Lazy-Loading as a Security Measure

bob.ts — Mon, 06 Oct 2025 16:20:00 +0000

Introduction

Recently, an external red team (security) discovered a unique vulnerability in an application I maintain.

All other work on this project has stopped until we get it not just patched, but appropriately fixed.

The initial patch was simply a means of plugging the hole. It is intended to be temporary and something we can get in place quickly. While thinking about the patch, I had an odd thought.

My thought, "Can lazy loading be used to protect our sensitive code?"

Lazy loading has always been a means for me to make my code run faster and more efficiently. In most cases, I've skipped using it unless there was a specific need for a faster implementation.

With the thought of protecting sensitive code in mind, I began conducting some research...

Lazy Loading

Implementing Lazing Loading in Angular - GeeksForGeeks.

Server-Side Rendering

Applications that rely heavily on server-side rendering typically do not experience this issue.

The login page is rendered and shown. Once logged in, the server-side will present the sensitive pages as needed. If correctly designed, they will only load the content and endpoints required.

Angular

Angular lazy loading is a technique used to improve the performance of Angular applications by loading modules or components only when they are needed, rather than loading everything at the initial application startup.

This includes:

Module splitting
Route configuration
On-demand loading

The benefits are:

Faster initial load times
Improved performance
Reduced bandwidth usage

Implementing Angular Lazy Loading ...

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular (in newer versions) also allows for the lazy loading of individual components or parts of templates using the defer block. This offers even finer-grained control over when content is loaded, with options for triggers and placeholders.

React

React lazy loading, also known as code-splitting, is a performance optimization technique that allows you to defer the loading of specific components until they are actually needed. This significantly reduces the initial bundle size, improving the application's loading time and overall performance.

This includes ...

Reduced initial loading time
Improved performance
Optimized resource usage

The benefits are ...

Large or complex components
Route-based code splitting
Components with heavy dependencies

How to implement React lazy loading ...

React provides built-in features, React.lazy() and Suspense, for implementing lazy loading.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

Vue and more

Vue does something similar to React. I won't rehash that for simplicity's sake.

I was asked about lazy-loading JavaScript code that should be protected natively. This is an interesting side track that I haven't explored yet, but I might delve into it in a future article.

Safe Lazy Loading

My research was shocking ... to me.

Only one of the frameworks or libraries even hinted at using lazy loading for security reasons, "code splitting." Security was not mentioned.

In a more recent conversation, I realized that applications rendered server-side would be more protected by the implementation I'm discussing here.

The sensitive code isn't returned until proper authentication occurs. Having said this, we still need to be careful about how much of the application is loaded; are we exposing more code than is necessary, even to logged-in users?

Implementation

I've been exploring Microsoft's MSAL tooling and came across this code. There's nothing complicated here ...

function App() {
  const request = {
    loginHint: "name@example.com",
    scopes: ["User.Read"]
  };

  const { login, result, error } = useMsalAuthentication(InteractionType.Silent, request);

  useEffect(() => {
    if (error) {
      login(InteractionType.Popup, request);
    }
  }, [error]);

  const { accounts } = useMsal();

  return (
    <>
      <p>Anyone can see this paragraph.</p>
      <AuthenticatedTemplate>
        <p>Signed in as: {accounts[0]?.username}</p>
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>No users are signed in!</p>
      </UnauthenticatedTemplate>
    </>
  );
}

... but ...

The code <p>Signed in as: {accounts[0]?.username}</p>, while not an issue as written, could just as easily be <complex-application /> that has tons of JavaScript available that could expose threat vectors.

In my opinion, this is the ideal scenario to utilize the <Suspense> element and React.lazy() functionality to protect the code.

Thoughts

There is definitely more that I need to consider. There is definitely more research that I need to do. There's a depth of authentication and authorization that needs to be taken into account to protect the client's code and data appropriately.

Having recently gone to a talk on "Data Validation and Sanitation by Claire Bourdon, I'm thinking of this as a "lifecycle" of security - maybe it's a "generational" handling. Whatever it's called, I'm realizing that there's more depth to protecting my code than I saw before.

Examining the traditional SPA methodology, where everything is loaded at once, reveals "all code," including code that should be secure. Using LAZY LOADING allows us to protect that code in a much more meaningful way. This isn't a complete security solution, but it's a significant step that should be taken into account when developing frontend code.

Whenever code is loaded into the browser, it can be read or scanned. Sensitive information can be exposed unintentionally. We should limit exposure by using lazy loading and not solely relying on server-side security operations.

My thought now is, "Should lazy loading be used to protect our sensitive code, beyond what is done server-side?"

It absolutely should be used for improved code security.

Please let me know your thoughts.

GemCity TECH Mini-Conference

bob.ts — Mon, 14 Apr 2025 18:09:16 +0000

Yesterday, I got the chance to go to a wonderful mini-conference put on by some amazing friends in Dayton, Ohio.

Here are my insights and notes.

Insights from Recent Conference Talks: Ethical Hacking, Asynchronous Programming, Leadership, Scaling, and Modern Architectures

Ethical Hacking in the Age of AI by Brett Ewing

Check out Brett Ewing's profile here

Brett Ewing's talk on ethical hacking emphasized a crucial point: trust. "Ethical hacking isn't about code - it's about trust," he stressed. The ethical hacker's toolkit includes vulnerability scans to identify what's broken, penetration tests to understand how weaknesses can be exploited, and the red hat technique which involves hiding to test how long an invader can go undetected.

But as AI introduces new attack vectors, with attacks increasing in frequency and sophistication, there's an essential need to instill a layer of personal trust in addition to technical prowess. As AI enhances human connections instead of replacing them, our focus should be on teaching our machines what is important to us, hence revealing our priorities.

Deepfakes represent a battlefield where AIs clash with trust instead of humans directly. To combat this, real relationships and ethical usage of screen time in meetings are vital. Building ethically sound AI tools depends on reflecting our values in the training data.

Understanding Asynchronous Programming with JavaScript by Brandon Bruno

Discover more about Brandon Bruno here

This is a talk I've seen before. It's totally different than my asynchronous JavaScript talk - and that's part of the fun!

Brandon Bruno delivered a great session on asynchronous programming in JavaScript, demystifying a topic that often confuses developers. Understanding promises and their role in managing asynchronous operations is key to creating responsive and efficient JavaScript applications.

A promise in JavaScript can be pending, fulfilled, or rejected. Modern APIs and practices such as async/await allow for more straightforward syntax, unwrapping them for easier readability. Tools like Promise.all, Promise.allSettled, and Promise.race provide control over concurrent promise execution, solving issues like the "pyramid of doom" inherent in callback-based code.

Leadership is Earned by Phil Japikse

Learn more about Phil Japikse here

Phil Japikse's thought-provoking session highlighted that leaders are made, not born. The journey begins with respect—giving it to get it. A mentor’s role is critical, acting as a guide, teacher, supporter, and encourager. Effective leadership involves anticipating change, adapting rather than reacting, and embracing continuous improvement.

Essential practices for leaders include active listening, honesty, clarity, and effective communication. Leaders must prioritize team success by removing roadblocks, coaching, and using power wisely.

Scaling with Nx Strategies by Jordan Powell

More about Jordan Powell here

Jordan Powell's session tackled the art of scaling through Nx strategies, especially focusing on monorepos. Larger organizations benefit from code sharing, reuse, and consistency found in monorepos, along with simplified dependencies and atomic commits.

The business impact includes improved developer experience, better addressing of business problems, and more significant outcomes. However, monorepos come with their challenges, including scalability issues, codebase complexity, and slow CI processes. Addressing these requires specialized tooling and infrastructure management, coupled with efficient access control and security measures.

Modern Architectures with Microservices by Shawn Wallace

Explore Shawn Wallace's work here

Shawn Wallace discussed the advantages of moving away from monolithic to microservices architectures. Monolithic applications are cumbersome and slow to change. Modern architectures that are scalable, resilient, fault-tolerant, and support incremental development are essential.

Event-driven architecture ensures domains can communicate effectively, often through an enterprise service bus. Key principles include embracing eventual consistency databases, efficient data storage and querying, asynchronous updates, and adopting a schema design that prioritizes performance.

Before implementation, start small, think about events, not endpoints, and wrap or adapt legacy systems incrementally. Monitoring and logging from the start are critical for success.

Thank you

Thank you to the amazing team that actually made this event happen!

Conclusion

Each session delivered insights that are immensely valuable to today’s evolving technological landscape. From ethical hacking and the nuances of asynchronous programming to leadership in tech, strategies for scaling, and modern architectural practices, these thought leaders shared actionable wisdom for the betterment of our craft and practices. Whether it’s enhancing trust in AI, understanding JavaScript promises, building effective leadership, scaling applications, or adopting microservices, continuous learning and adaptation remain the keys to success.

GemCity TECH: Tech Roulette

bob.ts — Thu, 13 Mar 2025 02:45:42 +0000

The Event

Dayton has always been a special place for me for several reasons. So, when I heard about this event, I had to do.

Leveraging Networking and Tools for Job Search and Career Management

Using Your Network to Find a Job

Networking is a powerful tool in your job search arsenal. Building and maintaining a broad and diverse network can significantly enhance your career prospects.

Benefits of a Strong Network:

Leverage Organizations: Connect with professional organizations within your field. They offer more than just job opportunities; they often provide career-long support and growth.
Expand Beyond Your Company: Networking beyond your current workplace is crucial. Many professionals limit their networking to within their company, which can leave them floundering when they need to look outside.
Be a Collector of People: Continuously build and maintain relationships. Research potential employers and understand their views on networking.
LinkedIn Banners: Using the LinkedIn "Open for Work" banner is an active signal that you are job hunting. It can catch the attention of a broad and diverse network. Remember, first-person referrals are invaluable and help you stand out.

Reconnecting with a Lost Network

Refreshing old connections is essential to maintaining a vibrant network.

Strategies:

Local Events & Volunteering: Participate in local events and volunteering activities. These settings offer excellent networking opportunities.
Courses & Classes: Attend professional courses and classes. These often attract recruiters and industry leaders.
University Events: Engage in university alumni events and career functions to reconnect with your old network.
References: Strengthening your network is crucial for obtaining references, which are often necessary for job applications.

Is It Worth Applying to Highly Competitive Job Postings?

When faced with job postings that attract hundreds (if not thousands) of applicants, it's natural to feel discouraged. However, it's still worth applying.

Key Points:

Unknown Applicant Pool: You don’t know the skill set of the other applicants, so don't count yourself out.
Skill Fit: If you have many of the required skills, it's worth taking the shot; if you have 50% of the requirements it's worth a try.
Realistic Job Descriptions: Job postings often reflect an ideal candidate.
Network Inside the Company: Identify people in your network who work at the company. Their referrals can make a significant difference.
Tailor Your Application: Customize your resume and cover letter to match the company’s language, and demonstrate your passion and thorough research.
Alumni Networks: Leverage the power of alumni networks and career services for additional support.

Key Skills and Resume Insights

When evaluating resumes, certain factors can set you apart.

What to Highlight:

Outcomes and Patterns: Showcase the results of your work. A pattern of success is compelling.
Willingness to Learn: Demonstrate a commitment to learning, which is highly valued. Transitional roles can signify growth.
Certifications and Unlearning: Highlight relevant certifications and what outdated practices you've abandoned.
Problem-Solving Skills: Tech leaders consistently prioritize problem-solving abilities.
Research: Investigate people at the target company to understand their skills and certifications.

Resume Length and Customization

The length and depth of your resume depend on various factors.

Considerations:

Relevance: Tailor the depth of your resume based on the relevance to the position.
Clarity: Minimize unnecessary words and noise.
Authenticity: Your resume should reflect your true self, not a generic template.
LinkedIn Profile: Use LinkedIn to present a broader view of your career history.
Dynamic Resumes: Have multiple versions of your resume, each telling a unique story suited to different opportunities.

Intentionality in Job Search

Being intentional in your job search efforts can lead to better results.

Focus Areas:

Networking: Be deliberate in expanding and maintaining your professional connections.
Company Research: Thoroughly research target companies to understand their values and needs.
Tools Utilization: Effectively use tools like LinkedIn and job search engines to enhance your resume’s visibility.

Growing Sectors and Opportunities

Different regions may have unique growth sectors.

Industry disruptions can set the stage for future growth opportunities.

Standing Out in Competitive Fields

If transitioning from a government job or any competitive field, unique approaches can help.

Strategies:

Skill Transfer: Highlight transferable skills to other industries where your experience is valuable.
Work Reallocation: Understand that technology reallocates work rather than eliminating it.

Focus on DEI Initiatives

Companies may be reconsidering their diversity, equity, and inclusion efforts.

Observations:

Surface Changes: Some companies might appear to pull back from DEI, but foundational processes often remain unchanged.
Value Consistency: Core values of organizations guide long-term goals and remain steadfast.

Workplace Perks

Different perks can make a workplace more attractive.

Examples:
- Bringing dogs to work.
- 24x7 Work-from-Home flexibility.

By focusing on these strategies, professionals can navigate their job searches and manage their careers more effectively. Leveraging networks, intentionality, and the right tools can significantly enhance career growth and opportunities.

Conclusion

I met some amazing people the other day and learned a lot while at this presentation.

COSQAM: Evolving QA in Modern Agile Software Development

bob.ts — Fri, 07 Mar 2025 13:52:57 +0000

DISCAIMER

This is MY article, views, and opinions of the CodeMash Conference, Sponsors, Speakers, Talks, and all associated activities.

I wasn't asked to do this article.

I am not getting compensated for this article.

It's all ME from here on out.

Embracing Quality Assurance in Agile: Insights and Evolution

These are my takeaways from this event (COSQAM Presents: Evolving QA in Modern Agile Software Development).

A panel discussion on how Software QA fits in with modern Agile practices.

What Does Agile Look Like in Organizations?

The Diverse Flavors of Agile

In discussing Agile methodologies, various organizations exhibit notable differences.

When implemented correctly, Agile helps teams gel and understand their value to the organization.
Some exhibit a form of "zombie-scrum" where Agile practices exist without empowerment or effectiveness.
Organizations can embody the versatility of Baskin-Robbins with "31 different flavors" of Agile. Such entities might follow Agile by the book, presenting a ‘vanilla’ version, yet they can encounter challenges at the enterprise level.

Flexibility and adaptation become key as these organizations strive for efficient feature delivery and continuous improvement.

Tailoring Processes to Teams

Agile processes must be tailored to fit the unique needs of each team. Successful teams maintain a clear focus and objectives, approaching their goals with a flexible mindset. Implementation and understanding of Agile methodologies can differ across various organizational levels, emphasizing the need for a custom approach to fit the team dynamics.

The Evolving Role of QA in Agile Teams

From Testers to Quality Evangelists

The role of Quality Assurance (QA) has significantly evolved within Agile teams. Historically viewed as defect finders, QA professionals now act as custodians of quality, emphasizing customer satisfaction beyond the mere identification of defects. This transformation includes a shift from traditional testers to Quality Engineers (QE) and full-stack engineers that focus on business assurance.

Integrating QA with Development

In the Agile paradigm, QA is no longer a separate entity but an integral part of the development team. Despite the evolving role, the fundamentals of QA remain essential, with manual testing and exploratory testing providing invaluable insights. Automation is crucial in scaling testing efforts, moving beyond manual practices to keep pace with rapid development cycles.

Transitioning to Modern QA Practices

Embracing Automation

New QA practitioners entering the QA space should focus on integrating automation into their skillset. While basic manual testing skills remain relevant, automation allows teams to focus on exploratory testing, which provides deeper insights. The mindset is that key tools can be taught, but the right approach and curiosity are what drive true quality improvements.

Collaborative Development

QA professionals should work closely with developers, participating early in the development process to shape testing strategies. This collaborative environment ensures comprehensive testing, both manual and automated.

Addressing Misconceptions About QA

Organizational Differences

Every organization has unique practices regarding QA. A common misconception is that QA tasks are complete by the end of the sprint without properly accounting for the time that QA needs to complete testing. Effective Agile teams must integrate QA throughout the sprint, with flexibility to adapt roles as needed.

QA's Technical Skill

Contrary to some beliefs, modern QA roles are highly technical. They go beyond the “black box” approach, demanding deep technical knowledge to understand and automate test cases efficiently.

Collaborative Quality Efforts

Another misconception is viewing QA as an isolated role; in contrast, Agile promotes team ownership of quality. Successful teams integrate QA with development, breaking down silos and fostering collaboration.

The Impact of AI on Development and QA

Cautious Adoption of AI

Artificial Intelligence (AI) is revolutionizing development and QA, but its application needs careful consideration. Inexperienced AI users may follow incorrect paths, resulting in brittle, poorly written tests. While AI can simplify laborious processes, the fundamental understanding of the system remains crucial.

Testing and Refining AI

QA professionals should critically evaluate AI-generated outputs, ensuring they meet quality standards. Blind reliance on AI poses significant risks, as it lacks the true intelligence to conceptualize complex systems.

Leveraging AI Effectively

Practical Applications

Using AI for activities like syntax checking and rubber-duck debugging can provide immediate benefits. AI can also assist in testing itself, prompting critical thinking about its decision-making processes.

Future Prospects

While AI holds the potential to revolutionize TDD (Test-Driven Development) and other practices, the journey to standardized, reliable AI-driven development tools is still years, if not decades, away.

Cultivating a QA Mindset

Team Ownership of Quality

Quality should be a team commitment, not just the responsibility of QA. QA experts highlight gaps in thinking, but the entire team must collaborate to ensure comprehensive coverage.

Developing Critical Skills

New QA professionals should adopt a critical mindset, learning to identify potential faults and deeply understanding the product. Influential figures in QA like Martin Fowler, Lisa Crispin, and Joe Colantonio provide valuable insights and methodologies to adopt.

Advice for Aspiring QA Professionals

Key Takeaways

Speak up and ask questions: Engagement and curiosity are crucial for growth.
Learn the tools and products: Understanding the technical landscape and the product’s intricacies is vital.

When Interviewing

Effective communication: Clearly articulating issues and collaborating with the team enhances overall quality.
Develop soft skills: Inquisitiveness and interpersonal skills are as important as technical proficiency.

These can be just as effective at positioning yourself as any technical skills you might possess.

Retaining QA Talent

To retain QA professionals, organizations should provide evolving responsibilities and acknowledge their role in the development process. Supporting their interests and career growth will foster a committed and motivated QA team.

Quality Assurance in Agile environments is a dynamic field, constantly evolving to meet the demands of modern development practices. By embracing these changes and continually improving, organizations can ensure high-quality deliverables and customer satisfaction.

Conclusion

There is a LOT to unpack here. I don't know that I can do it all justice in a sentence or two at the end of this article ...

[SCARY] Visual Regression Testing

bob.ts — Wed, 29 Jan 2025 15:36:02 +0000

Background

During one of our releases, we had to roll all the sites back (5 of them) because one of the developers found that a single page had changed unexpectedly. The rollback took almost 4-hours.

I kept thinking that we found this issue on one of the sites. There was no guarantee that the issue was on all of the sites.

Solution

I wanted something that could store information on a group of pages prior to the release and compare them against the pages after the release.

After checking with some friends, I looked into Playwright, a library generally used for end-to-end testing.

I started with this guide: Visual Comparisons.

The Code

I write a lot of Unit, Component, and Integration Tests.

I broke all the rules.

At it's core, I want to be able to test over 1-8 domains; quickly turning them off and on, as needed. Additionally, for each domain, I can have a lengthy list of paths to test.

I came up with something like this as a configuration file: /tests/smoke-tests.json.

{
  "SMOKE_ONLY": true,
  "MAX_DIFF_PIXEL_RATIO": 0.001,

  "DOMAINS": [
    { "url": "https://www.bobfornal1.com", "active": false },
    { "url": "https://www.bobfornal2.com", "active": false },
    { "url": "https://www.bobfornal3.com", "active": false },
    { "url": "https://www.bobfornal4.com", "active": true },
    { "url": "https://www.bobfornal5.com", "active": true },
    { "url": "https://www.bobfornal6.com", "active": true },
    { "url": "https://www.bobfornal7.com", "active": true },
    { "url": "https://www.bobfornal8.com", "active": true }
  ],

  "https://www.bobfornal4.com":  {
    "smoke": [
      "/",
      "/discover/gd/",
      "/discover/sa/eavestroughs/",
      "/discover/sa/gutter-guard/",
      "/discover/sa/installation/"
    ],
    "detailed": []
  }
}

The smoke and detailed keys give me the option to store paths that aren't being used in a way that they aren't tested, but could be quickly with the SMOKE_ONLY option.

MAX_DIFF_PIXEL_RATIO is how closely we want to look a differences. The closer to zero, the more accurate a match must be.

My playwright.config.ts file looks like this.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ]
});

Clearly, more browsers could be used, but this is enough for my use-case.

Here's the test code: /tests/smoke-tests.spec.ts.

import { test, expect } from '@playwright/test';
import core from './smoke-tests.json';

interface DomainPattern {
  url: string;
  active: boolean;
}

const smokeOnly: boolean = core.SMOKE_ONLY;
const maxDiffPixelRatio = core.MAX_DIFF_PIXEL_RATIO;

test.describe('Smoke Tests', () => {

  core.DOMAINS.forEach((domain: DomainPattern) => {
    if (domain.active === true) {

      const paths: Array<string> = smokeOnly
        ? [...core[domain.url].smoke]
        : [...core[domain.url].detailed, ...core[domain.url].smoke];

      paths.forEach(async (path: string) => {
        const fullpath: string = `${domain.url}${path}`;

        test(`for "${fullpath}"`, async ({ page }) => {
          await page.goto(fullpath, { timeout: 60000, waitUntil: "networkidle" });
          await page.waitForTimeout(5000);
          await expect(page).toHaveScreenshot({
            fullPage: true,
            maxDiffPixelRatio,
          });  
        });

      });

    }
  });
});

What It Does

This code looks through the domains, builds an array of paths and loops through those. Each domain path combination is a test (note the name change to "for ${fullpath}" ensuring a different name for each test.

We go to the page, wait 5 seconds, and expect a screenshot comparison of the full page.

Tooling

This code is run from the command line with

npx playwright test

Simple.

You then get something like this in the command line.

... and, your browser opens with the test results.

I generally click "Failed" to reduce what I need to check.

At this point, I need to manually check the pages. Clicking on one of the failed tests takes me to a page; scrolling down I can see a heatmap overlay (note the red).

Clicking the "Slider" option is one of my favorites that allows us to compare the before and after changes by sliding a scrollbar left and right.

Remember

REMEMBER that this test suite has to be run before and after each release. The before run generates the new images, so you should delete the created /tests/smoke-tests.spec.ts-snapshots folder each time to allow for new image captures.

Summary

Scary?

No. This test is 37-lines long and provides a level of assurance that got applause the first time it was run for this team.

I am able to test almost 300 pages in a matter of minutes; that's powerful!

CodeMash 2025

bob.ts — Tue, 21 Jan 2025 16:01:21 +0000

DISCAIMER

This is MY article, views, and opinions of the CodeMash Conference, Sponsors, Speakers, Talks, and all associated activities.

I wasn't asked to do this article.

I am not getting compensated for this article.

It's all ME from here on out.

Content Starts Here ...

I consider CodeMash to be one of the finest conferences around (and not just in the Ohio area). I first got exposed to this conference over a decade ago and have attended as often as I can.

I currently am on the Speaker Selection Committee, DE&I Committee, and Safety Committee; maybe I am a little biased, but I do these things because I care about this conference and the experience it provides.

I tell people ...

CodeMash: Think about a conference where the hotel and conference center are one building. It's at the Kalahari in Sandusky, Ohio, a facility with an indoor waterpark where you can attend in the cold of January and never go outside. The conference is four days long with two days of precompilers where you get to build something and two days of amazing hour-long sessions.

About

CodeMash is a conference for developers. We eat, drink, and learn about all things code and do it all in shorts and sandals by a pool.

CodeMash is a unique event that educates developers on current practices, methodologies and technology trends in a variety of platforms and development languages. Held every January at the lush Kalahari Resort in Sandusky, Ohio, attendees will be able to attend a world-class technical conference amid Ohio’s largest indoor waterpark. Nobody will frown if you show up in shorts, sandals, and your loudest t-shirt. You might even win a prize for doing so.

It’s not just about a grind of sessions, but also providing attendees the opportunity of continuing the conversations and networking outside of the daily conference events. The goal has always been to achieve this mission by creating a conference environment that focuses on professionalism and respect for one another.

From a Survivor

“This was the best four days of my life. Since CodeMash I’ve reinvented my life, purchased my dream electric car, built a water slide in my backyard and adopted a baby penguin. CodeMash changes lives – forever.” - James – CodeMash Survivor

Day 1

I spent some of this morning in a rush, getting my Staff gear and settling in. I forgot a cable and needed to track down information for two "lunch panels" I'm coordinating for Thursday and Friday.

Today and tomorrow are precompiler days (workshops). Each session is 4 hours.

The first session I'm attending is GitHub Actions: From Zero to Hero by Scott Sauber learning to build robust pipelines from the ground up using GitHub Actions.

Then ...

... there was LUNCH!

The second session I attended was Enterprise Grade Micro Frontends with Mark Thompson & David Nicholas. We explored implementing various techniques within a Micro Frontend architecture.

Throughout the day I had some amazing conversations with:

Larry Rickard an amazing Recruiter I used to work with.
Cassandra Faris another recruiter I've known for a while.
Kyle Jenkins a Principal Engineer I've worked with.
Eric Amiralian a strong developer I worked closely with.

There were probably a dozen (or more) side conversations with people that didn't go into hour-long talks; people I've worked with, met at other conferences and meetups, or just simply had a Coffee Chat with.

Day 2

I got a late start on day two due to the NASA tour.

NASA Tour

This was an amazing tour of some of their test facilities. The tour guides were wonderful. They truly enjoyed showing off the work that they do. I can't recommend this event enough.

Back at CodeMash

Upon getting back, I changed and got lunch.

(I told my wife that I dressed myself, but didn't get to pick the color scheme here).

After lunch, I got a chance to speak with a good friend, John Gaynor, about both tech and faith.

Then, I had a meeting for the CodeMash Outreach committee (we've got two high schools bringing students over the next few days). We needed to finalize a few details.

I might got to the Lightning Talks tonight; 6-minute talks on any topic. We'll see, they've been fun in the past.

Day 2 Update

I just finished dinner with a good friend from Dayton. Do any of you have those people that feel like you've known them forever? Even if it's only been a short time?

I got to know Hanen Alkhafaji when she reached out via LinkedIn to ask if I wanted to speak at a Meetup in Dayton (HERE). As a graduate of the University of Dayton, I was honored. The talk was fun ...

... tonight, she showed up just as I was going to default to a pizza. Instead, I managed a good burger and a wonderful conversation with a friend.

I keep thinking I need to get all of my friends together. Then I realized that most of them are here at CodeMash.

Day 3

OK.

Today was one of the busiest days I've ever had attending CodeMash.

I started the day working with our Outreach program - shirts and attending their track sessions.

Then I tried to go to sessions ...

... and managed one all day.

8-Bit

This was an amazing session by Steven Swenson.

While I was excited about seeing a modern 6502 chip, I didn't get to attend as much of the session as I would have liked.

Outreach Panelists

I coordinated the Outreach lunch, during which these students would get a chance to speak with different people in the industry. We had about six (6) panelists who rotated tables.

Everyone had fun.

It did shorten my time in sessions.

Sessions

I attended a complete session, "Testing Strategies for Monoliths and Microservices" by David Lucas. It was a solid session with good details.

Day 4

This was another busy day, given a second Outreach day. I was running almost non-stop all day.

I did get to go to "The Power of Feature Flags in CSS Development" by Chris Demars. This was a great talk about Split Tests and "testing in development."

My family arrived about 4 PM. My son immediately went to track down a few of his friends and was in the board-game room for quite a while. Jen and Anne hustled to the water park.

At the closing, I was honored to be listed as a "Special Advisor" for the conference (close friends told me I got the same honor last year and don't remember due to the drugs I was taking to stay on my feet) ...

Oh.

CodeMash will be returning (mark your calendars) on January 13-16. 2026!

Decompile (Day 5)

No, there is not a fifth day.

I like to book a few more nights to allow my family to come in and enjoy the Kalahari Waterpark. This is my decompression.

Setting and Managing Daily Goals

bob.ts — Thu, 09 Jan 2025 13:50:30 +0000

Daily Goals

Some people struggle with daily goals. Some people struggle with them, A LOT.

Setting Daily Goals

Daily goals should be planned out the night before. If a task feels too large, break it down into pieces.

Let’s say my goal for tomorrow is to add a feature to my Slide Deck Presentation Tool. This feature will allow me to filter a set of slides, removing those I’ve set to “hidden.”

I would break this feature down into parts:

Set a “hidden” key/value on a deck.
Adjust the service that loads a deck to include or remove “hidden” slides optionally. When presenting, they need to be hidden. When editing, they need to be visible.
Change the presentation part of the application to load a deck without “hidden” slides.
Change the editing part of the application to load a deck with “hidden” slides.
Verify functionality.
Write and verify Unit Tests.

Now, looking at this, some of the tasks are significantly harder than others.

I usually recommend that we order them from easiest to hardest … this becomes:

Set a “hidden” key/value on a deck.
Change the presentation part of the application to load a deck without “hidden” slides.
Change the editing part of the application to load a deck with “hidden” slides.
Adjust the service that loads a deck to include or remove “hidden” slides optionally. When presenting, they need to be hidden. When editing, they need to be visible.
Write and verify Unit Tests.
Verify functionality.

Remembering Daily Goals

Some people have trouble remembering to get to their daily goals.

Some people have trouble remembering they have daily goals.

In my opinion, the simplest solution is to get a whiteboard and list the goals, easiest to hardest, in a place you will see them daily, probably someplace near your computer.

This way, your goals are always there and ready to go when you are!

Daily Goals on Off Days

Off days.

This can be a day where you don’t want to do anything.

This can be a day where the goals seem to be too difficult.

This can be a day where life simply wants to get in the way.

The reason that I grouped the goals easiest to hardest is practical ...

On the day where you’re having an “off day,” tackle the goals easiest first.
On the day that you’re fired up, tackle the hardest first.

Also realize that there are days where you will scrap all the goals and take some time off. We all need down time - time to rest and recuperate.

Your Take

What would you add to this take on Daily Goals? What would you change?

CSS' only-child instead of Conditional Logic

bob.ts — Fri, 25 Oct 2024 15:35:08 +0000

In many of the frontend frameworks that I work with, there are options for ternaries or if-branches injected into the HTML logic. This is logic I use a lot. One particular case is to show when there is no data.

I just stumbled on a CSS pattern that makes my life much easier: the :only-child pseudo-class.

React

In React, I would do "something" like this ...

{
  data.length === 0
    ? <div>Nothing to show.</div>
    : <TableWithRecords />
}

Angular

In Angular, I would do "something" like this ...

@if (data.length === 0) {
   <div>Nothing to show.</div>
} @else {
   <TableWithRecords />
}

Using CSS

To put it simply, I have two cases.

There is not data.
There is data.

<h2>No Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <!-- <li>Data here</li> -->
</ul>

<h2>Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <li>Data here</li>
</ul>

Using a simple CSS class .single ...

.handle-no-data:not(:only-child) {
  display: none;
}
.handle-no-data:only-child {
  display: flex;
}

This CSS could be simplified to ...

.handle-no-data {
  &:not(:only-child) {
    display: none;
  }
  &:only-child {
    display: flex;
  }
}

Here's the result of the code above ...

MDN Documentation

:only-child

Can I Use

Summary

As you can see, I would have to move the handling of the data to the table level, but the CSS is pretty straight forward to handle a "no data" scenario.

This is exciting!

I took a Bootcamp Fullstack Course

bob.ts — Tue, 17 Sep 2024 13:41:03 +0000

What I Did!

I recently ran through a boot camp's two-hour video where I built and deployed a fullstack application.

It only took me SIX-HOURS ...

Here are some of my takeaways.

Proper patterns and conventions on inline CSS is difficult.
Refactoring was not taken into account.
Using the Node Server to push the React Build is awkward.
There were no Unit Tests.
Deployment was a simple external hook.

None of these bad, strange, or odd patterns were discussed.

The Good

There were good things.

Use of Context to handle Light and Dark Mode.

I need to look into other component libraries to see if this pattern is implemented there; is something similar for Angular and Vue?

Why Did I Do This?

I wasn't intentionally looking to see if they were teaching good or bad practices. I was looking to see what NodeJS, React, and deployment patterns were being used.

I did this for my own learning and development as a professional.

I wanted to see ...

What was being taught about React?
What was being taught about NodeJs?
How were they deploying the application?

These are things that I do every day.

And, I'm always looking to improve my skillset ...

I just wanted to see if I was doing it right (I'm generally the expert that people reach out to) - Imposter Syndrome might have been kicking in.

There were a lot of issues that bothered me (mentioned above).

Issue: Inline CSS

I don't just copy/paste code while training. I type it in (completely) to allow finer control and better learning.

When I was entering the inline CSS, I found an issue ...

... and, that issue was what really bugged me as I watched the remainder of the training.

As I entered an attribute name, sometimes I pressed TAB and sometimes I entered the whole attribute name followed by an equal sign (=). This resulted in two different patterns that do the same thing.

export function TestComponent() {
  return (
    <Text
      fontSize={"xl"}
      textAlign="center"
    >
      No Products Found
    </Text>
  );
}

In this context, fontSize and textAlign are doing the same thing.

Standards and consistency when writing code are important. When your code is organized and clean, it’s much more likely to stay that way over time.

Additional Experience (Clean Code)

In client code, I see ternaries nested in ternaries; I couldn’t tell you how deep. A simple case-statement, if-else structure, or object-pattern can make the code significantly easier to read and work with.

I saw the code above; again, I'm not calling anyone out.

Let's look at a simpler example.

const H = (C == 0 ? null :
    V == r ? (g - b) / C :
    V == g ? (b - r) / C + 2 :
             (r - g) / C + 4
    );

With this nested ternary, it's nearly impossible to follow the logic.

This code can be cleaned up and improved ...

let H;

if (C == 0) {
  H = null;
} else if (V == r) {
  H = (g - b) / C;
} else if (V == g) {
  H = (b - r) / C + 2;
} else {
  H = (r - g) / C + 4;
}

I'm not 100% sure what the logic here is supposed to do, but I can follow these if-else blocks more consistently than the nested ternaries above.

The import of consistency cannot be overstated; it’s a fundamental basis for clean, manageable code.

Issue: Lack of Refactoring

In this simple codebase, there were several places where code was repeated.

const { success, message } = await updateProduct(pid, updatedProduct);

console.log(success, message);
if (!success) {
  toast({
    title: 'Error',
    description: message,
    status: 'error',
    isClosable: true
  });
} else {
  toast({
    title: 'Success',
    description: 'Product updated successfully.',
    status: 'success',
    isClosable: true
  });
}

The code above shows a success-failure pattern that was repeated throughout the codebase.

It could easily have been abstracted to show a simpler way to handle success or error. Even if this code wasn't cleaned up, it should have been mentioned.

Issue: Node Server hosting React

I've seen this pattern used recently at an enterprise-level client.

It bothered me when I saw it there.

It bothered me when I saw it in the video.

This pattern isn't scalable.

The React code is static and can run in any cloud bucket.
The NodeJS code can run as a Lambda or Function App with only minor adjustments.

... then, they become truly scalable.

As presented, ... the student would never see that other options might be better and more performant.

Issue: No Unit Tests

There wasn't even a mention of Unit Tests.

Granted, this was a simple application with relatively easy-to-understand code.

But, ... this code could benefit from some rework to make the components more testable.

At a minimum, ... they should have discussed places to test and tools to use for testing so that the student had more information on what to look for in the future.

Issue: Deployment as a Hook

Deployment, where Render watches my repository for changes (hooks into it), isn’t a bad pattern.

There’s no control over the deployment pipeline, which I had been hoping to see.

I was disappointed, but this issue is minimal.

Learning the basics of DevOps is an important part of understanding the whole development process.

Summary

I am specifically not mentioning the boot camp or video that I watched. This article isn't meant to call anyone out directly.

I want you to see where things could be improved.

None of these bad, strange, or odd patterns were discussed.

Proper patterns and conventions on inline CSS is difficult.
Refactoring was not taken into account.
Using the Node Server to push the React Build is awkward.
There were no Unit Tests.
Deployment was a simple external hook.

I have major concerns:

That newer developers would see the code used in the video as the right way to do things.
Without context, this will leave them and their company at a disadvantage.

This article will most likely become a video, conference talk, and/or a workshop series.

It's Always About Bob

bob.ts — Thu, 29 Feb 2024 20:09:54 +0000

Bob

It's always about Bob.

"What About Bob?"

For me, the journey into considering who "Bob" is started with an amazingly funny movie ...

Then, there's the black cat in Luck, Bob.

I've come to learn that it's all about Bob.

Some more "Bobs" ...

Bob the Builder.
B.O.B., the gelatinous, brainless blob in Monsters vs. Aliens.
Bob Chatchit, from A Christmas Carol by Charles Dickens.
Planet Bob, also known as New Earth, in the film Titan A.E.
Sideshow Bob, a recurring character on The Simpsons.
Bob, from the spinoff of Despicable Me known as Minions.
Bob (Robert Reynolds), the subject in a secret Super-Soldier experiment in the Thunderbolts.
There's also 96.5 Bob FM: We Play Anything for Fayetteville.

Work

At my company, I got an email about an HR system called HiBob. I deleted the email immediately since it was clearly a scam.

Then HR told us about a cool new system.

This Journey

I was just starting to think about the name, Bob, what I came across Existential Crisis Bob.

Someone asked me the same day, "Why is Bob a shortened form of Robert?"

Can you believe that this had never occurred to me?

My Beginning

I was born, Robert.

Most of by childhood, I was called Bobby (today, only my sister calls me that).

Then, I met a girl named Bobbie and thought that Bobby was a bit childish and started going by Bob.

Learning About Bob

Then, I wanted to learn about why Bob is a shortened version of Robert ... it does seem strange.

From Wikipedia: HERE

Bob is a male given name or a diminutive form of a persons name, usually of Robert, and sometimes a diminutive of Bobby. It is most common in English-speaking countries such as the United States, Canada, Ireland, the United Kingdom, Australia, and New Zealand and some Anglophone African countries.

It most likely originated from the diminutive Rob, short for Robert. Rhyming names were popular in the Middle Ages, so Richard became Rick, Hick, or Dick, William became Will, Gill, or Bill, and Robert became Rob, Hob, Dob, Nob, or Bob.

It can also be used as a nickname for the name Vladimir, since a commonly used nickname for Vladimir is Vova which in Cyrillic script (Вова) resembles the name Bob in Latin script; historically, both names (Robert and Vladimir) share the same meaning (bright fame).