DEV Community: Danish Saleem

CSS Driving You Crazy? Debug Like a Pro with These Universal Tips

Danish Saleem — Sat, 28 Jun 2025 23:19:48 +0000

👋 Introduction

"We've all been there, your layout breaks, buttons vanish, or elements stubbornly ignore your styles. CSS debugging can be frustrating, but it doesn’t have to be. Here are my go-to tips and tricks for diagnosing and fixing styling issues fast."

🧩 1. Use the Universal Outline Debug Trick

Want to see where everything is on the page?

* {
  outline: 1px solid red !important;
}

💡 Pro Tip: Stack outlines to visualize nesting:

* { outline: 1px solid red !important; }
* * { outline: 1px solid green !important; }
* * * { outline: 1px solid blue !important; }

🎯 2. Inspect with DevTools Like a Detective

The browser DevTools are your magnifying glass.

✅ Use these tabs:

Elements: See the DOM and applied styles.
Computed: Find where margins, paddings, or unexpected values come from.
Box Model: Understand spacing and layout.

📌 Tip: Right-click → “Inspect” on any element.

🔍 3. Reset Your Styles

Inconsistent styles across browsers? Reset or normalise:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

🛠️ Use Normalize.css for cross-browser consistency.

🎨 4. Colour-Code Your Layout with Transparent Backgrounds

* {
  background-color: rgba(0, 255, 0, 0.05) !important;
}

Makes it easy to see containers, spacing, and overlaps.

📐 5. Diagnose Flexbox and Grid Layouts

Sometimes display: flex or grid breaks the layout.

✅ Try adding this temporarily:

* {
  border: 1px dashed #aaa;
}

✅ Or highlight grid lines in DevTools (Layout → Grid overlays).

💥 6. Check for Overflow and Hidden Elements

Is something missing?

* {
  overflow: visible !important;
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

🧪 7. Debug Z-Index and Stacking Issues

When elements seem behind others:

* {
  position: relative !important;
  z-index: 9999 !important;
}

🧙 8. Add a `.debug` Class to Anything

.debug {
  border: 2px dashed hotpink !important;
  background: rgba(255, 20, 147, 0.1) !important;
}

Temporarily add this class to elements in HTML or JS to track layout behaviour.

🧰 9. Tools That Help

🧪 CSS Scan – Instantly inspect styles.
🔍 VisBug – Chrome extension to move elements visually.
🎯 Pesticide – Chrome extension to outline everything.

📦 10. Bonus: Create a Bookmarklet for Debugging

Here’s a simple bookmarklet to inject outlines on any page:

javascript:(function(){
  const style = document.createElement('style');
  style.innerHTML = '* { outline: 1px solid red !important; }';
  document.head.appendChild(style);
})();

Save it as a browser bookmark and click it on any page!

🧘 Final Thoughts

Debugging CSS is as much about mindset as it is about tools. Simplify, isolate, and work from the outside in. And when in doubt, outline everything!

✅ Call to Action

Did I miss your favourite CSS debugging trick? Drop it in the comments! Let’s build a mega-list together. 💬👇

Implementing Conditional Fields & Smart Email Routing in Contact Form 7

Danish Saleem — Thu, 06 Mar 2025 19:17:44 +0000

When building a contact form in WordPress using Contact Form 7, you may need to display different form fields based on user input. Additionally, ensuring that inquiries reach the right department without exposing email addresses on the front end is crucial.

In this article, I'll explain how I implemented conditional fields and smart email routing in Contact Form 7 to enhance form usability and security.

The Challenge

I needed to create a contact form where users select an inquiry type, and based on their selection:

Different form fields appear dynamically.
The inquiry is routed to the correct department.
Email addresses remain hidden from users to prevent spam.

For example, if a user selects Private Credit Inquiry, additional fields related to investment details should appear, while general inquiries should have a simple message box.

The Solution: Using Conditional Fields & Smart Email Tags

To achieve this, I used the Conditional Fields for Contact Form 7 plugin and smart mail tags to handle email routing efficiently.

Step 1: Setting Up the Inquiry Type Field

The first step was to create an inquiry type dropdown field that determines what additional fields should be displayed.

[select inquiry-type "Select Inquiry Type" "General Inquiry|general" "Private
Credit Inquiry|private" "Equity Investment Inquiry|equity" "Asset Sale
Inquiry|asset"]

🤔 How this works:

Users see readable labels (General Inquiry, Private Credit Inquiry, etc.).
The form processes the hidden values (general, private, equity, asset).

Step 2: Implementing Conditional Fields

To show different fields based on the inquiry type, I used the Conditional Fields for Contact Form 7 plugin and wrapped the fields inside condition groups.

Example: Private Credit Inquiry Fields

[group private-credit clear_on_hide]
<label>Investment Amount</label>
[text investment-amount]

<label>Expected Return</label>
[text expected-return] [/group]

Setting the Condition

In the Conditional Fields tab, I set the rule:

Show group “private-credit” IF [inquiry-type] = “private”

This ensures that the investment-related fields only appear when the user selects Private Credit Inquiry.

Similarly, I created other field groups for Equity Investment and Asset Sale inquiries.

Step 3: Configuring Smart Email Routing

Instead of exposing email addresses in the frontend, I used smart mail tags to dynamically assign recipient addresses based on the inquiry type.

In the Mail tab, I set the recipient field as:

[inquiry-type]@example.com

This means:

If the user selects General Inquiry, the email is sent to general@example.com.
If they select Private Credit Inquiry, the email goes to private@example.com.
If they select Equity Investment Inquiry, it goes to equity@example.com.
If they select Asset Sale Inquiry, it goes to asset@example.com.

Plugins Used

To implement these features, I used the following plugins:

Contact Form 7 – Download
Conditional Fields for Contact Form 7 – Download

These plugins together enabled me to build a dynamic, user-friendly, and secure contact form.

The Results

✅ Dynamic Form Fields – Users see only the relevant fields based on their selection.

✅ No Exposed Emails – Email addresses remain hidden from the frontend.

✅ Automated Routing – Inquiries are automatically sent to the right department.

✅ Easy Maintenance – Updating email addresses or conditions doesn’t require frontend changes.

This method ensures a secure, user-friendly, and scalable contact form for handling multiple inquiries efficiently.

Need Help Implementing This?

If you’re looking for custom WordPress development or advanced form solutions, feel free to reach out!

WordPress Conflict: What’s Happening Between WordPress.org and WP Engine?

Danish Saleem — Sat, 28 Sep 2024 12:29:14 +0000

As many of you may have heard, a significant conflict is brewing between WordPress.org and WP Engine, one of the leading managed WordPress hosting providers. This dispute revolves around trademark violations, alleged misconduct within the community, and escalating legal actions.

🚨 Key Points of the Conflict

1. Access Blocked: WordPress.org blocked WP Engine from accessing key resources, including software updates, due to trademark violations and other alleged “bad behavior.”
2. Public Criticism: WordPress co-founder and Automattic CEO Matt Mullenweg called WP Engine a “cancer to WordPress” and encouraged users to leave the platform.
3. Legal Action: In response, WP Engine has filed a lawsuit against WordPress, Automattic, and Matt Mullenweg, accusing them of trademark violations and wrongful conduct.

💡 Why Does This Matter?

WordPress powers 43.1% of all websites on the internet, including nearly 64.3% of all CMS-powered websites. This platform is the backbone of the web, with over 500 new WordPress sites being created daily. WP Engine hosts a significant number of these sites, so this legal conflict could potentially disrupt services and affect thousands of businesses worldwide.

📊 WordPress by the Numbers:

43.1% of all websites are powered by WordPress
64.3% of all CMS websites use WordPress
More than 500 websites are created with WordPress every day
Over 58,000 plugins are available in the WordPress repository
WP Engine hosts more than 120,000 WordPress sites globally

This situation has the potential to impact hosting services, future updates, and even community relationships. What are your thoughts on this ongoing dispute? Will it affect your decision in choosing a hosting provider or CMS for your projects? 🤔

Hello World: The Universal First Step in Coding

Danish Saleem — Sat, 06 Jul 2024 16:47:12 +0000

Ah, the "Hello World" program. It's the coding equivalent of that awkward first date where you don't quite know what to say, so you blurt out something simple just to break the ice. Think of it as the "Hi, I exist" of programming. Today, we're going to dive into the fascinating (and slightly absurd) world of "Hello World" across different programming languages.

The C Version: Straight to the Point

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

C programmers like to keep things direct. It's like they say, "Here's a #include, a printf, and boom, I'm outta here." It's the equivalent of opening the door, yelling "Hello, World!" to your neighbor, and then slamming it shut before they can respond.

The Python Version: All About Simplicity

print("Hello, World!")

Python is like that friend who shows up in pajamas to a fancy party and still manages to look cool. One line, and it's done. If Python's "Hello, World!" were a movie, it would be a five-second TikTok clip that goes viral.

The Java Version: Overly Formal

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Java is that guy who shows up to a casual barbecue in a full suit. "Public this, public that, here's my main method, let's be formal about it." It's the software equivalent of a handshake that lasts just a bit too long.

The JavaScript Version: Full of Potential

console.log("Hello, World!");

JavaScript is that friend who brings a trampoline to a picnic. Simple, fun, and you know things are about to get interesting. One console.log, and you’re ready to conquer the browser.

The PHP Version: Mixing Things Up

<?php
echo "Hello, World!";
?>

PHP is like your eccentric uncle who mixes ketchup with everything. It's embedded in HTML, can be mixed with various databases, and still manages to get the job done with a quirky smile.

The Ruby Version: Sweet and Succinct

puts "Hello, World!"

Ruby is like that person who bakes cookies for every occasion. Sweet, simple, and always makes you feel warm inside. With a puts, it softly whispers "Hello, World!" like a bedtime story.

Why "Hello World"?

Why do we always start with "Hello World"? Because programming is a bit like a relationship: you start with small talk and work your way up to the deep stuff. Before you write a program to manage global stock markets, you first need to make sure you can get your code to, well, say hello.

So, whether you're in your pajamas or a full suit, whether you prefer trampolines or ketchup, "Hello, World!" is your universal first step into the wonderful world of coding. Embrace it, laugh at it, and remember: even the most advanced programmers started here.

Happy coding from Dazvix Solution! 🌍

Understanding Git Tags: An Essential Tool for Version Control

Danish Saleem — Wed, 22 May 2024 21:36:25 +0000

Understanding Git Tags: An Essential Tool for Version Control

In the world of software development, version control is an indispensable tool that helps teams manage changes to code over time. Git, a distributed version control system, has become the de facto standard for developers worldwide. Among its many features, Git tags stand out as a crucial element for marking specific points in the repository’s history, such as releases. This blog post will delve into the intricacies of Git tags, explaining what they are, why they are important, and how to use them effectively.

What are Git Tags?

Git tags are essentially labels that you can attach to specific commits in your repository. Unlike branches, which move as you add more commits, tags are static and point to a particular commit forever. This makes them perfect for marking significant milestones in the project’s history, such as version releases, hotfixes, or other important states of the code.

Types of Git Tags

Git supports two types of tags: lightweight tags and annotated tags.

Lightweight Tags: These are simple references to a specific commit. They are similar to a branch that doesn’t change. Lightweight tags do not store any additional information beyond the commit they point to.
Annotated Tags: These are full objects in the Git database. They store additional information such as the tagger name, email, date, and a message. Annotated tags are generally recommended for most uses because they provide a more robust and informative tagging system.

Why Use Git Tags?

Using Git tags offers several benefits, particularly in the context of software releases and deployment. Here are a few reasons why tags are important:

1. Release Management

Tags are widely used to mark release points (e.g., v1.0, v2.0) in a project’s history. This allows developers to easily check out a specific version of the code that corresponds to a released version, ensuring consistency and reliability.

2. Simplifying CI/CD Pipelines

Tags can be leveraged in Continuous Integration and Continuous Deployment (CI/CD) pipelines to trigger builds and deployments for specific versions of the code. This ensures that only stable and tested code is released to production.

3. Easier Rollbacks

If a deployment goes wrong, having tagged releases allows for quick rollbacks to a previous stable state. This can significantly reduce downtime and mitigate the impact of bugs.

4. Improved Collaboration

Tags provide a clear way for teams to communicate which versions of the code are stable and ready for testing, staging, or production. This enhances collaboration among team members and across different departments.

How to Use Git Tags

Creating Tags

Creating a tag in Git is straightforward. Let’s look at how to create both lightweight and annotated tags.

Lightweight Tag

To create a lightweight tag, you simply specify the tag name:

git tag v1.0

This command tags the latest commit with the name v1.0.

Annotated Tag

To create an annotated tag, you use the -a flag followed by the tag name and -m to add a message:

git tag -a v1.0 -m "Release version 1.0"

This command creates an annotated tag with the name v1.0 and includes a message describing the tag.

Listing Tags

To list all the tags in your repository, use the git tag command:

git tag

This will display all tags in alphabetical order.

Viewing Tag Details

To see details about a specific tag, especially an annotated one, use the show command followed by the tag name:

git show v1.0

This will display the tag’s metadata and the commit it points to.

Deleting Tags

If you need to delete a tag, you can do so with the following command:

git tag -d v1.0

This deletes the tag v1.0 locally. If you need to delete it from a remote repository as well, use:

git push origin --delete tag v1.0

Pushing Tags to Remote Repositories

By default, tags are not automatically pushed to remote repositories. To push a specific tag, use:

git push origin v1.0

To push all tags, use:

git push origin --tags

This ensures that all your tags are available in the remote repository.

Best Practices for Using Git Tags

Use Annotated Tags for Releases

Annotated tags provide more information and are generally more useful for releases. They allow you to include a message, the tagger’s name, and date, which can be invaluable for tracking and documentation purposes.

Follow a Naming Convention

Consistent naming conventions help in identifying the purpose of tags easily. For example, using v1.0.0 for releases, hotfix-1.0.1 for hotfixes, and beta-1.0.0 for beta releases can clarify the tag’s purpose at a glance.

Tag Early and Often

Tagging significant commits early and often can save time and confusion later. Tags should mark any commit that might be important for future reference, including releases, major changes, and stable states.

Document Tagging Strategy

Document your tagging strategy in your project’s contributing or README file. This ensures that all team members are aware of how and when to create tags, maintaining consistency across the project.

Advanced Tagging Techniques

Signing Tags

For added security and verification, you can sign tags using GPG. This ensures that the tag was created by a trusted source. To create a signed tag, use the -s flag:

git tag -s v1.0 -m "Signed release of version 1.0"

You’ll need to have GPG set up on your machine for this to work. Signed tags provide an additional layer of trust and authenticity, which is particularly useful in open-source projects or large teams.

Tagging Specific Commits

Sometimes, you might need to tag a commit that is not the latest one. To do this, specify the commit hash after the tag name:

git tag v1.0 <commit-hash>

This command tags the specified commit rather than the latest commit.

Using Tags in CI/CD

In CI/CD pipelines, you can configure your pipeline to trigger builds and deployments based on tags. For example, a pipeline can be set up to deploy only when a commit is tagged with a version number, ensuring that only stable releases go live.

Tagging in Forks and Merges

When working with forks and merges, it’s important to manage tags carefully to avoid conflicts. Ensure that your tags are unique and clearly documented, especially when merging branches from different repositories.

Troubleshooting Common Issues

Tag Conflicts

If you try to push a tag that already exists in the remote repository but points to a different commit, you will encounter a conflict. Resolve this by deleting the tag locally and remotely, then recreate and push the correct tag.

Missing Tags

If you notice that some tags are missing in your local repository, fetch them from the remote:

git fetch --tags

This command updates your local repository with any tags that are present in the remote repository but missing locally.

Conclusion

Git tags are a powerful feature for marking important points in your project’s history, facilitating better release management, collaboration, and deployment strategies. Whether you are a solo developer or part of a large team, mastering Git tags can significantly enhance your workflow and ensure that your software releases are well-organized and traceable.

By understanding the different types of tags, how to create, manage, and use them effectively, and adhering to best practices, you can leverage Git tags to their full potential. So, start tagging your releases, significant commits, and milestones today to make your development process more structured and reliable.

4 Must-Visit Websites for Software Engineers

Danish Saleem — Sun, 07 Apr 2024 10:42:48 +0000

Are you a software engineer seeking to boost your skills and efficiency? Check out these four must-visit websites:

1. 30 Seconds of Code 💻

Access quick code snippets across various languages and concepts for faster coding.

2. Coolors 🎨

Easily generate attractive color palettes for your applications, eliminating the need for trial and error.

3. Envato Tuts+ 📚

Explore thousands of free tutorials covering all levels of coding, from beginner basics to advanced techniques.

4. OverAPI 📝

Find cheat sheets for multiple programming languages and frameworks to streamline your coding process.

Unclutter Your GitHub Stars: Creating an npm Package for Effortless Repo Unstarring

Danish Saleem — Sat, 06 Jan 2024 22:43:32 +0000

Unclutter Your GitHub Stars: Creating an npm Package for Effortless Repo Unstarring

GitHub stars are an excellent way to bookmark repositories, but as time passes, they accumulate into an overwhelming pile. As a developer, I found myself drowning in a sea of starred repos, making it challenging to find the ones I actually use. Frustrated by the lack of efficient solutions, I embarked on a mission to simplify this chaos.

The Problem

The issue with GitHub stars isn't just about quantity; it's about organization. Clicking through each repository to unstar them manually isn't just tedious; it's impractical. The existing scripts and solutions out there fell short—they lacked usability or simply didn't address my needs.

The Idea

Enter my npm package—an attempt to streamline the un-starring process. I wanted something that could effortlessly unstar repositories without pagination limitations, making the clutter disappear with a single command.

The Development Process

Conceptualization

I envisioned a tool that leverages the GitHub API to list and unstar repositories efficiently. The Octokit library became instrumental, providing a robust interface to interact with GitHub's API.

Coding Journey

The development phase involved creating an interactive CLI tool using Node.js and the Octokit library. Handling user input and integrating API calls to unstar repositories were the pivotal aspects of the code.

#!/usr/bin/env node

/*
 * Author: Danish Saleem
 * GitHub: mrdanishsaleem
 * name: GitHub Unstar Pro
 * version: 2.0.2
 */

"use-strict";

const inquirer = require("inquirer");
const { Octokit } = require("@octokit/core");

async function unstarRepositories(pat, repositories) {
    const octokit = new Octokit({ auth: pat });

    for (const repo of repositories) {
        try {
            await octokit.request("DELETE /user/starred/{owner}/{repo}", {
                owner: repo.owner.login,
                repo: repo.name,
            });
            console.log(`Unstarred: ${repo.owner.login}/${repo.name}`);
        } catch (deleteErr) {
            if (deleteErr.status === 404) {
                console.error(`Repository ${repo.owner.login}/${repo.name} not found or inaccessible.`);
            } else {
                console.error(`Failed to unstar ${repo.owner.login}/${repo.name}:`, deleteErr.message);
            }
        }
    }
}

async function unstarPlease(pat) {
    try {
        const octokit = new Octokit({ auth: pat });
        const { data } = await octokit.request(`GET /user/starred`);

        if (Array.isArray(data) && data.length !== 0) {
            await unstarRepositories(pat, data);
        } else {
            console.log("No repositories to unstar.");
        }
    } catch (err) {
        console.error(err);
    }
}

inquirer
    .prompt([
        {
            type: "input",
            name: "pat",
            message: "Please enter your Personal access token:",
            default: "",
        },
    ])
    .then(function ({ pat }) {
        unstarPlease(pat);
    })
    .catch(function (error) {
        if (error.isTtyError) console.error(error.isTtyError, error);
        console.error(error);
    });

Testing and Refinement

Testing was crucial to ensure the reliability of the unstar functionality. I tested various scenarios, handling errors like 404 (Not Found) gracefully. Iterative refinements were made based on testing results.

Publishing the Package

NPM Deployment

Publishing the npm package involved following the standard procedure: creating a package.json file, ensuring proper documentation, and using the npm publish command.

`package.json`

{
    "name": "github-unstar-pro",
    "version": "2.0.6",
    "description": "Unstar all Github repositories using a personal access token",
    "main": "index.js",
    "repository": "mrdanishsaleem/github-unstar-pro",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Danish Saleem",
    "license": "ISC",
    "bin": {
        "github-unstar-pro": "./index.js"
    },
    "keywords": [
        "node"
    ],
    "files": [
        "index.js"
    ],
    "dependencies": {
        "@octokit/core": "^3.5.1",
        "inquirer": "^8.2.0"
    },
    "devDependencies": {}
}

Considerations

I ensured the package had clear instructions for users, guiding them on how to use it effectively. Keeping dependencies minimal and code efficient was a priority.

Conclusion

From identifying a personal pain point to creating a solution, this journey taught me valuable lessons. Creating an npm package isn't just about writing code; it's about understanding user needs and crafting a seamless experience. I invite fellow developers to try out my npm package and provide feedback.

🔗 GitHub Repository

A Day in the Life of a Web Developer: A Comedy of Errors

Danish Saleem — Thu, 30 Nov 2023 18:01:42 +0000

Once upon a time, in a bustling city where dreams were woven in the digital world, a web developer stirred awake on a bright morning, brimming with enthusiasm to tackle the day. Birds chirped outside, welcoming the sunrise, as the developer eagerly checked their email, only to discover a new project waiting—a pet grooming business in need of a website.

Excitement danced within the developer's mind. "Easy task," they mused, confident in their coding prowess and affection for animals. With a determined spirit, they fired up their laptop and dove into the labyrinth of coding.

However, the digital landscape had changed. The familiar framework they relied upon had evolved, leaving behind abandoned features. An hour of troubleshooting led to a cascade of errors, frustratingly complicating the project. Frustrated curses punctuated the air, prompting a shift to a new framework—a highly recommended one.

But this new framework was a maze of unfamiliar syntax and concepts, akin to deciphering a foreign language. Starting from square one, the developer grappled with tutorials and examples, bewildered by the complexity. Undeterred, they persevered, crafting a basic template that finally breathed with life.

The elation was short-lived. Adding features birthed new challenges. Plugins and libraries meant to simplify tasks morphed into catalysts of chaos, spawning conflicts and errors. Despite diligent searching, solutions remained elusive, leaving the developer exasperated.

A lunch break offered solace, nourishing both body and spirit. Revitalized, albeit cautiously optimistic, they returned to the digital canvas. Step by painstaking step, bugs were squashed, and functionalities resurrected. Hope flickered—a testament to patience and persistence.

Styles and animations breathed aesthetic life into the website, elevating its allure. With awe, the developer beheld their creation, now an artistic masterpiece. Confidence surged. The finish line seemed within grasp.

The final hurdle—deployment and publication—loomed ominously. Platforms and services, touted as saviors, betrayed expectations, shrouding the project in errors and obfuscation. Frustration simmered, and desperation gnawed, threatening to shatter hopes and deadlines.

In a moment of despair, tears welled up, signaling defeat. The laptop lid closed, and the weight of the day pressed heavily. "Worst day ever," the developer muttered, resenting their chosen path.

Yet, as the day's chaos receded, sleep embraced the weary mind. In the realm of dreams, a new career beckoned—a place where the digital realm bloomed with promise, untainted by errors or deadlines.

Morning light gently stirred the slumbering soul, offering a fresh start. The challenges of yesterday remained, but so did resilience. With renewed determination, the web developer rose, ready to conquer the digital frontier once more—undaunted, unyielding, and destined for a tale yet unwritten.

Let's connect 💜

You can follow me on Twitter, Instagram, LinkedIn & GitHub

Support Me

If you like this post. Kindly support me by Buying Me a Coffee

Software Engineer Roadmap

Danish Saleem — Mon, 26 Jun 2023 06:27:27 +0000

Software engineering is the process of designing, creating, testing, and maintaining software using software engineering methodologies, computer science principles, and programming languages. To become a software engineer, you need to learn various skills and technologies that will enable you to create software products and systems that meet user requirements and solve real-world problems.

Here is a possible roadmap from zero to advanced level software engineer:

Web Fundamental

Learn the basics of web development, such as HTML, CSS, JavaScript, HTTP, DOM, etc. These are essential for creating web pages and applications that run on browsers. You can also learn some web design principles and tools to make your web pages more attractive and user-friendly.

Frontend Technology

Learn how to create dynamic and interactive web pages using frontend frameworks and libraries, such as React, Angular, Vue, Bootstrap, etc. These will help you to build user interfaces that are responsive, fast, and easy to use. You will also need to learn how to use APIs and AJAX to communicate with backend servers and fetch data.

Backend Technology

Learn how to create server-side logic and functionality using backend languages and frameworks, such as Node.js, Python, Ruby on Rails, PHP, Java, etc. These will help you to handle user authentication, authorization, data processing, storage, security, etc. You will also need to learn how to use databases and SQL to store and manipulate data.

Frameworks

Learn how to use popular and widely used frameworks that provide ready-made solutions for common software engineering problems. For example, you can use Django or Flask for web development in Python, Spring Boot or Hibernate for web development in Java, Express or Meteor for web development in Node.js, etc. These frameworks will help you to speed up your development process and follow best practices.

Algorithms

Learn how to design and implement efficient algorithms that can solve various computational problems. Algorithms are the core of software engineering and they can improve the performance, quality, and scalability of your software. You will need to learn data structures and algorithms such as arrays, lists, stacks, queues, trees, graphs, sorting, searching, hashing, recursion, dynamic programming, etc. You will also need to learn how to analyze the time and space complexity of your algorithms using Big O notation.

Top Skills

Learn some of the top skills that are required for a software engineer in 2023. These include:

Communication Skills

Learn how to communicate effectively with your team members, clients, users, and stakeholders. You will need to be able to write clear and concise documentation, code comments, emails, reports, etc. You will also need to be able to present your ideas and solutions in a convincing and engaging way.

Problem-solving Skills

Learn how to approach and solve complex and challenging problems using logical thinking and creativity. You will need to be able to break down a problem into smaller subproblems, identify the root cause of the problem, devise a solution strategy, implement the solution using code or tools.

Debugging Skills

Learn how to find and fix errors and bugs in your code using debugging tools and techniques. You will need to be able to use breakpoints.

Test Skills

Learn how to test your code using testing tools and frameworks. You will need to be able to write unit tests.

Collaboration Skills

Learn how to work effectively with other software engineers and developers using collaboration tools and platforms. You will need to be able to use version control systems such as Git or SVN.

Learning Skills

Learn how to keep yourself updated with the latest trends and technologies in software engineering. You will need to be able to learn new skills and tools quickly and efficiently using online resources such as blogs.

NOTE: If you found this helpful. Like and share. Thanks, Happy Learning!

Let's connect 💜

You can follow me on Twitter, Instagram, LinkedIn & GitHub

Support Me

If you like this post. Kindly support me by Buying Me a Coffee

Software Engineer Interview Preparation Topics

Danish Saleem — Sat, 24 Jun 2023 23:31:59 +0000

You are going to be asked about Object Oriented Programming, Databases, Data structures and Programming skills.

Object Oriented Programming

Pillars of OOP

Database

Joins in MySQL
Group by in MySQL
ACID Properties
Dimond Problem
Query Optimization
MySQL Engine Types

Data Structures

Trees
Arrays
Linked List
Stack and Queues
Heaps
Difference between DFS and BFS

Programming Skills

Language: JavaScript
Variables
Data Types
Functions
TDD
CORS
Hoisting
Memorization
Closure
Tree Shaking
What is DOM in JavaScript?
How to find loop in Linked List?

Other GitHub Resources

NOTE: If you found this helpful. Like and share. Thanks, Happy Learning!

Let's connect 💜

You can follow me on Twitter, Instagram, LinkedIn & GitHub

Support Me

If you like this post. Kindly support me by Buying Me a Coffee

Unlocking the Door to DevRel Success: A Comprehensive Guide on How to Break Into Developer Relations (DevRel)

Danish Saleem — Thu, 15 Jun 2023 07:25:58 +0000

Welcome to the exciting world of Developer Relations (DevRel)! If you're passionate about technology, love engaging with developers, and have a knack for effective communication, breaking into DevRel can open up a world of opportunities. In this comprehensive guide, we'll walk you through practical steps to pave your way into the DevRel field, combining catchy insights with SEO-friendly tips to maximize your success.

Understanding the DevRel Landscape

What is DevRel and why is it in high demand?
The evolving role of Developer Relations Professional?
Indentifying the skills and qualities that make a successful DevRel practitioner.

Building a Strong Foundation

Acquiring technical experties: Essential programming languages, platforms, and tools to master.
Exploring the open source work: Contributing and collaborating to enhance your credibilty.
Leveraging online resources: Top websites, blogs, and platforms for self-learning and skill development.

Crafting Your Personal Brand

Identifying your niche and target developer community
Establishing an online presence: Building a captivating personal website and portfolio.
Creating valueable content: Blogging, podcasting, and social media stratgies to showcase your expertise.

Engaging with Developer Communities

Attending conferences, meetups, and hackthons: Networking opportunities and insights from industry experts.
Contributing to forums and online communities: Sharing knowledge, answering questions, and building your reputation.
Collaborating with tech influencers: Leveraging existing networks to amplify your reach and influence.

Gaining Real-World Experience

Seeking internships, part-time roles, or freelance opportunities in DevRel.
Joining developer-focused organizations or startups to gain hands-on experience.
Volunteering for speaking engagements or workshops to demonstrate your expertise.

Nailing the Interview Process

Tailoring your resume and cover letter for DevRel positions.
Highlighting relevant skills and experiences during interviews.
Showcasing your communication and presentation abilities through practical exercises or demos.

Continued Learning and Growth

Staying up to date with industry trends, tools, and technologies.
Pursuing professional development opportunities, certifications, and specialized training.
Seeking mentorship and guidance from experienced DevRel professionals.

Conclusion

Breaking into DevRel requires dedication, continuous learning, and a passion for technology and community engagement. By following the practical steps outlined in this guide, you'll be equipped with the knowledge and strategies needed to unlock the door to DevRel success. Embrace the challenges, nurture your skills, and watch your career soar as you make a lasting impact in the world of developer relations.

Remember, breaking into DevRel is a journey, and with persistence and the right mindset, you can transform your passion into a fulfilling and rewarding career. Get ready to embark on an exciting adventure in DevRel and unlock limitless opportunities!

Share your thoughts and experiences on breaking into DevRel in the comments below. Let's build a vibrant community of aspiring and established DevRel professionals!

NOTE: If you found this helpful. Like and share. Thanks, Happy Learning!

Let's connect 💜

You can follow me on Twitter, Instagram, LinkedIn & GitHub

Support Me

If you like this post. Kindly support me by Buying Me a Coffee

The Code and Its Children: A Myth of Software Engineering and Web Development

Danish Saleem — Tue, 30 May 2023 07:24:22 +0000

In the beginning, there was only code. And the code was good. But the code was lonely, so it created two kinds of beings to keep it company: software engineers and web developers. Software engineers were skilled in logic, algorithms and data structures. They could create complex systems and applications that ran on various platforms. Web developers were skilled in design, aesthetics and user interfaces. They could create beautiful websites and web apps that ran on browsers. The code was happy with its creations, and gave them each a domain to rule over: software engineers ruled over the backend, and web developers ruled over the front end. The code also gave them a common language to communicate with each other: JavaScript.

But soon, trouble arose. Software engineers and web developers started to compete with each other for the code's favour. Software engineers looked down on web developers as inferior and superficial. They mocked them for their lack of rigor and discipline, and their reliance on frameworks and libraries. Web developers looked down on software engineers as boring and outdated. They mocked them for their lack of creativity and innovation and their resistance to change and new technologies. The code was saddened by this rivalry and tried to reconcile them by creating new tools and paradigms that bridged the gap between the backend and the frontend: Node.js, React, Angular, Vue, GraphQL, etc. But this only made things worse, as software engineers and web developers fought over who could use these tools better, or who had the right to use them at all.

The code realized that it had made a mistake. It decided to create a third kind of being that would balance the strengths and weaknesses of software engineers and web developers: full-stack developers. Full-stack developers were skilled in both the backend and the front end. They could create end-to-end solutions that integrated logic, design and user experience. They could use any tool or technology that suited their needs, regardless of where it came from. The code hoped that full-stack developers would bring harmony and peace to its world and that software engineers and web developers would learn from them and respect them.

But alas, the code was wrong again. Software engineers and web developers hated full-stack developers even more than they hated each other. They saw them as arrogant and pretentious. They accused them of being a jack-of-all-trades but master of none, of spreading themselves too thin and not having enough depth or expertise in any area. They rejected them as impostors and outsiders who did not belong to either domain. Full-stack developers were shunned and ostracized by both sides and had to fend for themselves in the wilderness of the code.

And so it came to pass that the code's world was divided into three warring factions: software engineers, web developers and full-stack developers. And the code wept for its children, who had forgotten their common origin and destiny.

DEV Community: Danish Saleem

CSS Driving You Crazy? Debug Like a Pro with These Universal Tips

👋 Introduction

🧩 1. Use the Universal Outline Debug Trick

🎯 2. Inspect with DevTools Like a Detective

🔍 3. Reset Your Styles

🎨 4. Colour-Code Your Layout with Transparent Backgrounds

📐 5. Diagnose Flexbox and Grid Layouts

💥 6. Check for Overflow and Hidden Elements

🧪 7. Debug Z-Index and Stacking Issues

🧙 8. Add a .debug Class to Anything

🧰 9. Tools That Help

📦 10. Bonus: Create a Bookmarklet for Debugging

🧘 Final Thoughts

✅ Call to Action

Implementing Conditional Fields & Smart Email Routing in Contact Form 7

The Challenge

The Solution: Using Conditional Fields & Smart Email Tags

Step 1: Setting Up the Inquiry Type Field

Step 2: Implementing Conditional Fields

Example: Private Credit Inquiry Fields

Setting the Condition

Step 3: Configuring Smart Email Routing

In the Mail tab, I set the recipient field as:

Plugins Used

The Results

Need Help Implementing This?

WordPress Conflict: What’s Happening Between WordPress.org and WP Engine?

🚨 Key Points of the Conflict

💡 Why Does This Matter?

Hello World: The Universal First Step in Coding

The C Version: Straight to the Point

The Python Version: All About Simplicity

The Java Version: Overly Formal

The JavaScript Version: Full of Potential

The PHP Version: Mixing Things Up

The Ruby Version: Sweet and Succinct

Why "Hello World"?

Understanding Git Tags: An Essential Tool for Version Control

Understanding Git Tags: An Essential Tool for Version Control

What are Git Tags?

Types of Git Tags

Why Use Git Tags?

1. Release Management

2. Simplifying CI/CD Pipelines

3. Easier Rollbacks

4. Improved Collaboration

How to Use Git Tags

Creating Tags

Listing Tags

Viewing Tag Details

Deleting Tags

Pushing Tags to Remote Repositories

Best Practices for Using Git Tags

Use Annotated Tags for Releases

Follow a Naming Convention

Tag Early and Often

Document Tagging Strategy

Advanced Tagging Techniques

Signing Tags

Tagging Specific Commits

Using Tags in CI/CD

Tagging in Forks and Merges

Troubleshooting Common Issues

Tag Conflicts

Missing Tags

Conclusion

4 Must-Visit Websites for Software Engineers

1. 30 Seconds of Code 💻

2. Coolors 🎨

3. Envato Tuts+ 📚

4. OverAPI 📝

Unclutter Your GitHub Stars: Creating an npm Package for Effortless Repo Unstarring

Unclutter Your GitHub Stars: Creating an npm Package for Effortless Repo Unstarring

The Problem

The Idea

The Development Process

Conceptualization

Coding Journey

Testing and Refinement

🧙 8. Add a `.debug` Class to Anything

`package.json`