Tech News - Web Development

Snapchat's redesign was met with considerable anger earlier this year, with 1.2 million users signing a petition opposing the redesign. The impact of that anger was revealed on Tuesday with Snap Inc (Snapchat's parent company) confirming in a prepared Q2 earnings call statement that Snapchat had dropped from 191 million to 188 million daily active users in a quarter. However, CEO Evan Spiegel countered this 2% drop by revealing that Snapchat's monthly active users are actually growing in number. However, despite losing users, Snap Inc. has seen impressive results in terms of revenue. Year on year, revenue has grown 44% - in Q2 2017 it was 182 million up to 262 million in Q2 2018. That's 44% growth.  Snapchat's redesign was a gamble Clearly, Snapchat's decision to redesign its platform was a gamble - whether or not it will pay off isn't immediately clear. The trade-off is one between a design that users had grown to love and making the platform more friendly to advertisers and publishers that want to reach those users. This is something Spiegel recognizes in his statement: We feel that we have now addressed the biggest frustrations [about the redesign] we’ve heard and are eager to make more progress on the tremendous opportunity we now have to show more of the right content to the right people. For example, the number of people that watch Publisher Stories and Shows on iOS every day has grown by more than 15 percent this year, and we are excited to bring the learnings from our iterations on iOS to our Android application. Additionally, more Snaps from Publisher Stories and Shows were viewed in July than any other month in our history. You might say that this is now a critical moment for Snap Inc. This could just be a blip as it moves to grow its revenue streams with a more publisher-friendly platform. But equally, this might be an indication that users are beginning to fall out of love with Snapchat. This is all good news for Instagram, who might now smell blood as it appears to be moving from strength to strength in the battle for audience share. Is Snapchat's case unique in the social media world? To a certain extent, Snap's challenges aren't actually that unique in the context of social media companies. At the end of July, for example, Facebook shares fell 20% after its average daily visitors missed analyst projections. Twitter has also been in a similar situation with its market value struggling. However, one analysis put forward by Bloomberg suggests that Snapchat is having an identity crisis. Having "defined itself in opposition to the internet establishment," the platform is now "borrowing liberally from the internet conventions it has scorned." These 'conventions' are those design tactics deployed by platforms to drive revenue through advertising. We'll just have to wait and see how this identity crisis evolves, and what Snap Inc. decides to do next. Read next 15 year old uncovers Snapchat’s secret visual search function How to stay safe while using Social Media Facebook, Apple, Spotify pull Alex Jones content

News Airbnb releases visx 1.0 This is a collection of reusable, low-level visualization components that combine the powers of D3 and React. It has been used internally at Airbnb for the last 2.5 years and was publicly released last week. We wrote a lot about it in yesterday’s issue of Bytes, if you’d like a longer, more colorful breakdown. Dan Abramov tweets about the future of import React tl;dr, eventually (like, a long eventually), stop using import React from 'react' and start using import * as React from 'react'. Articles Introducing the new JSX Transform This article from the official React Blog describes how React 17 provides support for a new version of JSX Transform. It goes over exactly what that new version is and how to try it out. The Complete Guide to Next.js Authentication In this comprehensive guide, Nader Dabit will teach you how to implement authentication in a Next.js app. It covers client authentication, authenticated server-rendered pages, authenticated API routes, protected routes, and redirects. Understanding React rendering Rendering is the most important procedure that a programmer has to manage in frontend development. In React, the render() method is the only required method in a class component and is responsible for describing the view to be rendered to the browser window. This article will help you understand the subtleties of how this method works. Tutorials Building a Material UI Dashboard with React In this tutorial, you’ll learn how to build a full-stack dashboard with KPIs, charts, and a data table. It takes you from data in the database to the interactive, filterable, and searchable admin dashboard. Building Multistep Forms with MaterialUI and React Hooks This tutorial walks you through how to use the React useState hook and the MaterialUI component library to build a multistep medical history collection form. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects Vime An open-source media player that’s customizable, extensible, and framework-agnostic. It also comes with bindings for React and other frameworks. headlessui-react A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS. Created by Tailwind Labs. reactivue Use the Vue Composition API in React components. Videos I built a chat app in 7 minutes with React & Firebase This video from Fireship demonstrates how quickly React and Firebase can help you to build simple apps like this chat app. Jeff is also maybe showing off just a little bit here, but we’re ok with that too.

Photo by Patrick Tomasso on Unsplash If you have visited the docs at angular.io lately, you might have noticed some changes in our content layout and structure. As the lead technical writer for Angular, I thought I’d take a moment to cover some of the main goals we have for making the Angular documentation experience the best experience possible. Focus on developers new to Angular A common pitfall for many documentation sets is that they address too many audiences at once. This practice results in content that is verbose, difficult to navigate, and frustrating to read. For Angular, it’s important that we focus on a single audience at a time, because we want to make sure to tell the right stories clearly and concisely. Right now, that means our documentation efforts focus on developers new to Angular. Since I joined the Angular team, I’ve heard a recurring theme: “Angular has a steep learning curve.” “The Angular documentation is overwhelming.” As someone new to Angular, I find myself agreeing with these sentiments. That’s why, for the next several months, we’re focusing on making the getting started experience the best experience possible. Some of the changes we’re making include: Revamping the table of contents (the lists of topics in the left navigation) to help users understand what main concepts of Angular they should understand, and what topics can wait until they want to expand their applications further. Categorizing topics into three topic types: Concepts, Tasks, and Tutorials. It’s important for any reader — whether they are new to Angular or not! — to know what kind of content they’re reading and whether it’s what they’re looking for. No one likes looking for how to get something done only to find themselves 3 paragraphs into a tutorial. Streamlining existing content. When I write, I imagine that I’m tutoring a friend who has a plane to catch in 5 minutes. This image helps me focus on content that is casual in tone, but also concise and to the point. Applying this idea to Angular documentation will help users find the information they need and get back to code. Help users get things done Developers need documentation for a lot of different reasons. Sometimes you need a basic walkthrough of the technology. Other times, you need a real-world tutorial that addresses a problem that you’re facing. Like focusing on a specific audience, a good documentation set focuses on one of these reasons at a time. For Angular, we’re focused on writing content that helps users get things done. When you navigate to the Angular documentation, we want you to find the information you need to complete a task or understand a feature, and then we want you to be able to get back to writing great code. To accomplish this goal, we’re going through all of the topics to make sure they clearly state what they cover and why that’s important. You should know right away if you’re reading the content you need. And if you’re not? We’re working on providing links to other topics that might be more helpful. Of course, there’s always a place for more conceptual content. And there’s a lot of great value in developing a deep understanding of how something works. I’m sure we’ll focus on improving our conceptual content at some point in the future. For the time being, however, we want to make sure that you can find the help you need quickly and easily. Improve, but don’t break As we mentioned earlier, many within the Angular community find the current documentation overwhelming. At the same time, we’ve also heard that the documentation remains one of the best places to learn how to build with Angular. That’s why one of the other key goals that we’re focusing on is to improve the documentation without breaking it. As we write new content or improve existing content, we try to make sure that the existing documentation remains intact. There are always going to be times where we might fall short on this goal. When that happens, please let us know by filing a GitHub issue so we can investigate. Conclusion We think that focusing on new Angular developers, writing content that helps you get things done, and making sure we improve the documentation without breaking it, will result in a better documentation experience for everyone. Of course, this is just the beginning. For example, as we wrap up content for new developers, we’ll start looking at other audiences, such as those of you working on enterprise-level applications. I can’t express how grateful I am to work on a product that has such a passionate, supportive community, and I look forward to working with all of you to make the Angular documentation the best experience possible. In the meantime, continue to check out the docs and don’t hesitate to let us know what you think! Angular Thoughts on Docs was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

On Tuesday, Fabrice Bellard, the creator of FFmpeg and QEMU and Charlie Gordon, a C expert, announced the first public release of QuickJS. Released under MIT license, it is a “small but complete JavaScript engine” that comes with support for the latest ES2019 language specification. Features in QuickJS JavaScript engine Small and easily embeddable: The engine is formed by a few C files and does not have any external dependency. Fast interpreter: The interpreter shows impressive speed by running 56,000 tests from the ECMAScript Test Suite1 in just 100 seconds, and that too on a single-core CPU. A runtime instance completes its life cycle in less than 300 microseconds. ES2019 support: The support for ES2019 specification is almost complete including modules, asynchronous generators, and full Annex B support (legacy web compatibility). Currently, it does not has support for realms and tail calls. No external dependency: It can compile JavaScript source to executables without the need for any external dependency. Command-line interpreter: The command-line interpreter comes with contextual colorization and completion implemented in Javascript. Garbage collection: It uses reference counting with cycle removal to free objects automatically and deterministically. This reduces memory usage and ensures deterministic behavior of the JavaScript engine. Mathematical extensions: You can find all the mathematical extensions in the ‘qjsbn’ version, which are fully-backward compatible with standard Javascript. It supports big integers (BigInt), big floating-point numbers (BigFloat), operator overloading, and also comes with ‘bigint’ and ‘math’ mode. This news struck a discussion on Hacker News, where developers were all praises for Bellard’s and Gordon’s outstanding work on this project. A developer commented, “Wow. The core is a single 1.5MB file that's very readable, it supports nearly all of the latest standard, and Bellard even added his own extensions on top of that. It has compile-time options for either a NaN-boxing or traditional tagged union object representation, so he didn't just go for a single minimal implementation (unlike e.g. OTCC) but even had the time and energy to explore a bit. I like the fact that it's not C99 but appears to be basic C89, meaning very high portability. Despite my general distaste for JS largely due to websites tending to abuse it more than anything, this project is still immensely impressive and very inspiring, and one wonders whether there is still "space at the bottom" for even smaller but functionality competitive implementations.” Another wrote, “I can't wait to mess around with this, it looks super cool. I love the minimalist approach. If it's truly spec compliant, I'll be using this to compile down a bunch of CLI scripts I've written that currently use node. I tend to stick with the ECMAScript core whenever I can and avoid using packages from NPM, especially ones with binary components. A lot of the time that slows me down a bit because I'm rewriting parts of libraries, but here everything should just work with a little bit of translation for the OS interaction layer which is very exciting.” To know more about QuickJS, check out Fabrice Bellard's official website. Firefox 67 will come with faster and reliable JavaScript debugging tools Introducing Node.js 12 with V8 JavaScript engine, improved worker threads, and much more React Native 0.59 is now out with React Hooks, updated JavaScriptCore, and more!

Articles A Gentle Introduction to Code Splitting with React This article uses a real-word example of building a healthcare application to give a helpful introduction to code splitting. Examples of large production-grade, open-source React apps In this article, Max Rosen reviews a few large-scale, open-source React apps that you might want to check out. Converting the ReactJS.org documentation to use hooks Mark Stewart wrote about how and why he converted the ReactJS.org documentation to use functions and hooks, instead of class-based components. Tutorials Create a React App with TS, Redux and OAuth 2.0 - Spotify login example In this tutorial, you’ll create a React app using the official Redux + Typescript template and add OAuth 2.0 user authorization. The OAuth 2.0 authorization in this tutorial is used to connect to Spotify’s Web API, but can be used for any service with the same authorization flow. The web app created you’ll create is a stand-alone client-side web app with no server-side application needed. Build a TikTok Clone with React and Firebase In this tutorial you’ll use React, Firebase, and Material UI to create a TikTok clone. If your clone is good enough, maybe you’ll be able to convince millions of American teens to download it if/when the original TikTok gets banned 🙃. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects react-email-editor React Email Editor is a drag-n-drop email template builder component that makes it easy to add a solid email editor to your React apps. Designs are saved in JSON and can be exported as HTML. Spearmint A open-source tool to help React developers generate tests for a wide range of applications and technologies. Firetable An open-source, spreadsheet-like interface for Firebase/Firestore built in React. radioactive-state Radioactive state is a deeply reactive state. When it is mutated at any level (shallow or deep) it re-renders the component automatically.

Articles Rewriting Facebook’s “Recoil” React library from scratch in 100 lines Bennett gives a great breakdown of Recoil by building a clone of it from scratch and discussing each of the components that go into it. React + TypeScript ❤️: The good parts ⚡ In this article, Diego writes about both the pros and cons of building with React and TypeScript and why he ultimately loves it. Tutorials Making Draggable Components in React This tutorial illustrates some simple ways to make draggable components in React using the react-draggable package. How to Use Redux in Your React TypeScript App This guide demonstrates how to use Redux in your React TypeScript project by building an app that allows you to add, delete, and show articles. It assumes some basic knowledge of TypeScript, React, and Redux, but is still pretty beginner-friendly. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects React Popup Component v2 A simple react popup component that help you create simple and complex Modals, tooltips, and menus for your next React App. Jotai A new, primitive, flexible state management library for React, from the creators of React Spring. New VSCode extension for React icons Allows you to search from 20+ free icon sets and directly add SVG or JSX into your code without leaving the editor. Turtle 🐢 A progressive web app built with React, Ionic, and Firebase that syncs videos so that you can have a socially-distanced watch party with friends Videos React in 100 seconds A great review of the history and fundamentals of React by Fireship.io. Building a Multiplayer Chess Game This 17-minute video walks through building a web app for multiplayer chess with React and Node.js. Serverless Video Chat App using Firebase and WebRTC in React This 55-minute video tutorials demonstrates how to build a video chat app and gives a helpful introduction to WebRTC.

Sometimes, you end up creating a whole new page, or a whole new app, just to see what your component can do on its own. This can be a painful process and, which is why Storybook exists in React. With Storybook, you're automating a sandboxed environment to work with. It also handles all the build steps, so you can write a story for your components and see the result. In this article we are going to use the Storybook add-ons, which you can test on any aspect of your component before worrying about integrating it in your application. To be specific we are going to look at Actions, which is a by default add-on in Storybook. This React tutorial is an extract from the book React 16 Tools written by Adam Boduch. Adam Boduch has been involved with large-scale JavaScript development for nearly 10 years. He has practical experience with real-world software systems, and the scaling challenges they pose. Working with Actions in React Storybook The Actions add-on is enabled in your Storybook by default. The idea with Actions is that once you select a story, you can interact with the rendered page elements in the main pane. Actions provide you with a mechanism that logs user interactions in the Storybook UI. Additionally, Actions can serve as a general- purpose tool to help you monitor data as it flows through your components. Let's start with a simple button component: import React from 'react'; const MyButton = ({ onClick }) => ( <button onClick={onClick}>My Button</button> ); export default MyButton; The MyButton component renders a button element and assigns it an onClick event handler. The handler is actually defined by MyComponent; it's passed in as a prop. So let's create a story for this component and pass it an onClick handler function: import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import MyButton from '../MyButton'; storiesOf('MyButton', module).add('clicks', () => ( <MyButton onClick={action('my component clicked')} /> )); Do you see the action() function that's imported from @storybook/addon-actions? This is a higher-order function—a function that returns another function. When you call action('my component clicked'), you're getting a new function in return. The new function behaves kind of like console.log(), in that you can assign it a label and log arbitrary values. The difference is that functions created by the Storybook action() add-on function is that the output is rendered right in the actions pane of the Storybook UI: As usual, the button element is rendered in the main pane. The content that you're seeing in the actions pane is the result of clicking on the button three times. The output is the exact same with every click, so the output is all grouped under the my component clicked label that you assigned to the handler function. In the preceding example, the event handler functions that action() creates are useful for as a substitute for actual event handler functions that you would pass to your components. Other times, you actually need the event handling behavior to run. For example, you have a controlled form field that maintains its own state and you want to see what happens as the state changes. For cases like these, I find the simplest and most effective approach is to add event handler props, even if you're not using them for anything else. Let's take a look at an example of this: import React, { Component } from 'react'; class MyRangeInput extends Component { static defaultProps = { onChange() {}, onRender() {} }; state = { value: 25 }; onChange = ({ target: { value } }) => { this.setState({ value }); this.props.onChange(value); }; render() { const { value } = this.state; this.props.onRender(value); return ( <input type="range" min="1" max="100" value={value} onChange={this.onChange} /> ); } } export default MyRangeInput; Let's start by taking a look at the defaultProps of this component. By default, this component has two default handler functions for onChange and onRender—these do nothing so that if they're not set, they can still be called and nothing will happen. As you might have guessed, we can now pass action() handlers to MyRangeInput components. Let's try this out. Here's what your stories/index.js looks like now: import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import MyButton from '../MyButton'; import MyRangeInput from '../MyRangeInput'; storiesOf('MyButton', module).add('clicks', () => ( <MyButton onClick={action('my component clicked')} /> )); storiesOf('MyRangeInput', module).add('slides', () => ( <MyRangeInput onChange={action('range input changed')} onRender={action('range input rendered')} /> )); Now when you view this story in the Storybook UI, you should see lots of actions logged when you slide the range input slider: As the slider handle moves, you can see the two event handler functions that you've passed to the component are logging the value at different stages of the component rendering life cycle. The most recent action is logged at the top of the pane, unlike browser dev tools which logs the most recent value at the bottom. Let's revisit the MyRangeInput code for a moment. The first function that's called when the slider handle moves is the change handler: onChange = ({ target: { value } }) => { this.setState({ value }); this.props.onChange(value); }; This onChange() method is internal to MyRangeInput. It's needed because the input element that it renders uses the component state as the single source of truth. These are called controlled components in React terminology. First, it sets the state of the value using the target.value property from the event argument. Then, it calls this.props.onChange(), passing it the same value. This is how you can see the even value in the Storybook UI. Note that this isn't the right place to log the updated state of the component. When you call setState(), you have to make the assumption that you're done dealing with state in the function because it doesn't always update synchronously. Calling setState() only schedules the state update and the subsequent re-render of your component. Here's an example of how this can cause problems. Let's say that instead of logging the value from the event argument, you logged the value state after setting it: There's a bit of a problem here now. The onChange handler is logging the old state while the onRender handler is logging the updated state. This sort of logging output is super confusing if you're trying to trace an event value to rendered output—things don't line up! Never log state values after calling setState(). If the idea of calling noop functions makes you feel uncomfortable, then maybe this approach to displaying actions in Storybook isn't for you. On the other hand, you might find that having a utility to log essentially anything at any point in the life cycle of your component without the need to write a bunch of debugging code inside your component. For such cases, Actions are the way to go. To summarize, we learned about Storybook add-on Actions. We saw it help with logging and the links provide a mechanism for navigation beyond the default. Grab the book React 16 Tooling today. This book covers the most important tools, utilities, and libraries that every React developer needs to know — in detail. What is React.js and how does it work? Is React Native is really Native framework? React Native announces re-architecture of the framework for better performance  

Starting from this month Google App Engine will allow web developers to deploy Node.js web applications to its standard environment. The App Engine standard environment is nothing but container instances running on Google's infrastructure. These containers previously supported runtimes in Java 7, Java 8, Python 2.7, Go and PHP. Node.js 8 is the new addition to this long list of environments. Developers who always wanted a ready and quick platform to build web applications on Cloud scale with a very low cost to start or wanted to get rid of the burden of managing and provisioning infrastructure have found that Google App Engine is a very good choice. It has been a developer’s favorite due to its zero-config deployments, zero server management, and auto-scaling capabilities. This move from Google brings in numerous advantages such as fast deployments and automatic scaling, better developing experience, and reliable security features. Fast Deployment and Automatic scaling The app Engine standard environment is known for it’s shorter deployment time. A basic Express.js application can be deployed under a minute with the standard environment. Not only that but App Engine allows the apps to automatically scale based on the incoming traffic to that application. For example, App Engine automatically scales to zero when there is no request made for that particular application. This allows developers to implement cost-effective measures while developing or deploying their applications. Enhanced Developer Experience Google has always been striving to provide a smoother developer experience with all its products. That’s also true for this new improvement to the App Engine. The new Node.js runtime comes with no language or API restrictions. This allows developers to choose npm modules of their choice. Along with this, App Engine also provides application logs and key performance indicators in Stackdriver, which takes care of Monitoring, logging, and diagnostics for applications on the Google Cloud Platform. Reliable Security: Updating the operating system or Node.js for any major or minor versions is a tedious task. App Engine takes care of all this by automatically handling all the updates required for your application to work smoothly with all the latest features. Not only that but App Engine’s automated one-click certificate generation allows developers to serve their application under a secure HTTPS URL with their own custom domain. The relationship between Node.js and Google goes a long way beyond GCP as Node.js runs on V8, Google's open source high-performance JavaScript engine. This recent collaboration between Node.js and Google also comes with better crafted node.js libraries that allow developers to use GCP products within their node.js applications. To try out all these new features on the App Engine you can visit their official website. Building chat application with Kotlin using Node.js, the powerful Server-side JavaScript platform Node 10.0.0 released, packed with exciting new features How to deploy a Node.js application to the web using Heroku

Articles Guidelines to improve your React folder structure In this article, Max Rosen starts of by showing you his typical folder structure, then teaches you his guiding principles to create the folder structure that “feels right,” at least for his purposes. How to make your react-native project work for the web React-native-web should (in theory) allow you to build on both mobile and web platforms — all within a single codebase. In this article, Clint walks through building a very basic app and the tips and tricks he learned along the way to help it perform at high level without being too buggy. Why Next.js my ultimate choice over Gatsby, Gridsome, and Nuxt? In this article, Ondrej walks through his process for evaluating each of these technologies and why he ultimately chose to go with Next.js. Tutorials Building complex animations with React and Framer Motion This tutorial walks you through how to create smooth, advanced animations in React with clean and minimal declarative code. Building React Apps With Storybook In this in-depth tutorial, you’ll learn how to build and test react components in isolation using Storybook. You will also learn how to use the knobs add-on to modify data directly from the storybook explorer. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects SurveyJS A JavaScript survey and form library that also features a React version. react-range Range input with a slider. It’s accessible and lets you bring your own styles and markup. react-xr React components and hooks for creating VR/AR applications with react-three-fiber. Videos How To Build CodePen With React In this 30-minute video, you’ll learn how to create a simple clone of the core functionality of CodePen using React. Building a Netflix clone with React, Styled Components, and Firebase This 10-hour video (😱) walks you through all the steps of building a React clone from scratch.

Last week, researchers published a paper titled Browser Fingerprinting: A survey, that gives a detailed insight into what browser fingerprinting is and how it is being used in the research field and the industry. The paper further discusses the current state of browser fingerprinting and the challenges surrounding it. What is browser fingerprinting? Browser fingerprinting refers to the technique of collecting various device-specific information through a web browser to build a device fingerprint for better identification. The device-specific information may include details like your operating system, active plugins, timezone, language, screen resolution, and various other active settings. This information can be collected through a simple script running inside a browser. A server can also collect a wide variety of information from public interfaces and HTTP headers. This is a completely stateless technique as it does not require storing any collected information inside the browser. The following table shows an example of a browser fingerprint: Source: arXiv.org The history of browser fingerprinting Back in 2009, Jonathan Mayer, who works as an Assistant Professor in the Computer Science Department at Princeton University, investigated if the differences in browsing environments can be exploited to deanonymize users. In his experiment, he collected the content of the navigator, screen, navigator.plugins, and navigator.mimeTypes objects of browsers. The results drawn from his experiment showed that from a total of 1328 clients, 1278 (96.23%) could be uniquely identified. Following this experiment, in 2010, Peter Eckersley from the Electronic Frontier Foundation (EFF) performed the Panopticlick experiment in which he investigated the real-world effectiveness of browser fingerprinting. For this experiment, he collected 470,161 fingerprints in the span of two weeks. This huge amount of data was collected from HTTP headers, JavaScript, and plugins like Flash or Java. He concluded that browser fingerprinting can be used to uniquely identify 83.6% of the device fingerprints he collected. This percentage shot up to 94.2% if users had enabled Flash or Java as these plugins provided additional device information. This is the study that proved that individuals can really be identified through these details and the term “browser fingerprinting was coined”. Applications of Browser fingerprinting As is the case with any technology, browser fingerprinting can be used for both negative and positive applications. By collecting the browser fingerprints, one can track users without their consent or attack their device by identifying a vulnerability. Since these tracking scripts are silent and executed in the background users will have no clue that they are being tracked. Talking about the positive applications, with browser fingerprinting, users can be warned beforehand if their device is out of date by recommending specific updates. This technique can be used to fight against online fraud by verifying the actual content of a fingerprint. “As there are many dependencies between collected attributes, it is possible to check if a fingerprint has been tampered with or if it matches the device it is supposedly belonging to,” reads the paper. It can also be used for web authentication by verifying if the device is genuine or not. Preventing unwanted tracking by Browser fingerprinting By modifying the content of fingerprints: To prevent third-parties from identifying individuals through fingerprints, we can send random or pre-defined values instead of the real ones. As third-parties rely on fingerprint stability to link fingerprints to a single device, these unstable fingerprints will make it difficult for them to identify devices on the web. Switching browsers: A device fingerprint is mainly composed of browser-specific information. So, users can use two different browsers, which will result in two different device fingerprints. This will make it difficult for a third-party to track the browsing pattern of a user. Presenting the same fingerprint for all users: If all the devices on the web present the same fingerprint, there will no advantage of tracking the devices. This is the approach that the Tor Browser uses, which is known as the Tor Browser Bundle (TBB). Reducing the surface of browser APIs: Another defense mechanism is decreasing the surface of browser APIs and reducing the quantity of information a tracking script can collect. This can be done by disabling plugins so that there are no additional fingerprinting vectors like Flash or Silverlight to leak extra device information. Read the full paper, to know more in detail. DuckDuckGo proposes “Do-Not-Track Act of 2019” to require sites to respect DNT browser setting Mozilla Firefox will soon support ‘letterboxing’, an anti-fingerprinting technique of the Tor Browser Mozilla engineer shares the implications of rewriting browser internals in Rust

Articles Build A Confirmation Modal in React with State Machines In this article, Dave builds a reusable state machine using React and Robot to handle this modal confirmation flow, and wraps it up into a custom hook. Why the OKCupid team decided against using GraphQL for local state management The OKCupid team describes themselves as “pretty big fans of using GraphQL.” So why did they decide against using it for local state management? Read the article to find out. Introduction to props in React This one’s for the beginners. In this post you’ll learn how to properly use props to pass data to components in React. State of Frontend 2020 Survey results Some interesting results in the state of frontend 2020 survey, specifically around React, Redux, and Gatsby vs Next. Tutorials 8 ways to deploy a React app for free This tutorial demonstrates how to deploy a React application in eight different ways. All the services described in this post are completely free with no hidden credit card requirements. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects React + TypeScript Cheatsheets Cheatsheets for experienced React developers getting started with TypeScript react-colorful A tiny color picker component for modern React apps. Videos Fullstack React, GraphQL, TypeScript Tutorial In this 14-hour long video, Ben Awad walks you through building a fullstack React, GraphQL, TypeScript app. This tutorial is geared towards intermediate developers looking to get their feet wet with these technologies. Ionic Framework Horizontal & SideMenu Navigation in ReactJS Application This 8-minute video demonstrates how to use Window.matchMedia() to do media queries and get a result back, and based on that result to hide or show the side menu.

News Storybook 6.0 is released Storybook 6.0 is a lot easier to set up and also incorporates many best practices for component-drive development. Other highlights include: Zero-configuration setup Next-gen, dynamic story format Live edit component examples The ability to combine multiple story books Rome: A new toolchain for JavaScript Sebastian McKenzie announced Rome’s first beta release last week, and called it “the spiritual successor of Babel” (he’s allowed to say that because he created Babel). “Rome is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others” We wrote more in depth about Rome in yesterday’s issue of Bytes. Articles Understanding React’s useRef Hook In this article you’ll learn everything you’d ever want to know about React’s useRef Hook including but not limited to how you can recreate it with useState - because, why not? A Guide to Commonly Used React Component Libraries This guide gives some helpful background info and the pros and cons of various well-known component libraries. Tutorials Build a Landing Page with Chakra UI - Part 1 This tutorial series will teach you how to build a responsive landing page in React using the Chakra UI design system. This first part goes over how to set up your landing page and build the hero section. How to setup HTTPS locally with create-react-app This tutorial goes over how to serve a local React app via HTTPS. You’ll be setting up HTTPS in development for a create-react-app with an SSL certificate. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects Flume An open-source library that provides a node editor for visual programming and a runtime engine for executing logic in any JS environment (also portable to non-js). Vite + React + Tailwind CSS starter This is a simple setup using Vite, React and Tailwind for faster prototyping. Videos How the React Native Bridge works This short video from Jimmy Cook gives a helpful deep dive into the React Native bridge and how communication between the native side and the JavaScript side will change in the future.

Articles React Component Patterns In this article, Alexi Taylor will help you to identify the trade-offs of the different React patterns and when each pattern would be most appropriate. These patterns will allow for more useful and reusable code by adhering to design principles like separation of concern, DRY, and code reuse. Each major pattern includes an example hosted on CodeSandBox. Redux vs React’s Context API For the last few years, Redux has been THE state management solution for bigger React apps. It’s far from being dead and yet, a strong enemy is arising: React’s Context API! In this article you’ll learn, What is Redux? What is React’s Context API? Will React’s Context API replace Redux? Tutorials Morphing SVG With react-spring In this tutorial, Mikael gives a helpful overview on how to add the popular morphing effect to an SVG using the react-spring animation library. Sponsor React developers are in demand on Vettery Vettery is an online hiring marketplace that’s changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today. Projects Intro to Storybook Two Storybook maintainers just released this new collection of guides that walks through all of the new Storybook features, while still covering the fundamentals. Effectful JavaScript Debugger A new JavaScript/TypeScript debugger with hot-swapping, API & Persistent state, time traveling and more. Zustand A small, fast and scaleable state-management solution. It has a hooks-based api, isn’t boilerplate-y or opinionated, and is “just enough to be explicit and flux-like.” Videos Why Next.js is the future of React In this 10-minute video, Lee Robinson shares why he believes that Next.js will be the go-to way to build React applications in the future. Keep in mind that Lee is a Next.js maintainer, so he might be a little biased. 🙂 RN Casts A collection of bite-sized React and React Native videos that each cover one specific topic (i.e. Handling input events in React).

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

Last month, the ECMAScript proposal for optional chaining operator reached stage 3 of the TC39 process. This essentially means that the feature is almost finalized and is awaiting feedback from users. The optional chaining operator aims to make accessing properties through connected objects easier when there are chances of a reference or function being undefined or null. https://twitter.com/drosenwasser/status/1154456633642119168 Why optional chaining operator is proposed in JavaScript Developers often need to access properties that are deeply nested in a tree-like structure. To do this, they sometimes end up writing long chains of property accesses. This can make them error-prone. If any of the intermediate references in these chains are evaluated to null or undefined, JavaScript will throw the TypeError: Cannot read property 'name' of undefined error. The optional chaining operator aims to provide a more elegant way of recovering from such instances. It allows you to check for the existence of deeply nested properties in objects. How it works is that if the operand before the operator evaluates to undefined or null, the expression will return to undefined. Or else, the property access, method or function call will be evaluated normally. MDN compares this operator with the dot (.) chaining operator. “The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is null or undefined, the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist,” the document reads. The concept of optional chaining is not new. Several other languages also have support for a similar feature including the null-conditional operator in C# 6 and later, optional chaining operator in Swift, and the existential operator in CoffeeScript. The optional chaining operator is represented by ‘?.’. Here’s how its syntax looks like: obj?.prop       // optional static property access obj?.[expr]     // optional dynamic property access func?.(...args) // optional function or method call Some properties of optional chaining Short-circuiting: The rest of the expression is not evaluated if an optional chaining operator encounters undefined or null at its left-hand side. Stacking: Another property of the optional chaining operator is that you can stack them. This means that you can apply more than one optional chaining operator on a sequence of property accesses. Optional deletion: You can also combine the ‘delete’ operator with an optional chain. Though there is time for the optional chaining operator to land in JavaScript, you can give it try with a Babel plugin. To stay updated with its browser compatibility, check out the MDN web docs. Many developers are appreciating this feature. A developer on Reddit wrote, “Considering how prevalent 'Cannot read property foo of undefined' errors are in JS development, this is much appreciated. Yes, you can rant that people should do null guards better and write less brittle code. True, but better language features help protect users from developer laziness.” Yesterday, the team behind V8, Chrome’s JavaScript engine, also expressed their delight on Twitter: https://twitter.com/v8js/status/1166360971914481669 Read the Optional Chaining for JavaScript proposal to know more in detail. ES2019: What’s new in ECMAScript, the JavaScript specification standard Introducing QuickJS, a small and easily embeddable JavaScript engine Introducing Node.js 12 with V8 JavaScript engine, improved worker threads, and much more