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.
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.
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.
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.
"%c" for custom styling.
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.
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.
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.
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.
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.
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:
With the combination of the
shape-outside properties, you can clip an element and have other elements shape themselves appropriately around that element.
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.
!important with an animation style does not work at all. It’s not only un-important; it totally ignores the style altogether.
box-sizing property defines how the width and height of an element are calculated.
CSS animations can be paused using
There are a ton of things you can do with CSS animations. If you need something to run infinitely, it allows for that easily.
transition property can be set for selectors in such a way that the visual effect is different when the active selector is switched.
transform-origin CSS property sets the origin for an element’s transformations. The transformation origin is the point around which a transformation is applied.
transform in CSS with multiple transformation functions, the order of how they are listed matters!
@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.
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
The rest parameter syntax allows for representing an indefinite number of arguments as an array.
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.
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.
I used to think that the default color for borders was black, but now I know better…
background-clip property sets what area an element’s background color extends to.
background-repeat property sets how background images are repeated. There are several options, each offering a slightly different result.
Firefox has some awesome dev tools for CSS grid layouts called the CSS Grid Inspector! See all the details at their website.
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-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.
<abbr> elements represents an abbreviation and the title attribute provides a description for the abbreviation.
grid-template-rows are awesome CSS properties for defining the size & number of grid columns and rows.
yield multiple values on-demand. They work great with iterables and allow for creating data streams with ease.
The destructuring assignment syntax is an expression that makes it possible to unpack values from arrays into distinct variables.
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.
Array.from() method creates a new shallow-copied Array instance from an array-like or iterable object.
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…
Most modern browsers are now supporting native image lazy loading via HTML via 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
backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
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.
The increment (
++) and decrement (
--) operators behave differently depending on where they are placed.
in operator returns if a property is in an object’s own properties OR its prototype chains properties
unshift() let you do stuff to arrays starting at the beginning.
Numeric separators allow adding underscores to numeric literals to make them more readable.
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 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 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.
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!
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.
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.
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.
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.
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.
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.
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 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.