Forem: Marina Eremina

Tag Trends in Tech Articles: From Beginner Guides to System Design

Marina Eremina — Wed, 18 Mar 2026 13:22:34 +0000

Insights from 1 million DEV articles (2022–2026).

Tags don’t just label articles — they reveal where developer attention is shifting. They show which topics are gaining momentum, which are fading, and how technologies evolve over time.

In my previous analysis of 1 million DEV articles, tags already highlighted major trends — from the rise of AI to the return of tutorials.

In this article, I continue exploring the story that tags tell about developer interests and core web technologies. Do these trends reflect what’s happening in the broader ecosystem? 🙂

Developers Are Going Deeper

The first clear pattern: “serious” topics are steadily growing. Performance, automation, security, architecture and system design all show consistent upward trends.

Here’s how it looks as a share of published articles:

And expressed as total article count, the trend is confirmed:

The conversation is moving from “how to code” to “how to build scalable, production-ready systems.”

It’s not just new technologies — it’s a shift in mindset. Developers are caring less about syntax and more about structure, scale and reliability.

The Beginner Topics Are Shrinking

While advanced topics are growing, beginner-focused content is declining. beginners tag is steadily decreasing, dropping from roughly 14% to 5% of total article share.

This doesn’t necessarily mean there are fewer beginners. Instead, it suggests that the overall conversation is shifting: the focus is no longer just on getting started, but on building scalable, production-ready systems.

Backend Is Catching Up

Another interesting trend appears when we look at the main web development domains — frontend, backend and fullstack.

For most of the analyzed period, frontend content dominated on DEV, followed by backend, with fullstack consistently third.

However, backend articles showed steady growth, and by the end of 2025 backend nearly caught up with frontend in total article count.

What can be behind this shift? Backend work is deeply tied to system design, automation and security — all reflecting the “serious topics” we saw rising earlier.

Meanwhile, the frontend ecosystem has matured. With established tools and patterns, there’s less need for exploratory or introductory content than before. Whatever the reason, the data suggests that backend is having its moment.

Interestingly, fullstack remains consistently lower - despite being common in job titles. Most likely, developers may still work fullstack, but tend to write about specific layers (frontend or backend).

This trend reinforces a broader pattern seen across the dataset: the conversation is shifting from building interfaces to designing and scaling systems.

The Languages That Power Web Development: Stable or Shifting?

If you had to guess which language dominates developer discussions, you’d probably say JavaScript. And you’d be right — JavaScript remains the most-discussed language on DEV, with stable dominance over time.

But here’s something interesting: TypeScript sits at roughly the same level as CSS and HTML — nowhere near JavaScript.

Why is TypeScript under-tagged? Its adoption in real projects is massive, but on DEV the javascript tag still carries the conversation. Writers may either skip the typescript tag or treat it as “JavaScript plus” rather than a separate topic.

CSS and HTML have a smaller share, but stable — fundamentals never fade.

Backend technologies tell a similar story of winners and steady performers.

Python stands out, with growth accelerating in 2024-2025, likely driven by AI. Building LLM apps increasingly means writing Python.

Java holds steady, not growing fast, not declining. The mid 2025 spike probably reflects Java 21 adoption and its 30th anniversary.

Go shows slow but consistent growth - steady, reliable, worth watching.

PHP, SQL, Ruby remain stable - loved but not dominant. SQL, in particular, is a quiet constant: every developer uses it, but almost no one writes about it 🙂

One particularly interesting moment: Go overtakes PHP around the end of 2025 - a symbolic shift, as a modern systems language surpasses one of the original web pillars.

Conclusion

It’s amazing what stories tags can tell on DEV — revealing trends, focus shifts and how developers are moving from beginner guides to building scalable, production-ready systems 🙂

Part one: I Analyzed 1 Million dev.to Articles (2022–2026): Here’s What the Data Reveals

I Analyzed 1 Million dev.to Articles (2022–2026): Here’s What the Data Reveals

Marina Eremina — Mon, 09 Mar 2026 14:03:15 +0000

From the rise of AI topics to publishing patterns and writing habits.

From December 2022 to January 2026, developers published over one million articles on dev.to.

Developer communities often reflect where the industry is heading.

Some trends you can almost feel intuitively. Tutorials seem less common. AI is everywhere. Some topics fade while others suddenly explode.

But intuition only goes so far — it’s much better to look at the data at scale.

So I analyzed 1 million dev.to articles published between 2022 and 2026 to understand:

what developers write about
when they publish
how topics evolve over time

Some findings confirmed what I expected. Others genuinely surprised me 😊

Here are some of the most interesting insights from 1,000,000+ articles.

The AI Takeover: 3% → 23% in Three Years

Let's start with the elephant in the room 😊

I'm sure everyone would bet that AI-related articles have grown. We see it, we feel it intuitively. But what do the actual numbers say?

Back in December 2022, ChatGPT had just launched. The ai tag appeared in roughly 3% of dev.to articles. At the time, it was still a relatively niche topic, mostly discussed by ML engineers and researchers.

Fast forward to late 2025 - early 2026.

18% to 23% of all articles now mention AI in some form.

In other words: roughly one in five dev.to articles now touches AI.

Here's what that explosion looks like as a share of total articles that has the ai tag:

These aren’t just theoretical discussions anymore. Many posts focus on practical implementation — building with LLMs, RAG pipelines, AI agents and developer tooling.

This isn't just a tag trend — it's a fundamental shift in what developers are building and learning.

The Tag Timeline: `ai` Surpasses `webdev` and `programming`

Here are the 25 most-used tags across all three years, ranked by the percentage of articles that include them:

At first glance, this looks exactly as you might expect. webdev and programming dominate the platform, with ai sitting in third place. But averages hide the real story.

Because the tag rankings weren’t static.

By mid 2025, the ai tag had surpassed both webdev and programming, climbing from #3 to #1. Here’s what that shift looks like over time:

Another intriguing observation: after nearly two years of steady decline, the tutorial tag turned upward around mid 2025.

The data show that tutorials are making a comeback. This is one of the patterns that surprised me most and the one I'm most curious about.

Publishing Volume & Engagement Paradox

One of the first patterns visible in the dataset is the consistent growth in publishing activity on the platform.

The trend is clear: article volume has been steadily increasing, reinforcing dev.to’s role as a major hub for developers sharing knowledge.

But the data also revealed an interesting puzzle.

When I compared the number of articles published per month with total reactions and comments, something unexpected appeared. While the number of articles keeps rising, overall engagement trends slightly downward.

In simple terms: more people are writing. But each individual article is receiving less attention.

So what’s happening? One likely explanation is attention saturation. The number of articles published each month has grown significantly since 2023, but developer attention is not unlimited.

In fact, just in January 2026 dev.to had so many articles published that it would take 38 days of nonstop reading to catch up. Who would accept such a challenge? 😅

Most Articles Take 1–6 Minutes to Read

Another interesting pattern appears when looking at estimated reading time.

Nearly 90% of all articles take 6 minutes or less to read.

Most writers aren't aiming for essays. They're sharing a quick tip, a snippet of code, a thought that fit in one sitting.

The platform runs on short-form energy. Which makes sense - it's how most of us consume content these days anyway.

When Developers Publish: Is Tuesday–Wednesday Really the Peak?

You’ve probably heard it many times — Tuesday and Wednesday are the busiest days for publishing on developer platforms. I wondered would the data confirm this pattern?

It turned out, the differences between Monday through Friday are actually minimal — only about 2% separates the highest and lowest weekday.

Weekends, however, show a clear dip, with Saturday and Sunday about 5% lower than weekdays.

I used to wonder if Tuesday was secretly the best day to publish. Now I'm thinking: just publish when you're ready. The day matters less than the content 🙂

Behind the Numbers: How the Data Was Collected and Processed

All of these insights come from a data pipeline built on Azure.

Extract: Python scraper running in Azure Functions pulled data from the dev.to REST API
Load: Raw JSON landed in Azure Blob Storage
Transform: Databricks with PySpark cleaned, deduplicated and shaped the data (Bronze → Silver → Gold layers)
Analyze: Gold tables fed into Power BI for visualization

All orchestrated with Azure Data Factory.

Data Source: Forem REST API
Total articles: 1,000,000
Time span: 3 years
Cloud cost: Surprisingly reasonable (Databricks was the biggest line item)

Big thanks to the dev.to team for creating such a welcoming space where developers can share, learn and grow — and to everyone who writes here: you make this community vibrant and inspiring. It’s amazing to see how the platform brings people together and sparks creativity across the community ❤️

Exploring Coffee Quality Data with GitHub Copilot CLI

Marina Eremina — Sun, 15 Feb 2026 22:31:07 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built a small Python project that analyzes coffee data from the Coffee Quality Institute (CQI) dataset. The CQI dataset contains detailed scoring for coffee samples from different countries of origin, based on attributes like aroma, flavor, acidity, sweetness, and more.

I wanted to answer simple but fun questions like:

Which countries produce the highest-rated coffee?
Does country of origin affect sweetness or acidity?
What actually separates a top-scoring coffee from an average one?

It’s basically a data-driven way to understand what makes great coffee great. And maybe where to find it 🙂

Demo

Here’s what the data revealed:

Dataset Overview

Top 5 Countries by Total Coffee Score

The highest-ranked countries based on the combined scores of all coffee attributes, showing which origins consistently produce exceptional coffee.

Coffee Profile Comparison by Total Score

Radar chart showing the highest, mid-range, and lowest scoring coffees.

Sweetness by Country

A quick comparison highlighting which countries produce the sweetest and least sweet coffees.

Check out the full analysis here

My Experience with GitHub Copilot CLI

GitHub Copilot CLI genuinely changed how I approached this project. Basically, Copilot was helping with every step: project setup, building, debugging and refactoring.

Project Setup in Seconds

With a single prompt, Copilot scaffolded the entire project:

Create a Python project for data analysis with pandas. 
1. Create project directory called 'data-analysis'. 
2. Set up a Python virtual environment inside it. 
3. Install pandas, flake8 and black in the virtual environment. 
4. Configure flake8 and black for code quality.
5. Create README.md. 
6. Add a .gitignore file.

Fast Data Exploration

With a simple prompt, I could quickly test hypotheses or look for correlations, for example:

"Analyse correlation between origin country and coffee sweetness. Use python, pandas, matplotlib to visualise the data."

Copilot generated:

A clean script
Statistical calculations
A ready-to-run visualization

Time saved: ~30-45 minutes of writing boilerplate, debugging and tweaking plots. I just reviewed the output and refined the logic. Huge time saver.

What Made It Different

Unlike other AI coding tools I've tried, Copilot CLI:

Remembers context across commands in the same session (like excluding countries with too few samples)
Understands project structure in the same session (it knew where to put scripts, how to organize outputs, etc.)
Suggests meaningful commit messages after changes and runs them when needed

For data analysis projects where you're constantly exploring patterns and experimenting with different visualizations, this workflow is excellent 😊

After seeing these coffee scores, I’m really curious — which country’s coffee is your favorite? ☕

How to Import SVG Files in a Next.js Project (2025)

Marina Eremina — Tue, 16 Dec 2025 15:33:22 +0000

Working with SVGs in Next.js has multiple approaches depending on your use case. Let’s go through the most common and recommended methods.

1️⃣ Inline SVG

Use case: good for small SVGs that are not reused anywhere in your app.

export default function InlineSvgExample() {
  return (
    <button className="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded">
      {/* Inline SVG icon */}
      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 0a8 8 0 1 0 8 8A8 8 0 0 0 8 0zm0 15A7 7 0 1 1 15 8 7 7 0 0 1 8 15z" />
      </svg>
      Add
    </button>
  );
}

Pros:

No extra configuration needed.

Cons:

Poor maintainability if reused in multiple places.
Harder to manage styles dynamically.

2️⃣ Place SVG in the `/public` Folder and Display with `Image` Component

Best choice when: you don’t need to set svg style except for width and height.

import Image from "next/image";

<Image src="/github.svg" width={24} height={24} alt="Github" />

Pros:

Simple and straightforward.
Leverages Next.js built-in Image optimization.

Cons:

Limited styling options.
Cannot dynamically change colors or other attributes via React props.

3️⃣ Import SVG as a React Component

Best choice when: you want to style the SVG with CSS or Tailwind, or to change colors dynamically.

Setup:

1. Place your SVG file in /src/assets or /assets.

2. Install @svgr/webpack if you haven’t already:

npm install -D @svgr/webpack

3. Adjust next.config.ts to configure loader:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactCompiler: true,
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

For more loader configurations, check: Configuring webpack loaders.

Then import svg as a React Component:

import GithubIcon from "@/assets/icons/GithubIcon.svg";

<GithubIcon className="w-6 h-6 text-gray-500" />

Pros:

Full styling control with Tailwind or CSS.
Dynamic props for size, colors, className, etc.
Perfect for reusable icons/components.

Cons:

Slightly more setup.

✅ Conclusion:

Use inline SVG for one-off small icons.
Use /public + Image for static SVGs with no dynamic styling.
Use SVG as React component for reusable, styled, and dynamic icons.

How to Install Cursor on Ubuntu (2025)

Marina Eremina — Tue, 23 Sep 2025 14:51:31 +0000

Cursor is an AI-powered editor that makes coding easier and faster. Installing it on Ubuntu is as simple as downloading a .deb file and running one command.

1. Go to official cursor download page. Download the latest .deb file (recommended for Ubuntu/Debian).

2. Open a terminal and navigate into the directory where you saved the .deb (e.g. Downloads):

cd Downloads

3. Install Cursor.
Change cursor.deb to the actual filename, for example cursor_1.6.35_amd64.deb.

sudo apt install ./cursor.deb

After installation you should see Cursor in your app launcher 🎉.

Update

APT Repository Added Automatically (and How to Verify & Update)

When you install Cursor on Ubuntu from the official .deb file, installer actually adds the official Cursor APT repository in the background. This allows apt to see Cursor updates just like any other package on ubuntu.

1. How to check if the repo was added

After installing Cursor, you can quickly check if the APT repository is registered:

sudo apt update | grep cursor

If the repository was added, you’ll see a line like this:

Hit:10 https://downloads.cursor.com/aptrepo stable InRelease

This confirms that apt recognizes Cursor repo and can fetch updates from it.

2. Updating Cursor

Once the repository is active, updating Cursor is easy:

sudo apt update
sudo apt install --only-upgrade cursor

The first command refreshes your package list.
The second upgrades Cursor if a newer version is available.

How to Import SVG Files to React + Vite Project (2025)

Marina Eremina — Wed, 20 Aug 2025 12:27:37 +0000

When working with React projects in Vite, you may want to import SVGs as React components instead of plain image URLs. The easiest way to achieve this is by using the vite-plugin-svgr plugin.

1. Install the plugin

// npm
npm install --save-dev vite-plugin-svgr

2. Add the plugin to your Vite config (`vite.config.ts`)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgrPlugin(),
  ],
});

3. Import SVG files as React components

Add ?react to the end of your SVG import path:

import LogoSvg from './assets/logo.svg?react';

const Button: React.FC = () => {
  return (
    <button>
      <LogoSvg />
      Click Me
    </button>
  );
};

export default Button;

Now LogoSvg behaves like a regular React component.

4. Adjust for TypeScript

If you are using TypeScript, the line with svg import might show an error like:

Cannot find module './assets/logo.svg?react' or its corresponding type declarations.ts(2307)

To fix this error, in the vite-env.d.ts file add the following line /// <reference types="vite-plugin-svgr/client" />:

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

This ensures TypeScript recognizes .svg?react imports correctly.

SVG as Component vs. SVG as Image URL

Key Advantages of Importing SVGs as React Components vs. file URL import:

SVGs are part of the DOM, so you can style them with CSS or Tailwind.
You can pass props dinamicaly, like className, width, or fill to customize them.
No extra HTTP requests, since the SVG is inlined.

How to Add a Map with a Location to a Webpage Using OpenLayers and React

Marina Eremina — Mon, 14 Jul 2025 05:35:28 +0000

In this article we explore how to add a simple map with a location marker to a webpage using free and open-source tools. No API key will be required for this map.

We'll be using:

OpenLayers - a JavaScript library that helps you display maps and add features like markers.
OpenStreetMap (OSM) - an open source project providing free maps.

Together, OpenLayers and OpenStreetMap offer a fully open-source alternative to commercial mapping platforms like Google Maps.

✅ This example is built with React, but the approach can be easily adapted to work with other frontend frameworks such as Vue, Angular, or plain JavaScript.

Here is a link to a demo that shows how the working map appears on a webpage.

1. Create a New React Project (or Use an Existing One)

If you’d like to try adding the map to a webpage, the easiest way to get started is by using a Vite template:

npm create vite@latest ol-react-app -- --template react-ts

Alternatively, you can simply install the ol (OpenLayers) library in your existing React project and build from there.

2. Install OpenLayers

OpenLayers can be installed using npm:

npm install ol

If you prefer not to include the ol package in your bundle, you can load it via CDN in the index.html:

<script src="https://cdn.jsdelivr.net/npm/ol@v10.6.0/dist/ol.js"></script>

However, bundling it with your project is generally preferred for better control and performance.

3. Create the Map Component

Now we can initialize our map. In the src/Map.tsx we import a Map component from ol library and use it to create the map instance. The Map requires a few important parameters:

target - tells OpenLayers where to place the map. It should be the id or ref to an HTML element that will act as the map container.
view - sets the initial position of the map: where it’s centered and zoomed.
layers - the content that will be shown on the map.

We’ll use two layers:

OSMLayer - a basic map layer using OpenStreetMap tiles (which gives us a detailed world map).
vectorLayer - a layer that will display a marker for a specific location.

In this example let's center our map on London. To do that, we’ll need London’s coordinates as longitude and latitude which we can easily find online.

Let’s take a closer look at our vectorLayer to understand how it is created. We add this layer using the VectorLayer from ol library. This layer needs a source, which we provide using VectorSource. The source contains our London location, represented as a Point feature.

We also define a style for this layer using the Style. Here, we can pass an SVG icon, which we use as a marker for our London location on the map.

Lastly, our London coordinates are passed as the center in the view parameter of the Map, so the map is centered on London when it loads.

Here is how the whole set up looks like:


// src/Map.tsx

import React, { useEffect } from 'react';
import { Map, View, Feature } from 'ol';
import { Zoom } from 'ol/control';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import { Point } from 'ol/geom';
import { fromLonLat } from 'ol/proj.js';
import { Style, Icon } from 'ol/style.js';
import reactSvg from './assets/pin.svg?url'; // Import the SVG as a URL
import type { Coordinate } from 'ol/coordinate';

const MAP = 'map' as const;

// Longitude, Latitude for London
const coordinatesLondon: [number, number] = [-0.118092, 51.509865];

// Convert lon/lat coordinate to OpenLayers default coordinate system
const coordinates: Coordinate = fromLonLat(coordinatesLondon);

const feature: Feature<Point> = new Feature({
  geometry: new Point(coordinates),
});

// Layer for the location pin icon
const vectorLayer = new VectorLayer({
  source: new VectorSource({
    features: [feature],
  }),
  style: new Style({
    image: new Icon({
      src: reactSvg,
      anchor: [0.5, 1],
    }),
  }),
});

// The basic map layer with OpenStreetMap
const OSMLayer = new TileLayer({
  source: new OSM(),
});

const MapElement: React.FC = () => {
  useEffect(() => {
    // Initialize the map when the component mounts
    // to make sure the element with id 'map' is in the DOM
    const map = new Map({
      target: MAP, // id of the map container
      view: new View({
        center: coordinates,
        zoom: 12,
      }),
      // layers order matters for the vectorLayer to be on top
      layers: [OSMLayer, vectorLayer],
      controls: [new Zoom()],
    });

    return () => {
      // Cleanup the map when the component unmounts
      map.setTarget(undefined);
    };
  }, []);

  return (
    <div className="mapContainer">
      <div id={MAP}></div> {/* Map container */}
      <div className="attribution">
        © <a href="https://www.openstreetmap.org/copyright">
          OpenStreetMap
        </a> contributors
      </div>
    </div>
  );
};

Those are the key parts of the setup, now let’s take a quick look at map controls and attribution.

4. Custom Controls Styling

In OpenLayers, controls are UI elements that allow users to interact with the map, for example, zoom buttons or a fullscreen toggle. Controls are built-in and can be added or removed depending on what your map needs.

Controls are added to the map using the controls parameter when creating a new Map instance. In this example, we include only the default Zoom control and apply a custom style to it.

The zoom control uses the CSS class name ol-zoom, which we can target to customize its appearance.

.ol-zoom {
  position: absolute;
  bottom: 35px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

The zoom buttons are typically placed in the bottom-right corner of the map.

5. Attribution for the OSM Layer

The OSM layer is open source, but it requires attribution to OpenStreetMap contributors. The attribution text © OpenStreetMap contributors is usually included as a absolutely positioned element in the bottom-right corner of the map.

✅ Also, it is important to set a width on the map container, otherwise the map won’t be visible on the page.

Now simply include your Map component in the page layout.
And that’s it! 🎉

You can find the full setup in the GitHub repo:
👉 Check out the complete code on GitHub

How to Set Up ESLint and Prettier for React app in VSCode (2025)

Marina Eremina — Tue, 08 Jul 2025 06:03:51 +0000

This tutorial shows how to configure ESLint and Prettier in a React + TypeScript project using Vite and VSCode.

ESLint helps to catch bugs and enforce consistent code quality.
Prettier ensures consistent code formatting by automatically applying style rules.

1. Install ESLint and Prettier extensions in VSCode

✅ Ensure both extensions are enabled after installation.

2. Create a New React + TypeScript Project with Vite

Use Vite’s react-ts template to start a new project:

npm create vite@latest react-lint-setup -- --template react-ts
cd react-lint-setup
npm install

The react-ts Vite template includes ESLint pre-installed and pre-configured by default. You’ll see an eslint.config.js file in the project root directory with a minimal setup.

You can open src/App.tsx file and make a small change to test ESLint, for example, declare a new variable let testVariable = 'test'. Now if you run npm run lint in the console, there should be an error like this:

8:7  error  'testVariable' is never reassigned. Use 'const' instead  prefer-const
8:7  error  'testVariable' is assigned a value but never used        @typescript-eslint/no-unused-vars

VSCode should also highlight the error automatically if the ESLint extension is working correctly.

3. Install Prettier and configure it to work with ESLint

Next, we’ll integrate Prettier into the ESLint workflow to handle code formatting. This will ensure that there are no conflicts between ESLint and Prettier rules.

Run the following commands in the project directory:

// Install Prettier
npm install --save-dev --save-exact prettier

// Install plugins to run Prettier inside ESLint
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

Update eslint.config.js file:

import js from '@eslint/js';
import globals from 'globals';;
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
// add Prettier support
import prettierConfig from 'eslint-plugin-prettier/recommended'; 
import { globalIgnores } from 'eslint/config';

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
      prettierConfig, // extend ESLint with Prettier config
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    rules: { // add Prettier rules
      'prettier/prettier': [
        'error', 
        { 
          singleQuote: true,
          printWidth: 100,
          tabWidth: 2,
          semi: true,
          trailingComma: 'es5',
          bracketSpacing: true,
          endOfLine: 'lf'
        }],
    },
  },
]);

Now if you run npm run lint in the console, the output should include Prettier and ESLint errors.

✅ Tip: In case the editor still does not highlight the errors, first try to close and open again the VSCode.

✅ Here is the link to the project with the working setup.

Forem: Marina Eremina

Tag Trends in Tech Articles: From Beginner Guides to System Design

Developers Are Going Deeper

The Beginner Topics Are Shrinking

Backend Is Catching Up

The Languages That Power Web Development: Stable or Shifting?

I Analyzed 1 Million dev.to Articles (2022–2026): Here’s What the Data Reveals

The AI Takeover: 3% → 23% in Three Years

The Tag Timeline: ai Surpasses webdev and programming

Publishing Volume & Engagement Paradox

Most Articles Take 1–6 Minutes to Read

When Developers Publish: Is Tuesday–Wednesday Really the Peak?

Behind the Numbers: How the Data Was Collected and Processed

Exploring Coffee Quality Data with GitHub Copilot CLI

What I Built

Demo

My Experience with GitHub Copilot CLI

How to Import SVG Files in a Next.js Project (2025)

1️⃣ Inline SVG

2️⃣ Place SVG in the /public Folder and Display with Image Component

3️⃣ Import SVG as a React Component

How to Install Cursor on Ubuntu (2025)

How to Import SVG Files to React + Vite Project (2025)

1. Install the plugin

2. Add the plugin to your Vite config (vite.config.ts)

3. Import SVG files as React components

4. Adjust for TypeScript

SVG as Component vs. SVG as Image URL

How to Add a Map with a Location to a Webpage Using OpenLayers and React

1. Create a New React Project (or Use an Existing One)

2. Install OpenLayers

3. Create the Map Component

4. Custom Controls Styling

5. Attribution for the OSM Layer

How to Set Up ESLint and Prettier for React app in VSCode (2025)

1. Install ESLint and Prettier extensions in VSCode

2. Create a New React + TypeScript Project with Vite

3. Install Prettier and configure it to work with ESLint

The Tag Timeline: `ai` Surpasses `webdev` and `programming`

2️⃣ Place SVG in the `/public` Folder and Display with `Image` Component

2. Add the plugin to your Vite config (`vite.config.ts`)