DEV Community: nexgismo

10 Common jQuery Mistakes Developers Still Make in 2025

nexgismo — Fri, 11 Jul 2025 20:05:10 +0000

Even in 2025, jQuery continues to silently power countless websites and applications — especially in CMS-based projects, enterprise dashboards, and legacy codebases. But over the years, this flexibility has also enabled a wave of bad practices and shortcuts.

Whether you’re maintaining legacy projects or prototyping fast, knowing what not to do with jQuery is just as important as knowing how to use it.

In this post, I’ll cover 10 mistakes developers still make with jQuery — even today — and how you can avoid them using modern approaches.

🚫 1. Using jQuery for Everything

Too many devs still use jQuery for things like hiding/showing elements, adding classes, or handling clicks — even when modern JavaScript can handle it natively.

Example:

$('#el').hide(); // ❌

Better:

document.getElementById('el').style.display = 'none'; // ✅

🕰️ 2. Forgetting to Wait for DOM Ready

If you don’t wrap your code in $(document).ready() or shorthand $(function() {...}), your selectors might break before the DOM is fully loaded.

🐌 3. Repeating DOM Selections

Calling $('.element') multiple times is a performance hit. Cache your selections using variables.

🧩 4. Improper Event Binding

Binding directly to elements that are injected later won’t work. Use event delegation:

$(document).on('click', '.dynamic-btn', function() {
  // works even for future elements
});

🧵 5. Not Using Chaining

Chaining methods makes your code cleaner, faster, and easier to read:

$('#el').addClass('active').fadeIn(); // ✅

🧠 The Remaining 5 Mistakes Include:

Overusing $.each() instead of Array.forEach()
DOM manipulation inside loops (performance killer)
Incorrect selector syntax (missing quotes or typos)
Not cleaning up event listeners (hello memory leaks)
Still using outdated jQuery versions (😬)

✅ Read the full post here with code examples, real-world context, and modern fixes:

👉 https://www.nexgismo.com/blog/10-common-jquery-mistakes

💬 Let me know in the comments:
Which jQuery mistake have YOU seen or fixed recently?

AI Browser Agent Security: The Insider Threat You're Not Monitoring

nexgismo — Tue, 01 Jul 2025 16:32:59 +0000

AI browser agents are changing how we automate everything from ticketing to testing — but there’s a dark side no one’s talking about.

These agents operate like human users, clicking links, logging in, and filling forms. But they lack judgment — making them prime targets for phishing and spoofing attacks.

In 2025, this silent risk is growing fast. And most orgs aren’t ready.

👉 Read the full breakdown: AI Browser Agent Security — The Hidden Insider Threat

🧠 Why It Matters

Agents can’t tell a fake login page from a real one
They often run with full user permissions
Security tools like EDR & MFA don’t flag their behavior

🔐 What You Can Do

Audit browser-based bots
Apply least-privilege access
Isolate their sessions
Implement Browser Detection and Response (BDR)
Build internal bot security policies

AI browser agents are fast, tireless — and blindly obedient. That makes them powerful. And dangerous.

Let me know how your team handles automated agents 👇

Strict Mode in JavaScript: The Ultimate Guide to Writing Safer and Cleaner Code

nexgismo — Mon, 30 Jun 2025 08:37:13 +0000

Want to write JavaScript that’s easier to debug, less error-prone, and more secure?
Strict Mode might be the single line that changes how you write JS forever.

🛡️ What Is Strict Mode in JavaScript?

Strict mode is a way to opt into a restricted variant of JavaScript introduced in ECMAScript 5. It helps eliminate silent bugs and forces better coding discipline.

You enable it by placing:

'use strict';

at the top of a script or function.

🚨 Why Use Strict Mode?

Feature	Without Strict Mode	With Strict Mode
Undeclared variables	Allowed	❌ ReferenceError
`this` in functions	Refers to `window`	`undefined`
Duplicate parameters	Allowed	❌ SyntaxError
`with` statement	Allowed	❌ Disallowed
Read-only assignments	Ignored	❌ TypeError

Strict mode can:

Prevent accidental globals
Make this more predictable
Ban confusing or insecure features

⚙️ How to Enable Strict Mode

Globally

'use strict';
let points = 100;

Locally (function scope)

function calculate() {
  'use strict';
  let result = 50;
}

🔒 ES6 modules and class bodies are in strict mode by default.

🧪 Real-World Example

Without strict mode:

function addTax(price) {
  tax = price * 0.18; // Creates a global variable!
  return tax;
}

With strict mode:

function addTax(price) {
  'use strict';
  let tax = price * 0.18;
  return tax;
}

✅ Now you'll catch undeclared variables before they cause damage.

📦 Automatic Strict Mode in ES6

Strict mode is automatically applied in:

ES6 modules (import / export)
Class definitions

No need to manually declare it in those places.

🔐 How It Helps Security

Strict mode blocks many insecure or legacy features:

Global scope pollution
Unsafe assignments
Silent failure during reassignment
Accidental overwriting of built-ins

🧭 When Should You Use It?

Situation	Use Strict Mode?
New apps	✅ Absolutely
Large teams	✅ Yes
Legacy code	🟡 Use in isolated scopes
ES6 modules	🔒 Already enabled

✅ Conclusion

Strict Mode may seem optional, but it’s a best practice that improves code reliability, security, and maintainability.

It’s just one line — but it can save hours of debugging and prevent painful production bugs.

📘 Full Visual Blog + FAQ + PDF Download:
👉 Read on NexGismo.com

💬 Have you had a bug that strict mode could’ve caught early? Share your story below 👇

#javascript #webdevelopment #cleanCode #codingtips #softwareengineering

AVIF Support in Drupal 11: A Small Tweak, Big Performance Win

nexgismo — Thu, 26 Jun 2025 18:43:16 +0000

If you're working with Drupal and performance matters to you, here's a small but impactful update — AVIF image support has landed in Drupal 11.2+.

I stumbled upon this while optimizing a Drupal site recently, and thought I'd share the practical side of getting AVIF working — plus a few caveats I ran into.

🖼️ Why AVIF?

AVIF is one of those next-gen image formats that actually delivers:

Smaller file sizes (often 30–50% smaller than JPEG)
Solid quality at low bitrates
Support for transparency, HDR, and even animation

For media-heavy sites, this means faster pages without quality compromises.

✅ Yes, Drupal Supports It — But Not Out of the Box

Starting in Drupal 11.2, the core GDToolkit lets you convert images to AVIF using Image Styles. But here’s the part that caught me off guard:

You won’t even see the “Convert to AVIF” effect unless your server has libavif support enabled in PHP GD.

That means:

PHP 8.1+
GD extension compiled with libgd 2.3.2+ and libavif

I checked this via phpinfo() — if AVIF isn’t listed, no dice.

🛠️ How I Got It Working

Once I confirmed AVIF support on my dev server, setting it up in Drupal was pretty smooth:

Go to Image Styles
Add effect: Convert to AVIF
(Optional but smart) Keep WebP or JPEG as fallback

That’s it. The AVIF versions are generated automatically.

For production, I wrapped it in a <picture> tag to serve fallbacks to browsers like Safari <16.

🧩 Helpful Modules I Found

While core support handles the basics, I explored a couple of modules that offer more control:

AVIF module — for tweaking compression levels
ImageAPI Optimize AVIF — for automated pipelines

These were useful when I needed finer quality tuning.

🌐 Browser Support Quick Check

Most major browsers support AVIF:

Browser	AVIF Support
Chrome / Firefox / Edge	✅ Yes
Safari 16+	✅ Yes
Older Safari/iOS	❌ No

So yeah — fallbacks are still necessary, especially for older Apple devices.

🧠 Final Takeaway

This feels like one of those "small effort, big gain" features. If your Drupal project is already on 11.2+, enabling AVIF is low lift — and the performance boost is immediate.

I wrote a full breakdown with steps, gotchas, and examples here if you're curious:

👉 nexgismo.com/blog/avif-image-in-drupal-11

Would love to hear if others are using AVIF in production, or if you’ve found better ways to manage fallbacks.

Ux

nexgismo — Fri, 20 Jun 2025 18:24:16 +0000

Why Frontend Developers Should Start Thinking Like UX Designers

nexgismo — Fri, 20 Jun 2025 18:23:40 +0000

🧠 Frontend Developers: You’re Not Just Writing Code — You’re Shaping Experience

In today’s web, building great UI isn’t just about clean code or fast loads. It’s about how users feel when they interact with what you build.

If you're a frontend developer, it's time to start thinking like a UX designer. Here’s why 👇

🧩 UX Is More Than Just Design

UX isn’t about colors and fonts — it’s about:

Making interfaces intuitive
Improving form flows
Guiding users clearly
Reducing friction
Building trust

And guess what? That’s your job too.

💻 You Already Influence UX (More Than You Think)

What You Do	How It Impacts UX
Use loading spinners	Reduces anxiety
Animate transitions	Feels smoother, more polished
Add input validation	Prevents user frustration
Set mobile breakpoints	Makes content readable

🎯 Why It Matters (Beyond User Happiness)

Better UX = Lower bounce rate
Better UX = More engagement
Better UX = Better SEO (Google E-E-A-T rewards usability)

You’re not just building products. You’re building experiences.

That’s what your users (and search engines) remember.

🛠️ Practical Tips for Devs Thinking Like Designers

Ask Why? before you build
Care about microinteractions (hover, focus, errors)
Design mobile-first with real device testing
Make accessibility a default, not an afterthought

Full Blog Post

👉 Read the full post here

Over to You

Have you started blending UX thinking into your frontend work?

Let’s chat in the comments!

Why Frontend Developers Should Start Thinking Like UX Designers

nexgismo — Fri, 20 Jun 2025 18:23:40 +0000

🧠 Frontend Developers: You’re Not Just Writing Code — You’re Shaping Experience

In today’s web, building great UI isn’t just about clean code or fast loads. It’s about how users feel when they interact with what you build.

If you're a frontend developer, it's time to start thinking like a UX designer. Here’s why 👇

🧩 UX Is More Than Just Design

UX isn’t about colors and fonts — it’s about:

Making interfaces intuitive
Improving form flows
Guiding users clearly
Reducing friction
Building trust

And guess what? That’s your job too.

💻 You Already Influence UX (More Than You Think)

What You Do	How It Impacts UX
Use loading spinners	Reduces anxiety
Animate transitions	Feels smoother, more polished
Add input validation	Prevents user frustration
Set mobile breakpoints	Makes content readable

🎯 Why It Matters (Beyond User Happiness)

Better UX = Lower bounce rate
Better UX = More engagement
Better UX = Better SEO (Google E-E-A-T rewards usability)

You’re not just building products. You’re building experiences.

That’s what your users (and search engines) remember.

🛠️ Practical Tips for Devs Thinking Like Designers

Ask Why? before you build
Care about microinteractions (hover, focus, errors)
Design mobile-first with real device testing
Make accessibility a default, not an afterthought

Full Blog Post

👉 Read the full post here

Over to You

Have you started blending UX thinking into your frontend work?

Let’s chat in the comments!

How I Made a Web Form That Suggests Skills Using AI + JavaScript

nexgismo — Tue, 17 Jun 2025 07:55:46 +0000

Modern users expect more than just input fields—they expect guidance, personalization, and efficiency. So I decided to explore how we could use AI to make web forms smarter, specifically by suggesting relevant skills based on user input.

In this post, I’ll walk through how we added a lightweight AI layer on top of a typical HTML/JS form, using a language model to dynamically suggest skills as a user types their job title or description.

🔍 The Idea

What if your form could suggest skills like this:

User enters: Frontend Developer
Suggested Skills: JavaScript, React, CSS, Responsive Design

We made this work by:

Capturing input events in JS
Sending them to an API powered by a language model
Injecting suggested skills back into the DOM

⚙️ How It Works (High-Level)

Input Monitoring

document.querySelector('#job-title').addEventListener('input', (e) => {
  fetchSuggestions(e.target.value);
});

Call to AI Model (LLM API)

async function fetchSuggestions(input) {
  const res = await fetch('/suggest-skills?title=' + input);
  const skills = await res.json();
  updateUI(skills);
}

Update the Form

function updateUI(skills) {
  const list = document.querySelector('#suggested-skills');
  list.innerHTML = skills.map(s => `<li>${s}</li>`).join('');
}

Why This Matters

This isn't just a cool trick — it's an example of practical AI UX. Forms can now guide users rather than passively collect data.

Improves form completion
Reduces errors
Feels more intelligent and helpful

📖 Full Walkthrough

I've shared a full technical breakdown and examples in this blog post:

👉 Read the Full Post Here