Tech News - Front-End Web Development

DuckDuckGo, an internet privacy company, empowers users to seamlessly take control of their personal information online, without any tradeoffs. DuckDuckGo doesn’t store IP addresses and doesn’t create unique cookies. It doesn’t even collect or share any type of personal information. The Improvements Lately, the company came up with some improvements. If you ever happen to search for  DuckDuckGo, you might have come across a "&atb=" URL parameter in the web address at the top of your browser. This parameter allows DuckDuckGo to anonymously  A/B (split) test product changes. To explain this further, let’s take, for example, users in the A group would get blue links and users in the B group would get red links. From this, it would be easier for the team at DuckuckGo to measure how the usage of DuckDuckGo has been impacted by different color links. The team at DuckDuckGo also measures the engagement of specific events on the page (e.g. A misspelling message is displayed, when it is clicked). It allows them to run experiments where they can test different misspelling messages and use CTR (click through rate) to determine the message's efficacy. The requests made for improving DuckDuckGo are anonymous and the information is used only for improving the products. Similar "atb.js" or "exti" requests are made by browser extensions and mobile apps. The browser extensions and mobile apps will only send one type of these requests a day. This means an approximate count of the devices which accessed DuckDuckGo can be known. But this would be done without knowing anything about those devices or the searches made by users. These requests are all fully encrypted, such that nobody else can see them except for DuckDuckGo. There is no personal information attached to the request. So, DuckDuckGo cannot ever tell what individual people are doing since everyone is anonymous. The team has developed systems from scratch, instead of relying on third-party services. This is how they stick to their privacy promise of not collecting and leaking any personal information. This move by the company centered around anonymity might benefit a lot to the company, as data breach incidents on various organizations are trending lately.  With the daily searches crossing the 30 million mark, the company has already experienced 50% growth in the last year. These improvements prove to be cherry on the cake! Could DDG possibly pose a real threat to the leading search engine, Google? Read more about this news on the official website of DuckDuckGo. 10 great tools to stay completely anonymous online Google’s prototype Chinese search engine ‘Dragonfly’ reportedly links searches to phone numbers Google launches a Dataset Search Engine for finding Datasets on the Internet

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?

The 6th Chrome Dev Summit 2018 is being hosted on the 12th and 13th of this month in San Francisco. Yesterday, Day 1 of the summit was opened by Ben Galbraith, the director of Chrome, to talk about “the web platform’s latest advancements and the evolving landscape.” Leading web developers described their modern web experiences as well. Major Chrome Dev Summit 2018 announcements included web.dev, a new developer resource website, and a demonstration of VisBug, a browser-based visual development tool. The summit also included a demo of a new web tool called Squoosh that can downsize, compress, and reformat images. The Chrome Dev Summit 2018 also highlighted some of the browser APIs currently in development, including Web Share Target, Wake Lock, WebHID and more. It also featured a Writable File API currently under development, which would allow web apps to edit local files. New web-based tools and resources web.dev The web.dev resource website provides an aggregation of information for modern Web APIs. It helps users monitor their sites over time to ensure that they can keep their site fast, resilient and accessible. web.dev is created in partnership with Glitch, and has a deep integration with Google’s Lighthouse tool. VisBug Another developer tool VisBug helps developers easily edit a web page using a simple point-and-click and drag and drop interface. This is an improvement over Firebug, Google’s previous tool, which used the website’s source code. VisBug is currently available as a Chrome extension that can be installed from the main Chrome Web Store. Squoosh The Squoosh tool allows you to encode images using best-in-class codecs like MozJPEG, WebP, and OptiPNG. It works cross-browser and offline, and ALL codecs supported even in a browser with no native support using WASM. The app is able to do 1:1 visual comparison of the original image and its compressed counterpart, to help users understand the pros and cons of each format. Closing the gap between web and native Google is also taking initiatives to close the gap between the web and native and make it easy for developers to build great experiences on the open web. Regarding this, Chrome will work with other browser vendors to ensure interoperability and get early developer feedback. Proposals will be submitted to the W3C Web Incubator Community Group for feedback. According to Google, this open development process will be “no different than how we develop every other web platform feature.” The first initiative in this aspect is the writable files API. The Writable Files API Currently, under development, the writable files API is designed to increase the interoperability of web applications with native applications. Users can choose files or directories that a web app can interact with on the native file system. They don’t have to use a native wrapper like Electron to ship their web app. With the Writable Files API, users can create a simple, single file editor that opens a file, allows the user to edit it, and save the changes back to the same file. People were surprised that it was Google who jumped on this process rather than Mozilla which has already implemented version of a lot of these APIs. A hacker news user said, “I guess maybe not having that skin in the game anymore prevented those APIs from becoming standardized? But these are also very useful for desktop applications. Anyways, this is a great initiative, it's about time a real effort was made to close that gap.” Here’s a video playlist of all the Chrome Dev Summit sessions so far. Tune into Google’s livestream to follow the rest of the sessions of the day and watch this space for more exciting announcements. 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. #GoogleWalkout demanded a ‘truly equitable culture for everyone’; Pichai shares a “comprehensive” plan for employees to safely report sexual harassment

Last week, the Mozilla Gfx team announced that WebRender is now in beta. It is not yet released because of some blocking bugs. WebRender is an experimental renderer for Servo that draws web content like a modern game engine. It consists of a collection of shaders that very closely matched CSS properties. Though WebRender is known for being extremely fast, its main focus is on making rendering smoother. It basically changes the way the rendering engine works to make it more like a 3D game engine. What are the WebRender and Gecko changes? In order to save GPU memory, the sizing logic to render targets is now more efficient. It comes with improved tooling to synchronize between the WebRender and Gecko repositories. Many incremental changes towards picture caching including batch caching based on z id rather than prim index, removing PrimitiveMetadata struct, and many more. A proper support for using tiled images as clip masks. A texture corruption issue after resuming from sleep on Linux with proprietary Nvidia drivers is fixed. A flickering issue at startup on Windows is fixed. The backface-visibility bugs are fixed. The z-fighting glitch with 3D transforms is fixed. A font leak on Windows is fixed. In the future, we will see more improvements in memory usage, the interaction between blob images and scrolling, and support for WebRender in Firefox for Android. You can enable WebRender in FireFox Nightly by following these steps: In about:config set “gfx.webrender.all” to true. After configuring restart Firefox. Read the official announcement on the Mozilla Gfx team blog. Mozilla updates Firefox Focus for mobile with new features, revamped design, and Geckoview for Android Developers of Firefox Focus set to replace Android’s WebView with GeckoView Mozilla optimizes calls between JavaScript and WebAssembly in Firefox, making it almost as fast as JS to JS calls

Yesterday, Brave, the company co-founded by ex-Mozilla CEO, Brendan Eich, launched version 1.0 of its browser for Windows, macOS, Linux, Android and iOS. In a browser market where users have to compromise on their privacy, Brave is positioning itself as a fast option that preserves users’ privacy with strong default settings, as well as a crypto currency-centric private ads and payment platform that allows users to reward content creators. “Surveillance capitalism has plagued the Web for far too long and we’ve reached a critical inflection point where privacy-by-default is no longer a nice-to-have, but a must-have. Users, advertisers, and publishers have finally had enough, and Brave is the answer. Brave 1.0 is the browser reimagined, transforming the Web to put users first with a private, browser-based ads and payment platform. With Brave, the Web can be a rewarding experience for all, without users paying with their privacy.” said Brendan Eich, co-founder and CEO of Brave Software. “Either we all accept the $330 billion ad-tech industry treating us as their products, exploiting our data, piling on more data breaches and privacy scandals, and starving publishers of revenue; or we reject the surveillance economy and replace it with something better that works for everyone. That’s the inspiration behind Brave,” he added. The company also announced last month that Brave has about 8 million monthly active users. Brave offers a privacy-first approach to its users that natively blocks trackers, invasive ads, and device fingerprinting. This leads to substantial improvements in speed, privacy, security, performance, and battery life. It has default settings to block phishing, malware, and malvertising. Embedded plugins, which have proven to be an ongoing security risk, are disabled by default in Brave. Browsing data always stays private and on the user’s device, which means Brave will never see or store the data on its servers or sell user data to third-parties. Brave 1.0 key features Additionally Brave 1.0 offers some unique features to its users: Brave Rewards program to fund open web – By activating Brave Reward, users can support their favorite publishers and content creators and integrate Brave wallet on both desktop and mobile. This feature allows users to send Basic Attention Tokens (BAT) as tips for great content, either directly as they browse or by defaulting to recurring monthly payments to continuously support websites you visit frequently. There are over 300,000 verified websites on-boarded on Brave for this program including The Washington Post, The Guardian, Wikipedia, YouTube, Twitch, Twitter, GitHub and more. Brave Ads compensate users for their attention – Brave has a new blockchain-based advertising model that enables privacy and gives 70% of its revenue share in the form of Basic Attention Tokens (BAT) to users who view the Brave ads. These ads are a part of private ad network and Brave Rewards program. It allows users to opt-in to view relevant privacy-preserving ads in exchange for earning BAT. When users opt into Brave Rewards, Brave ads are enabled by default. As per the content viewed by a user, ad matching happens directly on the user’s device, so their data is never sent to anyone, and they see rewarding ads without mass surveillance. Users can also transfer their earned BAT from the wallet and convert into digital assets and fiat currencies, but they need to complete the verification process with Uphold, a digital money platform. Brave Shields for automatic ad and tracker blocking – Brave Shields, this feature is enabled by default and is customizable from the address bar. It blocks invasive third-party ads, trackers, and autoplay videos immediately – without needing to install any additional programs. On Hacker News, users have appreciated the way Brave browser operates and rewards its content consumers as well as the creators. One of them has explained its functioning in detail, “I've been using Brave rewards, both as a user and a content maker. It's really great, and I feel this may be a reasonable alternative to the invasive trackers+ads we have today. For the uninitiated, Brave lets users opt-in to Brave rewards: - You set your browser to reward content creators with Basic Attention Token (BAT). You set a budget (e.g. 10 BAT/month), and Brave distributes it the sites you use most, e.g. if you watch a particular YouTube channel 30% of your browsing time, it will send 30% of 10 BAT each month to that content creator. - As a user, you can get paid in BAT. You tell Brave if you're willing to see ads, and how often. If so, you get paid in BAT, which you can then distribute to content creators. Brave ads are different: rather than intrusive in-page ads, Brave ads show up as a notification in your operating system outside of the page. This prevents slow downs of the page, keeping your browsing focused, while still allowing support of content creators. And of course, Brave ads are optional and opt-in.” You can download Brave for free, by visiting official Brave page, Google Playstore or the App Store. Google is circumventing GDPR, reveals Brave’s investigation for the Authorized Buyers ad business case Brave ad-blocker gives 69x better performance with its new engine written in Rust Edge, Chrome, Brave share updates on upcoming releases, recent milestones, and more at State of Browsers event Brave launches its Brave Ads platform sharing 70% of the ad revenue with its users Brave Privacy Browser has a ‘backdoor’ to remotely inject headers in HTTP requests: HackerNews

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  

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”

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

Last week, Mozilla disclosed the winners of Mozilla Research Grants for the first half of 2019. Among the winning proposals was “Bringing Julia to the Browser” that aligns with Mozilla’s goal to bring data science and scientific computing tools to the browser. Mozilla had said it was specifically interested in receiving submissions about supporting R or Julia at the browser level. Every six months Mozilla awards grants of value $25,000 to support research in emerging technologies and also topics relevant to Mozilla. It started accepting proposals for 2019 H1 funding series in April this year. https://twitter.com/jofish/status/1121860158835978241 These proposals were expected to address any one of the twelve research questions under the following three categories: Growing the Web: WASM, Rust, Digital trust for cost-conscious users, Beyond online behavioral advertising (OBA) New Interaction Modes: Iodide: R or Julia in the Browser, Fathom, Futures, Mixed Reality, Voice, Common Voice Privacy & Security: Data, Privacy & Security for Firefox Mozilla has been constantly putting its efforts to make the life of data scientists easier on the web. In March, it introduced Iodide that allows data scientists to create interactive documents using web technologies. In April, it came up with Pyodide that brings the Python runtime to the browser via WebAssembly. By funding this research by Valentin Churavy, an MIT Ph.D. student and a member of the official Julia team, Mozilla is taking the next step towards improving access to popular data science tools on the web. They are planning to port R or Julia, languages that are popular among statisticians and data miners, to WebAssembly. Their ultimate goal is to introduce a plugin for Iodide that will automatically convert data basic types between R/Julia and Javascript and will be able to share class instances between R/Julia and Javascript. Though Python and R have been developers’ first choice, Julia is also catching up in becoming one of the promising languages for scientific computing. Its execution speeds are comparable to that of C/C++ and high-level abstractions are comparable to MATLAB. It offers support for modern machine learning frameworks such as TensorFlow and MXNet. Developers can also use Flux, a Julia machine learning library to easily write neural networks. Following are all the Mozilla Research Grants for 2019H1: Source: Mozilla Research Mozilla will be opening a new round of grants in fall this year (probably in November). To know more, check out its official announcement and also join the mailing list. Mozilla introduces Pyodide, a Python data science stack compiled to WebAssembly Mozilla introduces Iodide, a tool for data scientists to create interactive documents using web technologies Mozilla’s Firefox Send is now publicly available as an encrypted file sharing service

Yesterday, Mozilla announced that in the latest version of Firefox Beta, calls between JS and WebAssembly are faster than non-inlined JS to JS function calls. They have made these optimizations keeping two aspects of engine’s work in mind: reducing bookkeeping and cutting out intermediaries. How they made WebAssembly function calls faster They have optimized the calls in both directions, that is, from JavaScript to WebAssembly and WebAssembly to JavaScript with their recent work in Firefox. All these optimizations have been done to make the engine’s work easier. The improvements fall into two groups: Reducing bookkeeping: This means getting rid of unnecessary work to organize stack frames Cutting out intermediaries: This means taking the most direct path between functions How they optimized WebAssembly to JavaScript calls The browser engine has to deal with two different kinds of languages while going through your code even if the code is all written in JavaScript: bytecode and machine code. The engine needs to be able to go back and forth between these two languages. When it does these jumps, it needs to have some information in place, like the place from where it needs to resume. The engine also must separate the frames that it needs. To organize its work, the engine gets a folder and puts this information in it. When the Firefox developers first added WebAssembly support, they had a different type of folder for it. So even though JIT-ed JavaScript code and WebAssembly code were both compiled and speaking machine language, it was treated as if they were speaking different languages. This was unnecessarily costly in two ways: An unnecessary folder is created which adds up setup and teardown costs It requires trampolining through C++ to create the folder and do other setup They fixed this by generalizing the code to use the same folder for both JIT-ed JavaScript and WebAssembly. This made calls from WebAssembly to JS almost as fast as JS to JS calls. How they optimized JavaScript to WebAssembly calls JavaScript and WebAssembly use different customs even if they are speaking the same language. For instance, to handle dynamic types, JavaScript uses something called boxing. As JavaScript doesn’t have explicit types, they need to be figured out at runtime. To keep track of the types of values, the engine attaches a tag to the value. This turns one simple operation into four operations. This is the reason why WebAssembly expects parameters to be unboxed and doesn’t box its return values. Since it is statically typed, it doesn’t need to add this overhead. So, before the engine gives the parameters to the WebAssembly function, the engine needs to unbox the values and put them in registers. It has to go through C++ again to prepare the values when going from JS to WebAssembly. Going to this intermediary step is a huge cost, especially for something that’s not that complicated. To solve this, they took the code that C++ was running and made it directly callable from JIT code. So, when the engine goes from JavaScript to WebAssembly, the entry stub unboxes the values and places them in the right place. Along with these calls, they have also optimized monomorphic and built-in calls. To understand the optimizations well, check out Lin Clark’s official announcement on Mozilla’s website. Mozilla updates Firefox Focus for mobile with new features, revamped design, and Geckoview for Android Mozilla releases Firefox 62.0 with better scrolling on Android, a dark theme on macOS, and more Mozilla, Internet Society, and web foundation wants G20 to address “techlash” fuelled by security and privacy concerns

After the release of React 16.5.0 last month, the React team announced the release of React 16.6.0 yesterday. This release comes with a few new convenient features including support for code splitting, easier way to consume Context from class components, and more. Let’s see what changes have been made in this release: React.memo() as an alternative to PureComponent for functions React.memo() is similar to React.PureComponent but for function components instead of class. It can be used in cases when the function component renders the same result given the same props. You can wrap the function component in a call to React.memo() for a performance boost in some cases by memorizing the result. This will make React skip rendering the component and reuse the last rendered result. React.lazy() for code splitting components You can now render a dynamic import as a regular component with the help of React.lazy() function. To do code splitting you can use the Suspense component by wrapping a dynamic import in a call to React.lazy(). Library authors can leverage this Suspense component to start building data fetching with Suspense support in the future. Note that the feature is not yet available for server-side rendering. Added Class.contextType In React 16.3 a new Context API was introduced as a replacement to the previous Legacy Context API, which will be removed in a future major version. React 16.6 comes with contextType, which makes it convenient to consume a context value from within a class component. A Context object created by React.createContext() can be assigned to the contextType property. This enables you to consume the nearest current value of that Context type using this.context. This update is done because developers were having some difficulties adopting the new render prop API in class components. getDerivedStateFromError() to render the fallback UI React 16 introduced error boundaries to solve the problem of a JavaScript error in a part of the UI breaking the whole app. What Error boundaries do is, they: Catch JavaScript errors anywhere in their child component tree Log those errors Display a fallback UI instead of the component tree that crashed An already existing method, componentDidCatch() gets fired after an error has occurred. But before it is fired, null is rendered in place of the tree that causes an error. This sometimes results in breaking the parent components that don’t expect their refs to be empty. This version introduces another lifecycle method called getDerivedStateFromError() that lets you render the fallback UI before the render completes. Deprecations in StrictMode The StrictMode component was released in React 16.3 that lets you opt-in early warnings for any deprecations. Two more APIs are now added to the deprecated APIs list: ReactDOM.findDOMNode() and Legacy Context. The reason these APIs are deprecated are: ReactDOM.findDOMNode(): This API was supported to allow searching the tree for a DOM node given a class instance. Typically, you don’t require this because you can directly attach a ref to a DOM node. Most uses of this API are often misunderstood and are unnecessary. Legacy Context: It makes React slightly slower and bigger than it needs to be. Instead of the Legacy Context, you can use the new Context API that was introduced in React 16.3. Miscellaneous changes unstable_AsyncMode renamed to unstable_ConcurrentMode unstable_Placeholder renamed to Suspense and delayMs to maxDuration To read the entire changelog of React 16.6, check out their official announcement and also React’s GitHub repository. React 16.5.0 is now out with a new package for scheduling, support for DevTools, and more! React Native 0.57 released with major improvements in accessibility APIs, WKWebView-backed implementation, and more! InfernoJS v6.0.0, a React-like library for building high-performance user interfaces, is now out

Version 6.1.0 of the popular JavaScript framework Angular is here. The latest version released yesterday mainly focuses on bug fixes, new features, and support for TypeScript. Let’s discuss these major updates that come with Angular 6.1.0. In the new version, a KeyValuePipe has been introduced. Support is now offered for  // ... and // TODO in mock compiler expectations. An urlUpdateStrategy feature have been added to the Angular router which allows you to update the browser URL at the beginning of navigation. Feature defaultKeyValueDiffers has been exported to private API. Angular 6.1.0 enables developers to configure the Angular Router so that it remembers the scrolling position of the user as he/she navigates through an application. You can reset the scroll position with the new navigation event and can restore the previous position on pressing the back button. In addition to these updates, View Encapsulation with ShadowDOM v1 is the new standard. ShadowDOM provides better cross-browser support. Due to this reason, the ViewEncapsulation.Native feature has been deprecated. View encapsulation is the process which associates Cascading Style Sheets (CSS) with the components in which they are defined. The KeyValueDiffer#diff feature now allows null values. The new release also offers support for TypeScript 2.9, and 2.8 in addition to 2.7. Apart from these, there are also other breaking changes and bug fixes. Other Changes Under animation, the end-state styles for orphaned DOM nodes have been rendered. The queried element styles in safari/edge have been properly cleaned up in the latest release. typescript is used to resolve the modules for metadata. Mark Meta and Title services are marked as tree shakable provider. versionedFiles in asset-group resources have been deprecated. SwPush.unsubscribe() has been fixed. To use @angular/bazel rules, you need to add calling ng_setup_workspace() in your WORKSPACE file. Angular 7 will be released sometime in September/October 2018. For a complete list of changes and bug fixes, check out the official release notes.    Angular 6 is here packed with exciting new features! Everything new in Angular 6: Angular Elements, CLI commands and more  

Yesterday, Mozilla announced the release of Firefox 68, which brings new updates like support for BigInts, Contrast Checks, dark mode in reader view, and a reimplemented URL bar. They have also added Enhanced Tracking Protection which blocks known “third-party tracking cookies” by default. Improved extension security and discovery Firefox 68 comes with a new reporting feature in ‘about:addons’ using which you can report any security and performance issues with extensions and themes. The team has also redesigned the extensions dashboard in ‘about:addons’ where you can find all the information about your extensions including data and settings access required by each extension. You can get high quality, secure extensions from Mozilla’s Recommended Extensions program present in ‘about:addons’. These recommended extensions are indicated by special badging on addons.mozilla.org (AMO): Source: Mozilla Additionally, to provide users improved protection from threats and annoyances on the web, Firefox 68 comes with cryptomining and fingerprinting protections added to strict content blocking settings in Privacy & Security preferences. Read also: Mozilla adds protection against fingerprinting and Cryptomining scripts in Firefox Nightly and Beta Support for JavaScript BigInt Firefox 68 comes with support for JavaScript’s new BigInt numeric type, which is currently in stage 3 of the ECMAScript specification. Previously, JavaScript only had the Number numeric type. As JavaScript considers numbers as floating-point, they can represent both integers and decimal fractions. Source: Mozilla However, the limitation is that 64-bits floats fail to reliably represent integers larger than 2 ** 53. To make working with large number easier, a new primitive is introduced, BigInt. It provides a way to represent whole numbers larger than 2 ** 53. Updates in DevTools In addition to enhancing the already smart debugging tools, Firefox 68 brings more improvements in DevTools: Accessibility checks in DevTools: This release ships with a new capability for DevTools that check for basic accessibility issues in your web pages. The Accessibility Inspector now comes with a new ‘Check’ that currently reports any color contrast issue with text on a page. The Firefox team plans to add a number of audit tools to highlight accessibility problems on your website in future releases. A way to emulate print media from DevTools: A button is added to the Page inspector using which you can enable “print media emulation”. This makes it easy to see what elements of a page will be visible when printed. Improved CSS warnings: The Web console will show you more information about CSS warnings and include a link to related nodes. A Web console filter: You can now filter content in the Web console using a valid regular expression. Here’s a video showing how this works: https://youtu.be/E6bGOe2fvW0 Web compatibility This release fixes a few web compatibility issues to ensure that every user will be able to access a website regardless of their choice of device or browser: Internet Explorer’s legacy rules property and addRule() and removeRule() CSS methods are added to the CSSStyleSheet interface. Safari’s ‘-webkit-line-clamp’ CSS property is also added. Support for CSS scroll snapping Firefox 68 comes with support for CSS scroll snapping that gives you a standardized way to control the behavior of scrolling inside a container. It works in a very similar fashion to how native apps work on phones and tablets. Now that this update has landed in Firefox, developers will have the same version of the specification as Chrome and Safari. Developers who have used the old Firefox implementation of the Scroll Snap specification are required to update their code, otherwise scroll snapping will no longer work in Firefox 68 and up. The reimplemented URL bar, QuantumBar Firefox’s URL bar, which is also known as the AwesomeBar, has been completely reimplemented using HTML, CSS, and JavaScript web technologies. This overhauled version is named ”QuantumBar”. Though not much will change appearance-wise, its updated architecture behind the scenes will make it easier to maintain and extend in the future. Access to cameras and other media devices now require HTTPS Starting from Firefox 68, camera and microphone will require an HTTPS connection to work. The getUserMedia method will throw NotAllowedError if you try to access the media devices from an insecure HTTP connection, similar to how Chrome works. Many developers are happy with this update. A user on Hacker News commented, “It's fantastic that it works with localhost (and I assume 127.0.0.1?), and it's fantastic that it doesn't work with anything else. This is the best middle ground.” However, some are also worried considering that this will affect the current working of their apps or websites. “This sucks, my community[1] has a local offline-first video/audio call app that we run on a physical mesh network. This will make it impossible for people to talk to each other, without first needing to be connected online to some certificate authority, or without some extraordinarily difficult pre-installation process, which is often not even possible on a phone. HTTPS was important, but now it's being used to shoehorn dependency on a centralized online-only authority. Perfectly ripe to censor anyone.”, wrote a Hacker News user To know more in detail, check out the official announcement by Mozilla. Mozilla launches Firefox Preview, an early version of a GeckoView-based Firefox for Android Firefox 67 enables AV1 video decoder ‘dav1d’, by default on all desktop platforms Mozilla makes Firefox 67 “faster than ever” by deprioritizing least commonly used features

Yesterday, the Linux Foundation announced that the Node.js Foundation and JS Foundation have agreed to possibly create a joint organization. Currently, they have not made any formal decisions regarding the organizational structure. They clarified that joining forces will not change the technical independence or autonomy for Node.js or any of the 28 JS Foundation projects such as Appium, ESLint, or jQuery. A Q&A session will be held at Node+JS Interactive from 7:30 am to 8:30 am PT, October 10 at West Ballroom A to answer questions and get community input on the possible structure of a new Foundation. Why are Node.js and JS Foundations considering merging? The idea of this possible merger came from a need for a tighter integration between both foundations to provide greater support for Node.js and a broader range of JavaScript projects. JavaScript is continuously evolving and being used for creating applications ranging from web, desktops, and mobile. This calls for increased collaboration in the JavaScript ecosystem to sustain continued and healthy growth. What are the goals of this merger? Following are few of the goals of this merge aimed at benefiting the broad Node.js and JavaScript communities: To provide enhanced operational excellence Streamlined member engagement Increased collaboration across the JavaScript ecosystem and affiliated standards bodies This “umbrella” project structure will bring stronger collaboration across all JavaScript projects With a single, clear home available for any project in the JavaScript ecosystem, projects won’t have to choose between the JS and Node.js ecosystems. Todd Moore, Node.js Board Chairperson and IBM VP Opentech, believes this merger will provide improved support to contributors: “The possibility of a combined Foundation and the synergistic enhancements this can bring to end users is exciting. Our ecosystem can only grow stronger and the Foundations ability to support the contributors to the many great projects involved improve as a result.” How are developers feeling about this potential move? Not many developers are happy about this merger, which led to a discussion on Hacker News yesterday. One of the developers feels that the JS Foundation has been neglecting their responsibility towards many open source projects. They have also seen a reduction in funding and alienated many long-time contributors. According to him, this step could be “a last-ditch effort to retain some sort of relevancy.” On the other hand, one of the developers feels positive about this merge: “The JS Foundation is already hosting a lot of popular projects that run in back-end and build/CI environments -- webpack, ESLint, Esprima, Grunt, Intern, JerryScript, Mocha, QUnit, NodeRed, webhint, WebDriverIO, etc. Adding Node.JS itself to the mix would seem to make a lot of sense.” What we think of this move? This merger, if it happens, could unify the fragmented Javascript ecosystem bringing some much-needed relief to developers. It could also bring together sponsor members of the likes Google, IBM, Intel, and others to support the huge number of JavaScript open source projects. We must add that we find this move as a reaction to the growing popularity of Python, Rust, and WebAssembly, all invading and challenging JavaScript as the preferred web development ecosystem. If you have any questions regarding the merger, you can submit them through this Google Form provided by the two foundations. Read the full announcement at the official website of The Linux Foundation and also check out the announcement by Node.js on Medium. Node.js announces security updates for all their active release lines for August 2018 Why use JavaScript for machine learning? The top 5 reasons why Node.js could topple Java

The newest version of V8 is now out in its beta form and is expected to go fully live with the Chrome 69 Stable in a couple of weeks time. Considering that there is a new branch of V8 created every 6 weeks, this newly released version of the JavaScript Engine has multiple features that will have developers on the lookout for its full and proper release. Here are some of the features that are expected to improve the previously released versions. Embedded built-ins saving memory The newly released version supports a host of built-in functions. Examples are methods on built-in objects such as Array.prototype.sort and RegExp.prototype.exec, but also a wide range of internal functionality. Built--in functions cause a huge overhead as they are complied at build-time. They are then serialized into a snapshot and finally deserialized at runtime to create the initial JS heap state. In the entire process, they consume around 700KB in each Isolate (an Isolate roughly corresponds to a browser tab in Chrome). To combat this issue, V8 V6.4 included lazy deserialization which meant that that each Isolate only paid only for the built-ins that it actually needs (but each Isolate still had its own copy). Embedded built-ins take this feature a notch higher. This is shared by all Isolates, and embedded into the binary itself instead of copied onto the JavaScript heap. This means that built-ins exist in memory only once regardless of how many Isolates are running. This has led to a 9% reduction of the V8 heap size over the top 10k websites on x64. Of these sites, 50% save at least 1.2 MB, 30% save at least 2.1 MB, and 10% save 3.7 MB or more. Improved performance Liftoff, WebAssembly’s new baseline compiler, helps complex websites that use big WebAssmbly modules to start up faster. Depending on the hardware, there is more than 10x increase in the speed of the system when the latest V8 is used. Faster DataView operations DataView methods have been revamped in V6.9. As compared to previous versions, where calling C++ was costly, this new version has reduced the same. Moreover, using DataViews is now proving to be efficient thanks to the inline calls to DataView methods when compiling JavaScript code in TurboFan. This has resulted in better peak performance for hot code. Faster processing of WeakMaps during garbage collection V8 v6.9 also looks at improving WeakMap processing. It reduces Mark-Compact garbage collection pause times thus leading to faster operations. Concurrent and incremental marking can now process WeakMaps. Previously all this work was done in the final atomic pause of Mark-Compact GC. Since moving all of the work outside the pause isn’t suitable, the GC now also does more work in parallel to further reduce pause times. These optimizations essentially halved the average pause time for Mark-Compact GCs in the Web Tooling Benchmark. WeakMap processing uses a fixed-point iteration algorithm. This can degrade to quadratic runtime behavior in certain cases. The new release is now able to switch to another algorithm that is guaranteed to finish in linear time if the GC does not finish within a certain number of iterations. Previously, the GC took a few seconds to finish even with a relatively small heap, while the linear algorithm finishes the processing within a few milliseconds. Head over to the github page for more information on V8. You can also visit the official blog of the V8 javaScript engine for more clarity on the release. 5 JavaScript machine learning libraries you need to know HTML5 and the rise of modern JavaScript browser APIs [Tutorial] JavaScript async programming using Promises [Tutorial]