DEV Community: Saoud

Customize iTerm

Saoud — Sat, 28 Dec 2024 08:49:50 +0000

First of all, install iTerm2 (because it provides a much better experience with Oh My Zsh and Powerlevel10k); either download it and install it from here iTerm or use “homebrew”:

brew install --cask iterm2

Then, install Oh My Zsh; since I have “curl” installed, I’m using this command (otherwise, see the Oh My Zsh URL for alternative options):

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Then, we install p10k:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

To enable it, edit “~/.zshrc” and set the variable ZSH_THEME accordingly:

ZSH_THEME="powerlevel10k/powerlevel10k"

Now, either “source” the .zshrc file or open a new instance of iterm2 to see the initial configuration of p10k (remember you can always reconfigure it by running “p10k configure”):

Meslo fonts are recommended to have nice icon fonts, so it’s best to accept the proposal to install the Meslo fonts (in macOS, you have this nice automatic procedure). Let’s wait for the fonts to be downloaded.

Then restart iTerm2 or open a new tab.

Now, we start a new iterm2 instance, and we start p10k from scratch, it will prompt you with questions for checking whether we can see the font icons correctly.

Then, we can start choosing our preferred options, pick whichever ones you prefer and look best to you.

Now, I install two other useful plugins (to have syntax highlighting on the command line and to have suggested commands as you type based on history and completions):

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

The plug-ins must be enabled in the proper section of ~/.zshrc:

plugins=( ... exsiting plugins...
zsh-syntax-highlighting
zsh-autosuggestions
)

I also like to have fzf, a general-purpose command-line fuzzy finder. This must be first installed as a program, e.g., with homebrew:

brew install fzf

I like to add a few more plugins and then enable the corresponding plug-in which include fzf:

plugins=(
  git
  zsh-syntax-highlighting
  zsh-autosuggestions
  zsh-interactive-cd
  zsh-navigation-tools
  fzf
)

Operators in Depth

Saoud — Fri, 29 Jul 2022 02:45:37 +0000

In this reading, you will learn about additional operators, operator precedence and operator associativity. I'll also provide you with some examples of logical operators.

1. Additional operators

Logical AND operator: &&
Logical OR operator: ||
Logical NOT operator: !
The modulus operator: %
The equality operator: ==
The strict equality operator: ===
The inequality operator: !=
The strict inequality operator: !==
The addition assignment operator: +=
The concatenation assignment operator: += (it's the same as the previous one - more on that later)

The logical AND operator in JavaScript: &&

The logical AND operator is, for example, used to confirm if multiple comparisons will return true.

In JavaScript, this operator consists of two ampersand symbols together: &&.

Let's say you're tasked with coming up with some code that will check if the currentTime variable is between 9 a.m. and 5 p.m. The code needs to console.log true if currentTime > 9 and if currentTime < 17.

Here's a solution:

var currentTime = 10;
console.log(currentTime > 9 && currentTime < 17);

How does this code work?

First, on line one, I set the currentTime variable, and assign the value of 10 to it.

Next, on line two I console log two comparisons:

currentTime > 9

currentTime < 17

I also use the && logical operator to join the two comparisons.

Effectively, my code is interpretted as the following:

console.log(10 > 9 && 10 < 17);

The comparison of 10 > 9 will return true.

Also, the comparison of 10 < 17 will return true.

This means I can further re-write the line two of my solution as follows:

console.log(true && true);

In essence, this is how my code works.

Now, the question is, what will be the result of console.log(true && true)?

To understand the answer, you need to know the behavior of the && logical operator.

The && logical operator returns a single value: the boolean true or false, based on the following rules:

It returns true if both the values on its right and on its left are evaluated to true
It returns false in all the other instances

In other words:

console.log(true && true) will output: true

console.log(true && false) will output: false

console.log(false && true) will output: false

console.log(false && false) will output: false

The logical OR operator in JavaScript: ||

The logical OR operator in JavaScript consists of two pipe symbols together: ||.

It is used when you want to check if at least one of the given comparisons evaluates to true.

Consider the following task: You need to write a program in JavaScript which will return true if the value of the currentTime variable is not between 9 and 17. Put differently, your code needs to console.log true if the value of the variable currentTime is either less than 9 or greater than 17.

Here's a solution:

var currentTime = 7;
console.log(currentTime < 9 || currentTime > 17);

In line one of the code I assign the number 7 to the variable currentTime.

On line two, I console log the result of checking if either currentTime < 9 or currentTime > 17 will evaluate to true.

It's the same as this:

var currentTime = 7;
console.log(true || false);

Here are the rules of how the || operator evaluates given values:

console.log(true || true) will output: true

console.log(true || false) will output: true

console.log(false || true) will output: true

console.log(false || false) will output: false

The logical OR operator will always return true, except when both sides evaluate to false. In other words, for the logical OR operator to return false, the results of both comparisons must return false.

Going back to the example of checking if either currentTime < 9 or currentTime > 17, this makes sense: the only time you will get false is when the value stored in the currentTime variable is greater than 9 and less then 17.

The logical NOT operator: !

In JavaScript, the logical NOT operator's symbol is the exclamation mark: !.

You can think of the ! operator as a switch, which flips the evaluated boolean value from true to false and from false to true.

For example if I assign the boolean value of true to the petHungry variable:

var petHungry = true;

...then I can console log the fact that the pet is no longer hungry by using the ! operator to flip the boolean value stored inside of the petHungry variable, like so:

console.log('Feeding the pet');
console.log("Pet is hungry: ", !petHungry);
console.log(petHungry);

This is the output of the above code:

Pet is hungry: true
Feeding the pet
Pet is hungry: false
true

The reason for the changed output in the console is because you have flipped the value stored inside the petHungry variable, from true to false.

Notice, however, that the code on line five of the example above still outputs true - that's due to the fact that I didn't reassign the value of the petHungry variable.

Here's how I could permanently change the value stored in the petHungry variable from true to false:

var petHungry = true;
petHungry = !petHungry;

In this example, I first assign the value of true to the new variable of petHungry. Then, on line two, I assign the opposite value, the !true - read: not true - to the existing petHungry variable.

The modulus operator: %

The modulus operator is another mathematical operator in JavaScript. It returns the remainder of division.

To demonstrate how it works, imagine that a small restaurant that has 4 chairs per table, and a total of 5 tables, suddenly receives 22 guests.

How many guests will not be able to sit down in the restaurant?

You can use the modulus operator to solve this.

console.log(22 % 5); // 2

The output is 2, meaning, when I divide 22 and 5, I get a 4, and the remainder is 2, meaning, there are 2 people who couldn't get a place in this restaurant.

The equality operator, ==

The equality operator checks if two values are equal.

For example, this comparison returns true: 5 == 5. Indeed, it is true that 5 is equal to 5.

Here's an example of the equality operator returning false: 5 == 6. Indeed, it is true that 5 is not equal to 6.

Additionally, even if one of the compared values is of the number type, and the other is of the string type, the returned value is still true: 5 == "5".

This means that the equality operator compares only the values, but not the types.

The strict equality operator, ===

The strict equality operator compares for both the values and the data types.

With the strict equality operator, comparing 5 === 5 still returns true. The values on each side of the strict equality operator have the same value and the same type. However, comparing 5 == "5" now returns false, because the values are equal, but the data type is different.

The inequality operator, !=

The inequality operator checks if two values are not the same, but it does not check against the difference in types.

For example, 5 != "5" returns false, because it's false to claim that the number 5 is not equal to number 5, even though this other number is of the string data type.

The strict inequality operator !==

For the strict inequality operator to return false, the compared values have to have the same value and the same data type.

For example, 5 !== 5 returns false because it is false to say that the number 5 is not of the same value and data type and another number 5.

However, comparing the number 5 and the string 5, using the strict inequality operator, returns true.

console.log(5 !== "5")

2. Using the + operators on strings and numbers

Combining two strings using the + operator

The + operator, when used with number data type, adds those values together.

However, the + operator is also used to join string data type together.

For example:

"inter" + "net" // "internet"
"note" + "book" // "notebook"

If the + operator is used to join strings, then it is referred to as the concatenation operator, and you'll say that it's used to concatenate strings.

When used with numbers, the + operator is the addition operator, and when used with strings, the + operator is the concatenation operator.

Combining strings and numbers using the + operator

But what happens when one combines a string and a number using the + operator?

Here's an example:

365 + " days" // "365 days"
12 + " months" // "12 months"

Here, JavaScript tries to help by converting the numbers to strings, and then concatenating the number and the string together, ending up with a string value.

The process of this "under-the-hood" conversion of values in JavaScript is referred to as "coercion". JavaScript coerces a number value to a string value - so that it can run the + operator on disparate data types.

The process of coercion can sometimes be a bit unexpected.

Consider the following example:

1 + "2"

What will be the result of 1 + "2"?

Note that the value of 1 is of the number data type, and the value of "2" is of the string data type, and so JavaScript will coerce the number 1 to a string of "1", and then concatenate it with the string of "2", so the result is a string of "12".

The addition assignment operator, +=

The addition assignment operator is used when one wants to accumulate the values stored in a variable.

Here's an example: You are counting the number of overtime hours worked in a week.

You don't have to specify the type of work, you just want to count total hours.

You might code a program to track it, like this:

var mon = 1;
var tue = 2;
var wed = 1;
var thu = 2;
var fri = 3;
console.log(mon + tue + wed + thu + fri); // 9

You can simplify the above code by using the addition assignment operator, as follows:

var overtime = 1;
overtime += 2;
overtime += 1;
overtime += 2;
overtime += 3;
console.log(overtime); // 9

Using the addition assignment operator reduces the lines of your code.

The concatenation assignment operator, +=

This operator's syntax is exactly the same as the addition assignment operator. The difference is in the data type used:

var longString = "";
longString += "Once";
longString += " upon";
longString += " a";
longString += " time";
longString += "...";
console.log(longString); // "Once upon a time..."

Operator precedence and associativity

Operator precedence is a set of rules that determines which operator should be evaluated first.

Consider the following example:

1 * 2 + 3

The result of the above code is 5, because the multiplication operator has precedence over the addition operator.

Operator associativity determines how the precedence works when the code uses operators with the same precedence.

There are two kinds:

left-to-right associativity
right-to-left associativity

For example, the assignment operator is right-to-left associative, while the greater than operator is left-to-right associative:

var num = 10; // the value on the right is assigned to the variable name on the left
5 > 4 > 3; // the 5 > 4 is evaluated first (to `true`), then true > 3 is evaluated to `false`, because the `true` value is coerced to `1`

Revert Git Full Git commit

Saoud — Thu, 22 Jul 2021 01:26:03 +0000

Revert the full commit

Sometimes you may want to undo a whole commit with all changes. Instead of going through all the changes manually, you can simply tell git to revert a commit, which does not even have to be the last one. Reverting a commit means to create a new commit that undoes all changes that were made in the bad commit. Just like above, the bad commit remains there, but it no longer affects the the current master and any future commits on top of it.

git revert {commit_id}'

About History Rewriting

Delete the last commit

Deleting the last commit is the easiest case. Let's say we have a remote origin with branch master that currently points to commit dd61ab32. We want to remove the top commit. Translated to git terminology, we want to force the master branch of the origin remote repository to the parent of dd61ab32:

git push origin +dd61ab32^:master

Where git interprets x^ as the parent of x and + as a forced non-fastforward push. If you have the master branch checked out locally, you can also do it in two simpler steps: First reset the branch to the parent of the current commit, then force-push it to the remote.

git reset HEAD^ --hard

git push origin -f

This document is inspired by https://christoph.ruegg.name/blog/git-howto-revert-a-commit-already-pushed-to-a-remote-reposit.html - Thank you.

React Intro

Saoud — Sun, 18 Jul 2021 22:26:47 +0000

Using Node in the Command Line

Summary

To use Node as a REPL, simply type node in the Terminal.
Press the Tab key to get a list of Node commands.
To exit the REPL, hold down the Ctrl and c keys twice.
JavaScript scripts can be run in terminal using the node command. For instance, node name-of-script.js.
console.log() happens to use a method called process.stdout.write() under the hood. stdout is short for standard output. Standard input is for data streaming into a program while standard output is for data streaming out of a program.
We can use the require statement to add a script's functionality to the Node REPL. For instance: require('./code-to-be-required.js'). A relative path must be included.

Immutability

Terminology

Immutability: An immutable object is an object whose state cannot be modified after it is created.

Examples

We can do this if we are writing object-oriented code:

let x = 1
x = 2 + 1

In functional code, we want to always use const like this:

const x = 1
const newX = 2 + x

Imperative Versus Declarative Programming

Terminology

Imperative programming: Explicitly stating every step the computer needs to take to return a result
Declarative programming: Telling the computer the result we want and allowing it to decide how to return that result

Pure Functions

Terminology

Pure function: A function that meets the following criteria:
- Always returns an output
- Has no side effects
- Does not rely on external variables or state
- Always returns the same answer for a given input

Why pure functions?

Easier to test * Fewer bugs * No unintended side effects

First Class Citizens

Terminology

Functions are first class citizens. This means that functions have the same functionality as objects. For example, they can be assigned to variables, passed in as arguments, or returned from a function.
Callback: A function passed into another function as an argument.

Closures

Terminology

Closure: An inner function that has access to variables from an outer function.

Here's an example. The anonymous function that takes yourName as a parameter has access to the salutation from the outer welcome function:

function welcome(salutation) {
  return function(yourName) {
    return `${salutation}! Nice to meet you, ${yourName}!`
  }
}

Currying

Terminology

Currying: Rewriting a function that takes multiple arguments into a series of functions that each take one argument.

Here's an uncurried function that takes three arguments:

function aThingIMaybeLike(howMuchILikeIt, thing, reason) {
  return `I ${howMuchILikeIt} ${thing} because ${reason}.`;
}

Here's how the function looks after it's been curried:

function aThingIMaybeLike(howMuchILikeIt) {
  return function(thing) {
    return function(reason) {
      return `I ${howMuchILikeIt} ${thing} because ${reason}.`;
    }
  }
}

Recursion

Terminology

Recursion: A technique in programming in which a function calls itself one or more times before returning.
Base case: The final condition of a successfully called recursive function.
Termination Case: A conditional that's called if something goes wrong which prevents an infinite loop.
Tail Call Optimization: The process by which a compiler can make a call to a function and use no additional stack space.

Here's an example of a recursive function:

const incrementCounter = (counter) => {
  if (counter >= 3) {
    return counter;
  } else {
    console.log(counter);
    return incrementCounter(counter + 1);
  }
}

incrementCounter(0);

The Problems of Classical Inheritance

Terminology

Inheritance: When a child object gains the functionality of a parent object.
Tightly Coupled: Code that is reliant on another piece of code to retain its functionality.
Loosely Coupled: Code that is not reliant on external code for functionality.

Spread Operator

Terminology

Spread Operator: A feature of ES6 written as ... that is used to do the following:
- Make shallow copies of objects
- Merge multiple objects together
- Combine arrays
- Pass multiple arguments into a function

Examples

Here is the spread operator is making a shallow copy:

const myCat = {
  name: "Murphy",
  age: 1
}

const anotherCat = {...myCat};

Here it is merging three objects together:

const flagColor1 = {
  color1: "green"
}

const flagColor2 = {
  color2: "gold"
}

const flagColor3 = {
  color3: "black"
}

const jamaicanFlag = {...flagColor1, ...flagColor2, ...flagColor3}

Here it is combining arrays:

const array = [1,2];
const array2 = [3,4];
const array3 = [...array, ...array2];
array3
[1, 2, 3, 4]

And here it is passing multiple arguments into a function:

const array = [1,2,3];
spreadArgs(...array);

Composition

Terminology

Composition is the process of "composing" the functionality of an object. Instead of an object inheriting from other objects, we add smaller pieces of functionality to an object.

For instance, here's a canEat() function:

const canEat = function(creature) {
  const obj = {
    eat: function(food) {
      return `The ${creature} eats the ${food}.`
    }
  }
  return obj;
}

Here's how we'd use composition to give a cat object the ability to eat:

> const cat = canEat("cat");

We can use a function factory to add multiple pieces of functionality to an object. For instance, if we wanted to create a creature that can both eat and sleep, we'd do something like this:

const canEat = (creature) => ({
  eat: (food) => {
    return `The ${creature.name} eats the ${food}.`
  }
});

const canSleep = (creature) => ({
  sleep: () => {
    return `The ${creature.name} sleeps.`
  }
});

const sleepingEatingCreature = (name) => {
  let creature = {
    name
  }

  return { ...creature, ...canEat(creature), ...canSleep(creature) };
};

State

Terminology

State: Any data we want the computer to remember.
Store: An object provided by Redux with a few methods on it to hold and manipulate an application's state.
Observer Pattern: A software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
Pubsub Pattern: A pattern similar to an observer pattern, except that there is a mediator between publishers and subscribers (who are unaware about the existence of each other).

Storing State in Closures

Terminology

Lexical Scope: In a nested group of functions, the inner functions have access to the variables and other resources of their parent scope.

Database Basics

Saoud — Sun, 09 May 2021 22:14:43 +0000

Database Schema and Relationship Types

Terminology

Database schema: The structure that represents the way the database is built. It defines how data is stored in the database tables and how the relations among tables are associated.
One-to-one Relationship: Two tables have a one-to-one relationship when a row on one table is related to only one row on the other table.
One-to-many relationship: Two tables share a one-to-many relationship when a single row on one table can be related to many rows on another table.
Many-to-many relationship: Two tables share a many-to-many relationship when each row on each table can have many rows on the other table. This relationship requires use of a join table.
Join table: Used to manage all possible relationships in a many-to-many relationship, a join table contains individual entries.

Configuration for Entity Framework Core

ToDoList.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="5.0.0" />
    <PackageReference Include="Pomelo.EntityFrameworkCore.MySql" Version="5.0.0-alpha.2" />
  </ItemGroup>
</Project>

appsettings.json

{
    "ConnectionStrings": {
        "DefaultConnection": "Server=localhost;Port=3306;database=to_do_list;uid=root;pwd=[YOUR-PASSWORD-HERE];"
    }
}

Make sure your appsettings.json file is in your .gitignore!

Startup.cs


using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using ToDoList.Models;

namespace ToDoList
{
  public class Startup
  {
    public Startup(IWebHostEnvironment env)
    {
      var builder = new ConfigurationBuilder()
          .SetBasePath(env.ContentRootPath)
              .AddJsonFile("appsettings.json");
      Configuration = builder.Build();
    }

    public IConfigurationRoot Configuration { get; set; }

    public void ConfigureServices(IServiceCollection services)
    {
      services.AddMvc();

      services.AddEntityFrameworkMySql()
        .AddDbContext<ToDoListContext>(options => options
        .UseMySql(Configuration["ConnectionStrings:DefaultConnection"], ServerVersion.AutoDetect(Configuration["ConnectionStrings:DefaultConnection"])));
    }

    public void Configure(IApplicationBuilder app)
    {
      app.UseDeveloperExceptionPage();
      app.UseRouting();

      app.UseEndpoints(routes =>
      {
        routes.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
      });

      app.UseStaticFiles();

      app.Run(async (context) =>
      {
        await context.Response.WriteAsync("Hello World!");
      });
    }
  }
}

Program.cs

using System.IO;
using Microsoft.AspNetCore.Hosting;

namespace ToDoList
{
  public class Program
  {
    public static void Main(string[] args)
    {
      var host = new WebHostBuilder()
        .UseKestrel()
        .UseContentRoot(Directory.GetCurrentDirectory())
        .UseIISIntegration()
        .UseStartup<Startup>()
        .Build();

      host.Run();
    }
  }
}

Models/ToDoListContext.cs

using Microsoft.EntityFrameworkCore;

namespace ToDoList.Models
{
  public class ToDoListContext : DbContext
  {
    public DbSet<Item> Items { get; set; }

    public ToDoListContext(DbContextOptions options) : base(options) { }
  }
}

EF Core with an Existing Database

Models/Item.cs

namespace ToDoList.Models
{
  public class Item
  {
    public int ItemId { get; set; }
    public string Description { get; set; }
  }
}

Controllers/ItemsController.cs

using Microsoft.AspNetCore.Mvc;
using ToDoList.Models;
using System.Collections.Generic;
using System.Linq;

namespace ToDoList.Controllers
{
  public class ItemsController : Controller
  {
    private readonly ToDoListContext _db;

    public ItemsController(ToDoListContext db)
    {
      _db = db;
    }

    public ActionResult Index()
    {
      List<Item> model = _db.Items.ToList();
      return View(model);
    }
  }
}

Controllers/HomeController.cs

using Microsoft.AspNetCore.Mvc;

namespace ToDoList.Controllers
{
  public class HomeController : Controller
  {
    [HttpGet("/")]
    public ActionResult Index()
    {
      return View();
    }
  }
}

Views/Items/Index.cshtml

@{
  Layout = "_Layout";
}

@using ToDoList.Models;

<h1>Items</h1>

@if (@Model.Count == 0)
{
  <h3>No items have been added yet!</h3>
}

@foreach (Item item in Model)
{
  <li>@item.Description</li>
}

Create and Read with EF Core

Controllers/ItemsController.cs

using Microsoft.AspNetCore.Mvc;
using ToDoList.Models;
using System.Collections.Generic;
using System.Linq;

namespace ToDoList.Controllers
{
  public class ItemsController : Controller
  {
    private readonly ToDoListContext _db;

    public ItemsController(ToDoListContext db)
    {
      _db = db;
    }

    public ActionResult Index()
    {
      List<Item> model = _db.Items.ToList();
      return View(model);
    }

    public ActionResult Create()
    {
      return View();
    }

    [HttpPost]
    public ActionResult Create(Item item)
    {
      _db.Items.Add(item);
      _db.SaveChanges();
      return RedirectToAction("Index");
    }
  }
}

C# Basic Web Applications

Saoud — Sun, 09 May 2021 00:07:53 +0000

HTTP CRUD Methods

CRUD stands for **Create Read Update Delete.

GET requests information from the server, which is usually displayed to users. ASP.NET includes a HttpGet() method for GET requests.

POST alters information on the server. MVC has an HttpPost() method for POST requests.

PATCH updates existing information on the server.

DELETE removes data from the server.

We must use POST requests to update and delete records because HTML5 forms don't recognize PATCH AND DELETE.

Adding Delete to a Form Example

...

<form action="/items/delete" method="post">
  <button type="submit" name="button">Clear All Items</button>
</form>

Adding Delete to a Controller Example

[HttpPost("/items/delete")]
public ActionResult DeleteAll()
{
  // Code goes here.
}

Finding Objects with Unique IDs

Readonly property: a property that can be read but not overwritten.

Introduction to RESTful Routing

Terminology

REST: Short for Representational State Transfer.
RESTful Routing: A set of standards used in many different languages to create efficient, reusable routes.

REST Conventions

Route Name refers to the name of the route method in the controller.
URL Path refers to the path listed above the route in a route decorator. This will also be the URL a user sees when navigating to this area of the site.
HTTP Method refers to the HTTP method that route will respond to, or be invoked for.
Purpose details what each route is responsible for.
:id is a placeholder for where a specific object's unique ID will be placed.

Applying RESTful Routing

Dynamic Routing

Dynamic Routing refers to routes and their URL paths that can dynamically change. Here's an example of a dynamic route:

[HttpGet("/items/{id}")]
public ActionResult Show(int id)
{
  Item foundItem = Item.Find(id);
  return View(foundItem);
}

The {id} portion of the path is a placeholder.
The corresponding link in the view looks like this: <a href='/items/@item.Id'>.

Objects Within Objects Interface Part 2

RESTful routing conventions for applications that use objects within objects look like the image below.

Following RESTful routing doesn't require we use all routes. It just requires that the routes we do need in our applications follow these conventions.

Using Static Content

In order to add CSS or images to our application, we need to update the Startup.cs to UseStaticFiles():

Startup.cs

  public void Configure(IApplicationBuilder app)
  {
    ...
    app.UseStaticFiles(); //THIS IS NEW
    ...

    app.Run(async (context) =>
    {
      ...
    });
  }

img and css directories need to be inside of wwwroot, which should be in the project's root directory.

└── wwwroot
       └── img
       └── css
           └── styles.css

Now we can link to an image like this:

<img src='~/img/photo1.jpg'/>

Layouts and Partials

Layout view: A view that allows us to reuse the same code and content on multiple pages.

Partial view: Reusable section of code that can be inserted into other views.

Razor code block: A way to indicate Razor code that looks like this:

@{
}

Using Layouts

Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My To-Do List!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    @RenderBody()
  </body>
</html>

Using the layout in a view:

Views/Home/Index.cshtml

@{
  Layout = "_Layout";
}

...

Using Partials

A sample partial for a footer:

Views/Shared/Footer.cshtml

<div id="footer">Bottom div content</div>

Adding the partial to another file:

Views/Shared/_Layout.cshtml

<body>
  @Html.Partial("Footer")
</body>

C# Web Applications

Saoud — Sun, 25 Apr 2021 17:09:59 +0000

Clients and Servers Terminology

Client: A computer program that sends a request to another program for data or services (e.g., a web browser is a client that sends requests to a web server).
Server or Web Server: A computer program or device that uses HTTP to distribute information to a client.
Internet Protocol (IP) Address: A set of numbers separated by periods that uniquely identifies a device on the Internet.
Port number: Part of the addressing information used to identify the sender/receiver of requests at an IP address (e.g., 43 is the port number with this IP address: 198.185.159.145:43).
Internet Service Provider (ISP): A company that provides access to the Internet and assigns an IP address to the connecting device.
Hypertext Transfer Protocol (HTTP): A protocol that defines how requests are formatted, transmitted and processed between web clients and web servers.
Domain Naming System (DNS) Servers: The "address book" of the Internet; servers that maintain all domain names and translate them to Internet Protocol (IP) addresses.
Web Resource: The target of a web address; Examples of web resources include files, documents, images, videos, stylesheets, scripts.

Additional Resources

To further explore any of these concepts, visit the following articles linked in this lesson:

Uniform Resource Locator Terminology

Uniform Resource Identifier (URI)/Uniform Resource Locator (URL): The web address which specifies the location of the requested web resources.
Scheme: The part of the URL that indicates the protocol to be used in communication (e.g. http://).
Host: The part of the URL that contains the domain name.
Path: The part of the URL that contains the resource name.
Query string: An optional part of a URL that contains parameters for querying a database; begins with the ? symbol; often used in a search request.
Fragment: An optional part of a URL that contains details for where the browser should display the information (e.g. on a particular div).

Additional Resources

Uniform Resource Locator

Introduction to ASP.NET Core

ASP.NET Core MVC: A Model-View-Controller framework based on C#.

Server-side framework: An application that runs on a server, not in a client such as a browser.

.NET has three different implementations:

.NET Framework
.NET Core
Xamarin with Mono

Server-Side Rendering Terminology

Server-side application: An application that uses a server to serve content to a client.
Client: Usually a web browser but can be anything that facilitates interaction with the web.
Server: A machine that contains resources (like web pages and files).
HTTP response: When a server responds to a client's request via HTTP.
HTTP request: When a client such as a browser makes a request to a client.
DNS server: A server that looks up an IP address by resolving a domain name.
Domain name: The name we type in to go to a specific webpage.
IP address: Short for internet protocol. The actual numerical address where a site's content lives.
Request-response loop: Ongoing communication between a client and a server.
Client-side: When content for an application is served through a client like a browser instead of a server. The server is contacted once and all content for a site is provided. JavaScript applications are often client-side.

MVC Pattern

ASP.NET MVC is a server-side MVC framework.

The MVC in ASP.NET MVC stands for Model-View-Controller, which consists of the following:

The model represents data.
The view is the part of the application the user sees.
The controller acts as a bridge between models and views.

Constructing and Configuring an ASP.NET Core Project

Sample `.csproj` File

ProjectName/ProjectName.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
</Project>

Sample `Startup.cs` File

ProjectName/Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace ProjectName
{
  public class Startup
  {
    public Startup(IWebHostEnvironment env)
    {
      var builder = new ConfigurationBuilder()
          .SetBasePath(env.ContentRootPath)
          .AddEnvironmentVariables();
      Configuration = builder.Build();
    }

    public IConfigurationRoot Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
      services.AddMvc();
    }

    public void Configure(IApplicationBuilder app)
    {
      app.UseRouting();

      app.UseEndpoints(routes =>
      {
        routes.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
      });

      app.Run(async (context) =>
      {
        await context.Response.WriteAsync("Hello World!");
      });
    }
  }
}

Sample `Program.cs` File

ProjectName/Program.cs

using System.IO;
using Microsoft.AspNetCore.Hosting;

namespace ProjectName
{
  public class Program
  {
    public static void Main(string[] args)
    {
      var host = new WebHostBuilder()
        .UseKestrel()
        .UseContentRoot(Directory.GetCurrentDirectory())
        .UseIISIntegration()
        .UseStartup<Startup>()
        .Build();

      host.Run();
    }
  }
}

Building and Running an ASP.NET Core MVC Web Application

MSBuild: Also known as Microsoft Build Engine or Microsoft Build Tools. It turns code in a project directory into a cohesive application. Run the following to build:

> dotnet build

After restoring (dotnet restore) and building, run a .NET application with the following command in the root directory of the project:

> dotnet run

Navigate to http://localhost:5000 to see the running .NET application.

The .gitignore in our .NET projects should include the following:

.gitignore

obj/
bin/

Adding a Watcher

Use a file watcher so the server doesn't need to be restarted whenever code is changed:

dotnet watch run

Introduction to Controllers, Routes and URLs

Sample Controller

FriendLetter/Controllers/HomeController.cs

using Microsoft.AspNetCore.Mvc;

namespace FriendLetter.Controllers
{
  public class HomeController : Controller
  {

    public string Hello() { return "Hello friend!"; }

    public string Goodbye() { return "Goodbye friend."; }

  }
}

Custom URL Paths

Route decorator: Provides additional information to a route we define. The syntax looks like this:

[Route("/name-of-route-goes-here")]

Root path: The home page for our site. We can use a route decorator to specify a home page:

[Route("/")]

Creating and Using Views

Views in .NET use the .cshtml extension.
The View() method has built-in functionality to locate views by name:
- Because views should always reside in a Views directory, View() first locates the Views directory in the production project.
- Then the method looks for a subdirectory with a name that matches the controller name.
- Once in the subdirectory, the method then looks for a file that corresponds with the controller's route name (not the route decorator).
Creating a Basic Model

Sample Model
- Models always reside in a Models subdirectory of the production project.
ProjectName/Models/ClassName.cs
```
namespace ProjectName.Models
{
  public class ClassName
  {

  }
}
```
Dynamic Views with Razor View Engine

Model binding: Passing data from one part of an application to another.

Razor syntax looks like this:
```
@Model.PropertyName
```
We need to pass the model in via the View() method so that the view has access to it:
```
return View(nameOfModel);
```
Using Forms with MVC

Sample Form

We add forms to a route like this:
```
[Route("/form")]
public ActionResult Form() { return View(); }
```
A form generally looks something like this:

FriendLetter/Views/Home/Form.cshtml
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Create a Custom Postcard!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>
    <h1>Fill in your name and your friend's name to create your custom postcard!</h1>
    <form action="/postcard" method="post">
     <label for="sender">Sender's Name</label>
     <input id="sender" name="sender" type="text">
     <label for="recipient">Recipient's Name</label>
     <input id="recipient" name="recipient" type="text">
     <button type="submit">Go!</button>
    </form>
  </body>
</html>
```
Forms have a <form> tag with an action and method This tells ASP.NET Core MVC where to submit info provided through this form. This attribute must be set to the path of another route in our controller.

Debugging Views

Sometimes we have written a good program that compiles nicely. We build the project, run the server, and navigate to our app. At some point while navigating through our pages, we get an error and a page isn't returned. This generally results in a 500 server error message in the browser. (We'll cover server messages later.) Unfortunately, this vague message isn't helpful for debugging our code.

In Startup.cs, we can add a service that will provide a more detailed error message when a Razor page fails to load due to a server error. Within the Configure() method - the same method that declares app.UseMvc() - add a new line of code:

Startup.cs
```
...
    public void Configure(IApplicationBuilder app)
    {
        app.UseDeveloperExceptionPage();  //This is the new line of code
        ...
```
This will produce a friendly error report when Razor fails to load.

Test-Driven Development with C# Part 2

Saoud — Sun, 18 Apr 2021 19:30:20 +0000

Abstraction

Terminology

Abstraction: The process of hiding and encapsulating complex code so that it's easier to use.

Terminology: Interfaces

Extends: Adding additional functionality to a class with an interface.

Interface: A blueprint of things (such as declarations, properties and methods) that must be included within any class that utilizes the interface.

Example

This is the syntax for extending a class with multiple interfaces:

public class ClassToBeExtended : InterfaceToInclude, InterfaceToIncludeTwo

This is a sample interface. Interface names begin with a capital I.

interface IMotor
{
    string OnSwitch();
}

Abstract Classes

Terminology

Inheritance: The process of passing on functionality from a parent class to a child class.

Abstract class: A class that is never instantiated.

Single inheritance: When a programming language allows a child class to inherit from only one parent class. This is in contrast to multiple inheritance.

Example

An example of an abstract class with an abstract method:

abstract class Animal
{
  public abstract string Walk();
}

Difference Between Abstract Classes and Interfaces

A class can only inherit from one abstract class. However, a class can be extended by multiple interfaces.
An abstract class provides core functionality to its child classes. Meanwhile, an interface provides peripheral functionality to the classes it extends.
Abstract classes are more performant than interfaces.
Abstract classes can have fields and constants while interfaces cannot.

Overloaded constructor:

Terminology

When we define two or more constructors in a class.

Example

// Constructors below

public Item(string description)
{
    Description = description;
    _instances.Add(this);
}

public Item(string description, int priority)
{
    Description = description;
    Priority = priority;
    _instances.Add(this);
}

When to Use Overloaded Constructors

Order of parameters: If we want to pass in a priority first and then a description, we could add an overloaded constructor that accounts for arguments being passed into the constructor in a different order.
Type of parameters: If priority is sometimes a string (high, medium, and low) and sometimes an int (1 through 5), we can use an overloaded constructor to account for this different type of data.
Flexibility of parameters: We can choose to have a different number of parameters (as seen in the example we use above) or even no parameters at all.

Try/Catch Blocks:

Terminology

Exception handling: The act of coding a program to handle exceptions in a manner that doesn't lead to the application crashing.

Throwing an exception: When a program crashes and has an error.

Try/catch block: Composed of two parts: try and catch. The try part is where we put the code that may cause an exception. The catch part to handles that specific exception.

Example

using System;

class Program
{
  static void Main()
  {
    try
    {
      int value = 1 / int.Parse("0");
    }
    catch (Exception ex)
    {
      Console.WriteLine("Message = {0}", ex.Message);
      Console.WriteLine("Source = {0}", ex.Source);
      Console.WriteLine("StackTrace = {0}", ex.StackTrace);
      Console.WriteLine("TargetSite = {0}", ex.TargetSite);
    }
  }
}

catch blocks can take an Exception as a parameter, which can help handle exceptions even more effectively. The Exception class has a number of useful properties:

Message: a short description of the exception;
Source: the application name;
StackTrace: the path to what caused the exception;
TargetSite: the name of the method where the exception occurred.

C# Coding Style Convention Review

Indentation and Spacing

Each brace should begin on a new line. This is called Allman Style. A single line statement block can go without braces but the block must be properly indented on its own line and must not be nested in other statement blocks that use braces.
Avoid more than one empty line at any time. For example, do not have two blank lines between members of a type.
Avoid free spaces. For example, avoid if (someVar == 0) . . ., where the dots mark the extra free spaces.
Be consistent with indentation. Epicodus uses two spaces of indentation with the .NET documentation suggests four spaces of indentation. Both are acceptable - as long as you remain consistent throughout your code.

Capitalization and Naming

Prepend an underscore _ to all private field names and use lower camelCase.
Use PascalCase to name all local variables and fields that should remain constant.

Other Conventions

Always specify the visibility, even if it is the default. For example, we should say private string Description, not string Description.
Always declare the variable type, including if that type is a class. For example, we should use the code Item newItem = new Item(...), since the type of newItem is Item. We should not use the code var newItem = new Item(...) since the type of newItem is Item. In general, var is too vague and shouldn't be used.
Namespace imports should be specified at the top of the file, outside of namespace declarations, and should be sorted alphabetically.

C# Static Variables

Saoud — Sun, 18 Apr 2021 19:17:21 +0000

Terminology

Static method: A method called on a class.

Static variable: A variable scoped to the class.

Declaring Static Variables

A static variable includes the static keyword. For instance:

private static List<Item> _instances = new List<Item> {};

Static variable names always begin with an _.

Basic Console Apps C#

Saoud — Sun, 11 Apr 2021 21:38:33 +0000

Compiling and Executing Programs Terminology

Entry Point: Code (usually a method) that's automatically run when a program is launched. In C#, this method is called Main().

Overview & Examples

Setup

Basic boilerplate setup for every C# program:

SomeFileName.csproj

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>Exe</OutputType>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

</Project>

SomeFileName.cs

using System;

class Program
{
  static void Main()
  {
    // program code goes here
  }
}

Running Programs

We run a program with the following two steps:
- Compiling: In the project directory, run > dotnet build. FileName.cs should be the name of the file containing program code. This creates an .exe file.
- Executing: After compiling, run the following to launch the .dll file: > dotnet run.

General Guidelines

Files with .cs extensions contain code written by the developer.
Files with .csproj extensions contain project configuration data.

AOT Versus JIT Compiling Overview

In modern programming languages, source code must be translated into machine code before computers can understand it. Some languages and platforms do this automatically, but others like C# must be explicitly compiled.

Terminology

Compiling: Translating one type of code into another type. Generally this refers to translating a more human-readable type of code into a more complex type of code meant only for computers.
Just in Time: When code is compiled as a user interacts with it, as is the case with JavaScript.
Ahead of Time: When code is compiled ahead of time, as is the case with C#.

Sample `.csproj` code:

DoubleIt.csproj

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>Exe</OutputType>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

</Project>

Build a C# program with the following command: dotnet build.
Run a C# program with the following command: dotnet run.
The Console.WriteLine() method prints a string to the console.
The Console.ReadLine() method is used to retrieve input the user has typed into the command line.

Dotnet Watcher Terminology

Watcher: Monitors files so we don't need to constantly type dotnet run. Here's how we add a watcher:

dotnet watch run

We can also do this with the build command:

dotnet watch build

Data Types and Variables C#

Saoud — Sun, 11 Apr 2021 21:32:01 +0000

Terminology

REPL stands for Read-Evaluate-Print-Loop. A REPL is a command line tool that allows users to enter lines of code and see the result in the terminal when executed.

Overview

You may launch your REPL at any time with the command $ dotnet script.
Commands meant to run in the REPL are preceded with a > in our curriculum. Commands meant to run in the standard command line are still preceded with $.
Once open, you can exit the REPL with the Ctrl + C command.

Strings and Concatenation Terminology

String: A sequence of characters between two quotation marks which is generally used for text content.
Concatenate: The act of making a new string out of multiple smaller strings, usually with a + operator, like this: "Hello" + " " + "World", which creates the string "Hello World".

Examples

Here's an example of concatenating multiple strings together in the C# REPL:

> "Programming" + " " + "is" + " " + "awesome!"
"Programming is awesome!"

Tips

In C#, all lines of code must end with a semi-colon (;). There are a few exceptions we'll learn later, but don't worry about this for now.
We can open the REPL with the $ dotnet script command in the Terminal (for Mac) or Command Prompt (for Windows).

Integers and Arithmetic Terminology

Integers: A type of data representing whole numbers (numbers without decimals).
Operators: A special character (or characters) that indicates an action to be performed.+, , , /, and % are all operators for mathematic functions.

Examples

Basic arithmetic works just like you'd expect:

1 + 2
4 - 3
5 * 6
9 / 2
7 + 8 * 9
(7 + 8) * 9

Overview

9 % 2 returns the remainder of 9 divided by 2. % is called modulo.

Terminology

Assignment Operator: The = operator is used to set the initial value of a variable:

string exampleVariable = "hey, I'm a variable!";`

Lower Camel Case: C# uses lower camel case for variables just like JavaScript. Here are a few examples: likeThis, or evenLikeThisExampleHere.
Strongly-Typed Language: A language in which data types must be declared. In the following example, we state that our variable has the string data type:

string anotherExampleVariable = "hey, I'm a variable too!";

Overview

C# variables must declare the type of data they contain because C# is a strongly typed language.
To create a C# variable we need three things:
A descriptive name.
A data type to declare what data the variable holds such as int or string.
An initial value set with the assignment operator (=).

Variables and Data Types Examples

> string phrase = "Hello World";

string is the data type our variable will be.
phrase is our descriptive name.
"Hello World" is the initial value.

Terminology

Arguments: Additional information provided to a method, passed in through the parentheses following the method name.
Substring: A small portion of a larger string. A bit like a single word in a larger sentence. For instance, "hello" is a substring of the string "hello world".
Pascal Case: Required naming convention for all C# methods in which all words are capitalized with no spaces. Examples include LikeThisMethodNameHere() or ThisOtherFictionalMethodHere().

Methods Examples

Here are some examples of built-in methods you can call without arguments in the REPL:

> string phrase = "Programming is AWESOME";

> phrase
"Programming is AWESOME"

> phrase.ToUpper()
"PROGRAMMING IS AWESOME"

> phrase.ToLower()
"programming is awesome"

Calling built-in methods with provided arguments:

> string phraseOne = "hello world";
> string phraseTwo = "hello";

> phraseOne.Contains(phraseTwo)
true

Creating a Currency Converter with pure JS with exchangerate api

Saoud — Sat, 03 Apr 2021 10:29:40 +0000

Fetch the exchange rate from internet(with the help of exchangerateapi)

Setting up HTML and CSS

I set my page for a three column three row layout with css grid and warapped all the page inside a container div.

display: grid;
grid-template:
    "title title title" minmax(min-content, 5rem)
    ". content ." minmax(100px, auto)
    "footer footer footer" minmax(2.5rem, max-content)
        / minmax(20px, 1fr) 5fr minmax(20px, 1fr);

Inside the content I decided to have two panes(divs) sliding, I got this Idea from a challenge given by scrimba : Day 15 of JavaScriptmas : JavaScript Carousel (my solution). Basically what it does is using one div we declare viewing area, another div holds all the divs inside it side by side, and we use css transforms with transitions for the movement of the windows container with animations.

I split the input boxes and button in two parts. These two parts are placed in two separate divs. In the first one it gets 2 currencies to convert from x_currency to y_currency. In the 2nd part it had a input box to enter the amount of x_currency to be converted to y_currency using a Exchange rate form another input box.

The viewing div has css property overflow : hidden and the windows container(I called it slider) is constucted with again, css grid to have only one row.

.slider {
  width: 100%;
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: repeat(2, 100%);
  transform: translateX(0);
  transition: transform 450ms;
}

Making Interactive with JavaScript

To slide between the windows I built a function which will get the width to the current viewing window(div) and transform = translateX(width) and to get back to previous div it will just do translateX(0). I made a function to do just that:

// animating between two divs
// `true` for backward animation
// `false` for forward animation
const animateSlider = (isPositive) => {
  // dynamically getting the length to translate
  let to_translate = sliding.offsetWidth;if (isPositive) {
    slider.style.transform = `translate(0px)`;
  } else {
    slider.style.transform = `translate(${-to_translate}px)`;
  }
};

My page only have 2 divs sliding and to switch between I was using it on a button click event and key press event.

//for click event listners
document.getElementById("id").addEventListener("click", functionToExecute)// for key event listners
document.getElementById("id").addEventListener("keyup",(event) => {
    if (event.key == "Enter") {
        functionToExecute();
    }
});

Fetching Currency Info from exchangerate api

Exchange rates API is a free service for current and historical foreign exchange rates published by the European Central Bank. Using it with fetch the JavaScript loads the supported currencies into two lists(datalist and array), one for UI suggestion in the text box and other to verify that if our page will be able to translate the source currency to target currency, if not user will be offered to enter custom exchange rate for that unsupported currency and if found the input box for Exchange rate will be grayed out and made read-only.

// gets exchange rate for specific currenciesconst getExRate = async (frm, to) => {
    let req_url = `https://api.exchangeratesapi.io/latest?base=${frm}&symbols=${to}`;
    let res = await fetch(req_url);
    let data = await res.json();
    return data.rates[to];
};

// this func will load all supported currencies into a datalist
// and in an array for some logical operation later
const loadSupporedCurrencies = async () => {
  //   reseting all the inputbox values
  ex_rate_box.value = "";
  source_amount_box.value = "";
  source_amount_box.value = "";
  target_currency_box.value = "";//   getting all the supported currencies from `exchangeratesapi`
  let response = await fetch("https://api.exchangeratesapi.io/latest");
  let data = await response.json();//   adding the base currency to the list
  addListEntry(data.base, data.base);
  curr_list.push(data.base);// Read currencies as key from the json obj and pushing into the list
  for (let key in data.rates) {
    addListEntry(key, key);
    curr_list.push(key);
  }
};

https://codepen.io/saoud-the-scripter/pen/xxgdLEp

DEV Community: Saoud

Customize iTerm

Operators in Depth

1. Additional operators

The logical AND operator in JavaScript: &&

The logical OR operator in JavaScript: ||

The logical NOT operator: !

The modulus operator: %

The equality operator, ==

The strict equality operator, ===

The inequality operator, !=

The strict inequality operator !==

2. Using the + operators on strings and numbers

Combining two strings using the + operator

Combining strings and numbers using the + operator

The addition assignment operator, +=

The concatenation assignment operator, +=

Operator precedence and associativity

Revert Git Full Git commit

Revert the full commit

About History Rewriting

Delete the last commit

React Intro

Using Node in the Command Line

Immutability

Imperative Versus Declarative Programming

Pure Functions

First Class Citizens

Closures

Currying

Recursion

The Problems of Classical Inheritance

Spread Operator

Examples

Composition

State

Storing State in Closures

Database Basics

Database Schema and Relationship Types

Configuration for Entity Framework Core

appsettings.json

Startup.cs

Program.cs

Models/ToDoListContext.cs

EF Core with an Existing Database

Controllers/ItemsController.cs

Controllers/HomeController.cs

Views/Items/Index.cshtml

Create and Read with EF Core

C# Basic Web Applications

HTTP CRUD Methods

Adding Delete to a Form Example

Adding Delete to a Controller Example

Introduction to RESTful Routing

Terminology

REST Conventions

Applying RESTful Routing

Dynamic Routing

Objects Within Objects Interface Part 2

Using Static Content

Layouts and Partials

Using Layouts

Using Partials

C# Web Applications

Clients and Servers Terminology

Additional Resources

Uniform Resource Locator Terminology

Additional Resources

Introduction to ASP.NET Core

Server-Side Rendering Terminology

MVC Pattern

Constructing and Configuring an ASP.NET Core Project

Sample .csproj File

Sample Startup.cs File

Sample Program.cs File

Building and Running an ASP.NET Core MVC Web Application

Adding a Watcher

Introduction to Controllers, Routes and URLs

Sample Controller

Custom URL Paths

Sample `.csproj` File

Sample `Startup.cs` File

Sample `Program.cs` File

Sample `.csproj` code: