Tech News - Web Development

Today, Minko Gechev, an engineer in the Angular team at Google announced the release of Angular CLI 7.2.1. This release fixes a webpack-dev-server vulnerability and also comes with support for multiselect list prompt, TypeScript 3.2, and Angular 7.2.0-rc.0. https://twitter.com/mgechev/status/1083133079579897856 Understanding the webpack-dev-server vulnerability The npm install command was showing the Missing Origin Validation vulnerability because webpack-dev-server versions before 3.1.10 are missing origin validation on the websocket server. A remote attacker can take advantage of this vulnerability to steal a developer’s code as the origin of requests to the websocket server, which is used for Hot Module Replacement (HMR) are not validated. Other updates in Angular 7.2.1 CLI Several updates and bug fixes were listed in the release notes of Angular CLI’s GitHub repository. Some of them are: Support is added for multiselect list prompt Support is added for TypeScript 3.2 and Angular 7.2.0-rc.0 Optimization options are updated Warnings are added for overriding flags in arguments lintFix is added to several other schematics `resourcesOutputPath` is added to the schema to define where style resources will be placed, relative to outputPath. The architect command project parsing is improved Prompt support is added using Inquirer Jobs API is added Directly loading component templates is supported Angular 7 is now stable Unit testing Angular components and classes [Tutorial] Setting up Jasmine for Unit Testing in Angular [Tutorial]

Node v11.0.0 is released. The focus of this current release is primarily towards improving internals, and performance. It is an update to the stable V8 7.0. Build and console changes in Node v11.0.0 Build: FreeBSD 10 supported is removed. child_process: The default value of the windowsHide option is now to true. console: The console.countReset() function will emit a warning if the timer being reset does not exist. If a timer already exists, console.time() will no longer reset it. Dependency and http changes Under dependencies, the Chrome V8 engine has been updated to the v7.0. fs: The fs.read() method now needs a callback. The fs.SyncWriteStream utility was deprecated previously, it has now been removed. http: In Node v11.0.0 the http, https, and tls modules use the WHATWG URL parser by default. General changes In general changes, process.binding() has been deprecated and can no longer be used. Userland code using process.binding() should re-evaluate its use initiate migration. There is an experimental implementation of queueMicrotask() added. Internal changes Under internal changes, the Windows performance-counter support has been removed. The --expose-http2 command-line option has also been removed. In Timers, interval timers will be rescheduled even if previous interval gave an error. The nextTick queue will be run after each immediate and timer. Changes in utilities The WHATWG TextEncoder and TextDecoder APIs are now global. The util.inspect() method’s output size is limited to 128 MB by default. When NODE_DEBUG is set for either http or http2, a runtime warning will be emitted. Some other additions Some other utilities have been added like: '-z relro -z now' linker flags internal PriorityQueue class InitializeV8Platform function string-decoder fuzz test new_large_object_space heap space dns memory error test warnings when NODE_DEBUG is set as http/http2 Inspect suffix to BigInt64Array elements For more details and a complete list of changes, visit the Node website. Deno, an attempt to fix Node.js flaws, is rewritten in Rust npm at Node+JS Interactive 2018: npm 6, the rise and fall of JavaScript frameworks, and more The top 5 reasons why Node.js could topple Java

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

Last month, the creator of the Feathers web-framework, David Luecke announced the release of Feathers 4. This release brings built-in TypeScript definitions, a framework-independent authentication mechanism, improved documentation, security updates in database adapters, and more. Feathers is a web framework for building real-time applications and REST APIs with JavaScript or TypeScript. It supports various frontend technologies including React, VueJS, Angular, and works with any backend. Read also: Getting started with React Hooks by building a counter with useState and useEffect It basically serves as an API layer between any backend and frontend: Source: Feathers Unlike traditional MVC and low-level HTTP frameworks that rely on routes, controllers, or HTTP requests and response handlers, Feathers uses services and hooks. This makes the application easier to understand and test and lets developers focus on their application logic regardless of how it is being accessed. This also enables developers to add new communication protocols without the need for updating their application code. Key updates in Feathers 4 Built-in TypeScript definitions The core libraries and database adapters in Feathers 4 now have built-in TypeScript definitions. With this update, you will be able to create a TypeScript Feathers application with the command-line interface (CLI). Read also: TypeScript 3.6 releases with stricter generators, new functions in TypeScript playground, better Unicode support for identifiers, and more A new framework-independent authentication mechanism Feathers 4 comes with a new framework-independent authentication mechanism that is both flexible and easier to use. It provides a collection of tools for managing username/password, JSON web tokens (JWT) and OAuth authentication, and custom authentication mechanisms. The authentication mechanism includes the following core modules: A Feathers service named ‘AuthenticationService’ to register authentication mechanisms and create authentication tokens. The ‘JWTStrategy’ authentication strategy for authenticating JSON web token service methods calls and HTTP requests. The ‘authenticate’ hook to limit service calls to an authentication strategy. Security updates in database adapters The database adapters in Feathers 4 are updated to include crucial security and usability features, some of which are: Querying by id: The database adapters now support additional query parameters for ‘get’, ‘remove’, ‘update’, and ‘patch’. In this release, a ‘NotFound’ error will be thrown if the record does not match the query, even if the id is valid. Hook-less service methods: Starting from this release, you can call a service method by simply adding ‘a _’ in front instead of using a hook. This will be useful in the cases when you need the raw data from the service without triggering any of its hooks. Multi updates: Mulitple update means you can create, update, or remove multiple records at once. Though it is convenient, it can also open your application to queries that you never intended for. This is why, in Feathers 4, the team has made multiple updates opt-in by disabling it by default. You can enable it by explicitly setting the ‘multi’ option. Along with these updates, the team has also worked on the website and documentation. “The Feathers guide is more concise while still teaching all the important things about Feathers. You get to create your first REST API and real-time web-application in less than 15 minutes and a complete chat application with a REST and websocket API, a web frontend, unit tests, user registration and GitHub login in under two hours,” Luecke writes. Read Luecke’s official announcement to know what else has landed in Feathers 4. Other news in web 5 pitfalls of React Hooks you should avoid – Kent C. Dodds Firefox 69 allows default blocking of third-party tracking cookies and cryptomining for all users How to integrate a Medium editor in Angular 8

Part of the new Angular rendering engine, Ivy, includes a new approach to localizing applications — specifically extracting and translating text. This article explains the benefits and some of the implementation of this new approach. Prior to Ivy, the only way to add localizable messages to an Angular application was to mark them in component templates using the i18n attribute: <div i18n>Hello, World!</div> The Angular compiler would replace this text when compiling the template with different text if a set of translations was provided in the compiler configuration. The i18n tags are very powerful — they can be used in attributes as well as content; they can include complex nested ICU (International Components for Unicode) expressions; they can have metadata attached to them. See our i18n guide for more information. But there were some shortcomings to this approach. The most significant concern was that translation had to happen during template compilation, which occurs right at the start of the build pipeline. The result of this is that that full build, compilation-bundling-minification-etc, had to happen for each locale that you wanted to support in your application. (build times will vary based on project size) If a single build took 3 minutes, then the total build time to support 9 locales would be 3 mins x 9 locales = 27 mins. Moreover, it was not possible to mark text in application code for translation, only text in component templates. This resulted in awkward workarounds where artificial components were created purely to hold text that would be translated. Finally, it was not possible to load translations at runtime, which meant it was not possible for applications to be provided to an end-user who might want to provide translations of their own, without having to build the application themselves. The new localization approach is based around the concept of tagging strings in code with a template literal tag handler called $localize. The idea is that strings that need to be translated are “marked” using this tag: const message = $localize `Hello, World!`; This $localize identifier can be a real function that can do the translation at runtime, in the browser. But, significantly, it is also a global identifier that survives minification. This means it can act simply as a marker in the code that a static post-processing tool can use to replace the original text with translated text before the code is deployed. For example, the following code: warning = $localize `${this.process} is not right`; could be replace with: warning = "" + this.process + ", ce n'est pas bon."; The result is that all references to $localize are removed, and there is zero runtime cost to rendering the translated text. The Angular template compiler, for Ivy, has been redesigned to generate $localize tagged strings rather than doing the translation itself. For example the following template: <h1 i18n>Hello, World!</h1> would be compiled to something like: ɵɵelementStart(0, "h1"); // <h1>ɵɵi18n(1, $localize`Hello, World!`); // Hello, World!ɵɵelementEnd(); // </h1> This means that after the Angular compiler has completed its work all the template text marked with i18n attributes have been converted to $localize tagged strings which can be processed just like any other tagged string. Notice also that the $localize tagged strings can occur in any code (user code or generated from templates in both applications or libraries) and are not affected by minification, so while the post-processing tool might receive code that looks like this ...var El,kl=n("Hfs6"),Sl=n.n(kl);El=$localize`Hello, World!`;let Cl=(()=>{class e{constructor(e)... it is still able to identify and translate the tagged message. The result is that we can reorder the build pipeline to do translation at the very end of the process, resulting in a considerable build time improvement. (build times will vary based on project size) Here you can see that the build time is still 3 minutes, but since the translation is done as a post-processing step, we only incur that build cost once. Also the post-processing of the translations is very fast since the tool only has to parse the code for $localize tagged strings. In this case around 5 seconds. The result is that the total build time for 9 locales is now 3 minutes + ( 9 x 5 seconds) = 3 minutes 45 seconds. Compared to 27 minutes for the pre-Ivy translated builds. Similar improvements have been seen in real life by teams already using this approach: The post-processing of translations is already built into the Angular CLI and if you have configured your projects according to our i18n guide you should already be benefitting from these faster build times. Currently the use of $localize in application code is not yet publicly supported or documented. We will be working on making this fully supported in the coming months. It requires new message extraction tooling — the current (pre-Ivy) message extractor does not find $localize text in application code. This is being integrated into the CLI now and should be released as part of 10.1.0. We are also looking into how we can better support translations in 3rd party libraries using this new approach. Since this would affect the Angular Package Format (APF) we expect to run a Request for Comment (RFC) before implementing that. In the meantime, enjoy the improved build times and keep an eye out for full support of application level localization of text. Angular localization with Ivy was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Google has announced the availability of Python 3.7 in beta on the App Engine standard environment. Developers can now easily run their web apps using up-to-date versions of popular languages, frameworks, and libraries, with Python being one of them. The Second Generation runtimes remove previous App Engine restrictions, giving developers the ability to write portable web apps and microservices. Now web apps can take full advantage of App Engine features such as auto-scaling, built-in security, and pay-per-use billing model. Python 3.7 was introduced as one of the new Second Generation runtimes at Cloud Next. Python 3.7 runtime brings developers up-to-date with the language community's progress. As a Second Generation runtime, it enables a faster path to continued runtime updates. It also supports arbitrary third-party libraries, including those that rely on C code and native extensions. The new Python 3.7 runtime also supports the Google Cloud client libraries. Developers can integrate GCP services into their app, and run it on App Engine, Compute Engine or any other platform. LumApps, a Paris-based provider of enterprise Intranet software, has chosen App Engine to optimize for scale and developer productivity. Elie Mélois, CTO & Co-founder, LumApps says, "With the new Python 3.7 runtime on App Engine standard, we were able to deploy our apps very quickly, using libraries that we wanted such as scikit. App Engine helped us scale our platform from zero to over 2.5M users, from three developers to 40—all this with only one DevOps person! " Check out the documentation to start using Python 3.7 today on the App Engine standard environment. Deploying Node.js apps on Google App Engine is now easy Hosting on Google App Engine Should you move to Python 3? 7 Python experts’ opinions

Last week, the Internet Engineering Task Force (IETF) published JSON Meta Application Protocol (JMAP) as RFC 8260, now marked as “Proposed Standard”. The protocol is authored by Neil Jenkins, Director and UX Architect at Fastmail and Chris Newman, Principle Engineer at Oracle. https://twitter.com/Fastmail/status/1152281229083009025 What is JSON Meta Application Protocol (JMAP)? Fastmail started working on JMAP in 2014 as an internal development project. It is an internet protocol that handles the submission and synchronization of emails, contacts, and calendars between a client and a server providing a consistent interface to different data types. It is developed to be a possible successor to IMAP and a potential replacement for the CardDAV and CalDAV standards. Why is it needed? According to the developers, the current standards for email protocols, that is IMAP and SMTP, for client-server communication are outdated and complicated. They are not well-suited for modern mobile networks and high-latency scenarios. These limitations in current standards have led to stagnation in the development of new good email clients. Many have also started coming up with proprietary alternatives like Gmail, Outlook, Nylas, and Context.io. Another drawback is that many mobile email clients proxy everything via their own server instead of talking directly to the user’s mail store, for example, Outlook and Newton. This is not only bad for client authors who have to run server infrastructure in addition to just building their clients, but also raises security and privacy concerns. Here’s a video by FastMail explaining the purpose behind JMAP: https://www.youtube.com/watch?v=8qCSK-aGSBA How JMAP solves the limitations in current standards? JMAP is designed to be easier for developers to work with and enable efficient use of network resources. Here are some of its properties that address the limitations in current standards: Stateless: It does not require a persistent connection, which fits best for mobile environments. Immutable Ids: It is more like NFS or filesystems with inodes rather than a name-based hierarchy, which makes renaming easy to detect and cheap to sync. Batchable API calls: It batches multiple API calls in a single request to the server resulting in reduced round trips and better battery life for mobile users. Provides flood control: The client can put limits on how much data the server is allowed to send. For instance, the command will return a ‘tooManyChanges’ error on exceeding the client’s limit, rather than returning a million * 1 EXPUNGED lines as can happen in IMAP. No custom parser required: Support for JSON, a well understood and widely supported encoding format, makes it easier for developers to get started. A backward compatible data model: Its data model is backward compatible with both IMAP folders and Gmail-style labels. Fastmail is already using JMAP in production for its Fastmail and Topicbox products. It is also seeing some adoption in organizations like the Apache Software Foundation, who added experimental support for JMAP in its free mail server Apache in version 3.0. Many developers are happy about this announcement. A user on Hacker News said, “JMAP client and the protocol impresses a lot. Just 1 to a few calls, you can re-sync entire emails state in all folders. With IMAP need to select each folder to inspect its state. Moreover, just a few IMAP servers support fast synchronization extensions like QRESYNC or CONDSTORE.” However, its use of JSON did spark some debate on Hacker News. “JSON is an incredibly inefficient format for shareable data: it is annoying to write, unsafe to parse and it even comes with a lot of overhead (colons, quotes, brackets and the like). I'd prefer s-expressions,” a user commented. To stay updated with the current developments in JMAP, you can join its mailing list. To read more about its specification check out its official website and also its GitHub repository. Wireshark for analyzing issues and malicious emails in POP, IMAP, and SMTP [Tutorial] Google announces the general availability of AMP for email, faces serious backlash from users Sublime Text 3.2 released with Git integration, improved themes, editor control and much more!  

The team behind Vue has announced Vue CLI 3.0 as the standard build tool behind Vue applications. Vue CLI 3.0 minimizes the amount of configuration developers have to go through. At its core, it provides a pre-configured build setup on top of webpack 4 with features such as hot module replacement, code-splitting, tree-shaking, efficient long term caching, etc. Vue CLI3.0 also comes with a Modern mode where developers can ship native ES2017+ bundle and legacy bundle in parallel. Developers have a Multi-page mode to build an app with multiple HTML/JS entry points. Also, they can build Vue Single-File Components into a library or native web components. Developers are also provided with optional integrations (TypeScript, PWA, Vue Router & Vuex, ESLint / TSLint / Prettier, Unit Testing via Jest or Mocha, E2E Testing via Cypress or Nightwatch) that they can use when creating a new project. Vue CLI 3.0 comes with Zero configuration In most cases, developers just need to focus on writing the code. On scaffolding a project via Vue CLI 3.0, all redundant work such as installing the Vue CLI runtime service, selected feature plugins, and the necessary config files are done automatically. Vue CLI also ships with the vue inspect command to help developers inspect the internal webpack configuration with no ejection required to make small tweaks. A powerful Plugin system Vue CLI 3.0 has an extensible Plugin system which can inject dependencies and files during the app’s scaffolding phase tweak the app’s webpack config or inject additional commands to the CLI service during development. Developers can also create their own remote preset to share their selection of plugins and options with other developers. Instant Prototyping Vue CLI 3’s vue serve command, allows developers to start prototyping with Vue single-file components, without waiting for npm install. The prototyping dev server comes with the same setup of a standard app. This allows developers to easily move the prototype *.vue file into a properly scaffolded project’s src folder to continue working on it. Modern Mode Vue CLI 3.0 has a modern mode with produces two versions of an app. First, a modern bundle targeting modern browsers that support ES modules, and second a legacy bundle targeting older browsers not supporting ES modules The modern bundle is loaded with <script type="module">, in browsers that support it. The legacy bundle is loaded with <script nomodule>, which is ignored by browsers that support ES modules. Modern mode can be activated using the following command: Vue-cli-service build --modern This release focuses on making Vue CLI as the standard build toolchain for Vue applications. However, the longer-term goal for Vue CLI is to incorporate best practices from both the present and the future into the toolchain. Vue CLI 3.0 can be tried by following the instructions from the docs. The list of all updates are available on the Vue Medium Blog. Introducing Vue Native for building native mobile apps with Vue.js Why has Vue.js become so popular? How to navigate files in a Vue app using the Dropbox API

Yesterday, at JSConfEU '19, the team behind Entropic announced Entropic, a federated package registry with a new CLI that works smoothly with the network.  Entropic is also Apache 2 licensed and is federated. It mirrors all packages that users install from the legacy package manager. Entropic offers a new file-centric API and a content-addressable storage system that minimizes the amount of data that should be retrieved over a network. This file-centric approach also applies to the publication API. https://www.youtube.com/watch?v=xdLMbvEc2zk C J Silverio, Principal Engineer at Eaze said during the announcement, “I actually believe in open source despite everything I think it's good for us as human beings to give things away to each other but I think it's important. It's going to be plenty for my work so Chris tickets in news isn't it making out Twitter moment now Christensen and I have the natural we would like to give something away to you all right now.” https://twitter.com/kosamari/status/1134876898604048384 https://twitter.com/i/moments/1135060936216272896 https://twitter.com/colestrode/status/1135320460072296449 Features of Entropic Package specifications All the Entropic packages are namespaced, and a full Entropic package spec includes the hostname of its registry. The package specifications are also fully qualified with a namespace, hostname, and package name. They appear to be: namespace@example.com/pkg-name. For example, the ds cli is specified by chris@entropic.dev/ds. If a user publishes a package to their local registry that depends on packages from other registries, then the local instance will mirror all the packages on which the user’s package depend on. The team aims to keep each instance entirely self-sufficient, so installs aren’t dependent on a resource that might vanish. And the abandoned packages are moved to the abandonware namespace. The packages can be easily updated by any user in the package's namespace and can also have a list of maintainers. The ds cli Entropic requires a new command-line client known as ds or "entropy delta". According to the Entropic team, the cli doesn't have a very sensible shell for running commands yet. Currently, if users want to install packages using ds then they can now run ds build in a directory with a Package.toml to produce a ds/node_modules directory. The GitHub page reads, “This is a temporary situation!” But Entropic appears to be more like an alternative to npm as it seeks to address the limitations of the ownership model of npm.Inc. It aims to shift from centralized ownership to federated ownership, to restore power back to the commons. https://twitter.com/deluxee/status/1135489151627870209 To know more about this news, check out the GitHub page. GitHub announces beta version of GitHub Package Registry, its new package management service npm Inc. announces npm Enterprise, the first management code registry for organizations Using the Registry and xlswriter modules

Yesterday, the Firefox team announced details of the new CSS features added to the Firefox 68. Earlier this month they had announced the release of Firefox 68 with a bunch of CSS additions and changes. Let us take a look at each: CSS Scroll Snapping The update in Firefox 68 brings the Firefox implementation in line with Scroll Snap as implemented in Chrome and Safari. In addition, it removes the old properties which were part of the earlier Scroll Snap Points Specification. The ::marker pseudo-element The ::marker pseudo-element helps in selecting the marker box of a list item. This will typically contain the list bullet, or a number. If you have ever used an image as a list bullet, or wrapped the text of a list item in a span in order to have different bullet and text colors, this pseudo-element is for you! With the marker pseudo-element, you can target the bullet itself. There are only a few CSS properties that may be used on ::marker. These include all font properties. Therefore you can change the font-size or family to be something different to the text. Using ::marker on non-list items A marker can only be shown on the list items, however you can turn any element into a list-item by using display: list-item. The official blog post covers a detailed example with codes on how you can perform this functionality. The ::marker pseudo-element is standardized in CSS Lists Level 3, and CSS Pseudo-elements Level 4, and currently implemented in Firefox 68 and Safari. CSS fixes in Firefox 68 Web developers suffer when a supported feature works differently in different browsers. These interoperability issues are often caused by the age of the web platform. Hence, the Firefox team has made many changes to the CSS specifications. Developers depend on the browsers to update their implementations to match the clarified spec. In the latest Firefox release, the team has got fixes for the ch unit, and list numbering shipping. In addition to changes to the implementation of CSS in Firefox, Firefox 68 brings some great new additions to Developer Tools to work with CSS. Take a look at the Firefox 68 release notes to get a full overview of all the changes and additions in Firefox 68.

Yesterday, the U.S. Court of Appeals for the Third Circuit voided Google's $5.5m ‘cookie’ privacy settlement that paid nothing to consumers. The settlement was meant to resolve the case against Google for violating user privacy by installing cookies in their browsers. This comes after the decision was challenged by the Center for Class Action Fairness (CCAF), an institution representing class members against unfair class action procedures and settlements. What this Google 'cookie' case was about The class-action case accuses Google of creating a web browser cookie that tracks a user’s data. It mentions that the cookie also tracked data of Safari or Internet Explorer users even if they properly configured their privacy settings. The plaintiffs claim that Google invaded their privacy under the California constitution and the state tort of intrusion upon seclusion. In February 2017,  U.S. District Judge Sue Robinson in Delaware ruled that Google will stop using cookies for Safari browsers and pay a $5.5 million settlement. This settlement will cover fees and costs of the class counsel, incentive awards for the named class representatives, and cy pres distributions. This did not include any direct compensation to class members. The six cy pres recipients were data privacy organizations who agreed to use the funds for researching and promoting browser privacy. Cy pres distributions, which means “as near as possible” allows the court to distribute the money from a class action settlement to a charitable organization. This is done when the settlement becomes impossible, impracticable, or illegal to perform. Some of the cy pres recipients had pre-existing associations with Google and the class counsel, which raised concern. “Through the proposed class-action settlement, the purported wrongdoer promises to pay a couple million dollars to class counsel and make a cy pres contribution to organizations it was already donating to otherwise (at least one of which has an affiliation with class counsel),” the Circuit Judge Thomas Ambro said. He noted that John Roberts, the U.S Chief Justice has previously expressed concerns about cy pres. Many federal courts also are quite skeptical about cy pres awards as they could prompt class counsel to put their own interests ahead of their clients’. Ambro further mentioned that the District Court’s fact-finding was insufficient. “In this context, we believe the District Court’s fact-finding and legal analysis were insufficient for us to review its order certifying the class and approving the fairness, reasonableness, and adequacy of the settlement. We thus vacate and remand for further proceedings in accord with this opinion.” CCAF objection to this settlement was overruled by U.S. District Court for the District of Delaware on February 2, 2017. Ted Frank, CCAF’s director, who is also a class member in this case, filed a notice of appeal on March 1, 2017. Ted Frank believes that the money awarded to the privacy groups should have been instead given to class members. The objection is also being supported by 13 state attorneys. “The state attorneys general agree with CCAF that the feasibility of distributing funds depends on whether it’s impossible to distribute funds to some class members, not whether it’s possible to distribute to all class members,” wrote CCAF. Now, the case is returned to the Delaware court. You can read more about Google’s Cookie Placement Consumer Privacy Litigation case on Hamilton Lincoln Law Institute. Google discriminates against pregnant women, an employee memo alleges Google Chrome to simplify URLs by hiding special-case subdomains Google Project Zero reveals six “interactionless” bugs that can affect iOS via Apple’s iMessage  

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

Photo by Emma Twersky TL;DR Our interns were phenomenal! Read on to find out why. We’ve just wrapped up our latest intern cohort on the Angular team. Please believe me when I tell you that there are some outstanding folks out there and we were lucky enough to get to work with a few of them. Because of the ongoing pandemic Google internships were fully remote. We’re fortunate to have had some really special folks because they were outstanding. Let’s take a look at the great work developed during this cohort on the Angular Team! Better Paths for Learners One of things we’re focused on with the team is making sure that the Angular learning journey works for experienced developers and new developers. Our wonderful intern on the DevRel team, Gloria, took this mission to heart. Gloria Nduka zeroed in on the friction of the learning path for new developers. She used those insights to not only help the team but also to create an interactive tutorial focused on helping developers new to Angular. The tutorial puts the output, code, and next steps in the same window allowing learners to reduce context switching. Gloria’s second project focused on reaching out to and partnering with computer science programs to expose more students to the platform. She was able to make some meaningful connections and we are excited to continue to this initiative. Seeing Opportunities in the CDK The Angular CDK is a wonderful resource aimed at abstracting common application behaviors and interactions. Andy Chrzaszcz saw an opportunity to add new functionality to menus and improve accessibility. He added some great new directives to the CDK that give developers an expressive way to build powerful menus for Angular apps! The foundation set via his contributions will give developers the ability to build all types of menus with advanced interactions like sub-menus, intelligent menu closing and more. Developers will be able to craft menus that meet the application’s needs. A Combination of Great Things Popping Up Presenting lists of data for user’s to select from is standard fare in web development. But how can the Angular CDK help with that? Niels Rasmussen gives us that answer with his project aimed at creating directives that provide a foundation for implementing complex combobox UI components. Because the goal of the Angular CDK is to provide common behaviors, Niels’s solution follows suit for the list box and combo box gives developers the freedom to customize the presentation of the UI to their specific use cases. This brings much welcomed flexibility into the fold. Thanks for Sharing Your Gifts With Us Finally, we want to send an enthusiastic thank you and good luck to all of our interns as they finish up their undergraduate programs. We’ve seen the future in you and things are looking incredibly bright. If you’d like to be an intern here at Google, we invite you to apply. The world needs your gifts and talents. These projects will be released in future versions of the platform. Stay tuned for updates. Summer 2020 Internship With the Angular Team was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Yesterday, ZDNet shared that Mozilla will be adding a new anti-fingerprinting technique called letterboxing to Firefox 67, which is set to release in May this year. Letterboxing is part of the Tor Uplift project that started back in 2016 and is currently available for Firefox Nightly users. As part of the Tor Uplift project, the team is slowing bringing the privacy-focused features of Tor Browser to Firefox. For instance, Firefox 55 came with support for a Tor Browser feature called First-Party Isolation (FPI). This feature prevented ad trackers from using cookies to track user activity by separating cookies on a per-domain basis. What is letterboxing and why it is needed? The dimensions of a browser window can act as a big source of finger-printable data that can be used by advertising networks. These advertising networks can use browser window sizes to create user profiles and track users as they resize their browser and move across new URLs and browser tabs. To maintain online privacy of users, it is important to protect this window dimension data continuously even if users resize or maximize their window or enter fullscreen. What letterboxing does is that it masks the real dimensions of the browser window while keeping the window width and height dimensions multiples of 200px and 100px during the resize operation. And, then it adds a gray space at the top, bottom, left, or right of the current page. The advertising code tracking the window resize events reads the flawed dimensions and sends it to its server, and only then Firefox removes the gray spaces. This is how the advertising code is tricked into reading the incorrect window dimensions. Here is a demo of letterboxing showing how exactly it works: https://www.youtube.com/watch?&v=TQxuuFTgz7M The letterboxing feature is not enabled by default. To enable the feature, you can go to the ‘about:config’ page in the browser, enter “privacy.resistFingerprinting" in the search box, and toggle the browser's anti-fingerprinting features to "true." To know more in detail about letterboxing, check out ZDNet’s website. Mozilla engineer shares the implications of rewriting browser internals in Rust Mozilla shares key takeaways from the Design Tools survey Mozilla partners with Ubisoft to Clever-Commit its code, an artificial intelligence assisted assistant

Yesterday, Google announced that Chrome 70 now supports WebAssembly threads. The WebAssembly Community Group has been working to bring the support for threads to the web and this is a step towards that effort. Google’s open source JavaScript and WebAssembly engine, V8 has implemented all the necessary support for WebAssembly threads. Why the support for WebAssembly threads is needed? Earlier, parallelism in browsers was supported with the help of web workers. The downside of web workers is that they do not share mutable data between them. Instead, they rely on message-passing for communication. On the other hand, WebAssembly threads can share the same Wasm memory. The underlying storage of shared memory is enabled by SharedArrayBuffer, a JavaScript primitive that allows sharing the contents of a single ArrayBuffer concurrently between workers. Each WebAssembly thread runs in a web worker, but their shared Wasm memory allows them to work as fast as they do on native platforms. This means that those applications which use Wasm threads are responsible for managing access to the shared memory as in any traditional threaded application. How you can try this support To test the WebAssembly module you need to turn on the experimental WebAssembly threads support in Chrome 70 onwards: First, navigate to the chrome://flags URL in your browser: Source: Google Developers Next, go to the experimental WebAssembly threads setting: Source: Google Developers Now change the setting from Default to Enabled and then restart your browser: Source: Google Developers The aforementioned steps are for development purposes. In case you are interested in testing your application out in the field, you can do that with origin trial. Original trials allow you to try experimental features with your users by obtaining a testing token that’s tied to your domain. You can read more in detail about the WebAssembly thread support in Chrome 70 on the Google Developers blog. Chrome 70 releases with support for Desktop Progressive Web Apps on Windows and Linux Testing WebAssembly modules with Jest [Tutorial] Introducing Walt: A syntax for WebAssembly text format written 100% in JavaScript and needs no LLVM/binary toolkits