Forem: George O. E. Campbell

Refactoring 101

George O. E. Campbell — Wed, 14 Aug 2024 02:50:02 +0000

What is Refactoring?

Refactoring is the process of restructuring existing code without changing its external behavior. The goal of refactoring is to improve the internal structure of the code, making it cleaner, more readable, and easier to maintain. This process often involves simplifying complex sections, reducing redundancy, and ensuring the code adheres to best practices like DRY (Don't Repeat Yourself) and modularity.

Key aspects of refactoring include:

Simplification: Breaking down complex code into smaller, more manageable pieces.
Modularity: Extracting code into independent modules or functions that can be reused across the application.
Readability: Improving the clarity of the code, making it easier for developers to understand and modify in the future.
Why Do Good Engineers Continuously Refactor Code? Refactoring is a critical practice for maintaining a healthy codebase. Here’s why good engineers make it a continuous effort:

Code is Dynamic:

Code isn't just about what it outputs or displays; it's also about how easily it can be understood, modified, and extended by developers. As the codebase evolves, refactoring helps keep the structure in line with the current understanding and needs of the project.

Enhanced Productivity:

Clean, well-organized code is easier to navigate and understand. When developers can quickly comprehend the code, they can implement new features or fix bugs more efficiently. Refactoring reduces the cognitive load on developers, allowing them to focus on solving new problems rather than deciphering tangled code.

Managing Technical Debt:

Technical debt accumulates when shortcuts are taken in the codebase to meet deadlines or when quick fixes are applied without consideration of long-term consequences. If left unchecked, technical debt can slow down development and introduce bugs. Continuous refactoring is a proactive way to manage and reduce technical debt by keeping the codebase clean and up-to-date.

Facilitating Testing:

Well-refactored code is often easier to test, both manually and through automated testing frameworks. Modular code allows for better isolation of components, making unit testing more straightforward. By refactoring continuously, you ensure that the code remains testable, reducing the risk of introducing bugs when new features are added.

Future-Proofing the Codebase:

As projects grow, requirements change, and new technologies emerge, codebases need to adapt. Regular refactoring helps ensure that the code remains flexible and can accommodate future changes without significant rewrites. This adaptability is crucial for long-term project success.

Conclusion

Refactoring is an essential practice for maintaining high-quality code. It ensures that the codebase remains clean, modular, and easy to work with, allowing developers to be more productive and reducing the accumulation of technical debt. Good engineers understand that refactoring is not just a one-time task but a continuous process that accompanies the entire development lifecycle. By making refactoring a habit, teams can create more sustainable and maintainable codebases that stand the test of time.

Websocket starter in Rust with client and server example

George O. E. Campbell — Tue, 30 Jul 2024 21:46:02 +0000

Server code for websockets

(server): https://github.com/campbellgoe/rust_websocket_server

use tokio::net::TcpListener;
use tokio_tungstenite::accept_async;
use tokio_tungstenite::tungstenite::protocol::Message;
use anyhow::Result;
use futures_util::{SinkExt, StreamExt};

#[tokio::main]
async fn main() -> Result<()> {
    let addr = "127.0.0.1:8080".to_string();
    let listener = TcpListener::bind(&addr).await?;
    println!("WebSocket server started on ws://{}", addr);

    while let Ok((stream, _)) = listener.accept().await {
        tokio::spawn(handle_connection(stream));
    }

    Ok(())
}

async fn handle_connection(stream: tokio::net::TcpStream) -> Result<()> {
    let mut ws_stream = accept_async(stream).await?;
    println!("WebSocket connection established");

    while let Some(msg) = ws_stream.next().await {
        let msg = msg?;
        if msg.is_text() {
            let received_text = msg.to_text()?;
            println!("Received message: {}", received_text);
            ws_stream.send(Message::Text(received_text.to_string())).await?;
        }
    }

    Ok(())
}

Cargo.toml (server):

[dependencies]
tokio = { version = "1.12", features = ["full"] }
tokio-stream = "0.1"
tokio-tungstenite = "0.23.1"
anyhow = "1.0"
futures-util = "0.3"

Client websocket code

(client): https://github.com/campbellgoe/rust_websocket_client

use tokio_tungstenite::connect_async;
use tokio_tungstenite::tungstenite::protocol::Message;
use anyhow::Result;
use futures_util::{SinkExt, StreamExt};
use url::Url;

#[tokio::main]
async fn main() -> Result<()> {
    let url = Url::parse("ws://127.0.0.1:8080")?;
    let (mut ws_stream, _) = connect_async(url.as_str()).await.expect("Failed to connect");
    println!("WebSocket client connected");

    // Sending a message to the server
    let message = "Hello, Server!";
    ws_stream.send(Message::Text(message.into())).await?;

    // Receiving messages from the server
    while let Some(msg) = ws_stream.next().await {
        match msg? {
            Message::Text(text) => {
                println!("Received message from server: {}", text);
            }
            _ => {}
        }
    }

    Ok(())
}

client Cargo.toml

[dependencies]
tokio = { version = "1.12", features = ["full"] }
tokio-stream = "0.1"
tokio-tungstenite = "0.23.1"
url = "2"
anyhow = "1.0"
futures-util = "0.3"

You could use this as a starting point for your Rust websocket project.

26 communication tips to advance your career in software

George O. E. Campbell — Thu, 25 Jan 2024 09:38:00 +0000

You want to advance your career, maybe you're looking for your first job in software, or you're a seasoned professional but you want to get a promotion - one way you could improve yourself is by developing your communication skills, a set of soft skills you can use to improve your career trajectory whilst benefiting you and the people around you.

Understand the Importance of Communication: The first step is to understand how important communication is in a team environment. A study found that 73.4% of employers want to find people with strong written communication skills. Developers, designers and other team members must be able to effectively communicate their ideas and feedback to one another, as well as work collaboratively on projects.

Learn Active Listening: Active listening is an essential skill for effective communication. It involves fully concentrating on what is being said rather than just passively hearing the message. This can be practiced by paying close attention to the speaker, not interrupting, and providing feedback to show that you understand what they are saying.

Active listening involves fully concentrating, understanding, responding, and then remembering what is being said. This skill helps in understanding tasks better, avoids misunderstandings, and shows your colleagues and superiors that you value their input.

Master Written Communication: In many jobs, you’ll need to write clearly and persuasively. Good writing skills ensure your ideas are conveyed effectively.

When writing for technical audiences, it's crucial to employ specific language and jargon pertinent to the field, showcasing an understanding of complex concepts. Technical writing should be detail-oriented, providing in-depth explanations and data to support statements. It's important to organize content logically, using examples, diagrams, and evidence for practical demonstration. Focus on the functionality and accuracy of information, ensuring a clear, coherent structure without superfluous details, maintaining brevity and clarity throughout.

For non-technical audiences, the key is to simplify complex concepts into more understandable terms, avoiding or explaining industry jargon. The content should highlight the relevance of information to the reader's daily life, using a friendly and conversational tone to make it more engaging and relatable. Employing analogies and metaphors can be especially effective in making technical subjects accessible, helping to convey intricate ideas in simpler, more familiar terms.

Ask questions one at a time: When communicating with colleagues, if you have questions, I suggest asking them one at a time, instead of asking several questions at the same time. This makes the flow of the conversation better and you will more likely get an answer to each of your questions.

Clarity and Conciseness: Whether speaking or writing, conveying your message as clearly and as succinctly as possible is crucial. Avoid using unnecessary jargon or complex language. Clear and concise messages are more likely to be understood and remembered.

Learn a little more about the other side: If you're a developer, learn about design. If you are a designer, learn a about development. Understanding design thinking can help developers communicate better with designers and similarly designers can more easily communicate their designs if they understand the technical side a little more.

Continuous Learning: Communication is a skill that requires continuous learning and practice.

Practice Public Speaking: Many teams have meetings where members present their work or discuss ideas. Learning how to give effective presentations can be a valuable skill in these situations. This includes learning how to structure your presentation, use visual aids effectively, and handle questions or challenges from the audience.

Whether you're giving a formal presentation or speaking in a meeting, being able to communicate your ideas effectively in front of an audience is a valuable skill.

Give and Get Feedback: Ask for feedback from your team members or supervisors about how you're doing with your communication skills. This can help you identify areas where you need improvement and make adjustments. Both giving and receiving feedback are important. Constructive feedback helps improve work processes and personal performance. When receiving feedback, it’s important to listen actively and respond reasonably.

Remember Empathy: Understanding and sharing the feelings of others is vital in the workplace. Empathy helps you to address concerns and conflicts in a manner that respects others' feelings and can lead to more effective and harmonious working relationships.

In software development, it's important to remember that everyone has different perspectives and ways of working. By trying to understand where others are coming from and being empathetic, you can foster a more collaborative and productive team environment.

Some other things to keep in mind that could be helpful to think about

Non-Verbal Communication: Your body language, eye contact, hand gestures, and tone all color the message you are trying to convey. A relaxed, open stance and a friendly tone makes your communication more effective. This still applies when on video calls. Stay professional at all times, although a good laugh with your colleagues can be helpful for team building.

Adaptability: Different situations require different styles of communication. Being able to adapt your communication style to the situation and the audience is an important skill.

Conflict Resolution: Disagreements and conflicts are inevitable in any workplace. Being able to handle these situations diplomatically is crucial. It involves understanding different perspectives, finding common ground, and negotiating solutions.

Cultural Awareness: In today's globalized work environment, understanding and respecting cultural differences in communication is vital. This includes understanding verbal and non-verbal norms in different cultures.

Here are some more practical steps you can take that I'll leave you with

Collaborate on Projects: One of the best ways to learn team communication skills is by working on projects with others. This can be done through pair programming (working on code with another developer), participating in coding challenges or hackathons, or contributing to open-source projects.

Join a Community: There are many online communities where developers and designers share ideas and work together on projects. Joining one of these can provide opportunities to practice communication skills in a supportive environment.

Participate in Coding Workshops and Hackathons: These events often require teamwork and collaboration, offering a great environment to practice communicating technical ideas, receiving feedback, and working towards a common goal.

Contribute to Open Source Projects:
Engaging in open source projects can expose learners to collaborative software development. They’ll learn to communicate through issue trackers, pull requests, and code reviews, which are essential aspects of team-based software development.

Join Online Programming Communities:
Platforms like GitHub, Stack Overflow, or Reddit's programming forums allow learners to interact with other developers, ask questions, share knowledge, and get feedback, all of which require clear communication.

Practice Pair Programming:
Pair programming involves two programmers working together at one workstation. It’s an effective way to learn from others and improve communication skills, as it requires constant verbal interaction and clear explanation of thought processes.

Engage in Team Projects in Learning Environments:
Many coding bootcamps and online courses offer team-based projects. These are invaluable for practicing how to communicate technical problems and solutions effectively within a team.

Take Courses in Communication:
Enrolling in courses or workshops focusing on communication skills can be highly beneficial. Look for courses that cover topics like active listening, effective speaking, and technical writing.

Learn from Mentors and Peers:
Seeking mentorship from experienced developers can provide insights into effective communication within a team. Regular interactions with mentors and peers can help in understanding the nuances of technical communication.

Practice Technical Writing:
Writing blogs or articles about programming concepts not only consolidates learning but also improves the ability to explain complex technical ideas in writing, a key skill in team communication.

Attend Tech Meetups and Conferences:
These gatherings are great opportunities to network with other professionals, practice public speaking, and learn how others communicate technical ideas effectively.

Simulate Real-World Scenarios:
Create or participate in simulations of real-world scenarios like sprint planning, stand-ups, or design meetings. These exercises can familiarize learners with the communication dynamics of software development teams.

In conclusion, improving your communication skills is crucial for success in software development. By understanding the importance of effective communication, learning active listening, mastering written and public speaking, collaborating with others, and continuously learning and adapting, you can enhance your ability to work effectively in teams of developers and designers.
Remember to always be empathetic, show respect, and maintain a positive attitude towards others. With these strategies, you will not only improve your communication skills but also significantly boost your career prospects in the competitive world of software development

I'm planning on releasing more technical articles and tutorials for people learning web development in particular so consider following me.

Thanks for reading my article.

Enhancing Your Creative Process with ChatGPT and Dolphin Ollama: A Guide to Maintaining Originality

George O. E. Campbell — Wed, 27 Dec 2023 09:06:27 +0000

To effectively utilize Chat GPT and Dolphin Mixtral, start by creating content with your original ideas, and then use these tools for feedback and iterative improvement. This approach ensures your work maintains your unique voice and perspective, essential for authenticity.

Both ChatGPT and Dolphin Mixtral are valuable in generating quality content, but relying solely on them can lead to a lack of personal perspective and potential inaccuracies. Therefore, it's crucial to verify facts and rework AI-generated content with correct information, especially in critical fields like health and finance.

By balancing the use of AI for technical support with your creativity and insight, your content will not only resonate with your audience but also stand out from AI-generated material. Incorporate feedback to refine your work, using AI tools to explore different versions or perspectives.

In summary, leveraging ChatGPT and Dolphin Mixtral as aids rather than primary creators allows you to maintain the authenticity and individuality of your content. This strategy harnesses AI's efficiency and capabilities while ensuring that your personal touch is evident in every piece you create.

When to use redux state vs internal component state

George O. E. Campbell — Mon, 06 Apr 2020 13:10:34 +0000

In the realm of React development, state management is a critical component that can define the architecture and performance of an application. While there are various state management systems like Zustand or React Context, this article focuses on Redux and the useState React hook due to it's widespread use.

Understanding the Overhead of Redux
Redux is a powerful state management tool, but it comes with an overhead. The time invested in creating and maintaining actions, reducers, selectors, and dispatchers can be significant. This leads many developers to initially lean towards using useState or this.setState for managing state within a component. The simplicity of these hooks is appealing, especially when dealing with straightforward state logic.

Deciding Early: Redux or Internal State?
Speed in development is crucial, but so is foresight. Making an early decision on whether to use Redux or internal component state can streamline your development process. Consider the following factors:

Shared State Across Components: If the state of your component is likely to be used across different parts of your application, Redux is a suitable choice. For instance, a 'dark mode/theme' setting in a <UserSettings/> component should be accessible across all UI components. Using Redux, you can easily maintain consistency and avoid prop drilling.

Component-Specific State: For states that are confined to a single component, useState offers a quick and efficient solution. For example, managing the state of an for image uploads can be effectively handled with useState.

Here, useState provides a straightforward way to manage the file URL.

const [fileUrl, setFileUrl] = useState('');
// render the file input and image
  <input
    type="file"
    accept="image/*"
    onChange={e => 
      setFileUrl(URL.createObjectURL(e.target.files[0]))
    }
  />
  <img src={fileUrl}/>

Weighing the Trade-Offs
While useState allows for rapid development and proof of concept, Redux ensures a scalable solution for complex state management. It's crucial to assess each component's needs:

Will the component's data be required elsewhere in the app?
Is a quick proof of concept with internal state beneficial before transitioning to Redux?

Analogy: Bicycle vs. Car
Think of useState as a bicycle and Redux as a car. The bicycle (useState) is quick and efficient for short distances, just like managing simple state within a component. The car (Redux), though more complex, is essential for longer journeys, akin to managing shared state across an application.

Key Takeaways

Assess Data Usage: Before building a new component, consider where and how its data will be used.

Balance Simplicity and Scalability: Weigh the benefits of a quick implementation with useState against the scalability and shared state management of Redux.

Avoid Overhead: Don't default to Redux for every component; use it judiciously to avoid unnecessary complexity.

Debugging Simplicity: Internal state is often easier to debug due to its confined nature within a component.

Conclusion

Choosing between Redux and internal component state is a decision that impacts both the development process and the application's architecture. By understanding the specific needs of each component and considering the overall structure of your application, you can make informed decisions that balance development efficiency with scalable, maintainable code.

Mastering Error Handling in JavaScript: Beyond Console Logs

George O. E. Campbell — Wed, 25 Mar 2020 18:11:39 +0000

In coding, it's tempting to quickly log errors to the console and move on. However, this approach often falls short in production environments.

As your program grows, your console will start filling up with a messy set of messages hinting at what's wrong and your code will be full of console logs, warns and errors.

function divide(a, b){
  //handle divide by zero case
  if(b === 0){
    return console.error("Cannot divide by 0");
  }
  return a / b;
}

This might feel sufficient, but would you really write this for a production application?

The first improvement would be to take advantage of JavaScript's built in error support using Error objects, to give your console messages a lot more useful information.

Let's create a more practical example that demonstrates error handling in a simple web application scenario. We will create a function that fetches user data from an API and processes it. This example will show both synchronous and asynchronous error handling.

Synchronous Error Handling:
We'll start by defining a function to process user data. This function will throw an error if the data is not in the expected format.

function processUserData(userData) {
  if (!userData || typeof userData !== 'object' || !userData.name) {
    throw new Error('Invalid user data');
  }
  // Process user data (e.g., extract and format user details)
  return `Processed data for ${userData.name}`;
}

Asynchronous Error Handling with async/await:
Next, we incorporate an asynchronous function that fetches user data from an API. We use async/await for clean and readable asynchronous code, and try-catch to handle errors.

async function fetchAndProcessUserData(userId) {
  let userData;
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error(`An error occurred: ${response.statusText}`);
    }
    userData = await response.json();
  } catch (err) {
    console.error('Error fetching user data:', err.message);
    // Handle the fetch error (e.g., show a user-friendly message)
    return;
  }

  try {
    const processedData = processUserData(userData);
    console.log(processedData);
    // Further actions (e.g., display the data in the UI)
  } catch (err) {
    console.error('Error processing user data:', err.message);
    // Handle the processing error
  }
}

Explanation:

Synchronous Error Handling: The processUserData function validates the input and throws an error if the data is invalid. This is an example of a synchronous operation where errors can occur.

Asynchronous Error Handling: The fetchAndProcessUserData function demonstrates handling errors in an asynchronous context. It fetches user data from an API. If the fetch operation fails or the server returns an error response, it catches the error and logs it. After fetching, it attempts to process the data using the processUserData function. If an error occurs during processing, it catches and handles that error separately.

Effective error handling in JavaScript is akin to building a robust safety net for your application. By implementing strategic error throwing in smaller, self-contained functions—the fundamental building blocks of your code—you lay the groundwork for cleaner and more reliable error management. Catching these errors at a higher level, where your functions interconnect to form the application's logic, not only streamlines the process but also clarifies the distinction between different types of errors.

When errors are a result of logical flaws in your code, using specialized Error objects is invaluable. These objects provide detailed stack traces, turning the daunting task of debugging into a more manageable one. This approach allows you to pinpoint the exact location and nature of code issues swiftly, significantly reducing the time and effort needed for troubleshooting.

Conversely, for errors stemming from user input, your strategy shifts towards user communication. Here, the focus is on delivering clear, non-technical error messages or UI indicators that inform users of the issue without overwhelming them. This not only enhances the user experience but also encourages correct input practices.

In essence, mastering error handling in JavaScript is about striking the right balance between technical precision and user-centric communication. It's about ensuring that your application not only runs smoothly but also communicates effectively with its users during unexpected situations. Embracing these practices will not only improve the quality of your code but also elevate the overall experience for both developers and users alike.

By adopting these strategies, you equip your application to handle the unexpected with grace and efficiency, making it more robust, user-friendly, and maintainable.