DEV Community: Okoro chimezie bright

I NEED HELP CAN SOMEONE SHARE THEIR EXPERIENCE IN USING HOSTINGER VPS FOR HOSTING WEB APP BUILT WITH ANGULAR,NODE.JS?

Okoro chimezie bright — Mon, 01 Jul 2024 10:28:07 +0000

I NEED HELP CAN SOMEONE SHARE THEIR EXPERIENCE IN USING HOSTINGER VPS FOR HOSTING WEB APP BUILT WITH ANGULAR,NODE.JS,POSTGRESQL OR DJANGO?

Please share your experience if it is managiable from developer point of view,i understand that we manage the server by ourself,is it developer-friendly?, looking forward for your honest reply in the comment section,so i can learn from you all thanks. we have some applications to go live with cost-effective.

How to install Bootstrap 5 in Angular 17... Standalone components Including css,js & icons.

Okoro chimezie bright — Sun, 10 Mar 2024 14:05:34 +0000

Sometimes as a beginner in angular you wonder why so many tutorials in youtube and paid courses skip to include the bootstrap js and bootstrap-icons,while in realities you need all this goodness of bootstrap to build a powerful user interface for production purposes.

That has created a learning gap in the community of angular developers for easy on boarding for a beginner to the UI tools like bootstrap.

Tooling make our life a bit easier rather than spending time writing basic functionality like toggles and reactivities that does n't need business logic.

One will be thinking how can i use bootstrap via installation process so my app will not wait for network CDN LINKS to load the things that my application needs ?.

If that is your case in your angular journey we will show you a beginner friendly way to do it step by step.

We assume you are familiar with your basics like HTML,CSS,JAVASCRIPT,TYPSCRIPT & ANUGULAR BASICS.
That out of the way let's jump into it.
please note you must have node installed alrady for you to run the Angular cli.
for node download here is the link:

Step 1 : To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Step 2 : Run the CLI command ng new to create your workspace project name eg name my-app, as shown here:

ng new my-app

Step 3 : Navigate to the workspace folder, such as my-app,Run the following command:

cd my-app

ng serve --open

Step 4 : The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

Congrats: my-app is runing in localhost.

On your keyboard Ctrl + c to stop the server.

Step 5 : To install bootstrap run this command in your terminal.

ng add @ng-bootstrap/ng-bootstrap

Just say yes by hiting your enter key on your keyboard then angular will configure everything for you.

Step 6 : To install bootstrap-icons run this command in your terminal.

npm i bootstrap-icons

Step 7 : Include the bootstrap-icons in your global styles.css to use it like this

file name : styles.css

@import "bootstrap-icons";

on top of your styles.css.

Step 8 : Include the NgbModule in your app or standalone components like this.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

In my case file name : app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet,NgbModule,RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})


export class AppComponent {
  title = 'my-app';
}

Congratulations your are done enjoy!!! .

We can now build an example test project to see if everything is working well.

Let's build a responsive navbar featuring those toggles,icons in angular way.

go to your src/app/app.component.html
add the following code.


<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
    <div class="container-fluid">
        <a class="navbar-brand" [routerLink]="'.'" (click)="isMenuCollapsed = true">Logo</a>

        <!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
    <div class="p-2">
        <button class="navbar-toggler  " type="button" (click)="isMenuCollapsed = !isMenuCollapsed">&#9776;</button>
    </div>
        <!-- Step 2: Add the ngbCollapse directive to the element below. -->
        <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse ">
            <ul class="navbar-nav ">
                <li class="nav-item active">
                    <!-- Step 4: Close the menu when a link is clicked. -->
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Testimonial</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Contact-us</a>
                </li>



            </ul>
    <div class=" col-md-7  text-end p-2">
        <button type="button" class="btn btn-outline-light me-2 ">
            <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">
                <i class="bi bi-person"></i> Login</a>
        </button>
        <button type="button" class="btn btn-warning ">
            <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">
                <i class="bi bi-person-add"></i> Sign-Up</a>
        </button>
        </div>
        </div>
    </div>
</nav>


    <h1 class="test mt-5 p-5 text-center">
        icons work {{title}}<i class="bi bi-stopwatch p-2"></i></h1>


<div class="row">
    <div class="col text-center">
        <div ngbDropdown class="d-inline-block">
            <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
                Toggle dropdown
            </button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem>Action - 1</button>
                <button ngbDropdownItem>Another Action</button>
                <button ngbDropdownItem>Something else is here</button>
            </div>
        </div>
    </div>



<router-outlet></router-outlet>

At this stage your will be geting some typscript warning so to make it go away go to your app.component.ts
to add the following.

isMenuCollapsed: any;

app.component.ts will look like this:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, 
            RouterOutlet,
            NgbModule,
            RouterLink
            ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})


export class AppComponent {
  title = 'my-app';
  isMenuCollapsed: any;


}

Congratulations the output should look like this both desktop and mobile version:

For further reading visit this links:

https://angular.io/guide/setup-local

https://ng-bootstrap.github.io/#/getting-started

https://icons.getbootstrap.com/

For source code :

https://github.com/mezieb/angular17-bootstrap5

Happy Learning

No need of memorizing, searching on google or save git commend in your notepad for beginners.

Okoro chimezie bright — Sun, 30 Jul 2023 16:07:47 +0000

If you are a beginner in web development git and github is one of the challenges you will face in personal projects,group projects and production project for a real clients.

Confusion Stage

. 1 How do i wrap my head around git and github?
First answer that will come in your mind after learning git and github from paid courses,bootcamp and youtube is i will make a folder,file and save all the git commends i will be needing as a developer on a daily bases.
2 How can i master git commends like others?
Another answer that will come to your mind is to spend time trying to memorize git commends.
3 How can i be fast to commit my task in the code base after i have finished it already but is still in my pc and is working well?
4 Oh! no how can i meet up with the deadline people are complaining they have not see my task yet?.
5 I want to try open source project but my worry is that they are senior developers who knows git commends because their is alot of heavy lifting via git and github it will slow down my pc.
6 How can i work with different frameworks within some minutes or hours intervels without my system breaking down?.

If that is your case rejoice!!!
We got you in your time the process is simplified "GITHUB DESKTOP" is the answer.
click here: https://desktop.github.com/

How do i use github desktop ?
please watch this video for step by step guide: https://www.youtube.com/watch?v=RPagOAUx2SQ&t=20s

Also watch this video for quick recap: https://www.youtube.com/watch?v=8Dd7KRpKeaE

Have fun,join any project with confidence and enjoy the power of what you can do on time like others.

How a Coding Boot Camp Helped This Learner Upskill Fast, Kickstart His Career, and Get Back on Track for College

Okoro chimezie bright — Sat, 12 Nov 2022 06:27:15 +0000

https://blog.edx.org/how-a-coding-boot-camp-helped-this-learner-upskill-fast-kickstart-his-career-and-get-back-on-track-for-college

click the link above to read the story.

senior developers check out this opportunity

Okoro chimezie bright — Sat, 12 Nov 2022 03:23:02 +0000

https://vanhack.com/vanhackcon/chimezieokor

click this link above for details.

Most popular programming languages 2022.

Okoro chimezie bright — Tue, 08 Nov 2022 14:22:36 +0000

Which are the most popular programming languages in 2022? There are different lists of the most commonly used programming languages: the PYPL ranking (monthly updated) and the list of Stack Overflow’s Developer Survey 2022.

https://www.stackscale.com/blog/most-popular-programming-languages/

Django Skills Roadmap To Getting A Job

Okoro chimezie bright — Sun, 11 Sep 2022 09:51:56 +0000

As a django beginner(junior dev)you are face with confusion of where to start because there are too many information out there for you to learn.

As a reader and a researcher I came across this blog post that is well detailed about django roadmap in to getting a job.

Please read it here to remain focus in your web development journey.
Goodluck, we got you covered.
https://dennisivy.com/django-skills-roadmap