Using the Paint Timing API

It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting.
If you haven’t experimented with any of the various performance APIs, it may help if …

Using the Paint Timing API is a post from CSS-Tricks

Link: https://css-tricks.com/paint-timing-api/

Detect WEBP Support with JavaScript

Image optimization is a huge part of improving front-end performance.  We’ve traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering.  If you go to a site like GIPHY in Chrome you’ll be served a WEBP, but if you go to […]
The post Detect WEBP Support with JavaScript appeared first on David Walsh Blog.

Link: https://davidwalsh.name/detect-webp

The Critical Request

Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready.
Little may you know, a lot is going on under the hood.
Have you ever wondered how browser figures out which assets should be requested and in what order?
Today we’re going to take a look at how we can use resource priorities to improve the speed of delivery.

The Critical Request is a post from CSS-Tricks

Link: https://css-tricks.com/the-critical-request/

Optimizing Performance of A-Frame Scenes for Mobile Devices

For a WebVR capstone project at Oregon State University, our team investigated performance and optimizations for A-Frame on Android smartphones. We developed a means of benchmarking the level of 3D complexity a mobile phone is capable of, and determining which performance metrics are required for such a benchmark.

Link: https://hacks.mozilla.org/2017/07/optimizing-performance-of-a-frame-scenes-for-mobile-devices/

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion:
If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts.
I wasn’t the only one to say this, though, in all fairness to Rachel, she qualifies her assertion …

Musings on HTTP/2 and Bundling is a post from CSS-Tricks

Link: https://css-tricks.com/musings-on-http2-and-bundling/

Designing for performance: A data-informed approach for Quantum development

When we announced Project Quantum last October, we talked about how users would benefit from our focus on “performance gains…that will be so noticeable that your entire web experience will feel different.” We shipped the first significant part of this in Firefox 53, and continue to work on the engineering side. Now let’s dive into […]

Link: https://hacks.mozilla.org/2017/06/designing-for-performance-a-data-informed-approach-for-quantum-development/

Setting Up New Relic on Django, Apache HTTPD, and mod_wsgi

If you’ve used New Relic before, then you know that it’s normally pretty easy to integrate and doesn’t require any code modifications — at least, it didn’t when I was using their Java agent.

Using their Python agent on my Django application deployed with Apache HTTPD and mod_wsgi didn’t turn out to be so straightforward.

Link: https://dzone.com/articles/setting-up-newrelic-on-django-apache-httpd-and-mod?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

5 Common Issues of /etc/hosts in Your Servers

You shouldn’t make manual changes to the host files on your servers. The changes would be hard to maintain. But if you have to, here are five common issues that you should know, as well as some tips and free tools.
Check it out! And share it with your friends if you find it useful.

Link: https://dzone.com/articles/5-common-issues-of-etchosts-in-your-servers?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Why Use React JS for Fast Interactive User Interfaces?

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.
Nowadays users expect sleek, performant web applications that behave more and more like native apps.
Techniques have been devised to decrease the waiting time when a website gets downloaded on a user’s first visit. However, in web applications that expose a lot of interactivity, the time elapsing between a user action taking place and the app’s response is also important. Native apps feel snappy, web apps are expected to behave the same, even on less than ideal internet connections.
A number of modern JavaScript frameworks have sprung up which can be very effective at tackling this problem. React JS can be safely considered among the most popular and robust JavaScript libraries you can use to create fast interactive user interfaces for web apps.
In this article I’m going to talk about what React JS is good at and what makes it work, which should provide you with some context to help you decide if this library could be a good fit for your next project.
What Is React JS?
React JS is a Facebook creation which simply labels itself as being a JavaScript library for building user interfaces.
It’s an open source project which to date rakes in well over 67,000 stars on GitHub.
React JS is:

Declarative — which means that you only need to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes
Component-Based — you create your React-powered apps by assembling a number of encapsulated components, each managing its own state
Learn Once, Write Anywhere — React is not a full-blown framework, it’s just a library for rendering views.

How Does the Virtual DOM Work?
The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes. Let’s look closer into its mechanism.
The HTML Document Object Model or DOM is a

…programming interface for HTML and XML documents. … The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.
MDN

Whenever you want to change any part of a web page programmatically, you need to modify the DOM. Depending on the complexity and size of the document, traversing the DOM and updating it could take longer than users might be prepared to accept, especially if you take into account the work browsers need to do when something in the DOM changes. In fact, every time the DOM gets updated, browsers need to recalculate the CSS and carry out layout and repaint operations on the web page.
React JS makes possible for developers to make changes to the web page without having to deal directly with the DOM. This is done via the Virtual DOM.
The Virtual DOM is a lightweight, abstract model of the DOM. React uses the render() method to create a node tree from React components and updates this tree in response to changes in the data model resulting from actions.
Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
Updating UI Changes With the Virtual DOM
When it comes to updating the browser’s DOM, React roughly follows the steps below:

Whenever something changes, React re-renders the entire UI in a Virtual DOM representation
React then calculates the difference between the previous Virtual DOM representation and the new one
Finally, React patches up the real DOM with what has actually changed. If nothing has changed, React won’t be dealing with the HTML DOM at all.

One would think that such a process, which involves keeping two representations of the Virtual DOM in memory and comparing them, could be slower than dealing directly with the actual DOM. This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React JS and its Virtual DOM a great choice for building performant apps.
Is React Good for Every Project?
Continue reading %Why Use React JS for Fast Interactive User Interfaces?%

Link: https://www.sitepoint.com/react-fast-interactive-user-interfaces/

What is the Future of Front End Web Development?

I was asked to do a little session on this the other day. I’d say I’m underqualified to answer the question, as is any single person. If you really needed hard answers to this question, you’d probably look to aggregate data of survey results from lots of developers.
I am a little qualified though. Aside from running this site which requires me to think about front end development every day and exposes me to lots of conversations about front end …

What is the Future of Front End Web Development? is a post from CSS-Tricks

Link: https://css-tricks.com/future-front-end-web-development/