Accessors overriding properties is an error
The TypeScript compiler prevents type-related errors in code, but sometimes it also prevents you from writing perfectly valid JavaScript code. At least, that's how it seems.
Posts about JavaScript
TypeScript Interop in Blazor
Although Blazor makes it possible to develop single-page applications in C# instead of JavaScript or TypeScript, there are still cases where you need to call JavaScript code to accomplish something, such as calling browser APIs or interacting with existing JavaScript libraries. This is called JavaScript interoperability and is well documented. However, it does not mention how you can use Typescript instead of JavaScript.
Cloning an array of objects in JavaScript
Cloning arrays in JavaScript is a topic I get asked about regularly by other team members. This post is intended as a reference that I can refer to on similar occasions in the future.
Fun with JavaScript type coercion
Type coercion is the term used for automatic conversion between data types in JavaScript. If you're not careful, it can be a cause for subtle bugs in your code. This post is dedicated to one such example I recently encountered.
Creating and publishing a Greasy Fork script
I've been using a couple of GreasyFork scripts with Tampermonkey Firefox extension for a while. Only recently has a missing feature on a web page bothered me enough to consider creating a user script myself.
Issues running JavaScript tests in VS Code
Recently I was involved in troubleshooting an interesting issue with running unit tests for a Javascript project that was depending on a native Node module. The key step in resolving the issue was when we determined that the tests ran fine from the command line and only failed when the Mocha Test Explorer extension for Visual Studio Code was used.
Behavior of Promise.finally
Recently, we discussed the behavior of Promise.finally in our development team. Even after reading the official documentation, we weren't unanimous on what will happen in certain cases. In the end, I wrote a couple of test cases to make sure about it.
Minifying Files in Hippo
In single page web applications (SPAs), it's a standard practice to minify the generated files (HTML, JavaScript and CSS) before publishing them. In contrast, Hippo CMS by default doesn't include such a step in its publishing process. However, there's nothing preventing you from adding it if you want to optimize the files that are sent to the browser.
Handling Clipboard Paste Event in Browser
If not regularly writing JavaScript code for browsers, one can quickly get out of touch with all the APIs that are already supported in modern browsers. When I recently had to customize the way data is pasted into an input field on a web page, I learned that I can just use the clipboard events for that.
Testing JavaScript/TypeScript Snippets with Jest
I often need to quickly test some JavaScript or TypeScript code, be it for a blog post or otherwise. Recently, I started using Jest for that because it's so simple to set up. For basic JavaScript code, it's enough to install the npm package. Although Jest doesn't have built-in support for TypeScript, it's almost just as easy to use with the help of ts-jest.
Error Handling When Chaining Promises
The Promise.catch method is a convenient tool for handling errors anywhere inside the promise chain up to the method call. However, care must still be taken when writing the chained code inside the Promise.then method, otherwise some errors might not be properly handled.
Variable Number of Arguments in TypeScript
JavaScript has always supported functions with variable number of arguments, although the syntax required some getting used to. In TypeScript and ECMAScript 6 rest parameters and spread syntax provide a more convenient alternative that also works with arrow functions.
Sharing Console Log from Ionic Apps
Logging to browser console can be a useful tool for troubleshooting Ionic applications during development. Although all the logging is still done in test builds, the process of getting the log from the device is not tester-friendly. Without too much effort this experience can be improved a lot by adding an option to export the log directly from the application.
Reporting JavaScript Error Details from Promises
Promises make it easy to handle errors in asynchronous method calls. The rejection handler can be used to log full error details from a rejected promise. It will also catch any errors that might happen in the fulfillment handler. However, the Error object details might not get logged as you would expect.
Functional Array Operations in JavaScript
JavaScript's Array prototype provides a comprehensive selection of methods which lend themselves nicely to functional programming approach, such as ma and reduce. Surprisingly, when doing code reviews I often see that developers are not aware of them or not used to using them. In this post, I'll do an overview of these functions with examples how they can simplify your code.
Detecting Camera Permission Dialog in Browser
When trying to capture camera video from browser using MediaDevices.getUserMedia, user consent is required. On first call the browser will show a dialog to the user who can either allow or block access to the camera. It might be useful to have some analytical data for your application on how many users blocked the camera access, but unfortunately there's no direct way to detect from code when the dialog was shown and how the user answered.
Render Captured Video to Full Page Canvas
In modern HTML 5 browsers you can render video from your camera inside a web page using the video element. However, to further process the captured video or add some custom rendering on top of it, the canvas element needs to be used. Due to the ever changing APIs in this field, it's not easy to find up-to-date working sample code for achieving this.
Debugging Karma Tests in a Browser
Having unit tests usually drastically reduces the need for interactive debugging. However, being able to debug unit tests can sometimes prove very useful. Nowadays, any browser includes a fully featured debugger as part of its developer tools, and Karma test runner has a dedicated feature for in-browser debugging. I wrote short instructions on how exactly to use this feature for a project I am working on.
Continuous Testing with Wallaby.js
I first stumbled across wallaby.js while working on my previous articles about continuous testing in the JavaScript ecosystem using Karma. After reading more about it in Scott Hanselman's blog post, I decided to try it out myself.
Continuous Testing of JavaScript Code
Unit testing is a crucial part of development in any language, but its even more important in dynamically typed and interpreted languages such as JavaScript because there's no compiler doing at least basic validation of the code. Just like in .NET development, quick feedback is very valuable, and nothing can beat continuous testing in this field.
Book Review: SignalR Real-time Application Cookbook
If you're looking for a book to learn SignalR from, you can't go wrong with this one. On the other hand, if you're already fluent in SignalR and just want to learn more, it probably isn't your best choice, unless you're interested in one of the above mentioned topics.
Book Review: Mastering JavaScript Design Patterns
This book is a recommended reading not only for JavaScript developers, but also for others who want to refresh or expand their knowledge of design patterns. Learning some JavaScript in the process is just an additional benefit.
Book Review: Developing Windows Store Apps with HTML5 and JavaScript
I would recommend this book to anyone with no or minimal knowledge about Windows Store apps, who's interested in developing them using HTML5 and JavaScript, even if he isn't already proficient in them.
Running Windows Sidebar Gadgets Directly in IE7
Since gadgets are HTML applications and the Windows Sidebar uses Internet Explorer 7 to render them, I prefer running their code directly in IE7 during development.
A Sample Windows Sidebar Gadget
I wrote my own sample with clearly separated HTML structure, CSS styles and JavaScript code to showcase development of Windows Sidebar Gadgets.
Resources for Windows Sidebar Gadget Development
I though I'd gather in one place all the useful links I found with information on development of Windows Sidebar gadgets.
Writing Your First Windows Sidebar Gadget
I've gathered few issues that could be covered better in the documentation since I've been struggling with them for some time before I got everything to work as expected.