DEV Community: Brandon Weaver

Linear-gradient Text and Animated Linear-gradient

Brandon Weaver — Sat, 20 Mar 2021 23:53:00 +0000

The key to linear-gradient text is to set the background-clip property to text; this allows you to then apply a transparent color to the text and reveal the linear-gradient background image beneath.

To Animate a linear-gradient background, you simply need to set the background size of the image to be larger than the element, and change the background position within the animation.

You can also apply both of these solutions to get animated linear-gradient text.

:is()

Brandon Weaver — Sun, 14 Mar 2021 00:30:39 +0000

I've been trying to improve my understanding of CSS recently and discovered the :is() function. :is() allows you to apply styles to nested elements without the need to specify each element individually.

In the example above, I use the function to group styling which I want to apply to both the red and blue nested paragraph elements.

In this example, you could get the same result with the following selector, however, when you have deeply nested, :is() helps to prevent the need for repetitive selectors.

.red p,
.blue p {
  font-size: 30px;
  background-color: #9b9b9b;
  border-radius: 10px;
}

/* same as above */
:is(.red, .blue) p {
  font-size: 30px;
  background-color: #9b9b9b;
  border-radius: 10px;
}

DELETE and PATCH

Brandon Weaver — Sun, 07 Mar 2021 02:14:37 +0000

In this, possibly the final part of the series, we'll focus on implementing DELETE and PATCH actions within our users controller.

We'll start by implementing the DELETE action as it's very simple and easy to do. We'll start by opening up 'AppRepo.cs' and adding a new method called DeleteUser.

public void DeleteUser(User user)
{
    this._context.Users.Remove(user);
}

Now, we'll open up 'UsersController.cs' and create our DELETE action.

[HttpDelete("{id}")]
public ActionResult Delete(int id)
{
    User user = this._repo.GetUserById(id);

    if (user != null)
    {
        this._repo.DeleteUser(user);
        this._repo.SaveChanges();

        return NoContent();
    }
    return NotFound();
}

That's it. Now, assuming there is a user with the ID of 1 within our database, we can remove them with the following JavaScript.

fetch("https://localhost:5001/api/users/1", {
    method: "DELETE"
})
.then(r => console.log(r));

Unfortunately creating our PATCH action isn't quite so simple. We'll rely on a few more NuGet packages to help us out. In your terminal, run the following two commands to install the packages we'll be using.

dotnet add package Microsoft.AspNetCore.JsonPatch
dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson

Now, within 'Startup.cs' we'll need to make some changes to get Newtonsoft JSON serlialization working within our controllers.

First, add the following using statement at the top of the file to reference our newly installed package.

using Newtonsoft.Json.Serialization;

Now we need to locate the following line within the ConfigureServices method.

services.AddControllers();

This line will need to be changed as follows.

services.AddControllers().AddNewtonsoftJson(s => {
    s.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
});

Next, we'll create a new DTO and map for handling the transfer of updated properties from the DTO to our user within the database context and vice-versa.

Within the 'Data' folder, create a new file named 'UserUpdateDto.cs', and add the following code.

using System.ComponentModel.DataAnnotations;

namespace AspNetCoreWebApiIntro.Dtos
{
    public class UserUpdateDto
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string FirstName { get; set; }

        [Required]
        public string LastName { get; set; }
    }
}

Open up 'UserProfile.cs', and add the following code.

using AutoMapper;

using AspNetCoreWebApiIntro.Dtos;
using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Profiles
{
    public class UsersProfile : Profile
    {
        public UsersProfile()
        {
            CreateMap<User, UserReadDto>();
            CreateMap<User, UserUpdateDto>(); // New
            CreateMap<UserUpdateDto, User>(); // New
        }
    }
}

Finally, we're able to create our PATCH action. Open 'UsersController.cs' and add the following using statement to the top of the file.

using Microsoft.AspNetCore.JsonPatch;

Next, add the following action.

[HttpPatch("{id}")]
public ActionResult Update(int id, JsonPatchDocument<UserUpdateDto> patchDoc)
{
    User user = this._repo.GetUserById(id);

    if (user != null)
    {
        UserUpdateDto userToUpdate = this._mapper.Map<UserUpdateDto>(user);
        patchDoc.ApplyTo(userToUpdate, ModelState);

        if (!TryValidateModel(userToUpdate))
        {
            return ValidationProblem(ModelState);
        }

        this._mapper.Map(userToUpdate, user);
        this._repo.SaveChanges();

        return NoContent();
    }
    return NotFound();
}

Here, we're grabbing the user from our repository as usual, creating a DTO from that user using our mapper, and applying our patch operations using the JSON patch document provided by the Microsoft.AspNetCore.JsonPatch package to the DTO before mapping it back to our user. Traditionally, you'd want to have an UpdateUser method within your repository to call prior to SaveChanges, however, mapping the user from our edited DTO applies all of the logic needed to update the user.

Again, assuming that there is a user with the ID of 1, we can now change their last name with the following JavaScript.

fetch("https://localhost:5001/api/users/5", {
    method: "PATCH",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify([
        {
            op: "replace",
            path: "/lastName",
            value: "Doe"
        }
    ])
})
.then(r => console.log(r));

I hope that a few people were able to find this series helpful. I may decide to add additional sections in the future, but this should suffice to cover the fundamentals and I'd be glad to answer any questions (if I'm able) in the meantime.

Thanks for reading.

AutoMapper

Brandon Weaver — Sun, 28 Feb 2021 01:36:59 +0000

In this part of the series, we'll take advantage of the AutoMapper package and create DTOs (data transfer objects) to manage the content which our endpoints expose.

We'll start by adding the package we need.

dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection

Next, we'll add the service to our application. At the top of the ConfigureServices method within 'Startup.cs', add the single line of code.

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<Data.AppContext>(opt => opt.UseSqlite(Configuration.GetConnectionString("AppConnection")));

    services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies()); // Add this

    ...

Now we'll add a new folder named 'Dtos' to the primary directory of our application, and we'll add a new file to that folder named 'UserReadDto.cs'.

namespace AspNetCoreWebApiIntro.Dtos
{
    public class UserReadDto
    {
        public string FirstName { get; set; }

        public string LastName { get; set; }
    }
}

We'll add yet another folder to the primary directory named 'Profiles' and add a new file named 'UsersProfile.cs'.

using AutoMapper;

using AspNetCoreWebApiIntro.Dtos;
using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Profiles
{
    public class UsersProfile : Profile
    {
        public UsersProfile()
        {
            CreateMap<User, UserReadDto>();
        }
    }
}

Now, we simply need to revisit our users controller and ensure that our read actions return our DTOs which will be mapped from each user via AutoMapper.

using AutoMapper; // New
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

using AspNetCoreWebApiIntro.Data;
using AspNetCoreWebApiIntro.Dtos; // New
using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class UsersController : ControllerBase
    {
        private readonly AppRepo _repo;
        private readonly IMapper _mapper; // New

        public UsersController(AppRepo repo, IMapper mapper) // Change
        {
            this._repo = repo;
            this._mapper = mapper; // New
        }

        [HttpGet]
        public ActionResult<IEnumerable<UserReadDto>> Index() // Change
        {
            IEnumerable<User> users = this._repo.GetAllUsers(); // New
            return Ok(this._mapper.Map<IEnumerable<UserReadDto>>(users)); // Change
        }

        [HttpGet("{id}", Name = "Show")]
        public ActionResult<UserReadDto> Show(int id) // Change
        {
            User user = this._repo.GetUserById(id);

            if (user != null)
                return Ok(this._mapper.Map<UserReadDto>(user)); // Change
            return NotFound();
        }

        ...

Each endpoint will now return only the first and last name of each user as we have excluded that property from the read DTO.

In the next part of this series, we'll add PATCH and DELETE actions.

Entity Framework

Brandon Weaver — Sun, 21 Feb 2021 02:46:08 +0000

In this part of the series we'll use Entity framework to create migrations and manage database transactions.

First, we'll add the NuGet packages we need. I'll be using a SQLite database throughout this series, so we'll add Entity Framework and the SQLite extension for Entity Framework.

dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Sqlite

If you're using Visual Studio, I believe you can simply right click on the solution in the solution explorer, select add NuGet package, and search for the packages you want to add.

Now we'll install the Entity Framework tools which will allow us to generate migrations from the models we've added to our application. You can check to see if the tools are already installed by running dotnet ef.

To install the Entity Framework tools, run the following.

dotnet tool install --global dotnet-ef

Now that we have the packages and tools we need, we'll revisit our user model and add some attributes which will provide additional information regarding how our schema should be generated.

using System.ComponentModel.DataAnnotations;

namespace AspNetCoreWebApiIntro.Models
{
    public class User
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string FirstName { get; set; }

        [Required]
        public string LastName { get; set; }
    }
}

The [Key] attribute will ensure that the Id property of our user model is automatically incremented and set each time a user is added to the users table of our database. The [Required] attribute simply ensures that these properties are not null before adding a new user.

Previously, we created a mock repository and referenced a collection of users which we created from that repository. Since we're going to be referencing 'real' data, we'll use a DbContext and DbSet collection type provided by Entity Framework to reference data stored in our database.

Within the 'Data' folder, add a class named 'AppContext.cs', and add the following code.

using Microsoft.EntityFrameworkCore;

using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Data
{
    public class AppContext : DbContext
    {
        public DbSet<User> Users { get; set; }

        public AppContext(DbContextOptions<AppContext> opt) : base(opt)
        {

        }
    }
}

The DbContextOptions<AppContext> parameter will allow us to signify the type and location of our database when add our AppContext service to the application.

We'll also take this time to create our application repository. Again, within the 'Data' folder, add a class named 'AppRepo.cs', and add the following code.

using System.Collections.Generic;
using System.Linq;

using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Data
{
    public class AppRepo
    {
        private readonly AppContext _context;

        public AppRepo(AppContext context)
        {
            this._context = context;
        }

        public bool SaveChanges()
        {
            return this._context.SaveChanges() >= 0;
        }

        public IEnumerable<User> GetAllUsers()
        {
            return this._context.Users;
        }

        public User GetUserById(int id)
        {
            return this._context.Users.FirstOrDefault(u => u.Id == id);
        }

        public void CreateUser(User user)
        {
            this._context.Users.Add(user);
        }
    }
}

You'll notice that our repository now accepts a reference to our DbContext and references the users collection located in that context. Another aspect of this class worth mentioning is the SaveChanges method; this method returns false in the event that our database fails to update. Although we could simply call _context.SaveChanges to update the database, it is often useful to check that this is successful in order to take appropriate actions if that isn't the case.

We now have almost everything in place; we just need to set the location of our database, and add and configure our new services. We'll also set an extremely relaxed CORS policy to make things a little easier moving forward.

Within the 'Data' folder, create a new folder named 'Database'. This is where our database will be located. Now, we'll open up 'appsettings.json' and add a reference to that location.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": { // Add this
    "AppConnection": "Data Source=./Data/Database/app_database.db" // Add this
  } // Add this
}

Now open up 'Startup.cs' and add the following code to the top of the ConfigureServices method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<Data.AppContext>(opt => opt.UseSqlite(Configuration.GetConnectionString("AppConnection")));

    services.AddScoped<AppRepo, AppRepo>();

    services.AddCors(opt => {
        opt.AddPolicy("AppPolicy", builder => {
            builder
            .AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
    });

    ...

You'll also need to add references to the required namespaces.

using Microsoft.EntityFrameworkCore;
using AspNetCoreWebApiIntro.Data;

Next, at the top of the Configure method add the following line.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors("AppPolicy");

    ...

Finally, we'll add a create user action to our users controller and create our initial migration.

Within 'UsersController.cs', add the following code to the bottom of the class.

[HttpPost]
public ActionResult<User> Create(User user)
{
    this._repo.CreateUser(user);
    this._repo.SaveChanges();

    return CreatedAtRoute(nameof(Show), new { Id = user.Id }, user);
}

We'll also need to name our Show action attribute to ensure that our response provides the appropriate endpoint.

[HttpGet("{id}", Name = "Show")] // Change this
public ActionResult<User> Show(int id)
{
    ...
}

Now we simply create our initial migration and create our database by running the two following commands.

dotnet ef migrations add InitialMigration
dotnet ef database update

That's it! You'll now be able to create and persist users. If you want to ensure that everything is working, build and run the application then execute the following code in your browser's console.

const user = { firstName: "Jane", lastName: "Doe" }
fetch("https://localhost:5001/api/users", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(user)
})
.then(r => r.json())
.then(o => console.log(o));

You should see the following log.

{id: 1, firstName: "Jane", lastName: "Doe"}

We'll take a break here. In the next part of the series we'll use another package named AutoMapper to take advantage of data transfer objects which will allow us to specify what properties we wish to send and receive from and within our user actions.

Basic Setup

Brandon Weaver — Sun, 14 Feb 2021 01:08:16 +0000

Over the next few weeks I'll cover building an ASP.NET Core Web API from start to finish. This week, we'll focus on creating the project, a simple user model, a mock repository, and a basic users controller.

I'll be using VSCode throughout this series, however, you should be able to follow along regardless of which editor you use. If you're using Visual Studio, you'll want to look for the project template named 'ASP.NET Core Web Application', and select 'API' after naming the project, otherwise you can create the project template with the following command.

dotnet new webapi -n AspNetCoreWebApiIntro

The template will generate two files which we are going to remove before we get started. From the project directory, remove Controllers/WeatherForecastController.cs and WeatherForecast.cs.

Now, we're going to add two folders. From the root directory of the project, add a folder named 'Models', and a folder named 'Data'. Your root directory should look similar to the following.

Controllers
Data
Models
Properties
appsettings.json
AspNetCoreWebApiIntro.csproj
Program.cs
Startup.cs

You will likely have other folders and files in your root directory, however, we won't need to worry about any of those throughout this series.

We'll begin by creating a user model. In the 'Models' folder, create a new file named 'User.cs' and add the following code.

namespace AspNetCoreWebApiIntro.Models
{
    public class User
    {
        public int Id { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }
    }
}

We will need to revisit the user model once we set up our database, and we'll take advantage of Entity Framework to add attributes to our model and create migrations. For now, we will simply create mock users to get things up and running.

Let's create our mock repository now. In the 'Data' folder, create a new file named 'MockRepo.cs' and add the following code.

using System.Collections.Generic;
using System.Linq;

using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Data
{
    public class MockRepo
    {
        private readonly List<User> _users = new List<User>
        {
            new User { Id = 1, FirstName = "Jane", LastName = "Doe" },
            new User { Id = 2, FirstName = "John", LastName = "Doe" },
            new User { Id = 3, FirstName = "John", LastName = "Smith" }
        };

        public IEnumerable<User> GetAllUsers()
        {
            return this._users;
        }

        public User GetUserById(int id)
        {
            return this._users.FirstOrDefault(u => u.Id == id);
        }
    }
}

Here, we are creating a private field of users, and exposing two methods; one which allows us to get all of the users, and one which allows us to get a single user via the Id property.

We will do something quite different when working with real data, again utilizing Entity Framework to handle communication with the database, although the methods we expose here will be very similar within our actual repository.

Now, we just need to create our controller and a few endpoints. Within the 'Controllers' folder, create a new file named 'UsersController.cs' and add the following code.

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

using AspNetCoreWebApiIntro.Data;
using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class UsersController : ControllerBase
    {
        private readonly MockRepo _repo = new MockRepo();

        [HttpGet]
        public ActionResult<IEnumerable<User>> Index()
        {
            return Ok(this._repo.GetAllUsers());
        }

        [HttpGet("{id}")]
        public ActionResult<User> Show(int id)
        {
            User user = this._repo.GetUserById(id);

            if (user != null)
                return Ok(this._repo.GetUserById(id));
            return NotFound();
        }
    }
}

Here we're applying a property of [ApiController] to the class; this essentially implements behavior for us to ensure that our actions always generate a JSON response, even in the event of an error.

You'll notice that we're adding a [Route("api/[controller]")] property to the class as well, which places the root of our users resources at api/users. You could instead use [Route("api/users")] if you want, in order to prevent the location from changing in the event that the name of your controller should change.

We also apply a property of [HttpGet] to our Index and Show methods to account for the verb used by the request and capture parameters; we'll learn more about this as we move forward and implement actions for POST, PATCH, and DELETE.

Each of our actions return an ActionResult<T> at the moment, where T represents the data type we are returning in the body of our response. We use a number of methods provided for us by the ControllerBase class which we inherited from to generate an appropriate response for each scenario; we'll learn of a few others as we progress.

Now, open up Properties/launchSettings.json and look for the applicationUrl property of AspNetCoreWebApiIntro; by default, this value should be https://localhost:5001;http://localhost:5000. In any case, you'll want to visit the first address delimited by the semi-colon in your browser.

Build and run the project (dotnet run in terminal). Assuming you're using the port listed above, the following endpoints should give you the response listed beneath.

https://localhost:5001/api/users
[{"id":1,"firstName":"Jane","lastName":"Doe"},{"id":2,"firstName":"John","lastName":"Doe"},{"id":3,"firstName":"John","lastName":"Smith"}]

https://localhost:5001/api/users/1
{"id":1,"firstName":"Jane","lastName":"Doe"}

https://localhost:5001/api/users/2
{"id":2,"firstName":"John","lastName":"Doe"}

https://localhost:5001/api/users/3
{"id":3,"firstName":"John","lastName":"Smith"}

With that milestone achieved we'll take a break. In the next part of this series we'll set up a database, create an actual repository, and use Entity Framework to manage the database transactions within our application.

Dynamic Containers with CSS and JavaScript

Brandon Weaver — Sun, 07 Feb 2021 01:45:28 +0000

There are endless ways to arrange content and create pixel-perfect designs using CSS and JavaScript. Depending on what you want to achieve aesthetically, you can often create impressive layouts using only CSS, however, there are times when JavaScript is necessary.

I typically rely on a combination of flex, margin, padding, and the CSS calc function to determine the width, height, and spacing of each element.

Below is a demonstration I created which uses this approach.

Something worth pointing out is the use of vh; this unit represents the view height percentage of the window. I use calc(100vh - 90px) since I want the container to fill the remaining space of the window. I subtract 90 pixel units from 100% of the view height since that is the total height of the other elements including margins and padding. You can use a similar approach to determine the width and height of elements in a container while accounting for margins and padding.

Scrolling to Elements with JavaScript

Brandon Weaver — Sun, 31 Jan 2021 03:47:29 +0000

There are a few different ways to scroll to an element using JavaScript.

One way is to simply use element.scrollIntoView(); the other is to use container.scroll() or container.scrollTo(); there's no difference between these two methods from my understanding.

With element.scrollIntoView(), each scroll bar will be used to reach the element we call the method on; this is the simplest solution, however, we don't always want to use every scroll bar.

With container.scroll() or container.scrollTo(), we can pass optional arguments to determine where precisely we want the containing element (the scrollable element) to scroll to.

Below is an example which uses container.scrollTo() to scroll to various elements on the page. Using element.scrollIntoView() in this scenario will cause the scroll bar of the blog post to scroll in conjunction with the scroll bar of the embedded CodePen to reach each element.

Scaling SVG with JavaScript

Brandon Weaver — Sun, 24 Jan 2021 03:23:29 +0000

I recently decided to add a mode to a graphing module I've been working on which allows the graph to be drawn using either SVG line or path elements. The graph will automatically scale to its container, and render each line appropriately given the width and height of the container. Until this point, I had resolved this with a canvas, but I wanted to add an option to render the graph using SVG, as it typically looks cleaner.

I had worked minimally with SVG until this point, and quickly realized that things weren't going to work quite as easily as I initially anticipated. SVG is an XML-based markup, meaning that SVG elements aren't going to be created/manipulated in the same way that HTML elements would. Luckily, there are some useful methods which allow us to create and set the attributes of XML elements in JavaScript.

We can create HTML elements in JavaScript using document.createElement, but we can also create XML elements using document.createElementNS. When we use document.createElementNS, we need to pass two arguments to the method; the first being a string which points to the location of the namespace, and the second being a string which identifies the type of element we wish to create. Therefor, if we want to create an SVG element using JavaScript, we would use document.createElementNS("http://www.w3.org/2000/svg", "svg");.

We can append the element to its container using container.append, just as we would with any other HTML element, but what if we want to adjust the attributes of the SVG element? We need to use another useful method - setAttribute; setAttribute takes two arguments, the first being a string which identifies the attribute we want to set, and the second being the value.

The following code will create an SVG element, scale it to 100%, and append it to the container.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("width", "100%");
rect.setAttribute("height", "100%");
rect.setAttribute("fill", "#fff0");

svg.append(rect);
document.querySelector(".container").append(svg);

...

We're also appending a rectangle to our SVG element at this point, so that we can draw something over it later on.

Now, we want to be able to draw something relative to the scale of the svg element, so we'll need to be able to get the width and height of the element after it scales. Similarly to setting the attributes of the SVG element, we need to learn about another method in order to get the value of an attribute. The method we need is getBBox; getBBox will return the bounding box of the element, and allow us to extract the values we need in order to scale our drawing accordingly.

With our SVG element appended to the container, we'll use getBBox to draw a red X which fills the dimensions of the SVG element.

...

const svgBBox = svg.getBBox();
const width = svgBBox.width;
const height = svgBBox.height;

const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");

line1.setAttribute("x1", 0);
line1.setAttribute("y1", 0);
line1.setAttribute("x2", width);
line1.setAttribute("y2", height);
line1.setAttribute("fill", "red");

line2.setAttribute("x1", 0);
line2.setAttribute("y1", height);
line2.setAttribute("x2", width);
line2.setAttribute("y2", 0);
line2.setAttribute("fill", "red");

svg.append(line1);
svg.append(line2);

And that's all there is to it!

Below is a similar example using a series of buttons as containers, and if you're interested in the graphing module, you can find the repository here; bear in mind that it's a work in progress, and I'm currently taking time to refactor.

Graphing Data to a Canvas

Brandon Weaver — Sun, 17 Jan 2021 00:49:13 +0000

Let's say we have a data structure similar to the following, and we want to graph each set of data for a visual comparison.

const dataSets = [
    {
        color: "#00f",
        data: [5,10,25,15,20]
    },
    {
        color: "#f00",
        data: [0,20,15,25,10]
    }
];

I'll assume we have a reference to a canvas and context throughout this example. If you want to learn more about this, you can take a look at my previous entry here.

What will we need in order to create a visual representation of these two sets?

First, we'll need to find the highest and lowest value among all sets.

let yHigh = Number.MIN_VALUE;
let yLow = Number.MAX_VALUE;
for (const dataSet of dataSets) {
    for (const datum of dataset.data) {
        if (datum > yHigh) yHigh = datum;
        if (datum < yLow) yLow = datum;
    }
}

Next, we'll need to iterate over each set and figure out the x, and y-axis of each initial value as it relates to our canvas.

The x-axis is easy enough, as it's simply 0. We will, however, also need to divide the canvas width by one less than our set length (since the first value of x will be 0), and add this value to x as we draw the set.

for (const dataSet of dataSets) {
    let x = 0;
    const xStep = canvas.width / (dataSet.data.length - 1);

    ...

Now, we need to figure out the y value; this involves finding the percentage of each value between the highest and lowest values, and setting y to the value of that percentage relative to our canvas height.

    ...

    let yPercentage = (dataSet.data[0] - yLow) / (yHigh - yLow) * 100;
    let y = canvas.height - canvas.height / 100 * yPercentage;

    ...

Notice that we're also subtracting the value of yLow from the datum before calculating the percentage; this ensures that, if our lowest value is 10, and our canvas height is 100, our lowest value will be drawn to 100 on the canvas, rather than 90. Without this subtraction our data will be drawn to the canvas as if the lowest value is 0. We also subtract our y value from the canvas height to prevent our graph from being inverted since we're drawing the low datum on what is technically high on the canvas.

We'll set strokeStyle of our context to the sets color, and call beginPath to prevent our lines from being redrawn using the last stroke style.

    ...

    context.strokeStyle = dataSet.color;
    context.beginPath();

    ...

Next, we simply iterate over the data, starting from the second index (since we already have the first point), stepping along the x-axis by adding the value of xStep to x, and finding y for each datum just as we did with the first.

    ...

    for (let i = 1; i < dataSet.data.length; i++) {
        context.moveTo(x, y);
        x += xStep;

        yPercentage = (dataSet.data[i] - yLow) / (yHigh - yLow) * 100;
        y = canvas.height - canvas.height / 100 * yPercentage;

        context.lineTo(x, y);
        context.stroke();
    }
}

Below is a nearly identical example I made, which uses the resize event of the window to allow the canvas to fill its container by setting the width and height to the offset width and height, and redrawing the data.

Cropping Images with CSS

Brandon Weaver — Sun, 10 Jan 2021 00:33:58 +0000

There are a few ways to crop images using CSS.

The first approach is to use a container with relative positioning and hidden overflow, then adjust the orientation of the image using absolute positioning.

The second approach is to simply use object-fit and object-position to adjust the size and orientation of the image.

Here's a straight-forward example of the two strategies at work.

Introduction to the HTML5 Canvas

Brandon Weaver — Sun, 03 Jan 2021 02:22:09 +0000

The canvas element can be used to create everything from simple animations and displays, to games and simulations. For this introduction, we will focus on common strategies for rendering a simple interactive 'screen' using the canvas.

first create a new HTML file, and name it whatever you prefer. Open the file in a text editor of your choice, and add the following markup.

<!DOCTYPE html>
<html>
    <head>
        <title>canvas-intro</title>
    </head>
    <body>
        <canvas height="480"
                width="640"
                style="display: block; margin: 0 auto; background-color: #050505;">
        </canvas>
        <script></script>
    </body>
</html>

Open the file in your browser, and you will be able to see the blank canvas.

Now, let's create a reference to the canvas, and canvas context in our script.

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

There are a number of different rendering contexts, mostly utilizing WebGL for 3D effects, however, 2D is much easier to manage. If you'd like more information about rendering contexts, you can find plenty here.

We will need to reference our 2D context any time we want to draw to the canvas, or remove previous renderings.

Next, we'll create a simple factory function which will allow us to render rectangles on the canvas.

...

function rectangle(x, y, width, height, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.update = () => {
        context.fillStyle = color;
        context.fillRect(this.x, this.y, this.width, this.height);
    }
}

Within the definition of rectangle we have a method named update; this method sets the fillStyle of our context before a call to context.fillRect. In conjunction, a rectangle will be rendered from the x and y value, with the given width, height, and color when update is called.

Our next step will be creating a rectangle, and drawing it on the canvas.

...

const rect = new rectangle(0, 0, 10, 20, "#f00");
rect.update();

If you open/reload the file in your browser, you can see our red rectangle in the top-left corner.

Now, we want the user to be able to move the rectangle; this means that we need to update the canvas using an interval, and listen for key events.

Add the following function, and pass it to setInterval; the first argument is the callback which will be called every time the interval has elapsed, and the second argument is the interval time in milliseconds.

...

const update = () => {
    rect.x += 0.5; // Move right
    rect.y += 0.5; // Move down
    rect.update();
}
setInterval(update, 20);

Open/reload the file, and you'll see that our rectangle slowly moves from its original position toward the bottom-right corner of our canvas. There is, however, one problem; because we aren't removing the previous renderings, we have a trailing effect. To resolve this issue, we simply add the following line at the top of update's definition.

...

const update = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    rect.x += 0.5; // Move right
    rect.y += 0.5; // Move down
    rect.update();
}

...

Again, open/reload the file, and you will no longer see the trail of the rectangle.

On to the interactivity! Remove the two commented lines from our update function. Just above our update function we're going to create an array named keys, and listen for key events.

...

const keys = [];
window.addEventListener("keydown", e => {
    keys[e.keyCode] = true;
});
window.addEventListener("keyup", e => {
    keys[e.keyCode] = false;
});

...

Here, we're setting the value at keys index of the key code to true or false, depending on whether the key is down or up, respectively; this allows us to easily track what keys the user is pressing.

Now, we'll just add some simple logic to move the rectangle in the appropriate direction when the user presses the arrow keys, and prevent the rectangle from moving outside of the canvas area.

...

const update = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    if (keyboard.keys[37] && rect.x > 0)
        rect.x -= 1;
    if (keyboard.keys[39] && rect.x + rect.width < canvas.width)
        rect.x += 1;
    if (keyboard.keys[38] && rect.y > 0)
        rect.y -= 1;
    if (keyboard.keys[40] && rect.y + rect.height < canvas.height)
        rect.y += 1;
    rect.update();
}

...

Once more, open/reload the file and use the arrow keys to guide your rectangle around! I know that it isn't very exciting, but this is 90% of what you'll need to know in order to create cool animations, fun games, and more (2D stuff at least).