Typically with ASP.NET Core 3.1 when no specific authorization requirements are set all endpoints are publicly accessible. When you’re wo...
asp.net coreIf you have used slots in Vue, you know that it provides a clean way to vary content that is displayed in child components. For example, ...
VueJS Slots Scoped Slots JavaScriptWe’ve been using Swagger via Swashbuckle for some time with our ASP.NET Full Framework applications. As we’re moving toward ASP.NET Core ...
asp.net coreWe’ve spotted some strange behavior before with ASP.NET Core and JSON serialization/deserialization, and I eventually made it back to try...
asp.net coreWe’ve spotted some strange behavior before with ASP.NET Core and JSON serialization/deserialization, and I eventually made it back to try...
asp.net coreAs we create CSS components in our internal framework, we typically try to use little if no JS. Our tooltips should be no different. We...
UI/UX frontend CSS Responsive DesignImagine you’re using Elasticsearch with your strongly typed C# models and nameof(MyProperty) and wondering why it doesn’t work. Turns out...
.NETI have been working as a software developer for almost three years, the most common exception or bug I made is NullReferenceException -Sy...
.NET C#Testing is an important step we can take as developers to reduce bugs in our code, but testing seems to be one of the best practices that...
Vue.js Jest TestingLast week I attended the annual user experience conference Convey UX in Seattle, where 50 UX leaders from all over the world shared their...
UI/UX frontend conference conveyux2020 conveyuxWe run a number of web applications at Ritter Insurance Marketing. Our primary datastore for these applications is MSSQL / SQL Azure. Our...
SQLWe’ve been working through upgrading our core applications from ASP.NET full framework to ASP.NET Core. Over the years we’ve assembled an...
.NETConfigurationManager has long been used by .NET Framework developers prior to .NET Core to access things like app settings and connection...
.NETWe’ve had some internal discussion around the usage of RegexOptions.Compiled in .NET – how it works and when it’s appropriate to use it. ...
.NETDebugging web applications can be difficult sometimes. When debugging a failed HTTP GET request in Application Insights you have all of t...
.NETFor a long time, we were dependent on the CSS frameworks of others – and we were quite happy. 😀 As our needs grew, we needed a framework...
Sass Dart SassAutofac is an inversion of control container for .NET. It allows developers to register items and then later use those registrations to i...
.NETWorking with dates can seem a little daunting sometimes. We need specific formatting, and hopefully we don’t have to deal with timezones ...
JavaScript Vue HTMLSupporting IE comes with challenges if you are using es6, and while babel helps greatly there is a few gotcheas. One of the main one is using forEach on DOM elements. In modern browsers it’s pretty easy to select DOM elements and loop through them to add something like an eventListener. Open up IE 11 and you will find “Object doesn’t support property or method ‘forEach’” in the console.
There are a few simple ways we can solve this, the first is to wrap the DOM selection in a Array.prototype.slice.call to allow IE to iterate through it,
let navLinks = Array.prototype.slice.call(document.querySelectorAll('.navigation-link'))
navLinks.forEach(nav => {
//code
})
This is a simple way to solve this but if a developer forgets to do this we can break IE 11, so it’s better to write you own little polyfill and include it before our main scripts
if(window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
if(window.HTMLCollection && !HTMLCollection.prototype.forEach) {
HTMLCollection.prototype.forEach = Array.prototype.forEach;
}
If you do some googling you will find a lot of responses on stackoverflow that include NodeList.prototype.forEach = Array.prototype.forEach;. Let me explain why we added the second section with the HTMLCollection. If you use document.querySelectorAll it will return it as a node list, but if you use document.getElementsByTagName or document.getElementsByClassName it will return it as a HTMLCollection. This is why we added the second conditional. Just make sure you include this at the top of your file or first in your webpack configuration.
A common use case people run into with this is if they are writing es6 and is using a native function like filter or find on the variable that is storing the navigation links. This polyfill only gives us the forEach ability. For example if you write let links = document.querySelector('.navigation').filter(x => x.value) you will get a console error. We will still need to convert the variable to an array which is pretty easy,
let links = document.querySelectorAll('.navigation-link');
links = [...links].filter(x => x.value);
