JavaScript

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).

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.

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 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 :)

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:

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.

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…

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:

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.