Recent content in Weblog on Dmitry Sheiko's Web Development Blog
Over the past year I migrated several legacy projects to Next.js with the help of Claude Code. Along the way I found a workflow that consistently produced good results, and it’s worth sharing because it saved a surprising amount of time. Migrating functionality and content Most of the legacy projects I worked on were PHP applications. Claude Code wasn’t just copying templates. It…
GoF design patterns gave OOP developers a shared vocabulary for recurring structural problems. SOLID gave them principles for evaluating design decisions. React doesn’t fit neatly into either framework, but after several years of widespread adoption, its own set of idiomatic patterns has emerged. These aren’t best practices in the vague sense. They’re concrete, named solutions to…
It probably started when I was very young. My father worked in an industrial automation department that housed a Soviet counterpart of the IBM System/360-370. Sometimes he would lift me through a window into the computer room. I still remember the massive keyboard they let me play with. To a child, it felt like touching something mysterious and almost magical. During my high school years, I spent…
As a web developer, you can start using Claude Code in VS Code almost immediately after installing the extension. Even without any advanced setup, it already handles a surprising amount of routine work. You can treat it like a developer who handles routine implementation tasks under supervision, helps with refactoring, upgrades libraries and frameworks, generates tests, updates documentation after…
Software can be perfectly functional, secure, and even performant, yet still become a long-term problem. The real test of a system is not whether it works today, but whether it can survive tomorrow’s requirements. When code becomes difficult to modify, every small change risks breaking something unrelated. Features take longer to implement, bugs appear in unexpected places, and eventually even…
Web Push notifications have quietly become one of the most effective engagement channels on the web. They don’t require an email address. They don’t depend on social algorithms. And they work even when your website isn’t open. If you run a blog, SaaS, e-commerce store, or internal platform, Web Push can dramatically improve retention and real-time communication. Let’s walk through what Web Push…
Implementing a custom 404 page in Next.js versions <=16 can be surprisingly tricky when using route groups. By default, Next.js expects a not-found.jsx file to be placed next to the layout of a route. But what happens when you have multiple route groups with different layouts? Let’s dive in. Suppose we have two route groups, each with its own layout and not-found.jsx: app ├── (admin) │ ├── admin │…
When developing administrative UIs, one of the most common patterns is a table to navigate database records and modals to view or edit individual entries. In Next.js, this can be achieved in several ways, not only with Parallel Routes, which are the officially recommended approach in the documentation. In this article, I’ll share three different implementation strategies I explored and discuss…
E2E tests are easy to write and hard to keep fast and reliable. This guide covers how to structure Playwright tests with fixtures, handle authentication flows, work with data tables, check responsive layouts, and set performance budgets, whether you’re coming from Selenium or Cypress or starting fresh with Playwright.
At the beginning of 2025, Next.js is likely the best choice for React developers building server-side applications. Personally, I’m used to developing apps without a framework. I typically use Express.js to write a REST API server with both SSR and client-side rendering. While this approach offers maximum flexibility, it comes at the cost of excessive boilerplate code. It also requires…
When React Hooks arrived in 2019, migrating a large class-based codebase to functional components looked impractical. A few tricks made it workable: composition instead of inheritance, useImperativeHandle for imperative APIs, and function-based customization in place of subclassing.
This blog hadn’t a redesign for a decade. It was driven by self-made CMS, which naturally has become, say the least of it, outdated. So some time ago I ripened for a remastering. Instantly I started by looking for a CMS or a headless CMS. Then I realized, the blog is actually static – I don’t have here any forms or services, it’s all about representation of content. Why not to go with a site…
Nowadays nobody would argue the importance of automated testing. Yet end-to-end tests are often hard to write and even harder to maintain. There are many solutions to help with it. Puppetry is a test constructor, which allows you building test suites without any coding. QA-engineer can record user scenario in a built-in browser, extend the generated test case with browser commands and assertions,…
Images in HTML, what could be easier? However when you have many of them on a page, they do not appear immediately. That depends on caching strategy and bandwidth, but still if you don’t take a special care it may look quite ugly. Basically we need to fill in the slots with something appropriate while images are loading. In other words we need placeholders. Probably the most prominent technique…
Functional testing is nothing new. We all do it, to varying degrees, with different tools and approaches. But when flows involve transactional emails (signup confirmations, password resets, purchase notifications), things get trickier. You instruct your testing tool to navigate to the registration page, fill out the form, and click submit. The app sends a confirmation email with an activation…
Eventually Puppetry 2.0 was released. The development took for a while, yet it contains a lot of changes. In fact the branch 1.x was basically a GUI for Puppeteer/Jest, but the tool grew up into a fully-fledged testing environment. Now Puppetry has a built-in templating engine, which supports environment-dependent variables and expressions, what brings a great potential. Just consider: you have…
In software engineering we try to discover and eliminate bugs as soon as possible. One of the most important heuristics here is validation of input/output on functions and methods. If you are going with TypeScript or Flow, you are fine. But if not? Then we have to manually validate at least input (arguments). What would be the best way to do it? First comes to mind aproba. It’s ridiculously…
A sound application architecture doesn’t resist to changes, but welcomes them. Yet it still doesn’t guarantee that the code is unbroken after we implement new features, making fixes or refactoring. Here we run automated tests to ensure that the app integrity didn’t suffer. So we write unit-tests to check if separate objects, methods, functions work property independently. With…
When we talk about user input within a web app we often think first of HTML forms. Web forms have been available with the very first editions of HTML. Apparently the feature was introduced already in 1991 and standardized in 1995 as RFC 1866. We use them everywhere, with almost every library and framework. But what about React? Facebook gives a limited input on how to deal with forms . Mainly…
I’ve been working with PHP since 2000 and with JavaScript even longer. Over last decade JavaScript evolved drastically. It had a promising design from the very beginning and gained its current incredible shape with the shift to ES2015 (Harmony). PHP though didn’t change that much. Apparently it’s doomed always to suffer from its own legacy. It arrived in middle 90s as a simple CGI app to maintain…
I observe as some people still write ancient ES5 syntax of JavaScript and it’s disheartening. I wonder what keeps them from moving forward. Some must be driven by psychological inertia, but some likely just find it to complex to make their new syntax running in a wide range of browsers. In fact, nowadays we may not fear about it anymore. One can set up a dev environment where tools decide what…
What do you do when you need a widget-like functionality? At the present there is a whole generation of developers who with as a rule are googling for ready-made jQuery plugin. Can’t we do better than that? With advance of web-components we are expected to compose UIs from these building blocks. They are many. One can find one for almost any task. They are highly customizable. One can reuse…
Before modules Historically JavaScript had neither a module system, nor facilities to load sources from within the code. In order to understand what have now, let’s take a retrospective look. I remember in the past a number of libraries where the code-base was split into a separate files which were concatinating during the build process. As simply as that it didn’t help with module…
I always fancied to write a book that would combine most of my programming experience gathered over two decades. Packtpub gave a chance that I embraced gratefully. And here we are, half a year of efforts paid off and my book is live - https://www.packtpub.com/web-development/cross-platform-desktop-application-development-electron-node-nwjs-and-react I split the book in four tutorials, starting…
I’ve been working with Backbone for years and it suited me pretty well. I do love its conciseness. It gives the desired abstraction and yet leaves you at the full control of your app. When you need to know what exactly is happening in your app behind your code, it’s matter of minutes to go though the Backbone annotated sources and figure out the flow. That’s something you hardly…
As developers we spend a lot of our time on debugging and particularly on spotting the source of a problem. DevTools guides us though the call stack, but the tracing process can be still pretty time consuming, especially on a cascade of asynchronous calls. The remedy here is early problem reporting. Let’s say we have a function to search trough a multidimensional structure for the elements…
Modern application get complex, we cannot go without automated testing. The canonical agile testing quadrants are split to technology-facing and business-facing tests. As for technology-facing testing I believe nowadays everybody has dealt with unit-tests. Thus we make sure that the smallest parts of the system act as intended in isolation. Also we use component tests to verify the behavior of…
Nowadays JavaScript evolves fast. We have ECMAScript 6th and 7th editions released over just 2 years. the current support of ES6 specification in major browsers is close to 100%. So the language changed, and changed for better. It has become more expressive, much more concise and readable. It is tempting to jump into, but what about older browsers? Transpilers can translate ES.Next into the…
My book “Unlocked JavaScript” (https://www.packtpub.com/web-development/javascript-unlocked) has been released on December 7, 2015. This book is for developers already familiar with JavaScript who want to level up to get the most out of the language. The book is practice–oriented and would be most helpful for those who is used to learn by doing as the topics are thoroughly covered with real-life…
User are impatient. Majority would leave a resource if it failed delivering the core user experience in 1-3 seconds. Today when mobile overtakes fixed Internet access you need to think of how the app loads on a low bandwidth, what images must requested on what devices, how stylesheets and JavaScript are cached e.t.c. Fortunately there a number of amazing tools such as PageSpeed Insights,…
We write unit-tests tests for server-side source code and for JavaScript. Even when putting aside benefits of TDD approach it gives us a priceless thing – early problem reporting during refactoring. So you make change, you run tests and you will know at once if anything broke. What about CSS? You encapsulate a declaration set into a separate rule, look through the site pages where dependent…
Modules in JavaScript With the advance of MV* frameworks you can observe as JavaScript evolves ahead of official specs towards large scale development. It requires even higher level of maintainability and one of the first focuses here is encapsulation and information hiding. We need the code-base to be organized into independent, interchangeable components so that each of them contained code…
CSS may look as a simple language. In fact it can be simple only to use, but definitely not simple to maintain. Observing that the maximum number of people who can productively simultaneously work on CSS is one – @threedaymonk The skills required to write good CSS code are by and large the same skills required to write good code in general. – Lea Verou Everybody who used to work on a…
It seems like these days the most trending concept in the HTML5 world is web components. But what the fuss is all about? In order to make such a simple thing as a container expanding on click in past we needed to write CSS and JavaScript. Today thanks to checkbox-hack and :focus or :target pseudo-selector we go on with CSS-only. In fact by using summary/details elements we do not need any tricks…
What we are going to do is a modal window that opens in the center of the screen by pressing a link while everything that underlies the window becomes blurred. It can be done by [Dialog element](http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-dialog-element “Dialog` element”), but these day we don’t need any JavaScript realy to solve this task. Well,…
JavaScript frameworks have been proliferating recently with a frightening rate. Just take a look at TodoMVC that provides dozens of MV* framework-specific implementation for a single task. It gives a felling how must be confused a developer making a choice for a framework. Some time ago I even ran into a manifesto (http://bitworking.org/news/2014/05/zero_framework_manifesto) against JavaScript…
In spite of most server-side languages JavaScript was not designed for templates. Yet we have plenty of template engines for client-side JavaScript now. They allow us processing templates, but what about declaring a template? As you know JavaScript doesn’t provide a decent way to assign a multiline text to a variable. Well, you can go with string spitted by back-slashes, but in this case a…
JavaScript was designed as a script language that is easy to embed in a larger host system and meant to manipulate the objects of the host system. With the advance of HTML5 formerly mostly static web-pages are turning into sophisticated web-applications. Now we expect JavaScript code to be scalable and modular. But how when JavaScript has no built-in facilities to combine distinct scripts? Surely,…
Bobby Solomon, from the Disney team, said in 2012: “Honestly, our team is bored of talking about responsive design. It’s how any self-respecting website should behave in 2012”. Responsive web design (RWD) is no panacea, but it is a clear quality indicator as the range of devices people use to browse the web keeps growing. Put simply, RWD is a way to deliver a decent user…
We all are taught not to repeat ourselves while coding. Nonetheless we keep repeating the same operation over and over – pressing F5/Ctrl-R for browser reload every time we have to examine the results of our last changes. After watching some of Paul Irish screencasts where he was showing the magic of live reload under Sublime Text 2 I wondered if I could employ something alike while keeping…
As JavaScript application grows, navigation on the code becomes a hell. It comes on mind how useful would be to have ability including JavaScript files. For example, thanks to include/require statements we can build an expressive file structure in PHP. Let’s say following PSR-0 standard we have one class per file (or one prototype object per file in JavaScript) and class name (namespace) reflects…
Since the very beginning of HTML there were no much of changes regarding forms until recently. Yet, there was an attempt to bring a new API with XForms, but it was never really supported by any of major browsers. Now we have a comprehensive consistent Form API which allows us to create full-fledged forms even with not help of JavaScript. Everything sounds so exciting until you try to use HTML 5…
Reasonably statistic analyses belong to CMS ACP reports. So, CMS vendors tend to include some into their products. However, they often make statistical data collection and analysis a part of CMS. It usually gains some primitive reports and affects application performance. I believe any sound statistic analysis can be delivered only by a dedicated specialized application. Meantime CMS can be used…
Back in 2013, AMD was the standard approach for non-blocking script loading. It works well, but requires every dependency to be wrapped as an AMD module. That’s fine for your own code. For third-party libraries, it means patching external code just to satisfy a module format, which isn’t a trade-off worth making. So I built a small loader that works around this. Non-AMD libraries…
On the way to harmony Not so long ago Microsoft announced a new language targeting front-end developers. Everybody’s first reaction was “Why on Earth?!” Is it just Microsoft taking a shot at Google? Is that a trick to promote Visual Studio? But anyway, what’s wrong with JavaScript? Why is everybody so keen to replace it? For a language designed in just two weeks, JavaScript…
Recently I’ve laid my hands on a copy of [“PHP Application Development with NetBeans” by M A Hossain Tonu](http://www.amazon.com/gp/product/1849515808 ““PHP Application Development with NetBeans” by M A Hossain Tonu”) (www.PacktPub.com). It appeared to be a really nice reading. One of those where it’s hard to put the book down until the end. It must…
Making design responsive means not only certain representations on different screens, but also particular behavior on different devices. Usually on mobile devices mouse is not available, keyboard with navigation keys is out of reach. So we are short of controls to provide a useful navigation. Image viewer Let’s take image viewer. User taps a thumbnail and gets an overlay with the image. We don’t…
A few months ago I bought a new Macbook. I’m really fond of the development environment I set up on it. The more I work with it, the more I love it. However, while building the environment I couldn’t find any decent step-by-step manual. So, it took me for a while to get what I wanted. Here’s my experience. Front-end environment For the beginning we need a package manager. Here arises the first…
After Microsoft released TypeScript I took a look at their examples and found the idea pretty promising. I do love JavaScript. However, it has its bad parts. JavaScript doesn’t provide any built-in facilities to declare interfaces or object abstraction. There is no explicit way to have type annotations and type checking. Well, even class-based OOP is not a part of the language. Flexibility of…
Back in 1995 Netscape wanted a language with a simple programming model, but flexible enough for building real scalable applications. Curious, that Brendan Eich accomplished the task in a few weeks. So, we have JavaScript which seems so simple that many people don’t even bother to learn the language while using it. And yet it works! However, it turned out to be one of the reasons why…