Timer Bars in CSS with Custom Properties
Strategy

Timer Bars in CSS with Custom Properties


I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there are tons and tons of ways you could approach a “timer” UI. This isn’t an exploration of all of those (a search on CodePen would be more helpful there), but an exploration of the one way that was useful to me.

The kind of timer I needed was what the project called a “round time” bar. An action is performed. It may cause a round time, and most further actions are blocked until the round time is over. So, a very clear red bar that ticks away was the right UI. It gives a sense of rhythm and flow where you can kinda feel the end of the timer and time your next action.

a linear animation that shrinks the bar to zero.

Setting this up is fairly easy…

Let’s give ourselves a parent/child thing, just in case we want to style the empty part of the container at some point.

<div class="round-time-bar">
  <div></div>
</div>

For now, let’s just style the bar inside.

.round-time-bar div {
  height: 5px;
  background: linear-gradient(to bottom, red, #900);
}

That gives us a nice little red bar we can use for the time indicator.

Next we need to make it tick down, but here’s where we need to think about functionality. A timer like this needs to know how long it’s timing! We can give it that information right in the HTML. This doesn’t mean we’re avoiding JavaScript — we’re embracing it. We’re saying, “hey JavaScript, please give us the duration as a variable and we’ll take it from there.”

<div class="round-time-bar" style="--duration: 5;">
  <div></div>
</div>

In fact, this way is very friendly to modern DOM-handling JavaScript. As long as that --variable is correct, it is free to re-render that DOM element at any time and we can make sure the design handles that just fine. We’ll make a variation that does that.

For now, let’s make the animation happen. Good news, it’s easy. Here’s a one-liner keyframe:

@keyframes roundtime {
  to {
    /* More performant than animating `width` */
    transform: scaleX(0);
  }
}

We can “squish” the bar because the design of the bar doesn’t have anything that will look squished when we scale it horizontally. If we did, we could animate the width. It’s not that big of a deal, especially since it doesn’t reflow anything else.

Now we apply it to the bar:

.round-time-bar div {
  /* ... */
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
  transform-origin: left center;
}

See how we’re yanking that --duration variable to set the duration of the animation? That does the heavy lifting. I’m also using it to set the same number of steps() so it “ticks” down. That “ticking” might be a visual UI thing that you like (I do), but it also accommodates the idea that JavaScript might re-render this bar at any time, and the ticks make it so you are less likely to notice. I used an integer for the duration value so that it could do double-duty like this.

If you want a smooth animation though, we could do that as a variation, like:

<div class="round-time-bar" data-style="smooth" ... />

Then not do the steps:

.round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

Note we’re also using a linear animation, which seems to make sense for a timer. Time, as it were, doesn’t ease. Or does it? Whatever, it’s your call. If you want a timer that appears to speed up or slow down at certain points, go for it.

We can use the same variation data-attribute-driven API for things like color variations:

.round-time-bar[data-color="blue"] div {
  background: linear-gradient(to bottom, #64b5f6, #1565c0);
}

And one final variation is making each “second” a fixed width. That way, a 10 second timer will literally look longer than a 5 second timer:

.round-time-bar[data-style="fixed"] div {
  width: calc(var(--duration) * 5%);
}

Here’s the demo:

Notice the little trick in there for restarting CSS animation.

Oh, and hey, I know there is a <meter> element which is maybe a bit more semantic, but it brings it’s own UI which isn’t animatable like I wanted things to be here — at least not without fighting it. But I wonder if it’s more accessible? Does it announce its current value in a useful way? Would it be a more accessible timer if we were updating a <meter> in real-time with JavaScript? If anyone knows, I can link up a solution here.



Source link

Installing .dll files
Strategy

Amazon Simple Queue Services Using C#


ASQS (Amazon Simple Queue Services)

Amazon SQS (Amazon Simple Queue Services) is a queuing service used for high-throughput, system-to-system messaging. You can use queues to decouple heavyweight processes and to buffer and batch work. Amazon SQS stores messages until microservices and serverless applications process them.

Steps to Implementing Amazon SQS

Create a Queue

You will have the provide the name of the Queue to create a simple queue in the Amazon cloud.

Create a QueueURL

After this, you have to create a queue URL that would basically build with your configuration you can create this on your own by providing your location, your queue name, etc.

Examplehttps://{region_name}/queue.|apidomain|/{account_number}/{queue_name}

Note: region_name is one of the most important parts of this queue url else this would process the complete flow but you will not be able to find the queue on amazon console, because of the region mismatch.

Process Queue

You need to create a message request with the queue URL and the message body and send it to the available queue.

Receive Message

The last step is to receive the messages sent to the defined queue. You need to create a receive request and call the receive request method of the SQS client.

You can follow the same process for using this simple queue service over the Amazon Console too. You need to login to the console first. After that, you will see a screen like this.

Type “Simple Queue Service” in the text box and select from the results shown on the screen.

Here, you will have the list of a queue available on your own AWS the above screenshot, I have created two queues named:

  1. TestingQueue
  2. TestingQueue1

I am going to show you a working example of the ASQS in .NET using Visual Studio.

Let’s begin.

Step 1

Install AWS Toolkit for Visual Studio.

Step 2

Create a Windows or web application or whatever you want. I have created a Windows.Form application and have taken two buttons one for creating the queues and other for processing the queue.

Step 3

After this, you need to set up your project to use the Amazon Services. First, you have to specify the Access Key, Secret Key, and Region in web.config if you are using the web application; and in app.config if you are using the Windows application.

Remember, the key name must be in the case as mentioned. and make sure you enter the correct region from aws console.

Step 4

After this, you need to install a few of the necessary .dll files from the NuGet Package Manager. You can add these required libraries from the NuGet Package Manager or PM> console by typing the name of the libraries, as shown in the references.

Installing .dll files

Now, it’s time to write a few lines of code for the same.

If you successfully processed the queue you will get the message. body + “found in Queue” message at message box.

If you have any queries or questions, I will be happy to answer.

Happy coding! Enjoy.



Source link

GET request in Postman
Strategy

Exposing HTTP Functions With Corvid


Creating and exposing HTTP functions from your site doesn’t have to be a long and tedious process. Sometimes, you may need to share access to your data or functionality from your site. Let’s take a look at an easy (and FREE!) way to expose some site data!

GET request in Postman

Using Corvid, we can easily expose an HTTP function version of our site data or site functionality. I am working on building a Kickstarter style site, so I am going to work on building a function that GETs the current total value of pledges on the product. The site only has one product, so this makes it easier 🙂

The first thing we need to do is create a new file on the backend of our application called https-functions.js. This is where we’ll create and our expose our site’s data.

file structure

We’ll need the Wix HTTP Functions API as it will help us do the hefty lifting of our HTTP functions. Go ahead and import any methods you’ll need from the wix-http-functions API at the top of your http-functions.js file. I’ll be focusing on the happy path and only using the OK method. If you need other methods or are looking for error handling, check out the Wix HTTP Functions API Docs.

While we’re importing, let’s also grab the Wix Data API so we can query our Data Collections (aka our database).

When defining our function name for our HTTP function, we have to be careful about our naming our function. The function name starts out with the verb we are looking to associate with the function. So in this case, the function name will start with get. The next part of the function name is what it will do and how it will be called, so be sure to make it descriptive. Since we’re looking at getting the total pledge amount, I’m going to name it totalPledges. That looks like this:

Don’t forget it needs to be exported so it’s available outside of this file!

We need to set up a basic Options object to include the data we need to pass back via the HTTP function return. The only property we need to setup now in the JSON object is the header’s content-type and set it to "application/json".

Now we need to retrieve the data to share when our new function is called. We can do this using Wix Data. Wix Data allows us to aggregate on a field name (aka column) from our database. We’ll need to create an aggregate on Table Name and then run the sum method on the field we want to aggregate. We’ll then run this aggregate query. This is a promised method, so we’ll handle the Promise return next.

On the return of this promise, let’s check to make sure there is data in the result object and then return the result of the query as the content body for the HTTP function result which will live in the options object as the body property. The query result can be found using results.item.

The last think to do is return the OK method with the Options data object we’ve constructed. Inside the if() statement, add the return of OK.

To test out if our new HTTP function works, make sure to SAVE AND PUBLISH and then we can use a tool like Postman to call the API. In order to access your function, you’ll need to construct the URL for the REST API call. It would be your Wix Site name, the site’s name, _functions, and then the function name without the verb.

Make sure to set the proper verb in a tool like Postman or your cURL request.

Making GET request in PostMan

And it’s that easy it is to create and expose HTTP function!

Keep checking back for more tips and tricks on working with Corvid!



Source link

How to make a website with transitions like in Wix.com using react or any other developing tool?
Strategy

How to make a website with transitions like in Wix.com using…


How to make a website with transitions like in Wix.com using react or any other developing tool?

submitted by /u/dancingfroggie
[comments]



Source link

Queue Jumping in Netlify | CSS-Tricks
Strategy

Queue Jumping in Netlify | CSS-Tricks


Cutting to the chase: if you’re on a Business or Enterprise team on Netlify, you can click a build to make it run next in a queue. For example, if you have a really time-sensitive thing (e.g. a bug fix going to production), it can jump ahead of some random development branch building. Now I’ll elaborate.

Part of the rocketjuice of Netlify is that it runs your builds for you. Say you have a Jekyll site. The build command is probably jekyll build. You tell Netlify that’s the command you want it to run, and if successful, deploy it.

You can set the build command from a configuration file in the repo, or here in the UI for settings.

That build command is totally up to you. It could be npm run build and that calls the build command in your package.json which kicks off your custom scripts. Plus, with build plugins, you have a ton of control over the process (e.g. I got it to run Sass easily). That’s CI/CD!

Assuming you are linking up a Git repo, it’s not just pushing to your main branch where these builds runs — it’s on any branch. That’s great for a bunch of reasons. For one, your build is probably running tests too, so it’s keeping you honest. For another, Netlify gives each push a permalink to a deployed version of that exact set of code. That’s tremendously useful. It’s like staging on steroids. Anybody who needs it can get a preview of the site.

On certain projects, you might have a whole team of developers working on a bunch of branches, committing code, and running builds. So Netlify might be awful busy doing all that work. Your build might get stuck behind other people’s stuff. Maybe it absolutely doesn’t matter. Or maybe you have an important meeting in 2 minutes and you really need this deploy preview for everyone to see.

Phil prioritizing some kind of musical coffee over the conference site build.

Now if you’re on a team (on a Business or Enterprise account), you can choose to hop the queue and have yours run next. People will be able to see it was you who did it so, ya know, ya gotta have a little courtesy.



Source link

Android Log Analysis - DZone Web Dev
Strategy

Android Log Analysis – DZone Web Dev


Android uses a centralized system for all logs and application programmers can also write custom log messages. The tooling to develop Android applications allows you to define filters for the log statements you are interested in. Log analysis is a phase of development and developers encounter it from time to time. Bug log helps in identifying the bugs in the Android application while in the development phase. Once the app is released into the market, the support engineers analyze the bug logs to resolve the issue. There are for different types of Logs available in the Android Eco-System – Application Logs, Android System Logs, Event Logs, and Radio Logs.

The logging system consists of a kernel driver and kernel buffers for storing Android log messages, C, C++ and Java classes for making log entries and for accessing the log messages, a standalone program for viewing log messages (logcat) and the ability to view and filter the log messages from the host machine (via eclipse or ddms).

There are four different log buffers in the Linux kernel, which provide logging for different parts of the system. Access to the different buffers is via device nodes in the file system, in /dev/log. The four Android log buffers are main, events, radio and system. The main log is for the application, events is for system event information, radio is for phone-related information and system is low-level system messages and debugging.

Each message in the log consists of a tag indicating the part of the system or application that the message came from, a timestamp (at what time this message came), the message log level (or priority of the event represented by the message) and the log message itself (detail description of error or exception or information etc).

What Each Android Log Type Contains:

1. Application log

use android.util.Log class methods to write messages of different priority into the log
Java classes declare their tag statically as a string, which they pass to the log method
The log method used indicates the message “severity” (or log level)
Messages can be filtered by tag or priority when the logs are processed by retrieval tools (logcat)

2. System log

Use the android.util.Slog class to write message with different priority with its associated messages
Many Android framework classes utilize the system log to keep their messages separate from (possibly noisy) application log messages
A formatted message is delivered through the C/C++ library down to the kernel driver, which stores the message in the appropriate buffer(system buffer)

3. Event log

Event logs messages are created using android.util.EventLog class, which create binary-formatted log messages.
Log entries consist of binary tag codes, followed by binary parameters.
The message tag codes are stored on the system at: /system/etc/event-log-tags.
Each message has the string for the log message, as well as codes indicating the values associated with (stored with) that entry.

4. Radio log

Used for radio and phone (modem) related information
Log entries consist of binary tags code and message for Network info
Logging system automatically routes messages with specific tags into the radio buffer

Log Format on Android

A common log format in android:

tv_sectv_nsec priority pidtid tag messageLen Message

tag: log tag
tv_sec&tv_nsec: the timestamp of the log messages
pid: the process id of where log messages come from
tid: the thread id

Priority value is one of the following character values, ordered from lowest to highest priority:

V — Verbose (lowest priority)*
D — Debug*
I — Info*
W — Warning*
E — Error*
F — Fatal*
S — Silent (highest priority, on which nothing is ever printed)

Log-File locations

There are several directories where Android log (including those from crashes) stores and it are not standardized (i.e. some may be ROM-specific). I am putting some of common here.
/data/anr : Dalvik writes stack traces here on ANR, i.e. “Application Not Responding” aka “Force-Close”
/data/dontpanic : contains some crash logs including traces
/data/kernelpanics :- Stores “kernel panic” related logs
/data/tombstones :- may hold several tombstone_nn files (nn is a number from 0 to 10 and after 10 again repeat it)

‘Log’ Command Line Tool

To capture Android log from the devices/emulator Below is the some command line tool. In real life project there are log capture application/tool used to capture the logs on user device and shared it back to Developer/maintainer for analysis .
adb logcat (shows all type logs for current android system
adb logcat -v threadtime (it will include date and time)
adb logcat -v threadtime> logfile.txt (Store logs in logfile.txt)

Useful Filter Patterns

You can use below filter in your adb command to filter logs. You can also use this filter to search your logs file(Android logs provided by user device).
adb logcat -f Save all logs into a file
adb logcat “*:E” Get all errors and fatals
adb logcat | grep -i “foo.example.” #get all logs related to “foo.example.*” tagname
adb logcat “application_or_tag_name:*” “*:S” Get all logs by application name
adb logcat -b events “gsm_service_state_change” “*:S” Get all GSM state changes
adb logcat -b radio Get all Radio events

Log Analysis

In this blog, we got a basic understanding of the Android Log System. While analyzing the Android logs from your app you can divide it in two parts, debug Logs – file coming during development and testing phase and production Log – file coming directly from end user. The best way to do it is by using useful Filter Patterns and by using Some Tool like GoogleLogTool and SonyLogTool.



Source link

The mobile nav toggle functionality. At left, the mobile nav is in the closed state. On the right, it’s in the open state, which overlays the entire screen with the navigation.
Strategy

radEventListener: a Tale of Client-side Framework Performanc…


React is popular, popular enough that it receives its fair share of criticism. Yet, this criticism of React isn’t completely unwarranted: React and ReactDOM total about 120 KiB of minified JavaScript, which definitely contributes to slow startup time. When client-side rendering in React is relied upon entirely, it churns. Even if you render components on the server and hydrate them on the client, it still churns because component hydration is computationally expensive.

React certainly has its place when it comes to applications requiring complex state management, but in my professional experience, it doesn’t belong in most scenarios I see it used. When even a bit of React can be a problem on devices slow and fast alike, using it is an intentional choice that effectively excludes people with low-end hardware.

If it sounds like I have a grudge against React, then I must confess that I really like its componentization model. It makes organizing code easier. I think JSX is great. Server rendering is also cool—even if that’s just how we say “send HTML over the network” these days.

Still, even though I happily use React components on the server (or Preact, as is my preference), figuring out when it’s appropriate to use on the client is a bit challenging. What follows are my findings on React performance as I’ve tried to meet this challenge in a way that’s best for users.

Setting the scene

Lately, I’ve been chipping away at an RSS feed app side project called bylines.fyi. This app uses JavaScript on both the back and front end. I don’t think client-side frameworks are horrid things, but I’ve frequently observed two things about the client-side framework implementations I tend to run into in my day-to-day work and research:

  1. Frameworks have the potential to inhibit a deeper understanding of the things they abstract, which is the web platform. Without knowing at least some of the lower level APIs that frameworks rely on, we can’t know what projects benefit from a framework, and which projects are better off without one.
  2. Frameworks don’t always provide a clear path toward good user experiences.

You may be able to argue the validity of my first point, but the second point is becoming more difficult to refute. You might remember a little while ago when Tim Kadlec did some research on HTTPArchive about web framework performance, and came to the conclusion that React wasn’t exactly a stellar performer.

Still, I wanted to see if it was possible to use what I thought was best about React on the server while mitigating its ill effects on the client. To me, it makes sense to simultaneously want to use a framework to help to organize my code, but also restrict that framework’s negative impact on the user experience. That required a little experimentation to see what approach would be best for my app.

The experiment

I make sure to render every component I use on the server because I believe that the burden of providing markup should be assumed by the web app’s server, not the user’s device. However, I needed some JavaScript in my RSS feed app in order to get a toggleable mobile nav to work.

The mobile nav toggle functionality. At left, the mobile nav is in the closed state. On the right, it’s in the open state, which overlays the entire screen with the navigation.

This scenario aptly describes what I refer to as simple state. In my experience, a prime example of simple state are linear A to B interactions. We toggle a thing on, and then we toggle it off. Stateful, but simple.

Unfortunately, I often see stateful React components used to manage simple state, which is a trade-off that’s problematic for performance. Though that may be a vague utterance for the moment, you’ll come to find out as you read on. That said, it’s important to emphasize that this is a trivial example, but it’s also a canary. Most developers—I hope—aren’t going to rely solely on React to drive such simple behavior for just one thing on their website. So it’s vital to understand that the results you’re going to see are intended to inform you on how you architect your applications, and how the effects of your framework choices could scale when it comes to runtime performance.

The conditions

My RSS feed app is still in development. It contains no third party code, which makes for easy testing in a quiet environment. The experiment I conducted compared the mobile nav toggle behavior across three implementations:

  1. A stateful React component (React.Component) rendered on the server and hydrated on the client.
  2. A stateful Preact component, also server-rendered and hydrated on the client.
  3. A server-rendered stateless Preact component which was not hydrated. Instead, regular ol’ event listeners provide the mobile nav functionality on the client.

Each of these scenarios were measured across four distinct environments:

  1. A Nokia 2 Android phone on Chrome 83.
  2. A ASUS X550CC laptop from 2013 running Windows 10 on Chrome 83.
  3. An old first generation iPhone SE on Safari 13.
  4. A new second generation iPhone SE, also on Safari 13.

I believe this range of mobile hardware will be illustrative of performance across a broad spectrum of device capabilities, even if it’s slightly heavy on the Apple side.

What was measured

I wanted to measure four things for each implementation in each environment:

  1. Startup time. For React and Preact, this included the time it took to load the framework code as well as hydrating the component on the client. For the event listener scenario, this included only the event listener code itself.
  2. Hydration time. For the React and Preact scenarios, this is a subset of the startup time. Because of issues with remote debugging crashing in Safari on macOS, I couldn’t measure hydration time alone on iOS devices. Event listener implementations incurred zero hydration cost.
  3. Mobile nav open time. This gives us insight into how much overhead frameworks introduce in their abstraction of event handlers, and how that compares to the frameworkless approach.
  4. Mobile nav close time. As it turned out, this was quite a bit less than the cost of opening the menu. I ultimately decided not to include those numbers in this article.

It should be noted that measurements of these behaviors include scripting time only. Any layout, paint, and compositing costs would be in addition to and outside of these measurements. One should take care to remember that those activities compete for main thread time in tandem with scripts that trigger them.

The procedure

To test each of the three mobile nav implementations on each device, I followed this procedure:

  1. I used remote debugging in Chrome on macOS for the Nokia 2. For iPhones, I used Safari’s equivalent of remote debugging.
  2. I accessed the RSS feed app running on my local network on each device to the same page where the mobile nav toggling code could be run. Because of this, network performance was not a factor in my measurements.
  3. Without CPU or network throttling applied, I began recording in the profiler, and reloaded the page.
  4. After page load, I opened the mobile nav and then closed it.
  5. I stopped the profiler, and recorded how much CPU time was involved in each of the four behaviors listed earlier.
  6. I cleared the performance timeline. In Chrome, I also clicked the garbage collection button to free up any memory that may have been tied up by my app’s code from a previous session recording.

I repeated this procedure ten times for each scenario for each device. Ten iterations seemed to get just enough data to see a few outliers while getting a reasonably accurate picture, but I’ll let you decide as we go over the results. If you don’t want a play-by-play of my findings, you can view the results at this spreadsheet and draw your own conclusions, as well as the mobile nav code for each implementation.

The results

I initially wanted to present this information in a graph, but because of the complexity of what I was measuring, I wasn’t certain how to present the results without cluttering the visualization. Therefore, I’ll present the minimum, maximum, median, and average CPU times in a series of tables, all of which effectively illustrate the range of outcomes I encountered in each test.

Google Chrome on Nokia 2

The Nokia 2 is a low-cost Android device with a ARM Cortex-A7 processor. It is not a powerhouse, but rather a cheap and easily obtainable device. Android usage worldwide is currently around 40%, and though Android device specs vary greatly from one device to the next, low-end Android devices are not rare. This is a problem we must recognize as being one of both wealth and proximity to fast network infrastructure.

Let’s see what the numbers look like for startup cost.

Startup time
React Component Preact Component addEventListener Code
Min 137.21 31.23 4.69
Median 147.76 42.06 5.99
Avg 162.73 43.16 6.81
Max 280.81 62.03 12.06

I believe it says something that it takes, on average, over 160 ms to parse and compile React, and hydrate one component. To remind you, startup cost in this case includes the time it takes for the browser to evaluate the scripts needed for the mobile nav to work. For React and Preact, it also includes hydration time, which in both cases can contribute to the uncanny valley effect we sometimes experience during startup.

Preact fares much better, taking around 73% less time than React, which makes sense considering how tiny Preact is at 10 KiB sans compression. Still, it’s important to note that the frame budget in Chrome is about 10 ms to avoid jank at 60 fps. Janky startup is as bad as janky anything else, and is a factor when calculating First Input Delay. All things considered, though, Preact performs relatively well.

As for the addEventListener implementation, it turns out that parse and compile time for a tiny script with no overhead is unsurprisingly very low. Even at the sampled maximum time of 12ms, you’re barely in the outer ring of the Janksburg Metropolitan Area. Now let’s have a look at hydration cost alone.

Hydration time
React Component Preact Component
Min 67.04 19.17
Median 70.33 26.91
Avg 74.87 26.77
Max 117.86 44.62

For React, this is still in the vicinity of Yikes Peak. Sure, a median hydration time of 70 ms for one component isn’t a big deal, but think about how hydration cost scales when you have a bunch of components on the same page. It’s no surprise that the React websites I test on this device feel more like endurance trials than user experiences.

Preact’s hydration times are quite a bit less, which makes sense because Preact’s documentation for its hydrate method states that it “skips most diffing while still attaching event listeners and setting up your component tree.” Hydration time for the addEventListener scenario isn’t reported, because hydration isn’t a thing outside of VDOM frameworks. Next, let’s take a peek at the time it takes to open the mobile nav.

Mobile nav open time
React Component Preact Component addEventListener Code
Min 30.89 11.94 3.94
Median 43.62 14.29 6.14
Avg 43.16 14.66 6.12
Max 53.19 20.46 8.60

I find these figures a bit surprising, because React commands almost seven times as much CPU time to execute an event listener callback than an event listener you could register yourself. This makes sense, as React’s state management logic is necessary overhead, but one has to wonder if it’s worth it for simplistic, linear interactions.

On the other hand, Preact manages to limit its overhead on event listeners to the point where it takes “only” twice as much CPU time to run an event listener callback.

CPU time involved in closing the mobile nav was quite a bit less at an average approximate time of 16.5 ms for React, with Preact and bare event listeners coming in at around 11 ms and 6 ms, respectively. I’d post the full table for the measurements on closing the mobile nav, but we have a lot left to sift through yet. Besides, you can check out those figures yourself in the spreadsheet I referred to earlier on.

A quick note on JavaScript samples

Before moving onto the iOS results, one potential sticking point I want to address is the impact of disabling JavaScript samples in Chrome DevTools when recording sessions on remote devices. After compiling my initial results, I wondered if the overhead of capturing entire call stacks was skewing my results, so I re-tested the React scenario samples disabled. As it turned out, this setting had no significant impact on the results.

Additionally, because the call stacks were truncated, I was unable to measure component hydration time. Average startup cost with samples disabled vs. samples enabled was 160.74 ms and 162.73 ms, respectively. The respective median figures were 157.81 ms and 147.76 ms. I would consider this squarely “in the noise.”

Safari on 1st Generation iPhone SE

The original iPhone SE is a great phone. Despite its age, it still enjoys devoted ownership owing to its more comfortable physical size. It shipped with the Apple A9 processor which is still a solid contender. Let’s see how it did on startup time.

Startup time
React Component Preact Component addEventListener Code
Min 32.06 7.63 0.81
Median 35.60 9.42 1.02
Avg 35.76 10.15 1.07
Max 39.18 16.94 1.56

This is a big improvement from the Nokia 2, and it’s illustrative of the gulf between low-end Android devices and even older Apple devices with significant mileage.

React performance still isn’t great, but Preact gets us within a typical frame budget for Chrome. Event listeners alone, of course, are blazingly fast, leaving plenty of room in the frame budget for other activity.

Unfortunately, I couldn’t measure hydration times on the iPhone, as the remote debugging session would crash every time I would traverse the call stack in Safari’s DevTools. Considering that hydration time was a subset of the overall startup cost, you can expect that it probably accounts for at least half of the startup time if results from the Nokia 2 trials are any indicator.

Mobile nav open time
React Component Preact Component addEventListener Code
Min 16.91 5.45 0.48
Median 21.11 8.62 0.50
Avg 21.09 11.07 0.56
Max 24.20 19.79 1.00

React does alright here, but Preact seems to handle event listeners a bit more efficiently. Bare event listeners are lightning fast, even on this old iPhone.

Safari on 2nd Generation iPhone SE

In mid-2020, I picked up the new iPhone SE. It has the same physical size as an iPhone 8 and similar phones, but the processor is the same Apple A13 used in the iPhone 11. It is very fast for its relatively low $400 USD retail price. Given such a beefy processor, how does it deal?

Startup time
React Component Preact Component addEventListener Code
Min 20.26 5.19 0.53
Median 22.20 6.48 0.69
Avg 22.02 6.36 0.68
Max 23.67 7.18 0.88

I guess at some point there are diminishing returns when it comes to the relatively small workload of loading a single framework and hydrating one component. Things are a little faster on a 2nd generation iPhone SE than its first generation variant in some cases, but not terribly so. I’d imagine that this phone would tackle larger and sustained workloads better than its predecessor.

Mobile nav open time
React Component Preact Component addEventListener Code
Min 13.15 12.06 0.49
Median 16.41 12.57 0.53
Avg 16.11 12.63 0.56
Max 17.51 13.26 0.78

Slightly better React performance here, but not much else. Strangely, Preact seems to take longer on average to open the mobile nav on this device than its first generation counterpart, but I’ll chalk that up to outliers skewing a relatively small dataset. I certainly would not assume the first generation iPhone SE is a faster device based on this.

Chrome on a dated Windows 10 Laptop

Admittedly, these were the results I was most excited to see: how does an ASUS laptop from 2013 with Windows 10 and an Ivy Bridge i5 of the day handle this stuff?

Startup time
React Component Preact Component addEventListener Code
Min 43.15 13.11 1.81
Median 45.95 14.54 2.03
Avg 45.92 14.47 2.39
Max 48.98 16.49 3.61

The numbers aren’t bad when you consider that the device is seven years old. The Ivy Bridge i5 was a good processor in its day, and when you couple that with the fact that it’s actively cooled (rather than passively cooled as mobile device processors are), it probably doesn’t run into thermal throttling scenarios as often as mobile devices.

Hydration time
React Component Preact Component
Min 17.75 7.64
Median 23.55 8.73
Avg 23.12 8.72
Max 26.25 9.55

Preact does well here, and manages to stay within Chrome’s frame budget, and is almost three times faster than React. Things could look quite a bit different if you’re hydrating ten components on the page at startup time, possibly even in Preact.

Mobile nav open time
Preact Component addEventListener Code
Min 6.06 2.50 0.88
Median 10.43 3.09 0.97
Avg 11.24 3.21 1.02
Max 14.44 4.34 1.49

When it comes to this isolated interaction, we see performance that’s similar to high-end mobile devices. It’s encouraging to see such an old laptop still keep up reasonably well. That said, this laptop’s fan spins up often when browsing the web, so active cooling is probably this device’s saving grace. If this device’s i5 was passively cooled, I suspect its performance might drop.

Shallow call stacks for the win

It’s not a mystery as to why it takes React and Preact longer to start up than it does for a solution that eschews frameworks altogether. Less work equals less processing time.

While I think startup time is crucial, it’s probably inevitable that you’ll trade some amount of speed for a better developer experience. Though I’d strenuously argue that we tend to trade too much toward developer experience than user experience far too often.

The dragons also lie in what we do after the framework loads. Client-side hydration is something that I think is far too often abused, and can sometimes be completely unnecessary. Every time you hydrate a component in React, this is what you’re throwing at the main thread:

A React stateful component hydration call stack captured in Chrome DevTools.

Recall that on the Nokia 2, the minimum time I measured for hydrating the mobile nav component was about 67 ms. In Preact—for which you’ll see the hydration call stack below—takes about 20 ms.

A Preact stateful component hydration call stack captured in Chrome DevTools.

These two call stacks aren’t to the same scale, but Preact’s hydration logic is simplified, probably because “most diffing is skipped” as Preact’s documentation states. There’s quite a bit less going on here. When you get closer to the metal by using addEventListener instead of a framework, you can get even faster.

A call stack of event listeners attaching to DOM elements.

Not every situation calls for this approach, but you’d be surprised at what you can accomplish when your tools are addEventListener, querySelector, classList, setAttribute/getAttribute, and so on.

These methods—and many more like them—are what frameworks themselves rely on. The trick is to evaluate what functionality you can safely deliver outside of what the framework provides, and rely on the framework when it makes sense.

A call stack of React firing a click event handler to open a mobile nav.

If this were a call stack for, say, making a request for API data on the client and managing the complex state of the UI in that situation, I’d find this cost more acceptable. Yet, it’s not. We’re just making a nav appear on the screen when the user taps a button. It’s like using a bulldozer when a shovel would be a better fit for the job.

Preact at least strikes the middle ground:

A call stack of Preact firing a click event handler to open a mobile nav.

Preact takes about a third of the time to do the same work React does, but on that budget device, it exceeds the frame budget often. This means opening that nav on some devices will animate sluggishly because the layout and paint work may not have enough time to finish without entering long task territory.

A call stack of a bare event listener opening the mobile nav.

In this case, an event listener is what I needed. It gets the job done seven times faster on that budget device than React.

Conclusion

This is not a React hit piece, but rather a plea for consideration of how we do our work. Some of these performance pitfalls can be avoided if we take care to evaluate what tools make sense for the job, even for apps with a great deal of complex interactivity. To be fair to React, these pitfalls likely exist in many VDOM frameworks, because the nature of them adds necessary overhead to manage all sorts of things for us.

Even if you’re working on something that doesn’t call for React or Preact, but you want to take advantage of componentization, consider keeping it all on the server to start with. This approach means you can decide if and when it’s appropriate to extend functionality to the client—and how you’ll do that.

In the case of my RSS feed app, I can manage this by putting lightweight event listener code in the entry point for that page of the app, and using an asset manifest to put the minimal amount of script necessary in order for each page to work.

Now let’s suppose that you have an app that truly needs what React provides. You have complex interactivity with lots of state. Here are some things you can do to try and get things going a bit faster.

  1. Check all of your stateful components—that is, any component which extends React.Component—and see if they can be refactored as stateless components. If a component doesn’t use lifecycle methods or state, you can refactor it to be stateless.
  2. Then, if possible, avoid sending JavaScript to the client for those stateless components, as well as hydrating them. If a component is stateless, only render it on the server. Prerender components when possible to minimize server response time, because server rendering has its own performance pitfalls.
  3. If you have a stateful component with simple interactivity, consider prerendering/server-rendering that component, and replace its interactivity with framework-independent event listeners. This avoids hydration entirely, and user interactions won’t have to filter through the framework’s state management logic.
  4. If you must hydrate stateful components on the client, consider lazily hydrating components that aren’t near the top of the page. An Intersection Observer that triggers a callback works very well for this, and will give more main thread time to critical components on the page.
  5. For lazily-hydrated components, assess whether you can schedule their hydration during main thread idle time with requestIdleCallback.
  6. If possible, consider switching from React to Preact. Given how much faster it runs than React on the client, it’s worth having the discussion with your team to see if this is possible. The latest version of Preact is nearly 1:1 with React for most things, and preact/compat does a great job of easing this transition. I don’t think Preact is a panacea for performance, but it gets you closer to where you need to be.
  7. Consider adapting your experience to users with low device memory. navigator.deviceMemory (available in Chrome and derived browsers) enables you to change the user experience for users on devices with little memory. If someone has such a device, it’s probable that its processor isn’t so fast either.

Whatever you decide to do with this information, the thrust of my argument is this: if you use React or any VDOM library, you should spend some time investigating its impact on an array of devices. Get a cheap Android device and see how your app feels to use. Contrast that experience with your high-end devices.

Most of all, don’t follow “best practices” if the result is that your app effectively excludes a part of your audience that can’t afford high end devices. Keep pushing for everything to be faster. If our daily work is any indication, this is an endeavor that will keep you busy for some time to come, but that’s OK. Making the web faster makes the web more accessible in more places. Making the web more accessible makes the web more inclusive. That’s the really good work we should all be trying our best to do.

I’d like to express my gratitude to Eric Bailey for his editorial feedback this piece, as well as the CSS-Tricks staff for their willingness to publish it.





Source link

r/webdev - Are these bookmarks images made by Opera GX or Meta Tags on code?
Strategy

Are these bookmarks images made by Opera GX or Meta Tags on …


As you can see in the suggested sites shows “youngsith”, that’s my website and I was wondering if those images from big companies (Reddit, Facebook, Twitch, etc.) were made by Opera or devs use meta tags for them just as we use meta tags for previews on URL’s and stuff. I use Brave as my browser and it shows the favicon, it looks ok, but some friends use Opera GX and I wondered if I was able to make a cool image for that browser.

Thanks in advance!

r/webdev - Are these bookmarks images made by Opera GX or Meta Tags on code?



Source link

What is this graphic style called?
Strategy

What is this graphic style called?


What is this graphic style called?

submitted by /u/giannissavvo
[comments]



Source link

r/graphic_design - Looking for some Design Book suggestions
Strategy

Looking for some Design Book suggestions : graphic_design


I’m seeking some inspirational resources for personal and office use. Design Books I’m seeking are like:

The Art of Mondo
Criterion Designs by Criterion Collection

any other books like those? Any help/advice is greatly appreciated.

And for critique, looking for valuable criticism/feedback on a design I am working on for our September Campaign at work:

r/graphic_design - Looking for some Design Book suggestions



Source link