What's new in the world of Frontend?
- Typescript 5.0
- Playwright 1.32
- Webkit features in safari 16.4
- Mongoose 7
- New CSS trigonometry functions - sin and cos
- Visual Studio Code March Release (1.77)
Typescript 5.0
The first news from our today's list is the latest release of Typescript in version 5.0
It brings many new features, which make Typescript faster and simpler. We have :
-
new decorators standard
-
added functionality to better support ESM projects in Node and bundlers
-
provided new ways for library authors to control generic inference
-
expanded JSDoc functionalitySpeed, Memory, and Package Size Optimizations
-
Case-Insensitive Import Sorting in Editors
-
Less complicated configuration
And many other improvements. We’re gonna get you now a quick overview of the most important ones.
The first difference since the beta version is that now typescript allows decorators to be placed before or after export and export default. This is a more cosmetic change which reflected a lot of discussions and consensus about the standards body for ECMAScript / Javascript.
Another change is the new bundler module resolution option, which we can now only use when the —module option is set to esnext. This is about ensuring that import statements written in input files won’t be transformed to require calls before the bundler resolves them whether or not the bundler or loader respects typescipt module option.
What is more about the typescript 5.0 is that now it specifies the minimum version of node js to 12.20 in the package.json. You can read more about that in the post about typescript 5.0 migration to modules which we provided in the video description.
Speaking about changing standards - the typescript team managed to adjust the numbers of speed benchmarks and package size deltas, which has been a core factor across the runs. The names of some benchmarks were also optimized for clarity, and package size improvements have been moved into a separate chart.
Last but not least regarding typescript worth mentioning changes - we have to tell you about decorators, which are an upcoming ECMAScript feature, which allows you to customize classes and their members in a reusable way. Decorators can be used on more than just methods! They can be used on properties/fields, getters, setters, and auto-accessors. Even classes themselves can be decorated for things like subclassing and registration.
Playwright 1.32
The next news for today which we prepared for you is Playwright release version 1.32. For those who haven’t got a chance to try it, Playwright is a framework for web testing and automation, which allows testing, chromium, Firefox, and webkit using a single API. It was built to enable cross-browser web automation to be reliable and fast.
What comes up with the latest release?
The most important thing is the new UI mode which enables exploring running and debugging tests. It comes with a built-in watch mode.
What is more, we have also new options updateMode and UpdateContent added, chaining existing locator objects which you can check in the locator docs for details, new property TestInfo.test id added, and a new option name in method Tracing.start Chunk(). All of the changes are available for Chromium version 112, Firefox 111, and webkit 16.4.
Please feel free to check and test the playwright and see all of the changes regarding the latest release by following the link attached to the video description.
Webkit features in Safari 16.4
The third piece of news which we’re gonna get you an overview of is the webkit features in the latest version of Safari 16.4.
It consists of 135 new web features and over 280 updates, we’re gonna give you a quick overview of the most interesting ones.
Web Push on IOS and IPADOS
iOS and iPadOS 16.4 add support for Web Push to web apps added to the Home Screen. Web Push makes it possible for web developers to send push notifications to their users through the use of Push API, Notifications API, and Service Workers. They show on the Lock Screen, in Notification Center, and on a paired Apple Watch.
Improvements for web apps
WebKit on iOS and iPadOS 16.4 adds support for the Badging API. It allows web app developers to display an app badge count just like any other app on iOS or iPadOS. Permission for a Home Screen web app to use the Badging API is automatically granted when a user gives permission for notifications.
Web Components
Web Components is a suite of technologies that together make it possible to create reusable custom HTML elements with encapsulated functionality. Safari 16.4 improves support for Web Components with several powerful new capabilities.
To check the full list of the new webkit features and updates for Safari please feel free to follow the link attached in the video description.
Mongoose 7
Another news from the world of development which we prepared for you today is the latest release of Mongoose which comes with version 7.
The most significant backwards breaking changes are dropping support for callbacks and upgrading to MongoDB Node.js driver 5.x, but there are a few smaller changes that are worth highlighting.
No More Callbacks
The first thing - no more callbacks. When Mongoose was first released in 2010, callbacks were the preferred concurrency primitive in Node.js.
One async/await feature that we're particularly excited about for Mongoose is async stack traces. Without async stack traces, Node's event loop means that stack traces often contain just Node and MongoDB internals, with no reference to the point in your code that caused the error. As Mongoose 7 evolves, you should see better and better stack traces.
Copying Schema Options on add()
Mongoose 7 now copies schema options when you add() a schema or define a schema using an array of schemas. In Mongoose 6, add()-ing a schema only copied schema paths, not options. This feature is great for schema composition. Before, you had to use either Mongoose's global configuration or class inheritance to define default options for your schema. Now, you can use a mixin-like pattern by passing an array of schemas and schema definition objects to new Schema ().
New CSS trigonometry functions
The five points from our list today is that trigonometry functions show up in CSS.
if you’re using the latest versions of Firefox and Safari, it is possible to use the new css trigonometry functions. So we have now sin(), cos() tan() functions available in the CSS. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. You can read an article about that which we attached in the description below - please feel free to check.
Visual Studio Code version 1.77
The next news that we prepared for you today is the latest release of the visual studio code in version 1.77 which comes up with plenty of new features:
-
Accessibility improvements - New keyboard shortcuts for hovers, notifications, and Sticky Scroll.
-
Copy GitHub deep links - Create permalinks and HEAD links from within the editor.
-
Notebook Format on Save - Automatically format notebooks cells on save.
-
TS/JS switch case completions - Quickly fill in TypeScript/JavaScript switch statements.
-
Python move symbol refactoring - Move Python symbols to an existing or new file.
-
Remote Tunnels update - Reuse existing tunnel and quickly transition from remote to desktop.
-
Ruby documentation - Learn about Ruby language support for VS Code.
-
Preview: expanded GitHub Copilot integration - New inline chat and full AI chat view.
We’re gonna tell you real quick about a few of them now.
Accessibility
The first one - accessibility - The terminal accessible buffer, which provides screen reader users access to the terminal contents via Terminal: Focus Accessible Buffer (⇧Tab), now dynamically updates and remains active until Escape or Tab is used to end the session.
Another thing is that It is now possible to focus on the Sticky Scroll lines and navigate with the up and down keys. You can use the Enter key to go to a selected line. To focus on the Sticky Scroll, you can run Focus Sticky Scroll from the Command Palette. Enable the Sticky Scroll UI via the View: Toggle Stick Scroll command.
Copy GitHub deep links from the editor gutter
The next thing is that you can now copy deep links for an editor line or range from the editor gutter when working in a GitHub repository.
In VS Code Desktop, to be able to create GitHub permalinks and HEAD links from the editor gutter, you need to install the GitHub Pull Requests and Issues extension. In vscode dev, deep links for GitHub repositories are available out of the box.
Improved tab hover
Another thing worth mentioning is the terminal improvement. The terminal tab hover now shows the shell's process ID, the full command line, and an improved view of extension environment variable contributions.
Git LFS commit support in Remote Repositories
You can now commit LFS-tracked files without installing Git LFS when editing GitHub and Azure Repos repositories. To get started, install the GitHub Repositories or Azure Repos extensions on VS Code Desktop, run the Open Remote Repository command to open your repository, and commit your changes using the source control view. The extensions parse your .gitattributes configuration to determine whether your changed files should be committed to the repository provider's Git LFS storage.
Thank you for reading, check other our videos and materials on our blog.
