• CoverT 49: Destructuring the Same Property Multiple Times

    When performing object destructuring you can destructure the same property multiple times. This can be really useful if you want to snag a full object and then snag individual properties too.

  • CoverT 48: Object Rest Destructuring

    Object destructuing is great! Found a clean way to pick some specific properties from an object, and then assign the rest of the properties to another object.

  • CoverT 47: padStart() Cycle

    The padStart() function pads from the start of a string with another string, until the resulting string reaches the desired length. One fun (or possibly unexpected) result is when the string you are padding with has to start a new “cycle” in order to reach the given length.

  • CoverT 46: pointer-events With Overrides

    According to MDN, the pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. However, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on the parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

  • CoverT 45: Fun With console

    I recently learned that the JavaScript console has some pretty neat features that I wasn’t aware of. I found this video to be really helpful. Among the top of the list are assert, table, group, and "%c" for custom styling.

  • CoverT 44: Look Like a Hacker From a Hollywood Movie

    If you have ever seen a movie with hackers in it, their computer screens always seem really busy computing stuff. My screen never looks this way in the real world, but I thought it’d be fun to try and impress my fellow patrons at the coffee shop.

  • CoverT 43: Hooray | jq

    Sometimes I need to quickly inspect a JSON file from the command line. The problem is that unlike viewing JSON data in most text editors or IDEs, the terminal provides no formatting or syntax highlighting to make things more readable.

  • CoverT 42: Kill All the Things

    When using Docker I get pretty tired of having to remove containers, kill processes, etc. one at a time. I found an easy way to kill/remove multiple things in one command.

  • CoverT 41: npm ci

    To install packages via npm I typically just use npm install. This works great, updates my package.json, allows me to install one or more packages, etc. However, I just discovered (embarrassingly) the npm ci command.

  • CoverT 40: View Distribution & Version of Linux

    As I was learning how to use Docker more fully, I came across a useful little command for seeing what distribution/version of Linux a container may be using.

  • CoverT 39: mkdir multiple directories

    Learned something cool with regards to creating multiple directories with bash. There a million different options you can use to do different things, but I learned that if you run this command:

  • CoverT 38: clip-path & shape-outside Magic

    With the combination of the clip-path & shape-outside properties, you can clip an element and have other elements shape themselves appropriately around that element.

  • CoverT 37: CSS filter

    The filter property can be used to apply a ton of different graphical effects to an element. Filters are commonly used to adjust the rendering of images, backgrounds, etc.

  • CoverT 36: !important Doesn't Work With Animations

    Using !important with an animation style does not work at all. It’s not only un-important; it totally ignores the style altogether.

  • CoverT 35: Box Sizing Border Box

    The box-sizing property defines how the width and height of an element are calculated.

  • CoverT 34: Pause Animation

    CSS animations can be paused using animation-play-state: paused

  • CoverT 33: Infinite Animation

    There are a ton of things you can do with CSS animations. If you need something to run infinitely, it allows for that easily.

  • CoverT 32: CSS Transition Dropdown

    You don’t need JavaScript to create a dropdown effect, you can accomplish the same thing using CSS transition.

  • CoverT 31: Different Transition Each Direction

    The transition property can be set for selectors in such a way that the visual effect is different when the active selector is switched.

  • CoverT 30: Transform Origin

    The transform-origin CSS property sets the origin for an element’s transformations. The transformation origin is the point around which a transformation is applied.

  • CoverT 29: Transform Order Matters

    When using transform in CSS with multiple transformation functions, the order of how they are listed matters!

  • CoverT 28: CSS @supports

    The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

  • CoverT 27: Accessing a Function's Name

    A function object’s read-only name property indicates the function’s name as specified when it was created. If the function is anonymous it will be ''.

  • CoverT 26: Rest Parameter Syntax

    The rest parameter syntax allows for representing an indefinite number of arguments as an array.

  • CoverT 25: radial-gradient

    radial-gradient() function can be used creates a circular (or ellipis) background image of color stops. There are a ton of options around the location of the origin, colors, etc.

  • CoverT 24: repeating-linear-gradient

    The repeating-linear-gradient() function creates an image consisting of repeating linear gradients. It takes the exact same arguments as the more common linear-gradient(), but it repeats the color stops infinitely in all directions to cover its entire container.

  • CoverT 23: Default Border Color

    I used to think that the default color for borders was black, but now I know better…

  • CoverT 22: background-clip

    The background-clip property sets what area an element’s background color extends to.

  • CoverT 21: background-repeat Options

    The background-repeat property sets how background images are repeated. There are several options, each offering a slightly different result.

  • CoverT 20: Firefox CSS Grid Inspector

    Firefox has some awesome dev tools for CSS grid layouts called the CSS Grid Inspector! See all the details at their website.

  • CoverT 19: grid-template-areas

    The grid-template-areas property specifies named grid areas is CSS grids. These areas are not associated with any particular grid item, but can be referenced from the various grid-placement properties (e.g. grid-area)

  • CoverT 18: grid-column & grid-row

    grid-row and grid-column properties are shorthand properties for specifying a grid item’s size and location within a grid by specifying the inline-start and inline-end edge of its grid area.

  • CoverT 17: abbr Element

    The <abbr> elements represents an abbreviation and the title attribute provides a description for the abbreviation.

  • CoverT 16: Grid Template Columns and Rows

    grid-template-columns and grid-template-rows are awesome CSS properties for defining the size & number of grid columns and rows.

  • CoverT 15: Number Precision

    JavaScript does not define different types of numbers (e.g. integers, long, etc.). JavaScript numbers are always stored as double precision floating point numbers, following the international IEEE 754 standard.

  • CoverT 14: Generator Basics

    Generators can yield multiple values on-demand. They work great with iterables and allow for creating data streams with ease.

  • CoverT 13: Array Destructuring

    The destructuring assignment syntax is an expression that makes it possible to unpack values from arrays into distinct variables.

  • CoverT 12: Tagged Template Literals

    Tagged template literals allow you to have more control over parsing the template literals to a string, by adding a custom tag to the template literals.

  • CoverT 11: Function Properties

    Functions are just objects in Javascript, which means that they can have properties just like any other object.

  • CoverT 10: Array.from()

    The Array.from() method creates a new shallow-copied Array instance from an array-like or iterable object.

  • CoverT 9: delete vs. undefined

    Using the delete keyword on a property and setting a property to undefined is NOT the same thing! Which one should I use? As always, it depends…

  • CoverT 8: Native Image Lazy Loading

    Most modern browsers are now supporting native image lazy loading via HTML via the loading="lazy" attribute.

  • CoverT 7: Object.fromEntries()

    The Object.fromEntries() method transforms a list of key-value pairs into an object. A common use case would be creating an object from a manipulated result of Object.entries().

  • CoverT 6: backdrop-filter

    The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.

  • CoverT 5: Filling An Array

    Filling an array with N number of values can be a little kooky sometimes. Here are a few ways to do it and some things to watch out for.

  • CoverT 4: Increment & Decrement Placements

    The increment (++) and decrement (--) operators behave differently depending on where they are placed.

  • CoverT 3: in

    The in operator returns if a property is in an object’s own properties OR its prototype chains properties

  • CoverT 2: Shift & Unshift

    shift() & unshift() let you do stuff to arrays starting at the beginning.

  • CoverT 1: Numeric Separators

    Numeric separators allow adding underscores to numeric literals to make them more readable.

  • ng-form-rules - Simple, powerful, and customizable rule engine library for Angular reactive forms

    ng-form-rules makes working with Angular reactive forms easier by providing a simple, powerful, and customizable rule engine library. You simply describe your data structure, rules, and logic, and we will create a form that hooks it all together for you.

  • Angular 2 Routes with ASP.NET MVC - How do I get them to play nice together?

    Angular 2 and ASP.NET MVC both have powerful routing functionality. However, getting them to play nicely together can sometimes be a struggle. This quickly becomes apparent when using the Angular 2 router’s PathLocationStrategy, its default HTML 5 style of routing, and trying to reconcile your client-side and server-side routes.

  • Jekyll with GitHub Pages - Fix the "GitHub Metadata No GitHub API authentication could be found" Error

    Jekyll with GitHub pages is an awesome way to build a developer blog or project site (find out how). However, one day after updating my local environment with the latest GitHub Pages gems (as GitHub tells us to do), I started to get errors about GitHub Metadata and GitHub API authentication anytime I made edits while serving the site locally. WTF?!?! This post will tell you how to fix it.

  • Build Solutions and Projects With PowerShell

    As we all know Visual Studio is an amazing IDE. It’s crazy powerful, has an enormous feature set, and makes developers lives better. However, one area where using Visual Studio can sometimes be a drag is when you just want to do a quick build of your solution or project. Depending on how large your code base is and what your build steps look like, it can take up to several minutes to complete or Visual Studio may even crash on you. This gets old really quick, especially if the whole IDE doesn’t need to be open with all its bells and whistles to do what you are wanting to accomplish. For example, I often want to do a build after pulling from GitHub just to make sure everything is okay before pushing my local commits. Some very simple PowerShell can help us out here!

  • Using Git On Windows? You Better Use posh-git!

    Now-a-days Windows developers increasingly need to get their hands dirty using the terminal (gasp!). Whether we’re executing some weird JavaScript build, spinning up a server in the cloud, calling npm, etc., the command line is becoming a more prominent part of our daily development lives. What are we to do when we are so used to the “Visual Studio-lization” of everything from our coding editing, to our source control, to our builds, etc.. Never fear! Behind all those fancy GUIs are a rich and powerful set of CLIs that are really not all that scary, and can actually make our development process faster. One area that you may, dare I say it, become a lover of the terminal is with source control. This is particularly true if you are using Git. Introducing posh-git!

  • Quartz.NET Listeners For Calendars, Triggers, and Jobs

    One thing that can be really powerful when using Quartz.NET is executing some code whenever a particuar action takes place (think events). Quartz.NET has the concept of listeners to do just this! There are three types of listeners available: job listeners, trigger listeners, and scheduler listeners. These listeners can be used in many different scenarios such as logging, debugging issues, raising notifications, etc.

  • XML Configuration for Quartz.NET

    Quartz.NET jobs, triggers, and schedules can be configured in several different ways. One great way to configure these items is in an XML file. Fortunately, Quartz.NET provides an XML schema definition file that can be utilized to assist us in creating an XML file to configure these items according to their specifications.

  • Dependency Injection for Quartz.NET

    Quartz.NET is a full-featured, open source job scheduling system that can be used from the smallest apps to large scale enterprise systems (stole this from the their home page). However, one common pain point when using Quartz.NET is configuring dependency injection (DI) for their jobs.

  • Read SMTP Settings From Configuration File

    Reading SMTP settings from a configuration file (e.g. app.config, web.config, etc.) is a simple process. This enables you to use the same settings across your entire project and only have to apply updates in one place.

  • Logging To A Database With NLog

    Expanding upon my previous post Logging To A File With NLog, updating our configuration to have NLog log to a database is easy. If you have not already seen that post, please give it a read before continuing on. Otherwise let’s get started.

  • Logging To A File With NLog

    NLog is an open source API for .NET that has rich logging functionality, making it easy to create and manage logs for your application. We will go through the process of configuring NLog to log exceptions to a file on the local file system.

  • Understanding Angular Directive Scopes

    One of the most powerful features in Angular is the ability to create custom directives. They allow you to write more modularized code that can be re-used throughout your application. However, understanding how scope works within a custom directive can often be confusing and is by no means obvious. How does your directive access scope properties on a controller? How do you give a directive it’s own scope? How can you isolate your directive’s scope from the rest of your application? We will address these questions and more in this post.

  • Jekyll with GitHub Pages on Windows

    Jekyll with GitHub Pages is an awesome way to create, manage, and host your blog or project/organization site. Knight Codes is built using these technologies and they have proven to be fantastic to work with.