Tech News - Front-End Web Development

After releasing Firefox 60 last month, Mozilla has launched Firefox 61 for Windows, Mac, Linux, and Android devices. This release builds on Firefox Quantum, adding even more power to Quantum CSS by parallelizing the parsing step. This is especially beneficial to websites with large stylesheets and complex layouts. UI changes Firefox 61 now ships with an accessibility inspector that lets developers easily make pages for users with accessibility requirements. The new-look Console UI has been enabled by default for the Browser Console & Browser Toolbox. CSS variables now autocomplete with color swatches, allowing developers to see exactly what color value is stored in each variable The main toolbox's toolbar has also been redesigned. Highlights are better responsiveness for narrow and wide viewports with a new overflow dropdown and sortable tabs. The Network Monitor's main toolbar got redesigned to be more responsive on smaller viewports and visually aligned with the Console. It also includes a Throttling dropdown which throttles network speed to emulate various different network speed conditions. Performance improvements Tab management gets a boost in Firefox 61, with the new Tab warming feature which allows users to manage browser tabs more effectively. Tab Warming will watch the user's mouse cursor and start painting content inside a tab whenever the user hovers his/her mouse over one. There is also faster page rendering with Quantum CSS improvements and the new retained display list feature. Moreover, Firefox 61 now has retained display lists which means users can quickly access the pages they visit more frequently. WebExtensions now run in their own process on MacOS. They can now hide tabs and manage the behavior of the browser when a tab is opened or closed. Users are also provided a convenient access to more search engines. Users can add their favorite search engines to the address bar with the “Search with” tool. MacOS users can also share the URL of an active tab from the page actions menu in the address bar. Security Updates Firefox 61 on all four platforms have provided support for TLS 1.3, the latest version of Transport Layer Security (TLS). TLS 1.3 brings major improvements in security, privacy, and performance. It only includes support for algorithms with no known vulnerabilities and is also able to negotiate a secure session within a single round-trip. Read the release notes for a complete list of updates. Mozilla has also released the Firefox 61 changelog specifically catering to developers. Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more Mozilla is building a bridge between Rust and JavaScript Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more

This year Google I/O was filled with a lot of new announcements which have created a buzz in the tech world. One of them is the launch of Guess.js, a toolkit for building data driven user experiences. This project was initially conceived to improve the the user-perceived page load performance by using predictive analytics. The project then was merged with a similar unnamed project by Google which aimed at exploring data-driven approach for predictive pre-fetching of web pages. The combined product was named as Guess.js and the alpha version was released during Google I/O 2018. Primary features of Guess.js: It can be applied to different types of sites like single-page applications, framework-based static sites, static content sites, and enterprise sites. It works well with single page applications which are running Angular and React ecosystems with their default configurations. The fundamental principle behind Guess.js is to implement data analytics to improve user experience and aid in the design of better data driven UX and UI. Guess.js has a plugin for the popular build tool webpack. Together with Webpack, Guess.js is trying to implement a machine learning driven web bundling approach which has the potential to revolutionize the UX design industry. For framework based static sites, Guess.js plugin can be used in tandem with the static site generators. This plugin helps in evaluating the probability of the user clicking on certain links and based on that it loads the required amount of data. This intuitive approach helps the users get their desired content and also helps to reduce overhead dependency of the websites. Static content sites - will let people using WordPress, Ghost, and many other platforms to leverage the smart pre-fetching of Guess.js The overall approach and promise of Guess.js is revolutionary not just in the way it makes the apps and sites perform faster, but the overall way of automating the page loading procedure and the introduction of the data driven approach has opened up a completely new avenue for UX designers. Google updates biometric authentication for Android P, introduces BiometricPrompt API AutoAugment: Google’s research initiative to improve deep learning performance Google Flutter moves out of beta with release preview 1

Billboard.js, the reusable JavaScript chart library backed by D3.js, has released version 1.5.0. Billboard.js provides the easiest way to create a Billboard chart instantly. The new version comes with 7 major improvements and a hoard of additional bug-fixes. The new radar type chart support has been added to this version for better data visualization. You can use ‘radar’ type, by the set data.types option value. You can also customize these radar types to get a different variation of the visual data. Different radar types There is also a new way to customize and use axes tick’s text value using axis.[x|y|y2].tick.text.position. For this, you need to just set the position pixel for x and y coordinate value. Thereafter, every value is treated relatively as the original position. Billboard.js also features a new axis.[x|y].clipPath option which can be used along with tick’s text position option. Generally, the clip-path attribute makes sure that the axes elements are clipped to not surpass the actual axes area. However sometimes, the tick texts aren’t visible due to the clip-path attribute. This is where axis[x|y]. clipPath option comes to play. There is also improved lining for x-axis. Now the users can put the line on the exact position they want. For this, just put \n character where you want your chart to be lined when you bind the category names for data. Improved lining for x-axis Billboard.js also has a new tooltip.linked.name to allow linking charts to particular name groups. So for instance, four charts with two different name groups will be interacting with only the same linked name value. linked tooltip with grouped name Read the release notes for additional feature releases and bug fixes. Jae Sung Park, the creator of Billboard.js states that, the next release will feature Multiple Axes and Themed CSS file. Chart Model and Draggable and Droppable Directives Building Motion Charts with Tableau How to create a Treemap and Packed Bubble Chart in Tableau

Google's App Maker, has come out of its private preview mode and is now generally available. App Maker is an online tool for building and deploying business apps on the web. The company has remained quiet about its development ever since the launch one and a half years ago. However, now seeing the surge in making everything open source, App Maker remains open and free for all developers who want to give it a shot. App Maker is available to all G Suite Business and Enterprise customers, as well as G Suite for Education customers. If App Maker isn’t yet enabled for your eligible domain, you can turn it on in the Apps > Additional Google services section of the Admin console. The newly designed App Maker also has multiple features added to its basket. Most prominently, it now offers built-in support for Cloud SQL bringing high performance, scalability, and convenience. It has a Bring Your Own Database (BYODB) model, letting you connect it to the database of your choice using JDBC or a REST API. The new Google App Maker is fast and highly automated for app designing and development with Responsive templates, samples, a drag-and-drop UI design and declarative data modeling. It can be easily connected with data and services such as Gmail, Calendar, or Sheets. You can also use Apps Script to access over 40 Google services, Google Cloud Platform and other third-party services that support JDBC and REST. In fact, G Suite administrators will have complete visibility over the apps running in their organization. They can now view owners, usage metrics, and OAuth permissions. For example, you can view the activity of users using the Drive audit logs, or view the activity of end users in the OAuth Token audit logs. Administrators will also be able to prevent apps from running without their approval with expanded OAuth Whitelisting controls. You can read the details on Google Blog. For more information on App Maker, check out the Help Center. Google’s translation tool is now offline – and more powerful than ever thanks to AI Top reasons to use Google Lighthouse 3.0 Google Kubernetes Engine 1.10 is now generally available and ready for enterprise use

If you create web applications as a profession then you would be definitely needing an auditing tool to check what works and what doesn’t in your app. Google Lighthouse is one such tool. It saves a lot of time for you to assess your website’s performance and make it better. You can simply put any URL into Google Lighthouse, (with proper permissions of course) and it will audit it for performance issues and will create a separate report for each issue with ways to rectify it. You can use Lighthouse from the chrome dev tools or you can use it with npn tools as well. Google has announced the release of Lighthouse version 3 in the latest Google I/O conference. The new features of Lighthouse are mentioned below: Lighthouse 3 comes equipped with a new audit engine called Lantern. This helps in improved audits and also minimizes the variance between different audits. The reason for improved audits is that Lantern runs the audits in the same CPU and network environments and simulates the app performance in a regular environment. Lighthouse comes now with a new and improved UI that helps developers to better understand the issues related to their apps and take actionable insights from it. Image Courtesy: Google Uniformity of operation: Both the CLI based version as well as the Node.js version have the same set of controls so that it’s easier to use and less confusing for different sets of developers. Lighthouse has changed their scoring model which now considers 50 out of 100 score as 75 percentile. They have made it systematically harder to achieve the perfect score making the testing and auditing process much more stringent. 4 new audit types have been introduced. The first shows the time to load the first image or text, the second shows the validity of the robots.txt file. The third test shows ways to change videos to gifs and still preserve the video tag to improve the load time. The fourth test enables links to preload before the website loads. The final report is now distributed into three parts to facilitate the developer’s understanding of the scenario and improve the performance. These are the 1hr report which reports the results of the audit, the artifacts property report which includes the data collected from Chrome, and the final report includes the formatted report HTML/JSON/CSV as a string. Will these changes impact the way you develop your apps and make them fare better in the crowd? Feel free to share your thoughts in the comment section. Top 5 Google I/O 2018 conference Day 1 Highlights What can Google Duplex do for businesses? Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more

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?

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

Google has launched Chrome 67 on Mac, Windows, Linux, and Android devices packed with exciting new features. The release features two powerful APIs, password-free logins, PWA support on desktops and more.  Let’s have a look at the features in detailed. Progressive web apps now supported on Desktops Chrome 67 now supports Desktop based progressive web apps.  They run the same way as other apps, in an app window, without an address bar or tabs. Service workers run the PWA to ensure they are engaging, fast, and smooth. As a developer, there are only certain breakpoints to consider while running your PWA in chrome. Essentially the process of creating it remains the same. If your app meets the standard PWA criteria, Chrome will fire the beforeinstallprompt event, However,  it won’t automatically prompt the user.  Here are the steps you need to follow: Save the event. Then, add some UI—like an install app button—to the app to tell the user your app can be installed As the user clicks the button, you need to call prompt on the saved event. Chrome will then show the prompt to the user If users click add, Chrome will add the PWA to their shelf and launcher AR and VR support with WebXR Device API Chrome 67 offers a special WebXR Device API, to create augmented reality and virtual reality experiences on desktops and mobile devices. It will be used to create immersive experiences across multiple AR/VR devices,  sensors and head-mounted displays including Google Daydream View, Samsung Gear VR, and desktop-hosted headsets like Oculus Rift, HTC Vive, and Windows Mixed Reality Headsets. This API will be used to develop AR and VR games, 360-degree videos, and also be used for data visualization, home shopping, and displaying art. Generic Sensor API for accelerometer support Updating mobile experiences, Chrome 67 offers a new Generic Sensor API. Websites can access a mobile device’s accelerometer, gyroscope, orientation sensor, and motion sensor. The API consists of a base Sensor interface with a set of sensor classes built on top. The base interface simplifies the implementation and specification process for the sensor classes. The goal of the Generic Sensor API is to promote consistency across sensor APIs, enable advanced use cases, and increase the pace at which new sensors can be exposed to the Web. Password-free logins Chrome 67 supports password-free logins based on the Web Authentication standard. These standards can be incorporated into browsers and allow additional ways for users to securely sign into most sites. These include biometric information such as fingerprint, retina, or facial recognition from either smartphone or a USB key. Changes in dev tools There are also a number of changes and updates in DevTools in Chrome 67.  Some of these include: Users can now search across all network headers. There are new audits, desktop configuration options, and viewing traces. Incorporation of user Timing in the Performance tabs. JavaScript VM instances are now clearly listed in the Memory panel. The Network tab in the Sources panel has been renamed as the Page tab. Certificate transparency information is available in the Security panel. Site isolation features now appear in the Performance panel. Check out the Google developer blog for a full list of updates. Chrome 67 can be updated by either using the browser’s built-in updater or downloading it directly from google.com/chrome. Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more Top 5 Google I/O 2018 conference Day 1 Highlights: Android P, Android Things, ARCore, ML kit and Lighthouse What can Google Duplex do for businesses?

Oracle announced the much awaited Oracle Apex 18.1 today. Oracle Application Express is a free development tool by Oracle. It allows developers to create web-based applications quickly by using a web browser on an Oracle database. With Oracle Apex 18.1, Oracle provides easy integration of data from the REST services with data taken from the SQL queries within an Oracle database to build scalable applications. The new release also includes high-quality features for creating applications without the need of coding. Let’s have a look at some of the major features and improvements in Oracle Apex 18.1. Key features and updates Application features High-level application features such as access control, email reporting, feedback, activity reporting, dynamic user interface selection, etc, can be added to your app. An application can also be created with “cards” report interface, a timeline report as well as a dashboard. REST enabled SQL support Apex 18.1 allows you to build charts, calendars, reports, and trees. You can also invoke certain processes against Oracle REST Data Services (ORDS) -provided REST Enabled SQL Services. There is no need for a database link to include data from other remote database objects within your APEX application. REST Enabled SQL gets it all done for you. Web Source Modules Different REST endpoints can be used to declaratively access data such as ordinary REST data feeds, REST services from Oracle REST data services as well as Oracle Cloud Applications REST services. It provides the ability to influence REST data sources results using industry standard SQL. REST Workshop Updates have been made to the REST workshop. Apart from helping with creating REST services against Oracle database objects, the new REST workshop comes with an added ability to generate Swagger documentation against REST definitions with just a button click. Application Builder Improvements Oracle Apex 18.1 allows developers to create components quickly as wizards are now streamlined with fewer steps and smarter defaults. Usability enhancements have been made to Page Designer. This includes advanced color palette and graphics on page elements as well as to Sticky Filter which improves developers’ productivity. Social Authentication Oracle APEX 18.1 comes with a native authentication scheme and social sign-in. It is possible for developers to create applications in APEX using authentication methods such as Oracle Identity Cloud Service, Facebook, Google, generic OAuth2  and generic OpenID Connect without coding. Charts Oracle JET 4.2 engine is a new feature to the APEX 18.1. It consists of updated charts as well as APIs. It also comes with different types of charts such as Box-Plot, Gantt, and Pyramid. These provide support for multi-series sparse data sets. Mobile UI New component types namely ListView, Reflow Report and Column Toggle have been introduced which can be used for creating Mobile Applications. Improvements have been made to the APEX Universal Theme. These are mobile-focused enhancements which means that page headers and footers in mobiles will be displayed consistently on mobile devices. Also, floating item label templates help in optimizing the presented information on a mobile screen. There is also declarative support offered by Oracle APEX 18.1 for touch-based dynamic actions such as tap, swipe, double tap, press, and pan. Font APEX The new release includes a set of 32 x 32 high-resolution icons that automatically selects the right font size. Accessibility Accessibility mode is deprecated as the latest release will make use of APEX Advisor which consists of a bunch of tests to identify the most occurring accessibility issues. These are the major updates and improvements made in the latest Oracle APEX 18.1. Existing Oracle APEX 18.1 customers just need to install APEX 18.1 version to avail all the latest upgrades. To know more about Oracle APEX 18.1, be sure to check out the official Oracle Apex Blog. Xamarin Forms 3, the popular cross-platform UI Toolkit, is here! Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more Will Oracle become a key cloud player, and what will it mean to development & architecture community?  

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

The release candidate for Typescript 2.9 is here! Typescript is an open-source programming language which adds optional static typing to Javascript. Let’s jump into some highlights of Typescript 2.9 RC. Changes to keyof operator TypeScript 2.9 changes the behavior of keyof to factor in both unique symbols as well as numeric literal types. TypeScript’s keyof operator is a useful way to query the property names of an existing type. Before Typescript 2.9, keyof never recognized symbolic keys. With this functionality, mapped object types like Partial, Required, or Readonly can also recognize symbolic and numeric property keys, and no longer drop properties named by symbols. Introduction of new import( ) type syntax One long-running pain-point in TypeScript has been the inability to reference a type in another module, or the type of the module itself, without including an import at the top of the file. With Typescript 2.9, their is a new import(...) type syntax. import types use the same syntax as ECMAScript’s proposed import(...) expressions, and provide a convenient way to reference the type of a module, or the types which a module contains. Trailing commas not allowed on rest parameters This break was added for conformance with ECMAScript, as trailing commas are not allowed to follow rest parameters in the specification. Changes to strictNullChecks Unconstrained type parameters are no longer assignable to object in strictNullChecks. Since generic type parameters can be substituted with any primitive type, this is a precaution TypeScript has added under strictNullChecks. To fix this, you can add a constraint on object. never can no longer be iterated over Values of type never can no longer be iterated over. Users can avoid this behavior by using a type assertion to cast to the type any. The list of entire changes and code files can be found on the Microsoft blog. You can also view the TypeScript roadmap for everything else that’s coming in 2.9 and beyond. How to install and configure TypeScript How to work with classes in Typescript Tools in TypeScript

Today, web developers are greeted with a new update of the popular Firefox web browser. Firefox 60 hosts a variety of feature additions and updates targeted specifically to the web developer community. Quantum CSS for Android available now Firefox has brought their new CSS engine called Quantum CSS (previously known as Stylo) in Firefox for Android. This engine takes advantage of modern hardware, parallelizing the work across all of the cores in your machine running upto almost 18 times faster. New Web APIs Two new Web APIs have been added. The Web Authentication API has been enabled which allows USB tokens for website authentication. The WebVR API has also been enabled by default on macOS. It provides support for exposing virtual reality devices to web apps. Firefox 60 also brings a new policy engine and Group Policy support for customized enterprise deployments, using Windows Group Policy or a cross-platform JSON file. Changes in Javascript ECMAScript 2015 modules have been enabled by default. The Array.prototype.values() method has been added again. It was disabled due to compatibility issues in earlier versions. Changes in CSS The align-content, align-items, align-self, justify-content, and place-content property values have been updated as per the latest CSS Box Alignment Module Level 3 spec. The paint-order property has been implemented. Changes in Developer Tools In the CSS Pane rules view, the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from Alt + Up/Down to Ctrl + Up/Down and the CSS variable names will now auto-complete. In Responsive Design Mode, a Reload when... dropdown has been added to allow users to enable/disable automatic page reloads when touch simulation is toggled, or simulated user agent is changed. Changes in DOM The dom.workers.enabled pref has been removed, meaning workers can no longer be disabled. PerformanceResourceTiming is now available in workers. The PerformanceObserver.takeRecords() method has been implemented. The Animation.updatePlaybackRate() method has been implemented. The Gecko-only options object storage option of the IDBFactory.open() method has been deprecated. Promises can now be used within IndexedDB code. The entire list of developer centric changes are available on the Mozilla Developer page. You can also file a bug in Bugzilla or see the system requirements of this release. Get ready for Bootstrap v4.1; Web developers to strap up their boots npm v6 is out! What’s new in ECMAScript 2018 (ES9)?

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

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

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