DEV Community: Ahmed Abdelsalam

Why I Transferred My Domains From Godaddy to Namesilo

Ahmed Abdelsalam — Fri, 22 Nov 2019 18:09:52 +0000

Why I Transferred My Domains From GoDaddy to Namesilo

2 Gifts at the end of the Article.

I have been using Godaddy for more than 6 years, I bought more than 100 domains on it. Before I left I had 10+ domains on Godaddy. Here’s the receipt of the first domain I bought from Godaddy

It’s 6 years and 2 months ago. That Domain cost me about $1 at that time with a coupon (about 8EGP in my country's currency at that time).

At the time of this receipt, the regular price of a .com domain was $10 and the same for the renewal. I noticed that Godaddy is increasing the renewal price of domains every year but It didn't matter to me till I found that it was increasing by %20 over the 2018 price of$14.99.

In February 2019 I renewed a .org domain for $21.17, I thought It was expensive because it's a 3 letter domain. But when I tried to renew my .com normal domains I found it will cost me $18.17.

I made a google search and found out that only GoDaddy was increasing its prices.

So I had to look for a better and cheaper provider after checking many reviews I found that NameSilo is the best one and cheaper than Godaddy and even other providers. Check the prices at NameSilo here: NameSilo Pricing

Here are some comparisons between NameSilo and Godaddy:

Pricing

What really matters to me from this comparison:

Price of registration.
Price of renewal.
WHOIS Privacy.
30 Days period for renewing expired domains.
Accepts Bitcoin

This will save me about 40% of the cost for each year as I pay for many domains renewal.

The First Gift

The good part here and the gift for you guys is that you can transfer your domain at that low price and a $1 discount for each domain all you need is to use one of these coupons

medium1usd

mediumcoupon

So now If you are going to buy a.com domain from NameSilo you will save $7 per domain with the discount coupons medium1usd , mediumcoupon

The Second gift

If you’re looking for free hosting for your websites here’s a $50 in FREE Hosting Credit on DigitalOcean

Digitalocean Promo Code — Yup, $50 in FREE Hosting Credit!

Ahmed Abdelsalam — Sat, 12 Oct 2019 11:18:51 +0000

Digitalocean Promo Code — Yup, $50 in FREE Hosting Credit!

Hey friends, if you’re building things on the web then DO is a great service for spinning up just about anything. I have sites running there and some scripts as well, $5 per month for a VPS you can’t beat it. Being that I’m such an awesome guy I’d like to offer you my Digitalocean promo code so you can get a free credit when opening up your account. Just use the link below to apply your promo code before signing up.

–>> Get your $50 in FREE hosting credit HERE

From there you’ll be on your way to set up something slick on a reliable host. You’ll also have some free hosting credit to use for a while. If you’d like to learn more about Digitalocean, here is a review I put together for you.

From there you’ll be on your way to setting up something slick on a reliable host. You’ll also have some free hosting credit to use for a while. If you’d like to learn more about Digitalocean, here is a review I put together for you.

DigitalOcean, Future of the Cloud — A Review

Cloud hosting battle lines have been marked and world markets are awarded to the winners. Behemoths in the cloud space have been adding services at an unparalleled pace. Tremendous opportunities are creating new companies daily, touting unique, if not identical services.

DigitalOcean has carved out a defined niche in the cloud. As of 2018, the corporation was the third-ranked cloud provider in the world. Founded in 2011, DigitalOcean is miles away from the fierce tech battlegrounds of Silicon Valley and the Pacific Northwest. Simplicity with architecture and pricing, DigitalOcean provides reliable infrastructure to scale applications worldwide.

What makes DigitalOcean Unique?

Aimed at the developer community, DigitalOcean boasts 12 data centers located around the globe. The cloud-hosting company touts its fundamental theme as a” VPS image can be deployed within 60 seconds.”

Logging into the service is uncomplicated. Supply a few items of vital information, the name of your project and off you go.

Digital Ocean’s dashboard is clean and uncluttered, your applications waiting. DigitalOcean bills by the month and only for the services employed. With other cloud-hosting providers, developers must proceed to higher tiers for root access, not with DigitalOcean. Users are billed by the deployment of 1) Ram 2) CPU 3) SSD Disk Space 4) Bandwidth. Keep in mind though, if you use a Digitalocean coupon you can save on your initial billing costs.

What is a Droplet Anyway?

Droplets are virtual machines developers create with a blend of resources. Hit the “Create Droplet” button to encounter what is under the DigitalOcean hood. Users are overwhelmed by the number of choices. Scrolling down the page, developers realize why DigitalOcean is advancing at such a remarkable pace.

Droplets in DigitalOcean ties the platform together. Unlike other disparate cloud-hosting providers, the DigitalOcean ecosystem is a rational evolution from one service to another. Example; create a droplet as your demands and business grow, then add resources like block storage and automatic back-ups later on. Each service on DigitalOcean can be transferred to different droplets and within data-center regions for optimized networking.

The initial thing members are asked to do when creating a droplet is to choose an image. Choices range from popular Linux distributions, like Ubuntu 18.04 x64 to Debian and CentOS. Container distributions include CoreOS, Fedora Atomic, and RancherOS.

DigitalOcean provides developers a robust marketplace for one-click configurations.

A Few of DigitalOcean’s Marketplace Image Choices :

Akaunting ; free accounting distribution. Modular design and quick deployment.
Claudron ; an end-to-end solution for running a host of familiar applications. Automated DNS and user management.
cPanel and WHM; one of the most popular website user management solutions available. The app allows developers to build websites, create emails, and maintain their domains.
Discourse ; next generation discussion forum.
Docker ; a global brand for container production and administration. Plenty of support and tutorials come with this distribution.
Ghost ; a platform to build modern blogs.
GitLab Enterprise ; end-to-end developer automation. Source code and unlimited scaling.
Mastodon ; create a framework for all your social development needs.
NodeJS ; build scalable networks across distributed devices.
Shopware ; next-generation e-commerce platform. Combine with a WordPress droplet to provide incredible flexibility.

After choosing a model for your droplet, determine the best plan for your application. 1) Starter; optimized for modest projects such as blogs and developer testing. 2) Performance; broken down into a General Purpose, or CPU Optimized virtual machine.

DigitalOcean offers members and developers a huge number of programs and compositions. Developers can customize each subscription plan throughout the configuration process and each method provides automatic scaling.

A Few DigitalOcean Value Oriented Hosting Plans + Promo Codes and Coupons

Standard Configuration :

$5 mo. or $.007 per hour: 1) 1 GB/1 CPU. 2) 25 GB SSD Disk. 3) 1000 GB Transfer.
$80 mo. or $.119 hour: 1) 16 GB/ 6 CPU’s. 2) 320 GB SSD Disk. 3) 6 TB Transfer.

Performance Configuration :

$240 mo. or $.357 hour: 1) 32 GB/8 CPU’s. 2) 100 GB SSD Disk. 3) 6 TB Transfer.
$1200 mo. or $1.786 hour: 1) 160 GB/ 40 CPU’s. 2) 500 GB SSD Disk. 3) 9 TB Transfer.

The above hosting configurations are individual droplet plans. Just remember to use my link to get yourself the $50 promo code when signing up. Digital Ocean does a commendable job of bringing value to their services, such as data transport is per account rather than each droplet. Also don’t forget to use a DigitalOcean promo code and get the $50 in free credit applied to your account.

DigitalOcean provides a unique solution for developers needing more storage without adding additional processing power and cost. Block Storage acts as a generic device linked to any droplet. Block storage has several practical functions for rapid deployment within a droplet. 1) Temporary backups 2) RAID Arrays 3) Web server.

Choose an available data center point along with other options, such as a private network and monitoring tools. Developers can include an SSH key to their droplet for root entry if extra security is called for.

Choose your host name for the project, add tags for easy lookup later on and hit the “create” button. There you have it, a customized production ready VPS solution with unlimited scaling ability.

Kubernetes

The open-sourced cluster management tool developed by Google in 2014 is spreading to every corner of the globe, Fast!. Developers are discovering time to production for their applications have been cut dramatically. Every cloud-hosting company provides some type of Kubernetes management tool along with Docker integration. DigitalOcean provides an easy to configure, cluster production and administration tool. Members with little to no experience, find the process of creating a DigitalOcean Kubernetes cluster easy and natural.

Full production documents, tutorials, and a complete resource center are made available to any member willing to learn this fascinating platform. Creating a Kubernetes cluster is easier to create than a droplet if you can imagine that.

How to Design a Cluster in the DigitalOcean Dashboard :

Determine which Kubernetes version you prefer, the latest is 1.14.2-do.0
Select an available data center.
Decide on capacity, machine type, memory, and your desired number of nodes. Digital Ocean makes it easy to build additional nodes at setup.

Choose your name for the project, click “create cluster” and you have a production ready Kubernetes Cluster environment.

DigitalOcean API

The DigitalOcean API is a powerful control mechanism like no other cloud-hosting platform. Manage droplets and all other DigitalOcean services using HTTP requests. Using the API, developers can generate requests by the GET method.

Some of the intelligence developers can obtain by applying the DigitalOcean API:

Account status.
Domain records.
Droplet information.
Kubernetes cluster information.
Project resources.

Networking

DigitalOcean has taken value oriented networking services to a new standard. Along with the typical internet protocols, DigitalOcean provides “Private Networking” The service allows a supplementary network interface not opened to the internet.

Private networking lets droplets interact with one another within the same geographic region. Network traffic to and from a private network does not count toward a monthly bandwidth cap.

Floating IP is another extraordinary component to networking within DigitalOcean. A Floating IP is a static address, which gives developers the capability to move network traffic to any droplet. Developers can configure the protocol when constructing their droplet.

Load balancers let a developer distribute network traffic across virtual servers and geographic zones. Unlike other platforms, DigitalOcean manages its load balancer with no setup or user configuration necessary. Like all other services, the DigitalOcean API can access and administer network protocols and their status.

DigitalOcean continues to dominate its smaller rivals by a large margin. Will the cloud-hosting provider from the east ever be as vast a beast as other major players in the space? Let’s hope not. Considering you can use the DigitalOcean promo code to get a free chunk of hosting credit, it’s really a no brainer.

–>> Get your $50 in FREE hosting credit HERE

Drawing a Minion with CSS

Ahmed Abdelsalam — Fri, 29 Mar 2019 18:18:07 +0000

Quick Video on how I created a Minion with CSS

Drawing Minion with #css #css3 pic.twitter.com/eOcvteabzm
— Ahmed ⚯͛ (@geeksamu ) March 28, 2019

Here's the code https://codepen.io/geeksamu/pen/OqKRom

Why I built Medium Plus

Ahmed Abdelsalam — Tue, 05 Feb 2019 22:40:39 +0000

source

Hello guys,

I’m Ahmed Abdelsalam, A freelance Web Developer, Blogger, and TEDx Speaker.

I changed the theme of my blog at the end of 2018, Building a simpler theme with better typography, multiple themes, and other features. After finishing the theme I said to myself why don’t we have similar features for a great website like Medium.

Features Like:

Dark theme.
Customizable font-family.
Customizable font-size.
Offline Articles.
Highlighted Code.
Listen to articles instead of reading.

All these features will make my medium experience better. Besides, finishing more articles listening to them at any time.

In the beginning, I thought about creating a chrome extension to add all these options to Medium, but It took me some time to realize that I can’t use this extension on my phone. I prefer reading on my phone, so I decided to create a tool that gets the article from Medium and enhances it with all the features above.

I know it’s not perfect, but I really tried so hard to do my best building every piece of this tool.

Let’s talk about each feature.

Dark Theme

I built a second dark theme, as I prefer the dark themes at everything. It won’t stop at the currently light and dark themes. I’m planning to build more themes that fit everybody. It means that if you want to use Medium Plus and want to use your own color Schema, Just contact me.

Here’s an example

Different Font Families

Medium uses a good font family but I prefer to use others and choose what I want whenever I want. That’s why I created this feature.

Font-Size Control (soon)

I’m planning to add a font-size control soon so you can choose the font-size you prefer.

Offline Articles

Every article you load in Medium Plus is saved in your browser cache so you can access them whenever you want, even without internet connection. All you need is to just load the article once.

Highlighted Code

This is one of the hardest features to build, I tried to make the code syntax highlighting experience better than it is on Medium. I just want to read the code better here instead of hosting code on GitHub Gist. Next, I’ll post some code to show you the difference between Medium and Medium Plus

import React, { Component } from 'react'
export default class App extends Component {
 render() {
 return (
 \<div\>
 Hello Medium Plus
 \</div\>
 )
 }
}

It took me some time to be able to use highlight.js in Medium Plus and use its amazing features of code highlighting.

Articles to Audio

Medium has a lot of amazing content, I really want to read more and more but I don’t have the time to finish reading all these lists of articles. Having the option to listen to your articles instead of reading them will save you a lot of time. I used a service called WebsiteVoice to add this feature to Medium Plus.

Medium Plus Image

My Plans

I’m planning to make this tool open-source as soon as possible, adding more features and I’d be really happy to add any suggestions from you guys, so don’t hesitate to leave me comments or emails.

Disadvantages of Medium Plus

The only problem I have now with Medium Plus is the embedded code, for example: (IFrames) Like Github Gists. Medium hosts this stuff on their media and prevents accessing them from an external domain (CORS) that’s why I can’t use them. At the moment I’m working on this issue.

Try it yourself Medium Plus .

Deploy Angular 6 Application to Netlify

Ahmed Abdelsalam — Sun, 06 May 2018 11:38:53 +0000

Deploy Angular 6 Application to Netlify

This is the fourth part in an n-part series about the JavaScript framework, Angular 6.

In this part, we'll go over deplying our Angular 6 application to Netlify.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Deployment on Netlify and how to deploy your Angular 6 application to it.

I'm going to deploy the application We created in the 3 previous articles, so you have to check them first!

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

Article Series

Angular 6 Article Series
Building Angular 6 Application
Using Angular Material with Angular 6
Deploy Angular 6 Application to Netlify ( You’re here )
Creating PWA with Angular 6 ( Soon )
Dynamic themes in Angular 6 Material ( Soon )
Angular 6 with GSAP ( Soon )
Angular 6 with Firebase ( Soon )

Deploy our application to github

First we need to deploy our application to our github account.

You have to create new repository from here

After creating your repository you should see a page like this but the name of the repo would be different

Now open you terminal and change your current directory to our app’s directory.

and run the next lines of code but you have to change the repo name to your repo's name.

To add all our changes:

git add -A

then we have to commit these changes:

git commit -m "First commit before deployment"

You can change the commit title as you want.

Next we have to run:

==but please don’t forget to change the repo-name and the username ==

git remote add origin git@github.com:your-username-here/your-repo-name-here.git

~ Change your-username-here and your-repo-name-here in the previous code to yours first.

Now let's push our changes:

git push -u origin master

Netlify

Netlify is one of the most beautiful things I’ve seen lately. Actually, I wish that I had used it before. It offers a lot of amazing features.

I have deployed my own Portfolio on it. you can check it out from here wb.gy.

It offers hosting for Front-end projects with many options. I can’t count them in this article, so you will have to check them for yourself.

Deploying to Netlify

Let’s back to our deployment, you have to create an account on Netlify first using [Github, Gitlab, Bitbucket or Email] Choose what you want.

After that you'll be redirected to create your site

Click on New site from Git

Now choose Github, if you're using another git system choose it.

Next, choose your repo. I’ll deploy a repo named angular-6-article-series

Next we have to set some settings for our deployment.

For branch choose master, If you're using different branch choose it.
For Build command type

ng build --prod

This command I’ll explain it later in our series

For Publish directory, type: dist/your-application-name

Don’t forget to replace your-application-name with the name of your application here my application name is angular-6-series

In Angular previous version it was just the ‘dist’ directory but now the CLI will create new folder into dist with the name of your application

Why dist exactly, it's the directory angular creates when you run ng build so it's our application's directory.

Then click Deploy site

It'll take a minute to deploy our site and give us the URL.

I solved the next problem!

This should work and your application will be deployed successfully, But mines does not work. I don’t know why! I see no errors. No problems. So I tried to deploy it using any method

If your application gives you 404 page. You can deploy your final dist folder only to Nelify.

Just run:

ng build --prod

It’ll create dist folder. Just drag it and drop it on this part of page in `Netlify

This solution will work but it’s not the best. We won’t be able to use Netlify's continuous deployment

Here’s my deployment URL https://angular6-series.netlify.com

I know that the explanation with images in this article might be silly, but I really wanted it to be understood, so the next articles would be more simple and anyone with little experience would be able to build the final application.

Next: Creating PWA with Angular 6 ( Soon )

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Buy me a coffee :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

Using Angular Material with Angular 6

Ahmed Abdelsalam — Sat, 05 May 2018 17:37:52 +0000

This is the third part in an n-part series about the JavaScript framework, Angular 6.

In this part, we'll go over using Angular Material with Angular 6 Applicatin.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using Angular Material and how to use it with our Angular 6 application.

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

Article Series

Angular 6 Article Series
Building Angular 6 Application
Using Angular Material with Angular 6 ( You’re here )
Deploy Angular 6 Application to Netlify
Creating PWA with Angular 6 ( Soon )
Dynamic themes in Angular 6 Material ( Soon )
Angular 6 with GSAP ( Soon )
Angular 6 with Firebase ( Soon )

First you must check the previous article in this series to create new Angular6 Application.

Now using the new ng add in Angular-CLI let's install the Angular Material. In your application root directory run:

ng add @angular/material @angular/cdk

It updated the package.json and angular.json

Added BrowserAnimationsModule to your app.module.ts file

Added Material Icons,Roboto Font to index.html

You can generate a starter component including a toolbar and a side navigation.

Run:

ng generate @angular/material:material-nav --name=navbar

This will generate a component named navbar and will add some material components to app.module.ts.

Let’s add our navbar to app.component.html

Open /src/app/app.component.html and add the navbar tag, your code should look like

\<navbar\>\</navbar\>
\<router-outlet\>\</router-outlet\>

If you’re running a server for our app check your browser or run

ng serve --open

to see the changes we made.

But I think there’s something wrong with our menu. I fixed it and changed the links of the menu by adding our home and posts routes.

Here’s the final code of /src/app/navbar/navbar.component.html

\<mat-sidenav-container class="sidenav-container"\>
 \<mat-sidenav
 #drawer
 class="sidenav"
 fixedInViewport="true"
 [attr.role]="isHandset ? 'dialog' : 'navigation'"
 [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
 [opened]="!(isHandset | async)!.matches"\>
 \<mat-toolbar color="primary"\>Menu\</mat-toolbar\>
 \<mat-nav-list\>
 \<a mat-list-item routerLink="/"\>Home\</a\>
 \<a mat-list-item routerLink="posts"\>Posts\</a\>
 \</mat-nav-list\>
 \</mat-sidenav\>
 \<mat-sidenav-content\>
 \<mat-toolbar color="primary"\>
 \<button
 type="button"
 aria-label="Toggle sidenav"
 mat-icon-button
 (click)="drawer.toggle()"
 \>
 \<mat-icon aria-label="Side nav toggle icon"\>menu\</mat-icon\>
 \</button\>
 \<span\>Application Title\</span\>
 \</mat-toolbar\>
 \</mat-sidenav-content\>
\</mat-sidenav-container\>

You can also generate a starter dashboard component containing a dynamic grid list of cards.

Run:

ng generate @angular/material:material-dashboard --name=dash

You can see the result by adding <dash></dash> tag to your app.component.html

Your final /src/app/app.component.html should look like

\<navbar\>\</navbar\>
\<dash\>\</dash\>
\<router-outlet\>\</router-outlet\>

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.

Run:

ng generate @angular/material:material-table --name=data-table

And add it like the previous one to see the results.

This new features of Angular 6 are cool but I prefer to put all the Material Modules in separated file named material.module.ts and I prefer to import most of the modules once. I don't like importing one by one. I know that it's not the best practice

So Let's edit our app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { PostsComponent } from './posts/posts.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { NavbarComponent } from './navbar/navbar.component';
import { LayoutModule } from '@angular/cdk/layout';
import { DashComponent } from './dash/dash.component';
import { DataTableComponent } from './data-table/data-table.component';

@NgModule({
 declarations: [
 AppComponent,
 HomeComponent,
 PostsComponent,
 NavbarComponent,
 DashComponent,
 DataTableComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 BrowserAnimationsModule,
 MaterialModule,
 LayoutModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

and create new file /src/app/material.module.ts and add the following code:

import { NgModule } from '@angular/core';

import {
 MatButtonModule,
 MatMenuModule,
 MatToolbarModule,
 MatIconModule,
 MatCardModule,
 MatGridListModule,
 MatSidenavModule,
 MatSortModule,
 MatTableModule,
 MatInputModule,
 MatSelectModule,
 MatSliderModule,
 MatRadioModule,
 MatListModule,
 MatProgressSpinnerModule,
 MatChipsModule,
 MatTooltipModule,
 MatExpansionModule,
 MatDialogModule,
 MatAutocompleteModule,
 MatTabsModule,
 MatSlideToggleModule,
 MatPaginatorModule

} from '@angular/material';

@NgModule({
 imports: [
 MatButtonModule,
 MatMenuModule,
 MatToolbarModule,
 MatIconModule,
 MatCardModule,
 MatGridListModule,
 MatSidenavModule,
 MatSortModule,
 MatTableModule,
 MatInputModule,
 MatSelectModule,
 MatSliderModule,
 MatRadioModule,
 MatListModule,
 MatProgressSpinnerModule,
 MatChipsModule,
 MatTooltipModule,
 MatExpansionModule,
 MatDialogModule,
 MatAutocompleteModule,
 MatTabsModule,
 MatSlideToggleModule,
 MatPaginatorModule

],
 exports: [
 MatButtonModule,
 MatMenuModule,
 MatToolbarModule,
 MatIconModule,
 MatCardModule,
 MatGridListModule,
 MatSidenavModule,
 MatSortModule,
 MatTableModule,
 MatInputModule,
 MatSelectModule,
 MatSliderModule,
 MatRadioModule,
 MatListModule,
 MatProgressSpinnerModule,
 MatChipsModule,
 MatTooltipModule,
 MatExpansionModule,
 MatDialogModule,
 MatAutocompleteModule,
 MatTabsModule,
 MatSlideToggleModule,
 MatPaginatorModule

]
})
export class MaterialModule {}

Now, we need to include *HammerJS for gesture support.

In your terminal, type:

npm install --save hammerjs

We have to include it, open /src/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';

if (environment.production) {
 enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err =\> console.log(err));

Now I have to mention something as I know you might face a problem while using it.

Now we have 2 modules in our application ( app.module.ts and material.module.ts), so if you want to create new component or service you have to mention where do you want to add your new component.

Let's see a practical example. If we want to create new component named test

in your terminal run( make sure you're in your root directory first):

ng g component test --module app.module.ts

This will create new component named test and will add it to app.module.ts.

If you forgot to add the --module argument you'll get an error next time adding new component.

That’s all for now

Next: Deploy Angular 6 Application to Netlify

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee' :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

Building Angular 6 Application

Ahmed Abdelsalam — Sat, 05 May 2018 15:38:12 +0000

angular 6 series

This is the second part in an n-part series about the JavaScript framework, Angular 6.

In this part, we'll go over build new Angular 6 Applicatin.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using Angular CLI and how to build your Angular 6application using it.

Article Series

Angular 6 Article Series
Building Angular 6 Application ( You’re here )
Using Angular Material with Angular 6
Deploy Angular 6 Application to Netlify
Creating PWA with Angular 6 ( Soon )
Dynamic themes in Angular 6 Material ( Soon )
Angular 6 with GSAP ( Soon )
Angular 6 with Firebase ( Soon )

Upgrading Angular-CLI

I assume that you have nodejs and npm installed. If not you have to install them first. Just Google it.

First we need to upgrade our CLI or install it for the first time. The next command will install it or upgrade your current version.

npm i -g @angular/cli

Creating new Angular App

Now We want to use CLI to create new Angular 6 Application. Change your directory where you want to create the new app, then run

ng new angular6-series --routing --style=scss --skip-tests

Where angular6-series is our application's name. But we have some arguments here.

Let's Explain each argument of our command

--routing: It builds our routes so I won't have to build them myself
--style=scss: It changes our styling extension from css to scss as I prefer sass.
--skip-tests: to skip creating tests files. But You may need them in this case you have to remove this argument.

But If you want to build your application normally without all these options, just run:

ng new angular6-series

After creating our new app. Move the app directory and run the server.

cd angular6-series
ng serve --open

ng serve will run the server of our app and the argument --open will open it in the default browser.

Now you should see this in your browser

Creating Components

Let’s create new component named home and make it our home page with some content.

ng g c home

This will create the component files. But you’ll see no change in your app. Let’s modify our src/app/app.component.html

Remove all the code and leave the last tag. It should look like

\<router-outlet\>\</router-outlet\>

Now open /src/app/app-routing.module.ts

I want to add the new component as the home page.

We need to import the HomeComponent and add the route to routes array.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
 {
 path: "",
 component: HomeComponent
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Now you should see your home component content in your home page.

Let’s edit our HomeComponent open /src/app/home/home.component.html

\<h1\>
 Welcome to our Angular 6 Application
\</h1\>
\<p\>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repudiandae repellat perferendis corrupti, harum provident
 ipsam illo laudantium magni deleniti corporis modi error aperiam iure molestiae eligendi quo voluptatem minus?
\</p\>

Let’s create another component named posts

ng g c posts

First we need to add new route for our posts component

open /src/app/app-routing.module.ts and do like we did to the home component

our file should look like

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PostsComponent } from './posts/posts.component';

const routes: Routes = [
 {
 path: "",
 component: HomeComponent
 },
 {
 path: "posts",
 component: PostsComponent
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Now open /src/app/posts/posts.component.html

and add some html

\<div class="post"\>
 \<h1\>Post title here\</h1\>
 \<p\>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia dolores iure explicabo officia, cumque expedita quis sint.\</p\>
\</div\>
\<div class="post"\>
 \<h1\>Post title here\</h1\>
 \<p\>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia dolores iure explicabo officia, cumque expedita quis sint.\</p\>
 \</div\>

You can see our new component in the browser by visiting: http://localhost:4200/posts

That’s all for now.

Next: Using Angular Material with Angular 6

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee’ :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

Angular 6 Article Series

Ahmed Abdelsalam — Sat, 05 May 2018 15:37:44 +0000

angular 6 series

I published article series days ago about angular 5 and I covered some interesting tutorials like using [Angular Material, FlexLayout], building [PWA, dynamic themes] and deploying our angular app to Netlify You can check theseries here.

But for this series:

Angular Team just announced Angular 6 and the new amazing features, so I can't wait to build amazing things using Angular 6.

In the previous series, I made it “Seven-Part” series with 7 articles for every part.

But I want to make this series n-part Series. I don’t want to stop this series. I want to add more articles later, so If you’re interested in Angular. You can check this series later for more updates.

The reason why I created this series of articles is that it’s the series I wish I had when I was first learning Angular. I know that there's a lot of tutorials out there that explain every part of my series alone. But the problem is gathering all these tutorials together sometimes gives conflicts and errors, so I wanted to save my own time and your time also to avoid all these problems.

Each part in this series is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know how to collect things together and understand what the framework has to offer.

Article Series

Angular 6 Article Series ( You’re here )
Building Angular 6 Application
Using Angular Material with Angular 6
Deploy Angular 6 Application to Netlify
Creating PWA with Angular 6 ( Soon )
Dynamic themes in Angular 6 Material ( Soon )
Angular 6 with GSAP ( Soon )
Angular 6 with Firebase ( Soon )

New Features of Angular 6

Angular 6 was just released with new amazing features and a lot of changes.

ng update

Running ng update <package> the CLI will analyze your package.json and update your packages. Updating an Angular application is just a command away.

ng add

It’s the same as ng update but it allows you to add and configure libraries.

For example if you want to install Angular Material you have to run:

ng add @angular/material

Other Changes

.angular-cli.json now renamed to angular.json with a new structure

You can check the other changes here in the official announcement

Upgrading

Angular Team created a great tool to upgrade you old angular app

Angular Update Guide. use it to migrate your angular apps.

Once you choose your current app version and the complexity of your app. It’ll show you the steps you need to upgrade your app.

I won’t repeat their steps just follow them and watch the step that named Before updating as it must be made correctly.

That's all for now.

Next: Building Angular 6 Application

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee’ :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

Building News App using Angular 5

Ahmed Abdelsalam — Tue, 01 May 2018 14:53:13 +0000

Angular5 , news app ( image source topal)

This is the seventh part in a seven-part series about the JavaScript framework, Angular 5.

In this part, we'll go over turning our application into a News Application.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using Angular Services and how to turn your Angular 5 application into a News app.

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

Article Series:

Creating Angular 5 application with Angular-cli
Using Angular Material with Angular 5
Deploy Angular 5 Application to Netlify
Build PWA with Angular 5 App
Build Dynamic themes for Angular Material
Using FlexLayout with Angular 5
Building News App using Angular 5(You are here)

Final Demo here

I’m going to turn the application We created in the 6 previous articles, so you have to check them first!

No, you must check all of them!

Our News app will be:

a Progressive web application (PWA)
With Angular Material Design
with a grid-system using Flex-Layout
Deployed to Netlify
With 2 dynamic themes
Later we can improve it with more option you can suggest or ask me what you want in the next article

Build News Service

In the previous articles We created a component named posts. I'll use it to show our news posts.

First Let’s discuss the layout of our posts component.

I want to build two things: part for filtering the news and part for displaying the news itself

I’ll use newsapi.org's api to get the news, so you have to signup and get a key.

Next, we have to create new angular service to get the news from the API. I'll name it news service.

Now, in your application's root directory open your terminal and run:

ng g service services/news --module app.module.ts

This command will create our news service and will update our app.module.ts.

We need to add something first in our app.module.ts to use it in new.service.ts

import { HttpModule } from '@angular/http';

and add it to the imports

Now your app.module.ts should look like

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { HttpModule } from '@angular/http'; 
import { AppRoutingModule } from './app-routing.module';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';

import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent } from './app.component';

import { environment } from '../environments/environment';
import { PostsComponent } from './posts/posts.component';
import { HomeComponent } from './home/home.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ThemeService } from './services/theme.service';
import { NewsService } from './services/news.service';

@NgModule({
 declarations: [
 AppComponent,
 PostsComponent,
 HomeComponent,
 NavbarComponent
 ],
 imports: [
 BrowserModule,
 BrowserAnimationsModule,
 MaterialModule,
 FlexLayoutModule,
 AppRoutingModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
 ],
 providers: [ThemeService, NewsService],
 bootstrap: [AppComponent]
})
export class AppModule { }

First Let’s explain what we’re going to do, I know that this part is so boring but you have to know it, so you can handle things later yourself.

Next you have to replace your-key-here with your API key you got from your account here > https://newsapi.org/account

Details of News Service

Next we need to build the functions to call the api from our news.service

We’ll build 3 functions getTopHeadLines(), getNewBySource() and getSources().

getTopHeadLines: will get the Top Headlines news. and this will be displayed as the default news.

getSources: it will give us all the news sources, we'll use them to filter our news.

getNewBySource: We'll use the previous function to get the sources to use it in this function.

Here’s the code of our service

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { environment } from '../../environments/environment';

@Injectable()
export class NewsService {
 key = 'your-key-here';
 constructor(private http: Http) { }
 getTopHeadLines(){
 return this.http.get('[https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=](https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=)'+this.key);
 }
 getNewBySource(source){
 return this.http.get('[https://newsapi.org/v2/top-headlines?sources=](https://newsapi.org/v2/top-headlines?sources=)'+source+'&apiKey='+this.key);
 }
 getSources(){
 return this.http.get('[https://newsapi.org/v2/sources?apiKey=](https://newsapi.org/v2/sources?apiKey=)'+this.key);
 }
}

Adding `News Service to posts.component.ts

Now we need to edit our posts.component.ts. As we created 3 functions in our servicewe'll use them here in posts.component.ts

First

you have to import new.service.ts.

Second

create 2 variable:

1st: will be news= {articles:[]}

2nd: will be newsSources= {sources:[]}

Third

I’ll display articles from getTopHeadLines in ngOnInit and the new resources also.

Here’s the code of our src/posts/posts.component.ts

`
import { Component, OnInit } from "@angular/core";
import { NewsService } from '../services/news.service';

@Component({
selector: "app-posts",
templateUrl: "./posts.component.html",
styleUrls: ["./posts.component.scss"],
providers:[NewsService]
})
export class PostsComponent implements OnInit {
news= {articles:[]};
newsSources= {sources:[]};
filterSource='google-news';

constructor(private newsService: NewsService){}

ngOnInit() {
this.newsService.getTopHeadLines()
.subscribe(
response => this.news = response.json()
);
this.getnewsSources();
}

filterNews(source) {
this.news={articles:[]};
this.newsService.getNewBySource(source)
.subscribe(
response => this.news = response.json()
);
}

getnewsSources() {
this.newsService.getSources()
.subscribe(
response => this.newsSources = response.json()
);
}
}
`

For the view of this component in posts.component.html

I made 2 parts as I said at the beginning of this article:

one for filtering the news and one to show them. I used Flex-Layout also.

I added two things for the posts:

Fix damaged images

You might noticed that there are some images that does not load correctly, to solve this problem I added this attribute onError="this.src='/assets/blank.png';"

It will display default image for damaged images.

Spinner loader

Also I added a spinner to been displayed while our application fetching the data from the api, I used the Angular Material module MatSpinnerModule.

Here’s the code of posts.component.html

`
<div class="container margin-top" fxLayout="wrap row" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="center">
<mat-card class="filter">
<form #filternewsForm="ngForm">
<mat-form-field>
<mat-select placeholder="News Source" [(ngModel)]='filterSource' name="source" required>
<mat-option *ngFor="let source of newsSources.sources" [value]="source.id">
{{source.name}} - {{ source.language }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary" (click)='filterNews(filterSource)' [disabled]="!filternewsForm.form.valid">Filter News to
<span style="text-transform: capitalize; ">{{filterSource}}</span>
</button>

</form>
</mat-card>
</div>

<mat-card class=singleNews>
<img mat-card-image src="{{post.urlToImage}}" onError="this.src='/assets/blank.png';">
<div class="cardbody">
<mat-card-title>{{post.title}}</mat-card-title>
<mat-card-content>
<p>{{post.description}}</p>
</mat-card-content>
</div>

<mat-card-actions align="end">
<a href="{{post.url}}" target="_balnk" mat-raised-button color="accent">Read More</a>
</mat-card-actions>
</mat-card>

</div>

</div>
`

I did some small styling in src/app/posts/posts.component.scss

.singleNews { margin-bottom: 15px; img { height: 200px; } mat-card-title { font-size: 16px; font-weight: bold; } .cardbody { height: 100px; overflow-y: auto; margin: 0 -15px; padding: 10px; } } .filter { margin-top: 100px; margin-bottom: 50px; }

and I added some styling for the loader in src/styles.scss

@import "./assets/styles/material-theme"; body { margin: 0; } .loader mat-spinner { margin: 10px auto; }

Change homepage content to Top News

For our home screen I want to make it dynamic, so let’s display our Top Hot-lines there.

We’ll use the same code and service:

Open src/app/home/home.component.html

and add the following code:

`
<div class="homebtn" fxLayout="wrap row" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="center">
<a routerLink="/posts" mat-raised-button color="primary">Choose News Source</a>
</div>
<div class="loader" *ngIf="!((news.articles)?.length > 0)">
<mat-spinner></mat-spinner>
</div>
<div class="container" fxLayout="wrap row" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="center">

<mat-card-actions align="end">
<a href="{{post.url}}" target="_balnk" mat-raised-button color="accent">Read More</a>
</mat-card-actions>
</mat-card>

</div>

</div>
`

And replace the code into src/app/home/home.component.ts with

`
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../services/news.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
providers:[NewsService]

})
export class HomeComponent implements OnInit {
news= {articles:[]};

constructor(private newsService: NewsService){}

ngOnInit() {
this.newsService.getTopHeadLines()
.subscribe(
response => this.news = response.json()
);
}
}
`

Finally let’s add some styling open src/app/home/home.component.scss

Now our application is done! Here’s the final result

And you can find the demo here

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee’ :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

Using FlexLayout with Angular 5

Ahmed Abdelsalam — Tue, 01 May 2018 14:53:08 +0000

Angular5 , flexlayout ( image source topal)

This is the sixth part in a seven-part series about the JavaScript framework, Angular 5.

In this part, we'll go over adding Flex-Layout to our application to make it responsive.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Flext-Layout and how to use it with Angular 5 Material.

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

Article Series:

Creating Angular 5 application with Angular-cli
Using Angular Material with Angular 5
Deploy Angular 5 Application to Netlify
Build PWA with Angular 5 App
Build Dynamic themes for Angular Material
Using FlexLayout with Angular 5 (You are here)
Building News App using Angular 5

Final Demo here

If you want to add a touch styling to your Angular application you have to use one of the CSS Libraries, but Angular Material is specially designed for Angular. But it does not have a grid system, so we need to add one or build it ourself.

In the Angular Material article I created a simple grid using flex, but you can use Flex-Layout for more complex uses.

Some people won't like Flex-Layout and would prefer using css flex. It's up to you.

But in this article I'll talk about how to use Flex-Layout with Angular Material and we'll turn our previous posts into grid using Flex-Layout.

In our application root run:

npm install @angular/flex-layout@latest --save

Now we have to import FlexLayoutModule into our app.module.ts

Here's my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';

import { AppRoutingModule } from './app-routing.module';

import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent } from './app.component';

import { environment } from '../environments/environment';
import { PostsComponent } from './posts/posts.component';
import { HomeComponent } from './home/home.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ThemeService } from './services/theme.service';

@NgModule({
 declarations: [
 AppComponent,
 PostsComponent,
 HomeComponent,
 NavbarComponent
 ],
 imports: [
 BrowserModule,
 BrowserAnimationsModule,
 MaterialModule,
 FlexLayoutModule,
 AppRoutingModule,
 ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
 ],
 providers: [ThemeService],
 bootstrap: [AppComponent]
})
export class AppModule { }

Let’s use Flex-Layout with our home posts.

I'll use the next code to create our grid

\<div class="container" fxLayout="wrap row" fxLayout.xs="column" fxLayoutGap="0.5%" fxLayoutAlign="center"\>
 \<div fxFlex="20%"\>
 \<!-- our post code here --\>
 \</div\>
\</div\>

To create 4 posts in one row I’ll make fxFlex= 20%. and put your post code instead of the comment, and repeat this part as you want.

Open src/app/home/home.component.html

\<div class="container" fxLayout="wrap row" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="center"\>
 \<div fxFlex="20%"\>
 \<mat-card class="example-card"\>
 \<mat-card-header\>
 \<div mat-card-avatar class="example-header-image"\>\</div\>
 \<mat-card-title\>Shiba Inu\</mat-card-title\>
 \<mat-card-subtitle\>Dog Breed\</mat-card-subtitle\>
 \</mat-card-header\>
 \<img mat-card-image src="/assets/shiba2.jpeg" alt="Photo of a Shiba Inu"\>
 \<mat-card-content\>
 \<p\>
 The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
 very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
 \</p\>
 \</mat-card-content\>
 \<mat-card-actions\>
 \<button mat-button\>LIKE\</button\>
 \<button mat-button\>SHARE\</button\>
 \</mat-card-actions\>
 \</mat-card\>
 \</div\>
\</div\>

Check the flex-layout documentation for more complex uses.

Now you can remove our css code in home.component.scss.

Next: Building News App using Angular 5

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee’ :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter