Tech News - Front-End Web Development

Last week, Stack Overflow users took to its Meta site to express their concern regarding the communication breakdown between the site and its community. The users highlighted that Stack Overflow has repeatedly failed at consulting the community before coming up with a major change recent being removal of the “Hot Meta Posts” section. “It has become a trend that changes ("features") are pushed out without any prior consultation. Then, in the introductory meta post of said change, push-back is shown by the community and as a result, once again, everyone is left with a bad taste in their mouth from another sour experience,” a user wrote. The backlash comes after Stack Overflow announced last week that it is removing the “Hot Meta Posts” section from its right sidebar. This section listed questions picked semi-randomly every 20 minutes from all posts scoring 3 or more and posted within the past two weeks. As an alternative, moderators can highlight important posts with the help of the “featured” tag. Some of the reasons that it cited for removing this feature were that Meta hasn’t scaled very well since its introduction and the questions on the “Hot Meta Posts” section does not really look ideal for attracting new people. Sara Chipps, an Engineering Manager at StackOverflow, further said that the feature was also affecting the well-being of Stack Overflow employees. “Stack Overflow Employees have panic attacks and nightmares when they know they will need to post something to Meta. They are real human beings that are affected by the way people speak to them. This is outside of the CM team, who have been heroes and who I constantly see abused here,” she wrote. Earlier this month, Stack Overflow faced a similar backlash when it updated its home page. Many users were upset that the page was giving more space to Stack Overflow’s new proprietary products while hiding away the public Q&A feature, which is the main feature Stack Overflow is known for. The company apologized and acted on the feedback. However, users think that this has become a routine. A user added, “It's almost as though you (the company, not the individual) don't care about the users (or, from a cynic's perspective, are actively trying to push out the old folks to make way for the new direction SO is headed in) who have been participating for the best part of a decade.” Some users felt that Stack Overflow does consult with users but not out in the open. “I think they are consulting the community, they're just doing it non publicly and in a different forum, via external stakeholders and interested people on external channels, via data science, and via research interviews and surveys from the research list,“ a user commented. Yaakov Ellis, a developer in the Community dev team at Stack Overflow, assured that Stack Overflow is committed to making the community feel involved. It has no intention to cease the interaction between the company and the community. However, he did admit that there is “internal anxiety” to be more open to the community about the different projects and initiatives. He listed the following reasons: Plans can change, and it is more awkward to do that when it is under the magnifying glass of community discussion.  Functionality being worked on can change direction. Some discussions and features may not be things that the Meta community will be big fans of. And even if we believe that these items are for the best, there will also be times when (with the best intentions), as these decisions have been made after research, data, and users have been consulted, the actual direction is not up for discussion. We can't always share those for privacy purposes, and this causes the back and forth with objectors to be difficult. He further said that there is a need to reset some expectations regarding what happens with the feedback provided by the users. “We value it, and we absolutely promise to listen to all of it [...], but we can't always take the actions that folks here might prefer. We also can't commit to communicating everything in advance, especially when we know that we're simply not open to feedback about certain things, because that would be wasting people's time. Do Google Ads secretly track Stack Overflow users? Stack Overflow confirms production systems hacked Stack Overflow faces backlash for its new homepage that made it look like it is no longer for the open community

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]

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

Yesterday, Mozilla announced the release of Firefox 67. For this version, the main focus of the Mozilla community has been to make Firefox “faster than ever” and also bring more privacy controls to the users. The updates include deprioritizing least commonly used features, suspending unused tabs, feature for blocking fingerprinting and cryptomining, and more. https://www.youtube.com/watch?v=NzqJ09_cn28 New updates in Firefox 67 Performing tasks at an optimal time by deprioritizing least commonly used features To make the browsing experience better, Mozilla identified the least commonly used features that could be delayed until the page is loaded. The updates include delaying setTimeout, a method used in JavaScript for timing events, to give more priority to executing scripts for things that users want to see first. The idea of delaying setTimeout for certain features has helped make the main scripts of sites like Instagram, Amazon, and Google searches execute 40-80% faster. This boost in performance is also because the browser now scans for alternative style sheets once the page is loaded and loads the auto-fill module only if there is a form to complete. Suspending unused tabs to prevent computer slow down We are all guilty of opening a number of tabs, which eventually slows down our computers. With this release, Firefox will be able to identify whether your memory is less than 400 MB and suspend unused tabs. If you want to visit the web page again, you just need to click on the tab and it will be reloaded where you left off. Fighting against online tracking by blocking known cryptominers and fingerprinters Last year in August, Mozilla announced that it will be introducing a series of features in Firefox to prevent online tracking. Living up to that promise, it has introduced a new feature through which you can disable fingerprinting and cryptomining. Browser fingerprinting refers to the technique of collecting various device-specific information through a web browser to build a device fingerprint for better identification. Cryptomining is the method of generating cryptocurrency by running a script in someone else’s PC, which leads to slowing down your computer and draining your battery. To use this feature, navigate to Preferences| Privacy & Security| Content Blocking. Then select Custom and check “Cryptominers” and “Fingerprinters” so that they are both blocked. Another way for enabling this feature is by clicking on the “i” icon in the address bar and under Content Blocking click on the Custom gear at the right side. Source: Mozilla Private browsing gets the convenience of normal browsing Private browsing prevents websites from tracking your online activity to some extent by automatically erasing your browsing information as soon as the session is over. Along with better online privacy, users will now be able to enjoy some of the convenience that you get in a typical Firefox experience. You will be able to access saved passwords and enable/disable your web extensions. Along with these improved user-facing features, this release also comes with faster and reliable JavaScript debugging tools for web developers. Visit the Mozilla Blog to know more in detail. Mozilla’s updated policies will ban extensions with obfuscated code Mozilla re-launches Project Things as WebThings, an open platform for monitoring and controlling devices Mozilla introduces Pyodide, a Python data science stack compiled to WebAssembly

The 2018 angular conference (ng-conf 2018) took place on April 18–20th 2018 at Salt Lake City, UT. The conference featured a large number of sessions, workshops, and speakers from the Angular team and the Angular community. ng-conf 2018 was live streamed and live transcripted for the home audience, to enjoy the same learning experiences as those of the actual attendees. Not to mention, the whole event was 80s themed, coinciding with the release of the movie Ready Player One which features a lot of 1980s pop-culture references. We have compiled a list of popular announcements and sessions which were the highlights of this year’s conference. Introducing RxJS6 Ben Lesh introduced version 6 of the ReactiveX library for JavaScript. RxJS is a library for reactive programming using Observables, that makes it easier to compose asynchronous or callback-based code. RxJS6 brings cleaner imports while having a smaller API, a backward compatibility package to update without changing your code, and automatic code migration for TypeScript. RxJS 6 Backward Compatibility: To make the migration path from RxJS 5 to RxJS 6, the RxJS team has released a sibling package called rxjs-compat. This package creates a compatibility layer between the APIs of v6 and v5. Automatic code migration: For TypeScript users, which cover the majority of Angular developers, RxJS introduces tslint, which offers a great deal of automated refactoring to make the transition from v5 to v6 even easier. Deprecations: A large no. of deprecations have been made. This includes Result selectors, Observable.if (replaced by iif() and Observable.throw replaced by throwError().  Apart from this, other deprecated methods include merge, concat, combineLatest, race, and zip. StackBlitz + Angular: A Better Way to Build PWA’s Albert Pai and Eric Simons conducted a session on building PWAs using StackBlitz with Angular. This suite of new developer tools makes building and debugging progressive web apps a lot easier. They run entirely in your browser with no setup or configuration required. NgRx Sessions A lot of sessions revolved around NgRx, the RxJS powered state management for Angular applications, inspired by Redux. Brandon Roberts talked about how to implement authentication with a reactive store by building an auth-based app with NgRx Store, Router, and Effects. Brandon Roberts and Mike Ryan presented a talk on Reactive Testing Strategies with NgRx. He talked about testing strategies such as unit testing presentation components, integration testing with smart components, testing observables, state management, and end-to-end tests, to make testing a reactive application easier and to simplify the testing triangle. Vitalii Bobrov talked about how NgRx Schematics is a huge time-saver. It will automate NgRx code generation and give you the ability to focus on application business logic. Mike Ryan presented a talk on Good Action Hygiene with NgRx and talked about how to write clean actions and avoid common anti-patterns. Jesse Sanders talked about how to handle complex forms using ngrx. David East and Todd Motto conducted a workshop on NgRx Selectors. They talked about multiple benefits of Selectors are easy to create and work well with teams. They allow you compute state from your store, which acts like a view model. Selectors are easily tested, memoized for performance, and compose-able for re-usability. By the end of this talk they promised to shake any store structure fears developers may have so that they can move forward boldly with selectors. Firebase, Cloud Functions, and Machine Learning Jason Dobry presented a workshop on how to use the Firebase SDK for Google Cloud Functions to improve an AngularFire Chat Web app. AngularFire is the officially supported AngularJS binding for Firebase. This binding lets you associate Firebase references with Angular models so that they will be transparently and immediately kept in sync with the database and with all other clients currently using your application. Jason also talked about how to use Cloud Functions to send notifications to users of the Chat app, use the Google Cloud Vision API to process images, and use the Google Natural Language API to process chat messages. The conference also featured workshops on the following How to hack an Angular app, Writing A Custom Angular Build Make your JS app search engine friendly, Building components with the Angular Component Dev Kit Strategies for Server Side Rendering Angular Apps Angular Elements in v6 and Beyond Hands-on Full-Stack development with Nx and Bazel, Using StackBlitz & Angular for Rapid App Prototyping Reusable Animations, Google’s serverless tools, VR Hero, and more.   You can have a look at the entire list of sessions and workshops on the ng-conf website. Why switch to Angular for web development – Interview with Minko Gechev 8 built-in Angular Pipes in Angular 4 that you should know Building Components Using Angular

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

After the release of Ember 3.4 earlier this month, the Ember project released version 3.5 of the three core sub-projects: Ember.js, Ember Data, and Ember CLI. This release boasts of up to 32% performance improvement in Ember CLI build and a new Ember Data which powers the addon developers. This version also kicks off the 3.6 beta cycle for all the three sub-projects. Additionally, Ember 3.4 is now promoted to LTS, which stands for Long Term Support. This means that Ember will continue to receive security updates for 9 release cycles and bug fixes for 6 cycles. Let’s now explore what updates have been added in this release: Updates in Ember.js 3.5 This version is an incremental and backwards compatible release with two small bug fixes. These bug fixes pave the way for new features in future releases. The following bugs are fixed in this release: In some cases Alias wouldn't teardown properly leaving unbalanced watch count in meta. This is now fixed. Naming routes as "array" and "object" is allowed. Updates in Ember Data 3.5 This release hits two milestones: the very first LTS release of ember-data and the RecordData interfaces. RecordData RecordData provides addon developers the much-needed API access with more confidence and stability. This new addition will facilitate developers to easily implement many commonly requested features such as improved dirty-tracking, fragments, and alternative Models in addons. With this new feature added, the Ember developers are thinking of deprecating and removing the use of private but intimate InternalModel API. Also, be warned that this change might cause some regressions in your applications. RecordData use with ModelFragments Most of the community addons work with RecorData versions of ember-data, but currently it does not work with ember-data-model-fragments. In case you are using this addon, it is advisable to stay on ember-data 3.4 LTS until the community has released a version compatible with RecordData. Updates in Ember CLI 3.5 Three new features have been added in this Ember CLI 3.5: Upgraded to Broccoli v2.0.0 Earlier, tools in the Ember Ecosystem relied on a fork of Broccoli. But, from this release, Ember CLI uses Broccoli 2.0 directly. Build speed improvements up to 32% Now, developers will see some speed improvements in their builds, thanks to Broccoli 2! Broccoli 2 allows Ember CLI to use the default system temp directory, instead of a ./tmp directory local to a project folder. Users may see up to 32% improvements in build time, depending on computer hardware. Migrated to ember-qunit As all of the main functionality lives in ember-qunit while ember-cli-qunit is just a very thin shim over ember-qunit, Ember CLI is migrated to ember-qunit. It now uses ember-qunit directly and ultimately ember-cli-qunit would become deprecated. To read the full list of updates, check out the official announcement by the Ember community. The Ember project announces version 3.4 of Ember.js, Ember Data, and Ember CLI Ember project releases v3.2.0 of Ember.js, Ember Data, and Ember CLI Getting started with Ember.js – Part 1

YouTube’s recent Polymer redesign upgrade was loved by many, which included improved designs and an added dark theme. Much after all the wow factor became a part of the routine, a new controversy came up stating Youtube slowing down on non-Chrome browsers. This glitch was brought to light by Mozilla’s Technical Program Manager, Chris Peterson. He tweeted, YouTube’s current architecture that includes Polymer is only available in Google Chrome. Thus, making it slower on Mozilla Firefox and Microsoft Edge. Why is Youtube loading slower on non-Chrome browsers Per Peterson, YouTube’s polymer redesign depends on the deprecated Shadow DOM v0 API, which is also the current implementation in Google Chrome. On the other hand, Firefox and Edge browsers have Shadow DOM polyfills, which are slower than Chrome’s native implementation. Peterson also stated that “On my laptop, initial page load takes 5 seconds with the polyfill viz-a-viz one without it. Subsequent page navigation perf is comparable.” What about the Internet Explorer 11? YouTube’s condition in the IE11 is a lot slower than even Firefox and Edge. IE11 is still being served with the old version of YouTube, by default. https://twitter.com/cpeterso/status/1021626510296285185 Is there a fix? Google could have chosen to service the new implementation into Firefox and Edge. A failure to do this, has resulted in the popular video streaming website running substantially slower on these two. However, there is an  easy fix for this issue. Peterson recommends users on both Firefox browser and Edge to revert YouTube to a previous version using add-ons. Firefox users can boost YouTube page load speeds by installing the YouTube Classic extension, while Edge users can do the same by installing the Tampermonkey extension and the YouTube − Restore Classic script. There are speculations that this is Google’s secretive plan to migrate the non-chrome users to Chrome? But that begs the question of whether such a move is worth risking Youtube users leaving the platform due to poor user experience. Considering this, the performance issue is unlikely to be a conscious effort from Google. What is more likely is that Google may’ve considered redesigning it with Polymer could provide great exposure to the web development framework’s features and use-cases. YouTube has more than 1.8 billion registered viewers every month along with 400 hours of video are uploaded to its site every minute. Although it works excellently in Chrome, which is the most popular web browser and accounts for 59 percent of website usage, a significant amount of the population still use Firefox and Edge. As such Youtube users expect a seamless experience regardless of what browser they use, and that is a fair expectation of a product from a reliable brand. YouTube has a $25 million plan to counter fake news and misinformation Vevo’s YouTube account Hacked: Popular videos deleted Firefox has made a password manager for your iPhone

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

The Google Chrome team announced new updates and changes to the Chrome DevTools in Chrome 71, today.  The latest update explores features such as hovering over a Live Expression to highlight the DOM node, storing DOM nodes as global variables, Initiator and priority information in HAR imports and exports, and Picture-in-Picture breakpoints among others. Let’s discuss these features in the latest update to DevTools in Chrome 71. Hovering over Live Expression to highlight DOM node Now when an Expression evaluates to a DOM node, hovering over the Live Expression will result in highlighted DOM node in the viewport. Storing DOM nodes as global variables You can now store DOM nodes as a global variable. All you need to do is run an expression in the console that evaluates to a node. Then right-click the result and select Store as the global variable. Alternatively, you can also right-click the node in the DOM Tree and then select Store as a global variable. Initiator and priority information available in HAR imports and exports DevTools now comprises initiator and priority information in the HAR file on exporting a HAR file. Once done importing the HAR files back into DevTools, the Initiator and Priority columns gets populated. The _initiator field offers information behind the cause of the requested resource. The _priority field states the priority level that the browser assigned to the resource. Accessing Command Menu from the Main Menu Command Menu provides a fast way to access DevTools panels, tabs, and features. Now, you can open the Command Menu directly from the Main Menu. Click the main button on the main menu and select Run command. “Add to homescreen" now called "Trigger beforeinstallprompt" There’s an Add to homescreen button on the Manifest tab which is renamed to Trigger beforeinstallprompt as it is more semantically accurate. For more information, check out the official update notes. Chrome 69 privacy issues: automatic sign-ins and retained cookies; Chrome 70 to correct these Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more Google Chrome’s 10th birthday brings in a new Chrome 69

After the announcement of Typescript 2.9 RC  back in May, Microsoft’s TypeScript team came out with the release candidate of TypeScript 3.0 last week, unveiling features such as project references, extracting and spreading parameter lists with tuples, a new unknown type and API breaking changes among others. Let’s discuss the highlights of TypeScript 3.0 RC release. Project Reference functionality It allows TypeScript projects to depend on other TypeScript projects. Once these dependencies have been specified in the tsconfig.json file, you can easily split your code into smaller projects. It also provides TypeScript (and tools around it) a way to understand build ordering and output structure. Extracting and spreading parameter lists using tuples This functionality helps with reducing the overloading amount for functions of varied parameter lengths. Also, there is no need to write different overloads to support functions with different number of parameters. TypeScript 3.0 allows to better model scenarios like these by allowing rest parameters to be generic, and concluding those generics as tuple types. This, in turn, demands for richer tuple types to model scenarios such as optional parameters at the end of a parameter list, a final parameter which can be a rest parameter along with empty parameter lists. A new ‘unknown’ type Apart from these features, the new unknown type feature can accommodate APIs that uses variable of any value but requires type checking. Support for the JSX defaultProps There is also support for the JSX defaultProps used in React. These defaultProps allow the developers to define default values for props during creation of a component, such as a source for an Image component. TypeScript 3.0 RC also supports a new type alias called LibraryManagedAttributes in the JSX namespace. LibraryManagedAttributes is just a helper type that tells TypeScript what attributes a JSX tag accepts. Using this general type helps model React's specific behavior for things such as defaultProps and propTypes. Apart from these features, there are API breaking changes API Breaking Changes The internal method LanguageService#getSourceFile is removed, after being deprecated for two years. The function TypeChecker#getSymbolDisplayBuilder and its associated interfaces are removed. The deprecated functions escapeIdentifier and unescapeIdentifier are removed. TypeScript 3.0 release is scheduled for sometime later this month. For more information on the latest TypeScript 3.0 RC release, check out the official Microsoft Blog. How to work with classes in Typescript How to install and configure TypeScript  

Last week, Mozilla, in an interview with German media outlet T3N, revealed its plan of launching paid subscription services in Firefox by October. By subscribing to this service, users will be able to access “premium” features like VPN and secure cloud storage. In the interview, Chris Beard, Mozilla’s CEO did not go much into details about the cost or new premium services and features that we may see in Firefox. However, he did mention two services: VPN and cloud storage. He said, “You can imagine we'll offer a solution that gives us all a certain amount of free VPN Bandwidth and then offer a premium level over a monthly subscription.” He further clarified that no costs will be charged for the currently free service. Mozilla started testing the waters last year by introducing a few paid subscription services. In October, it partnered with ProtonVPN to introduce a paid VPN service. This service was offered to a randomly-selected small group of US users at $10 per month. In February this year, it partnered with Scroll, a news subscription service that allows you to read your favorite news websites by paying a monthly fee. Now, the company is expanding its catalog to offer more subscription services in Firefox. “We want to add more subscription services to our mix and focus more on the relationship with the user to become more resilient in business issues,” said Chris Beard. Explaining the vision behind this paid offering, Dave Camp, senior vice president of Firefox, said in a statement, “A high-performing, free and private-by-default Firefox browser will continue to be central to our core service offerings. We also recognize that there are consumers who want access to premium offerings, and we can serve those users too without compromising the development and reach of the existing products and services that Firefox users know and love.” This news triggered a discussion on Hacker News. Going by the thread, we can say that many users are happy that Mozilla is upfront about this new business model. Several other users also commented about the list of features and services they would want in Firefox before they are convinced enough to pay for the subscription. One of the users commented: “Can confirm, I would pay for a version of Firefox with just four "features": - No Pocket anywhere in the code - No telemetry/experiments/ Normandy anywhere in the code - No network connections to third party hosts (other than websites I'm viewing) - No "discovery" feed / whatever they're calling the activity stream sponsored content thing now anywhere in the code Just let me monthly subscribe via Paypal or whatever, and give me a private build server link and tar.gz of the source.” You can read the entire interview on T3N’s official website. Mozilla makes Firefox 67 “faster than ever” by deprioritizing least commonly used features Mozilla’s updated policies will ban extensions with obfuscated code Mozilla puts “people’s privacy first” in its browser with updates to Enhanced Tracking Protection, Firefox Lockwise and Firefox Monitor

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

After the successful conference at Amsterdam, Vuejs recently conducted the first ever VueConf.US in New Orleans on March 26th-28th 2018. The conference congregated hundreds of Vuejs developers from around the world and the VueJS Core team and featured workshops and talks from members of the Vuejs community and Vue experts. It also witnessed new releases and project processes. The conference commenced with an inaugural keynote by Evan You, the creator of Vue. He talked about the growth of Vue since 2016, also highlighting new developments coming soon. In his keynote, You said that “Vue will be moving to a standardized release cycle with new minor releases every three months and a minimum six-month notice prior to major releases.” They will also be shifting from a single release channel to four separated release channels. The VueConf.US conference covered 4 major workshops by Vuejs experts. In the first workshop, Evan You talked about building simple versions of libraries for features such as routing, state management, form validation and i18n using basic Vue features. Chris Fritz, conducted a second workshop on the basics of building world-class Vue applications. Topics included configuring Webpack for single-file components, setting up the most advanced workflows currently possible, and more. Sarah Drasner organized a workshop on animation in Vue to creating complex effects in performant and visually stunning patterns. Rachel Nabors, presented a talk, "Vue In Motion", on implementing animations and transitions in Vue. In the fourth workshop, Blake Newman presented his views on Vuex, a state management pattern. The VueConf.US conference also featured multiple presentations by key Vue experts. Daniel Rosenwasser, Program Manager on TypeScript at Microsoft, presented his views on making TypeScript and Vue seamless to make sure that JavaScript users of all communities can use Typescript. In another interesting presentation, Jen Looper talked about creating an Engaging Native Mobile App with Vue and NativeScript all the while retaining shared code between the Vue created website and mobile app. Edd Yerburgh, Vue core team member and author of "vue-test-utils", spoke about testing Vue applications. He presented an adapted the testing pyramid for the front end, consisting of end-to-end tests, snapshot tests, and unit tests. In a talk, “Vue & SSR: The best practices”, Sebastien Chopin talks about common problems with server-side rendering and how to deal with them. He also shows Nuxt.js as a possible solution to most of these problems. Community support was the highlight of the VueConf.US conference with a large number of talks mentioning the importance of Vue community support. The attendees were extremely positive about the conference and stated how comfortable and welcoming the community was. Each attendee shared a similar level of excitement about the platform and its possibilities and was excited about meeting the wide variety of developers and to know their experiences. All talks were recorded and will be posted soon on VueMastery.

On Monday, Opera Touch was made available for iPhone users that aims to challenge Apple’s default browser, Safari. It particularly targets the newly launched Apple phones, iPhone XS and XS Max and the upcoming iPhone XR. Opera Touch is your on-the-go browser which helps you instantly search the web with one hand. It comes with Flow to make sharing links, images, videos or notes much easier. Instant searching Opera Touch opens up in search mode to help you instantly find things on the web. You can search using text input, voice, or a QR code. Also, the core elements of the interface are located at the bottom of the screen making them easy to reach. Seamless browsing experience with Flow You can use Opera Touch on iPhone together with your Opera computer browser for a seamless web browsing experience across devices. The plus point here is that you do not need to create an account to connect your iPhone with your computer browser. Simply, start the Opera computer browser and scan the QR code displayed there with Opera Touch and you are good to go. After connecting, you can send links, videos, and notes to yourself with a single click through Flow and they will be displayed across all your Flow-enabled devices. Your on-the-go browser It makes searching on-the-go easier as you can conveniently explore the internet using just one hand. The Fast Action Button present in the bottom middle of the screen provides the browser’s key functions, including access to your most recent tabs and search. You can hold and swipe the button open to switch to your most recent tabs, reload or close the page or send the current tab to your computer in Flow. Safe and secure browsing The data shared with Flow is fully end-to-end encrypted. Its opt-in ad blocker, blocks intrusive ads, making web pages load faster. Also, the browser comes with Opera’s cryptojacking protection that reduces the risk of your mobile getting overheated when you browse the web. Learns from your browsing patterns The browser will learn from your browsing pattern giving you a more personalized browsing experience. It will automatically add your favorite sites to the browser’s home screen. Read more about Opera Touch on Opera’s official website and to download the browser head over to the App Store. Vivaldi 2.0, a hyper-customizable browser, releases with Vivaldi Sync, Resizable Tab Tiling, and more! Firefox Reality 1.0, a browser for mixed reality, is now available on Viveport, Oculus, and Daydream Firefox Nightly browser: Debugging your app is now fun with Mozilla’s new ‘time travel’ feature