Posts

Here’s a 4th round of random problems and quick tips for working around them (previous: 3, 2, 1).

Here’s a third round of random issues and quick tips for working around them. Part one is here, part two is here.

Here’s a second round of random issues and quick tips for working around them. Part one is here.

This post will be different from other texts I’ve put on this blog so far. Instead of digging deep into a singe topic, I’ll mention some issues that stumped me recently and suggest solutions. These issues might be quite niche, but I hope it will help at least one person get unstuck. Well, it might be me in the future. I’m 40 now - it’s about time I started writing things down ;)

Previous two posts (1, 2) were about rendering performance, now it’s time for something from the back-of-the-fronted: state management. More specifically: checking the speed at which Redux Toolkit can create slices/reducers and handle dispatched actions. The RTK addressed Redux’s primary criticism: amount of boilerplate. Now (read: for many years) a couple of lines of code is enough to get fully functioning store setup with dev tools enabled, reducers with Immer, actions (creators), thunks etc. All with great TypeScript support… Plenty of nice features, but how about the speed?

I’ve recently checked whether using a Box in Material UI 5, instead of plain div, has significant performance impact. I don’t think it would matter much in practice, but read the post if you are interested in details… Doing this check got me thinking: how much faster making the little square divs would be if we were to drop React and do the DOM manipulation with plain JS? Let’s find out!

I’ve been relying on Material UI Box components quite a lot, because doing so allows use of theme-aware sx property and common attributes such as display or gap. It makes code more consistent with other uses of MUI components.

The Redux Thunks offer a good way of separating logic from UI components. Within a thunk, you can: access the entire state, dispatch actions and thunks, generate side effects (contrary to reducers)… Redux Toolkit contains the redux-thunk middleware and adds it during standard store configuration, nice.

A couple of months ago, I’ve migrated my vim.morzel.net hobby project from Create React App to Vite and noted down a few things that required attention. Recently, while adding dark mode to the same project, I’ve spotted another difference between CRA and Vite: class names for CSS modules were build differently.

I’ve recently made the decision to migrate my vim.morzel.net pet-project from Create React App to Vite. To be honest, I was quite content with how CRA (with a bit of React App Rewired) functioned, and updating might not have been necessary. However, I wanted to use this migration as practice before possibly employing Vite on something more serious (where the speed and active development of Vite might prove a blessing).

Click here to start a Vim quiz. Click here to get a random question.

Last post was about suppressing chosen console warnings while executing tests. This one is also about making tests output less noisy…

In preparation for async rendering, React team decided to discourage component authors from relaying on these lifecycle methods: componentWillMount, componentWillReceiveProps and componentWillUpdate (details).

WebGPU is and ongoing effort to make browsers even more powerful platforms. When vendors finish their work (2021/2012?), web apps will be able to leverage the awesome power of modern GPU to render graphics and do general-purpose computing through dedicated API!

In JavaScript, an ag-Grid column is bound to a row property by assigning a string to field config. This is quite fragile: a typo or change in row model will cause and empty column in the grid. Fortunately, a much safer binding is possible thanks to TypeScript’s keyof operator. Check grid component example and demo page.

Vanilla JS cell renderers are faster than framework renderers (just like the docs suggest) but renderers created with React class components are quite decent. Unfortunately, cell renderers build with function components are noticeably worse. The grid team is aware of the issue and might fix it soon (I’ve done my test on ag-Grid 23.1.0 released just 2 days ago)… See live demo that compares different ways to render cell content and check the source code on GitHub.

You can use measureText method to calculate widths of text and then use setColumnWidth to adjust columns. This the demo and this is the repo. It’s quite likely that you don’t need this technique (suppressColumnVirtualisation might be enough), but read on if your grid has huge amount of columns and users need high data density…

Utilize useState or useRef hooks and gridReady event to maintain access to Grid API and Column API. Check here for code samples.

Making website layout used to be hard… Frames, tables, floats, display: table, vertical-align, negative margins, absolute positioning… you name it! People & frameworks had to abuse HTML/CSS features just to center a div (let alone do a responsive page setup)… Fortunately the dark ages are over, Flexbox is supported for quite a while and about two years ago mayor browsers implemented Grid. It took 30 years, but website layout problem is solved (almost, still waiting for Subgrid).

It’s October 2018 so I should probably write something about React 16.5, Angular 7.0 or Blazor 0.6… But… How about some fun with iframe-infested legacy application instead? ;)

Part 1 introduced you to OpenCV and its Emgu CV wrapper library plus showed the easiest way to create Emgu project in Visual Studio 2017. Part 2 was all about grabbing frames from video file. The third (and last) episode focuses on image transformations and contour detection…

In Part 1 you have learned what OpenCV is, what is the role of Emgu CV wrapper and how to create a Visual Studio 2017 C# project that utilizes the two libraries. In this part I will show you how to loop through frames captured from video file. Check the first part to watch demo video and find information about sample project (all the interesting stuff is inside Program.cs - keep this file opened in separate tab as its fragments will be shown in this post)…

Emgu CV is a .NET wrapper for OpenCV (Open Source Computer Vision Library) which is a collection of over 2500 algorithms focused on real-time image processing and machine learning. OpenCV lets you write software for:

Back in 2013, when I was using SVN, I wrote the post about creating a TortoiseSVN pre-commit hook that can prevent someone from committing code which is not meant to be shared (e. g. some hack done for troubleshooting). The idea was to mark “uncommittable” code with a comment containing NOT_FOR_REPO text and block the commit if such text is found in any of the modified or added files… The technique saved me a few times and proved to be useful to others…

I’ve recently moved my site from BlogEngine.NET 2.0 to 3.3 – thanks to the great work done by BlogEngine.NET team the migration was easy… The only serious problem I’ve noticed was with post links ending with .aspx. For example when Google or CodeProject had a link to such URL:

Java and C# are very similar languages so if you have to switch between the two it’s easy to overlook subtle differences. One of the tricky bits is the meaning of protected access modifier.

Last five posts (1, 2, 3, 4, 5) were all about fun stuff with Arduino. Now it’s time for something more mundane ;) In this post I will show you how to create TeamCity build that automatically sets version information in all assemblies produced by ASP.NET application. It’s nothing new but I hope to give you some useful background info and note a few gotchas you may face…

This is the fifth post in my little “Out of Boredom” series dedicated to hobby projects with Arduino. Previous posts were all .NET based:

Time for the third episode of “Out of Boredom” series :) There was a Sonar project and something about shooting paintballs… This time you will learn how to use Arduino and .NET 4.5 to receive input from joystick and use it to control servos that move a webcam horizontally and vertically!

My first Arduino based project was Sonar with C#, JS and HTML5. Now I continue the “Out of Boredom” series with a setup that allows firing a paintball marker (gun) with a command sent from a computer :) This time software stack is simpler - just a small Arduino sketch and uncomplicated WinForms (.NET/C#) application, but hardware requires a bit of electronics knowledge. Don’t worry though, nothing too complicated - I’m definitely not an expert in this field…

Part 1 described the general idea behind Sonar project, hardware components used and Arduino sketch… This second post in “Out of Boredom” series is about C# and JavaScript programs that make it possible to display ultrasonic range sensor data in web browsers. The role of .NET application is to receive messages from Arduino over serial port and broadcast it to clients using SignalR library. JS/HTML5 clients use jquery.signalR lib to obtain information about servo position with distance to obstacles and use this data to render sonar image on canvas:

This post marks the beginning of “Out of Boredom” series. It will be about creating stuff with my recently purchased Arduino Uno. Let’s have a break from chores of professional programming and create something just for fun :)

Read the first part of the article if you haven’t done so already. Part 1 has a brief overview of what GC is and how it performs its magic. It contains a test of GC performance with regards to large array of bytes. You can also find there a detailed information about my test environment…

.NET GC is very fast! Well… I hope you need more than this reassuring statement, if so, read on :) I will show you some test results to prove that I’m not lying but first I will give you a quick reminder about what GC is:

Imagine that you want to create edit view for Company entity which has two properties: Name (type string) and Boss (type Person). You want both properties to be editable. For Company.Name simple text input is enough but for Company.Boss you want to use jQuery UI Autocomplete widget1. This widget has to meet following requirements:

Recently I needed to acquire some database. Unfortunately it was published only as a website that presented 50 records per single page. Whole database had more than 150 thousand records. What to do in such situation? Click through 3000 pages, manually collecting data in a text file? One week and it’s done! ;) Better to write a program (so called scraper) which will do the work for you. The program has to do three things:

Recently, I wanted to extract calls to external system from log files and do some LINQ to XML processing on obtained data. Here’s a sample log line (simplified, real log was way more complicated but it doesn’t matter for this post):

Bitmap class has GetPixel and SetPixel methods that let you acquire and change color of chosen pixels. Those methods are very easy to use but are also extremely slow. My previous post gives detailed explanation on the topic, click here if you are interested.

Let’s suppose that we have some model that has a list property and we want to render some radio buttons for items of that list. Take the following basic setup as an example.

Coordinate system in HTML5 Canvas is set up in such a way that its origin (0,0) is in the upper-left corner. This solution is nothing new in the world of screen graphics (e.g. the same goes for Windows Forms and SVG). CRT monitors, which were standard in the past, displayed picture lines from top to bottom and image within a line was created from left to right. So locating origin (0,0) in the upper-left corner was intuitive and it made creating hardware and software for handling graphics easier.

Probably everyone who creates or debugs a program happens to make temporary changes to the code that make current task easier but should never get into the repository. And probably everyone has accidentally put such code into next revision. If you are lucky enough, mistake will be revealed quickly and the only result will be a bit of shame, if not…

Imagine you have to provide support for some really old web application. The app has one main window and pop-up windows that show some sensitive information (for example payroll list). Client wants to ensure that all pop-ups are closed when user leaves main window or clicks “logout” button in this window…

Take a look at the following code and think what value will be displayed on the console (note that string is a reference type)?

While reading the official training kit for 70-515 exam I came across this text: “With view state, data is stored within controls on a page. For example, if a user types an address into a TextBox and view state is enabled, the address will remain in the TextBox between requests.”. If such statements can be found in recommended study guide, it should not come as a surprise, that confusion about the way ASP.NET Web Forms tries to cope with inherent statelessness of HTTP is so common… ;)

Suppose that you need to execute a block of code when iframe’s content is loaded. In case when iframe is created statically in HTML markup, the solution is really simple. All you have to do is to connect some JavaScript function with load event:

Have you ever seen BadImageFormatException or “An attempt was made to load a program with an incorrect format” message?

Bitmap class provides two simple methods: GetPixel and SetPixel used respectively to retrieve a point of image (as the Color structure) and set a point of image. The following code illustrates how to retrieve/set all the pixels in the bitmap:

Recently during modification of a program to communicate with WebSphere MQ (v6.0.2.7) I noticed that logs contain some exceptions of type EndOfStreamException. Since the adapter code was rather complex it took a while before I found a trivial cause of the problems ;)

String type (System.String) stores text values as a sequence of char (System.Char) elements that represent Unicode characters (encoded in UTF-16). Usually one char element stands for one symbol.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

If you want to put a message encoded in UTF-8 to WebSphere MQ queue, be sure to set CharacterSet property of MQMessage object to 1208. If you do not, the text will be encoded using UTF-16 (CCSID 1200).

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

ASP.NET AJAX offers easy to use and effective mechanism to invoke methods on the server from JavaScript. It’s called Page Methods. Because those methods are static* you cannot use Page.Session property. This does not mean that you have to give up the use of the session. Simply, you should use the HttpContext.Current.Session instead of Page.Session.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.

Sorry, this post is not yet available in English. See Polish version.