Aysnc generators were recently added to JavaScript. They can allow for cool things like lazy async looping.
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.
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.
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.
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.
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 clip-path & shape-outside properties, you can clip an element and have other elements shape themselves appropriately around that element.
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.
Using !important with an animation style does not work at all. It’s not only un-important; it totally ignores the style altogether.
The box-sizing property defines how the width and height of an element are calculated.
CSS animations can be paused using animation-play-state: paused
There are a ton of things you can do with CSS animations. If you need something to run infinitely, it allows for that easily.
You don’t need JavaScript to create a dropdown effect, you can accomplish the same thing using CSS transition.
The transition property can be set for selectors in such a way that the visual effect is different when the active selector is switched.
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.
When using transform in CSS with multiple transformation functions, the order of how they are listed matters!
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.
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 ''.
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.
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.
I used to think that the default color for borders was black, but now I know better…
The background-clip property sets what area an element’s background color extends to.
The 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.
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)
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.
The <abbr> elements represents an abbreviation and the title attribute provides a description for the abbreviation.
grid-template-columns and grid-template-rows are awesome CSS properties for defining the size & number of grid columns and rows.
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.
Generators can 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.
Functions are just objects in Javascript, which means that they can have properties just like any other object.
The Array.from() method creates a new shallow-copied Array instance from an array-like or iterable object.
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…
Most modern browsers are now supporting native image lazy loading via HTML via the loading="lazy" attribute.
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().
The 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.
The in operator returns if a property is in an object’s own properties OR its prototype chains properties
shift() & 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!
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!
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.