Tech News - Front-End Web Development

Yesterday, Kamil Mielnik, a JavaScript Developer who specializes in React technology stack, introduced a new automated refactoring tool for React and Redux called R-Factor. Just like C# and Java programmers, who are spoiled with a variety of refactoring tools, JavaScript developers can use this tool to save their time. With this refactoring tool, React developers will not have to spend time writing very common code manipulations. R-Factor does not break your code, keeps your formatting, and can refactor a file in a reasonable amount of time. It comes with a set of 20 automated refactorings. Out of this 20 automated refactorings, 10 are for React components, 8 are for Redux, and the remaining two are other refactorings. It also provides 16 configuration options, using which you can match your code formatting, naming, and other preferences. Though the initial goal of this tool was to only cover React and Redux refactoring, in the future, we could see some features going beyond React and Redux. Following are some of the refactorings that are introduced: Add className: This will add the className prop to a component and apply it to its root JSX element. Convert SVG to component: With this refactoring, you can convert an SVG into a React component. Convert to arrow component: This will turn a component into a functional component defined as an arrow function. Convert to function component: You can convert a component to a functional component defined as a function. Connect: This connects a component to the Redux store with both mapStateToProps & mapDispatchToProps generated. This refactoring tool is supported on Windows, Linux, and macOS and the supported editors include Atom, Sublime Text 3, and VSCode. For using the R-Factor tool, you need to buy the license key. Before you actually start using it on your project, you can try the R-Factor tool online. To know more in detail, check out the official website of R-Factor. React Native 0.59 RC0 is now out with React Hooks, and more Reactive programming in Swift with RxSwift and RxCocoa [Tutorial] React 16.8 releases with the stable implementation of Hooks

The upcoming major version of Bootstrap, version 5, will no longer have jQuery as a dependency and will be replaced with vanilla JavaScript. In 2017, the Bootstrap team opened a pull request with the aim to remove jQuery entirely from the Bootstrap source and it is now near completion. Under this pull request, the team has removed jQuery from 11 plugins including Util, Alert, Button, Carousel, and more. Using ‘Data’ and ‘EventHandler’ in unit tests is no longer supported. Additionally, Internet Explorer will not be compatible with this version. Despite these updates, developers will be able to use this version both with or without jQuery. Since this will be a major release, users can expect a few breaking changes. Not only just Bootstrap but many other companies have been thinking of decoupling from jQuery. For example, last year, GitHub incrementally removed jQuery from their frontend mainly because of the rapid evolution of web standards and jQuery losing its relevancy over time. This news triggered a discussion on Hacker News, and many users were happy about this development. One user commented, “I think the reason is that many of the problems jQuery was designed to solve (DOM manipulation, cross-browser compatibility issues, AJAX, cool effects) have now been implemented as standards, either in Javascript or CSS and many developers consider the 55k minified download not worth it.” Another user added, “The general argument now is that 95%+ of jQuery is now native in browsers (with arguably the remaining 5% being odd overly backward compatible quirks worth ignoring), so adding a JS dependency for them is "silly" and/or a waste of bandwidth.” Read more in detail, check out Bootstrap’s GitHub repository. jQuery File Upload plugin exploited by hackers over 8 years, reports Akamai’s SIRT researcher GitHub parts ways with JQuery, adopts Vanilla JS for its frontend Will putting limits on how much JavaScript is loaded by a website help prevent user resource abuse?

After releasing Next.js 7 in September last year, the team behind Next.js released the production-ready Next.js 8, yesterday. This release comes with a serverless mode, build-time memory usage reduction, prefetch performance improvements, security improvements, and more. Similar to previous releases, all the updates are backward compatible. The following are some of the updates Next.js 8 comes with: Serverless mode The serverless deployment comes with various benefits including more reliability, scalability, and separation of concerns by splitting an application into smaller parts. These smaller parts are also called as lambdas. To provide these benefits of serverless deployment to Next.js users, this version comes with a serverless mode in which each page in the ‘page’ directory will be treated as a lambda. It will also come with low-level APIs for implementing serverless deployment. Better build-time memory usage The Next.js team, with the Webpack team, has worked towards improving the build performance and resource utilization of Next.js and Webpack. This collaboration has resulted in up to 16 times better memory usage with no degradation in performance. This improvement ensures that memory gets released much more quickly and no processes crash under stress. Prefetch performance improvements Next.js supports prefetching pages for faster navigation. Earlier, users were required to inject a ‘script’ tag into the document ‘body’, which caused an overhead while opening pages. In Next.js 8, the ‘prefetch’ attribute uses link rel=”preload” instead of a 'script' tag. Now the prefetching start after onload to allow the browser to manage resources. In addition to removing the overhead, this version also disables prefetch on slower network connections by detecting 2G internet and navigator.connection.saveData mode. Security improvements In this version, a new ‘crossOrigin’ config option is introduced to ensure that all ‘script’ tags have the ‘cross-origin’ set. Also, with this new config option, you do not require ‘pages/_document.js’ to set up cross-origin in your application. Another security improvement includes removing the inline JavaScript. In previous versions, users were required to include script-src 'unsafe-inline' in their policy to enable Content Security Policy. This was done because Next.js was creating an inline ‘script’ tag to pass data. In this version, the inline script tag is changed to a JSON tag for safe transfer to the client. This essentially means Next.js no longer includes no inline scripts anymore. To read about other updates introduced in Next.js 8, check out its official announcement. Next.js 7, a framework for server-rendered React applications, releases with support for React context API and Webassembly 16 JavaScript frameworks developers should learn in 2019 Nuxt.js 2.0 released with a new scaffolding tool, Webpack 4 upgrade, and more!

Yesterday, the team behind Webpack shared all the updates we will see in its upcoming version, Webpack 5. This version improves build performance with persistent caching, introduces a new named chunk id algorithm, and more. For Webpack 5, the minimum supported Node.js version has been updated from 6 to 8. As this version is a major release, it will come with breaking changes and users may expect some plugin to not work. Expected features in Webpack 5 Removed Webpack 4 deprecated features All the features that were deprecated in Webpack 4 have been removed in this version. So, when migrating to Webpack 5 ensure that your Webpack build doesn’t show any deprecation warnings. Additionally, the team has also removed IgnorePlugin and BannerPlugin that must now be passed an options object. Automatic Node.js polyfills removed All the versions before Webpack 4 provided polyfills for most of the Node.js core modules. These were automatically applied once a module uses any of the core modules. Using polyfills makes it easy to use modules written for Node.js, but this also increases the bundle size as huge modules get added to the bundle. To stop this, Webpack 5 removes this automatically polyfilling and focuses on frontend compatible modules. Algorithm for deterministic chunk and module IDs Webpack 5 comes with new algorithms for long term caching. These are enabled by default in production mode with the following configuration lines: chunkIds: "deterministic”, moduleIds: “deterministic" These algorithms assign short numeric IDs to modules and chunks in a deterministic way. It is recommended that you use the default values for chunkIds and moduleIds. You can also choose to use the old defaults chunkIds: "size", moduleIds: "size", which will generate smaller bundles, but invalidate them more often for caching. Named Chunk IDs algorithm A named chunk id algorithm is introduced, which is enabled by default in development mode. It gives chunks and filenames human-readable names instead of the old numeric names. The algorithm determines the chunk ID the chunk’s content. So, users no longer need to use import(/* webpackChunkName: "name" */ "module") for debugging.To opt-out of this feature, you can change the configuration as chunkIds: “natural”. Compiler idle and close Starting from Webpack 5, compilers need to be closed after the use. Now, compilers enter and leave an idle state and have hooks for these states. Once compile is closed, all the remaining work should be finished as fast as possible. Then, a callback will signal that the closing has been completed. You can read the entire changelog from the Webpack repository. Nuxt.js 2.0 released with a new scaffolding tool, Webpack 4 upgrade, and more! How to create a desktop application with Electron [Tutorial] The Angular 7.2.1 CLI release fixes a webpack-dev-server vulnerability, supports TypeScript 3.2 and Angular 7.2.0-rc.0

Yesterday, Dan Abramov, one of the React developers, announced the release of React 16.8, which comes with the feature everyone was waiting for, “Hooks”. This feature first landed in React 16.7-alpha last year and now it is available in this stable release. This stable implementation of React Hooks is available for React DOM, React DOM Server, React Test Renderer, and React Shallow Renderer. Hooks are also supported by React DevTools and the latest versions of Flow, and TypeScript. Developers are recommended to enable a new lint rule called eslint-plugin-react-hooks that enforces best practices with Hooks. It will also be included in the Create React App tool by default. What are Hooks? At the React Conf 2018, Sophie Alpert and Dan Abramov explained what are the current limitations in React and how they can be solved using Hooks. React Hooks are basically functions that allow you to “hook into” or use React state and other lifecycle features via function components. Hooks comes with various advantages such as enabling easy reuse of React components, splitting related components, and use React without classes. What’s new in React 16.8? Currently, Hooks do not support all use cases for classes, but soon it will. Only two methods, that is, getSnapshotBeforeUpdate() and componentDidCatch(), don’t have their Hooks API counterpart. A new API named ReactTestUtils.act() is introduced in this stable release. This API ensures that the behavior in your tests matches what happens in the browser more closely. Dan Abramov in a post recommended wrapping code rendering and triggering updates to their components into act() calls. Other changes include: The useReducer Hook lazy initialization API is improved Support for synchronous thenables is added to React.lazy() Components are rendered twice with Hooks in Strict Mode (DEV-only) similar to class behavior A warning is shown when returning different hooks on subsequent renders The useImperativeMethods Hook is renamed to useImperativeHandle The Object.is algorithm is used for comparing useState and useReducer values To use Hooks, you need to update all the React packages to 16.8 or higher. On a side note, React Native will support Hooks starting from React Native 0.59 release. Read all the updates in React 16.8 on their official website. React Conf 2018 highlights: Hooks, Concurrent React, and more React introduces Hooks, a JavaScript function to allow using React without classes React 16.x roadmap released with expected timeline for features like “Hooks”, “Suspense”, and “Concurrent Rendering”

While clicking on a link or opening a new browser tab, sometimes, audible video or audio starts playing automatically which is a distraction for many users. Mozilla is trying to solve this problem by introducing an autoplay blocking feature in Firefox 66 for desktop and Android. Firefox 66, expected to roll out on 19th March 2019, will now block audible audio and video by default. Lately, Mozilla has been working towards blocking all auto-playing content. Last year, Mozilla announced that Firefox will no longer allow auto-playing audio in order to cut down on annoying advertisements. Microsoft's Edge, Google's Chrome and, Apple's Safari browser also have taken steps in order to limit auto-playing media. Firefox 66 will allow a site to play audio or video aloud only via the HTMLMediaElement API, once a web page has some kind of user interaction (such as mouse click on the play button) to initiate the audio. In this case, any playback that happens before the user has interacted with a page via a mouse click, printable key press, or touch event, will be counted as autoplay and will be blocked if it is audible. Firefox expresses a blocked play() call to JavaScript by rejecting HTMLMediaElement.play() with a NotAllowedError. This is how most browsers function to express a block. Muted autoplay is still allowed as the script can set the “muted” attribute on HTMLMediaElement to true, and autoplay will work. The existing block autoplay implementation in Android and desktop will be replaced with this new feature. According to Mozilla’s official blog post, “In general, the advice for web authors when calling HTMLMediaElement.play(), is to not assume that calls to play() will always succeed, and to always handle the promise returned by play() being rejected.” Users can still opt out of this blocker, for sites that they don't mind playing media by default. There will be an icon which will pop up in the URL bar to indicate that auto-playing media has been blocked, and clicking on it will bring up a menu that will allow users to change the settings. In order to avoid having the audible playback blocked, website owners should only play media inside a click or keyboard event handler, or on mobile in a touchend event. Firefox 66 will also automatically allow autoplaying video on sites that the user has granted access to their cameras and microphones. Since these sites are typically for video conferencing, it would make sense allow if they work uninterrupted. Mozilla is also working on blocking autoplay for Web Audio content, but have not yet finalized the implementation. The autoplay Web Audio content blocking is expected to be shipped some time this year. Mozilla releases Firefox 65 with support for AV1, enhanced tracking protection, and more! Firefox now comes with a Facebook Container extension to prevent Facebook from tracking user’s web activity Mozilla disables the by default Adobe Flash plugin support in Firefox Nightly 69  

On the eve of Vue’s fifth anniversary yesterday, its creator, Evan You, announced the release of Vue 2.6. This version, which goes by the name “Marcoss”, comes with a new syntax for slots usage and also few performance improvements,  internal changes, and more. Following are some of the highlights in Vue 2.6: A new syntax for slots usage Vue provides the slots feature to enable flexible component composition. Vue 2.6 introduces a new unified syntax for named and scoped slots usage. The new directive v-slot combines slot and slot-scope, which are now deprecated, in a single directive syntax. This update is fully backward compatible. According to the RFC, slot-scope will be soft-deprecated. This means that it will be marked deprecated in the docs and developers will be encouraged to use the new syntax, but no deprecation messages will be shown for now. The team is planning to eventually remove slot-scope in Vue 3.0. Performance improvements in slots The rendering of normal slots happens during the parent’s render cycle, hence, when the dependency of a slot changes, it causes both the parent and child components to re-render. This version comes with an optimization to avoid this re-rendering and ensure that the parent scope dependency mutations only affect the parent. Now, the child component will not be forced to update if it uses scoped slots. If you use the new v-slot syntax, then the slots will be compiled into scoped slots. This essentially means that all slots will get the performance advantage that comes with scoped slots. Normal slots are now exposed on this.$scopedSlots as functions. Developers using the render functions instead of templates can now always use this.$scopedSlots, without having to worry about the type of slots being passed in. Async error handling in Vue Vue’s error handling mechanism, which includes in-component errorCaptured hook and the global errorHandler hook, now also capture errors inside v-on handlers. Additionally, if any of your life cycle hooks or event handlers perform asynchronous operations, you can now return a Promise from the function. This will ensure that any uncaught error from that Promise chain is also sent to your error handlers. Data pre-fetching during server-side rendering This version comes with a new serverPrefetch hook that enables any component, except route-level components, to pre-fetch data during server-side rendering. This is introduced to allow more flexible usage and reduce the coupling between data fetching and the router. Dynamic Directive Arguments Earlier, users had to use argument-less object binding in order to leverage dynamic keys as the directive arguments were static. Dynamic JavaScript expressions are now supported in directive arguments. To read more in detail, check out Evan You’s official announcement on Medium. Learning Vue in 2019 with Anthony Gore’s developer knowledge map Evan You shares Vue 3.0 updates at VueConf Toronto 2018 Vue.js 3.0 is ditching JavaScript for TypeScript. What else is new?

Yesterday, the team behind D3.js rolled out D3.js 5.8.0. Data-Driven Documents or D3 is a JavaScript library using which you can create dynamic, interactive data visualizations in web browsers. Updates are introduced in the following modules: d3-force The iterations argument is added to simulation.tick. A bug is fixed when initializing nodes with fixed positions. d3-scale The following new features are added: The domain and range convenience constructors for all scale types Default constructors for sequential and diverging scales The d3.tickFormatReturns function, a number format function for displaying a tick value The d3.scaleSymlog function, which constructs a new continuous scale with the specified domain and range Transformed sequential scales, for example, d3.scaleSquentialLog Transformed diverging scales, for example, d3.scaleDivergingLog d3.scaleSequentialQuantile for p-quantiles scale.unknown for all scale types Unlimited band.paddingOuter and point.padding d3-selection The selection.join method is added, a convenient alternative to the more explicit selection.enter, selection.exit, selection.append, and selection.remove. selection.order is updated to enforce relative position, rather than exact siblings. Vendor fallback for element.matches in selection.filter and d3.matcher is removed. d3-transition The transition.end is added, which returns a promise that resolves when every selected element finishes transitioning. A cancel event is added to transition.on. Performance of transition.style and transition.attr is improved To read the full list of updates on the GitHub repository of D3.js. Introducing Cycle.js, a functional and reactive JavaScript framework Introducing Howler.js, a Javascript audio library with full cross-browser support 16 JavaScript frameworks developers should learn in 2019

Yesterday, PrimeTek announced the release of PrimeReact 3.0.0, a UI component library for React. This updated version comes with few accessibility enhancements, the all-new Babylon create-react-app template, and more. Here are some of the changes PrimeReact 3.0.0 comes with: Enhanced accessibility and quality After reviewing the entire suite, the team has enhanced various components for keyboard and screen reader compatibility. They have also addressed the user feedback resulting in improved overall quality of PrimeReact. Babylon template Babylon is the newly introduced create-react-app template for PrimeReact. It comes with over 800 UI Variations with different menu options, 50+ PrimeReact themes, ready to use pages, and more. There are four flavors of Babylon menu: static, overlay, slim, and horizontal with dar/light color schemes. Additionally, a new grouped menu mode is also introduced in which submenus of the first level menu items are expanded for easier navigation. The template supports 51 built-in themes each of which offers accent, light, and dark options. You can also create your own theme by just defining a couple of SaSS variables. In the future releases, the team will be working towards adding support for more premium templates like Ultima, Serenity, Avalon, and Apollo in PrimeReact 3.0.0. They will also be improving PrimeReact core with features such as TableState, Carousel Component, Filtering for Tree/TreeTable, and more. You can read the full list of changes on PrimeTek’s website. npm JavaScript predictions for 2019: React, GraphQL, and TypeScript are three technologies to learn Introducing Cycle.js, a functional and reactive JavaScript framework JavaScript mobile frameworks comparison: React Native vs Ionic vs NativeScript

Ionic Framework today released Ionic Framework 4.0. The release is a complete rebuild of the popular JavaScript framework for developing mobile and desktop apps. Although Ionic has, up until now, Ionic was built using Angular components, this new version has instead been built using Web Components. This is significant, as it changes the whole ball game for the project. It means Ionic Framework is now an app development framework that can be used alongside any front end frameworks, not just Angular. The shift away from Angular makes a lot of sense for the project. It now has the chance to grow adoption beyond the estimated five million developers around the world already using the framework. While in the past Ionic could only be used by Angular developers, it now opens up new options for development teams - so, rather than exacerbating a talent gap in many organizations, it could instead help ease it. However, although it looks like Ionic is taking a significant step away from Angular, it's important to note that, at the moment, Ionic Framework 4.0 is only out on general availability for Angular - it's still only in Alpha for Vue.js and React. Ionic Framework 4.0 and open web standards Although the move to Web Components is the stand-out change in Ionic Framework 4.0, it's also worth noting that the release has been developed in accordance with open web standards. This has been done, according to the team, to help organizations develop Design Systems (something the Ionic team wrote about just a few days ago) - essentially, using a set of guidelines and components that can be reused across multiple platforms and products to maintain consistency across various user experience touch points. Why did the team make the changes to Ionic Framework 4.0 that they did? According to Max Lynch, Ionic Framework co-founder and CEO, the changes present in Ionic Framework 4.0 should help organizations achieve brand consistency quickly, and to give development teams the option of using Ionic with their JavaScript framework of choice. Lynch explains: "When we look at what’s happening in the world of front-end development, we see two major industry shifts... First, there’s a recognition that the proliferation of proprietary components has slowed down development and created design inconsistencies that hurt users and brands alike. More and more enterprises are recognizing the need to adopt a design system: a single design spec, or library of reusable components, that can be shared across a team or company. Second, with the constantly evolving development ecosystem, we recognized the need to make Ionic compatible with whatever framework developers wanted to use—now and in the future. Rebuilding our Framework on Web Components was a way to address both of these challenges and future-proof our technology in a truly unique way." What does Ionic Framework 4.0 tell us about the future of web and app development? Ionic Framework 4.0 is a really interesting release as it tells us a lot about where web and app development is today. It confirms to us, for example, that Angular's popularity is waning. It also suggests that Web Components are going to be the building blocks of the web for years to come - regardless of how frameworks evolve. As Lynch writes in a blog post introducing Ionic Framework 4.0, "in our minds, it was clear Web Components would be the way UI libraries, like Ionic, would be distributed in the future. So, we took a big bet and started porting all 100 of our components over." Ionic Framework 4.0 also suggests that Progressive Web Apps are here to stay too. Lynch writes in the blog post linked to above that "for Ionic to reach performance standards set by Google, new approaches for asynchronous loading and delivery were needed." To do this, he explains, the team "spent a year building out a web component pipeline using Stencil to generate Ionic’s components, ensuring they were tightly packed, lazy loaded, and delivered in smart collections consisting of components you’re actually using." The time taken to ensure that the framework could meet those standards - essentially, that it could support high performance PWAs - underscores that this will be one of the key use cases for Ionic in the years to come.  

Earlier this month, the team at Atom released Atom 1.34, a free and open source text editor that helps users to commit with a faster diff view and an ability to preview all staged changes. This release comes with improved commit preview, commit message templates and improved diffs. Improvements in Atom 1.34 Commit preview This feature will be highly useful for those who double check the specific changes that are going into each commit. While crafting commit messages, users can now draw inspiration from the diff of their staged changes. Users just have to click the ‘See All Staged Changes’ button above the commit message box, and they will be able to view their staged changes. Improved diffs The GitHub package now renders diff views with a text editor which will improve performance. Users will now be able to render large diffs faster. And the text editor key bindings will now work in diffs. Commit message templates This release now supports commit message templates. Users can now add a template on a per-project basis or globally through the git configuration. Changes in Atom 1.34 Users can view a multi-file diff of all staged changes prior to committing This release comes with added support for commit message template. This version of Atom renders git diff view with a TextEditor. This release comes with Kotlin language syntax highlighting in markdown code blocks. Major bug fixes The previous release had a bug where package searches were throwing uncaught exceptions which has been fixed now. Initially there was an error while running Bracket Matcher which has been fixed now. Users have given mixed reactions to this release. Few of the users think that the team at Atom could have worked on bigger issues related to finder reindexing and Atom-IDE packages. Few users are comparing this release with VSCode. With some users in the favor of VSCode and others supporting Atom 1.34. One user commented on HackerNews, “What makes you stick to Atom? I switched to VSCode due to Atom's terrible performance when opening huge files.” Another comment on HackerNews, reads, “I was a big fan of Atom, but it's constant performance problems combined with the fact that even after Atom's team rewriting huge parts of the project in C++, doing witchcraft and what not, made me switch to VSCode.” Another comment reads, “I'm finding VSCode's performance starts to fall apart completely where Atom performs the exact same as before.” Few users think that Atom functioned well initially but when it is used as an IDE, it falls flat. One of the users commented, “I used Atom for a couple years and raved about it's features and package management but when it came to using it as an IDE, it fell short for one reason. It doesn't have a configurable way to debug across all languages.” According to some users, Atom uses a rendering layer that doesn’t work along with the goal of a text editor, which is to be fast and responsive. While others are liking how this release auto-formats commit messages and make it easier for highlighting merge conflicts. To know more about Atom 1.34, check out the release notes. YUI 2.8: Rich Text Editor Facebook retires its open source contribution to Nuclide, Atom IDE, and other associated repos Android Studio 3.3 released with support for Navigation Editor, C++ code lint inspections, and more

After releasing Ember 3.6 last month, the team behind the Ember project released version 3.7 of Ember.js, Ember Data, and Ember CLI, last week. As always, Ember 3.7 embarks the start of 3.8 beta cycle for all the subprojects. This version drops support for Babel 6 and Node 4, along with a few bug fixes and performance improvements. There are no changes in the Ember Data subproject. Updates in Ember.js 3.7 In Ember.js 3.7, the support for Node 4 has been dropped explicitly and if you want to upgrade to this version you need to first upgrade your Node version. Also, Node 6 support is planned to end in the next few months. Updates in Ember CLI The last usage of Babel 6 removed: The last usage of Babel 6 is removed in Ember CLI 3.7. Babel 6 was used for supporting compiling templates in addon/. It was also used for supporting addon-test-support/ in the addons that do not have any .js processors. Since the module compilation between Babel 6 and Babel 7 is compatible, this update is not a breaking change. Compatibility section in addon README: Another update is a Compatibility section in addon README. Whenever a new addon is generated using Ember CLI, a README file is also generated for the addon. This README will now come with a compatibility section, which enables you to easily communicate to users about what are the requirements to use the addon. You can upgrade to Ember CLI using the following commands: npm install -g ember-cli-update ember-cli-update The Ember project releases version 3.5 of Ember.js, Ember Data, and Ember CLI The Ember project announces version 3.4 of Ember.js, Ember Data, and Ember CLI Ember project releases v3.2.0 of Ember.js, Ember Data, and Ember CLI

Today, Minko Gechev, an engineer in the Angular team at Google announced the release of Angular CLI 7.2.1. This release fixes a webpack-dev-server vulnerability and also comes with support for multiselect list prompt, TypeScript 3.2, and Angular 7.2.0-rc.0. https://twitter.com/mgechev/status/1083133079579897856 Understanding the webpack-dev-server vulnerability The npm install command was showing the Missing Origin Validation vulnerability because webpack-dev-server versions before 3.1.10 are missing origin validation on the websocket server. A remote attacker can take advantage of this vulnerability to steal a developer’s code as the origin of requests to the websocket server, which is used for Hot Module Replacement (HMR) are not validated. Other updates in Angular 7.2.1 CLI Several updates and bug fixes were listed in the release notes of Angular CLI’s GitHub repository. Some of them are: Support is added for multiselect list prompt Support is added for TypeScript 3.2 and Angular 7.2.0-rc.0 Optimization options are updated Warnings are added for overriding flags in arguments lintFix is added to several other schematics `resourcesOutputPath` is added to the schema to define where style resources will be placed, relative to outputPath. The architect command project parsing is improved Prompt support is added using Inquirer Jobs API is added Directly loading component templates is supported Angular 7 is now stable Unit testing Angular components and classes [Tutorial] Setting up Jasmine for Unit Testing in Angular [Tutorial]

Otter Browser released its first stable version, 1.0.01, last week. It is a free and open-source browser with a GPLv3 license that aims to recreate the experience of the classic Opera (12.x) UI using Qt5. Fun Fact: 1.0.xx releases are codenamed Mordecai, after a character from Regular Show As the browser’s tagline states, “Controlled by the user, not vice versa”, users are free to contribute to making the browser better. Users can write code, create resources, report bugs, or suggest features. The browser uses JavaScript for interacting with rendering engines (when native APIs are not available). It is written primarily in C++ and leverages powerful features offered by the Qt5 framework. Enhancements in Otter browser 1.0.01 This stable version does not include all planned features. However, some features might be included in the 1.1 version later this year. The most important changes since the RC 12 include: There are some enhancements in the experimental backend for QtWebEngine (Blink), which include, the download dialog is now shown for the tab that initiated it. Also, there is an added support for handling requests to print page. This release also includes many other fixes. One issue that has not been solved is, the new browsing history backend does not store favicons yet. Read more about this release on Otter Browser’s official website. Chromium-based Brave browser shows 22% faster page load time than its Muon-based counterpart Introducing Basilisk, an open source XUL based browser and “close twin” to pre-Servo Firefox An SQLite “Magellan” RCE vulnerability exposes billions of apps, including all Chromium-based browsers

Yesterday, the Facebook Open Source team announced that they will no longer be able to contribute to the open source development of the Nuclide extension, Atom IDE, and other associated repos. https://twitter.com/fbOpenSource/status/1072928679695548416 Nuclide is a code editor built as a suite of features on top of the Atom text editor to provide hackability and the support of an active community. Facebook developed Nuclide to provide a first-class unified development environment for React Native, Hack, and Flow projects. Nuclide was first created for Facebook’s internal engineers and then was later open sourced in the hopes that others could also benefit from it too. In their announcement, Facebook told that this decision was made because they were not able to pay much attention to the project. They added, “However, our team has not been able to give this project the amount of attention and responsiveness it deserves and as a result, we’ve made the difficult decision to retire Nuclide and associated repos, such as the Atom-IDE packages.” Though they are not going to contribute to the Nuclide open source project, Facebook will continue to use it internally: https://twitter.com/amasad/status/1072930703065501696 The latest release, that is, Nuclide 0.366 will be the last release by Facebook. They have made its source code available in the Facebook Open Source Archive. The language and debugging services will still be supported in Atom and other compatible IDEs such as Microsoft Visual Studio Code or the clients listed on Langserver.org. Users on Hacker News are speculating that maybe this is the time to adopt VSCode and the main reason is that it provides good integration with TypeScript. Here’s what a user said, “A shame, in an ideal world there would be the benefit of outside contributions that made less internal work needed, so overall would be a win for Facebook. But probably this is related to Atom itself being taken over by VSCode, the number of users (and maybe contributors) appears to be going down.” Read the official announcement by Facebook on Nuclide’s website. Facebook’s artificial intelligence research team, FAIR, turns five. But what are its biggest accomplishments? Facebook AI research and NYU school of medicine announces new open-source AI models and MRI dataset as part of their FastMRI project Facebook plans to change its algorithm to demote “borderline content” that promotes misinformation, and hate speech on the platform