Tech News - Front-End Web Development

Reportedly, Google wants all the web developers to adopt the AMP approach for their websites. The AMP project was announced by Google on October 7, 2015 and AMP pages first became available to web users in February 2016. Nowadays, mobile search is getting more popular as compared to desktop search. It is important for web pages to appear in Google’s mobile search results, and this is why AMP is not optional for web publishers. Without AMP, a publisher’s articles will be extremely unlikely to appear in the Top Stories carousel on mobile search in Google. What is AMP? AMP is short for Accelerated Mobile Pages. As the name suggests, this open-source project aims to provide a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP consists of three components: AMP HTML: This component consists of regular HTML with some custom AMP properties. AMP JS: This component is responsible for fast rendering of your page. It implements all of AMP's best performance practices, manages resource loading, and provides the custom tags. AMP Cache: It is used to serve cached AMP HTML pages. It is a proxy-based content delivery network for delivering all valid AMP documents. Why are web developers annoyed with AMP? This is the part which infuriates developers, because they have to follow the rules set by Google. Developing a website in itself is a difficult job and on top of that AMP adds the extra burden of creating separate AMP versions of articles. Following are some of the rules that AMP pages need to follow: To avoid delay caused by JavaScript in page rendering, AMP only allows asynchronous JavaScript. Resources such as images, ads, or iframes should mention their size in the HTML to enable AMP to determine each element’s size and position before resources are downloaded. CSS must be inline and the upper limit for the size of inline style sheet is 50 kilobytes. All resource downloads are controlled by AMP. It optimizes downloads so that the currently most important resources are downloaded first and prefetches lazy-loaded resources. Web font optimization should be kept in mind as web fonts are super large. Google Search Console checks your AMP pages and shares feedback stating what all improvements you can make to better align it with the restrictions set by Google. It basically wants full equivalency between the regular website and the AMP versions of the pages. It is not very easy to follow these restrictive rules. Many developers feel they have to do all the work they already put in to build the normal version of the site all over again specifically for the AMP version. Instead of creating two different versions, developers would be forced to build the whole site in AMP. Why Google wants web developers to accept AMP? It's very rare to find websites that look good, have great performance, and fully follow the web standards. This becomes a huge challenge for search engines. Google's crawlers and indexers have to process a lot of junk to find and index content on the web. Website built entirely in AMP are fast to load, fast to crawl, easy to understand, and in short makes Google's life so much easier. One redditor stated in a long discussion thread, that the main problem is not “AMP” itself, but “Google treating it special” is. “The problems you're describing I believe are problems with implementation not AMP itself. The only issue I really have with AMP is actually that Google treats it special. If you treat it like a web framework where you write slightly different html and get lazy loading and tons of integrations as built in components for free, it's actually quite nice both for the user and for the programmer. The problems are that people want to put in all their normal functionality, continue trying to game SEO and ad revenue, and that Google wants to serve it themselves. If Google stopped trying to integrate AMP directly into their search results/CDN system, I'd be much more willing to support and use it. AMP itself is basically just a predefined set of web components and a limitation to not use taxing JS. You can even be partially AMP compliant and still leverage all the benefits with none of the negatives (including the fact that Google won't host it if you aren't fully compliant, I believe).” To know more on why Google wants developers to embrace AMP, read this article: Google AMP Can Go To Hell. If you are interested in reading about how AMP makes content loading quicker, check out this article: What is Google AMP and how does it work?. Like newspapers, Google algorithms are protected by the First amendment making them hard to legally regulate them Google launches a Dataset Search Engine for finding Datasets on the Internet Google Chrome’s 10th birthday brings in a new Chrome 69

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”

When Qt 5.11 was released last week, a technology preview of Qt for WebAssembly was released along with it, allowing developers to run Qt applications directly inside the browser window. WebAssembly is a brand-new technology that represents a paradigm shift in web development. Leveraging this technology web developers can write high-performance applications that can run directly in the browser. A common misconception about WebAssembly is that it will eventually replace JavaScript, but the fact is that it’s intended to be used alongside JavaScript. WebAssembly is nothing but a bytecode format which is executed in a web browser. This allows an application to be deployed to a device with a compliant web browser without going through any explicit installation steps. WebAssembly is now supported by all major web browsers as a binary format for allowing executable code in web pages that is nearly as fast as native machine code. Qt uses Emscripten, an open source LLVM to JavaScript compiler. Emscripten complies Qt applications so they can run in a web browser from a web server. Deploying applications on multiple platforms is a tedious task, with WebAssembly developers need to just compile and deploy on a web server for any platform that has a browser. This feature comes in handy especially for enterprise users with multiple clients who are using different platforms. These enterprises can use Qt for WebAssembly to compile their Qt or Quick app and deploy once. Adding support for WebAssembly is a huge step forward for Qt in order to become a truly cross-platform framework. The project is currently in beta and has been released as a technology preview. You can visit the official Qt blog for more information. Qt 5.11 has arrived! How to create multithreaded applications in Qt 3 ways to deploy a QT and OpenCV application

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?

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

Mozilla is constantly putting its efforts in developing new tools that ease the life of a data scientist. In March this year, it introduced Iodide, an experimental tool to create interactive documents using web technologies. And, yesterday, it has come up with another experimental tool called Pyodide to create a full Python data science stack that runs entirely in the browser. Why Pyodide is introduced? JavaScript, the most popularly-used web language, does not offer a mature suite of data science library. It also lacks a number of features for numerical computing such as operator overloading. Mozilla aims to change this and bring data science-related tools to JavaScript. Additionally, it is also argued that Python’s limitation of not being able to run in the browser can prove to be a threat to the language itself. Mozilla in the blog wrote, “with so much user interaction happening on the web or on mobile devices, it needs to work there or be left behind.” What is Pyodide? Pyodide provides a full, standard Python interpreter, which runs entirely in the browser. It has full access to all the APIs that a browser provides. While it is closely related to the Iodide project, Pyodide can also be used standalone in any context you want to run Python inside a web browser. Here’s an example of what you can do with this tool. This example shows a 3D plot of the density of calls to the City of Oakland, California “311” local information service. Here the data loading and processing is performed in Python. The plotting is taken care off by WebGL, a JavaScript API for rendering 2D and 3D graphics within a compatible web browser. Source: Mozilla For creating Pyodide, the team has used the source code of the mainstream Python interpreter, CPython and the scientific computing packages such as NumPy. They did some small set of changes to make these tools work in the new environment. And, finally, the code was compiled to WebAssembly using Emscripten’s compiler. Pyodide enables you to fetch things over the network using the browser’s APIs and will come with support for threading in the near future. However, there is very less chance that it will ever support features such as low-level networking sockets because of the browser’s security sandbox. Some of the big legends in Python have appreciated this project: https://twitter.com/gvanrossum/status/1118733186253479936 https://twitter.com/pwang/status/1118753387967909888 To know more in detail, check out the official announcement by Mozilla. Mozilla and Google Chrome refuse to support Gab’s Dissenter extension for violating acceptable use policy Mozilla developers have built BugBug which uses machine learning to triage Firefox bugs Mozilla introduces Iodide, a tool for data scientists to create interactive documents using web technologies  

Microsoft has acquired GitHub in a major deal worth $7.5 billion. Not only has this put the open source community in a frenzy, but has also opened up different options for the developers and programmers who don’t want to share their project and code details with Microsoft. There is a history to this particular behavior of the open source community towards Microsoft. Firstly let’s reframe the question - what is the fear that’s causing the migration? Microsoft has this well known habit of acquiring promising open source projects and then slowly letting them die. They even had a name for the strategy: ‘Embrace, Extend, Extinguish’. That’s a key reason, open source developers dread Microsoft. The other factor for the fear is Microsoft’s history of using their patents to sue open source projects. These are some reasons the open source developers have traditionally avoided Microsoft and their products for a long time.   The other side of the argument is that Microsoft is not the same company as it used to be in terms of their approach to open source mainly due to the change in their leadership team. Their present focus has also shifted from operating systems to the cloud, building Azure solutions, and promoting office 365. They have recently open sourced their scripting language powershell in an attempt to lure the open source developers under the organizational umbrella. In lesser words, Microsoft is trying for an image makeover and their GitHub deal might be yet another attempt to give the open source developers a bigger umbrella and more resources to develop production ready applications.   Whatever’s the actual reason, it’s pretty clear what’s on Open Source developers’ minds. As per the latest tweet from GitLab, the rate of new repositories being added to GitLab has increased significantly since Monday - the 4th of June. The snapshot below shows the spike in posting new repositories in Gitlab.   The trends of both Github and Gitlab have also spiked since the buying out news broke and that clearly shows that there is a huge spike in chatter regarding this. GitLab itself had started pushing a trend called #movingtogitlab  and because of the incoming traffic reaching exceptionally high volume, their servers also crashed for a brief period of time. Gitlab had posted the video tutorial called “Migrating from GitHub to GitLab” on the 3rd of June which has already reached 22.5k views which clearly shows that there have been 20k people at least who have tried to export their GitHub project to GitLab. Having said that let’s take a look at the number of active users for both of these platforms. While GitHub has around 24 million active users, GitLab is at a mediocre 100k. So the exodus of a few thousand might not make a significant dent on GitHub’s user base.   On one hand, the markets have rejoiced over the news of the Microsoft acquisition of Github boosting Microsoft’s stock prices well above 101 USD. On the other hand, the overall feeling towards this acquisition has been quite pessimistic among the developer community to say the least. This deal still has to go through regular auditing to check whether the norms for standard acquisition were followed and other details. The completion of this deal will happen only around December 2018 and the question remains whether Microsoft will be getting the same GitHub that they bought and what will this deal mean for Gitlab. The question on everyone’s mind right now is will Microsoft act as Github’s owner or steward? Will GitHub become the de facto leader for code sharing and pioneer in open source development? Or will other tools like GitLab, Sourceforge, Bitbucket take advantage of the situation and come to the forefront? The most interesting and positive thing to emerge from this scenario would be if Microsoft itself comes across as a leader in open source projects which would mean more funds and resources for useful and viable tech research and development and probably a brighter future for the tech world. Microsoft is going to acquire GitHub 10 years of GitHub Is Comet the new Github for Artificial Intelligence?

Yesterday, the Svelte community announced the stable release of Svelte 3. In this version, the team has worked towards moving reactivity into the language. Developers will now be able to write components in Svelte with significantly less boilerplate. Svelte is a component framework, similar to JavaScript frameworks such as React and Vue, but comes with an important difference. In the case of traditional frameworks, the major part of the work happens in the browser. On the other hand, Svelte shifts this work into a compile step that happens at the time when your app is built. Instead of relying on techniques like virtual DOM diffing, with this framework, you can write code that surgically updates the DOM when the app state changes. Rich Harris, the Svelte developer, says Svelte aims to be more like spreadsheets. “Spreadsheets are pretty cool and we should be more like them...Wouldn’t it be wonderful if the tools we use to build the web becomes as accessible as spreadsheets are? And, that is one of the Svelte’s overriding goals to make web development accessible...” What’s new in Svelte 3? With the introduction of hooks to React, many other frameworks also started to experiment with their own implementation of hooks. However, Svelte realized that ‘hooks’ was not the “direction they wanted to go in.” Explaining the reason behind not implementing hooks, Harris said, “Hooks have some intriguing properties, but they also involve some unnatural code and create unnecessary work for the garbage collector. For a framework that's used in as well as animation-heavy interactives, that's no good.” Because of these reasons, the team has reached the conclusion that Svelte does not require any API and has chosen to go with no API at all. “We can just use the language,” shared Harris. Not only just components, but the team has also given a completely new look and feel to Svelte in this release. They have also updated the logo, website, and also updated their tagline from 'The magical disappearing UI framework' to 'Cybernetically enhanced web apps'. To know more detail, check out the official announcement by Svelte. Applying Modern CSS to Create React App Projects [Tutorial] React Native development tools: Expo, React Native CLI, CocoaPods [Tutorial] React Native 0.59 is now out with React Hooks, updated JavaScriptCore, and more!

Babel 7 has been released after 3 years of wait after Babel 6. Babel is a JavaScript compiler. It is mainly used to convert ECMAScript 2015+ code into a backward compatible version of JavaScript. Babel gives developers the freedom to use the latest JavaScript syntax without developers worrying about backward compatibility. It has been going strong in the Javascript ecosystem. There are currently over 1.3 million dependent repos on GitHub, 17 million downloads on npm per month, and hundreds of users including many major frameworks (React, Vue, Ember, Polymer), and companies (Facebook, Netflix, Airbnb).   Major Breaking Changes All major changes can be done automatically with the new babel-upgrade tool. babel-upgrade is a new tool that automatically makes upgrade changes: currently with dependencies in package.json and .babelrc config. Drop support for un-maintained Node versions: 0.10, 0.12, 4, 5 Introducing @babel namespace to differentiate official packages, so babel-core becomes @babel/core. Deprecation of any yearly presets (preset-es2015, etc). Dropped the "Stage" presets (@babel/preset-stage-0, etc) in favor of opting into individual proposals. Some packages have renames: any TC39 proposal plugin will now be -proposalinstead of -transform. So @babel/plugin-transform-class-properties becomes @babel/plugin-proposal-class-properties. Introduced a peerDependency on @babel/core for certain user-facing packages (e.g. babel-loader, @babel/cli, etc). Typescript and JSX fragment support Babel 7 now ships with TypeScript support. Babel will now get the benefits of TypeScript like catching typos, error checking, and fast editing experiences.  It will enable JavaScript users to take advantage of gradual typing. Install the Typescript plugin as npm install --save-dev @babel/typescript The JSX fragment support in Babel 7 allows returning multiple children from a component’s render method. Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM. Speed improvements Babel 7 includes changes to optimize the code as well as accept patches from the v8 team. It is also part of the Web Tooling Benchmark alongside many other great JavaScript tools. There are changes to the loose option of some plugins. Moreover transpiled ES6 classes are annotated with a /*#__PURE__*/ comment that gives a hint to minfiers like Uglify and babel-minify for dead code elimination. What’s Next There are a lot of new features in the works: plugin ordering, better validation/errors, speed, re-thinking loose/spec options, caching, using Babel asynchronously, etc. You can check out the roadmap doc for a more detailed version. These are just a select few updates. The entire changes are available on the Babel blog. TypeScript 3.0 is finally released with ‘improved errors’, editor productivity and more The 5 hurdles to overcome in JavaScript Tools in TypeScript  

Yesterday, the team at TensorFlow introduced TensorFlow Graphics. A computer graphics pipeline requires 3D objects and their positioning in the scene, and a description of the material they are made of, lights and a camera. This scene description then gets interpreted by a renderer for generating a synthetic rendering. In contrast, a computer vision system starts from an image and then tries to infer the parameters of the scene. This also allows the prediction of which objects are in the scene, what materials they are made of, and their three-dimensional position and orientation. Developers usually require large quantities of data to train machine learning systems that are capable of solving these complex 3D vision tasks.  As labelling data is a bit expensive and complex process, so it is better to have mechanisms to design machine learning models. They can easily comprehend the three dimensional world while being trained without much supervision. By combining computer vision and computer graphics techniques we get to leverage the vast amounts of unlabelled data. For instance, this can be achieved with the help of analysis by synthesis where the vision system extracts the scene parameters and the graphics system then renders back an image based on them. In this case, if the rendering matches the original image, which means the vision system has accurately extracted the scene parameters. Also, we can see that in this particular setup, computer vision and computer graphics go hand-in-hand. This also forms a single machine learning system which is similar to an autoencoder that can be trained in a self-supervised manner. Image source: TensorFlow We will now explore some of the functionalities of TensorFlow Graphics. Object transformations Object transformations are responsible for controlling the position of objects in space. The axis-angle formalism is used for rotating a cube and the rotation axis points up to form a positive which leads the cube to rotate counterclockwise. This task is also at the core of many applications that include robots that focus on interacting with their environment. Modelling cameras Camera models play a crucial role in computer vision as they influence the appearance of three-dimensional objects projected onto the image plane. For more details about camera models and a concrete example of how to use them in TensorFlow, check out the Colab example. Material models Material models are used to define how light interacts with objects to give them their unique appearance. Some materials like plaster and mirrors usually reflect light uniformly in all directions. Users can now play with the parameters of the material and the light to develop a good sense of how they interact. TensorBoard 3d TensorFlow Graphics features a TensorBoard plugin to interactively visualize 3d meshes and point clouds. Through which visual debugging is also possible that helps to assess whether an experiment is going in the right direction. To know more about this news, check out the post on Medium. TensorFlow 1.13.0-rc2 releases! TensorFlow 1.13.0-rc0 releases! TensorFlow.js: Architecture and applications  

In January this year, Brave announced that it is previewing its new advertising feature, Brave Ads. It opened this feature to all users of its desktop browser for macOS, Windows, and Linux yesterday. Brave Ads is an opt-in digital advertising feature built with user privacy in mind. https://twitter.com/brave/status/1121081425254473728 Previously, we have seen many pay-to-surf sites, but most of them eventually disappeared because of the dot-com bubble. However, Brendan Eich, the CEO, and co-founder of Brave software is pretty confident about his plan. He said, “With Brave Ads, we are launching a digital ad platform that is the first to protect users’ data rights and to reward them for their attention.” He further adds, “Brave Ads also aims to improve the economics and conversion of the online advertising industry, so that publishers and advertisers can thrive without the intermediaries that collect huge fees and that contribute to web-wide surveillance. Privacy by design and no tracking are integral to our mission to fix the Web and its funding model.” Brave is working with various ad networks and brands to create Brave ads catalog inventory. These catalogs are pushed to available devices on a recurring basis. The ads for these catalogs are supplied by Vice, Home Chef, Ternio BlockCard, MyCrypto, eToro, BuySellAds, TAP Network, AirSwap, Fluidity, and Uphold. How Brave Ads work? Brave is based on Chromium that blocks tracking scripts and other technologies that spy on your online activity. So advertisements are generally not shown by default when one uses the Brave browser. Now, Brave Ads puts users in control by allowing them to decide how many ads they would like to see. It ensures user privacy by doing ad matching directly on the users’ device so that their personal data is not leaked to anyone. Out of the revenue generated by viewing these ads, users will get a 70% share and the remaining 30% will go to Brave. This 70% percent cut is estimated to be about $5 per month according to Eich. Users will be paid with Brave’s bitcoin-style "cryptocurrency” called Basic Attention Tokens (BAT). Users can claim these tokens at the close of every Brave Rewards monthly cycle. To view Brave Ads, users are required to enable Brave Rewards by going to the Brave Rewards “setting” page (brave://rewards/). Those who are already using Brave Rewards will get a notification screen to enable this feature. Once a user opts into Brave Rewards, they are presented with offers in the form of notifications. When users click on these notifications, they will be directed to a full page ad in a new ad tab. Right now, users can auto-contribute their earned rewards to their favorite websites or content creators. The browser will soon allow users to use BAT for premium content and also redeem it for real-world rewards such as hotel stays, restaurant vouchers, and gift cards. It also plans to bring an option that will let users convert their BAT into local fiat currency through exchange partners. Brave Ads have received a very mixed reaction from the users. While some compare its advertising model with that of YouTube, others think that the implementation is unethical. One user on Reddit commented, “This idea is very interesting. It reminds me of how YouTube shares their ad revenue with content creators, and that in turn grows YouTube's network and business...The more one browsed or shared of their data, the more one would get paid. It's simple business.” A skeptical user said, “I'm a fan of Brave's mission, and the browser itself is great (basically Chromium but faster), but the practice of hiding publisher's ads but showing their own, which may or may not end up compensating the publisher, seems fairly unethical.” For more details, check out the official announcement by Brave. Brave introduces Brave Ads that share 70% revenue with users for viewing ads Brave Privacy Browser has a ‘backdoor’ to remotely inject headers in HTTP requests: HackerNews Brave 0.55, ad-blocking browser with 22% faster load time and is generally available and works on Chromium

Last week, the Firefox DevTools Debugger team shared the recent updates in Firefox DevTools to make debugging of modern apps more consistent. They have also worked on making the debugger more predictable and capable of understanding common tools in web development like webpack, Babel, and TypeScript. These updates are ready for trying out in Firefox 67, which is planned to be released tomorrow (May 21). The team also shared that Firefox 68 will come with a more “polished” version of these features. https://twitter.com/FirefoxDevTools/status/1129066199017353216 Today, every browser comes with a powerful suite of developer tools that allows you to easily inspect and debug your web applications. These tools enable you to do a bunch of things like inspecting currently-loaded JavaScript, editing pages on-the-fly, quickly diagnosing problems, and more. The Firefox team has introduced many improvements and updates to these tools and here are some of the highlights: Revamped source map support Source maps provide a way to keep your client-side code readable and debuggable even after combining and minifying it. The new debugger comes with revamped support for source maps that now “perfects the illusion that you’re debugging your code, not the compiled output from Babel, Webpack, TypeScript, vue.js, etc.” To help developers generate correct source maps, the team and the community has contributed patches to build tools like Babel, a JavaScript compiler and configurable transpiler. Predictable breakpoints for effortless pausing and stepping This improved debugger architecture solves several issues that developers were commonly facing like lost breakpoints, pausing in the wrong script, or stepping through pretty-printed code. Now, they will also be able to easily debug minified scripts, arrow functions, and chained method calls with the help of inline breakpoints. Console debugging with logpoints Developers often resort to console logging (using console.log statements for printing messages to the console) when they want to quickly observe their program’s flow without having to pause the execution. However, this way of debugging can become quite tedious. This is why starting from Firefox 67, developers will have a new breakpoint called ‘logpoint’ that dynamically injects ‘console.log()’ statements into your running application. Better debugging for JavaScript Workers A web worker is a script that runs in the background without having any effect on the main execution thread of a web application. It takes care of all the laborious processing allowing the main thread to run without being slowed down. Firefox will now come with an updated Threads panel through which you will be able to switch between contexts and also independently pause different execution contexts. This will allow workers and their scripts to be debugged within the same Debugger panel. These were some of the highlights from the long list of updates and improvements. Check out the official announcement by Mozilla to know more in detail. Mozilla developers have built BugBug which uses machine learning to triage Firefox bugs Mozilla adds protection against fingerprinting and Cryptomining scripts in Firefox Nightly and Beta Mozilla is exploring ways to reduce notification permission prompt spam in Firefox

Looks like Brave has also jumped on the bandwagon of writing or rewriting its components in the Rust programming language. Yesterday, its team announced that they have reimplemented its ad-blocker in Rust that was previously written in C++. As a result, the ad-blocker is now 69x faster as compared to the current engine. The team chose Rust as it is a memory-safe and performant language. The new ad-blocker implementation can be compiled to native code and run within the native browser core. It can also be packaged in a standalone Node.js module. This reimplemented version is available on Brave’s  Dev channel and Nightly channel. How does this new ad-blocking algorithm work? The previous ad-blocking algorithm relied on the observation that most of the requests were passed through without blocking. It used the Bloom filter data structure that tracks fragments of requests that may match and rules out those that do not. The new implementation is based on uBlock Origin and Ghostery’s ad-blocking approach, which is tokenization specific to add-block rule matching against URLs and rule evaluation optimized to the different kinds of rules. What makes this new algorithm faster is that it quickly eliminates any rules that are not likely to match a request from search. “To organize filters in a way that speeds up their matching, we observe that any alphanumeric (letters and numbers) substring that is part of a filter needs to be contained in any matching URL as well,” the team explained. All these substrings are hashed to a single number that results in a number of tokens. The tokens make matching much easier and faster when a URL is tokenized in the same way. The team further wrote, “Even though by nature of hashing algorithms multiple different strings could hash to the same number (a hash collision), we use them to limit rule evaluation to only those that could possibly match.” If a rule has a specific hostname, it is tokenized too. If a rule contains a single domain option, the entire domain is hashed as another token. Performance gains made by the reimplementation For the performance evaluation, the team has used the dataset published with the Ghostery ad-blocker performance study that includes 242,945 requests across 500 popular websites. The new ad-blocker was tested against this dataset with different ad-block rule lists including the biggest one: EasyList and EasyPrivacy combined.  The team performed all the benchmarks on the adblock-rust 0.1.21 library. They used a 2018 MacBook Pro laptop with 2.6 GHz Intel Core i7 CPU and 32GB RAM. Following are performance gains this new ad-blocker showed: The new algorithm with its optimized set of rules is 69x faster on average as compared to the current engine. When tested with the popular filter list combination of EasyList and EasyPrivacy, it gave a “class-leading performance of spending only 5.7μs on average per request.” It already supports most of the filter rule syntax that has evolved beyond the original specification. This will enable the team to handle web compatibility issues better and faster. The browser does some of the work that can be helpful to the ad-blocker. This further reduces the overheads resulting in an ad-blocker with the best in class performance. Head over to Brave’s official website to know more in detail. Edge, Chrome, Brave share updates on upcoming releases, recent milestones, and more at State of Browsers event Brave introduces Brave Ads that share 70% revenue with users for viewing ads Chromium-based Brave browser shows 22% faster page load time than its Muon-based counterpart  

Google’s decision to hide the special-case subdomains, “www” and “m” in Chrome M69 received a huge backlash from the public last year. Following this backlash, the Chrome team did roll back the change. However, this Wednesday the team announced that they are planning to hide “https” and “www” in Chrome omnibox on desktop and Android in M76. In other news, the team is splitting the HTTP cache to prevent side-channel leakage. Chrome to hide https and www from URLs Citing the reason behind reaching this conclusion, the Chrome team said that it is to improve the “simplicity, usability, and security of UI surfaces.” With this change, the team aims to hide away all the distractions and make URLs easier to read and understand for users. Emily Schechter, Product Manager, Chrome Security at Google, wrote on Chromium Issue tracker, “In Sept 2018, we rolled out a change to hide special-case subdomains “www” and “m”. Per my above message on this thread, we rolled back these changes, and announced our intent to re-ship an adjusted version: we will hide “www” but not “m”.” She added, “For several months, we’ve had this version enabled in our Canary, Dev and Beta channels and are confident that it is ready to be enabled in the Stable channel as well.” The Chrome team, together with other browser representatives, has also added a “Simplify non-human-readable or irrelevant components” section in the web URL standard. The section recommends browsers to omit components that can “provide opportunities for spoofing or distract from security-relevant information.” The team has also built an extension named Suspicious Site Reporter for Chrome using which you can identify suspicious sites and report them to Safe Browsing. With this extension, users will be able to see the full URL with no scheme or subdomain hiding. You can also see the full URL by clicking twice in the URL bar on the desktop, and once on mobile. What the public thinks about this change Users have pretty mixed feelings about this update. While some think that this is a step towards making Google a monopoly, others believe that this does simplify URLs for non-technical users. Expressing their concern on Hacker News, a user said, “...these "improvements" in Chrome are meant to make google the defacto interface for using the web. Imagine a world where 99% of users do not have any concept of URLs or any other fundamental WWW concepts. Instead, they open Chrome type whatever they want and get the results.” Some users also highlighted that this update could raise security concerns as well. “Let's assume that you have a blog platform offering subdomains for each user and 'm.blogplatform.com' is available. Now, any user can get that subdomain and impersonate the homepage because Emily from Chromium decided that eliding parts of the URL without any spec is a reasonable decision,” a user added. Apple’s browser, Safari also only shows the domain and lock icon to indicate the legitimacy of a website’s certificate. Since Apple did not receive this amount of user backlash, some felt that the backlash is just the result of people losing trust in the big tech. A user commented, “...collective shrug when Apple hides the URL, but if Google does so we get huge outrage and assumptions that this must clearly be done primarily for malicious reasons.” You can read the full conversation about this update on Chromium’s bug tracker. Chrome to split the HTTP Cache to prevent cross-origin leakage Currently, the HTTP cache stores resources for each of its entries in a single bucket, which is shared among the origins. So, when loading the same resource these origins will refer to the same cache entry. This can lead to a side-channel attack in which a site can detect whether another site has loaded a resource by going through the cache. To prevent this attack, the Chrome team is planning to partition the HTTP cache by the origin of the page’s top-frame. You can read more about this update on the Chrome Platform Status site. Edge, Chrome, Brave share updates on upcoming releases, recent milestones, and more at State of Browsers event Google plans to remove XSS Auditor used for detecting XSS vulnerabilities from its Chrome web browser Cloud Next 2019 Tokyo: Google announces new security capabilities for enterprise users

Another “code playground” Electron Fiddle comes into the market for enabling developers create, share, and play with small Electron experiments. Electron Fiddle attempts to bring this “fiddling effect” to Electron, a framework for creating cross-platform native applications with web technologies like JavaScript, HTML, and CSS. It provides you with a quick-start template - just change few things, choose the Electron version you want to run it with, and play around. It also gives you an option of saving it as GitHub Gist or to a local folder and anyone can try your Fiddle by just entering it in the address bar. How Electron Fiddle works? 1. Each Fiddle has three files: A Main script A renderer script An HTML file Source: GitHub 2. Choose an Electron Version: Electron Fiddle knows about all released Electron versions. Open the Preferences window to see all available versions, download them and delete the ones which you don’t need. Source: GitHub 3. Run your Fiddle: Hit the RUN button to give your Fiddle a try and start it. Source: GitHub 4. Share your Fiddle: Save your Fiddle as a public GitHub Gist - this will allow other users to load it by pasting the URL into the address bar. If they don't have Electron Fiddle, they can see and download your code directly from GitHub. Source: GitHub You can also package your Fiddle as a standalone binary or as an installer from the Tasks menu: Source: GitHub What are the features it comes with? A good coding experience It uses Monaco Editor by Microsoft, which also powers VS Code, giving users the common benefits of a modern code editor: Code highlighting Basic JavaScript error checking Refactoring Auto-completion Share your work with the community If you are eager to share your work or a bug with the Electron community, you can do that just with a click of a button. To make your Fiddle accessible to those who do not have Electron Fiddle installed, you can share it as a GitHub Gist. Compile and package your Fiddle as an app   With the help of Electron Forge, a command line interface for Electron applications, you can turn your Fiddles into binaries and share it as a app for Windows, macOS, or Linux. A good starting point, continue anywhere you like If you have just started using Electron, Electron Fiddle provides you with a basic introduction of the Fiddle and usage examples for every single Electron APIs. You can export your project with or without electron-forge and then use your favorite editor for further development. With an easy installation process you can start using and experimenting with Electron Fiddle now! You can download it from its GitHub repository. To know more, refer to the announcement on Medium by Felix Rieseberg. HTML5 and the rise of modern JavaScript browser APIs [Tutorial] How to build a weather app using Kotlin for JavaScript Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more