Tech News - Web Development

Photon Micro is an open-source, lightweight and modular GUI, which comprises of fine-grained and flyweight ‘elements’. It uses a declarative C++ code with a heavy emphasis on reuse, to form deep element hierarchies. Photon has its own HTML5 inspired canvas drawing engine and uses Cairo as a 2D graphics library. Cairo supports the X Window System, Quartz, Win32, image buffers, PostScript, PDF, and SVG file output. Joel de Guzman, the creator of Photon Micro GUI, and the main author of the Boost.Spirit Parser library, the Boost.Fusion library and the Boost.Phoenix library says, “One of the main projects I got involved with when I was working in Japan in the 90s, was a lightweight GUI library named Pica. So I went ahead, dusted off the old code and rewrote it from the ground up using modern C++.” The Photon Micro GUI client can use the following gallery code: Image Source: Cycfi This pops up a warning: Image Source: Cycfi Some highlights of Photon Micro GUI Modularity and reuse are two important design aspects of the Photon Micro GUI. It is supported by the following functionalities: Share Photon Micro GUI can be shared using std::shared_ptr. Hold Hold can be used to share an element somewhere in the view hierarchy. Key_intercept It is a delegate element that intercepts key-presses. Fixed_size Elements are extremely lightweight, fixed_size fixes the size of the GUI contained element. margin, left_margin These are two of the many margins, including right_margin, top_margin, etc. It adds padding around the element like the margin adds 20 pixels all around the contained element. The left_margin adds a padding of 20 pixels to separate the icon and the text box. vtile, htile Vertical and horizontal fluid layout elements allocate sufficient space to contained elements. This enables stretchiness, fixed sizing, and vertical and horizontal alignment, to place elements in a grid. Stretchiness is the ability of elements to stretch within a defined minimum and maximum size limit. Guzman adds, “While it is usable, and based on very solid architecture and design, there is still a lot of work to do. First, the Windows and Linux ports are currently in an unusable state due to recent low-level refactoring.” Some developers have shown interest in the elements of Photon Micro GUI. https://twitter.com/AlisdairMered/status/1148242189354450944 A user on Hacker News comments, “Awesome, that looks like an attempt to replace QML by native C++. Would be great if there was a SwiftUI inspired C++ UI framework (well, of course C++ might not lend itself so well for the job, but I'm just very curious what it would look like if someone makes a real attempt).” Some users feel that more work needs to be done to make this GUI more accessible and less skeuomorphic. [box type="shadow" align="" class="" width=""]Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them (IDF).[/box] A user says, “Too many skeuomorphic elements. He needs to take the controls people know and understand and replace them with cryptic methods that require new learning, and are hidden from view by default. Otherwise, no one will take it seriously as a modern UI.” Another user on Hacker News adds, “don’t use a GUI toolkit like this, that draws its own widgets rather than using platform standard ones when developing a plugin for a digital audio workstation (e.g. VST or Audio Unit), as this author is apparently doing. Unless someone puts in all the extra effort to implement platform-specific accessibility APIs for said toolkit.” For details about the other highlights, head over to Joel de Guzman’s post. Apple showcases privacy innovations at WWDC 2019: Sign in with Apple, AdGuard Pro, new App Store guidelines and more Google and Facebook allegedly pressured and “arm-wrestled” EU expert group to soften European guidelines for fake news: Open Democracy Report Google I/O 2019 D1 highlights: smarter display, search feature with AR capabilities, Android Q, linguistically advanced Google lens and more  

At the ongoing 2019 Google I/O, Google made a major overhaul to its Flutter UI framework. Flutter is now expanded from mobile to multi-platform. The company released the first technical preview of Flutter for web. The core framework for mobile devices was also upgraded to Flutter 1.5. For desktop, Flutter is being used as an experimental project. It is not production-ready, but the team has published early instructions for developing  apps to run on Mac, Windows, and Linux. An embedding API for Flutter is also available that allows it to be used in scenarios for home and automotives. Google notes, “The core Flutter project has been making progress to enable desktop-class apps, with input paradigms such as keyboard and mouse, window resizing, and tooling for Chrome OS app development. The exploratory work that we did for embedding Flutter into desktop-class apps running on Windows, Mac and Linux has also graduated into the core Flutter engine.” Flutter for Web Flutter for web allows web-based applications to be built using the Flutter framework. Per Google, with Flutter for web you can create “highly interactive, graphically rich content,” though it plans to continue evolving this version with a “focus on performance and harmonizing the codebase.” It allows developers to compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. Google teamed up with the New York Times to build a small puzzle game called Kenken as an early example of what can be built using Flutter for Web. This game uses the same code across Android, iOS, the web and Chrome OS. Source: Google Blog Flutter 1.5 Flutter 1.5 hosts a variety of new features including updates to its iOS and Material widget and engine support for new mobile devices types. The latest release also brings support for Dart 2.3 with extensive UI-as-code functionality. It also has an in-app payment library which will make monetizing Flutter based apps easier. Google also showcased an ML Kit Custom Image Classifier, built using Flutter and Firebase at Google I/O 2019. The kit offers an easy-to-use app-based workflow for creating custom image classification models. You can collect training data using the phone’s camera, invite others to contribute to your datasets, trigger model training, and use trained models, all from the same app. Google has also released a comprehensive new training course for Flutter, built by The App Brewery. Their new course is available for a time-limited discount from $199 to just $10. Netizens had trouble acknowledging Google’s move and were left wondering as to whether Google wants people to invest in learning Dart or Kotlin. For reference, Flutter is entirely built in Dart and Google made two major announcements for Kotlin at the Google I/O. Android development will become increasingly Kotlin-first, and Google announcing the first preview of Jetpack Compose, a new open-source UI toolkit for Kotlin developers. A comment on Hacker News reads, “This is massively confusing. Do we invest in Kotlin ...or do we invest in Dart? Where will Android be in 2 years: Dart or Kotlin?” In response to this, another comment reads, “I don't think anyone has a definite answer, not even Google itself. Google placed several bets on different technologies and community will ultimately decide which of them is the winning one. Personally, I think native Android (Kotlin) and iOS (Swift) development is here to stay. I have tried many cross-platform frameworks and on any non-trivial mobile app, all of them cause more problem than they solve.” Another said, “If you want to do android development, Kotlin. If you want to do multi-platform development, flutter.” “Invest in Kotlin. Kotlin is useful for Android NOW. Whenever Dart starts becoming more mainstream, you'll know and have enough time to react to it”, was another user’s opinion. Read the entire conversation on Hacker News. Google launches Flutter 1.2, its first feature update, at Mobile World Congress 2019 You can now permanently delete your location history and web and app activity data on Google Microsoft Build 2019: Microsoft showcases new updates to MS 365 platform with a focus on AI and developer productivity

A former Spotify engineer, Mattias Peter Johansson, has outlined how the music streaming platform uses JavaScript on it's desktop application. It's complicated and, according to Reddit, "kind of insane". Responding to a question on Quora, Johansson says it could be "among the top 25 most intricate uses of JavaScript in the world." What's particularly interesting is how this intricate JavaScript has influenced the Spotify architecture and the way the development teams are organized. How JavaScript is used on the Spotify desktop app JavaScript is used across the Spotify desktop client. Wherever UI is concerned, it uses JavaScript. C++ is used for functionality beneath the UI, with JavaScript sitting on top of it. The languages are connected by an interface aptly called a 'bridge.' Spotify's squads and spotlets The Spotify team is made up of small squads of anywhere from 3 to 12 people. Johansson explains that  "a feature is generally owned by a single squad, and during normal conditions the squad has all it needs to develop and maintain its feature." Each team has as many backend, front end, and mobile developers as necessary for the particular feature it owns. These features are known as 'spotlets.' Each of these spotlets are essentially web apps that come together to power the desktop app's UI. Johansson explains how they work, saying: They all run inside Chromium Embedded Framework, each app living within their own little iframe, which gives squads the ability to work with whatever frameworks they need, without the need to coordinate tooling and dependencies with other squads. The advantage of this is that it makes technical decision making much easier. As Johansson explains, "introducing a library is a discussion between a few people instead of decision that involves ~100 people and their various needs." Shared functionalities across the Spotify development team Although spotlets and squads create a somewhat fragmented picture of a development team, things are unified. "The latest versions of all Spotlets are zipped and bundled with the desktop client binary on every release, assets and all," says Johansson. Individual spotlets are also sometimes released where an emergency fix might be needed. Although tooling decisions are left up to individual squads, there are a couple of tools that are used across the team. This includes GLUE, a CSS framework that allows some coordination and alignment in terms of design. The team also rely heavily on npm, as you might expect. "We have our own internal npm repository where we publish internal modules, and we package the code together using a Browserify-like tool."

Laravel 6.0 releases with improvements in Laravel 5.8. Introduction to semantic versioning, compatibility with Laravel Vapor, improved authorization responses, job middleware, lazy collections, sub-query improvements, the extraction of frontend scaffolding to the laravel/ui Composer package, and a variety of other bug fixes and usability improvements. Key features in Laravel 6.0 Semantic versioning The Laravel framework package now follows the semantic versioning standard. This makes the framework consistent with the other first-party Laravel packages which already followed this versioning standard. Laravel vapor compatibility Laravel 6.0 provides compatibility with Laravel Vapor, an auto-scaling serverless deployment platform for Laravel. Vapor abstracts the complexity of managing Laravel applications on AWS Lambda, as well as interfacing those applications with SQS queues, databases, Redis clusters, networks, CloudFront CDN, and more. Improved exceptions via ignition Laravel 6.0 ships with Ignition, which is a new open source exception detail page. Ignition offers many benefits over previous releases, such as improved Blade error file and line number handling, runnable solutions for common problems, code editing, exception sharing, and an improved UX. Improved authorization responses In previous releases of Laravel, it was difficult to retrieve and expose custom authorization messages to end users. This made it difficult to explain to end-users exactly why a particular request was denied. In Laravel 6.0, this is now easier using authorization response messages and the new Gate::inspect method. Job middleware Job middleware allows developers to wrap custom logic around the execution of queued jobs, reducing boilerplate in the jobs themselves. Lazy collections Many developers already enjoy Laravel's powerful Collection methods. To supplement the already powerful Collection class, Laravel 6.0 has introduced a LazyCollection, which leverages PHP's generators to allow users to work with very large datasets while keeping memory usage low. Eloquent subquery enhancements Laravel 6.0 introduces several new enhancements and improvements to database subquery support. To know more about this release, check out the official Laravel blog page. What’s new in web development this week? Wasmer’s first Postgres extension to run WebAssembly is here! JavaScript will soon support optional chaining operator as its ECMAScript proposal reaches stage 3 Google Chrome 76 now supports native lazy-loading

After releasing Angular 7 beta in August, the Angular team released the stable version of Angular 7 yesterday. This version comes with a DoBootstrap interface, an update to XMB placeholders, and updated dependencies: TypeScript 3.1 and RxJS 6.3. Let's see what features this version brings in: The DoBootstrap interface Earlier, there was an interface available for each lifecycle hook but ngDoBootstrap was missing the corresponding interface. This release comes with the new lifecycle hook interface DoBootstrap. Here's an example using DoBootstrap: class AppModule implements DoBootstrap {  ngDoBootstrap(appRef: ApplicationRef) {    appRef.bootstrap(AppComponent);  } } An "original" placeholder value on extracted XMB XMB placeholders (<ph>) are now updated to include the original value on top of an example. By definition, placeholders have one example tag (<ex>) and a text node. The text node will be used as the original value from the placeholder, while the example will represent a dummy value. For example: compiler-cli An option is added to extend angularCompilerOptions in tsconfig. Currently, only TypeScript supports merging and extending of compilerOptions. This update will allow extending and inheriting angularCompilerOptions from multiple files. A new parameter for CanLoad interface In addition to Route, an UrlSegment[] is passed to implementations of CanLoad as a second parameter. It will contain the array of path elements the user tried to navigate to before canLoad is evaluated. This will help users to store the initial URL segments and refer to them later, for example, to go back to the original URL after authentication via router.navigate(urlSegments). Existing code still works as before because the second function parameter is not mandatory. Dependency updates The following dependencies are upgraded to their latest: angular/core now depends on TypeScript 3.1 and RxJS 6.3 @angular/platform-server now depends on Domino 2.1 Bug fixes Along with these added features, Angular 7 comes with many bug fixes, some of which are: Mappings are added for ngfactory and ngsummary to their module names in aot summary resolver. fileNameToModuleName lookups are now cached to save expensive reparsing of the file when not run as Bazel worker. It is allowed to privately import compile_strategy. Earlier, when an attempt was made to bootstrap a component that includes a router config using AOT Summaries, the test used to fails. This is fixed in this release. The compiler is updated to flatten nested template fns and to generate new slot allocations. To read the full list of changes, check out Angular’s GitHub repository. Angular 7 beta.0 is here! Why switch to Angular for web development – Interview with Minko Gechev ng-conf 2018 highlights, the popular angular conference

Yesterday, on the first day of Microsoft Build 2019, the team at Microsoft introduced WSL 2, the newest architecture for the Windows Subsystem for Linux. With WSL 2, file system performance will increase and users will be able to run more Linux apps. The initial builds of WSL 2 will be available by the end of June, this year. https://twitter.com/windowsdev/status/1125484494616649728 https://twitter.com/poppastring/status/1125489352795201539 What’s new in WSL 2? Run Linux libraries WSL 2 powers Windows Subsystem for Linux to run ELF64 Linux binaries on Windows. This new architecture brings changes to how these Linux binaries interact with Windows and computer’s hardware, but it will still manage to provide the same user experience as in WSL Linux distros With this release, the individual Linux distros can be run either as a WSL 1 distro, or as a WSL 2 distro, and can be upgraded or downgraded at any time. Also, users can run WSL 1 and WSL 2 distros side by side. This new architecture uses an entirely new architecture that uses a real Linux kernel. Increases speed With this release, file-intensive operations like git clone, npm install, apt update, apt upgrade, and more will get faster. The initial tests that the team has run have WSL 2 running up to 20x faster as compared to WSL 1, when unpacking a zipped tarball. And it is around 2-5x faster while using git clone, npm install and cmake on various projects. Linux kernel with Windows The team will be shipping an open source real Linux kernel with Windows which will make full system call compatibility possible. This will also be the first time a Linux kernel is shipped with Windows. The team is building the kernel in house and in the initial builds they will ship version 4.19 of the kernel. This kernel is been designed in tune with WSL 2 and it has been optimized for size and performance. The team will service this Linux kernel through Windows updates, users will get the latest security fixes and kernel improvements without needing to manage it themselves. The configuration for this kernel will be available on GitHub once WSL 2 will release. The WSL kernel source will consist of links to a set of patches in addition to the long-term stable source. Full system call compatibility The Linux binaries use system calls for performing functions such as accessing files, requesting memory, creating processes, and more. In WSL 1 the team has created a translation layer that interprets most of these system calls and allow them to work on the Windows NT kernel. It is challenging to implement all of these system calls, where some of the apps don’t run properly in WSL 1. WSL 2 includes its own Linux kernel which has full system call compatibility. To know more about this news, check out Microsoft’s blog post. Microsoft introduces Remote Development extensions to make remote development easier on VS Code Docker announces collaboration with Microsoft’s .NET at DockerCon 2019 Microsoft and GitHub employees come together to stand with the 996.ICU repository      

Warp is a new Rust web framework. Built by Sean McArthur and Carl Lerche, it's a tool for building and managing web servers. More specifically, it was designed to give developers more control over how they to configure routes within their services. It's worth pointing out that Rust's Warp shouldn't be confused with Haskell's Warp - in the Haskell world, Warp is a lightweight web server for WAI applications. This article was amended 7.25.2019 to clarify that Rust's Warp framework and Haskell's Warp frameworks are different. What's the thinking behind Rust's Warp framework? In a blog post announcing the framework, McArthur explains that the inspiration for Warp came out of his experience working with many different frameworks and tools - most recently Node.js. He writes: "I found that I often times need to configure predicates, like certain headers required, query parameters needed, etc, and sometimes, I need to configure that a set of routes should be 'mounted' at a different path, and possibly want certain predicates there too. I noticed the concept of mounting or sub-routes or sub-resources or whatever the framework calls them didn’t feel… natural, at least to me." With this challenge setting the context for Warp, McArthur's love of Rust and the highly functional aspect of Scala tools like Finch and Akka helped to lay the technical foundations for the web framework. Central to the framework are filters. Read next: Will Rust replace C++? What are filters in the Warp web framework? Filters are a feature that makes configuring endpoints easier. McArthur explains by saying they are "a function that can operate on some input... and returns some output, which could be some app-specific type you wish to pass around, or can be some reply to send back as an HTTP response." The advantage of this is that if you are trying to "piece together data from several different places of a request before you have your domain object" you can treat each source as a 'filter' and combine them in a relatively straightforward manner. McArthur repeatedly uses the word 'natural' - to put it another way, it makes things easier and cleaner for the developer. Read next: Rust 1.28 is here with global allocators, nonZero types and more The Rust ecosystem is growing It's not news that Rust is a hugely popular programming language. In this year's Stack Overflow survey, Rust was listed as the most loved language by respondents (3 years running!). However, it hasn't seen extensive and rapid growth despite its advantages - with a growing ecosystem of tools like Warp that could well change over the next couple of years.

Last week, Pi-hole, the open-source Linux network-level advertisement and internet tracker blocking application released their latest version Pi-hole 4.3.2. It includes many changes in its core and web interfaces. Users can run pihole -up to update this version from a terminal session. One of the core contributors to Pi-hole, Adam Warner revealed that the major change in this release is the removal of support for adblock style lists like Easylist/Easyprivacy. He alerted users that this may lead to a reduction in the number of blocked domains by Pi-hole. Warner also specified the motive behind the removal of adblock support as, “these lists were never designed to be parsed into a HOST formatted file, and while it may catch some domains, there are far too many false positives produced by using them in this way. If you have lists in this format, Pi-hole will now ignore them, and attempts to get around the detection will likely end up with a broken gravity list.” Pi-hole uses dnsmasq, cURL, lighttpd, PHP, and other tools to block Domain Name System (DNS) requests for known tracking and advertising. Intended for a private network, Pi-hole is implemented on embedded devices with network capabilities like Raspberry Pi. A Pi-hole can also block traditional website adverts in smart TVs, mobile operating systems, and more. If Pi-hole obtains any requests from adverts or tracking domains, it does not resolve the requested domain and responds to the requesting device with a blank webpage. Users are happy with Pi-hole 4.3.2 release and are all praises for it on Hacker News. A user said, “I'm a huge fan of this project! I have 3 set-up right now. One as a container on my Nuc at home for myself, and 2 other on old Pi's (one is a 1st gen B model) for family. A simple job to run every 2 months keeps everything up to date. For myself, I use Wireguard to only forward DNS packets to the PiHole when I'm outside the house. If you install a PiHole your help desk calls from family will drop by 90% (personal experience).” Another user comments, “I have Pi-hole running on my LAN and it's amazing. It also helped me identify that my Amcrest PoE security cameras aggressively phone home, even when no cloud functionality is configured on them. All the reasons to keep them on their own VLAN and off the Internet.” Another comment read, “One unadvertised advantage of pi-hole is monitoring and blocking sites that you don't want kids to use, such as the thousands of io-games and whatnot.” Check out the Pi-hole 4.3.2 release notes to know full updates of this release. Brave ad-blocker gives 69x better performance with its new engine written in Rust Chromium developers propose an alternative to webRequest API that could result in existing ad blockers’ end Opera Touch browser lets you browse with one hand on your iPhone, comes with e2e encryption and built-in ad blockers too!

Yesterday, at the Node+JS Interactive in Montreal, the OpenJS Foundation announced the acceptance of Electron into the Foundation’s incubation program. The OpenJS Foundation provides vendor-neutral support for sustained growth within the open source JavaScript community. It's supported by 30 corporate and end-user members, including GoDaddy, Google, IBM, Intel, Joyent, and Microsoft. Electron is an open source framework created for building desktop apps using JavaScript, HTML, and CSS, it is based on Node.js and Chromium. Additionally, Electron is widely used on many well-known applications including Discord, Microsoft Teams, OpenFin, Skype, Slack, Trello, Visual Studio Code, etc. “We’re heading into 2020 excited and honored by the trust the Electron project leaders have shown through this significant contribution to the new OpenJS Foundation,” said Robin Ginn, Executive Director of the OpenJS Foundation. He further added, “Electron is a powerful development tool used by some of the most well-known companies and applications. On behalf of the community, I look forward to working with Electron and seeing the amazing contributions they will make.” Electron’s cross-platform capabilities make it possible to build and run apps on Windows, Mac, and Linux computers. Initially developed by GitHub in 2013, today the framework is maintained by a number of developers and organizations. Electron is suited for anyone who wants to ship visually consistent, cross-platform applications, fast and efficiently. “We’re excited about Electron’s move to the OpenJS Foundation and we see this as the next step in our evolution as an open source project,” said Jacob Groundwater, Manager at ElectronJS and Principal Engineering Manager at Microsoft. “With the Foundation, we’ll continue on our mission to play a prominent role in the adoption of web technologies by desktop applications and provide a path for JavaScript to be a sustainable platform for desktop applications. This will enable the adoption and development of JavaScript in an environment that has traditionally been served by proprietary or platform-specific technologies.” What this means for developers Electron joining the OpenJS Foundation does not change how Electron is made, released, or used — and does not directly affect developers building applications with Electron. Even though Electron was originally created at GitHub, it is currently maintained by a number of organizations and individuals. In 2019, Electron codified its governance structure and invested heavily into formalizing how decisions affecting the entire project are made. The Electron team believes that having multiple organizations and developers investing in and collaborating on Electron makes the project stronger. Hence, lifting Electron up from being owned by a single corporate entity and moving it into a neutral foundation focused on supporting the web and JavaScript ecosystem is a natural next step as they mature in the open-source ecosystem. To know more about this news, check out the official announcement from the OpenJS Foundation website. The OpenJS Foundation accepts NVM as its first new incubating project since the Node.js Foundation and JSF merger Node.js and JS Foundations are now merged into the OpenJS Foundation Denys Vuika on building secure and performant Electron apps, and more

Yesterday, Django released its latest major update - Django 3.0. Django is a Python-based web framework designed to help developers build apps faster with less code. Django 3.0 now comes with built-in async functionality, Python 3.6, 3.7 and 3.8 support and third-party library support for the older version of Django. New features in Django 3.0 MariaDB support Django now officially supports MariaDB 10.1 and higher. To use MariaDB you should use the MySQL backend, which is shared between the two. ASGI support for async programming Django 3.0 provides support for running as an ASGI application, making Django fully async-capable (Django already has existing WSGI support). However, async features will only be available to applications that run under ASGI. As a side-effect of this change, Django is now aware of asynchronous event loops and will block you calling code marked as “async unsafe” - such as ORM operations - from an asynchronous context. This was one of the most eagerly awaited features. https://twitter.com/jmcampbell72/status/1201502666431619072 https://twitter.com/arocks/status/1201711143103807490 https://twitter.com/gtcarvalh0/status/1201475826564382720 Exclusion constraints on PostgreSQL Django 3.0 adds a new ExclusionConstraint class which adds exclusion constraints on PostgreSQL. Constraints are added to models using the Meta.constraints option. Filter expressions Expressions that output BooleanField may now be used directly in QuerySet filters, without having to first annotate and then filter against the annotation. Enumerations for model field choices Custom enumeration types TextChoices, IntegerChoices, and Choices are now available as a way to define Field.choices. TextChoices and IntegerChoices types are provided for text and integer fields. Django 3.0 has also dropped support for PostgreSQL 9.4 which ends in December 2019. It also removes private Python 2 compatibility APIs. The upstream support for Oracle 12.1 also ends in July 2021. Django 2.2 will be supported until April 2022. Django 3.0 officially supports Oracle 12.2 and 18c. The complete list of updates is available in the release notes. Django 3.0 is going async! Which Python framework is best for building RESTful APIs? Django or Flask? Django 2.2 is now out with classes for custom database constraints

Ionic Framework today released Ionic Framework 4.0. The release is a complete rebuild of the popular JavaScript framework for developing mobile and desktop apps. Although Ionic has, up until now, Ionic was built using Angular components, this new version has instead been built using Web Components. This is significant, as it changes the whole ball game for the project. It means Ionic Framework is now an app development framework that can be used alongside any front end frameworks, not just Angular. The shift away from Angular makes a lot of sense for the project. It now has the chance to grow adoption beyond the estimated five million developers around the world already using the framework. While in the past Ionic could only be used by Angular developers, it now opens up new options for development teams - so, rather than exacerbating a talent gap in many organizations, it could instead help ease it. However, although it looks like Ionic is taking a significant step away from Angular, it's important to note that, at the moment, Ionic Framework 4.0 is only out on general availability for Angular - it's still only in Alpha for Vue.js and React. Ionic Framework 4.0 and open web standards Although the move to Web Components is the stand-out change in Ionic Framework 4.0, it's also worth noting that the release has been developed in accordance with open web standards. This has been done, according to the team, to help organizations develop Design Systems (something the Ionic team wrote about just a few days ago) - essentially, using a set of guidelines and components that can be reused across multiple platforms and products to maintain consistency across various user experience touch points. Why did the team make the changes to Ionic Framework 4.0 that they did? According to Max Lynch, Ionic Framework co-founder and CEO, the changes present in Ionic Framework 4.0 should help organizations achieve brand consistency quickly, and to give development teams the option of using Ionic with their JavaScript framework of choice. Lynch explains: "When we look at what’s happening in the world of front-end development, we see two major industry shifts... First, there’s a recognition that the proliferation of proprietary components has slowed down development and created design inconsistencies that hurt users and brands alike. More and more enterprises are recognizing the need to adopt a design system: a single design spec, or library of reusable components, that can be shared across a team or company. Second, with the constantly evolving development ecosystem, we recognized the need to make Ionic compatible with whatever framework developers wanted to use—now and in the future. Rebuilding our Framework on Web Components was a way to address both of these challenges and future-proof our technology in a truly unique way." What does Ionic Framework 4.0 tell us about the future of web and app development? Ionic Framework 4.0 is a really interesting release as it tells us a lot about where web and app development is today. It confirms to us, for example, that Angular's popularity is waning. It also suggests that Web Components are going to be the building blocks of the web for years to come - regardless of how frameworks evolve. As Lynch writes in a blog post introducing Ionic Framework 4.0, "in our minds, it was clear Web Components would be the way UI libraries, like Ionic, would be distributed in the future. So, we took a big bet and started porting all 100 of our components over." Ionic Framework 4.0 also suggests that Progressive Web Apps are here to stay too. Lynch writes in the blog post linked to above that "for Ionic to reach performance standards set by Google, new approaches for asynchronous loading and delivery were needed." To do this, he explains, the team "spent a year building out a web component pipeline using Stencil to generate Ionic’s components, ensuring they were tightly packed, lazy loaded, and delivered in smart collections consisting of components you’re actually using." The time taken to ensure that the framework could meet those standards - essentially, that it could support high performance PWAs - underscores that this will be one of the key use cases for Ionic in the years to come.  

On Tuesday, Atila Neves the Deputy leader for D programming language posted about his vision for D and what he would like to do with D lang in the near future. Make D programming language default for web dev and mobile applications D’s static reflection and code generation capabilities make it an ideal candidate to implement a codebase that needs to be called from several different languages and environments (e.g. Python, Java, R). Traditionally this is done by specifying data structures and RPC calls in an Interface Definition Language (IDL) then translating that to the supported languages, with a wire protocol to go along with it. With D, none of that is necessary. One can write the production code in D and have libraries automatically making the code callable from other languages. Hence it will be easy to write D code that runs as fast or faster than the alternatives, and it will be a win on all fronts. Memory Safety for D lang Atila believes that D is a systems programming language with value types and pointers, it isn’t memory safe. He says that DIP1000 is in the right direction, but it still needs to be memory safe unless programmers opt-out via @trusted block or function. The DIP1000 proposal includes a scope mechanism that will know when the lifetime of a reference is over by providing a mechanism to guarantee that a reference cannot escape lexical scope. Thus it can safely implement memory management schemes rather than tracing the garbage collection. Safe and easy concurrency in D programming language As per Atila safe and easy concurrency in D is mostly achieved through actor models, but they still need to finalize shards and make everything @safe as well. Centralizing all reflection needs with an API Atila says instead of disparate ways of getting things done with fragmented APIs like (__traits, std.traits, custom code), he would like there to be a library that centralizes all reflection needs with a great API. Easy interoperability for C++ developers C++ has been successful so far in making the transition from C virtually seamless. Atila wants current C++ programmers with legacy codebases to just as easily be able to start writing D code. Faster development times D needs a fast interpreter so that developers can skip machine code generation and linking. This should be the default way of running unittest blocks for faster feedback, with programmers only compiling their code for runtime performance and/or to ship binaries to final users. String interpolation in D programming language Code generation is one of D’s greatest strengths, and token strings enable visually pleasing blocks of code that are actually “just strings”. Hence, String interpolation would make it vastly easier to use. To know more about D programming language, check out the official post by Atila Neves. “Rust is the future of systems programming, C is the new Assembly”: Intel principal engineer, Josh Triplett The V programming language is now open source – is it too good to be true? Rust’s original creator, Graydon Hoare on the current state of system programming and safety

Today an exciting news was awaiting the Next.js users, five months after Next.js 8 was released. Today the Next.js team has released their next version Next.js 9. The major highlights of this release are the built in zero-config TypeScript support, automatic static optimization, API routes and improved developer experience. All the features are backwards compatible with the earlier versions of Next.js. Some of the major features are explained in brief below: Built-In Zero-Config TypeScript Support Automated Setup Getting started with TypeScript in Next.js is easy: rename any file, page or component, from ‘.js’ to ‘.tsx’. Then, run ‘next dev’. Next.js will also create a default ‘tsconfig.json’ with sensible defaults, if not already present. Integrated Type-Checking While in development Next.js will show type errors after saving a file. Type-checking happens in the background, allowing users to interact with the updated application in the browser instantly. Type errors will propagate to the browser as they become available. Next.js will also automatically fail the production build, if type errors are present. This helps prevent shipping broken code to production. Dynamic Route Segments Next.js supports creating routes with basic named parameters, a pattern popularized by ‘path-to-regexp’. Creating a page that matches the route ‘/post/:pid’ can now be achieved by creating a file in your pages directory named: ‘pages/post/[pid].js’. Next.js will automatically match requests like ‘/post/1, /post/hello-nextjs’, etc and render the page defined in ‘pages/post/[pid].js’. The matching URL segment will be passed as a query parameter to your page with the name specified between the ‘[square-brackets]’. Automatic Static Optimization Starting with Next.js 9, users will no longer have to make the choice between fully server-rendering or statically exporting their application. Users can now do both on a per-page basis. Automatic Partial Static Export A heuristic was introduced to automatically determine if a page can be prerendered to static HTML using ‘getInitialProps’. This allows Next.js to emit hybrid applications that contain both server-rendered and statically generated pages. The built-in Next.js server (‘next start’) and programmatic API (‘app.getRequestHandler()’) both support this build output transparently. There is no configuration or special handling required. Statically generated pages are still reactive: Next.js will hydrate the application client-side for full interactivity. Furthermore, Next.js will update the application after hydration also, if the page relies on query parameters in the URL. API Routes To start using API routes, users have to create a directory called ‘api/’ inside the ‘pages/ directory’. All files in this directory will be automatically mapped to ‘/api/<your route>’, in the same way as other page files are mapped to routes. All the files inside the ‘pages/api/’ directory export a request handler function instead of a React Component. Besides using incoming data, the API endpoint will also return data. Next.js will provide ‘res.json()’ by default making it easier to send data. When making changes to API endpoints in development, the user need not restart the server as the code is automatically reloaded. Production Optimizations Prefetching in-Viewport <Link>s Next.js 9 will automatically prefetch <Link> components as they appear in-viewport. This feature improves the responsiveness of users application by making navigations to new pages quicker. Next.js uses an Intersection Observer to prefetch the assets necessary in the background. These requests have low-priority and yield to ‘fetch()’ or XHR requests. Next.js will avoid automatically prefetching if the user has data-saver enabled. Optimized AMP by Default Next.js 9 will render optimized AMP by default. Optimized AMP is up to 50% faster than traditional AMP. Dead Code Elimination for typeof window Branches Next.js 9 replaces ‘typeof window’ with its appropriate value (undefined or object) during server and client builds. This change allows Next.js to remove dead code from compiled code automatically. Developer Experience Improvements Next.js 9 aims to bring unobtrusive and ease-of-use improvements to help its users develop in the best way. Compiling Indicator An RFC / "good first issue" has been created to discuss potential solutions for the problem of indicating that work is being done. Users will also see a small triangle to show that Next.js is doing compilation work, at the bottom right corner of the page. Console Output Starting from Next.js 9, the log output will jump less and will no longer clear the screen. This allows for a better overall experience as the users terminal window will have more relevant information and will flicker less, while Next.js will integrate better. Users are very happy with the striking features introduced in Next.js 9. https://twitter.com/johnbrett_/status/1148167900840255489 https://twitter.com/chanlitohem/status/1148167705834352640 A user on Reddit says that, “That API routes feature looks amazing. Will definitely check it out.” Another Redditor comments, “Gonna give v9 a try today. Very stoked for the new dynamic routing!” Head over to the Next.js official blog for more details. Next.js 7, a framework for server-rendered React applications, releases with support for React context API and Webassembly Meet Sapper, a military grade PWA framework inspired by Next.js 16 JavaScript frameworks developers should learn in 2019

Last week, Snyk, an open-source security platform published the State of JavaScript frameworks security report 2019. This report mainly focuses on security vulnerabilities and risks in React and Angular ecosystems. It further talks about security practices in other common JavaScript frontend ecosystem projects including Vue.js, Bootstrap, and JQuery. https://twitter.com/snyksec/status/1189527376197246977 Key takeaways from the State of JavaScript frameworks security report Security vulnerabilities in core Angular and React projects In the report, the ‘react’, ‘react-dom’, and ‘prop-types’ libraries were considered as the core modules of React since they often form the foundation for React web applications. Snyk’s research team was able to find three cross-site scripting (XSS) vulnerabilities in total: two in ‘react’ and one in ‘react-dom’. The two vulnerabilities in the ‘react’ library were present in its pretty older versions, 0.5.x versions and the versions prior to 0.14. However, the vulnerability in react-dom was found in a recent release, version 16.x. Its occurrence depends on other pre-conditions as well, such as using the library within a server-rendering context. All these vulnerabilities’ Common Vulnerability Scoring System (CVSS) score ranged 6.5 and 7.1, which basically means that they were all medium to high severity vulnerabilities. Coming to Angular, Snyk found 19 vulnerabilities across six different release branches of Angular 1.x or AngularJS, which is no longer maintained. Angular 1.5 has the highest number of vulnerabilities, with seven vulnerabilities in total. Out of those seven, three had high severity and four had medium severity. The good thing is that with every new version, the vulnerabilities have decreased both in terms of severity and count. Security risks of indirect dependencies React and Angular projects are often generated with a scaffolding tool that provides a boilerplate. While in React, we use the ‘create-react-app’ npm package, in Angular we use the ‘@angular/cli’ npm package. In a sample React and Angular project created using these scaffolding tools, it was found that both included development dependencies with vulnerabilities. The good thing is that neither of them had any production dependency security issues. “It’s worthy to note that Angular relies on 952 dependencies, which contain a total of two vulnerabilities; React relies on 1257 dependencies, containing three vulnerabilities and one potential license compatibility issue,”  the report states. Here’s the list of security vulnerabilities that were found in these sample projects: Source: Snyk Security vulnerabilities in the Angular module ecosystem For the purposes of this study, the Snyk research team divided the Angular ecosystem into three areas: Angular ecosystem modules, malicious versions of modules, developer tooling. The Angular module ecosystem has the following vulnerable modules: Source: Snyk Talking about the malicious versions of modules, the report lists three malicious versions for the ‘angular-bmap’, ‘ng-ui-library’, ‘ngx-pica’ modules. The ‘angular-bmap’ 0.0.9 version included a malicious code that collected sensitive information related to password and credit cards from forms. It then used to send this information to an attacker-controlled URL. Thankfully, this version is now taken down from the npm registry. The ‘ng-ui-library’ 1.0.987 has the same malicious code as  ‘angular-bmap’ 0.0.9, despite that it is still maintained. The third module, 'ngx-pica' (from versions 1.1.4 to 1.1.6) also has the same malicious code as the above two modules. In developer tooling, the module ‘angular-http-server’ was found vulnerable to directory traversal twice. Security vulnerabilities in the React module ecosystem In React’s case, Snyk found four malicious packages namely ‘react-datepicker-plus’, ‘react-dates-sc’, ‘awesome_react_utility’, and ‘reactserver-native’. These contain malicious code that harvests credit card and other sensitive information and attacks compromised modules on the React ecosystem. Notable vulnerable modules that were found in React’s ecosystem during this study: The ‘react-marked-markdown’ module has a high-severity XSS vulnerability that does not have any fix available as of now. The ‘preact-render-to-string’ library is vulnerable to XSS in all versions prior to 3.7.2. The ‘react-tooltip’ library is vulnerable to XSS attacks for all versions prior to 3.8.1. The ‘react-svg’ library has a high severity XSS vulnerability that was disclosed by security researcher Ron Perris affecting all versions prior to 2.2.18. The 'mui-datatables' library has the CSV Injection vulnerability. “When we track all the vulnerable React modules we found, we count eight security vulnerabilities over the last three years with two in 2017, six in 2018 and two up until August 2019. This calls for responsible usage of open source and making sure you find and fix vulnerabilities as quickly as possible,” the report suggests. Along with listing the security vulnerabilities in React and Angular, the report also shares the overall security posture of the two. This includes secure coding conventions, built-in secure capabilities, responsible disclosure policies, and dedicated security documentation for the project. Vue.js security In total, four vulnerabilities were detected in the Vue.js core project spanning from December 2017 to August 2018: three medium and one low regular expressions denial of service vulnerability. As for Vue’s module ecosystem, the report lists the following vulnerable modules: The ‘bootstrap-vue’ library has a high severity XSS vulnerability that was disclosed in January 2019 and affects all versions prior to <2.0.0-rc.12. The ‘vue-backbone’ library had a malicious version published. Bootstrap security The Snyk research team was able to track a total of seven XSS vulnerabilities in Bootstrap. Out of those seven, three were disclosed in 2019 for recent Bootstrap v3 versions and three security vulnerabilities were disclosed in 2018, one of which affects the newer 4.x Bootstrap release. All these vulnerabilities have security fixes and an upgrade path for users to remediate the risks. Among the vulnerable modules in the Bootstrap ecosystem are: The ‘bootstrap-markdown’ library that includes an unfixed XSS vulnerability affecting all versions. The ‘bootstrap-vuejs’ library has a high severity XSS vulnerability that affects all versions prior to bootstrap-vue 2.0.0-rc.12. The ‘bootstrap-select’ library also includes a high severity XSS vulnerability. This article touched upon some of the key findings of the report. Check out the full report by Snyk to know more in detail. React Native 0.61 introduces Fast Refresh for reliable hot reloading React Conf 2019: Concurrent Mode preview out, CSS-in-JS, React docs in 40 languages, and more Vue maintainers proposed, listened, and revised the RFC for hooks in Vue API

Two months ago, Mozilla introduced Neqo, code written in Rust to implement QUIC, a new protocol for the web developed on top of UDP instead of TCP. As per the GitHub page, web developers who want to run test on http 0.9 programs using neqo-client and neqo-server, below is the code: cargo build ./target/debug/neqo-server 12345 -k key --db ./test-fixture/db ./target/debug/neqo-client http://127.0.0.1:12345/ -o --db ./test-fixture/db While developers who want to run test on http 3 programs using neqo-client and neqo-http3-server must check the code given below: cargo build ./target/debug/neqo-http3-server [::]:12345 --db ./test-fixture/db ./target/debug/neqo-client http://127.0.0.1:12345/ --db ./test-fixture/db What is QUIC and why is it important for web developers According to Wikipedia, QUIC is the next generation encrypted-by-default transport layer network protocol designed by Jim Roskind at Google. It is designed to secure and accelerate web traffic on the Internet. It was implemented and deployed in 2012, and announced publicly in 2013 as an experimentation broadened and described to the IETF. While still an Internet Draft, QUIC is used by more than half of all connections from the Chrome web browser to Google's servers. As per the QUIC’s official website, “QUIC is an IETF Working Group that is chartered to deliver the next transport protocol for the Internet.” One of the users on Hacker News commented, “QUIC is an entirely new protocol for the web developed on top of UDP instead of TCP. UDP has the advantage that it is not dependent on the order of the received packets, hence non-blocking unlike TCP. If QUIC is used, the TCP/TLS/HTTP2 stack is replaced to UDP/QUIC stack.”  The user further comments, “If QUIC features prove effective, those features could migrate into a later version of TCP and TLS (which have a notably longer deployment cycle). So basically, QUIC wants to combine the speed of the UDP protocol, with the reliability of the TCP protocol.” Additionally, the Rust community on Reddit were asked if QUIC is royalty free. To which one of the Rust developer responded, “Yes, it is being developed and standardized by a working group (under the IETF) and the IETF respectively. So it will become an internet standard just like UDP, TCP, HTTP, etc.” If you are interested to know more about Neqo and QUIC, check out the official GitHub page. Other interesting news in web development Chrome 78 beta brings the CSS Properties and Values API, the native file system API, and more! Apple releases Safari 13 with opt-in dark mode support, FIDO2-compliant USB security keys support, and more! Inkscape 1.0 beta is available for testing