Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds

Tech News - Web Development

354 Articles
article-image-firefox-71-released-with-new-developer-tools-features
Savia Lobo
04 Dec 2019
5 min read
Save for later

Firefox 71 released with new developer tools features

Savia Lobo
04 Dec 2019
5 min read
Yesterday, the Firefox team announced its latest version, Firefox 71. This version includes a plethora of new developer tools features such as web socket message inspector, console multi-line editor mode, log on events, and network panel full-text search. Many of these features were first made available in the Firefox Developer Edition and later improved based on the feedback. Other highlights in Firefox 71 includes new web platform features such as CSS subgrid, column-span, Promise.allSettled, and the Media Session API. What’s new in Firefox 71? Improvements in speed and reliability In Firefox 71, the team took some help from the JavaScript team by improving the caching of scripts during a startup. This made both Firefox and DevTools start faster. “One Console test got an astonishing 40% improvement while times across every panel were boosted by 8-15%”, the official blog post mentions. Also, the links to scripts, for example, from the event handler tooltip in the Inspector or the stack traces in the Console, reliably gets you to the expected line and debugging sources loaded through eval() now also works as expected. WebSocket Message Inspector In Firefox 71, the Network panel has a new Messages tab. You can observe all messages sent and received through a WebSocket connection: Source: Mozilla Hacks Sent frames have a green up-arrow icon, while received frames have a red down-arrow icon. You can click on an individual frame to view its formatted data. Know more about WebSocket Message Inspector on the official post. Console multi-line editor mode Another developer tools feature in Firefox 71 is the new multi-line console. It combines the benefits of IDEs to authoring code with the workflow of repeatedly executing code in the context of the page. If you open the regular console, you’ll see a new icon at the end of the prompt row. Source: Mozilla Hacks Clicking this will switch the console to multi-line mode: Source: Mozilla Hacks Here you can enter multiple lines of code, pressing enter after each one, and then run the code using Ctrl + Enter. You can also move between statements using the next and previous arrows. The editor includes regular IDE features you’d expect, such as open/close bracket pair highlighting and automatic indentation. Inline variable preview in Debugger The JavaScript Debugger now provides inline variable previewing, which is a useful timesaver when stepping through your code. In previous versions, you had to scroll through the scope panel to find variable values or hover over a variable in the source pane. In the current version, when execution pauses, you can view relevant variable and property values directly in the source. Source: Mozilla Hacks Using the babel-powered source mapping, preview also works for variables that have been renamed or minified by build steps. Make sure to enable this power-feature by checking Map in the Scopes pane. Log on Event Listeners There have been a few updates in the event listener breakpoints in Firefox 71. A few improvements include, log on events lets you explore which event handlers are being fired in which order without the need for pausing and stepping. Hence, if we choose to log keyboard events, for example, the code no longer pauses as each event is fired: Source: Mozilla Hacks Instead, we can then switch to the console, and whenever we press a key we are given a log of where related events were fired. CSS improvements In Firefox 71, the new CSS includes subgrid, multicol, clip-path: path, and aspect ratio mapping. Subgrid A feature that has been enabled in 71 after being supported behind a pref for a while, the subgrid value of grid-template-columns and grid-template-rows allows you to create a nested grid inside a grid item that will use the main grid’s tracks. This means that grid items inside the subgrid will line up with the parent’s grid tracks, making various layout techniques much easier. Multicol — column-span CSS multicol support has moved forward in a big way with the inclusion of the column-span property in Firefox 71. This allows you to make an element span across all the columns in a multicol container (generated using column-width or column-count). Clip-path: path() The path() value of the clip-path property is now enabled by default — this allows you to create a custom mask shape using a path() function, as opposed to a predefined shape like a circle or ellipse. Aspect ratio mapping Finally, the height and width HTML attributes on the <img> element are now mapped to an internal aspect-ratio property. This allows the browser to calculate the image’s aspect ratio early on and correct its display size before it has loaded if CSS has been applied that causes problems with the display size. There are also a few minor JavaScript changes in this release including, Promise.allSettled(), the Media Session API, and WebGL multiview. A lot of users are excited about this release and are looking forward to trying it out. https://twitter.com/IshSookun/status/1201897724943036417 https://twitter.com/awhite/status/1202163413021077504 To know more about this news in detail, read Firefox 71 official announcement. The new WebSocket Inspector will be released in Firefox 71 Firefox 70 released with better security, CSS, and JavaScript improvements Google and Mozilla to remove Extended Validation indicators in Chrome 77 and Firefox 70
Read more
  • 0
  • 0
  • 5307

article-image-wordpress-5-0-bebo-released-with-improvements-in-design-theme-and-more
Amrata Joshi
07 Dec 2018
4 min read
Save for later

WordPress 5.0 (Bebo) released with improvements in design, theme and more

Amrata Joshi
07 Dec 2018
4 min read
Yesterday, the team at WordPress released WordPress 5.0 (also known as Bebo) to give a seamless experience to users in building a website, revamping a blog or writing a code. Major improvements in WordPress 5.0 Blocks make it easier to work with WordPress This new release will let the users insert any type of multimedia in a snap and rearrange as per the content. The content pieces will be arranged in the blocks which makes the process of uploading easy. Design WordPress 5.0 brings improvements to design and content. While building client sites, users can create reusable blocks which lets the clients add new content anytime. Source: Wordpress Theme WordPress 5.0 comes with the new Twenty Nineteen theme that features custom styles for the blocks.The editor styles are used in the themes to enhance them. Twenty Nineteen features ample whitespace, and modern sans-serif headlines along with serif body text. It also uses the system fonts for increasing loading speed.Twenty Nineteen can work for a wide variety of use cases, be it a photo blog, launching a new business, or supporting a non-profit cause. Classic editor plugin The classic editor plugin is very useful as it restores the previous WordPress editor and the Edit Post screen. WordPress 5.0 for developers Blocks let the users to change the content directly but also ensures that the content structure doesn’t get disturbed by accidental code edits. This lets the developer control the output and build polished and semantic markup that could be preserved through edits. WordPress 5.0 offers wide collection of APIs and interface components that creates blocks with intuitive controls for the clients. These APIs speeds up the entire development work but also provides a usable, consistent, and accessible interface to all users. [box type="info" align="" class="" width=""] WordPress 5.0 is named Bebo in homage to the pioneering Cuban jazz musician Bebo Valdés.[/box] This new release has got some negative reactions from the users. Few think that the blocks won’t make things easier but would make the entire process complicated. Also, the release has received heat for having been announced on the wrong timing, as Christmas is almost around and retailers won’t be able to support the process of teaching the process of the new editor to the staff. Also developers will have to fix client sites broken by the new editor on an immediate basis and this might definitely create chaos. One of the users said, “Okay, I've now tested it on my main site, and I can definitely confirm that it's not a good fit for blog posts/news articles. Took me forever to post a simple 300 word article, in part because of all the random spaces it kept removing when I copied in paragraphs from my text editor.” https://twitter.com/MyFunkyTravel/status/1070848742738276352 https://twitter.com/anandnU/status/1070947019735425025 https://twitter.com/niall_flynn/status/1070762641700937728 The new editor is also causing troubles to existing sites and breaking them down. Few of the businesses have planned to move away from WordPress as they are not finding the change convincing. The users also are unhappy with the UI. Gutenberg: A disappointment? Last month’s Gutenberg release was met with disappointment and many ended up- uninstalling it,  with major issue being the lack of Markdown support. Usually before posting an article, a user writes it on Google docs or Microsoft word and then copies it to WordPress. Gutenberg makes it difficult for users to copy paste content as they must create the blocks multiple times given that every element is considered as a block. Also, it is still somewhere  between a post editor and a site builder plugin. One has to rewrite everything on Gutenberg as the blocks are complex. It could work best for large publishers who are comfortable with complicated layouts. Those working on HTML and CSS might find this jump to Gutenberg which is based on Javascript and React framework, very complicated. The idea of Gutenberg getting integrated with Core won’t be accomplished any day sooner as it has to go under a lot of documentation and work is still pending. https://twitter.com/_l3m35_/status/1070768052202033159 But there is still hope for Gutenberg, as the page builder market might appreciate the efforts taken for this editor. It could work well for the ones aiming for static content. Read more about this news on WordPress. Introduction to WordPress Plugin WordPress as a Web Application Framework WordPress Management with WP-CLI  
Read more
  • 0
  • 0
  • 5220

article-image-introducing-web-high-level-shading-language-whlsl-a-graphics-shading-language-for-webgpu
Bhagyashree R
14 Nov 2018
3 min read
Save for later

Introducing Web High Level Shading Language (WHLSL): A graphics shading language for WebGPU

Bhagyashree R
14 Nov 2018
3 min read
Yesterday, the W3C GPU for the Web Community Group introduced a new graphics shading language for the WebGPU API called Web High Level Shading Language (WHLSL, pronounced “whistle”). The language extends HLSL to provide better security and safety. Last year, a W3C GPU for the Web Community Group was formed by the engineers from Apple, Mozilla, Microsoft, Google, and others. This group is working towards bringing in a low-level 3D graphics API to the Web called WebGPU. WebGPU, just like other modern 3D graphics API, uses shaders. Shaders are programs that take advantage of the specialized architecture of GPUs. For instance, apps designed for Metal use the Metal Shading Language, apps designed for Direct3D 12 use HLSL, and apps designed for Vulkan use SPIR-V or GLSL. That’s why the WebKit team introduced WHLSL for the WebGPU API. Here are some of the requirements WHLSL aims to fulfill: Need for a safe shader language Irrespective of what an application does, the shader should only be allowed to read or write data from the Web page’s domain. Without this safety insurance, malicious websites can run a shader that reads pixels out of other parts of the screen, even from native apps. Well-specified language To ensure interoperability between browsers, a shading language for the Web must be precisely specified. Also, often rendering teams write shaders in their own custom in-house language, and are later cross-compiled to whichever language is necessary. That is why the shader language should have a reasonably small set of unambiguous grammar and type checking rules that compiler writers can reference when emitting this language. Translatable to other languages As WebGPU is designed to work on top of Metal, Direct3D 12, and Vulkan, the shader should be translatable to Metal Shading Language, HLSL (or DXIL), and SPIR-V. There should be a provision to represent the shaders in a form that is acceptable to APIs other than WebGPU. Performant language To provide an overall improved performance the compiler needs to run quickly and programs produced by the compiler need to run efficiently on real GPUs. Easy to read and write The shader language should be easy to read and write for a developer. It should be familiar to both GPU and CPU programmers. GPU programmers are important clients as they have experience in writing shaders. As GPUs are now popularly being used in various fields other than rendering including machine learning, computer vision, and neural networks, the CPU programmers are also important clients. To learn more in detail about WLHSL, check out WebKit’s post. Working with shaders in C++ to create 3D games Torch AR, a 3D design platform for prototyping mobile AR Bokeh 1.0 released with a new scatter, patches with holes, and testing improvements
Read more
  • 0
  • 0
  • 5132
Visually different images

article-image-vue-2-6-is-now-out-with-a-new-unified-syntax-for-slots-and-more
Bhagyashree R
05 Feb 2019
3 min read
Save for later

Vue 2.6 is now out with a new unified syntax for slots, and more

Bhagyashree R
05 Feb 2019
3 min read
On the eve of Vue’s fifth anniversary yesterday, its creator, Evan You, announced the release of Vue 2.6. This version, which goes by the name “Marcoss”, comes with a new syntax for slots usage and also few performance improvements,  internal changes, and more. Following are some of the highlights in Vue 2.6: A new syntax for slots usage Vue provides the slots feature to enable flexible component composition. Vue 2.6 introduces a new unified syntax for named and scoped slots usage. The new directive v-slot combines slot and slot-scope, which are now deprecated, in a single directive syntax. This update is fully backward compatible. According to the RFC, slot-scope will be soft-deprecated. This means that it will be marked deprecated in the docs and developers will be encouraged to use the new syntax, but no deprecation messages will be shown for now. The team is planning to eventually remove slot-scope in Vue 3.0. Performance improvements in slots The rendering of normal slots happens during the parent’s render cycle, hence, when the dependency of a slot changes, it causes both the parent and child components to re-render. This version comes with an optimization to avoid this re-rendering and ensure that the parent scope dependency mutations only affect the parent. Now, the child component will not be forced to update if it uses scoped slots. If you use the new v-slot syntax, then the slots will be compiled into scoped slots. This essentially means that all slots will get the performance advantage that comes with scoped slots. Normal slots are now exposed on this.$scopedSlots as functions. Developers using the render functions instead of templates can now always use this.$scopedSlots, without having to worry about the type of slots being passed in. Async error handling in Vue Vue’s error handling mechanism, which includes in-component errorCaptured hook and the global errorHandler hook, now also capture errors inside v-on handlers. Additionally, if any of your life cycle hooks or event handlers perform asynchronous operations, you can now return a Promise from the function. This will ensure that any uncaught error from that Promise chain is also sent to your error handlers. Data pre-fetching during server-side rendering This version comes with a new serverPrefetch hook that enables any component, except route-level components, to pre-fetch data during server-side rendering. This is introduced to allow more flexible usage and reduce the coupling between data fetching and the router. Dynamic Directive Arguments Earlier, users had to use argument-less object binding in order to leverage dynamic keys as the directive arguments were static. Dynamic JavaScript expressions are now supported in directive arguments. To read more in detail, check out Evan You’s official announcement on Medium. Learning Vue in 2019 with Anthony Gore’s developer knowledge map Evan You shares Vue 3.0 updates at VueConf Toronto 2018 Vue.js 3.0 is ditching JavaScript for TypeScript. What else is new?
Read more
  • 0
  • 0
  • 5085

article-image-electron-fiddle-a-code-playground-for-experimenting-with-cross-platform-native-apps
Bhagyashree R
13 Aug 2018
3 min read
Save for later

Electron Fiddle: A ‘code playground’ for experimenting with cross-platform native apps

Bhagyashree R
13 Aug 2018
3 min read
Another “code playground” Electron Fiddle comes into the market for enabling developers create, share, and play with small Electron experiments. Electron Fiddle attempts to bring this “fiddling effect” to Electron, a framework for creating cross-platform native applications with web technologies like JavaScript, HTML, and CSS. It provides you with a quick-start template - just change few things, choose the Electron version you want to run it with, and play around. It also gives you an option of saving it as GitHub Gist or to a local folder and anyone can try your Fiddle by just entering it in the address bar. How Electron Fiddle works? 1. Each Fiddle has three files: A Main script A renderer script An HTML file Source: GitHub 2. Choose an Electron Version: Electron Fiddle knows about all released Electron versions. Open the Preferences window to see all available versions, download them and delete the ones which you don’t need. Source: GitHub 3. Run your Fiddle: Hit the RUN button to give your Fiddle a try and start it. Source: GitHub 4. Share your Fiddle: Save your Fiddle as a public GitHub Gist - this will allow other users to load it by pasting the URL into the address bar. If they don't have Electron Fiddle, they can see and download your code directly from GitHub. Source: GitHub You can also package your Fiddle as a standalone binary or as an installer from the Tasks menu: Source: GitHub What are the features it comes with? A good coding experience It uses Monaco Editor by Microsoft, which also powers VS Code, giving users the common benefits of a modern code editor: Code highlighting Basic JavaScript error checking Refactoring Auto-completion Share your work with the community If you are eager to share your work or a bug with the Electron community, you can do that just with a click of a button. To make your Fiddle accessible to those who do not have Electron Fiddle installed, you can share it as a GitHub Gist. Compile and package your Fiddle as an app   With the help of Electron Forge, a command line interface for Electron applications, you can turn your Fiddles into binaries and share it as a app for Windows, macOS, or Linux. A good starting point, continue anywhere you like If you have just started using Electron, Electron Fiddle provides you with a basic introduction of the Fiddle and usage examples for every single Electron APIs. You can export your project with or without electron-forge and then use your favorite editor for further development. With an easy installation process you can start using and experimenting with Electron Fiddle now! You can download it from its GitHub repository. To know more, refer to the announcement on Medium by Felix Rieseberg. HTML5 and the rise of modern JavaScript browser APIs [Tutorial] How to build a weather app using Kotlin for JavaScript Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more
Read more
  • 0
  • 0
  • 5033

article-image-eagle-app-a-desktop-tool-to-collect-store-search-and-organize-your-digital-assets-all-in-one-place
Savia Lobo
23 Oct 2018
2 min read
Save for later

‘Eagle’ App: A desktop tool to collect, store, search, and organize your digital assets all in one place

Savia Lobo
23 Oct 2018
2 min read
Last week, Eagle, a Taiwan based startup, launched an application that helps designers better organize and manage their digital assets. These assets allow designers to use design mockups, inspirational images, pictures, screenshots, and user interfaces, easily on their desktops. The Eagle App is similar to the image version of ‘Evernote’ application. Eagle allows the use of folders, tags, colors and many other factors to manage, categorize and sort images. When in need of these images, users may use the powerful search engine to easily locate the desired image quickly. The application also supports Mac and Windows operating systems. The Eagle app helps users to keep their design files neat and tidy. It works with formats such as JPG, PNG, GIF, EPS, TIF, SVG, Photoshop, Adobe Illustrator, Keynote, PowerPoint, MP4, PDF, CINEMA 4D, and more. Augus Chen, Founder of Eagle, says, “Eagle helps you manage pictures, screenshots, user interfaces and designs that make your lightbulb shine. If you are a designer, you will definitely love this. It’s super easy to sync it through Google Drive, Dropbox, OneDrive or any other cloud storage service. Browser plug-ins and filtering functions save a lot of time for designers.” Key Features of Eagle App include: Browser Extension to save images and screenshots from any website. Save a bunch of images at once from a website. Drag & Drop images from other apps. Handy Clipboard to copy and paste any image you like. Add Tags to any image or a group of images to find them faster Smart Folders to organize and automatically filter images by name or tags Annotate ideas and suggestions on a specific area of an image Advanced Filter to search for images based on keywords, colors, image formats, etc. To know more about Eagle App in detail, visit its official website. NGINX Hybrid Application Delivery Controller Platform improves API management, manages microservices and much more! GNOME 3.32 says goodbye to application menus Netlify raises $30 million for a new ‘Application Delivery Network’, aiming to replace servers and infrastructure management
Read more
  • 0
  • 0
  • 5028
Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €14.99/month. Cancel anytime
article-image-you-can-now-permanently-delete-your-location-history-and-web-and-app-activity-data-on-google
Sugandha Lahoti
03 May 2019
4 min read
Save for later

You can now permanently delete your location history, and web and app activity data on Google

Sugandha Lahoti
03 May 2019
4 min read
Google keeps a track of everything that you do online, including the websites you visit, the ads you see, the videos you watch, and the things you search. Soon, this is (partially) going to change. Google, on Wednesday, launched a new feature allowing users to delete all or part of the location history and web and app activity data, manually. This has been a long requested feature by all internet users, and Google says it “ has heard user feedback that they need to provide simpler ways for users to manage or delete their data.” In the Q1 earnings shared by Google’s parent company Alphabet, they said that EU’s USD 1.49 billion fine on Google is one of the reasons their profit sagged in the first three months of this year.  This was Google’s third antitrust fine by EU since 2017. In the Monday report, Alphabet said that profit in the first quarter fell 29 percent to USD 6.7 billion on revenue that climbed 17 percent to USD 36.3 billion. “Without identifying you personally to advertisers or other third parties, we might use data that includes your searches and location, websites and apps you’ve used, videos and ads you’ve seen, and basic information you’ve given us, such as your age range and gender,” the company explains on its Safety Center Web page. Google already allows you to turn off their location history and Web and app activity. You can also manually delete data that’s generated from searches and other Google services. This new feature, however, lets you remove such information automatically. It has a time limit for how long you want your activity data to be saved: Keep until I delete manually Keep for 18 months, then delete automatically Keep for 3 months, then delete automatically Based on the option chosen, any data older than that will be automatically deleted from your account on an ongoing basis. Surprisingly, Google still does not have an option that says 'don't track me' or 'automatically delete after I close website', which would ensure 100 percent data privacy and security for users. Source: Google Blog Enabling privacy has not been one of Google’s strongholds in recent times. Last year, Google was caught in a scandal which allowed Google to track a person’s location history in incognito mode, even when they had turned it off. In November last year, Google came under scrutiny by the European Consumer Organisation (BEUC). They published a report stating that Google is using various methods to encourage users to enable the settings ‘location history’ and ‘web and app activity’ which are integrated into all Google user accounts. They allege that Google is using these features to facilitate targeted advertising. “These practices are not compliant with GDPR, as Google lacks a valid legal ground for processing the data in question. In particular, the report shows that users’ consent provided under these circumstances is not freely given,” BEUC, speaking on behalf of the countries’ consumer groups, said. Google was also found helping the police use Google’s location database to catch potential crime suspects, and sometimes capturing innocent people in the process, per a recent New York Times investigation. The new feature will be rolled out in the coming weeks for location history and for web and app activity data. It is likely to be incorporated in data history as well, but it has not been officially confirmed. To enable this privacy feature, visit your Google account activity controls. European Consumer groups accuse Google of tracking its users’ location, calls it a breach of GDPR. Google’s incognito location tracking scandal could be the first real test of GDPR Google’s Sidewalk Lab smart city project threatens privacy and human rights: Amnesty Intl, CA says.
Read more
  • 0
  • 0
  • 5020

article-image-blazor-0-6-release-and-what-it-means-for-webassembly
Amarabha Banerjee
05 Oct 2018
3 min read
Save for later

Blazor 0.6 release and what it means for WebAssembly

Amarabha Banerjee
05 Oct 2018
3 min read
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
Read more
  • 0
  • 0
  • 4964

article-image-firefox-60-exciting-updates-web-developers
Sugandha Lahoti
15 May 2018
2 min read
Save for later

Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more

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

article-image-facebook-retires-its-open-source-contribution-to-nuclide-atom-ide-and-other-associated-repos
Bhagyashree R
13 Dec 2018
3 min read
Save for later

Facebook retires its open source contribution to Nuclide, Atom IDE, and other associated repos

Bhagyashree R
13 Dec 2018
3 min read
Yesterday, the Facebook Open Source team announced that they will no longer be able to contribute to the open source development of the Nuclide extension, Atom IDE, and other associated repos. https://twitter.com/fbOpenSource/status/1072928679695548416 Nuclide is a code editor built as a suite of features on top of the Atom text editor to provide hackability and the support of an active community. Facebook developed Nuclide to provide a first-class unified development environment for React Native, Hack, and Flow projects. Nuclide was first created for Facebook’s internal engineers and then was later open sourced in the hopes that others could also benefit from it too. In their announcement, Facebook told that this decision was made because they were not able to pay much attention to the project. They added, “However, our team has not been able to give this project the amount of attention and responsiveness it deserves and as a result, we’ve made the difficult decision to retire Nuclide and associated repos, such as the Atom-IDE packages.” Though they are not going to contribute to the Nuclide open source project, Facebook will continue to use it internally: https://twitter.com/amasad/status/1072930703065501696 The latest release, that is, Nuclide 0.366 will be the last release by Facebook. They have made its source code available in the Facebook Open Source Archive. The language and debugging services will still be supported in Atom and other compatible IDEs such as Microsoft Visual Studio Code or the clients listed on Langserver.org. Users on Hacker News are speculating that maybe this is the time to adopt VSCode and the main reason is that it provides good integration with TypeScript. Here’s what a user said, “A shame, in an ideal world there would be the benefit of outside contributions that made less internal work needed, so overall would be a win for Facebook. But probably this is related to Atom itself being taken over by VSCode, the number of users (and maybe contributors) appears to be going down.” Read the official announcement by Facebook on Nuclide’s website. Facebook’s artificial intelligence research team, FAIR, turns five. But what are its biggest accomplishments? Facebook AI research and NYU school of medicine announces new open-source AI models and MRI dataset as part of their FastMRI project Facebook plans to change its algorithm to demote “borderline content” that promotes misinformation, and hate speech on the platform
Read more
  • 0
  • 0
  • 4894
article-image-chromium-blacklists-nouveau-graphics-device-driver-for-linux-and-ubuntu-users
Bhagyashree R
07 Jan 2019
3 min read
Save for later

Chromium blacklists nouveau graphics device driver for Linux and Ubuntu users

Bhagyashree R
07 Jan 2019
3 min read
Last week, Ilia Mirkin, a former software engineer of Google, shared on the nouveau mailing list that nouveau is now blacklisted in Chromium 71 and Chrome. Many users have been facing rendering issues with nouveau such as tabs and address bar getting partially or totally covered by multiple black rectangles. Users also experienced memory and CPU leak. Because of these kinds of bug reports, the Chromium team considers the driver unstable. The team has disabled the GPU-acceleration by default, but users can still bypass the block if they want to by using these two options: installing proprietary NVidia drivers or running Chrome with --ignore-gpu-blacklist. Why did the Chromium team decide to blacklist Nouveau? Looking at the performance issues, the Chromium team wanted to blacklist the nouveau driver a long time ago. Also, now that Ubuntu ships with nouveau support by default they think that it's time to blacklist it in Chrome and Chromium. Since Ubuntu LTS supports nouveau, it was quite confusing for users to understand why it is being considered unstable for Chromium. The team commented on a bug report that they do not have enough resources to investigate and fix bugs and their main priority is keeping the browser secure and stable. One of the team members said, “We want a stable & secure browser first, a GPU-accelerated one second, only if possible. The default driver on Ubuntu LTS has severe issues, asking non-technical users to update their driver is just not acceptable as a prerequisite to using Chrome. If someone is interested in well-scoping the brokenness (version range and/or devices affected), we're happy to take a patch to the blacklist.” In addition to rendering issues, it does not come with support for many features. Users also feel that the root cause is Nvidia, which does not provide open source drivers to the kernel, unlike Intel or AMD. Hence, nouveau (an open source device driver) does not show the same degree of stability or performance. Some felt that to avoid this confusion the Chromium team could have provided some kind of warning message and recommendation about how to update/remove the driver to one that is supported. NVIDIA launches GeForce Now’s (GFN) ‘recommended router’ program to enhance the overall performance and experience of GFN NVIDIA demos a style-based generative adversarial network that can generate extremely realistic images; has ML community enthralled NVIDIA makes its new “brain for autonomous AI machines”, Jetson AGX Xavier Module, available for purchase
Read more
  • 0
  • 0
  • 4880

article-image-google-partners-with-wordpress-and-invests-1-2-million-on-an-opinionated-cms-called-newspack
Bhagyashree R
18 Jan 2019
2 min read
Save for later

Google partners with Wordpress and invests $1.2 million on “an opinionated CMS” called Newspack

Bhagyashree R
18 Jan 2019
2 min read
On Monday, Google announced that it has partnered with Automattic Inc., the parent company of WordPress.com, to develop an advanced open-source publishing and revenue-generating platform for news organizations named Newspack. Under the Google News Initiative, they have invested $1.2 million towards their efforts in building this platform. The purpose of this platform is to help journalists put their full energy in covering stories instead of worrying about designing websites, configuring CMSes, or building commerce systems. Google mentioned in the post, “It is trying to help small publishers succeed by building best practices into the product while removing distractions that may divert scarce resources. We like to call it "an opinionated CMS:” it knows the right thing to do, even when you don’t.” It will also provide publishers full access to all the plugins created by the WordPress developer community. Automattic, in an announcement, called for small and medium-sized digital news organizations to become charter participants in the development of Newspack. If you want to become one of the partners, you can fill in the form issued by Automattic, which is due by 11:59 p.m. Eastern Time (UTC -5:00) on February 1. The platform’s beta version is estimated to be released near the end of July and will be made available to publishers globally later this year. To get a better idea of the features and capabilities needed by publishers and their business impact, Automattic will be working with Spirited Media and News Revenue Hub. Spirited Media operates local digital news sites in Denver, Philadelphia, and Pittsburgh, and News Revenue Hub provides revenue solutions for digital publishers. In addition to Google, other funding organizations for this platform include The Lenfest Institute for Journalism, ConsenSys, the organization backing Civil Media, and The John S. and James L. Knight Foundation. WordPress 5.0 (Bebo) released with improvements in design, theme and more Introduction to WordPress Plugin Google and Waze share their best practices for canary deployment using Spinnaker
Read more
  • 0
  • 0
  • 4809

article-image-mapbox-introduces-martini-a-client-side-terrain-mesh-generation-code
Vincy Davis
16 Aug 2019
3 min read
Save for later

Mapbox introduces MARTINI, a client-side terrain mesh generation code

Vincy Davis
16 Aug 2019
3 min read
Two days ago, Vladimir Agafonkin, an engineer at Mapbox introduced a client-side terrain mesh generation code, called MARTINI, short for ‘Mapbox's Awesome Right-Triangulated Irregular Networks Improved’. It uses a Right-Triangulated Irregular Networks (RTIN) mesh, which consists of big right-angle triangles to render smooth and detailed terrain in 3D. RTIN has two advantages such as: The algorithm generates a hierarchy of all approximations of varying precision, thus enabling quick retrieving. It is very fast making it feasible for client-side meshing from raster terrain tiles. In a blog post, Agafonkin demonstrates a drag and zoom terrain visualization for users to adjust mesh precision in real time. The terrain visualization also displays the number of triangles generated with an error rate. Image Source: Observable How does the RTIN Hierarchy work Mapbox's MARTINI uses the RTIN algorithm which has a size of (2k+1) x (2k+1) grids, “that's why we add 1-pixel borders on the right and bottom”, says Agafonkin. The RTIN algorithm initiates an error map where a grid of error values guides the following mesh retrieval. The error map indicates the user if a certain triangle has to be split or not, by taking the height error value into account. The RTIN algorithm first calculates the error approximation of the smallest triangles, which is then propagated to the parent triangles. This process is repeated until the top two triangles’ errors are calculated and a full error map is produced. This process results in zero T-junctions and thus no gaps in the mesh. Image Source: Observable For retrieving a mesh, RTIN hierarchy starts with two big triangles, which is then subdivided to approximate, according to the error map. Agafonkin says, “This is essentially a depth-first search in an implicit binary tree of triangles, and takes O(numTriangles) steps, resulting in nearly instant mesh generation.” Users have appreciated the Mapbox's MARTINI demo and animation presented by Agafonkin in the blog post. A user on Hacker News says, “This is a wonderful presentation of results and code, well done! Very nice to read.” Another user comments, “Fantastic. Love the demo and the animation.” Another comment on Hacker News reads, “This was a pleasure to play with on an iPad. Excellent work.” For more details on the code and algorithm used in Mapbox's MARTINI, check out Agafonkin’s blog post. Introducing Qwant Maps: an open source and privacy-preserving maps, with exclusive control over geolocated data Top 7 libraries for geospatial analysis Using R to implement Kriging – A Spatial Interpolation technique for Geostatistics data
Read more
  • 0
  • 0
  • 4772
article-image-mozilla-firefox-will-soon-support-letterboxing-an-anti-fingerprinting-technique-of-the-tor-broswer
Bhagyashree R
07 Mar 2019
2 min read
Save for later

Mozilla Firefox will soon support ‘letterboxing’, an anti-fingerprinting technique of the Tor Browser

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

article-image-is-dark-an-aws-lambda-challenger
Fatema Patrawala
01 Aug 2019
4 min read
Save for later

Is Dark an AWS Lambda challenger?

Fatema Patrawala
01 Aug 2019
4 min read
On Monday, the CEO and Co-founder of Dark, Ellen Chisa, announced the project had raised $3.5 million in funding in a Medium post. Dark is a holistic project that includes a programming language (Darklang), an editor and an infrastructure. The value of this, according to Chisa, is simple: "developers can code without thinking about infrastructure, and have near-instant deployment, which we’re calling deployless." Along with Chisa, Dark is led by CTO, Paul Biggar, who is also the founder of CircleCI, the CI/CD pioneering company. The seed funding is led by Cervin Ventures, in participation with Boldstart, Data Collective, Harrison Metal, Xfactor, Backstage, Nextview, Promus, Correlation, 122 West and Yubari. What are the key features of the Dark programming language? One of the most interesting features in Dark is that deployments take a mere 50 milliseconds. Fast. Chisa says that currently the best teams can manage deployments around 5–10 minutes, but many take considerably longer, sometimes hours. But Dark was designed to change this. It's purpose-built, Chisa seems to suggest, for continuous delivery. “In Dark, you’re getting the benefit of your editor knowing how the language works. So you get really great autocomplete, and your infrastructure is set up for you as soon as you’ve written any code because we know exactly what is required.” She says there are three main benefits to Dark’s approach: An automated infrastructure No need to worry about a deployment pipeline ("As soon as you write any piece of backend code in Dark, it is already hosted for you,” she explains.) Tracing capabilities are built into your code. "Because you’re using our infrastructure, you have traces available in your editor as soon as you’ve written any code. There's undoubtedly a clear sense - whatever users think of the end result - that everything has been engineered with an incredibly clear vision. Dark has been deployed on SaaS platform and project tracking tools Chisa highlights how some customers have already shipped entire products on Dark. Chase Olivieri, who built Altitude, a subscription SaaS providing personalized flight deals, using Drark is cited by Chisa, saying that "as a bootstrapper, Dark has allowed me to move fast and build Altitude without having to worry about infrastructure, scaling, or server management." Downside of Dark is programmers have to learn a new language Speaking to TechCrunch, Chisa admitted their was a downside to Dark - you have to learn a new language. "I think the biggest downside of Dark is definitely that you’re learning a new language, and using a different editor when you might be used to something else, but we think you get a lot more benefit out of having the three parts working together." Chisa acknowledged that it will require evangelizing the methodology to programmers, who may be used to employing a particular set of tools to write their programs. But according to her the biggest selling point is that it will remove the complexity around deployment by bringing an integrated level of automation to the process. Is Darklang basically like AWS Lambda? The community on Hacker News compares Dark with AWS Lambda, with many pessimistic about its prospects. In particular they are skeptical about the efficiency gains Chisa describes. "It only sounds maybe 1 step removed from where aws [sic] lambda’s are now," said one user. "You fiddle with the code in the lambda IDE, and submit for deployment. Is this really that much different?” Dark’s Co-founder, Paul Biggar responded to this in the thread. “Dark founder here. Yes, completely agree with this. To a certain extent, Dark is aimed at being what lambda/serverless should have been." He continues by writing: "The thing that frustrates me about Lambda (and really all of AWS) is that we're just dealing with a bit of code and bit of data. Even in 1999 when I had just started coding I could write something that runs every 10 minutes. But now it's super challenging. Why is it so hard to take a request, munge it, send it somewhere, and then respond to it. That should be trivial! (and in Dark, it is)" The team has planned to roll out the product publicly in September. To find out more more about Dark, read the team's blog posts including What is Dark, How Dark is a functional language, and How Dark allows deploys in 50ms. The V programming language is now open source – is it too good to be true? “Why was Rust chosen for Libra?”, US Congressman questions Facebook on Libra security design choices Rust’s original creator, Graydon Hoare on the current state of system programming and safety
Read more
  • 0
  • 0
  • 4733