DEV Community: Efosa Collins EVBOWE

Poem on Web Development

Efosa Collins EVBOWE — Sun, 22 Jan 2023 00:03:05 +0000

Web development is like a poem,
With code as the verse,
Design as the meter,
And user experience as the rhyme.

Each line is crafted with care,
To create a website fair,
With HTML as the foundation,
CSS and JavaScript for decoration.

The browser is the stage,
For your digital page,
Responsive design, the play,
For users on any device to engage.

Debugging is the editing,
Ensuring the website is dediting,
Deployment the final stage,
For the world to see the page.

A website is a work of art,
A poem for the digital age,
Built with love and skill,
To inspire and thrill.

Poetry every other week - Follow for updates

How I Solved Heroku H10 / 503 Error - A Story

Efosa Collins EVBOWE — Wed, 19 Oct 2022 10:35:01 +0000

It was a beautiful afternoon and the time was 2:17 pm. The sun was radiating hot and the rays of the sun were freely flashing into the room where I was coding.
By 2:30 pm I had completed the code for my CRUD todo-list which was ready for deployment according to my level of understanding.

I logged in to Heroku which is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Some months ago, I deployed a Node.js app on the platform so I decided to follow the documentation created for deploying an existing application to Heroku.

After following the documentation cautiously, I got lost then I decided to Google search with the query:

How to solve Heroku H10 error

Before this, I already searched MDN Docs for 503 error which was reported to be Service Unavailable which meant my server wasn't ready to handle a request.

From the result I got from my Google search, I was led to Heroku docs on their errors which was just about the error with nothing to solve it --as-expected.

But with the search I did on 503 and H10, it was clear to me that the only thing causing the error was my code. I searched for How to solve the Heroku H10 error again but with faith, this time and I found a blog post on Dev which listed in detail all I needed to do.

Following this post, I did this:

Bug in Procfile

I made sure there was no bug in my Procfile since a little space could trigger Heroku errors.

web: node app.js not web : node app.js

Set Heroku's PORT

I reviewed my code making sure I had set the right Heroku port for Express servers which is process.env.PORT



app.listen(process.env.PORT || 3000, function () {
  console.log("The server has started successfully");
});

Required Environment Variable

The app I created had a database and I didn't set my database URI on Heroku. All I had to do was get my Database's URI and enlist it as a Config Variable on Heroku.

Set Start Scripts

I didn't have my start script in my package.json which might have caused the app to crash so I added it to be on the safer side.



"scripts": {
    "start": "node app.js"
  }

I had already set my node engine and I was good to go.



"engines": {
    "node": "16.14.2"
  }

Finally, I did the rituals git add ., git commit -m "msg" and heroku push origin main which pushed my code to its Heroku repo.

After all the drama, I restarted my dyno with heroku restart and my site was working. I became the happiest man alive at that moment.

THE END

I hope you solve your Heroku H10 error successfully. Follow me on Twitter @ EfeCollins7. I would like to hear your comments. Thanks.

Top 5 Free Websites to Learn HTML for Beginners

Efosa Collins EVBOWE — Sat, 08 Oct 2022 14:02:32 +0000

Yeah, I would have started with a joke or something else but let's dive in.
Let me guess, you've been searching for learning HTML for free to be a boss in it. You've come to the right place.

I'll show you 5 (five) places on the web to learn HTML for free and trust me you'll be perfect but before that.

What is HTML?

HTML stands for HyperText Markup Language and it looks like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

You'll learn about it in the resources I'll be sharing.

Resources

1. freeCodeCamp

freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone.

This is where I learnt HTML and I have been good at it with everyday improvements. It covers everything necessary for you to be up to speed. You also get a certificate upon completion of projects.

2. W3Schools

W3Schools is a freemium educational website for learning to code online. Initially released in 1998, it derives its name from the World Wide Web but is not affiliated with the W3 Consortium. W3Schools offers courses covering all aspects of web development. W3Schools also publishes free HTML templates.

From learning to templates, W3Schools covers it all. You can also forward your Web Development journey with W3Schools.

3. Geeksforgeeks

A Computer Science portal for geeks. It contains well-written, well thought and well-explained computer science and programming articles including tutorials.
They also provide practice quizzes if you want to test yourself.

4. ValleyOfCode

The Valley of Code is a project by Flavio Copes. This site exists to provide you with helpful resources to learn how to code with a particular focus on Web Development and its technologies including HTML. 😁
You can also download his HTML handbook at the link above.

5. Learn-HTML

Learn HTML provides an interactive tutorial that explains how to build HTML & CSS websites step by step.

I hope you find an amazing resource for you to learn on/with. My name is Efosa Collins EVBOWE and I will write to you next week.

You can follow me on Twitter @ Efe Collins. Do have a nice week!

Blog-template made with EJS, Node.js & Express.js

Efosa Collins EVBOWE — Thu, 08 Sep 2022 09:52:56 +0000

The application is built with Node.js, Express.js, EJS, Lodash and CSS together with Body-Parser. The said technologies were used for reasons such as speed, efficiency and readability since most developers have a working knowlegde of JavaScript.

Working with EJS and request handlers was quite the pain and this is the fruit of the pain.

Installation

Clone repository with the command git clone <url> ```

$ git clone https://github.com/efecollins/blog-template-ejs.git


- Run `npm i` in your terminal to install `node_modules` and all dependencies in `package.json`

$ npm i

- Run `nodemon` in your terminal if installed to start the node server and watch for changes in `app.js`

$ nodemon


- Or run `node app.js` to start the server if `nodemon` is not installed

$ node app.js


- The following message should be logged to your console signifying success.

Server started on port 3000


- Make changes as you are pleased

## More Info
- To compose a new post enter `localhost:3000/compose` in your web browser's search bar.

- To compose a new post in the live site visit [https://busy-blue-agouti-cap.cyclic.app/compose](https://busy-blue-agouti-cap.cyclic.app/compose)

- Contributions to this project are allowed provided they make the template easy to use



![Twitter Follow](https://img.shields.io/twitter/follow/EfeCollins7?color=blue&style=social)

Blog-template made with EJS, Node.js & Express.js

Efosa Collins EVBOWE — Thu, 08 Sep 2022 09:46:30 +0000

This is an application that serves as a blog template for potential blog creators. Perfect, if you want to create a blog yourself but not from scratch. Best for developers.

Working with EJS and request handlers was quite the pain and this is the fruit of the pain.

Installation

Clone repository with the command git clone <url>

$ git clone https://github.com/efecollins/blog-template-ejs.git

Run npm i in your terminal to install node_modules and all dependencies in package.json

$ npm i

Run nodemon in your terminal if installed to start the node server and watch for changes in app.js

$ nodemon

Or run node app.js to start the server if nodemon is not installed

$ node app.js

The following message should be logged to your console signifying success.

Server started on port 3000

Make changes as you are pleased

More Info

To compose a new post enter localhost:3000/compose in your web browser's search bar.
To compose a new post in the live site visit https://busy-blue-agouti-cap.cyclic.app/compose
Contributions to this project are allowed provided they make the template easy to use