DEV Community: Muhammad Tayyab Sheikh

Code is cheap, show me the talk!

Muhammad Tayyab Sheikh — Tue, 03 Feb 2026 06:22:09 +0000

Before: Talk is cheap, show me the code.
Now (After AI): Code is cheap, show me the talk.

It is a fascinating inversion of the famous Linus Torvalds quote. We have moved from a scarcity of implementation to a scarcity of intent.

In the pre-AI era, ideas were abundant, but executing them (writing the code) was the bottleneck. It required memorized syntax, algorithmic knowledge, and manual typing. "Talk" was seen as fluff because it didn't compile.

Now, we have entered an era where implementation is becoming commoditized. Here is why the "Talk" (the context, the prompt, the architecture) is suddenly the most valuable asset in the room:

1. English is the New Syntax

The "Talk" is literally the code now. In a world of LLMs, your ability to articulate a problem clearly, define constraints, and describe the desired state is the programming language. If you cannot "talk" effectively to the model, the "code" it produces is garbage. Precision in language has replaced precision in syntax.

2. The "Why" vs. The "How"

AI is incredible at the "How" (implementation).

AI: "Here is a React component with a useEffect hook."
Human: "But why are we using a client-side effect here instead of server-side rendering? How does this impact our SEO strategy?"

The "Talk" represents the architectural decision-making, the business logic, and the user empathy that an AI cannot fully replicate yet. You can generate 1,000 lines of Python in seconds, but knowing which 1,000 lines solve the actual business problem requires high-level "talk."

3. Debugging the Intent, Not the Typo

Previously, we spent hours debugging missing semicolons or type errors. Now, we spend that time debugging the logic and the requirements. The engineer's role is shifting from Mason (laying the bricks) to Architect (designing the cathedral). The architect talks; the tools build.

The New Reality

The table hasn't just turned; it has flipped over. Code is now the "cheap" output of a high-quality conversation. If you can't communicate the vision (the talk), the code is worthless, no matter how clean it is.

Does this shift make you feel more like an architect or just a really advanced spell-checker?

Rendering Gradient Lines in LineChart Using `react-native-chart-kit`

Muhammad Tayyab Sheikh — Thu, 25 Jul 2024 06:06:14 +0000

Hello Dev Community! 👋

Today, I’m excited to share a neat trick on how to enhance your LineCharts with gradient lines using react-native-chart-kit. This technique will make your data visualizations more appealing, whether you’re tracking fitness progress, visualizing sales trends, or displaying any other kind of data.

Step-by-Step Guide

1. Setting Up Your Custom LineChart Component

To begin, we’ll create a custom component by extending the LineChart component from react-native-chart-kit. This will allow us to override methods and introduce our gradient lines.

import React from 'react';
import { LineChart } from 'react-native-chart-kit';
import { AbstractChartConfig } from 'react-native-chart-kit/dist/AbstractChart';
import { LinearGradient, Path, Stop } from 'react-native-svg';

class CustomLineChart extends LineChart {
  getNonBezierLinePoints = (dataset, _a) => {
    const { width, height, paddingRight, paddingTop, data } = _a;
    if (dataset.data.length === 0) {
      return 'M0,0';
    }
    const datas = this.getDatas(data);
    const xMax = this.getXMaxValues(data);
    const x = (i) => Math.floor(paddingRight + (i * (width - paddingRight)) / xMax);
    const baseHeight = this.calcBaseHeight(datas, height);
    const y = (i) => {
      const yHeight = this.calcHeight(dataset.data[i], datas, height);
      return Math.floor(((baseHeight - yHeight) / 4) * 3 + paddingTop);
    };
    return ['M' + x(0) + ',' + y(0)].concat(
      dataset.data.slice(1).map((_, i) => 'L' + x(i + 1) + ',' + y(i + 1))
    ).join(' ');
  };

  renderLine = ({ width, height, paddingRight, paddingTop, data }) => {
    const output = [];
    if (!data) return [];

    data.forEach((dataset, index) => {
      const bezierPoints = this.props.bezier
        ? this.getBezierLinePoints(dataset, { width, height, paddingRight, paddingTop, data })
        : this.getNonBezierLinePoints(dataset, { width, height, paddingRight, paddingTop, data });

      const gradientColors = ['#FDCC3A', '#FA3431'];

      output.push(
        <LinearGradient key={`line-gradient-${index}`} id={`line-gradient-${index}`} x1="0%" y1="0%" x2="100%" y2="0%">
          <Stop offset="0%" stopColor={gradientColors[0]} />
          <Stop offset="100%" stopColor={gradientColors[1]} />
        </LinearGradient>,
        <Path
          key={`line-${index}`}
          d={bezierPoints}
          fill="none"
          stroke={`url(#line-gradient-${index})`}
          strokeWidth={this.getStrokeWidth(dataset)}
          strokeDasharray={dataset.strokeDashArray}
          strokeDashoffset={dataset.strokeDashOffset}
        />
      );
    });

    return output;
  };
}

export default CustomLineChart;

2. Overriding the `renderLine` Method

The renderLine method is crucial as it controls how the lines are drawn on the chart. By overriding this method, we can customize the rendering process to include gradient strokes.

3. Defining the Gradient

We use LinearGradient and Stop from react-native-svg to define the gradient. This involves specifying the colors and their positions within the gradient.

4. Rendering the Lines with Gradients

We modify the Path component to use the gradient definition in its stroke attribute. This change ensures that the lines are drawn with the specified gradient.

Putting It All Together

Here’s the complete code for our custom LineChart component:

import React from 'react';
import { LineChart } from 'react-native-chart-kit';
import { AbstractChartConfig } from 'react-native-chart-kit/dist/AbstractChart';
import { LinearGradient, Path, Stop } from 'react-native-svg';

class CustomLineChart extends LineChart {
  getNonBezierLinePoints = (dataset, _a) => {
    const { width, height, paddingRight, paddingTop, data } = _a;
    if (dataset.data.length === 0) {
      return 'M0,0';
    }
    const datas = this.getDatas(data);
    const xMax = this.getXMaxValues(data);
    const x = (i) => Math.floor(paddingRight + (i * (width - paddingRight)) / xMax);
    const baseHeight = this.calcBaseHeight(datas, height);
    const y = (i) => {
      const yHeight = this.calcHeight(dataset.data[i], datas, height);
      return Math.floor(((baseHeight - yHeight) / 4) * 3 + paddingTop);
    };
    return ['M' + x(0) + ',' + y(0)].concat(
      dataset.data.slice(1).map((_, i) => 'L' + x(i + 1) + ',' + y(i + 1))
    ).join(' ');
  };

  renderLine = ({ width, height, paddingRight, paddingTop, data }) => {
    const output = [];
    if (!data) return [];

    data.forEach((dataset, index) => {
      const bezierPoints = this.props.bezier
        ? this.getBezierLinePoints(dataset, { width, height, paddingRight, paddingTop, data })
        : this.getNonBezierLinePoints(dataset, { width, height, paddingRight, paddingTop, data });

      const gradientColors = ['#FDCC3A', '#FA3431'];

      output.push(
        <LinearGradient key={`line-gradient-${index}`} id={`line-gradient-${index}`} x1="0%" y1="0%" x2="100%" y2="0%">
          <Stop offset="0%" stopColor={gradientColors[0]} />
          <Stop offset="100%" stopColor={gradientColors[1]} />
        </LinearGradient>,
        <Path
          key={`line-${index}`}
          d={bezierPoints}
          fill="none"
          stroke={`url(#line-gradient-${index})`}
          strokeWidth={this.getStrokeWidth(dataset)}
          strokeDasharray={dataset.strokeDashArray}
          strokeDashoffset={dataset.strokeDashOffset}
        />
      );
    });

    return output;
  };
}

export default CustomLineChart;

Conclusion

By following these steps, you can easily add gradient lines to your LineCharts in React Native. This not only enhances the visual appeal of your charts but also makes your data representation more engaging. Feel free to tweak the gradient colors and other properties to match your app’s theme and make your charts even more impressive!

If you found this tutorial helpful, please share it with your network. Happy coding! 👨‍💻👩‍💻

Feel free to leave comments and let me know how you are using this technique in your projects!

Understanding the SOLID Principles in JavaScript

Muhammad Tayyab Sheikh — Wed, 11 Oct 2023 10:39:04 +0000

When diving into the world of object-oriented programming (OOP), one will inevitably encounter the SOLID principles. These five principles, introduced by Robert C. Martin, guide developers in creating maintainable, scalable, and robust software designs. In this article, we'll break down each principle and provide practical JavaScript examples to illustrate them.

1. Single Responsibility Principle (SRP)

Concept:

Every module or class should have responsibility for a single piece of functionality. By adhering to this principle, the module or class becomes more robust and changes in one functionality don't impact others.

JavaScript Example:

Consider a class that manages user details and also handles user data storage:

class UserManager {
    constructor(user) {
        this.user = user;
    }

    saveToDatabase() {
        // Logic to save user data to database
    }

    displayDetails() {
        console.log(`Name: ${this.user.name}, Email: ${this.user.email}`);
    }
}

In the above design, the UserManager class is responsible for both managing user details and saving them to a database, violating the SRP. A better approach:

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    displayDetails() {
        console.log(`Name: ${this.name}, Email: ${this.email}`);
    }
}

class UserDataBase {
    saveUser(user) {
        // Logic to save user data to database
    }
}

2. Open/Closed Principle (OCP)

Concept:

Software entities should be open for extension but closed for modification. This ensures that any new functionality can be added without changing existing code.

JavaScript Example:

Imagine we have a class that calculates the area of a rectangle:

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    area() {
        return this.height * this.width;
    }
}

class AreaCalculator {
    calculateArea(shape) {
        return shape.area();
    }
}

What if we want to add a circle next? The current design requires modifying AreaCalculator. Instead, we can use polymorphism:

class Shape {
    area() {}
}

class Rectangle extends Shape {
    constructor(height, width) {
        super();
        this.height = height;
        this.width = width;
    }

    area() {
        return this.height * this.width;
    }
}

class Circle extends Shape {
    constructor(radius) {
        super();
        this.radius = radius;
    }

    area() {
        return 3.14 * this.radius * this.radius;
    }
}

Now, adding more shapes won't require changing AreaCalculator.

3. Liskov Substitution Principle (LSP)

Concept:

Derived classes must be substitutable for their base classes. This ensures that a derived class can replace its base class without affecting program behavior.

JavaScript Example:

Using our previous shapes, let's ensure that any new shape we add adheres to the base Shape contract:

class Triangle extends Shape {
    constructor(base, height) {
        super();
        this.base = base;
        this.height = height;
    }

    area() {
        if (this.base <= 0 || this.height <= 0) {
            throw new Error("Invalid dimensions");
        }
        return 0.5 * this.base * this.height;
    }
}

This ensures that the derived Triangle class can replace the Shape class without issues.

4. Interface Segregation Principle (ISP)

Concept:

Clients shouldn't be forced to implement interfaces they don't use. By following this, we avoid bloating classes with unnecessary methods.

JavaScript Note:

JavaScript doesn't have interfaces like other languages, but we can mimic this concept using classes and methods.

Example:

If we have a Bird class, not all birds can swim:

class Bird {
    fly() {
        // Implementation
    }

    swim() {
        // Not all birds can swim!
    }
}

A better approach:

class Bird {
    fly() {
        // Implementation
    }
}

class SwimmingBird extends Bird {
    swim() {
        // Now only birds that can swim will have this method
    }
}

5. Dependency Inversion Principle (DIP)

Concept:

High-level modules should not depend on low-level modules. Both should depend on abstractions.

JavaScript Example:

Instead of having a NotificationService class directly depend on an EmailService, we can invert the dependency:

class EmailService {
    sendEmail(message) {
        // Send email
    }
}

class NotificationService {
    constructor(emailService) {
        this.emailService = emailService;
    }

    notify(message) {
        this.emailService.sendEmail(message);
    }
}

By doing this, if we decide to change the way we notify users (e.g., using SMS), we can easily swap out the service without changing the NotificationService.

Conclusion

By understanding and applying the SOLID principles, budding software engineers can write more maintainable and scalable code. These principles, while fundamental, are just a starting point. Continual learning and practice, combined with real-world experience, will further refine and solidify one's software design skills.

If you found this article helpful, please share it with your fellow students and developers. Happy coding!

🐦 Follow me on Twitter: @CSTayyab
🔗 Check out my projects on GitHub: @CSTayyab
🌐 Visit my personal website: cstayyab.com

Stay connected and let's build something amazing together! 🚀

Cover Photo by Scott Graham on Unsplash

Coding Beyond Opinions: A Tale of Two Scripts

Muhammad Tayyab Sheikh — Sun, 24 Sep 2023 09:06:24 +0000

In a realm of ones and zeroes, I stand,
Between JavaScript's wild land,
And TypeScript's structured hand,
Social media rants, like shifting sands.

They say, "JavaScript's free, it's grand!"
Others claim, "TypeScript's the promised land!"
But in my heart, a simple demand,
To write code that's clear and stands.

Scrolling through tweets, a never-ending band,
Of devs who argue, take a stand,
But in my quiet corner, my plan,
Is to get the work done, no matter the brand.

For tools are tools, in every hand,
It's the craftsman's skill, not the brand so grand,
Whether JS or TS, across this land,
I'll code my way, and make my stand.

So let them rant, let them disband,
I'll choose my path, with my own hand,
For in the end, it's not about the strand,
But the magic we create, when code meets land.

🐦 Follow me on Twitter: @CSTayyab
🔗 Check out my projects on GitHub: @CSTayyab
🌐 Visit my personal website: cstayyab.com

Stay connected and let's build something amazing together! 🚀

🖼️ Cover Image by 愚木混株 cdd20 on Unsplash

Discover the Hidden Powers of PostgreSQL: Lateral Joins and JSON Columns Decoded!

Muhammad Tayyab Sheikh — Thu, 21 Sep 2023 22:08:28 +0000

Hey there, fellow code enthusiast! 🚀 If you've been dabbling with PostgreSQL and have a decent grasp of general SQL, you're in for a treat today. We're diving deep into the world of lateral joins, especially when dealing with JSON columns. So, grab a cup of coffee, and let's get started!

What's a Lateral Join Anyway?

Before we jump into the JSON goodness, let's get our basics right. A lateral join in PostgreSQL is like that friend who always brings another friend to the party. In SQL terms, it allows a subquery in the FROM clause to refer to columns of the preceding tables. This is super handy when you want to generate a series of values for each row in a table.

JSON in PostgreSQL

Now, if you're a developer in the modern world, you know JSON is everywhere. It's like the universal language of data. PostgreSQL, being the awesome database system that it is, offers fantastic support for JSON columns. You can store, query, and even create indexes on them. Sweet, right?

Marrying the Two: Lateral Joins with JSON Columns

Imagine you have a table users with a JSON column preferences that stores a list of user's favorite programming languages. It might look something like this:

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name TEXT,
    preferences JSONB
);

Now, let's say you want to extract each programming language for every user. This is where the magic of lateral joins comes into play.

SELECT users.name, lang.value::text AS language
FROM users, LATERAL jsonb_array_elements_text(users.preferences->'languages') AS lang(value);

What's happening here is that for each row in the users table, the jsonb_array_elements_text function is being applied to the preferences column, and the results are being "joined" back to the original row. The result? A neat list of users and their favorite programming languages.

Why Should You Care?

Performance: Lateral joins can be a lifesaver when dealing with complex queries, especially with JSON columns. They can help you avoid multiple subqueries and make your queries run faster.
Flexibility: With lateral joins, you can generate series, compute aggregates, and do a lot more for each row in your table.
Cleaner Code: Instead of writing lengthy and complicated subqueries, lateral joins can make your SQL code cleaner and more readable.

Wrapping Up: Join the Lateral Revolution!

Lateral joins, especially with JSON columns in PostgreSQL, are like the secret sauce that can spice up your SQL queries. They offer a powerful way to combine and extract data in ways you might not have imagined.

And hey, if you enjoyed this deep dive and are looking for more insights, tips, and tricks in the world of development, don't forget to follow me! I'm always sharing the latest and greatest from the tech world. Let's keep the code flowing and the knowledge growing! 🚀🔥

Happy coding!

Beyond LESS: Embracing Native CSS Nesting for Structured Styling

Muhammad Tayyab Sheikh — Tue, 19 Sep 2023 02:56:06 +0000

For years, frontend developers have relied on CSS pre-processors like LESS and SASS to bring structure and logic to their stylesheets. One of the most beloved features of these pre-processors is nesting, which allows for a more organized and readable way to style elements based on their parent-child relationships. Now, with the introduction of native CSS nesting, developers can achieve similar structured styling without the need for a pre-processor. Let's dive into this exciting feature.

What is CSS Nesting?

CSS nesting provides the ability to nest one style rule inside another. The selector of the child rule is relative to the selector of the parent rule. This behavior, previously exclusive to CSS pre-processors, is now natively supported in modern browsers.

For those familiar with LESS, the concept is not new:

.parent {
  color: red;
  .child {
    color: blue;
  }
}

With native CSS nesting, the same can be achieved as:

.parent {
  color: red;
  .child {
    color: blue;
  }
}

Why Use Native CSS Nesting?

No Pre-processors Required: While pre-processors offer a range of features, they also add an additional layer of complexity to the build process. With native support, you can achieve structured styling without any external dependencies.
Performance: Native features are typically optimized for performance. By relying on browser-implemented features, you can often achieve faster render times.
Future-Proofing: As CSS evolves, native features will be maintained and updated by browser vendors, ensuring longevity and compatibility.

Browser Support

As of now, CSS nesting is supported in:

Chrome (from version 112)
Safari (Technical Preview 162 and later)
Other browsers are rapidly catching up, with many in the pipeline for support.

Check the latest browser support here.

How to Use CSS Nesting

The syntax is straightforward and will be familiar to those who've used LESS:

.nesting {
  color: hotpink;
  > .is {
    color: rebeccapurple;
    > .awesome {
      color: deeppink;
    }
  }
}

You can also use the & symbol to refer to the parent selector:

.button {
  background-color: gray;
  &:hover {
    background-color: black;
  }
}

Caveats and Considerations

Starting with an Identifier: Unlike LESS, native CSS nesting does not allow starting the nested selector with an identifier. For instance, the following is invalid:

div {
  color: red;
  input {
    margin: 1em;
  }
}

However, this can be rephrased using the & symbol:

div {
  color: red;
  & input {
    margin: 1em;
  }
}

Over-nesting: Just because you can nest, doesn't mean you always should. Over-nesting can lead to specificity issues and make your CSS harder to maintain. As a rule of thumb, try not to nest more than three levels deep.

Conclusion

CSS nesting is a significant step forward in making CSS more structured and maintainable. While it doesn't replace all the features of pre-processors like LESS, it does offer a native solution for one of the most commonly used features. As with any new feature, it's essential to test thoroughly and ensure compatibility across browsers. Happy styling!

Feel free to reach via following platforms:

Cover by Robert Katzki on Unsplash

JIRA vs. Plane: A Comprehensive Comparison for the Developer Community

Muhammad Tayyab Sheikh — Tue, 19 Sep 2023 02:17:04 +0000

In the vast realm of project management and issue tracking tools, JIRA has long been a dominant force. However, the open-source community never ceases to innovate, and a new contender, Plane, has emerged. For developers seeking the best tool to streamline their workflow, understanding the nuances between JIRA and Plane is crucial. This article dives deep into a side-by-side comparison, catering specifically to the developer community.

1. Introduction to the Contenders

JIRA: Developed by Atlassian, JIRA is a proprietary software that has become synonymous with issue tracking and project management, especially in software development circles. Its robust features cater to both small startups and large enterprises.

Plane: An open-source entrant, Plane is positioning itself as an alternative to JIRA, Linear, and Height. With a promise of simplicity, it aims to help developers track issues, epics, and product roadmaps seamlessly.

2. Licensing: Open Source vs. Proprietary

JIRA: Being proprietary, JIRA comes with licensing costs, which can vary based on the size of the team and the chosen plan.

Plane: As an open-source tool, Plane is free to use and modify. This not only reduces costs but also offers developers the flexibility to tailor the tool to their specific needs.

3. Features at a Glance

JIRA:

Custom Workflows: Tailor your processes with bespoke workflows.
Reports & Dashboards: Gain insights with detailed analytics.
Agile Development: Full support for Scrum and Kanban methodologies.
Marketplace: Enhance functionality with a plethora of plugins and extensions.

Plane:

Issue Planning: A rich text editor for detailed issue creation.
Layout Customization: Choose from List, Kanban, or Calendar views.
GitHub Sync: Consolidate and track GitHub issues effortlessly.
AI-Powered Notepad: Document issues and plans with intelligence.

4. Community and Support

JIRA: With its extensive user base, JIRA boasts a vast community, detailed documentation, and premium support options.

Plane: Being relatively new, Plane is fostering an active community on platforms like GitHub and Discord. Open-source enthusiasts are actively contributing and shaping its future.

5. Who Should Choose What?

For Large Enterprises: JIRA, with its comprehensive features and extensive integrations, is often the go-to choice for larger organizations that require detailed project management capabilities.

For Startups & Individual Developers: Plane, with its open-source nature and emphasis on simplicity, can be an excellent choice for those looking for a straightforward, cost-effective solution.

6. SEO Perspective

For developers and teams looking to make an informed choice, understanding the SEO implications is essential. JIRA, with its longstanding reputation, has a strong online presence. However, Plane, with its open-source nature, is gaining traction, especially among developers who prioritize customization and community-driven development.

Conclusion

Choosing between JIRA and Plane boils down to individual and organizational needs. While JIRA offers a comprehensive suite of features suitable for extensive project management, Plane promises simplicity and the charm of open-source development. Developers should weigh the pros and cons, consider their project's scale, and make an informed decision.

For more insights, discussions, and updates on this topic and many others, feel free to connect with me on my social platforms:

Twitter: @CSTayyab
Github: @CSTayyab
LinkedIn: in/CSTayyab
Website: cstayyab.com

Cover by: Brendan Church on Unsplash

Bun 1.0: The Next Big Thing in JavaScript Runtime?

Muhammad Tayyab Sheikh — Tue, 12 Sep 2023 21:39:01 +0000

Introduction

Attention, Node.js enthusiasts! There's a fresh face in the JavaScript runtime arena: Bun 1.0. Found on oven-sh/bun on GitHub, Bun is stepping up with some bold claims. But the question is, will it live up to the hype?

A Closer Look at Bun

Bun is positioning itself as a comprehensive toolkit for both JavaScript and TypeScript developers. It promises a streamlined experience by integrating runtime, test runner, and package manager into a single bun executable. With its foundation on Zig and JavaScriptCore, could Bun be the performance game-changer we've been waiting for?

Features to Discuss

Native TS and JSX: Bun eliminates the need for external transpilers. How valuable is this feature for your workflow?
Unified Tooling: The "node_modules" conundrum is familiar to many. Could Bun's approach be the solution? Share your thoughts.
Platform Compatibility: While Bun vibes with Linux and macOS, its Windows compatibility is still in the works. How critical is this for your projects?

Bun vs. Node.js vs. Deno: Weigh In!

Performance: Bun touts faster startup times and reduced memory consumption. Have you put it to the test? I'm eager to hear your findings.
Simplicity: Node.js is powerful, but its complexity can be daunting. Could Bun offer a more streamlined alternative? Let's discuss.
Core Tech: With Node.js on V8 and Bun on Zig and JavaScriptCore, which do you think holds the future? And where does Deno stand in this equation?

Points for Community Feedback

Development Stage: Bun is evolving, with full Node.js framework compatibility in the pipeline. Would you consider being an early adopter?
Community and Ecosystem: A strong community is the backbone of any technology. How do you envision Bun's place in this landscape?
Windows Integration: Is the absence of native Windows support a deal-breaker or just a minor hurdle?

Let's Get the Conversation Started!

Bun 1.0 is making waves, and I want to hear from you. Do you see it as a potential game-changer in the JavaScript runtime space? Or is it too early to tell? Share your insights, experiences, and predictions in the comments. Let's dive deep into this discussion! 🚀🔍👨‍💻👩‍💻

iPhone 15: A Developer's Critical Examination

Muhammad Tayyab Sheikh — Tue, 12 Sep 2023 21:04:22 +0000

Apple's iPhone series has been a beacon of innovation for years. With the iPhone 15's release, the tech world is abuzz. But as software developers, it's our duty to look beyond the marketing gloss and delve into the technical details. Let's critically examine the iPhone 15.

Display: Bright but Is It Revolutionary?

The iPhone 15 boasts an OLED Super Retina display with a brightness peaking at 2,000 nits in direct sunlight. While impressive, it's essential to ask: does this significantly enhance the user experience, or is it just a numbers game?

Camera: Improved, but at What Cost?

The 48MP main camera is a significant upgrade from the previous 12MP. However, the Pro series still outshines the regular iPhone 15 in camera capabilities. Developers aiming for high-end photography apps might still find the iPhone 15 lacking.

Performance: The A16 Bionic Chip

The A16 Bionic chip promises faster multi-threaded performance. But with increasing power, concerns about battery life and device heating arise. How will this chip fare in real-world, intensive tasks?

Connectivity: The USB-C Dilemma

The shift to USB-C is monumental. But it also means abandoning the vast ecosystem of Lightning accessories. Developers and users invested in the Lightning ecosystem might face transition challenges.

A Closer Look at Potential Concerns

Design Over Durability?: The iPhone 15's back glass, infused with a range of colors, adds vibrancy. But does this compromise the device's durability? The glass undergoes a dual-ion exchange process for strength, but real-world resilience remains to be seen.
Price Implications: With each iteration, the iPhone's price point climbs. Developers need to evaluate if the iPhone 15's features offer a justified return on investment, especially when procuring devices for testing.
USB-C Transition: The shift to USB-C, while promising faster data transfers, might be cumbersome for those deeply invested in the Lightning ecosystem.
Camera Limitations: Despite the camera upgrades, the iPhone 15's camera system might still not be on par with the Pro series. This could be a limitation for high-end photography apps.

Conclusion

The iPhone 15, like any tech product, comes with its set of pros and cons. While it offers several commendable features, potential concerns cannot be ignored. As developers, a critical examination ensures we make informed decisions, optimizing our apps for the best user experience.

Sources: Digital Trends, Reviewed

Apple's Non-Standard Approach to WebApps: A Step Back from PWA Standardization

Muhammad Tayyab Sheikh — Mon, 05 Jun 2023 19:56:32 +0000

In their recent 2023 event, Apple made an announcement that users would be able to add any website to their dock and open it as a web app, without requiring the use of manifest.json and service workers. While this may sound like a convenient feature, it deviates from the standard approach of Progressive Web Apps (PWAs) and introduces potential problems due to non-standardization.

Progressive Web Apps and Standardization

Progressive Web Apps have been a significant development in bridging the gap between native mobile apps and traditional web applications. They leverage modern web technologies to offer a seamless and app-like experience to users. One of the key elements of PWAs is the use of manifest.json and service workers.

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.
Source: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

Manifest.json

The manifest.json file provides a standardized way for developers to declare essential metadata about their web app. It includes information such as the app's name, icons, display mode, and other configuration options. This standardization ensures consistency across platforms and allows web apps to be easily discoverable and installable.

Service Workers

Service workers are JavaScript files that run in the background and provide functionality like offline caching, push notifications, and background sync. They enable PWAs to work reliably, even in low or no network connectivity scenarios. Service workers play a crucial role in enhancing the user experience by enabling features commonly associated with native apps.

Apple's Non-Standard Approach

Apple's decision to allow users to add any website to their dock and open it as a web app without manifest.json and service workers undermines the standardization efforts established by the PWA community. By bypassing these essential components, Apple creates a fragmented ecosystem, leading to potential problems.

Inconsistent User Experience: Without manifest.json, developers lose the ability to define the app's display mode, icons, and other crucial metadata. This results in inconsistent app-like experiences across different platforms and devices, as each implementation may interpret the website's appearance differently.
Limited Functionality: Service workers are fundamental for enabling advanced features like offline support, background synchronization, and push notifications. By not requiring service workers, Apple restricts the potential functionality that web apps can provide to users on their devices.
Discoverability Challenges: The standardized use of manifest.json allows platforms and app stores to recognize and index PWAs, making them more discoverable by users. Without this standardization, Apple's non-standard approach may hinder the discoverability of web apps, impacting the overall reach and adoption of such applications.
Development Complexity: Standardized practices simplify development by providing clear guidelines and tooling support. By deviating from these standards, developers now face the challenge of accommodating Apple's unique approach, potentially requiring additional development efforts and creating inconsistencies in their codebases.

Conclusion

Apple's recent announcement to allow websites to be added to the dock as web apps without the requirement of manifest.json and service workers introduces problems due to non-standardization. Progressive Web Apps have already solved these challenges by providing a consistent user experience, advanced functionality, discoverability, and streamlined development practices. While Apple's approach may seem convenient initially, it risks fragmenting the web app ecosystem and hindering the progress made towards standardization and a unified web platform experience.

Expecto Strong Passwords: Enchant Your Online Security with a JavaScript Password Bookmarklet

Muhammad Tayyab Sheikh — Thu, 16 Feb 2023 01:51:16 +0000

Back in the day, when the internet was young and full of hope, there were these things called JavaScript bookmarklets. They were like little web wizards that lived in your bookmarks bar and could cast spells with just a click. While their powers may have diminished over time, they still have a few tricks up their sleeves, like generating passwords that would make Dumbledore proud. In this article, I'll show you how to harness the power of these little wizards to create your very own password generator in just 30 seconds. So grab your wizard hat and say hello to some JavaScript wizardry!

We are going to start with a simple JS function to generate a random string of arbitrary length:

function generateRandomString(length) {
    const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        result += chars.charAt(randomIndex);
    }
    return result;
}

To generate the password we need the desired length of the password, for that we would use the good old window.prompt with default value of 16

window.prompt('Enter the desired length of string:', 16)

The return value of this can be passed to our function generateRandomString that we defined earlier.
Now, to output the generated password we will again use prompt because Chrome doesn't let user copy text from "alert" box.

prompt('Please copy the following generated String', [Call above function here])

Here is what we have so far:

window.prompt('Please copy the following generated String', (function generateRandomString(length) {
    const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        result += chars.charAt(randomIndex);
    }
    return result;
})(window.prompt('Enter the desired length of string:', 16)))

Last but not the least, we have to enclose this into another IIFE and prepend that with javascript: so as to let browser know that this specific bookmark is not just any URL but a JavaScript Snippet.

javascript:(() => {
    prompt('Please copy the following generated String', (
        function generateRandomString(length) {
            const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let result = '';
            for (let i = 0; i < length; i++) {
                const randomIndex = Math.floor(Math.random() * chars.length);
                result += chars.charAt(randomIndex);
            }
            return result;
        })(window.prompt('Enter the desired length of string:', 16)));
    return false;
})()

You might have noticed that I sneaked in a return false at the end, that is to prevent browser from redirecting you to a new page.

Now you can just create a New Bookmark in your browser with above code as "URL" and click it no matter on which webpage are you and you would get a password of your desired length.

In conclusion, using a JavaScript bookmarklet to create a password generator is a simple and efficient way to generate strong, unique passwords on the fly. With just a few lines of code and a couple of clicks, you can create a custom password generator that fits your needs. So, whether you're a security-conscious user or just looking for a little bit of web wizardry, give this method a try and see how it can make your online life a little bit easier and a lot more secure. Thanks for reading and happy password generating!

"Let me wait-for-it and call you back", said wait-for-it.js

Muhammad Tayyab Sheikh — Fri, 07 May 2021 00:26:09 +0000

Ever encountered a situation where you had to wait for some HTML element in a webpage before you can execute a function?
Wait no more, because wait-for-it.js is at your service.

What does it offer?

It offers you a much simpler way to execute a function (callback) when your specified (selector) element gets added to the page.

How does it work?

It uses nothing else but your very own JavaScript to accomplish the task i.e. JavaScript's MutationObserver API. You can have a detailed look at its code here:

cstayyab / wait-for-it.js

A JavaScript Library that allows you to execute function when a certain element gets added to the document

Where can I possibly use it?

Suppose you are using an external library that makes changes to your page content and you want to execute a function when these changes are made but the library itself does not emit any kind of event.

One way to handle this problem is that you make your own copy of the library and edit that library to suit your need but there can be different restrictions with this approach. For example,

You might have to manually update your version every time the library is updated.
That library some how restricts you to use it when it's not being used from their server.

In scenarios such as mentioned above the only code you can control is yours. So what you can do is that you include wait-for-it.js in your code which can wait for changes to content and if the CSS selector you have specified appears, it will simply run the callback function you have specified. This way even if that particular library is updated you won't have to make any changes to your code.

How do I use it?

Step 1: Include it in your webpage using jsDelivr CDN

<script src="https://cdn.jsdelivr.net/gh/cstayyab/wait-for-it.js@0.1.1/wait-for-it.js"></script>

Step 2: Register a selector to listen:

waitForElement('#food', function () {
    alert("Your Food is Here!");
});

Step 3: Voilà!!

Update v0.1.1

Now you can specify a third parameter timeout to waitForElement. If the specified element does not appear in the given time, your callback function will be called with a timeout = true argument instead and the selector will also be removed from the queue. Here is an example:

waitForElement('#NonExistentSelector', function (timeout) {
    if(timeout === true) {
        console.log('As Expected, Element with #NonExistentSelector did not appear in 1000 milliseconds.');
        return;
    }
    console.log('This is not possible at all!');
}, 1000);

Feel free to star and fork it on GitHub

DEV Community: Muhammad Tayyab Sheikh

Code is cheap, show me the talk!

1. English is the New Syntax

2. The "Why" vs. The "How"

3. Debugging the Intent, Not the Typo

The New Reality

Rendering Gradient Lines in LineChart Using `react-native-chart-kit`

Step-by-Step Guide

1. Setting Up Your Custom LineChart Component

2. Overriding the renderLine Method

3. Defining the Gradient

4. Rendering the Lines with Gradients

Putting It All Together

Conclusion

Understanding the SOLID Principles in JavaScript

1. Single Responsibility Principle (SRP)

Concept:

JavaScript Example:

2. Open/Closed Principle (OCP)

Concept:

JavaScript Example:

3. Liskov Substitution Principle (LSP)

Concept:

JavaScript Example:

4. Interface Segregation Principle (ISP)

Concept:

JavaScript Note:

Example:

5. Dependency Inversion Principle (DIP)

Concept:

JavaScript Example:

Conclusion

Coding Beyond Opinions: A Tale of Two Scripts

Discover the Hidden Powers of PostgreSQL: Lateral Joins and JSON Columns Decoded!

What's a Lateral Join Anyway?

JSON in PostgreSQL

Marrying the Two: Lateral Joins with JSON Columns

Why Should You Care?

Wrapping Up: Join the Lateral Revolution!

Beyond LESS: Embracing Native CSS Nesting for Structured Styling

What is CSS Nesting?

Why Use Native CSS Nesting?

Browser Support

How to Use CSS Nesting

Caveats and Considerations

Conclusion

JIRA vs. Plane: A Comprehensive Comparison for the Developer Community

1. Introduction to the Contenders

2. Licensing: Open Source vs. Proprietary

3. Features at a Glance

4. Community and Support

5. Who Should Choose What?

6. SEO Perspective

Conclusion

Bun 1.0: The Next Big Thing in JavaScript Runtime?

Introduction

A Closer Look at Bun

Features to Discuss

Bun vs. Node.js vs. Deno: Weigh In!

Points for Community Feedback

Let's Get the Conversation Started!

iPhone 15: A Developer's Critical Examination

Display: Bright but Is It Revolutionary?

Camera: Improved, but at What Cost?

Performance: The A16 Bionic Chip

Connectivity: The USB-C Dilemma

A Closer Look at Potential Concerns

Conclusion

Apple's Non-Standard Approach to WebApps: A Step Back from PWA Standardization

Progressive Web Apps and Standardization

Manifest.json

Service Workers

Apple's Non-Standard Approach

Conclusion

Expecto Strong Passwords: Enchant Your Online Security with a JavaScript Password Bookmarklet

"Let me wait-for-it and call you back", said wait-for-it.js

What does it offer?

How does it work?

cstayyab / wait-for-it.js

A JavaScript Library that allows you to execute function when a certain element gets added to the document

2. Overriding the `renderLine` Method