DEV Community: Genics Blog

9 Hand Picked FREE Heroku Alternatives [2023]

Gourav Khunger — Thu, 06 Jul 2023 10:18:59 +0000

Beginning November 28, 2022, Heroku, one of the most popular go to choice used by developers to host their apps, announced that it would be shutting down its free tier.

Note: Listen to the audio version of this article at genicsblog.com.

The Platform-as-a-Service (PaaS) provider's free tier used to provide a generous 550 hours of dyno uptime which could be easily extended to 1000 hours with a verified credit card.

Even though these dynos shut down after 30 minutes, it could be resolved by various methods to keep Heroku apps awake, thus becoming the easiest way to host software projects for free.

The free tier shutdown news left many developers in search for alternative hosting platforms that could provide a similar API and website hosting services free of cost. As a result, I have compiled a list of the top 9 free Heroku alternatives to use in 2023.

If you are interested in watching a video format of this article, check this out:

While there are many hosting platforms available in the market, these carefully selected services provide the best options for developers to host their Frontend/Backend applications, APIs, Servers, etc.

These alternatives offer features similar to Heroku, such as support for multiple programming languages, easy deployment, and scalability. So whether you are a seasoned developer or just getting started, keep reading to discover the top free Heroku alternative hosting platforms:

1. Deta

Deta space is a relatively new comer to the market but their offerings make them top our list. You can host both static and dynamic content within minutes.

Whether it be building frontend or backend applications with any technology, Deta has got you covered with their infrastructure they call as the "Personal Cloud".

Pros

No credit card verification required.
Easy project deployments through their CLI application.
No limits on the number of builds / deployments.
Support for any kind of technology/framework to build your application.
Free hosting for Node.js / Rust / Go / Custom backend apps as well as SvelteKit / Next / Static Apps.
Free application uptime throughout the month.

Cons

The pros far outweigh the cons of Deta making it the best choice for developers to host their projects and applications and move away from Heroku.

Deploying on Deta requires initial project configuration and setup changes.
Resource usage limits are generous but may not be sufficient for everyone.

2. GitHub Pages

GitHub Pages is a free web hosting service provided by GitHub. You can easily create and host static websites served directly from your project's GitHub repository.

It offers a simple and efficient way to serve static websites built with HTML, CSS, and JavaScript.

It also supports popular website generators such as Jekyll, Hugo, Gatsby, etc. You can also use custom GitHub Actions to create your own publishing pipeline in a matter of minutes.

GitHub Pages provides support for custom domains, HTTPS encryption, and easy integration with other GitHub features such as Git version control and issue tracking all for free!

Pros

Free web hosting for static websites.
Easy integration with other GitHub features.
Support for popular static site generators.
Simple and intuitive user interface for creating and managing websites.
Ability to collaborate with other developers on the same repository and website.
Good performance and reliability due to GitHub's infrastructure.

Cons

No support for dynamic websites or web applications.
No support for server-side scripting or database integration.
1 GB storage and 100 GB monthly bandwidth soft limit on the free tier.
Not suitable for websites that require higher levels of security or scalability.

This service is perfect for those who want to showcase their side projects, blogs, or portfolios without the need for complex infrastructure or hosting setups.

3. Oracle

Oracle Cloud's free tier has been a game changer recently. The Always Free services provide unmatched resources for developers to build and deploy their apps, without worrying for usage limits.

Pros

Reliable services from Oracle.
Host any kind of applications.
VMs stay up indefinitely — No fret about downtime.

Cons

Requires credit card verification to begin usage.
Platform complexity makes it not so easy to use.
Manual configurations required for deployment.
Overkill for small / medium projects.

4. Cloudflare Pages

Cloudflare Pages is a part of the numerous services provided by Cloudflare for building and deploying static websites, APIs, and applications.

It provides a simple way for developers to create high-performance websites that are scalable, secure, and easily integrated with other Cloudflare services.

Whether you are building a personal blog or a complex web application, Cloudflare Pages offers a range of features and benefits that make it a great choice for web development.

Pros

Free web hosting for static and dynamic websites, including unlimited bandwidth and custom domain support.
Full stack support with serverless functions using Cloudflare Workers.
Unlimited preview deployments for your projects!
Support for redirects and headers for files.
Automatic SSL encryption and security features, including DDoS protection and firewall rules.
Easy integration with popular Git-based version control systems like GitHub, GitLab, and Bitbucket.
Support for popular web frameworks like React, Next.js, Vue.js, Angular, etc.
Fast and reliable global content delivery network (CDN) powered by Cloudflare's infrastructure.

Cons

500 builds per month hard limit.
A maximum of 20,000 files per deployment where each file should be less than 25 MiB.
Complexity for developers who are not familiar with serverless architecture or the Cloudflare ecosystem.
No built-in database support, although these can be integrated with third-party services.
Limited support for legacy web technologies or platforms that are not Git-based.

This service is the most suited for those who already use Cloudflare services with their existing websites and are looking to migrate to a different hosting platform.

5. Vercel

Vercel is a cloud-based platform that provides users with the most modern UI/UX to deploy their websites and applications within minutes. It is focused on providing an easy-to-use solution for building and deploying websites and applications.

It has become a popular choice among developers who are looking for a platform that can offer serverless deployment, scalability, and performance. With Vercel, developers can easily deploy their code and enjoy fast loading speeds, excellent scalability, and reliability.

Pros

Best for Next.js powered projects.
Easy to use dashboard built for fast deployments.
Automatic serverless deployment and scaling using its cloud infrastructure and CDN.
Easy for developers to handle traffic spikes and scaling needs.
Extensive library of plugins and support for integrations, and add-ons.
Excellent documentation and community support.
Vercel Sponsorships for open-source projects.

Cons

Vercel's free plan has various limitations.
Although it supports popular web frameworks like Next.js and Nuxt.js, it is not the best choice if you require more flexibility and control over your stack.
It is a cloud-based platform, which means that developers do not have complete control over the underlying infrastructure and environment.
Vercel's recently launched serverless storage solutions are relatively new.

6. Railway

Railway is like a copy of Heroku but with slight differences. The platform's UX is top notch, and their pricing and restrictions are good enough to make it a viable Heroku alternative.

Pros

Platform experience is very similar to Heroku with the UI being very modern.
Deploy any kind of API / website tech stack.
Great documentation to get started with.
Easy integration with GitHub to deploy your repository.
All plans include preview environments for each PR, Multiple custom domains with SSL, deploy from any GitHub repository, etc.
Built-in database integrations.

Cons

Limited resources without credit card verification. Once verified, it is generous enough to sustain small / medium scale projects for free.
Even though they bill for resource usages by the minute, it can become expensive quickly if you pass the limits.

7. Render

Render is a powerful cloud platform designed to simplify the process of building, deploying, and scaling websites and applications. It has gained popularity among developers due to its ease of use, reliability, and robust set of features.

Pros

Render offers a generous free tier with ample resources, including free SSL certificates and custom domain support.
Automatic scaling and zero-downtime deployments, ensuring your website or application can handle traffic spikes and updates without interruption.
Support for a wide range of programming languages and frameworks like Node, Python, Go, Rust, PHP, Elixir, Docker, etc.

Cons

Render deletes Free tier PostgreSQL databases after 90 days from creation, making their database services unusable without paying a fee.
May become expensive for scaling.

8. Cyclic

Cyclic is designed to streamline your DevOps workflows and revolutionize the way you approach continuous integration and deployment. With Cyclic, developers can harness the power of automation to build, test, and deploy their applications effortlessly.

Pros

Apps on Cyclic do not sleep even on the free tier.
Cyclic's smart caching technology delivers the best performance globally.
Features its cron jobs technology with 1 second precision triggering.
Easily scalable.

Cons

As of now, Cyclic supports JavaScript, TypeScript, and Python runtimes only.
Good for APIs but not for other types of projects.

9. Fly.io

Fly.io is an edge computing platform that empowers developers to optimize their applications for lightning-fast performance and global delivery.

Pros

Fly.io features a vast network of edge servers strategically placed around the world to bring your applications closer to your users.
Generous free allowance to run small scale apps.
Supports many languages and frameworks like Go, Crystal, RedwoodJS, Python, Ruby, Deno, etc.
Seamless traffic shifting and canary deployments to roll out updates gradually, ensuring a smooth transition while minimizing the risk of errors or downtime.
In depth migration from Heroku guide.

Cons

The learning curve to use Fly.io can be steep.
Better alternatives exist to host small scale apps.

Notable mentions

Netlify and Firebase are also great tools to deploy basic frontend apps for free.
If you need finer control over your stack, AWS / GCP / Azure are the leading cloud services.

Conclusion

I hope this comprehensive list of 9 hand picked Heroku alternatives that you should be using in 2023 helps you evaluate your options for deploying your backend APIs and frontend applications.

Did I miss any great option? Leave a comment below to start a discussion.

Thank you for reading so far!

Genics Log #2: Sponsorship from Vercel, Theme updates, Organic Growth and more

Gourav Khunger — Sun, 19 Jun 2022 06:14:19 +0000

Welcome to the second issue in the Genics log series! I know this is super late in the month, but I wanted to share some updates on the blog from the past months.

Listen to this article at Genics Blog

Before diving into the latest news at Genics, I would like to introduce myself. I am Gourav Khunger, the founder of Genics Blog. I am a teenager from India who is passionate about software development and open source.

In the last article in this series, we talked about how we went open source and how we managed to grow from 200 visitors/month to 500+ visitors/month, along with sponsorship from BeyondWords.

This log is more inclined towards the core theme infrastructure and how we managed to grow our community to 600+ readers now.

Let's get started!

Staging ENVs with Vercel

This was a crucial step in forming a better infrastructure for building the theme and its plugins.

Previous setup

From the beginning itself, I planned to create a separate repository for the theme just because it would allow us to use a separate GitHub Pages for staging.genicsblog.com.

This was the GitHub Actions file that deployed the theme to staging url. We made sure to block indexing using the robots.txt file's Disallow: / directive.

But here comes the tricky part - the staging was not relevant until we were able to deploy PRs to preview them. Staging environment for approved and merged PRs didn't matter as much as environment for previewing the pending PRs.

A huge problem was that we couldn't use repository secret variables in GitHub Actions if it ran using pull_request event but those variables are needed to deploy to gh-pages.

For that, we had to use pull_request_target event trigger which allows PR actions to use the repository secrets to access the staging environment.

But the catch here is, this comes with security vulnerabilities as the PRs are run in the context of the repository base and not the PR base.

This could mean that user can manipulate the workflow file to misuse the repository secrets!

Vulnerability in main repository

The above mentioned issue was actually present in the main repository. I had setup a workflow for PRs using pull_request_target because I wanted to automerge "correct" changes to drafts by authors.

YES, this was a big mistake but fortunately, no one exploited this vulnerability using which one could clean up the whole repository in minutes (making a delete commit and managing to automerge it using repo secrets).

I did have security measures in place:

An automerge happened only if the PR changes article files that are owned by the specific author. The python script referenced takes in the list of files changed in the PR and goes through them to verify if the PR author is the actual author of the article files.

Now, you could argue that a person could change the script in the PR and this check would easily be bypassed. That is the reason that the workflow uses wget to download the script from the main branch and then run it. It deletes the scripts in the PR and downloads the correct one before running.

But again, I was still skeptical of the pull_request_target event trigger. The docs don't clearly mention it, but I am not sure - If the action runs in context of the PR base, then is it possible that the author change the action script and bypasses the script download and other verification checks?

This is the reason we now moved to Vercel to off-load all these security issues and still be able to deploy staging ENVs!

Sponsorship from Vercel

Vercel{:rel="dofollow"} was generous enough to sponsor our GitHub organization to be able to deploy organization repositories for free!

Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

This sponsorship now enables us to remove our vulnerable GitHub actions and migrate to Vercel deployments. It was as easy as setting up the installation and build scripts. Vercel automatically deploys all PRs to staging environments!

Now we can easily preview pull requests and test them visually before moving them to production!

Theme updates

We have worked on massive improvements to the theme and its plugins!

Paginating author pages (#7)

This was by far the biggest need for the theme. Author pages like this could get super big without pagination and that affects load times a lot.

This was a big problem for the Jekyll community as well - there was no plugin to handle multiple authors with ease.

This lead me to spend time messing with jekyll-paginate-v2 and understanding how its pagination works. With some days of effort, I came up with jekyll-auto-authors which completely simplifies the process of paginating author pages!

Here's an in-depth tutorial on using the plugin to paginate author pages.

Shortcut commands (#10)

There are new shortcut commands you can use to perform these actions on the site:

Opening up search bar: command + K or Ctrl + K. To close it please use the Esc key.
Toggling the site theme: command + shift + L or Ctrl + Shift + L.

Copy button for code blocks (#1)

Copy buttons on code blocks have been given an overhaul and provide a much nicer user experience.

Spam comments

In light of recent spam abuse of our commenting system, we have removed the comment system for now. We might use giscus in future but there's no plans for it right now.

Please use our Discord server for discussions on articles on the site.

Other updates

Here are some minor but relevant updates we've made to the theme:

More open-graph meta tags (#39): better for SEO.
Migration to GA4 (#21).
Selection color for code blocks (#28).
Refactoring series pages (#2).
For authors: tools like frontmatter generator (#93) and thumbnail generator.
Licensing for the theme and articles (#136).

Stats

Open Source

Here are the stats that changed from the last time:

genicsblog.com (Main repo with posts and data files): 25 stars, 20 forks.
theme-files (Basically template files): 7 stars, 9 fork.

Google Analytics

Here are the recent 30-day stats from our Google Analytics:

Join our Discord server to view these public stats every day :)

Organic Stats

Almost 40-50% of our monthly traffic is through organic channels!

Final Words

It's been an absolute rollercoaster ride for us to get to this point! It was from 100 readers a month in December when I decided to open source the blog and start working on a newer and better version of it. And here we are, scaled to 600+ readers within 3 months!

In the near future, I plan to continue working on the improvements and scale to at least 5k readers per month. Up to that point, we will focus mainly on putting out quality content that people find insightful while focusing on gaining traffic through organic channels mainly.

After the 5k checkpoint, there will be great things to come ;)

Looking forward to your feedback and suggestions!

Kotlin: Multi-dimensional Arrays

Gourav Khunger — Mon, 09 May 2022 16:47:42 +0000

At some point of time, we all have worked with arrays. It is a useful data structure to store multiple values of the same type in a single variable. Complex usage of arrays includes storing data in 2D, 3D, or other multidimensional arrays. This allows us to represent things like matrices, grids, and cubes effectively.

In this tutorial, we will specifically focus on declaring, initializing and using 2D, 3D, and other multidimensional arrays in the Kotlin programming language.

Pre-requisites

To understand multi-dimensional arrays and lists in kotlin, you need to have a proper understanding of 1D arrays. I have published an intuitive article about kotlin arrays similar to this one, do read the article before proceeding.

2D Arrays in Kotlin

2D arrays are a convenient way to store grid/board/matrix type of data.

If we dig deep into Kotlin Standard Library, the function arrayOf() is actually returning Array<T> where T is the type of the elements in the array. This effectively means that if we pass in T we get out an array Array<T>.

This means if we pass in arrayOf() into the arrayOf() function, we effectively get out Array<Array<T>> and that is exactly the representation of 2D Arrays!

2D Arrays with pre-defined data

Let's see how to make 2D arrays with predefined values:

val array = arrayOf(
    arrayOf(1, 2, 3),
    arrayOf(4, 5, 6),
    arrayOf(7, 8, 9)
)

This creates a 2D Kotlin array which is a collection of 1D Kotlin arrays. Here's a representation of the array:

General Form:
[[1 2 3], [4,5,6], [7,8,9]]

As a matrix:
1 2 3
4 5 6
7 8 9

Again, these arrays are not type-safe. You can add another data type to the array without any issue. To make it type-safe, we need to declare the type of the array during initialization:

val array = arrayOf<Array<Int>>( // Declaring the type gives error if data types are mixed
    arrayOf(1, 2, 3),
    arrayOf(4, 5, 6, "this string will give error"),
    arrayOf(7, 8, 9)
)

2D arrays with dynamic size

To create 2D lists where we don't have a fixed known size, we use mutableListOf<MutableList<T>>() declaration where T is the data type we expect the inner lists to hold. We don't pass any initial value because the array will be populated using some logic later.

Let's look at it in action:

val list = mutableListOf<MutableList<Int>>()

// The elements within the inner lists can be anything, the numbers below are just an example.

// `repeat()` takes in a number and iterates from 0 to number-1
repeat(4) {
    // `row` is a new row in the array
    val row = mutableListOf<Int>()

    repeat(4) { col -> // `col` is a new column in the row, ranges from 0 to 3
        row += col
    }

    // Append the row to the array, can also use the `add()` function
    list += row
}

// for each list in the list, print its element in matrix form
for(sublist in list) {
    for (j in sublist.indices){
        print("$j ")
    }

    println() // new line after each row
}

/*
You can also access particular elements like:
list[0][0] -> First element of the first row
or
list.get(0).get(0) -> Same as above
*/

This code outputs the following:

And hence we can create dynamic lists in kotlin as per our needs.

N-Dimensional Arrays in Kotlin

Using the approaches discussed above, it wouldn't be hard to create 3D, 4D or even more dimensional arrays.

If the dataset you have is known, you can use the arrayOf() function, or to have variable array data, you can go ahead with mutableListOf() functions to create the arrays.

Conclusion

In this tutorial you learned about the arrays and mutable lists in kotlin using arrayOf() and mutableListOf() functions.

These functions help you to create arrays and lists of any data type in Kotlin, to store values and perform actions based on that data.

I hope you find this tutorial useful. Share it with your friends who are beginning with kotlin!

How to Create a Pull Request in GitHub Correctly

Gourav Khunger — Wed, 06 Apr 2022 07:50:23 +0000

A major aspect of open source is the ability to create and maintain a community of developers who collaborate on building software together. Collaboration is a key component of open source development!

Read this article at genicsblog.com

Git and GitHub are popular open source collaboration tools. Git helps you keep track of changes to your code, and GitHub helps you share your code with others. In this article we will teach you how to create a pull request in GitHub in the correct way.

We will use this demo repository to demonstrate the process on collaboration. Feel free to play with it and see how it works. Follow along the tutorial below.

1. Fork the Repository

Forking a repository means you are creating a copy of the repository to your own GitHub account. This makes a clone of the repository that you can work on.

Any changes to your fork will not affect the original repository! Thus, it is kind of a playground area for you to experiment with code/files.

To fork a repository, simply press the Fork button on the top right corner of the repository page:

This creates a new repository in your account.

2. Clone the Repository

Cloning a repository means you are downloading the repository to your computer. This creates a folder that you will work on.

Run this command in your terminal

git clone https://github.com/<your-username>/PRs-demo

This will clone the repository to a folder names PRs-demo which you can cd into:

cd PRs-demo

3. Create a New Branch

Branching is a way to work on a different version of files in a project with Git version control. Creating a new branch is effective when you are working on a new feature or bug fix. Here's why:

It helps to keep changes organised and clean.
It separates changes from working code in main branch. In case of broken code, you can easily revert to the main branch.
This also helps your fork's main branch clean once your PRs are merged (more on this later).

Run this command in your terminal:

git checkout -b <new-branch-name>

Here, <new-branch-name> is the name of the new branch. It can be anything like: bug-fix, feature-1, feature-2, etc. For simplicity purpose you can keep it learning-about-prs.

The -b flag is used to create a new branch, and checkout asks Git to switch to that new branch we created.

To verify that you have correctly switched to the new branch, run:

git branch

This should output something like this:

* learning-about-prs
  main

The * verifies that you are currently on that branch.

4. Make Changes

Now you can make Changes to the files in the project. Here, we just have a README.md file. You can edit it and add this sentence to the end of the file:

- This line was added by [<Your Name Here>](https://github.com/<your-username>).

Make sure to replace <Your Name Here> with your name and <your-username> with your GitHub username!

5. Commit your changes

Committing your changes is crucial to save the current state of your project.

You can check the current state of your project by running:

git status

This tells us which files have changes that are not committed yet. The output would be something like:

On branch learning-about-prs
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
    modified:   README.md

Now, we can prepare the README.md file to be committed. Files that have finalised changes and are ready to be committed are moved to the staging area. Git only commited files that are staged, which provides us even more flexibility.

git add .

This adds all the changed files to the staging area. Optionally you can handpick files to be added.

Now, you can make a commit by running this command in your terminal:

git commit -m "<Commit Message>"

Here -m flag lets us add a message to our commit. This message is helpful for other people viewing change history of the project. Replace <Commit Message> with a short summary of the changes you made. For example: "Added a new line to the README.md file".

6. Push changes to your fork

Now that you have committed the file locally, you need to send this file over to your fork present on GitHub.

NOTE: GitHub doesn't automatically know about your commits made locally. You need to push the commits yourself.

Since you have made changes to learning-about-prs, you can push them to GitHub with this command:

git push -u origin learning-about-prs

Here we are asking git to push our changes to the branch learning-about-prs on the origin present on GitHub (your fork).

-u sets the upstream for current branch so that you don't have to type origin learning-about-prs everytime. From the next time, even if you type git push it will push to learning-about-prs branch on GitHub.

Additional Note:

Here, origin is linked to your fork. You can verify it by running this command in your terminal:
git remote -v
This should show the push and fetch links which point to your fork.
If you change these links by using git remote rm origin and git remote add origin <new-link>, the commits will be sent to new remote then!

7. Make the PR

Once you push your changes to GitHub, open the fork on GitHub. You will be able to see a a notification regarding the new commits to learning-about-prs branch.

Press the Compare and pull request button and you will be presented with an interface to create a pull request.

Enter appropriate Title and Comment to our PR. This helps the reviewers know what changes you are making to the repository.

Once you are done with adding the metadata to the PR, go ahead and press the "Create Pull Request" button.

Congratulations 🥳

You've successfully made a Pull Request to a repository on GitHub!

Using these steps you can create a Pull Request to any repository on GitHub!

(Optional) Useful Information

I forgot to make some required changes but made a PR, do I have to make a new one now?

Absolutely no! GitHub is smart enough to handle this. You can't create more than one PR from a single branch. This means that you can add more commits to the current branch and as soon as you push them, they will automatically go to the existing PR.

Just add as many commits you want, to the branch and use git push. That will send the commits to the existing PR, avoiding the need to create a new one from scratch!

Why do we create a new branch in the first place?

There are quite a few reasons to it. The main one being it maintains a separation of concerns. One can work on differnt number of features at the same time without affecting existing working code.

This also helps teams to assign different features to different people and collaborate on different parts of projects in realtime.

Another reason is, once the reviewers approve and merge your changes, it adds a new commit to the original repository.

Now your fork would get left behind because it doesn't automatically pull new changes from the original source.

GitHub provides us with Fetch upstream button to keep our fork in sync with the remote repository.

Pressing Fetch and merge gets changes from original repository to our fork allowing us to keep the fork up to date.

If we had made changes directly to the main branch, it could cause merge conflicts as our fork would have different commits than original repository.

Also, this could pollute the new PRs with old commits if the main branch of fork isn't kept up to date with original repository.

What is a good place to start with open source?

Genics Blog is an open source developer publication where we do a lot of open source work. We are a high school student run organisation. Join our community on Discord to learn about opportunities from experienced developers and get involved!

Further Resources

Check out this video where I use the steps taught here to create a PR to the theme-files repository for Genics Blog on GitHub:

Watch at 1.25x speed for better experience :)

Conclusion

This was a long but to the point Guide to create Pull Requests on GitHub which can help you to contribute to open source projects on GitHub.

If you find this guide helpful, or have any related questions feel free to comment or join our discord to get help.

Share this article with people who are new to open source world!

15 underrated HTML attributes every web developer should know

Abhiraj Bhowmick — Sun, 13 Feb 2022 14:37:32 +0000

HTML may not be a programming language per se, but there's no doubt in the power it possesses. We often depend on external javascript libraries for some basic tasks, but need for some of them might end today!

Pro tip: Save time by listening to the audio of this article at Genics Blog

In this article we will discuss about 15 HTML attributes you probably did not know, but need to know for sure.

Let's get started!

1. Autocomplete

The autocomplete attributes specifies whether the browser is allowed to aid in filling out the form fields or not. If turned on, it will assist users with autofilling options such as email, phone numbers, nationality, and so on.

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

You can check out all the autocomplete values from the MDN docs.

2. Download

The download attribute on an anchor tag specifies that the file/object should be downloaded to the local storage when a user clicks on the hyperlink.

<a href="document.pdf" download>Download PDF</a>

3. Contenteditable

The contenteditable attribute allows the user to edit the content of an element.

<div contenteditable="true">
  You can now edit this text!
</div>

4. Readonly

The readonly attribute specifies that an input field is read-only and can't be edited.

<input type="text" id="sports" name="sports" value="golf" readonly>

A user can still highlight it, and copy the text. To forbid those actions, use the disabled attribute instead.

5. Accept

The accept attribute states which file types are allowed to be selected in the input.

<input type="file" accept=".jpg, .png">

This attribute can only be used on an <input> tag with type="file". To allow all files of specific media type, use an asterisk beside its name. For example, accept="image/*".

6. Autofocus

The autofocus attribute indicates that the particular element should be focused on page load.

<input type="text" autofocus>

Note: Only one element in the HTML document or a dialog may have the autofocus attribute. If applied to multiple elements only the first one will receive focus.

7. Hidden

The hidden attribute specifies whether or not the element is visible.

<p hidden>I am invincible 💪</p>

8. Spellcheck

The spellcheck attribute defines whether the element is checked for spelling errors.

<p contenteditable="true" spellcheck="true">Cehck mai spellnig</p>

9. Controls

The controls attribute specifies whether or not the audio/video controls should be displayed on the default player.

<audio controls>
  <source src="rick_roll.mp3"  type="audio/mpeg">
</audio>

10. Autoplay

The autoplay attribute ensures that the audio/video will automatically start playing as soon as it is loaded.

<video autoplay
  src="https://cdn.mysite.com/media/myvideo.mp4"
  poster="image.png">
</video>

11. Cite

The cite attribute is used to point out where a an element's content is taken from, or referred to.

<blockquote cite="https://genicsblog.com/">
  <p>An awesome publication for developers.</p>
</blockquote>

12. Datetime

The datetime attribute specifies the date and time when the text was deleted/inserted.

<p>
  My plans for 2023 include joining Google as a SDE,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p>

13. Async

The async attribute ensures the script is executed asynchronously with the rest of the page.

<script src="https://icanheckyou.com/heckingScript.js" async></script>

Note: The async attribute has an effect on external scripts only.

14. Defer

The defer attribute ensures the script is executed when the page has finished parsing.

<script src="https://anotherhecker.com/heckingScriptAgainCozWhyNot.js" defer></script>

Note: The defer attribute has an effect on external scripts only.

15. Inputmode

The inputmode attribute hints at the type of data that might be entered by the user while editing the element or its contents. It also helps the mobile browsers to display the keyboard in the appropriate mode.

<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />

Thanks for reading!

I hope this article was able to help you learn more about HTML and share some knowledge with you.

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources!

GitHub Repositories to Crush any Programming Interview!

Arindol Sarkar — Sun, 13 Feb 2022 13:45:16 +0000

Programming Interviews may be frustrating and tough. If you have any phobia regarding programming interviews, have no fear, because this articles is for you.

Pro tip: Save time by listening to the audio version of this article at Genics Blog

Today I'll be disclosing some repositories, you can visit to ace in any programming interviews. These were rated based on popularity, usability and reliability.

1. Coding Interview University

This repository helps students prepare for companies like Amazon, Microsoft, Apple, etc. Some of the key features are :

This is my multi-month study plan to become a software engineer for a large company.
If you missed out on getting a degree in computer science, this will catch you up and save four years of your life.
Note this is a study plan for software engineering, not web development. Large software companies like Google, Amazon, Facebook and Microsoft view software engineering as different from web development.
The repository carefully differentiate between the topics, into Planning, Topic, and optional topics to cover to get a edge over others.
It's a long plan. It may take you months. However, if you are familiar with a lot of this already it will take you a lot less time.

2. Tech Interview Handbook

It has curated interview preparation materials for busy engineers. Some of the key elements are :

There are free and curated technical interview preparation materials for busy engineers, brought to you by the author of the Blind 75 list.
Besides the usual algorithm questions, it includes "Best practice questions for coding interviews", "How to prepare for coding interviews", "Straight-to-the-point Do's and Don'ts", "Algorithm tips categorized by topic", and many more.
This repository has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation. Technically competent candidates might still find the non-technical content helpful.
The key to succeeding in technical interviews is consistent practice. It doesn't bore you with too many words, and keeps everything to the point.
The difference between this repository and others is that many existing interview repositories contain mainly links to external resources whereas this repository contains top-quality curated content directly for your consumption.

3. Javascript Interview Questions

This repo contains a huge list of 1000 JavaScripts Interview Questions. Some of the main features are :

Take this JavaScript Projects course to go from a JavaScript beginner to confidently building your own projects.
Take this coding interview bootcamp if you’re serious about getting hired and don’t have a CS degree.
Take this Advanced JavaScript Course to learn advanced JS concepts and become a top JS developer.
You can download the PDF and Epub version of this repository.

4. JavaScript Algorithms

It has JavaScript based examples of many popular algorithms and data structures explained. Some of the key features are :

Each algorithm and data structure has its own separate README with related explanations and links for further reading (including ones to YouTube videos).
The beginners and advanced are separated by using symbols B and A respectively.
This repository has a seperate content for each topic in a systematic way.

5. How Web Works

It helps to learn What happens behind the scenes when we type a URL in a browser. Let's look at some of the features :

If you wonder what happens behind the scenes when we type google.com in a browser, then you definitely need to check this out.
This repository goes through a lot of minute details.
This repository covers stuffs like DNS lookup, Opening of a socket + TLS handshake, HTTP Server Request Handle, The browser's high level structure, and many more.
This repository doesn't waste much time and directly dives into the topic.

6. Interview

This repo contains everything you need to prepare for your technical interview. Some features include :

Lists of books to learn algorithms.
List of websites to practice coding.
Guides you may need.
It also contains list of book specifically for job interviews and needs of industries.

7. System Design Primer

It helps to learn how to design large-scale systems. Preparation for the system design interview. Some features like:

Learning how to design scalable systems will help to become a better engineer. System design is a broad topic. There is a vast amount of resources scattered throughout the web on system design principles.
This repo is an organized collection of resources to help you learn how to build systems at scale.
This is a continually updated, open source project.
In addition to coding interviews, system design is a required component of the technical interview process at many tech companies. Practice common system design interview questions and compare your results with sample solutions: discussions, code, and diagrams.
Also contains additional for interview preparation.

8. How to secure anything

This repo contains everything you need to learn on security engineering. Like :

Its lessons are not just applicable to computer security.
This repository aims to document a process for securing anything, whether it's a medieval castle, an art museum, or a computer network.
Even you can contribute for this article.

9. Ganqqwerty

This repo has 123 essential JavaScript Questions to prepare for interview. Some features include :

This book's goal is to help javascript frontend developers prepare for technical job interviews through a collection of carefully compiled questions.
You can even get this in paperback format. This repository is still getting updated, so for early access you can visit this repository.

10. JavaScript Question

It is a long list of advance JavaScript questions, and their explanations. Some of the key features are:

From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview.
This repository gets updated daily, so new questions are added every day.
The questions also come with explanation along with answers.
The repository covers almost every single type of question, one can expect in an interview.

Thank you for reading!

I write blogs on programming, web development, and current technology trend. If you find this article interesting, do share it with others, and comment your thoughts. Follow me on twitter.

Until We Meet Again, Arindol Sarkar.

Genics Log #1: Sponsorship from BeyondWords, Open Source, Organic Stats and more

Gourav Khunger — Fri, 11 Feb 2022 09:13:38 +0000

Hello there, I hope you are doing well!

This is the first article in the Genics log series where we will be documenting our monthly progress on the blog and report what's been brewing up in the past months.

Read this article at Genics Blog

Let's get started!

Introduction

Genics Blog went open-source at this New Year, which means we started accepting community contributions for the blog.

Within a month itself, we have reached huge milestones! Here's a gist of some stats from the past month:

The Core team members increased from 1 to 5 members!
A total of 15 articles were posted in January!
A total of 40 members joined the Genics Blog discord server!
Rose from 200 monthly visitors to 500+!

How it all started

I always wanted to create a community of skilled developers who create quality content around topics!

As the new year began, I grabbed the opportunity to open source my existing blog and build a community around the existing content.

And since we chose the open source way, we quickly rose from 200 visitors/month to 500+ visitors/month!

Open Source Setup

We use GitHub for our open source projects. Everything we build around Genics is open source because we want to be as transparent as we can!

For this blog, we used Jekyll to generate the website and render all the content. The beauty of Jekyll is we can use any design template, while writing the articles in markdown format. It renders the complete site with an easy build command!

GitHub Pages works really well for hosting the website, because jekyll generates static html pages which work seamlessly with GitHub Pages.

There's a lot more to share on how the site and management works. I'd love to write articles on how we build and operate our systems completely for FREE, so keep an eye out on the developer documentation and future posts on Genics blog!

Announcing BeyondWords.io Sponsorship

Just a few days ago we got sponsored by BeyondWords.io!

BeyondWords is an AI voice and audio publishing platform that brings frictionless audio to writers, newsrooms, and businesses!

It is a platform that allows anyone to publish their written scripts in audio format to the world. In my opinion, the best part about is its text to speech AI conversion modules are far better than those of Google and Amazon as the audio it generates seems to be near human voice!

Genics Blog got sponsored by BeyondWords where they generously offered us free services to convert our articles to audio formats! You can try out the audio functionality right at the top of this post!

Stats

We have grown manifolds just because of the fact that we went open source!

Open Source

Here are the stats for the repositories under Genics Blog organization:

genicsblog.com (Main repo with posts and data files): 21 stars, 14 forks
theme-files (Basically template files): 2 stars, 1 fork
docs (Documentation website): 3 stars, 2 forks
genics-bot (Bot for the Discord server): 5 star, 1 fork

Google Analytics

Images speak louder than words!

Organic Stats

Future Plans

We are looking forward to producing a lot of quality content in the future, as well as working on improving the platform.

Here are a few examples of some things we'd work on in the near future:

Building certain tools to aid the writing process for authors at Genics Blog.
Adding table of content to the posts.
Social previews for anchor tags in posts.
Copy buttons for code blocks.
Adding some cool webmention functionality to our articles, so as to highlight who shares our articles.

And a lot more!

You can check out the issues page on theme-files repo to see what's on the roadmap.

Final Words

I'm really glad to be sharing this info with you!

Did you know we have a discord bot that sends notifications on our analytics and stats everyday 👀. I bet you, hardly anyone would do that :P

Do join us there to get notified of new posts and updates on Genics Blog.

If you find what we are doing as high school students fascinating, consider joining us and be a part of Genics Blog! Here are the ways you could contribute to it.

Looking forward to seeing you engage with the active community on our Discord server :)

10 SEO tools you need for your projects in 2022

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:49:31 +0000

SEO tools are essential for growing organic traffic, maintaining and improving rankings, and delivering the proper target keywords. There are numerous SEO tools accessible today, both paid and free.

Choosing the best SEO tool for your business or industry can be difficult and time-consuming at times.

We've hand-picked the top 10 SEO tools after extensive study. Also, we have some bonus content for you at the end. Let's get this party started right away!

1. SEOQuake

SEOQuake is a free but a practical SEO analysis tool used by many. It's on the list of one of the best SEO Tools which are completely FREE.

With the help of this tool, you can quickly start tracking and analyzing site audits and compare them with that of your competitors.

Suppose you're working on your content and want accurate suggestions to get a better ranking. SEOQuake would be the best choice for you.

You'll get a complete in-depth report of your competitors so that you can Analyze and see what improvements you need to implement in your website.

2. SEMrush

Most people utilise SEMrush, which is a really popular SEO tool. It is well-known for its ability to perform. SEMrush comes with a plethora of resources that are included in their SEO toolbox.

These resources are extremely useful for analysis and tracking websites on the inside, such as which keywords your competitors are ranking for, what pages they are, and what the monthly volume of particular phrase gets the most hits for them.

When you know this inside out as a blogger or website owner, you can make a lot of adjustments to your website and witness a significant improvement in its performance.

As a result, having these kinds of SEO tools is essential for a higher ranking. SEMrush can assist you in improving the rank of your website.

3. Ahrefs

Ahrefs is a popular SEO tool. It assists you in a variety of ways, including allowing you to make the best content decisions, thoroughly reviewing your website, offering target keywords, and much more.

It can be used as a site explorer, a content explorer, a keyword explorer, and a rank tracker among other things.

The Site Explorer, a primary features of the Ahrefs, displays the performance of web pages along with the highly regarded web pages for specific keywords and subjects.

With its keyword explorer tool, you can rapidly look at the volume of a given keyword, such as how many hits it gets per month or how many searches it gets per month.

It is widely used by digital marketers. It mostly works for backlinks and performs remarkable SEO analysis. Keep in mind that it is a paid tool.

4. Moz Pro

It's an all-in-one SEO optimization tool that includes plethora of useful resources that primarily assist you in obtaining all of the information about your competitors' rankings.

You may optimise your website from its suggestions and make it more valuable for ranking with the help of this tool.

When you start using this tool, you'll be able to get a full report on your competition, which I believe is the greatest approach to figure out what's working and what's not, so you can optimise your website and attain a higher Google ranking.

5. AnswerThePublic

This tool is mostly used for keyword research and analysis. Assume you're seeking for a program that focuses largely on keywords so you can evaluate the websites of your competitors.

You'll get amazing insights into other websites that are doing great, as well as helpful suggestions for your own website, such as what you should do to improve your ranking.

Many users report increased traffic and conversions after employing these solutions!

6. Keyword Hero

Most of the times we write articles without doing proper keyword research. We do not optimize our posts to target specific keywords which we want the article to rank for.

Have you considered which specific keyword your visitors search on Google before clicking on your website? If you know those keywords, I'm sure you'll focus primarily on maintaining rankings for those!

And for both the above reasons, Keyword-Hero is great because it lets us do comprehensive keyword research and it also assists you in a variety of methods!

7. SpyFu

It's a fantastic tool for analysing competitors!

Spyfu is a reliable tool for spying on your competitor's website keywords if you want to track each step, get detailed insights for ranking, and see what your competitors are up to.

8. SeoMater

It's a one-of-a-kind SEO tool that includes SEO auditing and a website crawling tool!

With this tool, you may perform on-page optimization based on the analysis of your competitors.

It's a really professional application that keeps you up to date with reports and essential suggestions that you should review and implement in your websites for higher Google rankings!

9. ContentKing

Here's a tracking tool that meets all of your needs. If you're searching for a bundle tool that has all the capabilities you need, I recommend ContentKing because it offers practically everything you need.

It's a tool that works 24 hours a day, 7 days a week to provide you with complete in-depth details on your competitors' websites.

Because you'll get an accurate audit of your competitors' websites when you use Content King, you could implement the strategies that work for them that'll get you a higher chance of gaining a better rating.

10. Woorank

According to the reports, this is one of the best SEO analysis tools. This tool has a wide range of applications due to the fact that both the free and paid plans perform admirably. I recommend that you start with its free plan and then upgrade if you're happy with it.

You may track and analyse your competitors' websites using Woorank. This tool provides you with comprehensive reports.

You can see which keywords your competitors rank higher for and how you may improve your own rankings. This tool will tell you where you're falling short and what improvements you may make to improve your rankings.

Bonus Tools

Here's another list of 4 other Must-Have Free SEO Tools For Everyone that will help you with SEO analysis and growing in rankings!

Originally published at genicsblog.com

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my articles, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources.

5 projects you can make to become a better web developer

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:47:41 +0000

The demand for web developers is growing as web development becomes more popular in the market. Web development has evolved as a viable field, attracting students and professionals from a wide range of academic and professional backgrounds.

Working on web development projects is the ideal approach to gain experience in this sector if you're also interested in it. Your skills will improve the more you practise and experiment with web development projects.

1. Simple Clock

It's a simple app that you can develop using HTML, CSS and basic JS for functionality. In this project, you have to build a simple webpage and then update the time.

To make it more attractive, you can add start, stop features. Also, you can add an alarm function, ringtone function for alarms, Etc.

2. Weather/News App

Making a weather/news app will test your skills, and in this project, you can use two APIs:

One to get the user's location.
Another to fetch weather data based on the user's location.

As a beginner, having this project in your resume will help you stand apart from the crowd.

3. To-do list

It's one of the best and simple projects that you can develop using HTML, CSS and JS. This project will help you to store your personal to-do lists and it will be saved in your local storage, which can be accessed anytime.

Moreover, even if you host the app, the data will be stored in the user’s computer's local storage which will maintain privacy.

4. Forms

HTML, CSS, and JavaScript can all be used to make forms. You can create a gorgeous landing page design with a little effort and attention. You can begin with a modest project, such as designing a survey form or a consultation form, depending on the type of business you're starting.

Name, address, e-mail, date of birth, phone number, and other pertinent information can be included in the form. You can send the form to your friends and see what they have to say!

Companies nowadays use survey forms to gather information from their target audiences. In addition, having a landing page project on your resume will be a bonus!

5. Coinflip

This is the most unexpected item on the list but it can prove to be very helpful in the long run. You can learn about using the random method to derive a random result from an array of options.

We all know that getting a random value on is very hard, but certain functions utilise computations to deliver a result that appears random enough.

Conclusion

These were the top 5 web development projects. All of the projects listed are beginner-friendly, and working on them will help you improve your web development abilities and enhance your career.

Origninally posted at genicsblog.com

Thank you for reading

If you liked this post, you can subscribe to my newsletter
to never miss out on my blogs, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources.

5 CSS methodologies you need to know in 2022

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:41:02 +0000

In large, complicated, rapidly-iterated systems, CSS is notoriously difficult to maintain. The lack of a built-in scoping mechanism in CSS is one of the reasons.

In CSS, everything is global. Until CSS gets its native scoping mechanism, we need to devise our own system for locking down styles to specific sections of an HTML document. CSS methodologies are the solution.

In this article, we will take a look at the CSS methodologies you need to know in 2022!

1. Object-oriented CSS

OOCSS concepts help us write components that are flexible, modular and interchangeable.

For example, the style of your button elements might be set via two classes that you have given the class of:

.button — Provides the button’s basic structure.
.grey-btn — Applies colors and other visual properties.

CSS:

.button {
    box-sizing: border-box;
    height: 50px;
    width: 100%;
}

.grey-btn {
    background: #EEE;
    border: 1px solid #DDD;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px;
    color: #555;
}

HTML:

<button class="button grey-btn">
    Click me!
</button>

2. Atomic CSS

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Example:

Colors are set using hexadecimal values. Alpha transparency is created by appending the opacity value to the hex color.

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

3. BEM

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

Example:

<form class="loginform loginform--errors">
    <label class="loginform__username loginform__username--error"> 
        Username <input type="text" name="username" />
    </label>
    <label class="loginform__password">
        Password <input type="password" name="password" />
    </label>
    <button class="loginform__btn loginform__btn--inactive">
        Sign in
    </button>
</form>

The .loginform class is a block composed of three elements:

Element	Purpose
loginform__username	Takes in the username
loginform__password	Takes in the password
loginform__btn	Allow the user to submit the web form

4. SMA CSS

SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.

Example:

Let’s say our layout is called .l-footer. We have a search form module inside it. The search form has already been submitted at least once by the user.

<section class="l-footer">
    <form class="search is-submitted">
        <input type="search" />
        <input type="button" value="Search">
    </form>
</section>

5. Systematic CSS

Systematic CSS shares many of the principles and ideas you can find in OOCSS, BEM, SMACSS, SUIT CSS, and other CSS methodologies. Systematic CSS is meant to be a simpler alternative to existing CSS methodologies.

Example:

Here’s the markup for two widgets that render a navigation bar and search form:

<!-- navigation bar --> 
<div class="NavBar">
   <ul>
      <li><a href="./">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="learn/">Learn</a></li>
      <li><a href="extend/">Extend</a></li>
      <li><a href="share/">Share</a></li>
   </ul>
</div>

<!-- search form --> 
<div class="SearchBox">
   <form action="search.html" method="get">
       <label for="input-search">Search</label>
       <input name="q" type="search" id="input-search" />
       <button type="submit">Search</button>
    </form>
</div>

Content — in the form of widgets and naked HTML elements — is then placed within the layout. Finally, modifier classes are added to vary the default presentation of things.

Conclusion

By providing a class-based approach for dividing up large web designs into many small, modular, distinct components, all CSS techniques address the scalability and maintainability challenge in CSS.

Each UI module can be reused throughout a design and even ported from one project to the next if the CSS methodologies are the same. CSS approaches do a lot more than just solving the CSS scalability issue.

Origninally posted at genicsblog.com

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my articles, product launches, and tech news!

DEV Community: Genics Blog

9 Hand Picked FREE Heroku Alternatives [2023]

1. Deta

Pros

Cons

2. GitHub Pages

Pros

Cons

3. Oracle

Pros

Cons

4. Cloudflare Pages

Pros

Cons

5. Vercel

Pros

Cons

6. Railway

Pros

Cons

7. Render

Pros

Cons

8. Cyclic

Pros

Cons

9. Fly.io

Pros

Cons

Notable mentions

Conclusion

Genics Log #2: Sponsorship from Vercel, Theme updates, Organic Growth and more

Staging ENVs with Vercel

Previous setup

Vulnerability in main repository

Sponsorship from Vercel

Theme updates

Paginating author pages (#7)

Shortcut commands (#10)

Copy button for code blocks (#1)

Spam comments

Other updates

Stats

Open Source

Google Analytics

Organic Stats

Final Words

Kotlin: Multi-dimensional Arrays

Pre-requisites

2D Arrays in Kotlin

2D Arrays with pre-defined data

2D arrays with dynamic size

N-Dimensional Arrays in Kotlin

Conclusion

How to Create a Pull Request in GitHub *Correctly*

1. Fork the Repository

2. Clone the Repository

3. Create a New Branch

4. Make Changes

5. Commit your changes

6. Push changes to your fork

Additional Note:

7. Make the PR

(Optional) Useful Information

I forgot to make some required changes but made a PR, do I have to make a new one now?

Why do we create a new branch in the first place?

What is a good place to start with open source?

Further Resources

Conclusion

15 underrated HTML attributes every web developer should know

1. Autocomplete

2. Download

3. Contenteditable

4. Readonly

5. Accept

6. Autofocus

7. Hidden

8. Spellcheck

9. Controls

10. Autoplay

How to Create a Pull Request in GitHub Correctly