DEV Community: Haroon Ahmad

🚀 Meet Covry — Your New AI Cover Letter Sidekick

Haroon Ahmad — Sun, 01 Jun 2025 09:45:28 +0000

Hey folks! 👋

I just launched Covry, a smart, time-saving tool that helps you generate tailored cover letters in seconds — without the stress.

Whether you're applying on Upwork, LinkedIn, or a job board, Covry makes it easy to stand out with letters that sound like you.

✅ Quick & personalized.
✅ Edit Directly.
✅ Personalized for Shopify, Wordpress, Custom Website etc...
✅ Built for real-world jobs.
✅ No templates. Just results.

🔗 Try Covry Now

Would love your thoughts & feedback!

🧨 Builder.ai’s Fall: A Cautionary Tale for Startups

Haroon Ahmad — Mon, 26 May 2025 07:15:41 +0000

I’m deeply saddened to share that Builder.ai – once a $1.3 billion unicorn backed by Microsoft and other investors – has filed for insolvency in the UK.

Builder.ai (formerly Engineer.ai), founded in 2016, promised to let anyone build custom apps “as easy as ordering pizza” using AI. Over the years, it raised ~$450–500M from big-name backers and promised rapid growth. But in May 2025, the company abruptly ran out of cash, entering bankruptcy proceedings – leaving employees and the tech community stunned.

📅 Timeline of Key Events

2016: Founded by Sachin Dev Duggal as Engineer.ai, offering AI-powered no-code app development
2019: WSJ reports their “AI” was mostly human developers; firm rebrands to Builder.ai
2021–2022: Claims 300% YoY growth; raises Series B & C
May 2023: Raises $250M Series D from QIA, Microsoft joins as investor; valuation hits ~$1.3B
Oct 2024: Takes $50M debt facility from Viola Credit based on inflated forecasts
Early 2025: Revenue restated from $220M → $55M; CEO Duggal steps down
Mar 2025: Emergency $75M raised; 270 layoffs
May 2025: Lenders seize $37M of cash. Builder.ai enters UK insolvency

💣 Why It Collapsed

1. Massively Overstated Revenues

Builder.ai’s internal audit slashed its 2023–2024 sales projections by 75%:

2024 forecast: $220M → $55M
2023 revenue: $180M → $45M

Some insiders claimed previous figures were inflated by 20–300%.

2. Sudden Cash Seizure

Lenders seized $37M out of $42M cash from Builder.ai’s accounts, citing covenant breaches. This left:

~$5M in cash (much locked overseas)
No ability to pay staff or vendors

“Effectively shut down our ability to operate.” – CEO Manpreet Ratia

3. High Burn, Big Debts

Despite raising $500M, cash burned fast:

Owed $85M to AWS, $30M to Microsoft
Only $7M left by early 2025

4. Leadership Instability

Duggal exits in Feb 2025
Replaced by Manpreet Ratia (ex-Jungle Ventures)
Investigations raised concerns of “potentially bogus” sales and shady resellers

🔧 The Business Model

Builder.ai offered a no-code/AI app builder, letting users spec out apps that were assembled by AI + human engineers.

Promised fast, scalable, AI-driven software dev
Reality: heavily reliant on human devs, despite AI claims
Once had 1,000+ employees and clients across media, retail, and sports

💸 Funding & Investors

Round	Year	Lead Investors	Notes
Seed–Series C	2016–2022	Lakestar, Jungle Ventures, Insight, WndrCo	~$195M raised
Series D	2023	Qatar Investment Authority, Microsoft	$250M round, valuation ~$1.3–1.5B
Debt Facility	2024	Viola Credit	$50M loan (later triggered collapse)
Emergency Raise	2025	Existing investors	$75M in Mar 2025 to fix finances

📣 Company & Industry Reactions

🔹 Builder.ai Statement

“Despite the tireless efforts of our team… the business has been unable to recover from historic challenges and past decisions.”

– Company LinkedIn Post

🔹 CEO Manpreet Ratia

“Lenders swept $40M from our accounts… shutting down our ability to operate.”

“We’re working with administrators to protect customers, employees, and any remaining value.”

🔹 Analysts

Phil Brunkard (Info-Tech): AI startups are hitting a “realism check” post-hype
Carrie Osman: A case of “FOMO investing” chasing flashy AI narratives without substance

🧠 Lessons for Startups

1. Be Realistic & Transparent

Don’t overinflate forecasts
Unrealistic growth projections undermine trust

2. Sustainability Over Speed

Growth is great, but runway and cash flow are vital
Builder.ai burned fast and owed massive cloud bills

3. Hype ≠ Product

No-code/AI is promising, but needs solid execution
Don’t build a story that outpaces your capabilities

4. Take Care of People

Employees faced sudden job losses with little warning
Transparency and support during collapse matter

5. There May Still Be Value

Some tech and talent may be acquired
Duggal may even attempt to buy back parts of the company

💬 Final Thoughts

This is a painful reminder that even unicorns can fall – and quickly.

Builder.ai’s story is one of ambition, hype, missteps, and hard lessons. It shows us that AI buzzwords and big funding don’t replace business fundamentals. Let’s learn from this and support the people affected.

The no-code/AI space still holds promise – but it must be built on trust, transparency, and real value.

Sources: Bloomberg, TechCrunch, WSJ, LinkedIn posts from Builder.ai leadership.

Code CSS Directly Inside the Browser (Not Using Inspect Elements) 🔥 🔥

Haroon Ahmad — Wed, 17 Jul 2024 12:02:56 +0000

Copy the code and pase it in your HTML and enjoy live coding :)

<style contenteditable="true" style="display:block; white-space: pre">
body {
background: blue
}
</style>

5 most useful JavaScript Utilities!

Haroon Ahmad — Wed, 17 Jul 2024 11:09:19 +0000

Hi, I'm Haroon, a Senior Full Stack Developer. Today, I'll share some incredibly useful JavaScript functions that you can use in almost every project

1. Tracks the visibility of an element within the viewport

This utility uses the Intersection Observer API to track the visibility of an element within the viewport. It calls a callback function with a boolean value indicating whether the element is visible or not.

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. Reactive viewport breakpoints

This utility allows you to define breakpoints and get notified when the viewport width crosses these breakpoints. It calls a callback function with the current breakpoint value.

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. Reactive Clipboard API

This utility listens to copy events and reads the copied text from the clipboard, calling a callback function with the copied text.

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. Reactive Screen Orientation API

This utility listens to changes in screen orientation and calls a callback function with the current orientation type.

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. Reactive state to show whether the mouse leaves the page

This utility tracks when the mouse leaves or enters the page and calls a callback function with a boolean value indicating whether the mouse has left the page.

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

Each of these utilities leverages event listeners and modern APIs to provide reactive behavior in your JavaScript applications.

Thank you for taking the time to explore these powerful JavaScript utilities with me. I hope you find them as useful and exciting as I do. Feel free to experiment with these functions in your projects and see how they can enhance your development process. If you have any questions or want to share your own tips, please write down in comments. Happy coding!

Unraveling the Magic Behind React 18: A Comprehensive Guide🚀

Haroon Ahmad — Mon, 10 Apr 2023 06:26:37 +0000

React 18 is the latest version of the popular JavaScript library for building user interfaces. It comes with several new features and improvements that aim to make the development process faster and more efficient. In this article, we'll take a look at how React 18 works behind the scenes and what makes it different from its predecessors.

Suspense

One of the major new features in React 18 is Suspense, which allows you to defer rendering of a component until some data is loaded. This can be particularly useful for components that rely on external data sources or APIs, where it may take some time to retrieve the necessary data.

With Suspense, you can tell React to wait for the data to arrive before rendering the component. This makes it possible to show a loading indicator or a fallback UI while the data is being loaded. Once the data is available, React will render the component with the updated data.

Here's an example of how Suspense works:

import { Suspense } from 'react';
import { fetchData } from './api';

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent data={fetchData()} />
      </Suspense>
    </div>
  );
}

In this example, we use the Suspense component to defer rendering of MyComponent until the data is available. If the data takes some time to load, the fallback prop will be displayed instead.

Concurrent Rendering

Another major new feature in React 18 is Concurrent Rendering, which aims to improve the performance of React applications by allowing multiple components to be updated simultaneously. In previous versions of React, updates to components were done one at a time, which could lead to slow rendering times for complex applications.

With Concurrent Rendering, React can work on updating multiple components at the same time, making the process much faster and more efficient. This can be particularly useful for large and complex applications where there are many components that need to be updated frequently.

Here's an example of how Concurrent Rendering works:

import { unstable_createRoot as createRoot } from 'react-dom';

const root = createRoot(document.getElementById('root'));

function App() {
  return (
    <div>
      <MyComponent />
      <MyOtherComponent />
    </div>
  );
}

root.render(<App />);

In this example, we use the unstable_createRoot function to create a root for our React application. This enables Concurrent Rendering, which allows multiple components to be updated simultaneously.

Automatic Batching

In previous versions of React, updates to components were batched together manually by the developer. This involved wrapping the updates in a batch function to ensure that they were processed together, rather than triggering a re-render for each update.

In React 18, this process is now automatic, which means that updates are automatically batched together by React. This can lead to significant performance improvements, particularly for applications with a large number of updates.

Here's an example of how Automatic Batching works:

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

In this example, we use the useState hook to update the count state. We call setCount three times in quick succession, but React automatically batches the updates together, so the component is only re-rendered once with the updated count value.

Server Components

Another exciting new feature in React 18 is Server Components, which allows for more efficient rendering of components on the server-side. With Server Components, you can render components on the server without having to render the entire application every time.

This can be particularly useful for applications with a large number of components, where rendering the entire application on the server can be slow and inefficient. With Server Components, you can render only the components that are necessary, which can greatly improve performance.

Here's an example of how Server Components works:

import { ssrComponent } from 'react-ssr';

function MyServerComponent(props) {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
}

export default ssrComponent(MyServerComponent);

In this example, we use the ssrComponent function to create a Server Component. This component can be rendered on the server without having to render the entire application every time.

Conclusion

React 18 introduces several new features and improvements that make it an even more powerful tool for building user interfaces. With Suspense, Concurrent Rendering, Automatic Batching, and Server Components, you can build applications that are faster and more efficient than ever before.

By understanding how these features work behind the scenes, you can take advantage of them to build better React applications. Whether you're building a small application or a large, complex one, React 18 has the tools you need to succeed.

JS Unique Tricks for Intermediators

Haroon Ahmad — Sun, 09 Apr 2023 15:03:26 +0000

Javascript is a versatile language that allows developers to create powerful and interactive web applications. In this article, we will explore some unique tricks that can be used to enhance the functionality of Javascript.

Trick 1: Using the Ternary Operator for Conditional Statements

The ternary operator is a shorthand way to write conditional statements in Javascript. It is often used to replace if-else statements and can make your code more concise and easier to read.

Here's an example:

// Without ternary operator
if (a > b) {
  result = "a is greater than b";
} else {
  result = "b is greater than a";
}

// With ternary operator
result = a > b ? "a is greater than b" : "b is greater than a";

In this example, we use the ternary operator to check whether a is greater than b and assign the appropriate string to the result variable.

Trick 2: Using Object Destructuring to Assign Variables

Object destructuring is a technique that allows you to extract values from objects and assign them to variables. This can be a useful way to simplify your code and make it more readable.

Here's an example:


const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

// Without object destructuring
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;

// With object destructuring
const { firstName, lastName, age } = person;

In this example, we use object destructuring to extract the firstName, lastName, and age properties from the person object and assign them to variables of the same name.

Trick 3: Using the Spread Operator to Combine Arrays

The spread operator is a powerful tool in Javascript that allows you to expand arrays and objects. It can be used to combine arrays in a concise and readable way.

Here's an example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Without spread operator
const arr3 = arr1.concat(arr2);

// With spread operator
const arr3 = [...arr1, ...arr2];

In this example, we use the spread operator to combine the arr1 and arr2 arrays into a new array arr3. This is much more concise than using the concat method.

Trick 4: Using Arrow Functions for Concise Functions

Arrow functions are a shorthand way to write functions in Javascript. They can make your code more concise and easier to read.

Here's an example:


// Without arrow function
function add(a, b) {
  return a + b;
}

// With arrow function
const add = (a, b) => a + b;

In this example, we use an arrow function to define the add function. This is much more concise than using the function keyword.

Trick 5: Using Template Literals for Dynamic Strings

Template literals are a powerful feature in Javascript that allows you to create dynamic strings. They can be used to insert variables and expressions into strings.

Here's an example:

const name = "John";
const age = 30;

// Without template literals
const message = "My name is " + name + " and I am " + age + " years old.";

// With template literalz
const message = `My name is ${name} and I am ${age} years old.`;

In this example, we use template literals to create a dynamic string that includes

the name and age variables. This is much more concise and easier to read than using string concatenation.

Trick 6: Using the Nullish Coalescing Operator for Default Values

The nullish coalescing operator is a relatively new feature in Javascript that can be used to provide default values for variables that may be null or undefined.

Here's an example:

const foo = null;
const bar = foo ?? "default value";

console.log(bar); // "default value"

In this example, we use the nullish coalescing operator to assign the value of foo to bar. If foo is null or undefined, the default value of "default value" is used instead.

Trick 7: Using Promises for Asynchronous Code

Promises are a powerful tool in Javascript that allow you to write asynchronous code in a synchronous style. They can be used to make your code more readable and easier to maintain.

Here's an example:


function fetchData() {
  return new Promise((resolve, reject) => {
    // Perform asynchronous operation
    const data = getDataFromServer();

    if (data) {
      resolve(data);
    } else {
      reject(new Error("Unable to fetch data"));
    }
  });
}

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

In this example, we use a promise to fetch data from a server. The fetchData function returns a promise that resolves with the data if the operation is successful or rejects with an error if it fails.

Conclusion

Javascript is a powerful language with many unique features that can be used to enhance the functionality of your code. By using these tricks, you can make your code more concise, readable, and easier to maintain.

Let me know in comments if you know any more :)

💡 50+ JavaScript Project ideas!

Haroon Ahmad — Thu, 26 May 2022 04:42:16 +0000

In this article, I’ve collected 50+ of them, so you can have an easier job choosing your next challenge.

① Modal open & close

② Random Hex Color Generator

③ Random Number Generator

④ Counter Number App

⑤ Border Radius Controller

⑥ Box Shadow Controller

⑦ Image Filter (when we click on the button)

⑧ Border Width Slider

⑨ Background changer using HTML Color Picker

①⓪ Image Position Slider (X and Y Directions)

①① Click To Download Something

①② Background Choosing With Images or Gradients

①③ Auto Year Update In The Footer Section

①④ Date CountDown

①⑤ Time CountDown

①⑥ Sticky NavBar

①⑦ Smooth Scrolling

①⑧ Responsive NavBar(Hamburger Button)

①⑨ Random Password Generator

②⓪ Body Mass Index Calculator

②① Notes App

②② To-Do App

②③ Calculator App

②④ Digital Clock

②⑤ Form Validation

②⑥ Password Hide And Show

②⑦ Password Strength Checker

②⑧ Currency Converter

②⑨ Dark & Light Mode Toggle

③⓪ Alert & Notification

③① Website Preloader Implementation

③② Character CountDown

③③ Temperature Calculator

③④ Age Calculator(Years/Months/Day)

③⑤ Music Player App

③⑥ Number Guessing Game

③⑦ Length Converter App(KM, M, CM, etc.)

③⑧ Auto Image Change Of The Background After A Defined Time.

③⑨ Contact Form

④⓪ Text To Speech

④① Search Something

④② Music Search

④③ Find The Location Of A User

④④ Click To Copy

④⑤ Internet Connection Checker

④⑥ Quiz App

④⑦ Weather App

④⑧ Accordion Open & Close

④⑨ Slider Or Carousel

⑤⓪ Scroll Bottom To Top

⑤① Random Joke Generator

⑤② Ludo Dice Number Generator

⑤③ Alarm App

⑤④ Cards Expand & Collapse

⑤⑤ Blurry Loading

⑤⑥ Toast Notification

⑤⑦ Hidden Search Widget

⑤⑧ Page Progress

⑤⑨ Find Keyboard Keys Name

That's all for now, we will meet in the next post😍

Basics to Master topics in javascript 🔥🔥everyone must know

Haroon Ahmad — Mon, 23 May 2022 17:03:49 +0000

⚡ Important Basic Topics ⚡

👉 Syntax
👉 Variables
👉 If else statements
👉 Operators
👉 Loops
👉 Functions
👉 Events
👉 Cookies
👉 Keywords
👉 Dialogue Boxes

⚡ Javascript Advanced Topics ⚡

👉 Error Handling
👉 Validations
👉 Animations
👉 Multimedia
👉 Debugging
👉 Closure
👉 Scope
👉 IIFEs
👉 Arrow Functions
👉 Async Programming

⚡ JAVASCRIPT OBJECTS ⚡

👉 Numbers
👉 Boolean
👉 Strings
👉 Arrays
👉 Date
👉 Math
👉 RegExp
👉 HTML Dom

⭐ Additional ⭐

⚡ Some famous resources from where you can learn javascript ⚡

👉 freeCodeCamp
👉 Udemy
👉 Scrimba
👉 CodeMentor
👉 Sololearn
👉 W3Schools
👉 Codecademy
👉 GitHub

Let me know any other resources you know :)

Best 7 Platforms to Level Up Your Frontend Skills 🚀

Haroon Ahmad — Fri, 20 May 2022 06:04:12 +0000

In this article, I am sharing best site and apps which are beginner-friendly. This will improve your speed of front-end development to a whole new Level.

inspired and images from @Amit_T18 from twitter

CSS Battles

CSS Battle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

https://cssbattle.dev/

JavaScript 30

It's a 30-day vanilla JS coding challenge. During these 30 days (more or less — you can binge the tutorials Netflix style to take it as slow as you like because you'll get an instant and free access to all the videos) you'll build 30 different apps using fun and easy video tutorials

https://javascript30.com/

Code Well

Improve your HTML and CSS skills by practicing on real design templates. With Codewell, you can browse high quality Figma templates that you can use to sharpen your HTML and CSS skills.

https://www.codewell.cc/

Frontend Mentor

Frontend Mentor is a platform where you can solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

https:// www.frontendmentor.io/

Frontend Practice

With this, you get a list of websites that look nice to clone and increase your experience and ideas. Take your frontend skills to the next level by recreating real websites from real companies.
The perfect type of practice for developers of all skill levels.

https:// www.frontendpractice.com/

Codewars

Codewars is an educational community for computer programming. On the platform, software developers train on programming challenges known as kata. These discrete programming exercises train a range of skills in a variety of programming languages, and are completed within an online integrated development environment.

https:// www.codewars.com/

Daily UI

Daily UI is a series of daily Design Challenges. Inspiration and Surprise Rewards! Get Started. 100% FREE.

https:// www.dailyui.co/

Summary

Hope you find these sites and apps helpful for your new design at font-end.

If you find this article helpful, then let me know via your comments below.

The Ultimate List of 7 Perfect Vue 3 UI Libraries for every project

Haroon Ahmad — Sat, 19 Feb 2022 07:23:22 +0000

Vue.js is the JavaScript framework of choice for countless front-end developers because it’s easy to learn and use. Components are at the core of the Vue framework — they help you go from idea to a functioning UI much faster.

Vue is a lightweight, TypeScript-based UI component framework. It has a large community and is a great choice if you want to achieve Custom Design. Its extensive built-in directives are designed for best-in-class Typography, as well as excellent performance. It also offers extensive support for first-class TypeScript, which means that you can customize and translate the components in any language you want.

In this collection, you can find the best Vue UI component libraries that provide building blocks for productive user interface development with the Vue.js framework.

7 - Vant UI

Vant UI offers more than 65 lightweight, reusable components. Vant’s components are known for being adapted for mobile use, and for their ability to be fully customizable. Vant is a strong competitor to the Ionic framework, offering rare components like password inputs, countdowns, pull-to-refresh, notifications, and more.

After browsing through Vant’s component catalog, it is clear they focus on smaller devices but stay flexible enough to be extended to web apps. It is worth mentioning that these components are all tree-shakable, and as such, they can be imported individually to your application.

6 - Naive UI

Naive UI was modestly announced to the world on Twitter, then retweeted by Vue’s creator, which brought a lot of traffic to this new component library. Now, Naive UI has a well-deserved 4.7k stars on GitHub within less than three months of existence.

It ships more than 70 extremely well-crafted components that can seamlessly fit into almost any kind of Vue 3 app. Naive’s components are performant, extremely customizable, and have first-class TypeScript support to offer a great development experience.

5 - Ant Design Vue

Another popular library which has the same design ethics as Element UI is the Ant Design Vue. It has great administrative templating styles and components. This library was originally created by a group of developers and designers from Alibaba. Therefore, it’s a great library if one wants to target e-commerce platform development in short time. However, just like Element UI, it was mostly targeted for Chinese developers and therefore most of the original documentations are in Chinese. Although there are translated versions available, some fonts and links are still in Chinese which couldn’t be exactly translated to English.

4 - Vuestic UI

Vuestic is known for making one of the most beautiful, open source admin panels for Vue. They excel in writing maintainable Vue code and crafting slick components and interfaces.

The team has recently announced Vuestic UI, their Vue 3 UI framework, containing all of the components used in the popular Vuestic Admin UI and much more. Vuestic emphasizes its out-of-the-box support for keyboard navigation, a feature prized in the frontend community due to the UX it provides.

Vuestic provides more than 50 components with unique features and extensive configurability. Responsive by design, these components fit on nearly every screen. Vuestic ships with seamless translation support and keyboard accessibility throughout the framework.

3 - Vuetify

An unofficial library that works with Vue’s server-side rendering is Vuetify. It helps in creating clean, semantic, reusable UI components and makes the process of developing an interesting event.

One thing that differentiates Vuetify from others is the availability of ready-made scaffolding for code in the form of pre-made Vue CLI.

Although vuetify 3 is in alpha stage but coming soon.

2 - Quasar

Quasar is a power-packed framework that has over 81 components. If you are planning to develop a highly robust and responsive web and mobile application using Vue.js then, you should use quasar.

It is an extensive library on the list that does not have less than 19K downloads weekly. If a developer plans to integrate this, things will move more swiftly in the development process.

You can build all in one application using one framewrok.

1 - PrimeVue

PrimeVue is a great example of a framework that allows you to build complex, modern, and highly dynamic Vue applications. It has a wide range of components, from tables and paginators to well-designed graph-based organization charts, that you can use to create interactive Vue applications.

You can build user interfaces for enterprise software with this framework, too, as its components have been made for designing complex software applications. This also explains why the PrimeVue component library is trusted by Fortune 500 companies, such as Airbus, Ford, Intel, and others.

Bonus

AgnosticUI

One stylesheet…all the frameworks! UI components that work in React, Vue 3, and Svelte!

As you see this is the tagline from author and I really impressed that we can even use this library not only vue 3 but for other js frameworks and with pure js too. Super Cool! if you are starting a project go a head and try this lib.

Here are some highlights

💥 Easily build design systems that works in React, Vue 3, Angular, and Svelte!

🙌 Semantic and accessible HTML

💪 Unprocessed decoupled CSS

⚡ One stylesheet per component propagates to all framework
implementations

🖌️ Synchronized theming via CSS custom properties

Built with 💛 by Rob Levin

Conclusion

I would Personally prefer Quasar if you have plans for mobile apps and web app both and also server side rendering and PWA. Quasar can do all of this with same app with just very small configuiration changes.

But if you want a web app then go for PrimeVue it's more robust and maintained actively and has huge components library. Although if your app is small or medium then use Vuetify or vuestic UI because bundle size will me much smaller.

Sorry i forget to mention Tailwind so if you wanna design yourself then without any doubt go for Tailwind But be consistent in design :)

Let me know in comments if you know any other awesome UI library!

5 Free Perfect Headless CMS for JS Developers

Haroon Ahmad — Wed, 16 Feb 2022 05:02:13 +0000

Why headless CMS?

Let us look at some of the benefits of headless CMS:

Flexibility: transitional CMS is very limiting and can be frustrating. Using a headless CMS will allow you to design your front end. Moreover, it comes with a well-defined API, thus, allocating more time to creating content rather than managing it.
Compatible: You will able to publish the content to any smart device while the backend can be controlled from one device.
Secured: As the Content publishing environment isn’t accessible from the database, using this will prevent malware attacks.
Scalable: since the front end and back end are separated, there is no separate time needed for maintenance. This allows you to customize your website anytime without having to compromise the performance.
Control: It does not have any rules and gives the developer complete control. The developer will be able to integrate with any codebase and use any preferred language of their choice.

Here is small explanation by: Kontent by Kentico.

Now that we know what a headless CMS is, let us look at some of the headless CMS available in the market.

5- Ghost CMS

Ghost is a powerful app for new-media creators to publish, share, and grow a business around their content. It comes with modern tools to build a website, publish content, send newsletters & offer paid subscriptions to members.

4- Keystone Js

KeystoneJS is a generic content management framework, meaning that it can be used for developing a variety of web applications using Javascript. It is especially suitable for developing large-scale applications such as portals, forums, content management systems (CMS), e-commerce projects and RESTful Web services because of its modular architecture and clean separation of various functionality.

3- Netlify CMS

Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:

Fast, web-based UI: With rich-text editing, real-time preview, and drag-and-drop media uploads.
Platform agnostic: Works with most static site generators.
Easy installation: Add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN).
Modern authentication: Using GitHub, GitLab, or Bitbucket and JSON web tokens.
Flexible content types: Specify an unlimited number of content types with custom fields.
Fully extensible: Create custom-styled previews, UI widgets, and editor plugins.

2- Strapi Js

Strapi is an opensource CMS intended to be transparent and striving to be a perfect balance between a CMS, framework, and an automation tool to speed-up back-end development and management.

Multi-databases support, SQLite, MySQL, Postgres are supported, you just have to pick one of your choice
GraphQL or RESTful: Consume the API from any client (React, Vue, Angular), mobile apps or even IoT, using REST or GraphQL.
100% Javascript One language fits all. Use JavaScript from front to back.
Internationalization: Create multilingual websites or apps. Localize content by translating the text and adapting the messaging & structure of the page to each version.
Flexible content management: Build any type of category, section, format or flow to adapt to your needs.
SEO optimized: Easily manage your SEO metadata with a repeatable field and use our Media Library to add captions, notes, and custom filenames to optimize the SEO of media assets.

1- Directus Js

Directus is an open-source CMS, that is excellent for projects that require customized databases.

Extremely simple to manage your content with an interface that requires no training.
It stays up-to-date by pulling whatever is required from the database. It is as comfortable as entering credentials.
It is fully decomposed and extensible. Directus adds the feature of uploading and managing files;
databases do not typically handle files.
Writing comments or a note at certain times is useful. Directus comment features prove to be very functional.
All activity within directus is tracked, and rollbacks are possible. Hence, you never lose data.
Strong Accountability

Conclusion

I personally Prefer Directus although i used all of them personally. Directus is much simpler to extend and has lots of features that other free cms's missing like Accountability and reverting to prev stage. But we can do that with other cms too though will take more time to build these.

However since strapi v4 and Keystone 6 arrives recently that are great too and now much more stable and efficient. So it's really hard to suggest only one solution it's really upto you to test them out personally and choose based on your experience :)

P.S: if you know any other great CMS that is free please mention in comment

7 VS Code Extensions that JS dev Should Use

Haroon Ahmad — Tue, 15 Feb 2022 12:46:20 +0000

Hi, Folks I know we do not want to read long blog posts like me. So I plan to make this post short.

In this I share 7 most useful Extensions while Coding with JS

Thunder Client

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design.

Snipped

Create fancy screenshots of your code without leaving the editor.

Turbo Console Log

This extension make debugging much easier by automating the operation of writing meaningful log message.

Regex Previewer

Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.

Import Cost

Display import/require package size in the editor

Quokka.js

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

ES7+ React/Redux/React-Native snippets

JavaScript is everywhere, and ES7, React, Redux & GraphQL Snippets cover almost everything you need to get started with modern app development efficiently. This plugin extension makes a great alternative to any other JavaScript-based code snippets that you might already be using.

DEV Community: Haroon Ahmad

🚀 Meet Covry — Your New AI Cover Letter Sidekick

🧨 Builder.ai’s Fall: A Cautionary Tale for Startups

📅 Timeline of Key Events

💣 Why It Collapsed

1. Massively Overstated Revenues

2. Sudden Cash Seizure

3. High Burn, Big Debts

4. Leadership Instability

🔧 The Business Model

💸 Funding & Investors

📣 Company & Industry Reactions

🔹 Builder.ai Statement

🔹 CEO Manpreet Ratia

🔹 Analysts

🧠 Lessons for Startups

1. Be Realistic & Transparent

2. Sustainability Over Speed

3. Hype ≠ Product

4. Take Care of People

5. There May Still Be Value

💬 Final Thoughts

Code CSS Directly Inside the Browser (Not Using Inspect Elements) 🔥 🔥

Copy the code and pase it in your HTML and enjoy live coding :)

5 most useful JavaScript Utilities!

1. Tracks the visibility of an element within the viewport

2. Reactive viewport breakpoints

3. Reactive Clipboard API

4. Reactive Screen Orientation API

5. Reactive state to show whether the mouse leaves the page

Unraveling the Magic Behind React 18: A Comprehensive Guide🚀

Suspense

Concurrent Rendering

Automatic Batching

Server Components

Conclusion

JS Unique Tricks for Intermediators

Trick 1: Using the Ternary Operator for Conditional Statements

Trick 2: Using Object Destructuring to Assign Variables

Trick 3: Using the Spread Operator to Combine Arrays

Trick 4: Using Arrow Functions for Concise Functions

Trick 5: Using Template Literals for Dynamic Strings

Trick 6: Using the Nullish Coalescing Operator for Default Values

Trick 7: Using Promises for Asynchronous Code

Conclusion

💡 50+ JavaScript Project ideas!

That's all for now, we will meet in the next post😍

Basics to Master topics in javascript 🔥🔥everyone must know

⚡ Important Basic Topics ⚡

⚡ Javascript Advanced Topics ⚡

⚡ JAVASCRIPT OBJECTS ⚡

⚡ Some famous resources from where you can learn javascript ⚡

⚡ Some famous youtube Channels to learn web develoopment ⚡

Let me know any other resources you know :)

Best 7 Platforms to Level Up Your Frontend Skills 🚀

CSS Battles

JavaScript 30

Code Well

Frontend Mentor

Frontend Practice

Codewars

Daily UI

Summary

The Ultimate List of 7 Perfect Vue 3 UI Libraries for every project

Bonus

Here are some highlights

Conclusion

5 Free Perfect Headless CMS for JS Developers

Why headless CMS?

5- Ghost CMS

4- Keystone Js

3- Netlify CMS

2- Strapi Js

1- Directus Js

Conclusion

7 VS Code Extensions that JS dev Should Use

In this I share 7 most useful Extensions while Coding with JS

Let me know if you know some more awesome extensions in comments :)