Web development and engineering technology leadership blog
I was delighted to be a speaker at the upcoming PlatformCon conference and share my experience on Platform Engineering. I shared the experience from my journey of building great teams and with them delivering the Platforms to enable the business and customers. The talk guides you on how to proceed with the Teams and organization topology, which tooling and approaches will help you, and how to…
The tech industry went from IT to DevOps, and now we are in the era of Platform Engineering teams. They are to enable the business, and create a company-specific platform to develop and deliver their products. It requires an abstraction level on top of Cloud providers (AWS, Azure etc.) and tooling (K8S, Terraform..), including specific app type templates (Express, Spring Boot, Flask etc.) and…
The complexity of Front-End applications grew past years extensively. That’s the reason big monoliths started being split to separate UI and modules working with different API. After years of using custom solutions and confusion around Micro Front-Ends, we are in the new era of the native support of Module Federation in Webpack 5, and tools, such as Storybook components system, SPA, and others…
All the modern browsers support native JavaScript modules, and it’s a perfect time to start using them, which will change the way we are bundling the JavaScript using Webpack, Rollup, and other bundlers, and how the code is executed. We will take a look how they work, what is the level of support in the browsers and Node.js, plus main findings and gotchas on the way of publishing and using them in…
Today CSS Custom Properties are supported in all the major browsers. Now it’s time to do the next step- to have an ability to register new Custom Properties from JavaScript and setup the browser how to work with them (e.g. real CSS polyfills). They should work with the same performance as the native CSS properties, being animatable and aligned with CSSOM. Custom Properties can be used as a bridge…
How often have you applied the JavaScript or CSS solution considered as an optimization, and after couldn’t find an easy way to measure how effective it was? Of course, you have the performance timeline recording, but in most cases, it provides the retrospective data, not the life-updated. For this and other performance-measuring techniques, Chrome DevTools added the “Performance Monitor” tab…
Since the Promises were added in JavaScript, one of the biggest concerns was the absence of an ability to easily apply some code after the Promise is fulfilled (after both success and reject actions). There are many examples of such a need: showing a loader when the request to the server is in flight or even a simpler case- when we just want to log the completion of the operation regardless of how…
Overview of CSS Custom Properties syntax, their abilities and use cases. A practical guidance of the different approaches of using CSS variables, interaction with JavaScript and migration options. ...
In one of my previous articles Native ECMAScript modules: the new features and differences from Webpack modules we attempted to detect if the browser supported ES modules. We needed this to determine either, to execute a bundled (classic) file or a script which uses the native ECMAScript module features. We managed to achieve this, but in reality how it was achieved isn’t ideal. The community have…
In the previous article Native ECMAScript modules: the new features and differences from Webpack modules we understood the differences between ES modules and their implementation in bundlers/compilers like Webpack/Babel. So far we found couple gotchas and know how to use the import \ export declarations and which caveats we may have using them in JS. But JavaScript went asynchronous many years…
For many years the Web is moving towards the parity with the Mobile native applications and adds the missed features. Today browsers have most of them, from the offline mode and enhancements with the Service Workers to Geolocation and NFC. The one huge ability, which is still missed, but highly used in the mobile applications- the ability to share a page, article or some specific data. The Web…
In the previous article Native ECMAScript modules - the first overview I described the history of the JavaScript modules and the current situation with the native ECMAScript modules implementation: For now, we have 2 available implementations, which we tried and compared to the bundled module. The main takeaways, so far, are: To execute a script or load an external file and execute it as a module…
All the major browsers shipped the native JavaScript modules support out of the box: which means, the time we can use them without module bundlers/transpilers has come. To understand better how we come to this point let’s start from the JS modules history and then take a look at the current Native ES modules features. ...
Recently Paul Irish described how you can debug Node.js applications with Chrome DevTools. Since that time Chrome DevTools have evolved and the step, where you had to open the separate page with a specific URL to debug the Node.js code, was removed. It means, today you can debug your browser JavaScript files and Node.js ones in the same DevTools window in parallel, which makes the perfect sense.…
This is the first of articles where I want to describe how to migrate/extend your web app to being a Progressive Web App Main points of a Progressive Web App are: it’s secure (uses HTTPS) app install banners give users an easy way to add the app to their home screen/launchpad service worker makes the app load nearly instantly and work offline application is responsive (phones, tablets and laptops)…
In my previous article CSS custom properties (variables) In-Depth I described CSS custom properties (variables) and variations of their usages. If you started thinking to move from CSS preprocessors to plain CSS after that- next your question might be: “what about mixins”? And voilà- there is not only an editor’s draft- https://tabatkins.github.io/specs/css-apply-rule/ but even working…
I thought to start from explaining the purpose of having variables in CSS but actually popularity of CSS pre/postprocessors already did that. Couple examples: color variables for branding consistent components properties (layout, positioning etc.) avoid code duplications Yes, of course, you still can search and find/replace all you need manually in your codebase but it’s like not having variables…
After a long time using usual the Mac terminal I came to understanding that more advanced tool is needed for many common aspects of daily work. For example: some commands autosuggestions which will remember your previous commands and be smart enough to repeat them depending on a situation. Another requirement from a UI-lover part of my soul- good syntax highlighting. The best, if such tool…
Scrolling effects are increasingly popular these days. Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior. There are many popular plugins ( fullPage.js , jQuery.panelSnap , jQuery Scrollify etc.) which provide such functionality. Can you imagine how easy would be creating such effects using CSS…
Recently the ability to record a Filmstrip was added to Chrome . Now it’s available in Canary and Dev Channel versions of the Chrome Browser as DevTools experiment and is supposed to be enabled by default in one of the next versions of Chrome. To enable it: Open chrome://flags/#enable-devtools-experiments page in Chrome and activate the “Enable Developer Tools experiments” flag Reload Chrome Open…
The idea Once I needed to add component to show controls like the following: The number of sections in it had to be configurable. To do it usually you can add two config variables: one in Sass, one in JavaScript. But I wanted to have config only in one place and reuse it in the second. That’s how the idea to pass data from Sass to JavaScript came to me. Demo ...
And here is the April 1st! We already have some jokes from Google like com.google and Pac-Man in Google Maps . There is the list of others . So, want to provide some nice effect for your site/page? It’s easy to do adding only one line of CSS- CSS filter . Demo ...
Frequently we want to add scrolling to some part of the page or box. E.g. to highlight something or just scroll to an anchor. To provide better UX and feeling usually smooth scrolling is used. Previously to implement it we had to use plugins like “jQuery.scrollTo” or similar solutions . But dreams came true- there is a specification for native smooth scroll behavior API . Demo ...
Google Analytics is the most popular website statistics service . It is used for many purposes: from tracking visitors and sessions to campaigns and events. Ability to track any events provides us possibility to send and track any data in Google Analytics. One of the most useful in that case for web developers might be errors analytics. So far Google proposes 2 ways of tracking events: Classic…
In short, Fetch API- it's a new Promise- based standard for doing AJAX requests. Syntax for XHR was provided more then 10 years ago (XMLHttpRequest2 - about 4 years ago). Many things changed, we got HTML5, CSS3, also close to start using EcmaScript 6. From jQuery Deferred, $q and Native JavaScript Promises people became familiar and like promises in JS. It’s time for new laconic API to do…
Sometimes to highlight something we need to fade entire page except element/part which we want to focus. Examples When you search any text in Safari browser- it highlights only matching parts and fades other areas of the page Plugins like Focusable (JavaScript based) with a nice demo to show this effect in action ...
When you have big project with many files and dependencies, usually you should care about good code base and periodic cleaning / refactoring. The same situation I had when decided to refactor SCSS files- structure, naming and variables… I was surprised when figured out- there aren’t good instruments to find unused SCSS variables. The ways they appear is usual: somebody removed use of variable but…
About CSS filters The CSS filter property provides the way to modify rendering for elements in the browser. You can use it to apply visual effects like blur or shifting colors. There are many ways to use it- from providing Instagram/PhotoShop- like filters to the site themes. Demo ...