Blog

When we think of software engineers, technical expertise often comes to mind—coding, debugging, and solving complex problems. However, soft skills are equally important in determining success. While technical proficiency is essential, how engineers collaborate, communicate, and adapt makes all the difference in today’s fast-paced development environment. Here’s a look at the key soft skills every software engineer should develop.

1. Effective Communication

Communication is at the heart of every successful software project. Software engineers must communicate with a variety of stakeholders—product managers, designers, clients, and fellow engineers. The ability to explain complex technical concepts in simple terms ensures that everyone is on the same page. Whether it’s writing clear documentation, contributing to code reviews, or presenting technical findings, communication is a critical skill that helps teams move forward efficiently.

2. Collaboration and Teamwork

Engineering is rarely a solo activity. Modern software development follows practices like Agile and DevOps, which rely on tight collaboration. Engineers need to work seamlessly in teams, whether it’s pair programming, collaborating on feature development, or resolving production issues. Being a good team player means actively contributing, supporting others, and sharing knowledge to achieve common goals.

3. Adaptability

Technology is constantly evolving, and software engineers must be ready to adapt to new tools, languages, and frameworks. Adaptability means not only keeping pace with new technology but also adjusting to changing project requirements, timelines, or roles within a team. Engineers who are open to learning and unlearning as needed stay relevant in an industry where change is the only constant.

4. Problem-Solving and Critical Thinking

Software engineers are problem solvers at their core, but the ability to think critically is a skill that goes beyond just fixing bugs. Engineers must approach problems logically, break them down into manageable parts, and explore multiple solutions. Critical thinking also helps in making architectural decisions, optimizing performance, and anticipating potential issues before they arise.

5. Time Management

Engineering projects are often on tight schedules. Balancing multiple tasks—whether it’s coding, testing, or participating in meetings—requires excellent time management skills. Knowing how to prioritize tasks, manage deadlines, and focus on what’s important ensures that projects stay on track without compromising quality. Engineers who can manage their time well are not only more productive but also contribute to a more efficient development cycle.

6. Receiving and Giving Feedback

A critical part of a software engineer’s growth is the ability to accept and learn from feedback. Whether it’s in the form of code reviews, performance evaluations, or peer feedback, being open to constructive criticism is crucial for improvement. On the flip side, providing helpful, respectful, and actionable feedback to peers helps maintain a positive and growth-oriented team culture.

7. Attention to Detail

Software engineers must have a high level of attention to detail. Whether debugging code or ensuring proper implementation of a feature, small mistakes can have significant consequences. An engineer who takes the time to carefully check their work, understand requirements deeply, and think through edge cases will deliver more reliable and maintainable code.

8. Empathy and User-Centered Thinking

In addition to technical skills, engineers must cultivate empathy for both their teammates and the end-users. Understanding how users will interact with the software and keeping user needs at the forefront of design decisions leads to better product outcomes. Empathy within the team fosters better collaboration, reduces misunderstandings, and strengthens team dynamics.

9. Resilience and Handling Pressure

Software engineers often work under pressure, whether it’s meeting tight deadlines or fixing production issues in real-time. The ability to stay calm under pressure, maintain focus, and not let stress impact work quality is essential. Resilient engineers can handle unexpected challenges and setbacks, allowing them to bounce back stronger and keep projects moving forward.

10. Continuous Learning

Software engineering is a field that demands continuous learning. Engineers need to stay updated on the latest trends, tools, and best practices. But beyond technical learning, they must also work on personal development—enhancing communication, leadership, and collaboration skills. As engineers grow, the balance of soft and technical skills becomes crucial to their long-term success.

Conclusion

While coding skills are foundational for software engineers, soft skills are what make them thrive in real-world environments. From communication and collaboration to problem-solving and adaptability, these interpersonal skills play a pivotal role in building strong teams, fostering innovation, and delivering successful software projects. Engineers who invest in developing their soft skills become better collaborators, leaders, and contributors in their organizations.

Incorporating media upload functionality can significantly enhance user interactions when building WordPress plugins. In this guide, we’ll explore how to seamlessly integrate media upload capabilities using Vue 3. Specifically, we’ll create a custom media frame that allows users to select or upload images effortlessly.

Enqueue the Media

In the PHP file of your plugin where you enqueue scripts, ensure to include the following lines to enable WordPress media functionality:

if (function_exists('wp_enqueue_media')) {
   wp_enqueue_media();
}

Setup Vue Component

Let’s dive into creating a Vue.js component named MediaSelector.vue that will handle the media selection functionality

<template>
   <button @click="openMediaFrame">{{ title }}</button>
</template>


<script setup>
import { defineProps, defineEmits, onMounted } from 'vue';


const props = defineProps({
   // Whether you want to select a single file or multiple files
   multiple: false,
   // Button Title
   title: {
       default: 'Add Media'
   },
   // Title of the Button when you select a media file
   action_title: {
       default: 'Use This Media'
   }
});


let mediaFrame = null;
const emit = defineEmits(['onMediaSelected']);


// Function to open the media frame
const openMediaFrame = () => {
   if (mediaFrame == null) {
       return;
   }
   mediaFrame.open();
};
</script>

Initialize Media Frame

In the onMounted hook, we’ll initialize the media frame and set up listeners for media selection.

<script setup>
// Existing code...


onMounted(() => {
   if (!window.wp || !window.wp.media) {
       return;
   }
   mediaFrame = window.wp.media({
       title: 'Select or Upload Media',
       button: {
           text: props.action_title
       },
       library: {
           type: 'image'
       },
       multiple: props.multiple ? 'add' : false,
   });


   // Listen for media change
   listenForMediaChange();
});
</script>

Listen for Media Selection

We’ll listen to the media selection event and emit the selected attachments to the parent component.

const listenForMediaChange = () => {
   mediaFrame.on('select', function () {
       const attachments = mediaFrame.state()
           .get('selection').toJSON()
       emit('onMediaSelected', attachments)
   })
}

Note: If you select a single item or multiple items, the attachments array will contain the chosen item’s information. Like url, id, filesize author, etc.

Usage

Now, let’s utilize this component in your Vue application:

<template>
   <div>
       <MediaSelector
           :attachments="attachments"
           @onMediaSelected="handleMediaSelected" />
   </div>
</template>


<script setup>
import MediaSelector from '@/components/MediaSelector.vue';
import { ref } from 'vue';


const attachments = ref([
   {
   "id": 132,
   "title": "image",
   "filename": "image-20.png",
   "url": "http://wordpress.test/wp-content/uploads/2024/02/image-20.png",
   "description": "",
   "caption": "",
   "mime": "image/png",
   "filesizeInBytes": 708072,
   "height": 1208,
   "width": 800,
   "author": "1",
   "authorLink": "http://wordpress.test/wp-admin/profile.php",
   "authorName": "admin",
}]);




const handleMediaSelected = (selectedMedia) => {
   attachments.value = selectedMedia;
};
</script>

Additional Customizations

If you want to handle pre-selected media, you can utilize the provided functions setUpPreSelectedIds and setPreselected. Additionally, you can customize the media modal by overriding its default class.

<script setup>
// Existing code…


let preSelectedIds = [];
const isNumeric = (value) => {
   return /^\d+$/.test(value);
}
// Set up selected items id
const setUpPreSelectedIds = () => {
   preSelectedIds = [];
   if (
       Array.isArray(props.attachments) &&
       props.attachments.length > 0)
   {
       Object.values(props.attachments)
           .forEach((attachment, index) =>
           {
           if (isNumeric(attachment['id']))
           {
               preSelectedIds.push(attachment['id'])
           }
       })
   }
}
// Select those media file from your attachments id 
const setPreselected = () => {
   mediaFrame.on('open', function () {
       let selection = mediaFrame.state().get('selection');
       preSelectedIds.forEach(function (id) {
           let attachment = window.wp.media.attachment(id);
           if (attachment) {
               selection.add(attachment)
           }
       }); // would be probably a good idea to check if it is indeed a non-empty array
   });
}


onMounted(() => {
   // check is media frame exist or not
   setUpPreSelectedIds();
   // initial media frame
   setPreselected();
   // listen media change
})




// Override the default media modal with a custom class
wp.media.view.Modal = wp.media.view.Modal.extend({
   className: 'your-custom-class',
});
</script>

Conclusion

In this guide, I tried to demonstrate how to seamlessly integrate WordPress media upload functionality with Vue 3. By creating a custom media selector component, users can effortlessly select or upload images, enhancing the usability of your WordPress plugin. With these steps, you’ll be well on your way to creating a more engaging and user-friendly WordPress experience. Happy coding!

Feel free to adjust and expand upon this guide to suit your specific requirements and audience preferences.

1. WordPress Configuration Settings

To enable debugging in WordPress plugins, make sure the following lines are added to your plugin’s wp-config.php file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'SCRIPT_DEBUG', true );

These settings will log errors, display them, and enable script debugging for your plugin.

2. Basic Debugging Plugins

* Die Dumper (DD)

Die Dumper is a debugging tool that helps you inspect variables and data during runtime. Install and activate the plugin in your WordPress environment to use it for debugging your plugin.

* Debug Toolkit – Hello from Tonya

Debug Toolkit by Tonya is another essential plugin for debugging. It provides various tools and features to streamline the debugging process for your plugin development.

* Query Monitor

Query Monitor is a powerful debugging tool that gives you insights into database queries, PHP errors, and more. Install and activate the plugin within your plugin environment for in-depth debugging capabilities.

3. Mobile and Web Live Server Debugging

* Herd/Valet Live Server Setup

Add the following lines to your plugin’s wp-config.php file:

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

Install and activate the Relative URL plugin within your plugin environment to address any file path issues.

Run the command herd share in your plugin’s root directory to set up a live server for debugging.

4. Email Debugging

* Ensure Mail Server is Running

Check if your mail server is running using the command:

brew services start mailhog

* To start the mail server, use:

brew services start mailhog

* Use an SMTP Plugin

Install an SMTP plugin like MailHog for WordPress By Tareq Hasan or [FluentSMTP] by FluentSMTP & WPManageNinja Team within your plugin environment to debug email-related issues.

* Mail Dashboard (For Mailhog)

Access the mail dashboard at mail.test:8025 within your plugin environment to monitor and debug emails sent from your WordPress plugin.

5. Additional Plugin Debugging Tools

* Debug Bar

Debug Bar is a plugin that adds a debugging menu to the admin bar, providing insights into database queries, hooks, and more. Install and activate this plugin for additional debugging capabilities.

* Query Monitor Plugin Extension

Extend the functionality of Query Monitor with additional features specific to plugin development. Install and activate this extension for enhanced debugging tools.

This documentation provides a comprehensive guide to debugging WordPress plugins using various tools and configurations. Follow these steps to enhance your plugin development workflow and identify and resolve issues efficiently.