Forem: Dejan Kostevski

Quick and easy Next.js boilerplate with TypeScript to jumpstart your project

Dejan Kostevski — Sun, 15 Mar 2026 11:00:00 +0000

When starting a new React project, I want to get working on the features as soon as possible. The last thing any developer wants to do is spend time configuring the tools. This is why I created this comprehensive Next.js TypeScript boilerplate that comes pre-configured with Styled Components for CSS-in-JS styling, ESLint and Prettier for code quality, and Jest for unit testing - everything you need for a production-ready React development environment.

What's Included in This Next.js Starter Template

When I started building this React boilerplate, I had specific requirements for a modern frontend development setup.

The foundation of this starter kit is a React framework with server-side rendering (SSR) capabilities. Next.js was the obvious choice for creating a high-performance SSR React application with an excellent developer experience.

For type safety and improved development experience, I integrated TypeScript into the Next.js setup. TypeScript provides powerful static typing that helps catch errors during development rather than at runtime, which is essential for any serious React project setup.

For styling, this boilerplate implements a modern CSS-in-JS approach. Styled Components provides a seamless integration with React components and enables dynamic styling based on props, theming support, and automatic vendor prefixing - all critical features for a robust frontend project template.

For test-driven development, I included Jest as the testing framework from day one. Having unit testing capabilities integrated into your Next.js development environment ensures you can build with confidence and maintain code quality throughout your project lifecycle.

To complete the React development tools setup, I configured ESLint and Prettier for code quality enforcement and consistent formatting. These tools are essential for any Next.js TypeScript project to maintain high code standards, especially in team environments.

Getting Started with This Next.js Boilerplate

I've published this complete Next.js setup in a GitHub repository here. The repo includes several pre-configured NPM scripts to streamline your development workflow. To set up your development environment, first install the dependencies:

npm i

As a standard in any JavaScript (and TypeScript) repo these days, you have:

npm run dev // runs development environment
npm run lint // runs the linter
npm run test // runs the tests

Beyond these basic commands, this Next.js TypeScript boilerplate includes several additional scripts to enhance your development workflow:

npm test:coverage // runs tests with coverage report
npm run build // creates production build
npm start // runs the production build
npm run start:prod // builds and starts in one command for CI/CD pipelines

These commands facilitate a complete development workflow from local development to testing and deployment, making this starter kit particularly suitable for both rapid prototyping and production-ready applications.

Future Enhancements for This React Starter Template

This Next.js development environment provides everything needed for a bare-bones project to start building features quickly. With this setup, you can have a new project up and running in about a minute (depending on your internet connection speed for the npm i command).

As I continue evolving this SSR React framework boilerplate, I plan to incorporate:

React Testing Library for more comprehensive component testing
Cypress for end-to-end (E2E) testing
Pre-configured state management solutions (Redux/Context API)
Enhanced accessibility features
Performance optimization templates

These additions will make this starter kit even more valuable for developers looking to build production-ready Next.js applications with TypeScript.

Conclusion: A Complete Next.js TypeScript Development Setup

This lightweight React boilerplate removes the hassle of tooling configuration while providing all essential features for modern web development. This Next.js starter template with TypeScript is designed specifically for developers who want to "install and start coding right away" without compromising on development best practices or build performance.

Key benefits of this boilerplate:

Development speed: Get past configuration and start building features immediately
Type safety: Built-in TypeScript for robust code quality
Modern styling: CSS-in-JS with Styled Components
Code quality: Pre-configured ESLint and Prettier
Testing ready: Jest setup for TDD approach
SSR capabilities: Next.js for improved performance and SEO

Frequently Asked Questions

What is included in this Next.js boilerplate?

This boilerplate includes Next.js with TypeScript, Styled Components for styling, ESLint and Prettier for code quality, and Jest for testing. It's a complete setup for modern React development with server-side rendering capabilities.

How long does it take to set up a new project with this template?

The setup takes about a minute, depending on your internet connection speed for installing dependencies with npm i. After that, you can immediately start coding your features.

Is this Next.js starter template suitable for production applications?

Yes, this boilerplate is designed for both quick prototyping and production-ready applications. It includes testing capabilities, linting, and optimized build processes suitable for real-world projects.

How does this compare to Create React App?

Unlike Create React App, this Next.js boilerplate provides server-side rendering capabilities, which improves performance and SEO. It also comes pre-configured with TypeScript, Styled Components, and testing tools in a cohesive package.

Can I use this for both personal and commercial projects?

Yes, the boilerplate is available on GitHub and can be used for both personal and commercial projects without restrictions.

What do you think? Would you add any other features to make this Next.js TypeScript boilerplate even better?

The Feynman Technique: Master Any Subject with This Proven Learning Method

Dejan Kostevski — Sun, 01 Mar 2026 12:00:00 +0000

I did not come up with the following ideas or definitions myself. It was always somewhere in between the lines of the blog posts I was reading. There is one specific thing I picked up over the years, and even put it as a tagline on this website. That is: "Explain things like I am five". Recently, I have found out that there is a name and a definition, hell, the whole technique for learning behind this simple saying. Let me introduce you to "The Feynman Technique" – perhaps the most effective learning method ever developed. This powerful learning strategy, used by Nobel Prize-winning physicist Richard Feynman, can dramatically improve how you learn and retain information.

The Feynman Technique

Richard Feynman was a very smart guy (source: Wikipedia):

Richard Phillips Feynman (May 11, 1918 – February 15, 1988) was an American theoretical physicist, known for his work in the path integral formulation of quantum mechanics, the theory of quantum electrodynamics, the physics of the superfluidity of supercooled liquid helium, as well as his work in particle physics for which he proposed the parton model. For contributions to the development of quantum electrodynamics, Feynman received the Nobel Prize in Physics in 1965 jointly with Julian Schwinger and Shin'ichirō Tomonaga.

But, most of all, I like that he is known as "The Great Explainer". He developed a whole technique for explaining complex physics in plain and simple language. Take any field, and you will notice that it is very hard to explain complex technical terms and ideas to people who have no idea or knowledge about that field. That is why I am writing today about "The Feynman Technique".

The Feynman Technique is a powerful learning framework designed to achieve deep, comprehensive understanding of any subject. Developed by physicist Richard Feynman (nicknamed "The Great Explainer"), this method revolutionizes how we learn by focusing on simplicity and clarity. Unlike traditional memorization-based learning, the Feynman method forces you to translate complex ideas into simple, accessible language – the ultimate test of whether you truly understand something.

The core principle behind this effective learning strategy is that true understanding enables simplification. When someone relies heavily on technical jargon and unnecessarily complex language, it often reveals a fundamental gap in their understanding. As Feynman himself demonstrated throughout his career, the ability to explain quantum physics to a complete novice is the hallmark of genuine mastery. This "explain like I'm five" approach isn't just about teaching others – it's about transforming how you learn.

The framework consists of four parts:

Identify and specify the topic you want to learn (not to teach, mind you)
Teach (preferably to a small child, that is where the ELI5 (Explain Like I'm Five) concept comes from)
Identify and fill in the knowledge gaps (this is where the deep learning happens 📖)
Organize, review and simplify (this is where the magic happens 🧙‍♂️)

1. Select and Define Your Learning Target

The first critical step in the Feynman learning method is choosing a specific concept or topic you want to master. Successful learning requires narrow focus rather than broad generalities. For instance, rather than attempting to "learn programming" (too broad), target specific concepts like "recursion in Python" or "factory design patterns in Java" (appropriately focused).

Practical Application:

Write down everything you currently know about your chosen topic
Clearly identify knowledge gaps and areas of uncertainty
Research the topic thoroughly, focusing on unclear areas
Break complex ideas into fundamental components
Document new insights using your own words, not copied terminology

The key differentiator of the Feynman approach is that you must process information through your own understanding rather than memorizing someone else's explanations. After completing your research, step back to see the complete picture – how does this concept connect to practical applications? What real-world examples demonstrate this principle? This comprehensive approach builds a foundation for the next crucial step.

2. Teach to Reveal Understanding Gaps

The second and most transformative step in the Feynman learning technique is teaching your subject to someone else – preferably someone without prior knowledge in that area. This is where the popular "Explain Like I'm Five" (ELI5) concept originates. Children make ideal audience members because they require genuine clarity and won't be satisfied with jargon or complexity that masks incomplete understanding.

Why Teaching Reveals Learning Gaps:

When forced to simplify, you expose areas where your understanding is weak
Children ask direct, fundamental questions adults might avoid
You can't rely on shared background knowledge or terminology
The need to create accessible analogies tests your conceptual grasp
Immediate feedback shows whether your explanation actually works

Remember: teaching in the Feynman method isn't about demonstrating what you know – it's about discovering what you don't know. During this process, eliminate all technical jargon, use concrete examples from everyday life, and create simple analogies that bridge the unfamiliar with the familiar. When you struggle to explain something simply, you've identified precisely where your understanding needs improvement.

3. Identify and Fill Knowledge Gaps Through Deep Learning

The third phase of the Feynman learning technique is where transformative understanding happens. After attempting to teach your subject, you'll have clear evidence of what you don't fully comprehend. This critical reflection stage requires honest self-assessment about where your explanation faltered.

Signs of Knowledge Gaps to Address:

Points where you resorted to jargon or technical terms
Areas that caused confusion in your listener
Concepts you struggled to translate into simple language
Places where you made unsupported assumptions
Topics that generated unexpected questions you couldn't answer

This reflection process isn't about criticizing your teaching ability – it's about diagnosing specific learning targets. Return to your study materials with new focus, diving deeply into precisely the areas where your understanding proved incomplete. Unlike your initial learning phase, this targeted deep learning is laser-focused on filling identified gaps.

The power of the Feynman method lies in this iterative cycle: attempt to explain, identify gaps, study those gaps specifically, then attempt to explain again. Each cycle brings you closer to genuine mastery of the subject matter. Don't rush this process – true understanding requires resolving every point of confusion until the entire concept becomes transparently clear.

4. Refine and Simplify for Ultimate Clarity

The final step in mastering the Feynman learning technique is where elegance emerges from complexity. In this crucial phase, you'll organize and refine your understanding until you can explain the concept with remarkable clarity and simplicity.

The Simplification Process:

Reorganize your notes into a logical narrative flow
Eliminate any remaining technical jargon or field-specific terminology
Create a simple story that captures the essential concept
Test your explanation with different audiences
Refine based on questions and confusion points
Continue simplifying until a complete novice can understand

The hallmark of true understanding isn't complexity but rather elegant simplicity. As Einstein famously said, "If you can't explain it simply, you don't understand it well enough." This final stage transforms your learning from fragmented knowledge into cohesive understanding.

Pro Tip: Develop multiple metaphors and explanations for the same concept. Different people connect with different analogies, and having multiple approaches demonstrates flexibility in your understanding. The ability to pivot between various simplified explanations shows you've truly internalized the core principles rather than memorized a single explanation.

Why the Feynman Technique Works: Key Benefits for Learners

Implementing the Feynman learning method transforms not just what you know, but how you learn. This powerful technique offers numerous advantages that traditional study methods simply can't match:

Key Benefits of the Feynman Technique:

Deeper Understanding: By forcing simplification, you process information more thoroughly
Better Retention: Teaching concepts embeds information more permanently than passive reading
Versatile Application: Works for any subject from physics to philosophy
Efficient Learning: Quickly identifies and targets specific knowledge gaps
Metacognitive Awareness: Helps you recognize when you don't understand something
Practical Focus: Emphasizes useful knowledge over mere memorization
Communication Skills: Improves your ability to explain complex ideas in any context

As mentioned in the about section of this website, this approach of "grasp the concept first, then go deeper" has been transformative for my own learning journey. I've found that every opportunity to teach others – whether formally or informally – becomes a valuable opportunity to deepen my own understanding. The Feynman Technique isn't just a study method; it's a mindset that transforms how you approach knowledge acquisition.

What about you? Have you tried using simplified explanations to test your understanding? How do you approach teaching as a learning tool?

Great Learning Resources for Programming, Frontend, and Web Development

Dejan Kostevski — Sun, 15 Feb 2026 08:00:00 +0000

Learning resources

Every now and then, I get a question from people: Where do I start learning programming? Which programming resources, coding tutorials, or web development courses should I use? Do you have a great learning resource for JavaScript, React, CSS, or TypeScript?

These questions come from junior developers and people just starting out with programming, frontend development, or web development in general. I remember quite well how lost I felt at the beginning of my journey. It wasn't structured. I had to find the best resources for learning to code myself. I had no mentor in the beginning, so there was a lot of trial and error to discover what works for me.

I want future generations of developers to avoid this confusion. That's why I created this curated list of the best learning resources for programming, frontend, and web development. I can wholeheartedly recommend all the resources in this repo. It's my attempt to group all the top places you can learn the skills I know — JavaScript, React, CSS, TypeScript, and more. Most of these are free, but there are also some excellent paid options for those who want to go deeper.

My list

The list contains pages with various different topics, like:

General
CSS
CleanCode
CodeEditor
TypeScript
JavaScript
NodeJs
React
OOP
Testing
GraphQL
Databases
Git
Linux

Each topic has its own set of recommended resources, tutorials, and guides. The grouping might not be perfect, but I am constantly adding to the list and will revise the structure as needed to keep it up to date with the latest and best developer resources.

This resource list is incredibly handy and has already proven its worth in many situations. Whenever someone asks how to get better at JavaScript, React, CSS, or any other web development skill, I can simply share a link to the list. It's super convenient, useful, and saves time for both beginners and experienced developers looking for high-quality programming resources.

Conclusion

With this post, I wanted to share what I've been working on for the past 10 months or so — a growing, curated collection of the best learning resources for programming, frontend development, and web development. This list will continue to expand over time as I discover new and valuable resources for JavaScript, React, CSS, TypeScript, and more. Hopefully, it can help some of you out there on your journey to becoming a better developer. 🤞

How to create canonical URLs in Gatsby?

Dejan Kostevski — Sun, 01 Feb 2026 08:30:00 +0000

In one of my previous posts I have described what a canonical URL is. Now, let me show you how to implement this in Gatsby.

Gatsby

First of all, what is Gatsby?

Gatsby is a React-based open-source framework for creating websites and apps.

Gatsby is a Static Site Generator tool based on React. It takes your React components and pre-renders them into (generates) HTML documents. It has its own way of dealing with page components, dynamic templates, as well as normal reusable components. There is a nice plugin ecosystem and a lively community. If you know React and you want to build fast websites this is a great tool.

After Gatsby renders your components into HTML pages you can serve them as a static website on any hosting you want.

React Helmet

What is React Helmet you might ask. React Helmet is a reusable React component which you can use to manage all of your <head> tags in your Gatsby project.

This reusable React component will manage all of your changes to the document head.
Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

Of course, it is available from the NPM registry. You can use it like this (taken from the official repo for the React Helmet linked above):

import React from 'react';
import { Helmet } from 'react-helmet';

class Application extends React.Component {
    render() {
        return (
            <div className="application">
                <Helmet>
                    <meta charSet="utf-8" />
                    <title>My Title</title>
                    <link rel="canonical" href="http://mysite.com/example" />
                </Helmet>
                ...
            </div>
        );
    }
}

Once Gatsby renders the HTML you will get this:

<head>
    <meta charset="utf-8" />
    <title>My Title</title>
    <link rel="canonical" href="http://mysite.com/example" />
</head>

To be able to use this, of course, you have to install some NPM packages:

npm install gatsby-plugin-react-helmet react-helmet

The full installation guide can be found here.

gatsby-plugin-react-helmet-canonical-urls

React Helmet is great, but it did not play well with another Gatsby plugin called gatsby-plugin-canonical-urls. When using these two combined and you want to override a canonical URL you end up with two canonical meta tags.

That is why the gatsby-plugin-react-helmet-canonical-urls plugin has been created. It is a Gatsby plugin which gives you the possibility to have default canonical meta tags and override them when needed using the React Helmet API.

This is how you use it:

First, install a couple of Gatsby plugins

npm install --save gatsby-plugin-react-helmet gatsby-plugin-react-helmet-canonical-urls

After that add this to your gatsby-config.js (it is a configuration file for Gatsby)

// In your gatsby-config.js
plugins: [
  `gatsby-plugin-react-helmet`,
  {
    resolve: `gatsby-plugin-react-helmet-canonical-urls`,
    options: {
      siteUrl: "https://www.example.com",
    },
  },
]

There are of course some other options you could set up, see the full list of those here.

And that's it. Now, you can use this in your website/application.

For static pages

But, how do you actually use this?

For static pages, you can use something like this:

// in about.jsx for example
export default ({ data, location }) => {
    return (
        <Layout>
            <Helmet>
                <title>`${data.site.siteMetadata.title} - About`</title>
                <link
                    rel="canonical"
                    href={`${data.site.siteMetadata.siteUrl}${location.pathname}`}
                />
            </Helmet>
            <h2>About me</h2>
        </Layout>
    );
};

As Gatsby is using GraphQL you can get that data object filled in while building your pages. Also, you can setup the site data in your gatsby-config.js, like this:

// gatsby-config.js

module.exports = {
    siteMetadata: {
        title: 'Kode Skills',
        siteUrl: 'https://kodeskills.com/',
    },
};

And then you can access this data in your pages through GraphQL query, like this:

export const query = graphql`
    {
        site {
            siteMetadata {
                title
                siteUrl
            }
        }
    }
`;

The location prop is passed to your pages by Gatsby, and you can access useful data with it. In our case, we are using it to access the pathname, so, basically everything in your URL after the domain name.

For this page it would be /how-to-create-canonical-urls-in-gatsby.

For dynamic templates

To use this technique for dynamic templates (blog post templates, tags or categories templates, etc...) where one component is reused for dynamic content you can use largely the same approach.

One thing to be aware of is, that you can use data from the frontmatter. This is basically just metadata in your MD files (if you are using those) which you can use to create dynamic canonical URLs.

So, you would have to set this up for your blog posts like this:

// how-to-create-canonical-urls-in-gatsby.md

slug: 'how-to-create-canonical-urls-in-gatsby'
title: 'How to create canonical URLs in Gatsby?'

---

Then in your GraphQL query for your blog post template:

export const query = graphql`
    query BlogPostQuery($slug: String!) {
        site {
            siteMetadata {
                siteUrl
            }
        }
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            frontmatter {
                slug
                title
            }
        }
    }
`;

And, finally in your component:

// in blog-post.jsx template
export default ({ data }) => {
    return (
        <Layout>
            <Helmet>
                <title>{data.markdownRemark.frontmatter.title}</title>
                <link
                    rel="canonical"
                    href={`${data.site.siteMetadata.siteUrl}${data.markdownRemark.frontmatter.slug}`}
                />
            </Helmet>
            ... the content of your blog post
        </Layout>
    );
};

SEO component

To be a bit more flexible and to be able to reuse components for both static and dynamic pages it is a great idea to create a reusable <Seo /> component. Something like this:

// Seo.jsx
export const Seo = ({ canonicalUrl, siteTitle, title }) => {
    return (
        <>
            <Helmet>
                <title>
                    {siteTitle} - {title}
                </title>
                <link rel="canonical" href={canonicalUrl} />
            </Helmet>
        </>
    );
};

And then you can use it in your templates like this:

// about.jsx - static page template
export default ({ data, location }) => {
    return (
        <Layout>
            <Seo
                canonicalUrl={`${data.site.siteMetadata.siteUrl}${location.pathname}`}
                siteTitle={data.site.siteMetadata.title}
                title="About"
            />
        </Layout>
    );
};

export const query = graphql`
    {
        site {
            siteMetadata {
                title
                siteUrl
            }
        }
    }
`;

Or like this in your blog post templates with dynamic data:

// blog-post.jsx
export default ({ data }) => {
    return (
        <Layout>
            <Seo
                canonicalUrl={`${data.site.siteMetadata.siteUrl}${data.markdownRemark.frontmatter.slug}`}
                siteTitle={data.site.siteMetadata.title}
                title={data.markdownRemark.frontmatter.title}
            />
        </Layout>
    );
};

export const query = graphql`
    query BlogPostQuery($slug: String!) {
        site {
            siteMetadata {
                title
                siteUrl
            }
        }
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            frontmatter {
                slug
                title
            }
        }
    }
`;

Conclusion

Setting up canonical URLs is one of the first things SEO related to my website. It is an important thing to have if you plan to do content syndication, i.e. publishing same content on sites like medium, or dev.to, etc.

I hope this article showed you how easy it is to set this up with a static site generator like Gatsby, which I am using for my website.

What is a canonical URL?

Dejan Kostevski — Thu, 15 Jan 2026 08:30:00 +0000

What does canonical even mean?

According to Wikipedia, it is a standard, a rule or primary source of authority. Basically, it means the source of truth.

“The adjective canonical is applied in many contexts to mean "according to the canon" – the standard, rule or primary source that is accepted as authoritative for the body of knowledge or literature in that context.”

What is it technically?

Canonical URLs are telling search engines that the page they are visiting is the original content (in the case of duplicate content). This can be done in two ways:

As an HTML <link> element put in the <head> of your webpage, like this:

<link rel="canonical" href="https://example.com" />

Of course, you need to change example.com to your own domain.

Or as an HTTP header, like this:

Link: <https://example.com>; rel="canonical"

Source

As you can see this is really not so complex. Most of the static site generators and content management systems nowadays have those features built in, or you can easily add those with plugins.

As a developer you should know what those tags (or headers) are used for, why they are useful and why you should care.

What is it used for?

As you can see from the above, canonical URLs are super simple to set up, but why should you care about them on your website?

If you are doing content syndication those can be super useful, at least when you are starting out. Content syndication means publishing your content on more than one domain (platform) at a time.

So, let's say that you are writing a post on your website, but you also want to publish it on other platforms, like medium.com, dev.to or hashnode.com. There is no way you can compete with these domains in terms of domain authority. This means that, to Google, they are more valid sources of content then your small and less visited website. However, you can leverage the reach that those platforms can give you and put your original post as a canonical URL on those platforms. This way you are telling Google (and other search engines) that the content is originally posted on your website. In this case Google will notice duplicate content, as you would actually publish the same content on various domains. But, the original source of content will always be your website, and therefore you would build up your domain authority.

Conclusion

I hope I demystified the Canonical URLs a bit for you. For a long time I did not learn this properly. Now it is clear to me what they are and what they are used for. Next year I will eat my words and will start with the content syndication to try and leverage the reach that those external platforms can give me. Let’s see how it goes.

How Cleaning Up Projects Eliminates Technical Debt and Improves Developer Experience

Dejan Kostevski — Mon, 05 Jan 2026 08:30:00 +0000

Intro

As software developers, we often inherit projects with a lot of technical debt, legacy code, and poor developer experience. Sometimes, the sheer number of problems in a codebase makes it easy to accept the status quo and ignore the issues, but this only leads to more software maintenance headaches and lower code quality over time. For me, working in a messy project goes against everything I believe in as a developer and makes it harder to deliver value.

This is a story of how I tackled a legacy project, cleaned up the codebase, reduced technical debt, and improved both the CI/CD pipeline and the overall developer experience. Here’s what I learned about project management and code quality along the way.

Legacy hell

Recently, I worked on a legacy project that had been around for years, with multiple teams and developers leaving their mark on the codebase. The result was a patchwork of different coding styles, outdated documentation, and a lack of clear standards. Deploying even to the DEV environment took 30 minutes, and tools like SonarQube for code analysis were impossible to integrate. Linting rules conflicted, code formatting was inconsistent, and the Webpack configuration was overly complex. All of this made the project hard to maintain, difficult to update, and a prime example of technical debt and poor software maintenance.

On top of these issues, the project suffered from legacy code bloat—about 90% of the code wasn’t even used for the current use cases. This added unnecessary cognitive complexity and made every change riskier. After forking the repository for my team, a code cleanup and refactoring effort became inevitable to restore code quality and improve developer experience.

The cleanup

I won’t go into the details of every change, but the main focus was deleting unused folders and files to reduce technical debt and improve codebase health. Here are the before/after numbers and the approach I used to ensure the application still worked after major code removal.

My cleanup strategy was iterative: first, I deleted large groups of obviously unused folders. Next, I removed individual files that were no longer needed. The third phase (which I skipped due to time constraints) would have targeted unused helper functions and dead code within the remaining files. This approach was inspired by Peter Kofler (aka Code Cop), whose advice on code quality and refactoring was invaluable. I also relied on simple manual UI tests and NPM scripts after each deletion to confirm nothing was broken, followed by CI/CD pipeline runs to catch any issues between local and DEV environments.

Lessons learned

Don’t be afraid to break things. When a project is weighed down by technical debt and legacy code, it’s almost impossible to make things worse. Sometimes, bold refactoring is the only way to restore code quality and maintainability.

Just do it. I knew a cleanup was needed soon after joining the project. Once I understood the codebase, it was clear that simplifying and removing technical debt would benefit everyone.

Remove code iteratively (folders, files, methods). Don’t waste time making tiny changes and hoping nothing breaks. Remove large sections of unused code, then test and verify. This approach is more effective for improving codebase health and developer experience.

Deploy often. Frequent deployments and CI/CD pipeline runs after each cleanup step helped me catch issues early. Manual UI tests and NPM scripts were essential for validating changes. Thank goodness for Git and version control!

Fix the broken windows. If you let small problems linger, they multiply. Whether it’s a broken window or a hole in your boat, ignoring code quality issues leads to bigger problems. Don’t let your standards slip — address technical debt and maintain clean code practices.

Removing unused code didn’t solve every problem in this legacy project, but it made a huge difference. It also paved the way for further improvements, like updating dependencies, adding TypeScript, and using modern JavaScript features. My hope is that this story encourages you to tackle technical debt and prioritize code quality in your own projects. Developers should always advocate for maintainable, high-quality code, even when deadlines and priorities compete for attention.

Conclusion

I’m not one to brag, but cutting CI/CD pipeline times in half just by removing unnecessary code and technical debt felt like a major win. No other performance optimizations were needed — just a focus on code quality and project cleanup.

One big takeaway from this experience is how to quickly evaluate the health of a legacy codebase. Look at your CI/CD times, identify what’s outside your control, and spot the bottlenecks. Check for TODO comments, lint warnings, and console errors in both Node and the browser. Don’t forget to review outdated dependencies and see how old they are. These metrics are key indicators of technical debt and software maintenance needs.

Have you ever had to clean up a legacy project or tackle technical debt? What was your approach? I’d love to hear your experiences — feel free to reach out and share your story.

What is a RSS feed

Dejan Kostevski — Mon, 15 Dec 2025 08:30:00 +0000

RSS is that term you hear and see a lot but never really bother to understand what it does. It is not a surprise, as it is a really easy concept to understand. Most people, like me, just briefly read about it on Wikipedia and do not go really deep into it. This article is aimed at people who want to learn more about it and see how they can utilize this simple technology.

This article was originally published on Kode Skills Blog. Head over there if you like this post and want to read others like it.

What is a RSS feed?

Here is the definition from Wikipedia:

"RSS (RDF Site Summary or Really Simple Syndication) is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format."

In simple terms, a RSS feed is just an XML document formatted according to the RSS standard. It can be served from any website, just like an HTML page or any other resource (images, PDFs, MP4, etc.).

But what is it used for? Why is RSS still useful for blogs, news, and content creators? At its core, RSS is a broadcasting mechanism for your website’s content. It’s most commonly used for blogs, but you’ll also find RSS feeds for podcasts, news headlines, product updates, and even torrent trackers. An RSS feed can include metadata about your content — like author, publishing date, short descriptions (excerpts), or even the full article content. This is how you broadcast your latest content to the world, or at least to the people who are listening (subscribed) to your RSS feed.

Think of an RSS feed as your own mini transmitter antenna for your website’s content. The RSS logo even symbolizes this idea. 📡

How does it look like?

So I mentioned XML files and you might be wondering: what is XML? Or maybe you’re thinking, “Isn’t that a dead technology?” While XML is over 20 years old, it’s still the backbone of RSS and many other web feed formats. XML is a markup language, similar to HTML, but with stricter syntax. It’s designed to be both machine-readable and human-readable, making it perfect for structured data like RSS feeds.

If you visited the Wikipedia article above you will see this example:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
    <channel>
        <title>RSS Title</title>
        <description>This is an example of an RSS feed</description>
        <link>http://www.example.com/main.html</link>
        <copyright>2020 Example.com All rights reserved</copyright>
        <lastBuildDate>Mon, 06 Sep 2010 00:01:00 +0000 </lastBuildDate>
        <pubDate>Sun, 06 Sep 2009 16:20:00 +0000</pubDate>
        <ttl>1800</ttl>
        <item>
            <title>Example entry</title>
            <description>Here is some text containing an interesting description.</description>
            <link>http://www.example.com/blog/post/1</link>
            <guid isPermaLink="false">7bd204c6-1655-4c27-aeee-53f933c5395f</guid>
            <pubDate>Sun, 06 Sep 2009 16:20:00 +0000</pubDate>
        </item>
    </channel>
</rss>

That’s how a basic RSS feed looks. There’s not much else to it! Of course, you’ll want to generate an RSS feed that includes your own site’s metadata and content. Most modern blogging platforms and content management systems (like WordPress, Gatsby, or static site generators) can automatically generate RSS feeds for you.

If you’re interested in the technical details or want to dive deeper into the RSS standard, check out the Wikipedia article I mentioned earlier.

RSS readers

As mentioned earlier, RSS is a web feed technology that lets you broadcast your content to anyone who wants to subscribe. This “listening” can happen from another website, an RSS reader app, or even a custom aggregator. With just your RSS feed URL, people can get your latest blog posts, news, or podcast episodes without ever visiting your site directly. This process is called web syndication, and it’s a powerful way to distribute your content.

If you follow dozens of blogs or news sites, RSS feeds are the best way to get notifications when new content is published. RSS feed readers (also called news aggregators) are websites or apps where you can add the feeds you want to follow. They format the data for you, present it in a clean UI, and often offer extra features like search, tagging, and offline reading.

RSS feed readers used to be very popular in a pre social media era of the Internet. Nowadays your Facebook or Twitter feed is THE "RSS" feed you use. Do not get me wrong. I think that there is a certain value of the Facebook pages and twitter accounts that aggregate, select and share interesting content. However, it is rarely of good quality, and there is also this problem that everyone is sharing the same "hot" thing. Also, it has the tendency to get lost pretty quickly in your social media feed.

With RSS feed you do not have duplication and you can fully focus on just the content itself. I believe it is of great value NOT to be distracted by other non relevant stuff in this era of social media and creating content for the sake of creating content.

Another alternative to social media are newsletters. They are very important, but I believe they are better suited for other purposes. Newsletters also have some downsides in terms of ease of use. Although you can automate the process of sending a bunch of emails as soon as you release a new post, it is much simpler to do this with RSS feeds. Again, I am not making a point against email newsletters. They are a very powerful marketing tool, but for content syndication I believe that RSS feed concept is the best. This is what they were created for in the first place. Of course, there are some other competing technologies to RSS (namely Atom and JSON feeds), but the concept is still the same.

The 3 most popular RSS feed readers in my opinion are:

Feedly
Inoreader
NewsBlur

I am personally using Inoreader and I love it. It is simple and works as expected.

Conclusion

Whether you’re a blogger, developer, or just a content consumer, RSS feeds remain one of the best technologies for aggregating news, blog updates, and web content. While there are more sophisticated solutions out there, for simple use cases like blogs, podcasts, and news, RSS is still the gold standard for content syndication and web feeds. I recommend using RSS alongside social media and newsletters — RSS is perfect for your returning audience who want to stay updated with your latest posts.

If you haven’t already, check out my RSS feed and subscribe if you find my posts useful. Please help me reach a wider audience by sharing on your favorite social media platform. 😎 Thank you!

What do you think about RSS feeds? Are you using them? Do you have another opinion on this topic? I’d love to hear from you — let me know what you think through my contact form below.

Leveling up as a programmer

Dejan Kostevski — Mon, 04 Aug 2025 05:30:00 +0000

Have you ever had that feeling like you know everything in programming and there is nothing you can not learn? I have. But, have you also had that feeling like you do not know anything and will never be able to learn the more advanced concepts and techniques? I have.

This article was originally published on Kode Skills Blog. Head over there if you like this post and want to read others like it.

Learn the Tools, Frameworks, Programming Languages, and Environments

This one is pretty obvious, but it’s what you’ll spend most of your early programming career doing. Immerse yourself in all kinds of topics — start with the basics and move on to more advanced software engineering concepts as your knowledge grows. Remember to improve your skills both vertically (deep expertise in one area) and horizontally (broad understanding across related fields). For example, if you’re on the frontend developer path, don’t just learn HTML, CSS, and JavaScript. Also learn enough backend, databases, and design to understand the bigger picture of web development.

Having all of this in mind, you should really spend the time to learn or at least understand how the different tooling (in your chosen language) works. How to set it up, how to modify it, how to use it. You should be able to jump into a new project and detect all the tooling that is used and what is doing what. This has been a pain point for me, and it still is. Maybe I am not the only one who is struggling with this. That is why I am putting it high on the list as I think it is important for beginners to embrace this and learn as much as they can to understand the basics of tooling.

Frameworks are a special kind of knowledge. Usually, if you learn one, you will quickly learn others as well. But, that is not always the case. All of them have some specifics and some things that they do in their own way. You should always try to use them the way they are intended to be used. Spending time to read through their documentation is usually a time well spent. Always be mindful that you are within a certain framework and that there probably is a better or more elegant way of doing things elsewhere.

Which framework to learn? Well, that is a good question. But, one that cannot be answered without working with all of the frameworks for some time (couple of projects, or couple of months). And since nobody got time for that, I believe that it is a safe bet to go with what the community uses and what is popular. However, the mostly used, the most popular framework, does not mean that it is the best or the easiest to use (thank you Benjamin for teaching me this). The point I want to make here is, make sure you know your framework and you know the Pros and Cons of it. It will make you a better programmer.

For the language part of this section, I think it is pretty straightforward. No framework, tutorial, or project will substitute or make learning the basics of your language irrelevant. In fact, you should probably stay away from major frameworks in first couple of years of your quest of becoming the ultimate programmer. You can use them, of course, most projects require them. But, you should be aware that they have a lot of abstractions, a lot of code that just works and gives you what you need. That is why they are so useful and widely used. It has the downside that you don't get to see how all of these problems are solved with the vanilla version of the language. For me, reading their source code does not really help. The way I suggest people learn bare bones programming language is just by trying things out without any framework, or build tools or anything like that. Just you, the editor and the browser.

And now the browser, or the environment where you will run your code. Always be mindful of the environment you are in. For us Frontend Developers it is super important to know where you are and for what browsers you are building. Different browsers have different support for different features. Be mindful of that. On projects, one of the first questions I ask is: "What browser versions do we have to support?". Once you finish first several levels (finish your Junior year or two) you will see how versioning is important. I don't want to tell you how much time I have spent tracing bugs which were caused by incompatible versions of NPM packages. Make sure that you know what environment you are developing in/for and what versions of third party code you are using. This will also help you when you are searching for solutions. The rule of thumb is to try and always be up to date or somewhere close to that with your third party code.

Use the Tools, Frameworks, Languages, and Environments

This will come naturally as you follow the previous advice, but there’s one important thing to remember: Try to produce more than you consume. I’m guilty of not following this advice myself—I still read articles and watch tutorials more than I experiment with code. But the real growth as a programmer comes from building things, not just learning passively. Build anything you can think of, and use online resources for project ideas if you’re stuck. Make time for hands-on coding every day. This is what will help you level up your coding skills, open new doors for employment, and accelerate your developer journey.

Learn to read the documentation

In programming it is really important to have good documentation. Remember all the abstractions that frameworks are doing, being able to read their documentation is what makes you a better programmer. Knowing which function to use and why, makes you more ready for using that framework. But, reading documentation is not always that straightforward. I know I have struggled with understanding the documentation myself. The only tip I can give you here is to learn the basics of your language of choice. Most of the technical terms used in documentation can be understood if you learn the basics of the language. I figured out that exactly lack of this knowledge was the problem for me. Once I went back and relearned and solidified my knowledge of the basics I was able to start effectively reading the documentation of any language or framework.

Learn to use Debugging tools and Chrome dev tools

One of the biggest improvements in being able to fix bugs is being able to debug and inspect your code. For any web developer out there, being able to use super useful Chrome dev tools (or any other browsers` dev tools) should be high on the priority list. This is one of those things that do not take a lot of time to learn, but have an enormous potential to help you, speed you up, or make you more aware of your code and its implications. I strongly recommend spending time to teach yourself at least the basics of using this super useful tool. The other thing, debugging tools, are strongly correlated with using the Chrome dev tools and can be learned in parallel so look out for that side quest 🧰.

Learn the basics of Networking

I really wish I learned this before even starting as a Web Developer. This is so insanely powerful, yet super simple to understand. Of course, this is a big topic in itself, but the things you need to know as a Web Developer are quite small and isolated. Being able to know and understand what is going on when you try to access any website is making you aware of a whole bunch of potential issues and bugs you could figure out (and maybe even solve) in your project. Not to mention that it is one of the more popular interview questions. Those things are scratching a bit the surface of DevOps, but it is worth to have a wider picture. Spend the time and learn these things, it will make you a better programmer.

Learn the basics of testing

Testing has become a hot topic in recent years, and rightfully so. We all want to ship software without bugs, right? But, no one can write any code without bugs. They are sure to happen, just like night and day. Of course, this topic is also a big one, and becoming a master takes time and practise. You should, however, at least scratch the surface and be aware of what kind of problems it can solve, what can it give you in return, how to be confident with your tests. Writing and thinking about tests does not only make you ship software without bugs, it also makes you write more resilient code. It makes you think twice about your approach to solving the problem. Learning TDD is really helpful, but in my opinion, you should focus on the above things first before you jump into testing. It is an advanced topic and you should have a pretty good understanding of the core language before starting to write tests.

Linux

Since I know a bit of PHP and was doing the backend and server tasks throughout my career, I lacked one essential skill. Linux. One of the most valuable things I learned for my own career is learning how Linux works and how to work with it. It will help you with a lot of stuff, and you can basically use any operating system you want (Mac, any Linux distribution, Windows). You can fix some common server issues, you can understand how servers are connected and lots lots more. Not to mention that it will boost your self-confidence as a Programmer.

Always volunteer for the hard tasks

Always volunteer for the hard tasks and always try to understand as deep as you can the problem you are facing. This is not always easy and not always possible. The need to ship features fast is high on the priority list of any company. One of the most important things that will be asked of you as a programmer, especially when you level up within the career ladder, is being able to ship features fast. But how do you do that, how do you get better at it? Not all of us are super good programmers that can draw up the solution in our head in an instant.

The one way it has always worked for me is to take the time to understand the details. Sometimes you just have to stop, take a deep breath and dive deep into the topic at hand. This is not always easy or even feasible, but it is necessary for your own progress. Being able to dissect the issue into smaller parts takes time. To understand how everything works takes time. It also takes a lot of knowledge to be able to do that (read Debugging skills). But, it is also very powerful. Once you solve the problem you will gain so much experience that you will probably level up right there, right at that moment. Not only that, but it also gives you a perfect opportunity to work with more senior people. It gives you more time with your Team Lead. It gives you an opportunity to show how you work, which is not always so obvious. It gives you an opportunity to show that you actually care about the thing you are building. It can show persistence and resilience and not giving up to solve a bug.

As a junior in this field you should always look for these opportunities. Of course, trying to not dive deeper than you should. With a good team, and a good Team Lead this is really easy and safe thing to do. Some will even assign these kind of issues to you without you even asking for it. Embrace it with both hands and try to learn as much as you can. Take the time to learn as much as you can.

Once you finally solve it, take the time to reflect on it. Fill in any gaps in knowledge you might have. Read up about the topics that are not really clear to you. Ask the same question 10 times if necessary. Make sure you understand it. Because, the thing is, you will most likely face the same problem in the future. But, now, you should be able to take it head on by yourself.

Stay open minded and question everything

This one is especially true when you are solving bugs. Do not trust anyone, or anything, even yourself. Double check the obvious things first. Did you add the correct path? Is the function name correct? Is the ID correct? Is it even being called? Debugging skills and experience can help here a lot.

The last thing you want to do is to be self centric and stubborn. If you are sure about something, give proof of it. Otherwise, prove it. Make sure that the mistake is not there, not in your code. Triple check everything. Even if it is like that, and you think all is good from your side, stay humble. Stay open minded. It could happen that the mistake is not on your side. Do you really want to make your colleague feel miserable or do you want to fix the issue?

I believe that this specific skill defines a team player and one that is hard to work with. It is what companies are looking for. You do not have to be the best programmer in the world, but you have to be a team player. Being open and questioning even your solutions will help you pinpoint the issue faster and fix the issue faster. Not only that, but it will make you a better programmer.

There is always a logical explanation why something is not working. Try the system of elimination. Go one step above, and then one more, and then one more. That is why I am advocating to be aware of Backend, Databases, Servers, etc. You do not have to be an expert, but it helps if you know some basics. At the end of the day, what is important is that the work gets done. And for you personally, it should be that you learned something new today. You acquired a new skill.

Conclusion

Levelling up as a programmer is not always straightforward or easy, and it’s not always obvious when you’ve reached a new level. Hopefully, this article gives you some ideas on how to recognize those moments and how to optimize your developer growth. I’d love to dive deeper into each of these topics and explain them technically in future articles — this one is already long enough!

Good luck and have fun on your next quest to advance your programming career and coding skills! ⚔️