Tech News - Front-End Web Development

Yesterday, the Ember project announced the release of version 3.4 of the three core sub-projects: Ember.js, Ember Data, and Ember CLI. Ember is an open source JavaScript frontend framework, which is based on Model-View-Viewmodel (MVVM) pattern. It enables developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework. Ember.js 3.4 Ember.js 3.4 is an incremental, backward compatible release of Ember with bug fixes, performance improvements, and minor deprecations. Angle bracket invocation You can now use angle bracket invocation instead of the classic invocation syntax. For example: Instead of using the following syntax: Source: Ember You can use: Source: Ember This release does not deprecate the classic invocation syntax, but using angle bracket invocation will provide more syntax clarity. As component invocation is often encapsulating important pieces of UI, a dedicated syntax would help visually distinguish them from other handlebars constructs, such as control flow and dynamic values. Custom Component Manager This version comes with the new Custom Component Manager feature enabled by default. This allows addon authors to access a low-level API for creating component bases classes which addon users can re-use and extend components from. Deprecations Use closure actions instead of sendAction When using sendAction, the developer passes the name of an action. When sendAction is called, Ember.js would look up that action in the parent context and invoke if it exists. This poses a few problems, such as: The action is looked up only when it is about to be invoked. This makes it easier for a typo in the action’s name to go undetected. When you use sendAction you cannot receive the return value of the invoked action. Closure actions solve these problems and are also more intuitive to use. Ember 2 Legacy This is the last version that will work with the polyfill addon for features that were deprecated in 2.x. If you have been using ember-2-legacy, it's time to upgrade. Ember Data 3.4 Ember Data is the data-persistence library that provides many of the facilities of an object-relational mapping (ORM). Ember Data 3.4 is the first Ember Data LTS release. This release has received a ton of bug fixes to address many known issues that have been reported over the last several months. Some of them are listed here: TrackableRequests for when async leakage is detected. This feature enables app developers to better use async... await while simultaneously detecting asynchronous test leaks in their data layer. External partner testing is now enabled to run the tests of external apps and addons against commits in ember-data. Transpilation issues with @ember/ordered-set are fixed. Tests are added for createRecord+unloadRecord. ember-inflector is upgraded to v3.3.0. Added module-unification adapter and adapter-test blueprints. Ember CLI 3.4 Ember CLI is the command line interface to create, develop, and build Ember.js applications. Ember CLI 3.4 is an LTS release candidate. It will receive critical bug fixes for the upcoming 6 release cycles, as well as security patches for the next 10 release cycles. Added support for Node 10 Support has been added for Node 10 and support for Node 4 has been dropped from Ember CLI's support matrix. When upgrading to Ember CLI 3.4, make sure to use it together with Node 6 and above. Template linting Automatic template linting is added to your application via ember-template-lint according to the recommended list of rules. Ember CLI will generate a TemplateLint test file for each of your templates to your test suite automatically to be run via ember test. To run the linter you can also use the new command npm run lint:hbs or yarn run lint:hbs respectively. Read the full list of changes on Ember’s official website and also check out its GitHub repository. Ember project releases v3.2.0 of Ember.js, Ember Data, and Ember CLI Getting started with Ember.js – Part 1 Getting started with Ember.js – Part 2

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

WebAssembly is changing the way we use develop applications for the web. Graphics heavy applications, browser based games, and interactive data visualizations seem to have found a better way to our UI - the WebAssembly way. The latest Blazor 0.6 experimental release from Microsoft is an indication that Microsoft has identified WebAssembly as one of the upcoming trends and extended support to their bevy of developers. Blazor is an experimental web UI framework based on C#, Razor, and HTML that runs in the browser via WebAssembly. Blazor promises to greatly simplify the task of building, fast and beautiful single-page applications that run in any browser. The following image shows the architecture of Blazor. Source: MSDN Blazor has its own JavaScript format - Blazor.js. It uses mono, an open source implementation of Microsoft’s .NET Framework based on the ECMA standards for C# and the Common Language Runtime (CLR). It also uses Razor, a template engine that combines C# with HTML to create dynamic web content. Together, Blazor is promising to create dynamic and fast web apps without using the popular JavaScript frontend frameworks. This reduces the learning curve requirement for the existing C# developers. Microsoft has released the 0.6 experimental version of Blazor on October 2nd. This release includes new features for authoring templated components and enables using server-side Blazor with the Azure SignalR Service. Another important news from this release is that the server side Blazor model will be included as Razor components in the .Net core 3.0 release. The major highlights of this release are: Templated components Define components with one or more template parameters Specify template arguments using child elements Generic typed components with type inference Razor templates Refactored server-side Blazor startup code to support the Azure SignalR Service Now the important question is how is this release going to fuel the growth of WebAssembly based web development? The answer is that probably it will take some time for WebAssembly to become mainstream because this is just the alpha release which means that there will be plenty of changes before the final release comes. But why Blazor is the right step ahead can be explained by the fact that unlike former Microsoft platforms like Silverlight, it does not have its own rendering engine. Hence pixel rendering in the browser is not its responsibility. That’s what makes it lightweight. Blazor uses the browser’s DOM to display data. However, the C# code running in WebAssembly cannot access the DOM directly. It has to go through JavaScript. The process looks like this presently. Source: Learn Blazor The way this process happens, might change with the beta and subsequent releases of Blazor. Just so that the intermediate JavaScript layer can be avoided. But that’s what WebAssembly is at present. It is a bridge between your code and the browser - which evidently runs on JavaScript. Blazor can prove to be a very good supportive tool to fuel the growth of WebAssembly based apps. Why is everyone going crazy over WebAssembly? Introducing Wasmjit: A kernel mode WebAssembly runtime for Linux Unity Benchmark report approves WebAssembly load times and performance in popular web browsers

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

Yesterday, the Rust and WebAssembly team introduced a new crate called web-sys, which provides raw bindings to all the Web APIs. The web-sys crate enables the interaction with all the standard web platform methods. Why use web-sys crate? Web includes many APIs and adding support for all of them manually can prove to be a very hectic task. These APIs are standardized with the same interface definition language (Web IDL). The developers came up with a new Web IDL frontend to wasm-bindgen. When the frontend was ready, they took the interface definitions for all the Web APIs from all their standards to automatically generate a -sys crate from them, known as web-sys. Bringing all these APIs at one place will make it easy for people to write neat libraries and other utility crates for the Web. The wasm-bindgen architecture The new wasm-bindgen architecture is shown below: Source: GitHub A frontend named wasm-bindgen-webidl is added to wasm-bindgen, which takes in Web IDL interface definitions and emits the internal Abstract Syntax Tree (AST) of wasm-bindgen. Once we have the AST, emitting zero-overhead Rust and JavaScript glue code to do type conversion and shepherding of function parameters is the same as normal #[wasm_bindgen] annotations. Using this architecture makes wasm-bindgen future-compatible with the host bindings proposal. This proposal focuses on making WebAssembly to directly call into native DOM methods without going through a JavaScript shim. This will provide better performance since calls from wasm can be statically validated to type check once at compilation time, rather than dynamically on every single call. To know more about the web-sys crate, check out the official announcement at GitHub. Introducing Wasmjit: A kernel mode WebAssembly runtime for Linux Why is everyone going crazy over WebAssembly? Next.js 7, a framework for server-rendered React applications, releases with support for React context API and Webassembly

Yesterday, Vivaldi 2.0 was released with over 1,500 improvements, which includes features like Vivaldi Sync, Resizable Tab Tiling, and Floating Web Panels, among others. Vivaldi is a cross-platform web browser, which provides users many customization options to take control of what and how they browse the web. Sync your data with Vivaldi Sync Vivaldi Sync, as the name suggests, allows you to sync your data across computers using your Vivaldi account. You can choose what you want to sync, including your bookmarks, Speed Dials, saved password, history, extensions, and notes. To activate Vivaldi Sync go to the Settings menu or just click the cloud icon in the browser's status bar. Tab management got better Vivaldi comes with several unique features such as Tab Stacks and Quick Commands, to help you better manage your tabs. Vivaldi 2.0 provides features like Resizable Tab Tiling and a list style view to the Tab Cycler to make tab management a lot easier than before. Resizable Tab Tiling allows you to resize the tiles when viewing tabs in tile view. Also, the adjusted layout remains the same after restarts and loading of saved sessions. This version also comes with a list-style view to the Tab Cycler, which makes viewing and finding the tabs easier. Smarter browsing with Web Panels Web Panels allow you to simultaneously browse your favourite sites alongside the tabs in your main window. In Vivaldi 2.0 they have made checking messaging apps, social feeds, and news sites much easier with the addition of the following: Floating Web Panels: Instead of resizing the main window you can now use the floating web panels over the page. This feature can be activated through Tools | Settings | Panel | Panel Options. Web Panel Suggestions: When adding a new Web Panel you will see suggestions based on the sites that you regularly visit. More built-in tools You get more built-in tools to improve your productivity in the browser: Notes: With Notes you can annotate websites and add a description or screenshots to the notes while surfing the web. Capture: This tool allows you to capture either a full page screenshot or a selection of the screen that you define. Image Properties: You can view all the information you need about an image right in the browser and also copy it to the clipboard. History: It provides you a detailed overview of your browsing habits backed by statistics and makes it easier to find previously visited sites. Effortless navigation You can interact with the browser in various ways and get your job done faster: Keyboard Shortcuts: You can do almost everything you do on a computer in Vivaldi by setting keyboard shortcuts, such as creating windows, tabs, and Notes. Mouse Gestures: Speed up navigation and perform useful actions with quick movements of the mouse. You can also edit existing gestures and add your own to match your browsing style. Searching with assigned nicknames: Using Search Engine Nicknames, you can quickly switch between one search engine to another just by typing the nickname at the front of your search term. Speed Dials: Quickly access your favorite websites from the start page using the Speed Dials feature. You can customize your Speed Dials and folders to organize your content. Improved privacy with DuckDuckGo and Qwant To improve data privacy and protection, the browser is now integrated with DuckDuckGo as their default Private Search. Also, Qwant is added to the list of suggested search engines. To know more about the updates in Vivaldi 2.0 check out their official announcement. Firefox Reality 1.0, a browser for mixed reality, is now available on Viveport, Oculus, and Daydream Unity Benchmark report approves WebAssembly load times and performance in popular web browsers Tor Browser 8.0 powered by Firefox 60 ESR released

Last week, the Nuxt.js community announced the release of Nuxt.js 2.0 with major improvements. This release comes with a scaffolding tool, create-nuxt-app to quickly get you started with Nuxt.js development. To provide a faster boot-up and re-compilation, this release is upgraded to Webpack 4 (Legato) and Babel 7. Nuxt.js is an open source web application framework for creating Vue.js applications. You can choose between universal, static generated or single page application. What is new in Nuxt.js 2.0? Introduced features and upgradations create-nuxt-app To get you quickly started with Nuxt.js development, you can use the newly introduced create-nuxt-app tool. This tool includes all the Nuxt templates such as starter template, express templates, and so on. With create-nuxt-app you can choose between integrated server-side framework, UI frameworks, and add axios module. Introducing nuxt-start and nuxt-legacy To start Nuxt.js application in production mode nuxt-start is introduced. To support legacy build of Nuxt.js for Node.js < 8.0.0,  nuxt-legacy is added. Upgraded to Webpack 4 and Babel 7 To provide faster boot-up time and faster re-compilation, this release uses Webpack 4 (Legato) and Babel 7. ESM supported everywhere In this release, ESM is supported everywhere. You can now use export/import syntax in nuxt.config.js, serverMiddleware, and modules. Replace postcss-next with postcss-preset-env Due to the deprecation of cssnext, you have to use postcss-preset-env instead of postcss-cssnext. Use ~assets instead of ~/assets Due to css-loader upgradation, use ~assets instead of ~/assets for alias in <url> CSS data type, for example, background: url("~assets/banner.svg"). Improvements The HTML script tag in core/renderer.js is fixed to pass W3C validation. The background-color property is now replaced with background in loadingIndicator, to allow the use of images and gradients for your background in SPA mode. Due to server/client artifact isolation, external build.publicPath need to upload built content to .nuxt/dist/client directory instead of .nuxt/dist. webpackbar and consola provide a improved CLI experience and better CI compatibility. Template literals in lodash templates are disabled. Better error handling if the specified plugin isn't found. Deprecated features The vendor array isn't supported anymore. DLL support is removed because it was not stable enough. AggressiveSplittingPlugin is obsoleted, users can use optimization.splitChunks.maxSize instead. The render.gzip option is deprecated. Users can use render.compressor instead. To read more about the updates, check out Nuxt’s official announcement on Medium and also see the release notes on its GitHub repository. Next.js 7, a framework for server-rendered React applications, releases with support for React context API and Webassembly low.js, a Node.js port for embedded systems Welcome Express Gateway 1.11.0, a microservices API Gateway on Express.js

Yesterday, the Next.js researchers announced that the latest version--v7-- of its React Framework is now production-ready. The Next.js 7 has had 26 canary releases and 3.4 million downloads so far. Alongwith the 7th version release, they have also launched a completely redesigned nextjs.org. This version is power-packed with faster boot and re-compilation improvements, better error reporting, static CDN support and much more. Key highlights of the Next.js 7 DX Improvements The Next.js 7 includes many significant improvements to the build and debug pipelines. With the inclusion of webpack 4, Babel 7 and improvements and optimizations on the codebase, Next.js can now boot up to 57% faster during development. Also, due to the new incremental compilation cache, any changes made by the user into the code will build 40% faster. While developing and building users will now see a better real time feedback with the help of webpackbar. Better error reporting with react-error-overlay Until now, users would render the error message and its stack trace. From this version, react-error-overlay has been used to enrich the stack trace with: Accurate error locations for both server and client errors Highlights of the source to provide context A full rich stack trace react-error-overlay makes it easy to open the text editor by just clicking on a specific code block. Upgraded compilation pipeline: Webpack 4 and Babel 7 Webpack 4 This version of Next.js is now powered by the latest webpack 4, with numerous improvements and bugfixes including: Support for .mjs source files Code splitting improvements Better tree-shaking (removal of unused code) support Another new feature is WebAssembly support. Here’s an example of how Next.js can even server-render WebAssembly. With webpack 4, a new way of extracting CSS from bundles called mini-extract-css-plugin is introduced. @zeit/next-css, @zeit/next-less, @zeit/next-sass, and @zeit/next-stylus are now powered by mini-extract-css-plugin. Babel 7 Next.js 7 now uses the stable version of Babel (Babel 7). For a full list of changes in Babel 7, head over to its release notes. Some of the main features of Babel 7 are: Typescript support, for Next.js you can use @zeit/next-typescript Fragment syntax <> support babel.config.js support overrides property to apply presets/plugins only to a subset of files or directories Standardized Dynamic Imports Starting with Next.js 7, it no longer has the default import() behavior. This means users get full import() support out of the box. This change is fully backwards-compatible as well. Making use of a dynamic component remains as simple as: import dynamic from 'next/dynamic' const MyComponent = dynamic(import('../components/my-component')) export default () => {  return <div>    <MyComponent />  </div> } Static CDN support With Next.js 7 the directory structure of .next is changed to match the url structure: https://cdn.example.com/_next/static/<buildid>/pages/index.js // mapped to: .next/static/<buildid>/pages/index.js While researchers also recommend using the proxying type of CDN, this new structure allows users of a different type of CDN to upload the .next directory to their CDN. Smaller initial HTML payload As Next.js pre-renders HTML, it wraps pages into a default structure with <html>, <head>, <body> and the JavaScript files needed to render the page. This initial payload was previously around 1.62kB. With Next.js 7 the initial HTML payload has been optimized, it is now 1.5kB, a 7.4% reduction, making your pages leaner. React Context with SSR between App and Pages Starting from Next.js 7 there is support for the new React context API between pages/_app.js and page components. Previously it was not possible to use React context in between pages on the server side. The reason for this was that webpack kept an internal module cache instead of using require.cache. The Next.js developers have written a custom webpack plugin that changes this behavior to share module instances between pages. In doing so users can not only use the new React context but also reduce Next.js's memory footprint when sharing code between pages. To know more about these and other features in detail, visit the Next.js 7 blog. low.js, a Node.js port for embedded systems Browser-based Visualization made easy with the new P5.js Deno, an attempt to fix Node.js flaws, is rewritten in Rust  

Gatsby.js or more commonly known as Gatsby is a React-based website and app generator. It is powered by GraphQL and is used as a static site generator. But it’s not all static, it can be viewed more like a modern front end framework. It is used for creating blogs, apps ecommerce sites, and documentation. Yesterday the second major release, Gatsby 2.0 was released. Gatsby 2.0 comes 18 months after the first major release and has the hard work of the Gatsby core team and nearly 315 contributors. This second major release is focused on performance and developer experience. The highlights are 75% reduced build times, JavaScript client runtime by shrunk by 31%. Gatsby’s core dependencies are also upgraded to their latest versions: webpack 4, Babel 7, React 16.5. Gatsby 2.0 has faster site building The focus is heavily on improving build speeds for v2 and there are significant speed improvements across various parts of the build pipeline. The improvements include: Three to four times improved server side rendering performance due to React 16 Less memory usage for server rendering pages Many speedups to JavaScript and CSS bundling with webpack 4 A pull called “hulksmash” made many small fixes to refactor slow algorithms All available cores are used for rendering server pages JavaScript client runtime reduced by 31% The core JavaScript shipped with every Gatsby site is shrunk by 31%. Less use of JavaScript means faster websites. The core JavaScript size in Gatsby 1.0 was 78.5kb and in Gatsby 2.0 it is 53.9kb, both are sizes of GZIP files. The reduced sizes are largely due to the hard work done by the libraries. The code size is decreased by 30% in React 16. That is 34.8kb from the previous 49.8kb in React 15. The routers are switched from react-router to @reach/router bringing a 25% smaller bundle of 6kb from 8kb. For a complete list of changes, visit the Gatsby Blog. To know more visit their documentation and GitHub. low.js, a Node.js port for embedded systems Browser based Visualization made easy with the new P5.js Deno, an attempt to fix Node.js flaws, is rewritten in Rust

Typescript 3.1 release candidate is here with a few breaking changes and a showcase of what’s there to come in Typescript 3.1. TypeScript 3.1 RC is meant to gather all feedback to ensure a smooth final release. Here are the breaking changes: Support for Mappable tuple and array types Mapping over values in a list is one of the most common patterns in programming. Typescript 3.1 RC introduces mapped object types when iterating over tuples and arrays. This means if you’re already using existing mapped types like Partial or Required from lib.d.ts, they also automatically work on tuples and arrays now. Properties on function declarations Traditionally, properties on function declarations has been done in Typescript using namespaces. They are internal modules which organize code and support the concept of value-merging, where you can add properties to classes and functions in a declarative way. But they come with their own problems: ECMAScript modules have become the preferred format for organizing new code in the broader TypeScript & JavaScript community, and namespaces are TypeScript-specific. Additionally, namespaces don’t merge with var, let, or const declarations Now, in TypeScript 3.1, for any function declaration or const declaration that’s initialized with a function, the type-checker will analyze the containing scope to track any added properties. As an added bonus, this functionality in conjunction with TypeScript 3.0’s support for JSX.LibraryManagedAttributes makes migrating an untyped React codebase to TypeScript significantly easier. Vendor-specific declarations removed TypeScript 3.1 RC now generates parts of lib.d.ts (and other built-in declaration file libraries) using Web IDL files provided from the WHATWG DOM specification. This makes lib.d.ts easier to keep up-to-date. However, many vendor-specific types have been removed. Differences in narrowing functions Using the typeof foo === "function" type guard may provide different results when intersecting with union types composed of {}, Object, or unconstrained generics. You can have a look at the Typescript roadmap to get the whole picture of the release. The final release, Typescript 3.1, is expected to ship in just a few weeks. Read more about the Typescript 3.1 RC on Microsoft blog. TypeScript 3.0 is finally released with ‘improved errors’, editor productivity and more. TypeScript 3.0 release candidate is here. How to install and configure TypeScript.

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

GitHub has finally finished removing the JQuery dependency from its frontend code. This was a result of gradual decoupling from JQuery which began back in at least 2 years ago. They have chosen not to replace JQuery with yet another framework. Instead, they were able to make this transition with the help of polyfills that allowed them to use standard browser features such as, EventListener, fetch, Array.from, and more. Why GitHub chose JQuery in the beginning? Simple: GitHub started using JQuery 1.2.1 as a dependency in 2007. This enabled its web developers to create more modern and dynamic user experience. JQuery 1.2.1 allowed developers to simplify the process of DOM manipulations, define animations, and make AJAX requests. Its simple interface gave GitHub developers a base to craft extension libraries such as, pjax and facebox, which later became the building blocks for the rest of GitHub frontend. Consistent: Unlike the XMLHttpRequest interface, JQuery was consistent across browsers. GitHub in its early days chose JQuery as it allowed their small development team to quickly prototype and release new features without having to adjust code specifically for each web browser. Why they decided to remove JQuery dependency? After comparing JQuery with the rapid evolution of supported web standards in modern browsers, they observed that: CSS classname switching can be achieved using Element.classList. Visual animations can be created using CSS stylesheets without writing any JavaScript code. The addEventListeners method, which is used to attach an event handler to the document, is now stable enough for cross-platform use. $.ajax requests can be performed using the Fetch Standard. With the evolution of JavaScript, some syntactic sugar that jQuery provides has become redundant. The chaining syntax of JQuery didn’t satisfy how GitHub wanted to write code going forward. According to this announcement, this step of decoupling from jquery will allow them to: Rely on web standards more Have MDN web docs as their default documentation to refer Maintain more resilient code in future Speeding up page load times and JavaScript execution time Which technology is it using now? GitHub has moved from JQuery to vanilla JS (plain JavaScript). It is now using querySelectorAll, fetch for ajax, and delegated-events for event handling; polyfills for standard DOM manipulations, and Custom Elements. The adoption of Custom Elements is on the rise. It is a component library native to the browser, which means that users do not have to download, parse, and compile additional bytes of a framework. With the release of Web Components v1 in 2017, GitHub started to adopt Custom Elements on a wider scale. In future they are also planning to use Shadow DOM. To read more about how GitHub made this transition to using standard browser features, check out their official announcement. Github introduces Project Paper Cuts for developers to fix small workflow problems, iterate on UI/UX, and find other ways to make quick improvements Why Golang is the fastest growing language on GitHub

React announced its monthly release yesterday, React 16.5.0. In this release they have improved warning messages, added support for React DevTools Profiler in React DOM, and done some bug fixes. Updates in React A Dev warning is shown if React.forwardRef render function doesn't take exactly two arguments. A more improved message is shown if someone passes an element to createElement by mistake. The onRender function will be called after mutations and commitTime reflects pre-mutation time. Updates in React DOM New additions Support for React DevTools Profiler is added. The react-dom/profiling entry point is added for profiling in production. The onAuxClick event is added for browsers that support it. The movementX and movementY fields are added to mouse events. The tangentialPressure and twist fields are added to pointer events. Support for passing booleans to the focusable SVG attribute. Improvements Improved component stack for the folder/index.js naming convention. Improved warning when using getDerivedStateFromProps without initialized state. Improved invalid textarea usage warning. Electrons <webview> tag are now allowed without warnings. Bug fixes Fixed incorrect data in compositionend event when typing Korean on IE11. Avoid setting empty values on submit and reset buttons. The onSelect event not being triggered after drag and drop. The onClick event not working inside a portal on iOS. A performance issue when thousands of roots are re-rendered. gridArea will be treated as a unitless CSS property. The checked attribute is not getting initially set on the input. A crash when using dynamic children in the option tag. Updates in React DOM Server A crash is fixed that happens during server render in react 16.4.1 Fixes a crash when setTimeout is missing This release fixes a crash with nullish children when using dangerouslySetInnerHtml in a selected option. Updates in React Test Renderer and Test Utils A Jest-specific ReactTestUtils.mockComponent() helper is now deprecated. A warning is shown when a React DOM portal is passed to ReactTestRenderer. Improvements in TestUtils error messages for bad first argument. Updates in React ART Support for DevTools is added New package for scheduling (experimental) The ReactDOMFrameScheduling module will be pulled out in a separate package for cooperatively scheduling work in a browser environment. It's used by React internally, but its public API is not finalized yet. To see the complete list of updates in React 16.5.0, head over to their GitHub repository. React Next React Native 0.57 coming soon with new iOS WebViews Implementing React Component Lifecycle methods [Tutorial] Understanding functional reactive programming in Scala [Tutorial]

The Tor Project team has released Tor Browser 8.0 today. The update comes with an upgraded language page, new onboarding experience for new users, additional language support and optimized bridge fetching technique. The Tor Browser, based on Mozilla's Extended Support Release version of the Firefox web browser, helps users anonymize their Internet connection. The browser is famous for bundling data into encrypted packets before passing them through the network, thus keeping user’s identity at bay. This new version powered by Firefox 60 ESR (Extended Support Release) is a level up from the previous Firefox 52 ESR. 3 major upgrades in Tor Browser 8.0 #1 A New Onboarding Experience It is now really easy for new users to understand what the Tor browser is and how to use it.  The welcome tour provides users with all the information needed to get started with the Tor browser. The ‘About’ section of the browser takes viewers through aspects that make Tor different than other commonly available browsers. Users are also taken through privacy and security settings to ensure that they have a smooth experience using the browser. Source: ghacks.net #2 Optimized Bridge Configuration Flow Bridge Fetching, has been optimized in the new version. In the previous versions, users had to send an email or visit a website to request new bridges for locations where Tor browser is blocked because of censorship related issues. With the Tor 8.0, users have to only  solve a captcha in Tor launcher toto request new bridges from within the browser directly. All that has to be done is- Activate the Tor button in the browser interface and select Tor Network Settings. Enable the "Tor is censored in my country" checkbox on the page that opens. Select "Request a bridge from torproject.org". Solve the captcha displayed. Source:ghacks.net #3 Improved Language Support Previous versions of Tor supported fewer languages, which meant that users were unable to use the browser in their native language. The Tor Browser 8.0 has introduced the support for nine languages - Catalan, Irish, Indonesian, Icelandic, Norwegian, Danish, Hebrew, Swedish, and Traditional Chinese. The browser has added Component and library upgrades to new versions while Blocking navigator.mozAddonManager so that websites can't see it. You can read the full release announcement for more information on the upgrades introduced in Tor 8.0. Ubuntu free Linux Mint Project, LMDE 3 ‘Cindy’ Cinnamon, released Baidu releases EZDL – a platform that lets you build AI and machine learning models without any coding knowledge Splinter 0.9.0, the popular web app testing tool, released!  

On 2nd September 2018 Google Chrome celebrated its 10th birthday. Google dressed up Chrome with a new look by launching Chrome 69. However, due to the long Labor Day weekend in the U.S. this year, it posted and updated about Chrome’s new look a few days later on 4th September 2018. With more than 1 billion active users, Google Chrome has become the most-used and the most-loved platform for normal users as well as web developers. With Chrome’s new version releases that take place every six weeks, developers can stay on top of everything available, as well as all the features that have been deprecated or removed. The release also includes powerful graphics, a more powerful Omnibox, an updated password manager, improvised autofill, and a lot of developer-specific and security improvements. What’s new in Chrome 69? A brand new UI for a seamless experience Chrome’s 69’s look can now be seen across all platforms (desktop, Android, and iOS). Users will see more rounded shapes, new icons, and a new color palette. For desktop, Google also changed the shape of its tabs making the web icons easily visible, thus resulting in an easier navigation across tabs. For mobile, Chrome 69 includes a number of changes for faster browsing. On iOS, the toolbar is moved to the bottom for an easy access. Across Chrome, Google has simplified the prompts, menus, and even the URLs in the user’s address bar. A lightning fast experience A lot of online activities such as booking travel tickets and appointments, shopping, and working through the to-do lists across multiple sites at once have been one of the features of Chrome. Following this, Google wants to make this experience a lot easier and safe in its new and updated Chrome 69. Now, Chrome can more accurately fill in user passwords, addresses, and credit card numbers, for an easy checkout through online forms. All this information is saved on user’s Google account, and can also be accessed directly from the Chrome toolbar. Staying secure on the web means using strong and unique passwords for every different site. When it’s time to create a new password, Chrome will now generate one for the user. No more using pet names or birth dates, that can easily be cracked. Chrome will save the password, and next time the user signs in, it’ll be there, on both the laptop and phone. Chrome 69 now with a smarter search bar The Omnibox, which is placed on top of chrome, combines both the search bar and address bar into one. In this new Chrome version, Google has made Omnibox much faster, and much smarter. The Omnibox will now show the answers directly in the address bar without having to open a new tab—from rich results on public figures or sporting events, to instant answers like the local weather via weather.com or a translation of a foreign word. The plus point of this Omnibox is if two dozen tabs open across three browser windows: Users can search for a website in the Omnibox and Chrome will tell if it’s already open and allows the user to jump straight to it with “Switch to tab.” Also, the users will also be able to search files from their Google Drive directly in their Omnibox too. A personalized Chrome for everyone! This new version can now be easily personalized as per user convenience. Users can now create and manage shortcuts to their favorite websites directly from the new tab page. All they have to do is, simply open a new tab and ‘Add shortcut’. They can also customize the background of a newly-opened tab with their favorite photograph. Other plans by Google, for Chrome Google has launched several other features for user privacy and safety including: an ad blocker to keep users safe from malicious and annoying ads. Moved the web to HTTPS to keep you secure online. Launched site isolation which provides deeper defense against many types of attacks including Spectre, and brought VR and AR browsing to Chrome. Google further plans to roll out a set of new experiments to improve Chrome’s startup time, latency, usage of memory, and usability. A new CSS features to improve performance tracking ability has been rolled out just for Chrome’s developer community. Here’s a short video explaining all the new features in the new Chrome 69. https://youtu.be/WF2IjH35w8o Chromebots: Increasing Accessibility for New Makers Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more