Blisk Changelog

What's new in Blisk 23.0.185.91

Apr 26, 2024

New devices in Blisk:
Google Pixel 7, Pixel 7 Pro, Pixel 7A, Pixel 8, and Pixel 8 Pro are ready to use in the Blisk app, where you can run a mobile test, responsive test, or cross-device test. These devices are preinstalled in the Blisk app, so you don't need to download or install anything other than the Blisk app. The latest Androids run directly on your PC, Mac, or Linux, and the code runs locally, avoiding potential data loss or security issues.
Requirements: this feature is available in Blisk v.23.0.185.91 and later. You may need to update the Blisk application to use this feature. How to update Blisk...
Starting with v.23.0.185.91, Blisk opens new possibilities for running different kinds of mobile tests on Google Pixel 7, Pixel 7 Pro, Pixel 7A, Pixel 8, and Pixel 8 Pro: responsive test, multi-device test, touch events test, performance test, landscape orientation test, dark mode test, test for page errors, slow Internet connection test, etc.

New in Blisk 22.0.217.104 (Nov 29, 2023)

New in Blisk 21.0.78.116 (Aug 13, 2023)

Auto-save and restore Splitter location:
Hurray! Blisk 21.0 finally addressed one of the most requested features - the automatic saving of Splitter location! This feature eliminates the need to move Splitter for every device set and will help you become even more productive. This significant improvement in user experience works in the following way:
When you create or launch a device set, Blisk watches for the device type and device order in it. If you previously specified a custom Splitter location for such device schema - Blisk will apply the previously saved location automatically.
If you move Splitter to another location - the new location will be saved automatically.
Whenever you need to reset Splitter - use Menu (Developer Mode) ➜ View ➜ Align width of device panels.
As a result, Blisk will restore the splitters and device sizes for every session, users will work with the same configuration of device set even after application relaunch. Users will not need to configure the device set in every session.
New Universal DevTools mode:
The current release offers another handy feature - Universal DevTools. Previously Blisk offered DevTools in Multi-DevTools mode. DevTools appeared to the right of each device, making the user experience not convenient, reducing the space for other devices, and making the workflow complicated for the users.
Since version 21.0, Blisk offers another approach to working with DevTools by default. Universal DevTools is a single DevTools container docked to the right or to the bottom of Blisk window. Universal DevTools provide the ability to manipulate DevTools for a single device. The user is able to quickly switch the DevTools for another device by launching DevTools for that device. In this case, the new DevTools replace the old DevTools.
Dock DevTools to bottom:
Another important improvement with Universal DevTools is that the users are now able to dock DevTools to the bottom of Blisk window.
If needed, you can enable the old Multi-DevTools mode from Menu (Developer mode) ➜ Settings ➜ DevTools ➜ Select the DevTools type. Docking DevTools to the bottom is available only in Universal DevTools mode, this mode is not supported in Multi-DevTools mode.

New in Blisk 20.1.42.63 (Jun 7, 2023)

New in Blisk 20.0.176.140 (May 28, 2023)

Blisk 20.0: New Android mobiles and desktops (including iMac 4k and 5k), and platform update (latest technologies and security improvements)
New devices in Blisk:
Samsung Galaxy S22, Samsung Galaxy S22 Plus, Samsung Galaxy S22 Ultra, Desktop 4k 1x scale, iMac Pro Retina 5K 27″, iMac Retina 4․5K 24″, iMac Retina 4K 21․5″, iMac Retina 2016 27″ are ready to use in the Blisk app, where you can run a mobile test, a responsive test, or a cross-device test. These devices are preinstalled in the Blisk app, so you don't need to download or install anything other than the Blisk app. The new devices run directly on your PC, Mac, or Linux, and the code runs locally, avoiding potential data loss or security issues.
Requirements: this feature is available in Blisk v.20.0.176.140 and later. You may need to update the Blisk application to use this feature. View Documentation.
Starting with v.20.0.176.140, Blisk opens new possibilities for running different kinds of mobile tests on Samsung Galaxy S22, Samsung Galaxy S22 Plus, Samsung Galaxy S22 Ultra, Desktop 4k 1x scale, iMac Pro Retina 5K 27″, iMac Retina 4․5K 24″, iMac Retina 4K 21․5″, iMac Retina 2016 27″: responsive test, multi-device test, touch events test, performance test, landscape orientation test, dark mode test, test for page errors, slow Internet connection test, etc.
Galaxy S22-series and new desktops: Screen size, Viewport, Pixel Ratio, CSS Media Query, and specification:
The specifications, viewport size, screen size, pixels per inch (PPI), and CSS Pixel Ratio for new devices are available on the Device portal, where you can find the device metrics for all devices including the latest Galaxy S22-series and desktops:
Samsung Galaxy S22 viewport, resolution, and specs
Samsung Galaxy S22 Plus viewport, resolution, and specs
Samsung Galaxy S22 Ultra viewport, resolution, and specs
Desktop 4K 1X Scale viewport, resolution, and specs
iMac Pro Retina 5K 27″ viewport, resolution, and specs
iMac Retina 4․5K 24″ viewport, resolution, and specs
iMac Retina 4K 21․5″ viewport, resolution, and specs

New in Blisk 19.1.122.126 (Oct 12, 2022)

New in Blisk 18.0.194.12 (May 23, 2022)

New in Blisk 18.0.193.167 (May 19, 2022)

New device: iPhone SE 2022:
The latest iPhone SE 2022 released by Apple recently is now available in Blisk. The device specification with viewport, screen size, device pixel ratio, CSS media query is available in iPhone SE 2022 overview. The specs of other devices are located in our Device center.
Improvements for CPU and Memory usage:
Blisk v.18 features improvements for CPU and Memory usage. The reworked Developer mode was optimized to reduce the calls for the application resources and save CPU and RAM. As a result, each tab uses less resources and has improved user experience - we managed to prevent flashing of tab contents for the device sets with up to 6-8 devices (the number depends on your device OS and CPU).
Settings: max number of devices:
One of the features that are often requested by users is increasing the number of devices in a device set. This feature has a high demand for the users that are performing device tests on multi-monitor systems or large TVs. By default, Blisk limits device set to have 8 devices to prevent high load on the CPU. Since version 18, you can change the limit of devices in Developer Mode Settings.
New technologies support in Blisk:
DevTools: CSS Grid editor:
When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see an icon appear next to it in the Styles pane. Click the icon to toggle the CSS grid editor. Here you can preview the potential changes with the on-screen icons (e.g. justify-content: space-around) and author the grid appearance with just one click.
DevTools: Support for const redeclarations in the Console:
The Console now supports redeclaration of const statement, in addition to the existing let and class redeclarations. The inability to redeclare was a common annoyance for web developers who use the Console to experiment with new JavaScript code.
This allows developers to copy-paste code into the DevTools console to see how it works or experiment, make small changes to the code and repeat the process without refreshing the page. Previously, DevTools threw a syntax error if the code redeclared a const binding.
DevTools: Improved CORS debugging:
CORS-related TypeErrors in the Console are now linked to the Network panel and Issues tab. Click on the two new icons next to the CORS-related error message to view the network request, or understand the error message further and get potential solutions in the Issues tab.
DevTools: Change color format in the Computed pane:
You can now change the color format of any element in the Computed pane by Shift + click on the color preview.
DevTools Preview feature: New CSS Overview panel:
Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS.
You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element to open the element in the Elements panel.
DevTools: New CSS length authoring tools:
DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.
Relative indexing method for Array, String, and TypedArrays:
Relative indexing via negative indices is a feature that enjoys popularity in other languages (e.g. Python) as well as having been requested by JS programmers.
As a result, the new method was implemented, named at(), to Array.prototype, String.prototype, and the TypedArray prototypes, that permit relative indexing with negative indices.
crypto.randomUUID():
Generating random UUIDs is a common need for web applications (the uuid module on npm is installed > 200,000,000 times a month). Developers who have not been exposed to RFC 4122 might naturally opt to invent their own approaches to UUID generation, potentially using insufficient PRNG implementations. Standardizing a UUID method, which dictates that a CSPRNG must be used, helps protect developers from security pitfalls.
Details: The method crypto.randomUUID() is used for generating RFC 4122 version 4 identifiers. The method returns the namespace specific string representation (for example, "6e4decd0-6066-4a25-98e3-0227317cda52").
AbortSignal.abort() static method:
AbortSignal.abort() is a static method that allows creating a new AbortSignal object that is already aborted. It is similar in spirit to Promise.reject(), and provides improved developer ergonomics.
Web developers have found aborted AbortSignal objects to be useful for a variety of purposes. It signifies to JavaScript APIs that no work should be done.
ALPACA attack protection:
Connections to HTTP, HTTPS or FTP servers of ports 989 and 990 will fail.
These ports are used by the FTPS protocol, which has never been implemented in Chrome. However, FTPS servers can be attacked in a cross-protocol attack by malicious web pages using carefully-crafted HTTPS requests.
This is a mitigation for the ALPACA attack. See https://alpaca-attack.com/.
CSS Flexbox: support alignment keywords start, end, self-start, self-end, left, right:
Flexbox previously only obeyed center, flex-start, and flex-end. The additional alignment keywords (start, end, self-start, self-end, left, right) allow authors to more easily align the flex items in the face of varying writing modes and flex flows.
Without these additional keywords, developers need to change the keyword values whenever they change the writing mode, text direction, or flex reversal properties (flex-direction: row/column-reverse or align-content: wrap-reverse). The keywords implemented here let them set alignment once.
CSS module scripts:
Solutions for including CSS in component definitions are lacking. Current practices all have one or more of the following rough edges:
Side effects like appending <style&rt; elements to the document. If this is done in the top-level scope of the document then it breaks shadow root style scoping. If it is done inside a shadow root then each individual instance of the component must include its own <style&rt; element in its shadow root instance.
Inlined CSS text as a string in JavaScript. This is not optimally performant (it's processed by both the JS and CSS parsers) and is a poor developer experience.
Dynamically fetch()ing CSS is generally not statically analyzable and requires careful dependency management by the developer for complex applications.
Details: CSS module scripts solve these issues by extending the ES modules infrastructure to allow importing a CSS StyleSheet object from a CSS file, which can then be added to the document or a shadowRoot via the adoptedStyleSheets array.
CSS Overflow: scrollbar-gutter:
The "scrollbar-gutter" property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar), allowing authors to prevent layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Note that the presence of the scrollbars themselves is determined by the "overflow" property and the decision of whether to use classical or overlay scrollbars is up to the User Agent.
This property provides authors with more control over how their layouts interact with the scrollbars provided by the browser. For example, authors will be able to prevent excessive layout changes as the content expands while avoiding unwanted visuals when scrolling isn't needed. Note that the presence of the scrollbars themselves is determined by the overflow property and the decision of whether to use classical or overlay scrollbars is up to the browser/OS.

New in Blisk 16.1.94.111 (Sep 26, 2021)

New in Blisk 16.0.79.98 (Jul 25, 2021)

New in Blisk 15.1.151.108 (May 31, 2021)

New in Blisk 15.0.221.130 (May 11, 2021)

New in Blisk 12.0.92.83 (Jul 2, 2019)

Improved performance of tabs:
We worked hard to make each tab and device unique. In previous versions of Blisk, there were performance lugs on switching between tabs, tab drag and drop (tab detach/attach), changing tabs order.
Since version 12, Blisk stores the position and size of Device content and Desktop content. So, the users will get a better user experience in:
Switching between tabs and windows
Detaching/attaching tabs
Using different devices in different tabs.
Developer and Browsing modes:
Due to requests from our users, Developer and Browsing modes are again available starting in Blisk v.12. In Browsing mode, Blisk acts like a regular browser and does not render Toolbox and Device content. Any of these modes apply to the window.
Transparent background of screenshots:
Due to multiple feature requests from our users, we implemented a transparent background of screenshots in Blisk v.12. This feature applies to screenshots taken with Blisk v.12+. The screenshots taken with previous versions of Blisk will remain with a solid background color.
Chromium 73 + new APIs and technologies:
Since version 12, Blisk starts supporting the latest APIs and technologies with Chromium 73
Display relative times with Intl.RelativeTimeFormat(). Many web apps use phrases like “yesterday”, “in two days”, or “an hour ago” to indicate when something happened - or is going to happen, instead of displaying the full date and time.
Blisk v.12 introduces Intl.RelativeTimeFormat(), which shifts the work to the JavaScript engine, and enables localized formatting of relative times. This gives us a small performance boost, and means we only need those libraries as a polyfill when a browser doesn’t support the new APIs yet. Using it is simple, create a new instance and specify the locale, then just call format with the relative time.
Specifying underline location for vertical text. When Chinese or Japanese text is displayed in a vertical flow, browsers are inconsistent with where the underline is placed, it may be on the left, or on the right.
In Blisk v.12, the text-underline-position property now accepts left or right as part of the CSS3 text decoration spec. The CSS3 text decoration spec adds several new properties that allow use to specify things like what kind of line to use, the style, color, and position.
Detailed tooltips in Inspect Mode. When inspecting a node, DevTools now shows an expanded tooltip containing commonly important information like font size, font color, contrast ratio, and box model dimensions.
AAA contrast ratio line in the Color Picker. The Color Picker now shows a second line to indicate which colors meet the AAA contrast ratio recommendation. The AA line has been there since Chrome 65.
Colors between the 2 lines represent colors that meet the AA recommendation but do not meet the AAA recommendation. When a color meets the AAA recommendation, anything on the same side of that color also meets the recommendation. For example, in image above anything below the lower line is AAA, and anything above the upper line does not even meet the AA recommendation.

New in Blisk 11.0.157.185 (Mar 24, 2019)

New in Blisk 10.1.262.144 (Nov 3, 2018)

New in Blisk 10.0.261.275 (Sep 30, 2018)

New in Blisk 9.0.177.201 (Jun 5, 2018)

Emulation update:
Starting in version 9 on all platforms, Blisk will use the newly improved emulation. The devices start displaying website's loading state. This release also has improved emulation performance - the devices load faster and resize better.
New devices:
Starting in version 9, Blisk supports:
New phones: iPhone SE, iPhone 8 and iPhone 8 Plus, Google Pixel 2.
New tablets: iPad Pro 9.7", iPad Pro 10.5", iPad Pro 12.9".
New desktops and laptops: iMac Retina 27", MacBook Pro Retina 15", MacBook Air 13", MacBook 12".
Device in real size:
Since version 9, we introduce the new feature: previewing device in real size. With this feature, you can check how your web application, fonts, and elements look on the real device.
Google tab:
Since version 9, we introduce the new feature: Google tab . Google tab is an overlaying tab with Google search. You can use this tab to quickly find anything on the web without leaving your current tab.
Google tab has two states:
Google tab is ready to launch.
Google tab is launched. Click once again to disable it.
Shortcuts:
Blisk lets you perform most tasks directly from the keyboard. You can find the list of the default bindings (keyboard shortcuts) below. Note: you cannot change the existing shortcuts.
New error reports:
Since version 9, Blisk displays error reports in the overlay over device and desktop. Device overlay displays device errors and desktop overlay displays desktop errors.
Chromium 65 with new APIs and technologies:
Since version 9, Blisk starts supporting latest APIs and technologies with Chromium 65:
Network Information API provides actual network performance metrics from the client. Using these network quality signals, you can tailor content to the network. For example, on very slow connections, you could improve page load performance by serving a reduced version. To simplify your application logic, the API returns the measured network performance in terms of how it would compare to a cellular connection. For example, connected to a super fast fiber connection, the API would report 4G.
console.log(navigator.connection.effectiveType);
> 4G
OpenType Variable Fonts Traditionally, one font contained only a single instance of a font family, for example, one weight or one stretch. If you wanted regular, bold and italic, you’d need to include three separate fonts, increasing the weight of your page. An OpenType variable font is the equivalent of multiple individual fonts that can be compactly packaged within a single font file. By adjusting the font-variation-settings CSS property, stretch, style, weight and more, can easily be adjusted, providing an infinite number of stylistic variations. Those three fonts can now be combined into a single, compact file.
.heading {
font-family: "Avenir Next Variable";
font-size: 48px;
font-variation-settings: 'wght' 700, 'wdth' 75;
.content {
font-family: "Avenir Next Variable";
font-size: 24px;
font-variation-settings: 'wght' 400;
Media capture from DOM elements You can now live-capture content into a MediaStream directly from HTMLMediaElements like audio and video, with the Media Capture from DOM Elements API. After invoking captureStream() on an HTML media element, the streamed content can be manipulated, processed, sent remotely or recorded. Imagine using web audio to create your own equalizer or vocoder. Or stream the content to a remote site using WebRTC. The possibilities are almost endless.
CSS Paint API. CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of using those, you can now use paint(myPainter) to reference a paint worklet.
Server Timing API. The new Server Timing API allows your server to pass timing information to the browser; giving you a better picture of your overall performance. You can track as many metrics as you want: database read times, start-up time, or whatever is important to you, by adding a Server-Timing header to your response:
'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'
display: contents. The new CSS display: contents property is pretty slick! When added to a container element, any children take its place in the DOM, and it essentially disappears.