Forem: Diogo Capela

An alternative to Product Hunt, made for indie makers

Diogo Capela — Wed, 09 Apr 2025 23:44:53 +0000

I've had this side project for a while now called Awesome Indie, it is an alternative to Product Hunt, made for indie makers.

Recently, I decided to revamp the tech stack and give the UI/UX a much-needed refresh. I’d love to get some feedback from other makers and builders.

You can check it out at awesomeindie.com, any thoughts or suggestions are super welcome!

Thanks!

A checklist on how I approach technical SEO

Diogo Capela — Tue, 17 Dec 2024 21:11:51 +0000

These days SEO is mostly about delivering an overall great user experience, optimizing the experience for humans, not for bots. Still, having a solid structure behind the scenes can help search engine crawlers find, navigate, and index your content more easily. With that in mind, I compiled a checklist of topics I usually go through to ensure all my sites are SEO-friendly.

Use server-side rendering (SSR)

When you use server-side rendering, you're basically serving up a page's entire HTML content right from the start. This approach makes it much simpler for search engines to see what's on your pages, especially if you're working with JavaScript-heavy applications, where the actual content might not be in the initial HTML. Plus, SSR can boost your site's performance, cutting down on the time it takes for the first element to pop up on the screen. Since page speed and immediate visibility are ranking factors, it's worth paying attention to SSR.

Create a sitemap

Think of a sitemap as a blueprint for your website that you hand over to search engines. In an XML sitemap, you list out the pages you want crawled, how they relate to each other, their specific priorities, and how often they're updated. This is especially handy for big sites or those with complicated navigation. With a solid sitemap, crawlers don't have to hunt for important content—it's all right there, making it more likely that your pages will get indexed correctly.

Structured data (JSON-LD)

By sprinkling in structured data (usually with JSON-LD), you're giving search engines extra clues about what your content actually means. Instead of just reading text, they understand context. This can lead to rich search results on search engines such as Google, like review stars, event listings, or product details, which makes your listings more eye-catching and can improve click-through rates. Google prefers JSON-LD, and you don't need to alter your existing HTML layout to implement it.

You can validate your JSON-LD implementation using tools like Schema.org's Validator. This helps ensure your structured data is correctly formatted and will be properly understood by search engines.

The validator will highlight any errors or warnings in your markup, making it easier to fix issues before they impact your SEO efforts.

Add Open Graph protocol and Twitter Cards meta tags

The Open Graph protocol and Twitter Cards give you control over how your content is displayed when shared on social media. By setting titles, descriptions, and images with these tags, you make your content more visually appealing and clickable on platforms like Facebook, Twitter, and LinkedIn. It's all about catching users' eyes and driving more traffic from the social world.

<!-- Open Graph -->
<meta property="og:title" content="My Article Title" />
<meta property="og:description" content="My Article Description" />
<meta property="og:image" content="https://example.com/image.jpg" />

<!-- Twitter Cards -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="My Article Title" />
<meta property="twitter:description" content="My Article Description" />
<meta property="twitter:image" content="https://example.com/image.jpg" />

Add a web manifest file

If you've got a web app, your manifest.json file is basically a business card for search engines and browsers. It tells them what your app is called, which icons to use, and how it should look and feel on various devices. This info helps create a more "app-like" vibe for your site — super helpful for progressive web apps (PWAs) — and can lead to better engagement and a more polished user experience.

Configure a robots.txt file

Your robots.txt file is like a set of house rules for search engine crawlers. By giving specific instructions on which areas of your site are off-limits, you prevent the bots from wasting time on pages that don't matter (like routes behind authentication). While robots.txt isn't a security tool, it does help search engines focus their "crawl budget" on the pages you actually care about. Managing this file carefully improves how efficiently your site gets indexed.

Optimize images

Images can slow down your site if they're not handled correctly. By using the right file formats, compressing images, and giving them meaningful alt text, you'll speed up load times and help search engines understand what's in those images. This supports accessibility, improves user experience, and can even boost your Core Web Vitals metrics.

Setup a solid internal linking strategy

Internal links help users and search engines navigate your site more easily. By strategically linking your pages, you highlight important content and create a logical path through your website. This not only improves the user journey but can also support better rankings, as it helps search engines understand the hierarchy and relevance of your content.

HTTPS everywhere

HTTPS is non-negotiable these days. Aside from protecting your users by encrypting data, it's also a ranking factor, search engines want secure sites to show up first. Beyond SEO, it builds trust, protects sensitive info, and is often required for modern web features like service workers and PWAs.

If you haven't switched yet, it's time. You can use Let's Encrypt to get a free SSL certificate or you can proxy your site through Cloudflare to get HTTPS handled for you.

App security headers

Security headers like Content-Security-Policy and Strict-Transport-Security add an extra layer of protection for your site and its visitors. While these don't directly increase rankings, they build trust and credibility, making it less likely that search engines or users will view your site as risky.

You can check your site's security headers rating using the Mozilla Observatory. This tool analyzes your site's security headers and provides recommendations for improvement.

Have canonical metatags

Canonical tags help solve the headache of duplicate content. If you've got a bunch of URLs that lead to the same or very similar content, canonical tags tell search engines which one to treat as the real deal. This ensures your chosen URL gets the ranking power and prevents your SEO efforts from getting split up across multiple pages.

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

Use hreflang tags if you have multiple languages

If you're serving content to a global audience or translating it into multiple languages, the hreflang attribute guides search engines to show the most relevant language or regional version of your page. This prevents users from landing on the wrong language page and keeps your content from competing with itself across different languages.

<link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr" />

Follow a mobile-first design

With Google's mobile-first indexing, it's no longer enough to have a site that looks okay on phones. The mobile experience now sets the baseline. Designing with mobile in mind from the start ensures your site is easy to navigate and interact with on smaller screens. Given how many users browse on their phones, going mobile-first can significantly improve both your rankings and your bottom line.

Build using semantic HTML

Semantic HTML means using markup that clearly describes the purpose of each element. Instead of just putting everything in generic <div> tags, you use things like <article>, <nav>, or <footer>. This makes your content easier for both people and search engines to understand. In turn, that can help with accessibility, SEO, and maintainability of your code.

<nav>
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
  </ul>
</nav>
<main>
  <h1>Main title</h1>
  <article>
    <h1>Article title</h1>
    <p>Article content</p>
  </article>
</main>
<aside>
  <p>Sidebar content</p>
</aside>
<footer>
  <p>Footer content</p>
</footer>

No layout shifts

Ever try to click a button on a page, only for it to suddenly jump and make you click something else instead? That's a layout shift, and it's frustrating. Minimizing these shifts by properly sizing images, managing fonts, and reserving space for dynamic elements makes your site feel stable and professional. Reducing layout shifts contributes to a better user experience and better Core Web Vitals scores.

Provide RSS feeds

Though RSS may seem old-school, it's still a useful way for people and other sites to keep track of your updates. Users can subscribe to your content, and other websites can easily syndicate it. This can help expand your reach, keep your audience informed, and even boost visibility outside traditional search results.

Manage redirects

When you change a page's URL or retire a piece of content, you need a proper redirect strategy. Using the right redirect codes (301 for permanent, 302 for temporary) ensures search engines know what's going on and passes any existing "link juice" to the correct page. Good redirect management keeps your SEO intact and prevents broken links that frustrate users.

Sign up for Google Search Console and Bing Webmaster Tools

Google Search Console and Bing Webmaster Tools are your direct lines of communication with the most popular search engines. These platforms help you understand how they're seeing your site, alert you to issues, and show you which queries bring people to your pages. By using these tools, you can fix problems quickly, submit sitemaps, and constantly refine your SEO strategy.

Ensure accessibility

Making your site accessible ensures that more people can use it easily. Proper ARIA labels, keyboard navigation, good color contrast, and text alternatives for images help everyone. A more accessible site often has a cleaner structure and better metadata, which can also give you an SEO edge.

Check Core Web Vitals

Core Web Vitals are basically Google's way of measuring whether your site's user experience cuts the mustard. They focus on things like how quickly the main content shows up, how responsive the page is, and how stable the layout remains while loading. Getting these metrics right can boost both your rankings and overall user satisfaction. It's a win-win.

You can use tools like Google Search Console to check your Core Web Vitals.

Run Lighthouse reports

Similar to Core Web Vitals, Lighthouse helps you improve the performance, accessibility, and security of your site. It's a free Chrome extension that you can run on your site to get a detailed report on how your site performs.

The best domain name generators on the web

Diogo Capela — Sun, 19 May 2024 23:42:49 +0000

Around September 2022, one of my most-used web tools suddenly went offline. This tool was NameMesh, the best domain generator tool I've ever encountered.

If you have ever had to find an available domain for a side project, you know how hard it can be. Most domains that use common words or are very short in length are either taken or priced as premium. Nowadays, finding a free domain using pronounceable English words at a regular price is like finding a needle in a haystack.

NameMesh was definitely a great tool that could help anyone with that job. But after it was shut down, we were left with very few good alternatives. That's why a friend and I decided to take action and develop a free domain generator web app that would serve as an alternative for NameMesh users. It ended up being more difficult than we initially thought.

Why was NameMesh my top choice?

What made NameMesh awesome was its ability to continuously generate new domain suggestions (you just had to keep scrolling). It was the only tool I knew that could do that. Most of the alternatives out there return a fixed number of results for each search query, which is not ideal for finding a good domain name.

Key features I loved about it

Ability to generate infinite domain suggestions (not a fixed number)
Not showing unavailable or premium suggestions
Different word generation algorithms (prefix, suffix, replace with numbers, synonyms, clean top-level domains)
Ability to control domain length (min and max)
It was reliable and fast

None of the alternatives are perfect

The alternatives left that are free to use are not as good, not even our own. Nevertheless, let's take a look at the free domain name generator websites out there that I know about.

List of free domain name generators

Instant Domain Search

Instant Domain Search offers a fast and thorough way to search for available domain names, extensions, and domains for sale. It provides an easy-to-use platform where users can quickly find and register domains, making the process simple and efficient.

Namecheap Beast Mode

Namecheap Beast Mode is a powerful domain search tool offered by Namecheap that allows users to find and register multiple domain names quickly by combining keywords and filtering through various extensions and options.

Shopify Domain Name Generator

Shopify Domain Name Generator is a free tool that helps users find the perfect domain name for their business. By entering keywords, the generator suggests available domains with various extensions, and checks their availability instantly.

Domainr

Domainr is a domain search engine that helps users find available domain names across numerous extensions, offering real-time availability checks and alternative suggestions for creative and effective web addresses.

DomainWheel

DomainWheel is a free domain name generator that provides instant suggestions based on your keywords using AI. It helps you find creative and available domain names by generating ideas that rhyme, sound similar, or are randomly suggested.

Nameboy

Nameboy is a domain name generator that helps users find creative and available domain names by combining keywords, making it ideal for businesses, startups, and personal projects.

Naminum

Naminum is a free, powerful, and blazingly fast domain name generator and search engine, allowing users to quickly generate and check the availability of domain names in various extensions.

Name Lantern

Name Lantern is a domain name generator that assists users in finding unique, available domain names by combining keywords and suggesting creative options for businesses and personal projects.

Name Bounce

Name Bounce is a domain name generator that helps users find creative and available domain names by combining keywords with various extensions, ideal for businesses and personal projects.

Lean Domain Search

Lean Domain Search helps users discover available domain names by combining keywords with thousands of potential options, making it easy to find creative, relevant, and memorable domain names quickly.

Micro Domains

Micro Domains offers a domain name generator focused on creating short, catchy, and brandable domain names, ideal for startups and entrepreneurs seeking a memorable online identity.

Name Grep

Name Grep is a domain name search tool that allows users to find available domain names by filtering and matching keywords, providing creative and relevant options for various projects.

NameSnack

NameSnack is an AI-powered domain name generator that combines keywords to create unique, brandable, and available domain name suggestions, catering to businesses and personal projects.

One Word Domains

One Word Domains is a database of more than a million available and brandable one-word domain names, ideal for finding unique names for your next startup idea.

NameQL

NameQL helps you find a great name by searching tens of thousands of potential names and showing you the best options, only suggesting names with available .com domains.

Panabee

Panabee is a versatile online tool for generating domain, app, website, and business names. It offers suggestions based on related words, translations, and alternate spellings, helping users find the perfect name effortlessly.

Brandpa

Brandpa offers a curated selection of premium, ready-to-use domain names for businesses, streamlining the branding process with creative, memorable options and professional logo designs included.

Namekrea

Namekrea is an open-source AI domain name generator powered by GPT-2, helping users find creative and available domain names by intelligently combining keywords for various projects.

Learn CSS by playing games

Diogo Capela — Wed, 15 Mar 2023 11:20:48 +0000

CSS is an essential part of web development, as it determines most of the layout and appearance of websites. It is one of the tools that is easy to learn but hard to master. In this post I will share some of the best games that will help you learn CSS in a fun way.

Flexbox Froggy

Learn the concepts of flexbox in CSS

Flexbox Froggy introduces players to the concepts of flexbox layout in CSS. Players must use flexbox properties to position frogs on a lily pad, working their way through progressively more difficult levels.

Try it out at flexboxfroggy.com.

Grid Garden

Learn about the CSS grid layout system

Grid Garden teaches players about the CSS grid layout system by challenging them to grow a garden by writing CSS code. Players must use grid properties to arrange plants in a grid, working through various levels.

Try it out at cssgridgarden.com.

CSS Diner

Learn the basics of CSS selectors

CSS Diner takes players through a series of increasingly difficult challenges that teach the basics of CSS selectors. Players must use the correct selectors to select a series of dishes to advance each level.

Try it out at flukeout.github.io.

Flexbox Defense

Move around towers to defend a road from attacks

Flexbox Defense has 12 different levels and is a great game for learning CSS. It involves placing towers to protect a road from enemy attacks.

Try it out at flexboxdefense.com.

Knights of the Flexbox Table

Navigate the knight through the dungeon using Tailwind CSS

Knights of the Flexbox Table is a game where you help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the CSS dungeons. You can navigate the knight through the dungeon by changing his position within the dungeon using Flexbox and Tailwind CSS.

Try it out at knightsoftheflexboxtable.com.

Flex Box Adventure

A game with 24 levels of CSS challenges

Flex Box Adventure has 24 levels and is a game where you'll have the opportunity to learn from helpful hints and test your skills with a variety of tasks. It's a great way to continue improving your understanding of CSS.

Try it out at codingfantasy.com/games/flexboxadventure.

Grid Attack

An interactive game to practice CSS grid

Grid Attack is expertly designed and will provide you with a fun and interactive way to learn about CSS Grid. The objective is to use CSS Grid to alter the landscape to defeat demons. With 80 levels to play through, you'll have plenty of opportunities to practice and master this important web development skill.

Try it out at codingfantasy.com/games/css-grid-attack.

Flexbox Zombies

Shoot zombies while learning about flexbox

Flexbox Zombies has 12 chapters and up to 25 levels in each, there's plenty of content to keep you entertained. Normally, this game comes with a price tag, but it appears to be free to play indefinitely.

Try it out at mastery.games/flexboxzombies.

Guess CSS

Guessing game with CSS selectors

Guess CSS challenges you to determine which selector produces the desired result. One of the benefits of this game is that you get to see the correct answer, which helps you learn. Additionally, it covers a wide range of CSS concepts, rather than focusing on just one specific aspect.

Try it out at guess-css.app.

CSS Speedrun

CSS selector game with time pressure and replayability

CSS Speedrun requires you to use CSS Selectors to target and select certain elements on the page. It adds an extra level of difficulty by requiring you to do it quickly. With 10 levels to play through, you can test your skills and try to improve your speed with each attempt.

Try it out at css-speedrun.netlify.app.

CSS Challenges

Improve CSS skills with daily challenges

CSS Challenges is a great tool for improving your CSS skills and learning new tricks. It provides daily challenges that will help you grow as a web developer.

Try it out at css-challenges.com.

CSSBattle

Use your CSS skills to replicate targets with the smallest possible code

CSSBattle challenges players to build images using CSS. Players are given a set of design constraints and must use their CSS skills to replicate targets with the smallest possible code.

Try it out at cssbattle.dev.

Adding fallback images onto your React projects

Diogo Capela — Fri, 11 Mar 2022 23:59:02 +0000

If you are developing a web application, then there are a lot of things to consider. One important aspect is the images that are used, for aesthetic purposes or various other reasons (e.g. icons). Either way, it is important to have a backup plan in case images don't load for some reason.

For example, if you are pulling image data from an external database or API, sometimes you can't be 100% sure that it will return you an existing image file. In those cases, you may end up with a broken image icon on your webpage, and depending on the browser, there may be no indication at all that something went wrong. Frontend developers should predict these cases and adequately provide a fallback image when it happens.

To achieve this we can use the onerror event handler on img elements. This handle will get called if an error occurs while loading or rendering an image. According to MDN Web Docs, it can happen in several situations, including:

The src attribute is empty or null.
The src URL is the same as the URL of the page the user is currently on.
The image is corrupted in some way that prevents it from being loaded.
The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the img element's attributes.
The image is in a format not supported by the user agent.

To do this with React we just need to use onError instead (the SyntheticEvent wrapper from React’s event system).

import React from 'react';

export default function App() {
  const addImageFallback = (event) => {
    event.currentTarget.src = '/images/fallback.png';
  };

  return (
    <img src="/images/broken.png" alt="" onError={addImageFallback} />
  );
}

If using TypeScript, we just need to properly type the event parameter of the addImageFallback function.

import React, { SyntheticEvent } from 'react';

export default function App() {
  const addImageFallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
    event.currentTarget.src = '/images/fallback.png';
  };

  return (
    <img src="/images/broken.png" alt="" onError={addImageFallback} />
  );
}

And that's it! Now you know how to add fallback images to your React projects. Hopefully, this has been a valuable resource if you are just starting your coding journey.

15 useful Lodash methods for everyday coding

Diogo Capela — Wed, 02 Mar 2022 19:30:35 +0000

Lodash is one of the most popular open-source JavaScript libraries. It implements a lot of functional programming helpers that make everyday coding easier. It's something I use often in my own development work, and so I wanted to share with you some of the methods that I find myself using a lot.

In this short post, we'll go over 15 everyday methods that, when used properly, can speed up development and make your code more readable.

shuffle

Creates an array of shuffled values (using a version of the Fisher-Yates shuffle).

import shuffle from 'lodash/shuffle';

const result = shuffle([1, 2, 3, 4, 5]);

// result => [2, 5, 1, 4, 3]

orderBy

Creates an array of elements, sorted in the specified order by the results of running each element in a collection thru each iteratee.

import orderBy from 'lodash/orderBy';

const items = [
  { name: 'Item A', price: 2 },
  { name: 'Item B', price: 8 },
  { name: 'Item C', price: 4 },
  { name: 'Item D', price: 4 }
];

const result = orderBy(items, ['price', 'name'], ['desc', 'asc']);

/*
result => [
  { name: 'Item B', price: 8 },
  { name: 'Item C', price: 4 },
  { name: 'Item D', price: 4 },
  { name: 'Item A', price: 2 }
]
*/

chunk

Creates an array of elements split into groups of a specified size (if the array can't be split evenly, the final chunk will only contain the remaining elements).

import chunk from 'lodash/chunk';

const array = [ 1, 2, 3, 4 ];

const result = chunk(array, 2);

// result => [[1, 2], [3, 4]]

take

Creates a slice of the array with n elements taken from the beginning.

import take from 'lodash/take';

const result = take([1, 2, 3], 2);

// result => [1, 2]

difference

Creates an array of the values not included in the other given arrays. The order and references of result values are determined by the first array.

import difference from 'lodash/difference';

const result = difference([1, 2, 3], [2, 3, 4]);

// result => [1]

intersection

Creates an array of unique values that are included in all given arrays. The order and references of result values are determined by the first array.

import intersection from 'lodash/intersection';

const result = intersection([1, 2, 3], [2, 3, 4]);

// result => [2, 3]

isEmpty

Checks if the value is an empty object, collection, map, or set (objects are considered empty if they have no own enumerable string keyed properties).

import isEmpty from 'lodash/isEmpty';

isEmpty({});
// => true

isEmpty({ name: 'John Doe' });
// => false

throttle

Creates a throttled function that only invokes the passed function at most once per every interval, specified in milliseconds.

import throttle from 'lodash/throttle';

const throttled = throttle(() => {
  console.log('Throttled after 50ms!');
}, 50);

window.addEventListener('resize', throttled);

debounce

Creates a debounced function that delays invoking the passed function until after the specified wait time has elapsed since the last time the debounced function was invoked.

import debounce from 'lodash/debounce';

const debounced = debounce(() => {
  console.log('Debounced after 400ms!');
}, 400);

window.addEventListener('resize', debounced);

merge

Recursively merges own and inherited enumerable string keyed properties of source objects into the destination object.

import merge from 'lodash/merge';

const firstObject = { 'A': [{ 'B': 1 }, { 'C': 2 }] };

const secondObject = { 'A': [{ 'B': 3 }, { 'D': 4 }] };

const result = merge(firstObject, secondObject);

// result => { A: [{ B: 3 }, { C: 2, D: 4 }] }

cloneDeep

Creates a deep clone of a specified value.

import cloneDeep from 'lodash/cloneDeep';

const items = [
  { name: 'Item A' },
  { name: 'Item B' },
];

const result = cloneDeep(items);

// result[0] === items[0] => false

startCase

Converts a string to start case (the first letter of each word capitalized).

import startCase from 'lodash/startCase';

startCase('--foo-bar--');
// => 'Foo Bar'

startCase('fooBar');
// => 'Foo Bar'

startCase('__FOO_BAR__');
// => 'FOO BAR'

kebabCase

Converts a string to kebab case (punctuation is removed, the text is converted to lowercase, and spaces are replaced by single dashes).

import kebabCase from 'lodash/kebabCase';

kebabCase('Foo Bar');
// => 'foo-bar'

kebabCase('fooBar');
// => 'foo-bar'

kebabCase('__FOO_BAR__');
// => 'foo-bar'

snakeCase

Converts a string to snake case (punctuation is removed, the text is converted to lowercase, and spaces are replaced by single underscores).

import snakeCase from 'lodash/snakeCase';

snakeCase('Foo Bar');
// => 'foo_bar'

snakeCase('fooBar');
// => 'foo_bar'

snakeCase('--FOO-BAR--');
// => 'foo_bar'

camelCase

Converts a string to camel case (spaces and punctuation are removed and the first letter of each word is capitalized).

import camelCase from 'lodash/camelCase';

camelCase('Foo Bar');
// => 'fooBar'

camelCase('--foo-bar--');
// => 'fooBar'

camelCase('__FOO_BAR__');
// => 'fooBar'

That’s all. Thanks! I hope this can help you the next time you write a JavaScript application. Lodash is a very popular open-source library that's worth checking out if you're looking for ways to build web applications faster.

Hey! 👋 My name is Diogo and I'm an enthusiastic frontend developer who is passionate about building for the web. If you want to keep in touch check out my website or follow me on Twitter.

How to setup a Node.js app with a custom start and build script on Heroku

Diogo Capela — Sun, 27 Feb 2022 17:51:46 +0000

These days, the cloud has made it easier for anybody to launch a website or app. One of those services is Heroku, a platform that allows websites to be deployed on runtimes such as Node.js.

Heroku allows you to publish your web application with just one click. And if you're familiar with it, then you already know that you can use shell scripts or launch commands in the terminal to deploy your applications to the cloud. But what if you have a specific build or start script that you might want to run solely on Heroku?

In this article, I will teach you how to set up your Node.js application on Heroku using a build and start script of your choice!

Heroku-specific build script

If your app has a build step that you’d like to run when you deploy, you can use a build script in package.json (since March 2019, Node.js deployments will automatically execute an app’s build script during the deployment if one is defined in the app’s package.json file).

"scripts": {
  "start": "node index.js",
  "build": "webpack" // this will automatically run on Heroku
}

If you want to define some other script rather than build to run specifically on Heroku, you can add a heroku-postbuild to your package.json scripts, which will run instead of the regular build script.

"scripts": {
  "start": "node index.js",
  "build": "ng build", // will not run on Heroku
  "heroku-postbuild": "ng build --prod" // if provided, this will run instead
}

You may also want to run scripts only before or after other Heroku build steps. For instance, you may need to configure npm, git, or ssh before Heroku installs dependencies, or you may need to build production assets after dependencies are installed.

To achieve these Heroku-specific actions, you can use the following scripts:

heroku-prebuild:
- Runs before Heroku installs dependencies.
heroku-postbuild:
- Runs after Heroku installs dependencies (but before pruning and caches dependencies). If this script is specified, the regular build script will not run.
heroku-cleanup:
- Runs after Heroku prunes and caches dependencies.

Heroku-specific start script

By default, Heroku runs npm start while starting deployed Node.js applications, but if you would like to run some other script from your package.json instead you just need to follow one simple step.

Just create a Procfile at the root of your project with your custom start script:

web: npm run my-custom-start

And that's it! Now Heroku will run my-custom-start instead of the regular start script when you deploy your Node.js app.

"scripts": {
  "start": "node index.js", // will not run on Heroku
  "my-custom-start": "PROD=true node index.js" // this will run instead
}

Setting up a Node.js app on Heroku is easy, but still requires some setup to ensure that your app build and starts properly.

Hopefully, this small guide could help you customize your Heroku app to your specific needs and make your deployment process faster. Thanks!

Hey! 👋 My name is Diogo and I'm an enthusiastic frontend developer who is passionate about building for the web. If you want to keep in touch check out my website or follow me on Twitter.

5 best React UI frameworks to build web applications faster in 2022

Diogo Capela — Sat, 26 Feb 2022 04:33:07 +0000

There are many ways to speed up your development time when building a web application. For example, if you're creating a web app from scratch, you may want to use a framework to make your development faster. However it’s not always easy to find the right framework for your web application - so you'll probably be tempted to try a lot of different options out. Still, just because there are multiple frameworks doesn't mean they're all equal.

React UI frameworks and component libraries to look forward in 2022

Here are the 5 frameworks that we’ll cover in this post:

Chakra UI
Material UI
React Bootstrap
Ant Design
Semantic UI React

Chakra UI

A simple, modular, and accessible component library

Chakra UI is a rising open-source library made by Segun Adebayo that empowers developers with the building blocks they need to create robust React apps. It is currently my go-to choice when developing new web applications for its simplicity and design. It provides a wide variety of components, it is easily extensible, and it is packaged with some very useful custom hooks. The beauty of Chakra UI is its simplicity and I would recommend it to anyone looking to bootstrap a new web application using React.

More details at chakra-ui.com.

Material UI

A robust, customizable, and accessible library of foundational and advanced components

Material UI is one of the most popular open-source component frameworks in the React ecosystem. It is maintained by a group of invaluable contributors, with the massive support and involvement of the community. It offers numerous quality components on its base package, which are free to use and MIT licensed on their community edition. However, some components such as the Data Grid and the Date Ranger Picker have some features locked behind their MUI X Pro package which gets you more components and professional support. Nevertheless, Material UI is still a great choice if you are looking for something powerful, flexible, and that most users are familiar with.

More details at mui.com.

React Bootstrap

The most popular front-end framework, rebuilt for React

Originally named Twitter Blueprint, Bootstrap needs no introduction as it is one of the most popular front-end component libraries. It was made by @mdo and @fat as a framework to encourage consistency across internal projects at Twitter. React Bootstrap is a wrapper around the original Bootstrap framework which provides most of the components built from scratch as a true React component.

More details at react-bootstrap.github.io.

Ant Design

A design system for enterprise-level products

Ant Design has a React UI library that contains a set of high-quality enterprise-class components for building rich, interactive user interfaces. It is written in TypeScript with predictable static types, internationalization support for dozens of languages, and offers powerful theme customization. XTech had two main goals for this project: build components with a superior design and make the process of developing for the web more accessible for the developers. It is a great choice if you need a complex set of components and it has the support of big brands like Alibaba, Tencent, and Baidu.

More details at ant.design.

Semantic UI React

A development framework that helps create beautiful responsive layouts

Semantic UI React is a jQuery-free integration of the original Semantic UI framework. It uses a unique design that has a declarative API adapted to React. It offers over 50 different components which are very easy to integrate into your project. The only negative aspect I noticed is that some components can be not so easily customizable. Anyway, it is still a solid choice with lots of options for most web applications.

More details at react.semantic-ui.com.

UI frameworks allow to build web applications with less code and much faster. They are flexible and easy to use, so it doesn't matter whether you are a professional or beginner in the React world, these frameworks will defiantly help you get started with creating your web application.