Tech News - Front-End Web Development

D3.js, the popular javascript library is now available in version 5.0. This version D3 5.0, introduces only a few non-backward-compatible changes. D3.js is a JavaScript library for manipulating documents based on data. D3 combines powerful visualization components and a data-driven approach to DOM manipulation. It helps bring data to life using HTML, SVG, and CSS without restriction to a proprietary framework. Here are the most notable changes available in D3 5.0: D3 5.0 now uses Promises instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support async and await. D3 now also uses the Fetch API instead of XMLHttpRequest where the d3-request module has been replaced by d3-fetch. D3 5.0 also deprecates and removes the d3-queue module. Developers can use Promise.all to run a batch of asynchronous tasks in parallel, or a helper library such as p-queue to control concurrency. D3 no longer provides the d3.schemeCategory20 categorical color schemes. It now includes d3-scale-chromatic, which implements excellent schemes from ColorBrewer, including categorical, diverging, sequential single-hue and sequential multi-hue schemes. It also provides implementations of marching squares and density estimation via d3-contour. There are two new d3-selection methods: selection.clone for inserting clones of the selected nodes, and d3.create for creating detached elements. In addition, D3’s package.json no longer pins exact versions of the dependent D3 modules. This fixes an issue with duplicate installs of D3 modules. As a developer you can be assured that the API has been very stable since the release of 4.0. The only significant breakage will be in adopting modern asynchronous patterns i.e. promises and Fetch. You can download the latest version from d3.zip. The latest release can also be linked directly by copying this snippet: <script src="https://d3js.org/d3.v5.min.js"></script> The list of entire changes and code files are available in the release notes.

Angular 6 finally arrives! This is a major production release of Angular, the popular JavaScript framework for building web and mobile applications. This release mainly focuses on the toolchain and on making it easier for developers to migrate to future versions of Angular quickly. With this release, major framework packages (@angular/core, @angular/common, @angular/compiler, etc), the Angular CLI, and Angular Material + CDK are also synchronizing their releases. All are releasing as 6.0.0 today. Here’s a quick rundown of all major features: New CLI commands Two new CLI commands have been added. The ng-update command recommends updates to an application by analyzing the package.json. ng-update will help developers adopt the right version of dependencies while keeping them in sync. The ng-add CLI command adds new capabilities to a project by using the package manager to download new dependencies and invoke an installation script. ng add @angular/pwa —Converts your app into a PWA by adding an app manifest and service worker ng add @ng-bootstrap/schematics — Adds ng-bootstrap to your application ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate CLI Workspaces CLI v6, which is a part of Angular 6 release, now supports workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration. It also adds support for creating and building libraries with the command ng generate library <name>. This command will create a library project within the CLI workspace, and configure it for testing and building. Angular Elements Angular 6 also comes with the first release of Angular Elements. Angular elements allow bootstrapping Angular components within an existing Angular application by registering them as Custom Elements. They replace the need to manually bootstrap Angular components found in static html content. Angular Material + CDK Components Angular 6 features a new tree component for displaying hierarchical data. The Tree component in Angular Material and the Component Dev Kit helps in better visualization of tree structures such as a list of files. Alongside the tree, there are new badge and bottom-sheet components. Badges help display small bits of helpful information, such as unread item counts. Bottom-sheets are a special type of mobile-centric dialogs, commonly used to present a list of options following an action. With the release of v6, the @angular/cdk/overlay package includes new positioning logic that helps make pop-ups which remain on-screen in all situations. The angular material also includes 3 new starter components. Material Sidenav: Generates a starter component including a toolbar with the app name and the side navigation. Material Dashboard: Generates a starter dashboard component containing a dynamic grid list of cards. Material Data Table: Generates a starter data table component that is pre-configured with a datasource for sorting and pagination. Updated to use RxJS v6 Angular has been updated to use RxJS v6. RxJS v6 was introduced at ng-conf and brings several major changes, along with a backwards compatibility package rxjs-compat for keeping applications working without breaking components. Long Term Support Expansion The angular community has extended the long-term support to all major releases starting with v4. Each major release will be supported for 18 months with around 6 months of active development followed by 12 months of critical bug fixes and security patches. A common complaint among developers about Angular has been about the messy migrations from one version to another. This announcement aims to make updating from one major to the next easier, and give bigger projects more time to plan updates. How can you upgrade to the new version? The update will take advantage of the new ng update tool. Here are the steps for updating. Update @angular/cli Update your Angular framework packages Update other dependencies Checkout the Angular blog for detailed release notes and steps on how to update. ng-conf 2018 highlights, the popular angular conference Why switch to Angular for web development – Interview with Minko Gechev 8 built-in Angular Pipes in Angular 4 that you should know  

Angular started as a simple frontend library. Today it has transformed in a complete framework as simply ‘Angular’ with continuous version progression from 2 to the recent 6. This progression added some amazing features to Angular, making the overall development process easier. Angular 6, is the latest version, is packed with exciting new features for all of the Angular community. In this article we are going to cover some amazing features which are out with Angular 6. So let’s get started! Angular Elements Consider a search component that we would like to have for a specific Angular application. It can be visualized as follows. In above application the search component uses the input ‘bat’ to fetch the results on the basis of its text similarity. A class named `SearchComponent` must be working beneath the app. With the advent of Angular 6, we can wrap such Angular components into custom elements. Such elements are nothing but DOM elements; in our case a combination of textbox and divs with a composition of javascript function. These elements once segregated can be used independently irrespective of any other frontend libraries like react.js, view or simple jquery. The custom elements are a new way to set the component individually out of the ng framework and use it independently. Ivy: Support for new Angular engine version 6 onwards Angular 6 will introduce us (in the near future) to a new Ivy engine that contributes to great performance and the decrease in load time of an application. Here are some important features of Ivy you need to know. Shaking Tree It is an optimization step that makes sure that unused code is not present in your build bundle. The tree shaking compilation is often used while executing `ng build` command to generate the build. New to what is a build or a bundle? A build or a bundle is a ready-to-go-live set of files that needs to be deployed on the production environment. Let’s  say a frontend project will be needing the following files in a bundle : In your Angular project there might be a component included but is not required. Assume, it falls under a specific if-condition and is not at all executed. The normal dead code elimination tools using static analysis work by retaining the symbols/characters of the reference already present in the unbundled code. Hence the component that was conditionally not at all used, unfortunately remains inside the bundle. The new rendering mechanism Render 2 is built to solve such issues. Now we can specify configuration through instruction based rendering technique. This may include only things that are required which in turn minimizes the size of builds bundles to the great extent. The new Ivy engine seems cool! New cli commands With upgradation to Angular 6, the ng cli package provides two new commands. ng add As its name suggests, the ‘ng add’ command provides you the capability to add a new module/package to your current application. This may be rxjs, material UI libraries etc. Don’t get confused, it doesn’t install the package but simply adds one to your project whenever required. So if you are planning to add a third party library to your Angular app make sure you install it using npm, and then add it using ng add. The automatic addition of such modules helps reduce development time by avoiding errors while adding up a module. ng update The new Angular version 6 cli has the most awaited ‘ng update’ command. This command when run, yields a command line that provides a list of packages that need to be updated over time. In case they are already updated, the command just provides a confirmation that everything is in order. Upgrading to ng 6 A fresh Angular 6 installation is not a problem. You can always follow https://update.Angular.io/ for incorporating changes with respect to updates. Here are a few set of things to do if you are planning to upgrade in your current project. Node.js version 8.9+ Update your Angular configuration //Globally npm i -g @Angular/cli //locally npm i @Angular/cli Once the Angular cli has its latest code, the ng update command is available for use. So let us use it for updating the packages under Angular/cli as follows npm update @Angular/cli Update the Angular/core packages using ng update as follows ng update @Angular/core Angular has rxjs for handling asynchronousity in the application. This library also needs to be updated to rxjs 6. Here is the link for the detailed updation process Update Angular material library that provides beautiful UI components ng update @Angular/material Finally run `ng serve` and test the new setup Besides all the amazing features listed above, Angular 6 provides support to rxJS6, Typescript 2.7 with conditional type declarations and not to forget the service-workers package in Angular’s core. At the time of Angular 6 launch, there were small break points with respect to command line commands like ng updates which are fixed by now and stable. The Angular team is already working towards some more incredible features like new ng-compiler engine, @aiStore (an AI powered solutions store), @mine package for bitcoins and much more in Angular 7. Over the years, the Angular team has continued to provide dedicated support to evolve the project into one of the  best that technology has to offer. With such tenacity, looks like the whole Angular ecosystem is poised to scale even greater heights than before. I, for one, can’t wait to see what they do next in Angular! [author title="Author Bio"] Erina is an assistant professor in the computer science department of Thakur college, Mumbai. Her enthusiasm in web technologies inspires her to contribute to freelance JavaScript projects, especially on Node.js. Her research topics were SDN and IoT, which according to her create amazing solutions for various web technologies when used together. Nowadays, she focuses on blockchain and enjoys fiddling with its concepts in JavaScript.[/author] Why switch to Angular for web development – Interview with Minko Gechev ng-conf 2018 highlights, the popular angular conference Getting started with Angular CLI and build your first Angular Component

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]

Mozilla’s Firefox 63 comes with support for two Web Components: Custom Elements and Shadow DOM. Yesterday, Mozilla shared how these new capabilities and resources are helping web developers to create reusable and modular code. What are Web Components? Web components is a suite of web platform APIs that allow you to create new custom, reusable, and encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the Web Component standards work across modern browsers and can be used with any JavaScript library or framework that works with HTML. Let’s discuss the two tent pole standards of Web Components v1: Custom Elements Custom Elements, as the name suggests, allows developers to create “customized” HTML tags. With Custom Elements, web developers can create new HTML tags, improve existing HTML tags, or extend the components created by other developers. It provides developers a web standards-based way to create reusable components using nothing more than vanilla JS/HTML/CSS. To prevent any future conflicts, all Custom Elements must contain a dash, for example, my-element. The following are the power Custom Elements provides: 1. Earlier, browsers didn’t allow extending the built-in HTMLElement class or its subclasses. You can now do that with Custom Elements. 2. For the existing tags such as a p tag, the browser is aware to map it with the HTMLParagraphElement class. But what happens in the case of Custom Elements? In addition to extending built-in classes, we now have a Custom Element Registry for declaring this mapping. It is the controller of custom elements on a web document, allowing you to register a custom element on the page, return information on what custom elements are registered, and so on. 3. Additional lifecycle callbacks such as connectedCallback, disconnectedCallback, and attributeChangeCallback are added for detecting element creation, insertion to the DOM, attribute changes, and more. Shadow DOM Shadow DOM gives you an elegant way to overlay the normal DOM subtree with a special document fragment that contains another subtree of nodes. It introduces a concept of shadow root. A shadow root has standard DOM methods, and can be appended to as any other DOM node but is rendered separately from a document's main DOM tree. Shadow DOM introduces scoped styles to the web platform. It allows you to bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript without needing any tools or adhering to naming conventions. The underlying concept of Shadow DOM It is similar to the regular DOM, but differs in two ways: How it's created/used How it behaves in relation to the rest of the page Normally, DOM nodes are created and appended as children of another element. Using shadow DOM, you can create a scoped DOM tree that's attached to the element, but separate from its actual children. This scoped subtree is called a shadow tree. The element to which the shadow tree is attached to is called shadow host. Anything that is added in the shadows becomes local to the hosting element, including <style>. This is how CSS style scoping is achieved by the Shadow DOM. Read more in detail about Web Components on Mozilla’s website. Mozilla introduces new Firefox Test Pilot experiments: Price Wise and Email tabs Mozilla shares how AV1, the new open source royalty-free video codec, works This fun Mozilla tool rates products on a ‘creepy meter’ to help you shop safely this holiday season

After releasing the RC0 version of React Native 0.59, the team announced its stable release yesterday. This release comes with some of the most awaited features including React Hooks, updated JavaScriptCore, and more. Support for React Hooks React Hooks were introduced to solve a wide variety of problems in React. It enables you to reuse stateful logic across components without having to restructure your components hierarchy. With React Hooks, you can split a component into smaller functions, based on what pieces are related rather than forcing a split based on lifecycle methods. It also lets you use more of React’s features without classes. Updated JavaScriptCore The JavaScriptCore (JSC) is an engine that allows Android developers to use JavaScript natively in their apps. React Native 0.59 comes with an updated JSC for Android, and hence supports a lot of modern JavaScript features. These features include 64-bit support, JavaScript support, and big performance improvements. Improved app startup time with inline requires Applications now load resources as and when required to prevent slowing down the app launch. This feature is known as “inline requires”, which delay the requiring of a module or file until that module or file is actually needed. Using inline requires can result in startup time improvements. CLI improvements Earlier, React Native CLI improvements had long-standing issues and lacked official support. The CLI tools are now moved to a new repository and come with exciting improvements. Now, logs are formatted better and commands run almost instantly. Breaking changes React Native 0.59 has been cleaned up following Google's latest recommendations, which could result in potential breakage of existing apps. You might experience a runtime crash and see a message like this, “You need to use a Theme.AppCompat theme (or descendant) with this activity." Developers are recommended to update their project’s AndroidManifest.xml file to make sure that “android:theme” value is an AppCompat theme. Also, in this release, the “react-native-git-upgrade” command has been replaced with the newly improved “react-native upgrade” command. To read the official announcement, check out React Native’s website. React Native community announce March updates, post sharing the roadmap for Q4 React Native Vs Ionic: Which one is the better mobile app development framework? How to create a native mobile app with React Native [Tutorial]

At the Chrome Web Summit 2018, Dan Dascalescu, Partner Developer Advocate at Google provided a high-level overview of ChromeOS and discussed Chrome’s core and new features available to web developers. Topics included best practices for web development, including Progressive Web Apps, and optimizing input and touch for tablets while having desktop users in mind. He specified that Chromebooks are convergence machines that run Linux, Android, and Google Play natively without emulation. He explained why ChromeOS can be a good choice for web developers. It not only powers devices from sticks to tablets to desktops, but it can also run web, Android, and now Linux applications. ChromeOS brings together your own development workflow with a variety of form factors from mobiles, tablets, desktop, and browsers on Android and Linux. Run Linux apps on ChromeOS with Crostini Stephen Barber, an engineer on ChromeOS described Chrome’s container architecture which is based on Chrome’s principle of safety, security, and reliability.  By using lightweight containers and hardware virtualization support, Android and Linux code run natively in ChromeOS. Developers can run Linux apps on ChromeOS through Project Crostini. Crostini is based on Debian stable and uses both virtualization and containers to provide security in depth. For now, they are starting out targeting web developers by providing integration features like port forwarding to localhost as a secure origin. They also provide a penguin.linux.test DNS alias, to treat a container like a separate system. For supporting more developer workflows than just web, they are soon providing USB, GPU, audio, FUSE, and file sharing support in upcoming releases. Dan also shared how Crostini is actually used for developing web apps. He demonstrated how you can easily install Linux on your Chromebook. Although Crostini is still in development, most things work as expected. Developers can run IDEs, databases like MongoDB, or MySQL. Anything can be installed with an -apt. It also has a terminal. Dan also mentioned Carlo, which is a Google project that is essentially a helpful node app framework. It provides applications with Chrome rendering capabilities. It uses a locally detected instance of chrome and it connects to your process pipe and then exposes the high-level API to render in Chrome from your NodeScript. If you don’t need low-level features, you can make your app as a PWA which works without a LaunchBar once installed in ChromeOS. Windows Chrome desktop PWA support will be available from Chrome 70+ and Mac from Chrome 72+. Dan also conducted a demo on how to run a PWA. These were the steps: Set up Crostini Install the development environment (node, npm, VSCode) Checkout a PWA (Squoosh) from GitHub Open in VSCode Run the web server Open PWA from Linux and Android browsers He also provided guidance on optimizing forms, handling touch interactions, pointer events, and how to set up remote debugging. What does the future look like for ChromeOS? Chrome team is on improving the desktop PWA support. This includes support for keyboard shortcuts, badging for the launch icon, and link capturing. They are also working on low-latency canvas contexts which are introduced in Chrome 71 Beta. This context uses OpenGLES for rastering, writes directly to the Front Buffer, which bypasses several steps of the rendering process but risks tearing. It is used mainly for high-level interactive apps. View the full talk on YouTube. Day 1 of Chrome Dev Summit 2018: new announcements and Google’s initiative to close the gap between web and native. Meet Carlo, a web rendering surface for Node applications by the Google Chrome team. Google Chrome 70 now supports WebAssembly threads to build multi-threaded web applications.

Laravel 6.0 releases with improvements in Laravel 5.8. Introduction to semantic versioning, compatibility with Laravel Vapor, improved authorization responses, job middleware, lazy collections, sub-query improvements, the extraction of frontend scaffolding to the laravel/ui Composer package, and a variety of other bug fixes and usability improvements. Key features in Laravel 6.0 Semantic versioning The Laravel framework package now follows the semantic versioning standard. This makes the framework consistent with the other first-party Laravel packages which already followed this versioning standard. Laravel vapor compatibility Laravel 6.0 provides compatibility with Laravel Vapor, an auto-scaling serverless deployment platform for Laravel. Vapor abstracts the complexity of managing Laravel applications on AWS Lambda, as well as interfacing those applications with SQS queues, databases, Redis clusters, networks, CloudFront CDN, and more. Improved exceptions via ignition Laravel 6.0 ships with Ignition, which is a new open source exception detail page. Ignition offers many benefits over previous releases, such as improved Blade error file and line number handling, runnable solutions for common problems, code editing, exception sharing, and an improved UX. Improved authorization responses In previous releases of Laravel, it was difficult to retrieve and expose custom authorization messages to end users. This made it difficult to explain to end-users exactly why a particular request was denied. In Laravel 6.0, this is now easier using authorization response messages and the new Gate::inspect method. Job middleware Job middleware allows developers to wrap custom logic around the execution of queued jobs, reducing boilerplate in the jobs themselves. Lazy collections Many developers already enjoy Laravel's powerful Collection methods. To supplement the already powerful Collection class, Laravel 6.0 has introduced a LazyCollection, which leverages PHP's generators to allow users to work with very large datasets while keeping memory usage low. Eloquent subquery enhancements Laravel 6.0 introduces several new enhancements and improvements to database subquery support. To know more about this release, check out the official Laravel blog page. What’s new in web development this week? Wasmer’s first Postgres extension to run WebAssembly is here! JavaScript will soon support optional chaining operator as its ECMAScript proposal reaches stage 3 Google Chrome 76 now supports native lazy-loading

Yesterday, the team behind PrimeNG, a collection of rich UI components for Angular, announced the release of PrimeNG 8.0.0. This release comes with Angular 8.0 support, a new feature called FocusTrap, and other quality improvements. Here are some of the updates in PrimeNG 8.0.0: Compatibility with Angular 8 The main focus behind this release was to support Angular 8. Currently, PrimeNG 8.0.0 does not come with Ivy support as there are various breaking changes for the team to tackle in 8.x. “It is easier to use Ivy although initially there are no significant gains, for library authors such as ourselves there are challenges ahead to fully support Ivy,” the team wrote in the announcement. This compiler is opt-in right now but in the future release, probably in v9, we can expect it to become the default. Currently, there are “no real gains” of using it, however, you can give it a whirl to check whether your app works right with Ivy. You can enable it by adding "enableIvy": true in your angularCompilerOptions, and restart your application. Another issue that you need to keep in mind is Angular 8’s web animations regression that breaks your application if you add import 'web-animations-js'; into polyfills.ts. PrimeNG 8.0.0 users are recommended to use a fork of web-animations until the issue is fixed. Other new features and enhancements A new feature called FocusTrap is introduced, which is a new directive that keeps focus within a certain DOM element while tabbing. Spinner now has the decimalSeperator and thousandSeperator props. A formatInput prop is added to Spinner that formats input numbers according to localSeperators. The FileUpload component uses HttpClient that works with interceptors. This is why the team has removed onBeforeSend and added onSend. Headers prop for FileUpload are introduced to define HttpHeaders for the post request. The ‘rows’ of Table now supports two-way binding. Read more about PrimeNG 8.0 on its official website. Angular 8.0 releases with major updates to framework, Angular Material, and the CLI 5 useful Visual Studio Code extensions for Angular developers Ionic Framework 4.0 has just been released, now backed by Web Components, not Angular

On Thursday last week, thousands of IT admins were left aghast when their Google Chrome browsers went blank, the White Screen of Death, and effectively crashed the browser. This was because Google was silently experimenting with a new WebContents Occlusion feature. The WebContents Occlusion feature is designed to suspend Chrome tabs when you move other apps on top of them and reduce resource usage when the browser isn’t in use. This feature is expected to reduce battery usage (for Chrome and other apps running on the same machine). This feature had been under testing in Chrome Canary and Chrome Beta releases. However last week, Google decided to test it in the main stable release, so it could get more feedback on how it behaved. "The experiment/flag has been on in beta for ~5 months," said David Bienvenu, a Google Chrome engineer in a Chromium bug thread. "It was turned on for stable (e.g., M77, M78) via an experiment that was pushed to released Chrome Tuesday morning." The main issue was that this experiment was released silently to the stable release, without IT admins or users being warned about Google’s changes. Naturally, Chrome users were left confused and lashed out their anger and complaints on Google Chrome’s support forum. Business users who were affected included those that run Chrome on Windows Server "terminal server" environments and on Citrix servers. Due to browser-crashing, employees working in tightly controlled enterprise environments were unable to switch browsers impacting business-critical functionality. After multiple complaints from businesses and users, Google rolled back the change late on Thursday night. “I’ll rollback the launch of this experiment and try to figure out how to deal with Citrix,” noted Bienvenu in the bug thread. Later a new Chrome configuration file was pushed out to users. "I believe it's more of a pull than a push thing," Bienvenu said, "so once the update is live on the Google servers, the next time you launch Chrome, you should get the new config. Google's Chrome experiment left ID admins confused Many IT admins were also angry that they’ve wasted valuable resources and time on trying to fix issues in their environment thinking it was their own fault. “We spent the better part of yesterday trying to determine if an internal change had occurred in our environment without our knowledge”, wrote an angry user. “We did not realize this type of event could occur on Chrome unbeknownst to us. We are already discussing alternative options, none of them are great, but this is untenable.", writes an angry user. Others urged Google that they should be allowed to opt out of any Google Chrome experiments. “Would like to be excluded from further experimental changes. We have had the sporadic white screen of deaths over the past few weeks. How would we have ever known it was a part of the 1%?  We chalked it off as bad Chrome profiles. We still have fresh memories of the experimental Chrome sound issue. That was very disruptive too. Please test your changes in your internal rdsh/Citrix environment. Please give us the option to opt out of "experimental" changes.  Thank you for your consideration.” Another said, “We've been having random issues for quite some time, and our agents could be in this 1%. This last one was a huge impact on our customer-facing agents, not to mention working all day yesterday and today of troubleshooting. Is there a way to be excluded from these experimental changes? If Chrome is going to be an enterprise browser, we need stability.” With Google Chrome’s mishap, more people are advocating moving to different browsers that give more control to its end users. Chrome also came under fire recently when it started experimenting with Manifest V3 extension in Chrome 80 Canary build. Chrome’s ad-blocking changes received overwhelmingly negative feedback as it can stop the working of many popular ad-blockers. Other browsers are also popping up now and then which offer better user privacy and ad-blocking features - Brave 1.0 being the latest in the line. Brave 1.0 releases with focus on user privacy, crypto currency-centric private ads and payment platform Google starts experimenting with Manifest V3 extension in Chrome 80 Canary build. Expanding Web Assembly beyond the browser with Bytecode Alliance, a Mozilla, Fastky, Intel and Red Hat partnership.

Yesterday, InfernoJS community announced the release of InfernoJS v6.0.0. This version comes with Fragments using which you can group a list of children without adding extra nodes to the DOM. Three new methods have been added: createRef, forwardRef, and rerender, along with few breaking changes. Added support for Fragments Support for Fragments, a new type of VNode, is added. It will enable you to group a list of children without adding extra nodes to the DOM. With Fragments, you can return an array from Component render creating an invisible layer which ties its content together but will not render any container to actual DOM. Fragments can be created using the following four ways: Native Inferno API: createFragment(children: any, childFlags: ChildFlags, key?: string | number | null) JSX: <> ... </>, <Fragment> .... </Fragment> or <Inferno.Fragment> ... </Inferno.Fragment> createElement API: createElement(Inferno.Fragment, {key: 'test'}, ...children) Hyperscript API: h(Inferno.Fragment, {key: 'test'}, children) createRef API Refs provide a way to access DOM nodes or React elements created in the render method. You can now create refs using createRef() and attach them to React elements via the ref attribute. This new method allows you to write nicer syntax and reduces code when no callback to DOM creation is needed. forwardRef API forwardRef API allows you to “forward” ref inside a functional Component. This new method will be useful if you want to create a reference to a specific element inside simple functional Components. Forwarding ref means, automatically passing a ref through a component to one of its children. rerender With the help of the rerender method, all the pending setState calls will be flushed and rendered immediately. You can use it in the cases when the render timing is important or to simplify tests. New lifecycle Old lifecycle methods, componentWillMount, componentWillReceiveProps, or componentWillUpdate, will not be called when the new lifecycle methods, getDerivedStateFromProps or getSnapshotBeforeUpdate are used. What are the breaking changes? Since not all applications need server-side rendering, hydrate is now a part of the inferno-hydrate package. Style properties now use hyphen. For example, backgroundColor => background-color. In order to support JSX Fragment syntax, babel-plugin-inferno now depends on babel v7. setState lifecycle is changed to have better compatibility with ReactJS. Also, componentDidUpdate will now be triggered later in the lifecycle chain, after refs have been created. String refs are completely removed. Instead, you can use callback refs, createRef API, or forward Refs. Read the release notes of InfernoJS on its GitHub repository. Node.js v10.12.0 (Current) released The Ember project announces version 3.4 of Ember.js, Ember Data, and Ember CLI React Native 0.57 released with major improvements in accessibility APIs, WKWebView-backed implementation, and more!

Walt, an alternative syntax for WebAssembly text format, was introduced today. It allows developers to use JavaScript syntax to write to as “close to the metal” as possible. Its ultimate goal is to make WebAssembly accessible to regular JavaScript programmers. Written 100% in JavaScript it requires no LLVM/binary toolkits. What Walt tries to solve? Writing zero-overhead, optimized WebAssembly code is difficult. You need to write very plain C code, compile that to .wast and then optimize that result. Then, finally, you're ready to compile that into the final WebAssembly binary. Walt attempts to take C/Rust out of the equation and write “as close to the metal” as possible without losing readability. How it solves the problem? What Walt does is, it provides a thin layer of syntax sugar on top of .wat text format. This improved syntax will give developers direct control over the WebAssembly output. This means that there should be minimal to none post optimization to be done to the wast code generated. For example, here is what a .walt module, which exports a recursive Fibonacci function, looks like: Source: GitHub When this code is passed through the Walt compiler, you get a buffer which can be used to create a WebAssembly module with a fibonacci export. Al this is done with familiar JS syntax and without any external binary toolkits. What are some of its use cases? Anyone who is interested in WebAssembly but is not familiar with system languages can get a quick start with Walt. It can be used in the following scenarios: Web/Node libraries Games Web VR/AR Projects depending on heavy real-time computation from complex UIs to 3D visualizations To know more about Walt and how you can get started with it, check out its GitHub repository. Introducing Wasmjit: A kernel mode WebAssembly runtime for Linux Unity Benchmark report approves WebAssembly load times and performance in popular web browsers Why is everyone going crazy over WebAssembly?

Cross-platform app development is the rage now! And to add fuel to the fire, Xamarin has released its latest cross-platform toolkit upgrade. The latest stable release of Xamarin Forms 3 is here! Version 3 hosts new layout and styling updates to improve how developers build UI. These include updates to Visual State Manager, Flex Layout, Style Sheets, and Right-to-Left support to name a few. XAML compilation has also received specific attention with build times reduced by as much as 88% in some benchmarks. Let us look at each of the above features in detail. Visual State Manager Visual State Manager is now available in Xamarin Forms. The VSM provides a structured way to make visual changes to the user interface from code. The VSM introduces the concept of visual states. Visual states are collected in visual state groups. Developers can now define the various states for layouts and controls declaratively in XAML or C# and easily update their UI. The Xamarin.Forms Visual State Manager defines one visual state group named "CommonStates" with three visual states: Normal Disabled Focused FlexLayout FlexLayout is a new layout inspired by the web’s Flexbox. FlexLayout promotes flat, performant, and flexible UIs. It is ideal for handling distribution and spacing of content within layouts. It also provides control of the direction of layout, the justification, and alignment among other properties. FlexLayout defines six public bindable properties and five attached bindable properties that affect the size, orientation, and alignment of its child elements. StyleSheets Xamarin.Forms 3.0 introduces the ability to style an app using CSS. StyleSheets come in companionship with Flex Layouts. A style sheet consists of a list of rules, with each rule consisting of one or more selectors and a declaration block. They can be added as separate CSS files or inline with Resources. In Xamarin.Forms, CSS style sheets are parsed and evaluated at runtime, rather than compile time, and are re-parsed on use. Right-To-Left Localization Xamarin.Forms 3.0 are now equipped with FlowDirection property to make it easier to flip layouts to match language direction.  This is especially beneficial to Arabic and Hebrew scripts that flow from right-to-left. FlowDirection property apart from supporting right-to-left layouts also offers flexibility to customize layouts as seen fit by developers. Xamarin.Forms 3.0 is now available on NuGet. Read the full release notes for the list of entire bug fixes. Five reasons why Xamarin will change mobile development Hybrid Mobile apps: What you need to know Creating Hello World in Xamarin.Forms_sample

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

React Conf 2018 was held on October 25-26 in Henderson, Nevada USA. In this conference, the React team introduced Hooks, that allows you to use React without classes. On the second day, they spoke about time slicing, code-splitting, and introduced the React Cache and Scheduler APIs that we will see in the coming releases. Day 1: Unveiling Hooks React conf 2018 was kick-started by Sophie Alpert, Engineering Manager at Facebook. She highlighted that many big companies like Amazon, Apple, Facebook, Google are using React and that there has been a huge increase in npm downloads. React’s primary mission is to allow web developers to create great UIs. This is enabled by these three properties of React: Simplifying things that are difficult Focusing on performance Developer tooling But there are still few limitations in React that need to be addressed to achieve the mission React aims for. It doesn’t provide a stateful primitive that is simpler than class component. One of the earlier solutions to this was Mixins, but it has come to be known for introducing more problems than solving the problems. Here are the three limitations that were discussed in the talk: Reusing logic between multiple components: In React, sharing code is enabled by two mechanisms, which are higher-order components and render props. But to use them you will need to restructure your component hierarchy. Giant components: There are many cases when the components are simple but grow into an unmanageable mess of stateful logic and side effects. Also, very often we see the lifecycle methods ending up with a mix of unrelated logic. This makes it quite difficult to break these components into smaller ones because the stateful logic is all over the place. Confusing classes: Understanding classes in JavaScript is quite difficult. Classes in JavaScript work very differently from how they work in most languages. You have to remember to bind the event handlers. Also, classes make it difficult to implement hot-reloading reliably. In order to solve these problems in React, Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Hooks allows you to “hook into” or use React state and other React features from function components. The biggest advantage is that Hooks don’t work inside classes and let you use React without classes. Day 2: Concurrent rendering in React On day 2 of the React Conf, Andrew Clark spoke about concurrent rendering in React. Concurrent rendering allows developers to invest less time thinking about code, and focus more on the user experience. But, what exactly is concurrent rendering? Concurrent rendering can work on multiple tasks at a time, switching between them according to their priority. With concurrent rendering, you can partially render a tree without committing the result to the DOM. It does not block the main thread and is designed to solve real-world problems commonly faced by UI developers. Concurrent rendering in React is enabled by the following: Time Slicing The basic idea of time slicing is to build a generic way to ensure that high-priority updates don't get blocked by a low-priority update. With time slicing the rendered screen is always consistent and we don’t see visual artifacts of slow rendering causing a poor user experience. These are the advantages time slicing comes with: Rendering is non-blocking Coordinate multiple updates at different priorities Prerender content in the background without slowing down visible content Code-splitting and lazy loading with lazy() and Suspense You can now render a dynamic import as a regular component with the React.lazy() function.  Currently, React.lazy only supports default exports. You can create an intermediate module to re-export a module that uses named exports. This ensures that tree-shaking keeps working and that you don’t pull in unused components. By the time a component renders, we must show some fallback content to the user, for example, a loading indicator. This is done using the Suspense component. It is a way for components to suspend rendering while they load async data. It allows you to pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic. The latest React 16.6 comes with these two features, that is, lazy and Suspense. Hooks was recently released with React 16.7-alpha. In the coming releases, we will see two new APIs called React Cache and Scheduler. You can watch the amazing demos by the React developers, to understand these new concepts in more detail. React introduces Hooks, a JavaScript function to allow using React without classes React 16.6.0 releases with a new way of code splitting, and more! InfernoJS v6.0.0, a React-like library for building high-performance user interfaces, is now out