Fixed Angular Material and Karma Error

If you are having trouble with Unknown ‘Angular Material Module’ element in your Angular Unit Test.
This could be the fix.

Add the Angular Material Module to the imports in beforeEach.

import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSidenavModule, MatCardModule } from '@angular/material';
import { DayscheduleComponent } from './../dayschedule/dayschedule.component';
import { WeekscheduleComponent  } from './../weekschedule/weekschedule.component';

import * as moment from 'moment';



describe('SchedulesComponent', () => {
  let component: SchedulesComponent;
  let fixture: ComponentFixture<SchedulesComponent>;

  let debugElement: DebugElement;
  let htmlElement: HTMLElement;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [SchedulesComponent, DayscheduleComponent, WeekscheduleComponent],
        imports: [ MatSidenavModule, MatCardModule, HttpModule, BrowserModule, BrowserAnimationsModule ]
      }).compileComponents();
    })
  );

Add-Migration Entity Framework Core (ef core) Nothing Happens

If you are out there wondering what is going on to your

add-migration

or

update-database

, same thing happened to me.
I have multiple startup projects in my Visual Studio 2017. The fix is to use your main WebApi / WebApp Project as the start up project
first before running the

add-migration

again and walahhh you are good to go kid. Your welcome.

Linq Sample to Join 3 Collections / Tables

void Main()
{
    var members = Members();
    var locations = Locations();
    var planets = Planets();
    var l = members
                .Join(locations,
                      mem => mem.mId,
                      loc => loc.mId,                      
                      (mem, loc) => new { loc, mem })
                 .Join(planets,
                       lm => lm.loc.mId,
                       pla => pla.mId,
                       (lm,pl) => new { pl.Name, lm.loc, lm.mem })   
                  .Select(s => new {
                     s.mem.FullName,
                     s.Name,
                     s.loc.Address                   
                  })
                  .ToList();                   
     l.Dump();
}

public List<Planet> Planets(){
  var x = new List<Planet>(){
     new Planet(){ mId = 1, Name = "Mercury" },
     new Planet(){ mId = 2, Name = "Venus" },
     new Planet(){ mId = 3, Name = "Earth" },
     new Planet(){ mId = 4, Name = "Mars" }
  };
  return x;
}

public List<Location> Locations(){
   var x = new List<Location>(){
      new Location(){ mId = 1, Address = "Busugon" },
      new Location(){ mId = 2, Address = "Tacup" },
      new Location(){ mId = 3, Address = "Kinawahan" },
      new Location(){ mId = 4, Address = "Victoria" },
   };
   return x;
}

public List<Member> Members(){
    var x = new List<Member>(){
       new Member(){ mId = 1, FullName = "Julius", Number = 1 },
       new Member(){ mId = 2, FullName = "Elvira", Number = 2 },
       new Member(){ mId = 3, FullName = "Roberto",  Number = 3 }      
    };
    return x;
}

public class Member {
    public int mId { get; set; }
    public string FullName { get; set; }
    public int Number { get; set; }
}

public class Location {
   public int mId { get; set; }
   public string Address { get;set; }
}

public class Planet {
   public int mId { get; set; }
   public string Name { get; set; }
}

File Upload Get MIME Type using JavaScript

<html>
<body>

    <input type="file" id="upload-files" multiple>
    <script>
    var control = document.getElementById("upload-files");
    control.addEventListener("change", function(event) {      
        var files = control.files;
        for (var i = 0; i < files.length; i++) {
            console.log("Filename: " + files[i].name);
            console.log("Type: " + files[i].type);
            console.log("Size: " + files[i].size + " bytes");
        }
    }, false);
    </script>

</body>
</html>

How to handle a Responsive 5 Column layout using Zurb’s Foundation 5

This is a 5 column responsive layout that will adjust in 3 screen sizes small (phone screens), medium (tablets) and large (PC).
1 columns for smart phone screens, 3 rows and 2 columns on first 2 rows on tablet screens and 1 row with 5 columns on large screens like laptop and PC.

Here you go kids! You’ve learned new tricks today!

    <div class="row">
        <div class="large-5 columns">
            <div class="row">
                    <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-6 columns">#</div>
                        <div class="medium-6 columns">#</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-5 columns">
            <div class="row">    
                <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-6 columns">#</div>
                        <div class="medium-6 columns">#</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-2 columns">
            <div class="row">        
                <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-12 columns">#</div>                    
                    </div>
                </div>                        
            </div>
        </div>
    </div>

Loosely Coupled , Test Driven Design and API Centric Application

I now have my Asp.net MVC WebAPI 2 implemented with Test Driven Design.

Loosely Coupled with the help of Unity and TDDed with Moq.

Now I can begin porting my Real Estate Billing Management System coded in PHP and Zend Framework

public class PeopleRepository<T> : IPeopleRepository<T> where T : class
{
   protected AppDBContext db;

   public PeopleRepository(IUnitOfWork unitOfWork)
   {
     db = unitOfWork.DbContext;
   }
}
   public interface IPeopleRepository<T> where T : class
   {
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   }
   public interface IPeopleRepository<T> where T : class
   {
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   }

I will have this Application front ended with AngularJs2 because of TypeScript.

I heard that ReactJs is becoming more popular. But just *7^&off!

Smooth Animated anchor Scrolling using Jquery

Hi Kids,

Here is a simple snippet to add scrolling effect with anchor and js.

$('.some_div > a').click(function(){
            $('html, body').animate({
                  scrollTop: $( $.attr(this, 'href') ).offset().top + (some_adjustments)
            }, 800);
            return false;
});

And here is for your HTML dom structure.

<div class="some_div">
        <a href="#achor">Anchor Link Here</a>
</div>


<div id="anchor">
     Your Load of BS here Kids!
</div>

Alright Kids. Enjoy! Ciao!

Common Techniques for aligning DIVs horizontally

1. Floating

     <div class="floatleft">LEFT</div>
     <div class="floatright">RIGHT</div>
     <div class="clearboth"></div>
    .floatleft{ float:left; }
    .floatright{ float:right; }
    .clearboth{ clear:both; }

2. Inline-Block

     <div class="item">LEFT</div>
     <div class="item">RIGHT</div>
    .item{ display:inline-block; }

3. Using Bootstrap

     <div class="row">
         <div class="md-col-6">Left</div>
         <div class="md-col-6">Right</div>
     </div>

4. Foundation

     <div class="row">
         <div class="medium-6 columns">Left</div>
         <div class="medium-6 columns">Right</div>
     </div>

5. Using Display:Tables

     <div style="display:table-row">
         <div style="display:table-cell">Left</div>
         <div style="display:table-cell">Right</div>
     </div>

If you know other techniques let the kids know.