Dmitry Sheiko's Web Development Blog

How to create a kick-ass image preview with LQIP

Thu, 11 Jul 2019 14:56:15 +0200

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 here is LQIP (low quality image placeholder). It was adopted by Google, Facebook, Pinterest, Medium and others. The idea is to load page initially with low quality images and once the page is fully loaded replace them with full quality ones. As placeholder one can use embedded transparent SVG, spinner animated image, solid color, blurred and minified original image. But even more, with modern tools we can do something really fancy. For example, we can use images shape or silhouette as a placeholder. Moreover, we can generate Data-URLs with desired effect during the build and address from IMG tag.

Testing sign up flow with activation by email

Mon, 08 Jul 2019 17:26:23 +0200

Functional testing isn’t something new. We all do it, less or more, with different tools and approaches. However when it comes to flows, where transactional emails (signup confirmations, password resets, purchase notifications and others) involved that may still bring questions. For example, we instruct the testing tool to navigate to the registration page, fill out the form and press the submit button. The web-application sends email with activation link. So we need the testing tool to read the email message, parse it and navigate the link.

In this article we examine testing user signup flow with confirmation by email with 3 different tools: Selenium WebDriver, Cypress and Puppetry.

Puppetry 2.0 released

Mon, 01 Jul 2019 17:57:07 +0200

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 test/stage service, which never resets. The only way to test, let’s say, signup flow is to create a new (no-yet-existing) user account. Now we can refer from our test cases to a variable...

Validating arguments in JavaScript like a boss

Thu, 23 May 2019 17:55:57 +0200

In software engineering we try to discover and eliminate bugs as soon as possible. One of 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). But what would be the best way doing it?

End-to-End Testing With Puppeteer

Mon, 11 Jun 2018 08:51:54 +0200

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 integration tests we ensure they play as designed together. Eventually we create system tests to find out if the entire system meets our business requirements. The last one is also known as E2E testing and covers different aspects such functionality, GUI/Usability, security performance. As for functional testing I have already published a few articles sharing my experience with such tools as Nightmare and Zombie.js. They both provide nice programming experience, but still have their drawbacks. Then I asked myself what could serve me better? What I need is an execution environment accessible from both command-line interface and in a browser. Thus I can run the tests during CI (e.g. by Jenkins), but still use interactive mode while debugging the tests. Besides I prefer to have access to the latest features emerging with evergreen browsers. That makes me think of Headless Chrome. Does it have a Node.js API? It turned out it does. The library is called Puppeteer and it's truly amazing. Below we are going to examine it by writing a test suite for an RWD demo app with a form.

Handling forms with React and HTML5 Form Validation API

Tue, 05 Jun 2018 10:35:46 +0200

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 it's about subscribing form and controls for interaction events and passing state with "value" property. So form validation and submission logic is up to you. Decent UI implies you cover such logic as "on submit"/"on input" field validation, inline error messaging, toggling elements depending on validity, "pristine", "submitting" states and more. Cannot we abstract this logic and simply plug it in our forms? Definitely we can. The only question is what approach and solution to pick up.

JavaScript and Underscore.js type methods in PHP

Thu, 12 Apr 2018 17:01:57 +0200

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 Rasmus Lerdorf’s home page and have been more like spontaneously developing ever since. That resulted in syntax inconsistency, mix of functional and OOP-based assets, and absence of a decent language specification. So every time I switch to PHP I’m missing rationality, predictability and flexibility of JavaScript. This made me consider a library, which would bring JavaScript-like development experience to PHP. Eventually I came up with Extras, which extends PHP types with JavaScript (besides with Underscore) methods, unlocks chaining and introduces PlainObject type representing object-literal.