# Grayhat Blog Author: Asfand Yar

> Expanded public blog context for posts by Asfand Yar.

## Page

- [Asfand Yar Author](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/asfand)
- [Asfand Yar Author LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/asfand/llms.txt)
- [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt)
- [Root Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms-full.txt)
- [Author API](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/public/v1/authors/asfand)

## Author Details

- Name: Asfand Yar
- Location: Kotli, Azad Jammu and Kashmir
- Website: Not provided
- Post count in current snapshot: 2
- Bio: Software Engineer 1 at Grayhat

## Current Posts

- [Secure your ship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship) - In the fast-paced world of modern web development, where tools like Vercel, Checkly, Mixpanel, and Hotjar have revolutionized workflows, it's easy to focus on the efficiency gains these platforms bring while inadvertently neglecting a critical aspect—security. As development teams expand and diversify their skill sets, the boundaries of projects expand exponentially. With more contributors, integrations, and code to manage, the attack surface grows significantly, amplifying the potential risks.

- [CSS Clamp: A Paradigm Shift in Responsive Web Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/css-clamp-a-paradigm-shift-in-responsive-web-design) - In the ever-evolving world of web development, it's crucial to stay ahead of the curve. As developers, we continuously seek efficient solutions that simplify our workflows and enable us to create exceptional user experiences. CSS, with its vast array of properties and functionalities, has always posed a challenge for newcomers and seasoned professionals alike. However, the introduction of CSS clamp has revolutionized the landscape of responsive design. In this article, we will explore the remark

## Child Route Content

### [Secure your ship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship)

- Slug: `secure-your-ship`
- Published: 2023-10-25T15:36:00.000+05:00
- Updated: 2024-05-10T13:49:03.000+05:00
- Reading time: 3 min
- Tags: Supply Chain Security, NPM, Open Source, Open Source Community, JavaScript, Typescript, Vercel, Innovation, Tech
- Authors: Asfand Yar
- Visibility: public

*In the fast-paced world of modern web development, where tools like Vercel, Checkly, Mixpanel, and Hotjar have revolutionized workflows, it's easy to focus on the efficiency gains these platforms bring while inadvertently neglecting a critical aspect—security. As development teams expand and diversify their skill sets, the boundaries of projects expand exponentially. With more contributors, integrations, and code to manage, the attack surface grows significantly, amplifying the potential risks.

Real-world incidents serve as stark reminders of the impact of security vulnerabilities. The Equifax breach in 2017 exposed sensitive data from 147 million individuals due to unpatched software, and the Colonial Pipeline ransomware attack in 2021 disrupted critical fuel supplies. Security lapses have even derailed major mergers and acquisitions, as seen in the delayed acquisition of Yahoo by Verizon following data breach revelations. The SolarWinds exploit underscored the risks associated with unlicensed software, affecting numerous networks.

### AI & Blockchain bring more security concerns than before.

Supply chain challenges wield a profound impact on the growth trajectory of today's AI and blockchain startups. In the AI realm, dependencies on open-source libraries and frameworks make startups vulnerable to security breaches and compromised model outputs, disrupting development timelines and compromising data integrity. Likewise, in the blockchain space, vulnerabilities in smart contract frameworks and consensus mechanisms due to supply chain issues can undermine the trustworthiness of distributed ledgers, leading to compliance issues and investor concerns.

These vulnerabilities often arise from various sources such as unpatched software, misconfigurations, and human error. The complexity introduced by open-source components and third-party integrations necessitates thorough vetting and monitoring to counter potential threats.

### Enter SecOps.

Integrating Supply Chain Security and Security Operations (SecOps) into development cycles becomes imperative for proactively addressing vulnerabilities. However, current security solutions often suffer from alert fatigue, overwhelming users and diluting the impact of critical notifications.

Enter listen.dev, a new player in the dynamic landscape of web development challenges, offering a fresh perspective on fortifying security measures seamlessly.

### Make Security Actionable.

If you've used dependabot before, you'll immediately know what the term "alert fatigue" means even if you've never read about it before. Basically, when you receive a flood of notifications and alerts but don't have an action item for them, and they keep piling up, you eventually start ignoring the notifications.

That's deadly for security; you start ignoring once, and it goes permanently under the rug **until it's too late.**

We've had some insider conversations with listen.dev, and according to their claims, security is no longer an afterthought. It's gotta be part of the SDLC (Software Development Life Cycle).

What does that mean for devs? Just like how Vercel plugs themselves right into the everyday DX (Developer Experience) of a developer with their GitHub integration, listen.dev also has a GitHub integration which gives you 1) Actionable insights, 2) A "Security Review" mechanism (Yes, it works exactly as it sounds like. It's a security approval for each PR which has security vulnerabilities).

On the side, Listen features the standard:

**Real-time Security Scans:** By embedding real-time security scans into each pull request, listen.dev facilitates early identification and resolution of vulnerabilities during code integration.

**DNS Profiling:** A standout feature, listen.dev's DNS profiling provides proactive alerts for potential malicious attacks, acting as a shield against looming threats.

**User-Friendly Interface:** listen.dev distinguishes itself by offering a user-friendly interface focusing highly on its DX (taking inspiration from Vercel), making security measures not only effective but also accessible.

**High Customization:** The platform's high level of customization caters to diverse user needs, ensuring improved security and ease of use with tailor-made solutions adaptable to specific requirements.

In the ever-evolving digital landscape, listen.dev emerges as a promising contender, offering robust security enhancements alongside a user-centric approach. Its suite of features designed for practical usability and adaptability signals a potential shift towards more secure and personalized web development practices.

The key is not just about adopting new tools but integrating security seamlessly into the development workflow. It's necessary now more than ever before to be proactive than reactive - a supply chain vulnerability or hack could mean life or death for a company in today's privacy-savvy world.

At Grayhat, we bring impossible to life, and challenge tech to its very extreme. A team of ragtag hackers, with a thirst for innovation, we don't shy from taking on early-stage design and development challenges which define the gray line which sits between the possible and impossible.

Interested in working with us? Drop us an email at sales@grayhat.com.pk

Author: Asfand Yar Aftab

### [CSS Clamp: A Paradigm Shift in Responsive Web Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/css-clamp-a-paradigm-shift-in-responsive-web-design)

- Slug: `css-clamp-a-paradigm-shift-in-responsive-web-design`
- Published: 2023-06-28T16:59:00.000+05:00
- Updated: 2024-05-10T13:48:22.000+05:00
- Reading time: 3 min
- Tags: CSS 3, Upskill, W3C, CSS
- Authors: Asfand Yar
- Visibility: public

*In the ever-evolving world of web development, it's crucial to stay ahead of the curve. As developers, we continuously seek efficient solutions that simplify our workflows and enable us to create exceptional user experiences. CSS, with its vast array of properties and functionalities, has always posed a challenge for newcomers and seasoned professionals alike. However, the introduction of CSS clamp has revolutionized the landscape of responsive design. In this article, we will explore the remarkable benefits and functionalities of CSS clamp, unveiling its potential to streamline our development processes and elevate our CSS skills effortlessly.

## **Introduction: Simplifying Responsive Design with CSS Clamp**

CSS clamp has become a game-changing solution for responsive design, offering versatility and ease of use that every developer should embrace. With its increasing browser support, it has the potential to be the next best thing after media queries, revolutionizing the way we create responsive layouts and typography.

## **The Magic of CSS Clamp: Fluid Containers and Responsive Typography**

So, what exactly does CSS clamp bring to the table? Imagine creating a container with a width value like **clamp(300px, 90vw, 1600px)**. Within this single declaration, a world of possibilities unfolds. The first value, **300px**, sets a minimum width for the container, ensuring it never shrinks beyond this limit. This prevents content from becoming cramped and unreadable on smaller screens, enhancing the overall user experience.

To introduce responsive magic to the container's width, the second value must be fluid. By leveraging viewport units, such as '**vw**' representing a percentage of the viewport width, the container's width dynamically adjusts according to the screen size. For instance, when using **clamp(300px, 90vw, 1600px),** the container will fluidly scale between occupying 90% of the viewport's width on larger screens and maintaining optimal readability on narrower screens like mobile devices. This eliminates the need for additional media queries or complex calculations, providing a seamless and responsive experience for users.

## **CSS Clamp in Action: Creating Dynamic Container Widths**

To ensure design consistency and prevent overly wide containers on large screens, the third value, **1600px**, sets an upper limit for the container's width. When the calculated width based on the viewport percentage exceeds this maximum value, the container's width is capped at **1600px**. This harmonious interplay between minimum, responsive, and maximum width values empowers developers to create designs that adapt gracefully across a myriad of screen sizes and resolutions.

## **Achieving Responsive Typography with CSS Clamp**

CSS clamp isn't limited to fluid containers; it also presents an effective solution for achieving responsive typography without the need for media queries. By applying clamp to heading sizes and body text, we can create fluid and scalable typography that adjusts seamlessly to different screen widths.

For instance, let's consider a heading element with the CSS declaration:** font-size: clamp(24px, 6vw, 48px)**. In this case, the heading font size dynamically scales based on the viewport width. On larger screens, it occupies 6% of the viewport width, resulting in visually appealing and well-proportioned headings. On narrower screens, the font size adjusts to maintain optimal legibility without requiring manual adjustments or additional media queries.

Similarly, we can apply CSS clamp to body text, allowing it to adapt fluidly to various screen sizes. For example, a CSS rule like **font-size: clamp(16px, 2vw, 20px)** ensures that the body text scales between **16px** if **2vw** is less than **16px**, and **20px** if **2vw** is greater than **20px**. Furthermore, if **2vw** is equal to any of the values **17px**, **18px**, or **19px**, the font size will adjust accordingly. This granular control over the typography guarantees optimal readability and enhances the overall user experience.

## **Streamlining Development: Eliminating Media Queries with CSS Clamp**

By leveraging CSS clamp for responsive typography, we can create harmonious and visually pleasing designs that automatically adjust to different screen widths. This approach eliminates the need for writing multiple media queries targeting specific breakpoints, streamlining our CSS code, and simplifying maintenance efforts. With the power of CSS clamp, we can achieve typography that not only adapts seamlessly but also provides a consistent and engaging experience across various devices.

## **Embracing CSS Clamp: Revolutionizing the Future of Responsive Design**

In conclusion, CSS clamp emerges as a powerful ally in the realm of responsive design. Its ability to create fluid containers and scale typography effortlessly without reliance on media queries opens up new possibilities for developers. By embracing CSS clamp, we can streamline our development workflows, enhance user experiences, and ensure consistent design across a multitude of devices and resolutions. As we strive to stay ahead in the ever-changing landscape of web development, CSS clamp proves to be an indispensable tool in our arsenal.

I've set up an example of CSS clamp in action... test it out and let us know in the comments if you have more ideas on how to use it!

CSS Clamp Article by Asfand Yar Aftab