Hello, we’re Renterii - an app making it easy for locals across the country to list, discover and rent everyday items + spaces wherever they are

Renterii

renterii

How We Enhanced Remotion Performance through GPU-Accelerated Server-Side Rendering Running with hardware acceleration in headless mode can be more challenging than it appears. We embarked on this journey with , which is an excellent framework that enables developers to "Make Videos Programmatically.” On our way, explore various Nvidia driver versions, including those from Nvidia's website and Ubuntu's official repositories. Google Chrome Remotion We collaborated with the vibrant Open-source community to find the answer for using . After encountering some setbacks on our way, we were able to make it work for Remotion eventually. We consolidated our findings in the Remotion Docs at and simplified the instructions for Remotion developers to make the most out of it. Although the whole research was done for , the same process will work for any headless application that requires GPU power, especially in headless mode. Remotion GPU with Remotion for server-side rendering Using the GPU in the Cloud Remotion Hardware Acceleration in Browser Rendering Hardware Acceleration is to your browser what " " is for a gasoline car. It uses the power of specialized hardware like GPUs to make your web pages load faster, and videos play smoothly. Hardware acceleration improves the part where the web page is displayed and shown to you, known as rendering. This results in a smoother and snappier browsing experience. Nitrogen Fuel DLAMI from Marketplace? One may wonder why we didn't opt for the AWS Deep Learning AMI or DLAMI. But we needed fine-grained control over the GPU drivers and utilities and the outdated DLAMIs despite all the bloatware was not the answer. Such tasks are often challenging to achieve with pre-packaged AMIs, as discussed in " .” Tailoring the environment to our exact requirements also helped us troubleshoot issues effectively. Why Deep Learning AMI is Holding You Back We experimented with multiple packages to identify the key ones needed for Google Chrome to recognize the GPU. Despite these efforts, GPU recognition remained elusive, and in some instances, GPU drivers were crashing even at initialization. The long and arduous journey has brought us to the end of the tunnel, yet the darkness persists, and the solution remains as elusive as ever. As we decided to call it a day, We stumbled upon on 's Github issues, which did not give us any hope but did give us a new perspective and drive to achieve our goal. this thread Puppeteer The Fresh Start It was time to return to the drawing board and start afresh. We started with a clean base Ubuntu AMI on AWS EC2 Instance. After that, we downloaded and installed the Nvidia Tesla T4G drivers from Nvidia's official website. Once it was confirmed that the GPU was working properly using , we installed Google Chrome and tested it for hardware acceleration. To our relief, Google Chrome finally gave a nod to work with Hardware Acceleration. nvidia-smi Launching an EC2 Instance Launching an EC2 instance can be achieved in various ways, with the AWS Web Console and AWS CLI being two notable options. Regardless of the method, the important parameters are instance type and AMI selection. At the time of writing, the AMI ID for our chosen instance is . For launching the EC2 instance via , the following command can be used after replacing the placeholders with actual values. g4dn.xlarge ami-053b0d53c279acc90 aws-cli aws ec2 run-instances \
  --instance-initiated-shutdown-behavior "terminate" \
  --image-id "ami-053b0d53c279acc90" \
  --instance-type "g4dn.xlarge" \
  --key-name "<KEY_NAME>" \
  --subnet-id "<SUBNET_ID>" \
  --security-group-ids "<SECURITY_GROUP_ID>" \
  --iam-instance-profile Arn="<ARN>" \
  --block-device-mappings '[
  {
    "DeviceName": "/dev/sda1",
    "Ebs": {
      "VolumeSize": 8,
      "VolumeType": "gp3"
    }
  }
]' Ubuntu and Kernel Upgrade Ubuntu 22.04 AMI on AWS comes with Linux Kernel (specifically ). At this point, we have two options either we stick with Kernel or Upgrade to ( ), we decided to upgrade the Kernel. This decision is crucial as the Nvidia driver compiled for one version will not work for the other. ami-053b0d53c279acc90 v5 5.19.0-1025-aws v5 v6 v6.2.0-1013-aws After launching the instance, SSH into the instance and initiate the Ubuntu packages upgrade process. To update all the installed packages, including Linux Kernel, execute the following one-liner. sudo bash -c "apt update && export DEBIAN_FRONTEND=noninteractive && export NEEDRESTART_MODE=a && apt upgrade -y && reboot" We can also split , and . But the reason behind doing it like this is to install these updates in non-interactive mode. apt update apt upgrade -y reboot After the execution, the system will reboot with Linux Kernel Version 6. We can confirm the kernel update with . Rebooting is essential when upgrading the Ubuntu system because it loads the new Kernel on the next boot, and Nvidia drivers will subsequently be built for the updated version. uname -r Nvidia GPU Driver Installation The process of installing GPU drivers is straightforward when we have the correct driver for the GPU and the corresponding compatible version. Before starting the installation, we need to install a couple of packages: and . The former is a bundle with a variety of compilation tools required to compile the Nvidia driver. The latter, while not mandatory, is required by Google Chrome. Therefore, it's a good idea to install it beforehand to enable support for Vulkan ICD loader for Nvidia, should we require it in the future. build-essential libvulkan1 sudo apt install -y build-essential libvulkan1 After build tools are installed, we can proceed to download and install the GPU drivers using the following commands: DRIVER_URL="https://us.download.nvidia.com/tesla/535.104.12/NVIDIA-Linux-x86_64-535.104.12.run"
DRIVER_NAME="NVIDIA-Linux-driver.run"
wget -O "$DRIVER_NAME" "$DRIVER_URL"
sudo sh "$DRIVER_NAME" --disable-nouveau --silent
rm "$DRIVER_NAME" Now we can run to confirm the GPU driver installation. The output will look similar to this: nvidia-smi Configuring the Startup Service We learned this the hard way: running once is needed for the proper initialization of and . Google Chrome and Chromium fail to initialize without this preliminary setup. To automate this process, we will create a service that runs at boot time using the following commands: nvidia-smi EGL ANGLE EGL nvidia-smi echo '[Unit]
Description=Run nvidia-smi at system startup

[Service]
ExecStart=/usr/bin/nvidia-smi
Type=oneshot
RemainAfterExit=yes

[Install]
WantedBy=multi-user.target' | sudo tee /etc/systemd/system/nvidia-smi.service
sudo systemctl enable nvidia-smi.service
sudo systemctl start nvidia-smi.service Testing the Installation To test hardware acceleration with Google Chrome or Chromium, we can follow these steps. It's worth noting that Google Chrome has more dependencies, making it an easier choice if we plan to use the Node.js library, Puppeteer. On the other hand, Chromium is a lightweight option with a smaller footprint of dependencies, but we can still use Puppeteer with Chromium by installing a few extra dependencies. Installing Chromium Installation Installing Chromium is straightforward, as it is readily available with Ubuntu's official software repositories. We can install it using with the following command. apt sudo apt install -y chromium-browser Testing Chromium is fully prepared to handle Hardware Acceleration tasks. We can verify its readiness by launching Chromium with the specified parameters. chromium-browser --headless --use-gl=angle \
   --use-angle=gl-egl --use-cmd-decoder=passthrough \
   --print-to-pdf=output.pdf 'chrome://gpu' Installing Puppeteer Dependencies To use Puppeteer with Chromium instead of Google Chrome, there are a few extra dependencies that should be installed. sudo apt install ca-certificates fonts-liberation \
    libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 \
    libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 \
    libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 \
    libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 \
    libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
    libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 \
    libxtst6 lsb-release wget xdg-utils Installing Google Chrome Installation Google Chrome can be installed from multiple options, but we will use the Google Chrome official repository for Debian. We need to add it to Ubuntu's repo list along with the public signing key. curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable Testing Google Chrome is ready for our Hardware Acceleration tasks. We can test it by launching Google Chrome with the following parameters. google-chrome-stable --headless --use-gl=angle \
    --use-angle=gl-egl --use-cmd-decoder=passthrough \
    --print-to-pdf=output.pdf 'chrome://gpu' The above commands will generate , and transfer it to your local machine to check the status of Hardware Acceleration in Google Chrome or Chromium. If the process goes smoothly, the resultant will look like this. output.pdf PDF Working with Puppeteer To verify GPU acceleration using the Node.js library Puppeteer, follow these steps: Installation Install Node.js, as this clean Ubuntu AMI does not include any unnecessary packages. Use the following commands: curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
NODE_MAJOR=18
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt update
sudo apt install nodejs Testing After installing Node.js, we can install Puppeteer by running in our code directory. Here's a sample file for checking hardware acceleration: npm i puppeteer index.js const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: true, 
    args: ['--use-gl=angle', '--use-angle=gl-egl'], 
  });
  const page = await browser.newPage();
  await page.goto('chrome://gpu');
  await page.waitForTimeout(2000);
  await page.screenshot({ path: 'output.png' });
  await browser.close();
})(); Run the script using . This will generate an file containing hardware acceleration information. node index.js output.png Note from the Creator has been immensely helpful in helping the “ ” community adopt GPU-accelerated rendering.He's researched and written about how to obtain, configure and run EC2 containers and headless Chrome correctly in order to take advantage of graphics acceleration.This area has been especially hard to crack, and without we would not have been able to unlock huge speed boosts. Mirza Remotion Mirza We are super grateful for that! -- Jonny Burger Creator / Remotion.dev Conclusion With hardware acceleration now readily available in headless mode, we can harness the power of GPUs for faster and more complex rendering tasks. Our next steps involve creating a custom AMI from this instance and streamlining the process using AWS Image Builder Pipelines for efficiency. Additionally, we plan to extend hardware capabilities to Docker containers, further extending our options. Resources Remotion - Make videos programmatically: https://remotion.dev Remotion - Using the GPU in the cloud: https://www.remotion.dev/docs/miscellaneous/cloud-gpu Cannot enable GPU acceleration: github.com/puppeteer/puppeteer/issues/3637 : Recommend a workflow for using the GPU on a AWS instance https://github.com/remotion-dev/remotion/issues/2889 Getting Started with Headless Chrome: developer.chrome.com/blog/headless-chrome Why Your AWS Deep Learning AMI is Holding You Back and How to Fix: mirzabilal.com/why-your-aws-deep-learning-a.. Deep Learning with “AWS Graviton2 + NVIDIA Tensor T4G” for as low as free* with CUDA 12.2: mirzabilal.com/deep-learning-with-aws-gravi.. How to install FFmpeg with Harware Accelaration on AWS: mirzabilal.com/how-to-install-ffmpeg-with-h.. CPU vs GPU for Video Transcoding - Challenging the Cost-Speed Myth: https://mirzabilal.com/cpu-vs-gpu-for-video-transcoding-challenging-the-cost-speed-myth Also published . here

Unlocking GPU-Accelerated Server-Side Rendering in Remotion With Chrome, Chromium & Puppeteer

Creating photorealistic designs of products related to the real estate sector has always been the holy grail for many home developers. This is key to marketing and creating a next-gen experience for potential home buyers. Many technologies are utilized for this task but they encounter problems with getting the proper I.T. infrastructure that can process large amounts of design data to create the required visualizations at the required time and with minimal cost. Unreal engine, one of these technologies that has been used by both game and film studios to render high-quality 3D animations for decades, is now used by developers in the real estate industry. Unfortunately, running unreal engines also requires powerful and expensive I.T. infrastructures which many startups in the construction sector cannot afford. This is why cloud rendering of unreal engine projects has the potential to contribute immense value in the construction and real estate industries. This cloud rendering is mainly achieved through render farms. What excites me the most about unreal engine cloud rendering The ability of home builders to create building models utilizing , render them in the cloud, and provide breathtaking visualization to potential buyers without the need for sophisticated I.T. infrastructures. unreal engines Traditionally, when it came to selling houses, builders and real estate agents used pictures and animated tours. But now, there's a new and improved way to get people interested in buying homes. For big housing projects, it's super important to sell houses before they are even built. To do that, developers need to show potential buyers something really exciting about the homes they are planning to build. But with real-time technology like unreal engine and cloud rendering, companies can deliver high-quality visualizations, no matter where the customer is located or what hardware they are viewing the digital homes on. Companies Utilizing unreal engine and cloud rendering to provide service to home developers There are a couple of companies that are providing services to home developers utilizing unreal engine and some of them include: is a company in Australia that has been in the real estate sector for decades. It is a software platform that enables home buyers to walk around a photorealistic 3D model of their future home. Their platform utilizes and enables customers to select elevations, floor plan options, materials, and products, as they go while keeping track of the updates. This ensures that home buyers end up with their dream homes. Digital Home Away pixel streaming technology Another company is , which also offers photorealistic visualization in the real estate sector. Powered by Unreal Engine, the company helps real estate developers to sell homes that are not built yet. 3D Estate’s platform creates interactive rotating 3D models and virtual tours of apartments for buyers to view and inspect. With the power of cloud rendering, it takes just five to seven minutes to complete the entire rendering process on a small flat and up to 15 minutes to render a larger property. Home developers can choose from a range of six set apartment styles, then a simple interface enables them to add the 3D models to their website. 3D estate It also provides an interactive web tool that enables buyers to search for apartments using criteria, such as square footage or number of bedrooms, and then wander around the virtual developments before they are built. The app works on any device, from smartphones and laptops to 8K showroom screens and VR headsets. https://youtu.be/VNJrZ0NYBko?si=-AqX3tqr6_nYXsqr&embedable=true As GPU and CPU Get better, cloud rendering will also get better Products like I-render cloud GPU and CPU will continue to get better thanks to Moore's law, which, in this context, implies that the speed and capability of our computer processors will increase every two years because the number of transistors on a microchip doubles every two years, making our computers smaller and faster. The economic impact of this law is that as these computing devices continue to show exponential growth in complexity and computing power, there will be a proportional reduction in the cost of manufacturing these devices. These boosts in computing power will reduce the time and cost relating to cloud rendering of unreal engine projects. Why cloud rendering of unreal engine projects  is needed in the real estate sector Often, potential home buyers will have to make a wide variety of decisions on their home-buying journey. Each decision can take time, and without the ability to visualize options, can create confusion. Then once made, a selection might be outside of the buyer’s budget, causing them to start that process over. Potential benefits of render farms Real estate customers will benefit from this because they will have the power of making early-stage decisions; as they get to see proposed projects on a realistically rendered scale before they’re actually built, helping them decide on whether to make a purchase. Not only will this technology enhance customer journeys by facilitating real-time interaction with digital homes, leading to increased sales, but it will also shorten the delivery process for the home builder and enable them to test new designs before building or bringing them to market. Potential negative impacts of render farms Data theft can be the biggest problem when using render farms. Malicious hackers can easily exploit weaknesses in the render farm's security to steal important data like project files and information that might be classified to the company. The consequences of this can be severe and will affect businesses and people’s lives. Predictions on how cloud rendering in real estate will evolve With the emergence of technology like the , more real estate companies will utilize this opportunity to render projects in the cloud and present the results wherever a prospective client is located around the world. Apple Vision Pro How society will want this technology to be used I believe that more people will join the conversation about transparency in the construction sector, especially in Africa. People will demand a BIM approach to every public and private construction project. This way, they can be assured that every amount spent at the initial stage is worth it and can be easily tracked. And for this to occur people must be able to visualize projects realistically at the early stage. Unreal engine cloud rendering can be a key technology for government agencies and companies to use for faster rendering of proposed projects without the need for much I.T. infrastructure.

Unreal Engine and Cloud Rendering in the Real Estate Industry

Let's learn about via these 59 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Customer Rentention /Learn Repo 1. The Retail Evolution: Customers Demand Enhancements to the Shopping Experience Andreas Hassellof, Founder and CEO of Ombori, explores how changing customer behaviors impact retail, and drive retail technology innovation. 2. How to Keep Your Customers Focused and Engaged Know how to keep your SaaS customer engaged and focused in 2021. 3. 5 Ways to Use AI to Improve Customer Success Artificial Intelligence is a powerful set of tools that can be used throughout a business' operations allowing them to achieve better customer success. 4. Make it Sticky, then Acquire: 4 Pricing Lessons From My First 0-100 Users In an ideal world, the goal of any business starting up is to make money. In most cases, the profitability of a product is closely tied to how you as a product manager choose to price your product. Apart from building a product that provides real value to its customers, profitable monetization is the second most important aspect of running a successful business. 5. How Can Companies Use AI for Better Customer Experience? Explore how AI can help businesses to upgrade the experience of new and existing customers. 6. The Top 12 Inbound Marketing Strategies to Adopt Right Away This article will discuss the various Inbound Marketing Strategies required to help your business grow. 7. Retaining SaaS Customers in a Global Economic Downturn In a global economic downturn, retaining current customers is crucial for businesses, especially for SaaS companies facing the growing risk of customer churn. 8. How to Improve Customer Care Today customer care is one of the most popular and widely discussed topics in the IT industry. 9. The Importance Of Data in Sales in 2022 10. Social Features: The Secret to Bridging the Gap Between Apps and Users With a competitive app market and struggle to keep customers engaged, how can app developers ensure that they keep their users for a longer time? 11. How To Honour Your Early Adopters With Promotional Products Hi! My name is Vasily, and I am the co-founder of the Merch38 platform. We created this business to help people and companies create their own merchandise for retail, marketing, gifting or any number of reasons to need branded products. I would like to share how we helped the creators of the MagicKids mobile application to thank their first users, their early adopters. 12. 7 B2B Marketing Tips and Tricks that Work A 2015 press release from Bain & Company stated an interesting piece of truth. Almost 90 percent of sales and marketing executives don’t feel adequately prepared to sell to today’s digital-savvy buyers. Fortunately, this post offers a few B2B marketing tips and tricks so you can skyrocket your revenue. 13. You Need A Tech Loyalty Program: Here Are 5 Efficient Use Cases To Spark New Ideas An efficient retention strategy increases the company's profit up to 95%. Here are the best loyalty programs in the tech sector you can look to for inspiration. 14. Want to Drive Retention? Gamify Your SaaS Product Games are designed to keep us playing as long as possible. By presenting players with challenges and rewards for completing them, apps can generate dopamine hits in their users that can keep them coming back for more. Most people love a challenge, and consciously or not, we love rewards even more, even if they’re largely arbitrary. 15. Without Digital Adoption, Your Enterprise will Struggle It’s clear to everyone that we’re living in a digital age. In a time when people expect to run their lives through their smartphones, competitive enterprises have no choice but to adopt digital tools. 16. How We Increased User Retention in the LoopMessage App Using Free Messaging The LoopMessage app helped increase user retention several times. This was reached by sending free personalized messages via popular instant messengers. 17. How To Improve Customer Retention and Increase LTV Retaining customers is the number one growth strategy for business. Learn how to retain your customer and improve lifetime value (LTV). 18. How to Boost Customer Engagement in Digital Marketing customer engagement is key to keeping customers
happy and loyal. 19. Why Custom-Built Automation Can Be Ideal for Business Growth? Automation is a powerful driving force for business growth. It allows mundane, repeatable tasks, to be dealt with by binary code. That means we can just get on our all-important daily tasks. 20. What Is Average Handle Time (AHT) and How To Reduce It: 20 Tips & Tactics Average handle time is a key metric to focus on when trying to improve your customer support strategy. Read more about its major contributing factors, and what 21. Avoid a Loss in MRR and Make Your Dunning Campaign Really Powerful: Know How If you’re running a subscription or SaaS business, you know that at the end of the day your chief metric is monthly recurring revenue (MRR). 22. How to Drive Early 'Time-To-Value’ through Customer Success Time-To-Value is a Customer Success metric that is undervalued in SaaS but could be an advantage for a business. This article explains TTV and the types of TTV. 23. Your Customers Are Everything In The SaaS Industry Today, I’ll share some of the best lessons I got to learn from that experience. You can use these tips to beautify your SaaS or any other business. 24. What Three Features Should Houseparty Launch Next? “We see our customers as invited guests to a party, and we are the hosts. It’s our job every day to make every important aspect of the customer experience a little bit better.” — Jeff Bezos 25. Customer Education: How to Educate Customers Profitable for Business Customer education is a powerful growth marketing tool for online businesses. I discuss how to create a customer education strategy for your company in 2023. 26. 5 Steps to Master Customer Intelligence in 2021 Customer intelligence is the process of gathering and analyzing customer data. 27. 10 Tips to Develop a Strong B2B Relationship The growth of B2B eCommerce has spiked in the last two years. From $12.2 trillion in 2019, it is predicted to reach $20.9 trillion by 2027. 28. 7 Reasons Why Customer Success Function Fails Ever wondered why most of the SaaS companies have got Customer Success wrong? Check out some pitfalls that caused  the Customer Success effort to fail. 29. Predicting if the Customer is Satisfied by the Resolution Case study to predict if customer is satisfied by the resolution. 30. Welcome to The Zero Friction Future Hello, It’s time to learn something new again. This time, I would like to start a new series as zero friction future and talk about the details and categories in which we see high consumer friction and the areas of improvement. 31. Dealing With Negative Email Replies: To Give It Up or To Work It Out When you consider all outcomes of your email campaigns, don’t be afraid to ask the right questions. Even if they scare you. For example, don’t say “What should I do if I get negative replies?”. Say “What should I do when I get negative replies?”. 32. How to Generate Sales from Inactive Customers and Boost E-commerce What does marketing automation mean? Are activities planned triggered on user-generated events. Simple and clear. 33. 5 Auto-Message Sequences You Can Run Right Now In Dashly, we adore auto messages. It saves us lots of time, as they automatically generate and warm up leads. In this article, we share an easy way for you to create a message chain right now if you have never done this before. Here’s a list of five auto messages sequence which will be beneficial to both you and your clients. 34. What is Data Collection and What are The Most Important Events to Track When your company is client-oriented, one of your priority tasks is understanding your clients’ problems and gathering insights on how people use your product and when exactly they benefit from it. 35. No Brown M&Ms: The Van Halen Growth Hack For Getting Better Customers The Pareto Principle—known also as the 80/20 rule (and the law of the vital few) —states that for many events, roughly 80% of the effects come from 20% of the causes. 36. 9 SaaS Retention Strategies to Reduce Customer Churn Customer retention is the key for any business and for SaaS, it's way too hard without a perfect strategy. Do check our blog to find the best tips! 37. Correlation Between Customer Satisfaction and Retention Is Real So is there a correlation between customer satisfaction and customer retention? Of course, there is! Satisfied customers stay, what’s there to research and analyze? 38. How to Implement a Customer Success Strategy: A Case Study Customer-Centricity is bang on trend; 73% of business leaders recognised customer experience as one of the most important purchase-driving factors. The truth is, there are no conniving, cheeky tricks you can use. Instead, it takes consistency, persistence, and a shared team ethos. 39. Voice of Customer: How to Use VOC Data to Drive Business Growth We all know Customer feedback is always useful for increasing product quality or service. But do you know that by using Customer feedback, you can also increase your company's revenue? 40. Ok Google, Improve My Retention Rate: A Customer-Centric Approach to the Crisis COVID-19 shifted the earth from beneath the business world’s feet. Small, medium, and large businesses alike closed their doors and weren’t sure when they would open them again. As the pandemic dug in, most businesses (I hope!) put the health and safety of their employees first. Only once they could ensure their team’s safety, were they able to start putting a plan in place for recovery. 41. 5 Amazing Ways to Boost Your Customer Retention Rate Improving your customer retention rate matters, and it’s something worth investing in. So here are 5 ways to know how to retain your existing customers easily. 42. 6 Customer Retention Strategies Every Small Business Owner Should Know Generating leads and attracting new customers are keys to ensure initial business success. 43. How To Segment Shopify Customer Base with Google Sheets and Google Data Studio After defining what the RFM analysis is standing for, and how you can apply it to your Customer Base, I want to show you how to apply it on Shopify orders data. 44. The Beginner's Guide to The Google HEART Framework In this post, we will dig into the Google HEART framework: a simple way to ensure you take into consideration every aspect of the user journey. 45. 5 Quick Tips on How to Improve Customer Satisfaction In this article, you'll learn what to do to satisfy your customers and how to build a stable and lucrative relationship. 46. Employee Experience and Customer Experience: Beyond Retention and Loyalty An #IBM research revealed that 70% of brand perception is settled by employees and 41% of customer loyalty comes from positive employee attitude Customers can generally be divided into two, Internal and external customers. Who are your internal customers? Your employees. Forrester defines customer experience as 47. How To Prevent Your Customers From Leaving And Win Back The Ones Who Left We bet you have your own “gone customers’ cemetery” of those who once were with you, but have gone and are not planning to return. It’s sad, but you can’t give up: almost half of them are sure to be returned. 48. How a Customer 360 and Dgraph Cloud Can Help Improve User Retention Successful corporations leverage a customer 360. Check out how Dgraph can provide top-notch analyses quickly and effectively. 49. WOW Your Clients: 5 Golden Rules to Make Your Client Happy How do you imagine a happy client? We believe that happy clients scream “WOW!”. Here are the top 5 rules of delivering WOW service for you. 50. What Happens When You Make Product Decisions to WOW your Customers [A Case Study] Which of you, when you have to buy an airplane ticket, is not looking for the cheapest and more convenient solution from SkyScanner or similar? And which one of you, once aware of the prices of the big airlines, doesn’t try to take a look at EasyJet or Ryanair? Honestly, for flights of less than 3 hours, the price paid plays a decisive role in my personal decision. 51. Why Chatbots Are The Future Of Customer Retention? Customer retention has become a genuinely challenging task for entrepreneurs. In the midst of all this, AI-assisted Chatbots are the real game changers. 52. How Obsessing on Outreach and Marketing Helped Truepush Grow 53. Hunting for Customers With PostgreSQL Now more than ever, you have to hold onto every customer you can. Customers don’t love your product one minute, then fall out of love with it the next. Normally there’s a declining trend in usage of your product over time. 54. How To Create Customer Segmentation using Google Analytics and A Spreadsheet Using Google Analytics, we can analyze our customer behaviors based on their interests, commonly features through clicks, time on page, bounce rate, custom events, etc. and their behaviors as shoppers, such as add to basket, average product quantity basket, LTV, AOV, etc. 55. How To Keep Your Customers Coming Back: 5 Proven Strategies Most businesses focus mainly on how to attract new leads to their website. But they tend to overlook the importance of retaining their existing customers. 56. 30 Powerful Strategies to Optimize Conversion for SaaS Businesses Learn 30 of the most effective strategies and practical tips to Optimize your B2B SaaS Conversion Rate as we get closer to 2023 57. Which Is Better For Your Business: Relationship or Transactional NPS® Surveys? What will be more profitable to the business, a Transactional NPS® Survey or a Relation NPS® Survey? 58. 24 Customer Retention Strategies One is better than two and is equal to six. At least, that’s how we (Dashly.io) think when it comes to comparing your regular customers with your potential customers. 59. Skyrocket your SaaS Retention by Applying Addictive Game UX [A How To Guide] Even if you’re not a gamer, you’ve probably heard of games like Flappy Bird, Fortnite, PUBG and Candy Crush. With user counts in the tens and hundreds of millions and some grossing over a $100 million in monthly revenue, there’s a lot for companies to learn from the gaming world. Gamers spend an average of an hour and 13 minutes day on video games – imagine if your customers spent that amount of time on your SaaS product every day. Thank you for checking out the 59 most read stories about Customer Rentention on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

59 Stories To Learn About Customer Rentention

Last week, I decided to see the capabilities of OpenAI's image generation. However, I noticed that one has to pay to use the , while the was free, even though rate-limited. Dall.E offers samples, but I wanted to keep learning Rust. So far, I've created a . In this post, I want to describe how you can create a webapp with server-side rendering. web interface API Node.js and Python REST API The context is a runtime for asynchronous programming for Rust; is a web framework that leverages the former. I already used Axum for the previous REST API, so I decided to continue. Tokio Axum A server-side rendering webapp is similar to a REST API. The only difference is that the former returns HTML pages, and the latter JSON payloads. From an architectural point of view, there's no difference; from a development one, however, it plays a huge role. There's no visual requirement in JSON, so ordering is not an issue. You get a struct; you serialize it, and you are done. You can even do it manually; it's no big deal - though a bit boring. On the other hand, HTML requires a precise ordering of the tags: if you create it manually, maintenance is going to be a nightmare. We invented to generate order-sensitive code with code. templating While templating is probably age-old, PHP was the language to popularize it. One writes regular HTML and, when necessary, adds the snippets that need to be dynamically interpreted. In the JVM world, I used <abbr title="Java Server Pages">JSP</abbr>s and Apache Velocity, the latter, to generate RTF documents. Templating in Axum As I mentioned above, I want to continue using Axum. Axum doesn't offer any templating solution out-of-the-box, but it allows integrating any solution through its API. Here is a small sample of templating libraries that I found for Rust: , based on Handlebars handlebars-rust , based on Liquid liquid , based on Jinja, as the next two Tera askama MiniJinja etc. As a developer, however, I'm lazy by essence, and I wanted something integrated with Axum out of the box. A quick Google search lead me to , which seems pretty new but very dynamic. The library is an abstraction over handlebars, askama, and minijinja. You can use the API and change implementation whenever you want. axum-template axum-template in short Setting up axum-template is relatively straightforward. First, we add the dependency to Cargo: cargo add axum-template Then, we create an engine depending on the underlying implementation and configure Axum to use it. Here, I'm using Jinja: type AppEngine = Engine<Environment<'static>>;                 //1

#[derive(Clone, FromRef)]
struct AppState {                                              //2
    engine: AppEngine,
}

#[tokio::main]
async fn main() {
    let mut jinja = Environment::new();                        //3
    jinja.set_source(Source::from_path("templates"));          //4
    let app = Router::new()
        .route("/", get(home))
        .with_state(AppState {                                 //5
            engine: Engine::from(jinja),
        });
} Create a type alias Create a dedicated structure to hold the engine state Create a Jinja-specific environment Configure the folder to read templates from. The path is relative to the location where you start the binary; it shouldn't be part of the folder. I spent a nontrivial amount of time to realize it. src Configure Axum to use the engine Here are the base items: is a facade over the templating library Engine Templates are stored in a hashtable-like structure. With the MiniJinja implementation, according to the configuration above, is simply the filename, , Key e.g. home.html The final parameter has no requirement. The library will read its attributes and use them to fill the template. S I won't go into the details of the template itself, as the is quite good. documentation The impl return It has nothing to do with templating, but this mini-project allowed me to ponder the return type. In my previous REST project, I noticed that Axum handler functions return , but I didn't think about it. It's indeed pretty simple: impl impl If your function returns a type that implements , you can write its return type as . This can help simplify your type signatures quite a lot! MyTrait -> impl MyTrait -- Rust by example However, it has interesting consequences. If you return a single type, it works like a charm. However, if you return more than one, you either need a common trait across all returned types or to be explicit about it. Here's the original sample: async fn call(engine: AppEngine, Form(state): Form<InitialPageState>) -> impl IntoResponse {
    RenderHtml(Key("home.html".to_owned()), engine, state)
} If the page state needs to differentiate between success and error, we must create two dedicated structures. async fn call(engine: AppEngine, Form(state): Form<InitialPageState>) -> Response {                     //1
  let page_state = PageState::from(state);
  if page_state.either.is_left() {
    RenderHtml(Key("home.html".to_owned()), engine, page_state.either.left().unwrap()).into_response()  //2
  } else {
    RenderHtml(Key("home.html".to_owned()), engine, page_state.either.right().unwrap()).into_response() //2
  }
} Cannot use ; need to use the explicit type impl IntoResponse Response Explicit transform the return value to Response Using the application You can build from the source or run the Docker image, available at . The only requirement is to provide an OpenAI authentication token via an environment variable: DockerHub docker run -it --rm -p 3000:3000 -e OPENAI_TOKEN=... nfrankel/rust-dalle:0.1.0 Enjoy! Conclusion This small project allowed me to discover another side of Rust: HTML templating with Axum. It's not the usual use case for Rust, but it's part of it anyway. On the Dall.E side, I was not particularly impressed with the capabilities. Perhaps I didn't manage to describe the results in the right way. I'll need to up my prompt engineering skills. In any case, I'm happy that I developed the interface, if only for fun. The complete source code for this post can be found on . GitHub To go further: Axum axum-template MiniJinja Dall.E webapp Image generation API Originally at on April 30, 2023. published A Java Geek

Showcasing Server-side Rendering in Rust — A Dall.E Use-case

If you’re tired of slow-loading websites and frustrated users It's time to give your online presence a . And one of the most underutilized techniques for doing so is server-side rendering. performance boost You can unlock the full potential of your website by harnessing the power of server-side rendering. Not only will it supercharge your website's speed, but it will also take the user experience to new heights. Join me on a fascinating journey to uncover the secrets of server-side rendering and learn how it can revolutionize the performance of your website. Say farewell to slow load times and embrace the future of seamless, lightning-fast web experiences. Understanding the Concept of Server-Side Rendering Have you ever clicked on a website and found yourself waiting for what seems like an eternity for the content to load? This could be due to the technique used to render the content of the website. Enter - a method that has the server generate the HTML code for a web page, rather than leaving it up to JavaScript on the client-side rendering (CSR). This technique not only speeds up the loading process but also makes it easier for search engines to index your site, providing a smoother user experience. server-side-rendering In contrast, client-side rendering uses JavaScript to create the content within the browser, leading to slower load times and potential difficulty for search engines to access your content. But how do you get started with server-side rendering? It all begins with setting up the server environment and integrating it into your web application with a library or framework like React or Angular. And don't forget to follow best practices like caching to keep your site fast and efficient. In summary, server-side rendering is a game-changer in the world of web development. With its quick load times, improved SEO, and user-friendly design, it's the way to go for a top-performing website in today's digital age. Implementing Server-Side Rendering in Web Development In the world of web development, performance is everything. With the demand for fast and smooth user experiences at an all-time high, it's essential to find ways to optimize your website's performance. This is where server-side rendering comes in. Here are the steps for implementing server-side rendering in web development : To implement server-side rendering, you need to set up a server environment that can handle the rendering process. You can use popular server-side technologies like Node.js and PHP to set up your server environment. Setting up the Server-Side Environment The next step is to integrate server-side rendering into your web application. You can use popular JavaScript frameworks like React, Angular, and Vue.js to integrate server-side rendering into your web application. Integrating Server-Side Rendering into Your Web Application: It's important to follow best practices while implementing server-side rendering in your web application. Some of the best practices include using caching, minimizing the amount of JavaScript code, and using a server-side rendering library to handle the rendering process. Best Practices for Server-Side Rendering Implementation: The Impact of Server-Side Rendering on User Experience When building a website, there are several benefits to rendering the content on the server as opposed to on the client side. The most noticeable of these benefits is the faster load times. By delivering the HTML and CSS to the user's browser first, the page can start rendering right away, leading to quicker first-load times. This is especially important for those with slow internet connections. Despite Google's ability to delve into synchronous JavaScript, the enigma surrounding remains intricate and rife with potential hindrances, such as . This is why relying solely on client-side rendering remains a precarious proposition from a search engine optimization standpoint. Server-side rendering has advantages for search engines. JavaScript SEO delays in indexing They use HTML content to index and rank websites, so by rendering the page on the server, the search engines can see all of the content, even before the user interacts with it. Not only is it faster, but server-side rendering also offers a better user experience. Navigation is smoother and more seamless, without any delays as the browser waits for JavaScript to load. Furthermore, server-side rendering is crucial for accessibility; By delivering a fully-formed HTML document to the user's browser, assistive technologies such as screen readers can easily access and understand the content. All in all, server-side rendering is an essential aspect of modern web development that greatly enhances the user experience. From faster load times, improved search engine optimization, and smoother navigation, to better accessibility, server-side rendering is a must-have for delivering the best possible user experience. Whether you are creating a simple website or a complex web application, incorporating server-side rendering is a non-negotiable step in your development process. The Future of Server-Side Rendering The future of server-side rendering (SSR) is overflowing with possibilities. Recently, the advent of more efficient and scalable SSR frameworks such as Next.js and Nest.Js has caused quite a stir in the web development industry. These frameworks have been designed with a specific goal in mind- to overcome the limitations posed by traditional SSR frameworks and make it easier for developers to create fast and dynamic web applications. One of the most exciting trends in web development today is the rise of . These web applications mimic native mobile apps in terms of look and feel, but they run directly in a user's browser. SSR can take PWAs to the next level by making them fast and responsive, providing users with a seamless experience that rivals that of native mobile apps. progressive web apps (PWAs) Another trend in the world of web development is the growing importance of headless content management systems (CMS). With headless CMS, the front-end and back-end of a website are disconnected, making it easier to manage content and create dynamic user experiences. SSR makes it possible to reap the benefits of headless CMS while delivering fast and dynamic web applications. The web is on a journey to become more focused on the end-user, and the demand for snappy and engaging websites is only increasing. Server-Side Rendering (SSR) can be a game-changer, with its fast page load times, improved SEO, buttery-smooth navigation, and inclusive accessibility features. This makes it a vital aspect of contemporary web development. The future of SSR is bright, with possibilities for advancements in technology and the continued pursuit of lightning-fast websites. As a developer, business owner, or average user, you wouldn't want to miss out on the exciting future of SSR. Stay tuned, as the next chapter of SSR is about to unfold. Final Thoughts Server-side rendering is a game-changer when it comes to boosting website performance. With its ability to deliver faster load times, improved search engine optimization, smoother navigation, and better accessibility, it has become a cornerstone of modern web development.

Boosting Website Performance with Server-Side Rendering

and are two ways to conditionally render content in Vue. Both are built to conditionally render content in Vue, but in slightly different ways - which can be quite confusing. Let's take a look at how they work, and when you would use each. v-if v-show v-if vs v-show in conditional rendering is the one you will want to use of the time. That's because the way works is to completely eliminate the DOM elements if the condition within it returns . For example, below we'll try to render an tag, but only if is equal to . In the below example, isn't equal to , so the will never be rendered: v-if most v-if false <h1> msg 5 msg 5 <h1> <script setup>
const msg = 6
</script>

<template>
    <h1 v-if="msg === 5">Hello World!</h1>
</template> If we made reactive, and updated it, we could conditionally render the content based on a button press, like in this code: msg <script setup>
  import { reactive } from 'vue'
    const msg = reactive({ setting: true })
  function updateMessage() {
    if(msg.setting) msg.setting = false
    else msg.setting = true
  }
</script>

<template>
    <h1 v-if="msg.setting === true">Hello World!</h1>
  <button @click="updateMessage">
    Update Message
  </button>
</template> This is fine for most cases. Loading one less DOM element is usually a better idea, and can help with some styling issues you may run into. If you try to look at your code in , you'll see that the tag we tried to render won't exist if is returning . Pretty cool, right? Inspect Element <h1> v-if false However, there are some situations where you'll want the DOM element to be rendered, though, even if returns . For example, you may want to apply some Javascript to your DOM element, even if it is supposed to be hidden. For that, you can use : v-if false v-show <script setup>
const msg = 6
</script>

<template>
    <h1 v-show="msg === 5">Hello World!</h1>
</template> The difference between and is that does not eliminate the DOM element. If the expression in returns , the element will still be rendered and exist in the document, but it will have applied to it in CSS. v-show v-if v-show v-show false display: none Other differences between v-if and v-show There are two other key differences between and : v-if v-show can be used on elements, but cannot. v-if <template> v-show also supports and clauses, whereas does not. v-if v-else v-else-if v-show Learn more about this here Conclusion and both have their uses. While will stop something being rendered if the expression within it returns , will still render the element - but it will apply to the element. v-if v-show v-if false v-show display: none . To learn more about Vue, you can check out my other articles here Also Published Here

Conditional Rendering in Vue

In the late nineties, every teen hanging out in the first online games couldn’t even imagine that our fave Lineage and FIFA were just the beginning of a new age in virtual entertainment. Crappy visuals and character limitations didn't stop us from immersing in the game — having multiple goal-scoring as a one-dimensional in FIFA ’98 was as cool as making super weird pixel in Minecraft. David Beckham mega builds And as the quality of computer graphics has evolved and virtual worlds have become more complex and impressive, user requests have grown in scale. More fun, more realism, and more immersive interaction — that's what we want in the metaverse once we get access to it. Gaming realism tries to keep up with films, but classic CGI still has many drawbacks and limitations despite the rapid advances made in recent years. It takes time and costs a lot on a large scale to make 3D characters on the screen look lifelike, and the results of transferring a realistic human appearance into the virtual world still look imperfect. In 2020, the industry's attention was drawn to a new solution for 3D representation – the NeRF method, which uses a neural network to recreate realistic 3D scenes. In short, the invention of neural rendering may be as disruptive as Open AI’s GPT-3 release was. And although the NeRF technology still needs improvement, many industries are already waiting for it to enter the real market. A sexy explainer of the NeRF methods in action, which has already been illustrated in most NeRF-related news: https://youtu.be/5jKry8n5YO8?embedable=true NeRF: what's the point? Classic CGI, which provides modeling of objects and spaces thanks to the approach of polygonal rendering, is constantly balancing the quality and speed of the result. After all, the more complex the scene, the more time and production capacity are required to reproduce it. Two years ago, the new neural radiance fields method (NeRF) broke into the industry, giving it significant advantages over all previously used 3D reconstruction tools. Neural rendering allows you to get a photorealistic 3D character or scene quickly with maximum quality: a set of pictures of the same object from different angles is enough for the neural network to finalize the result. Even though the quality of neural rendering is impressive, there are significant problems in terms of rendering speed, as it remains computationally heavy. These are the primary gatekeepers preventing the technology of neural rendering from entering the real market. So while developers from various tech companies are trying to optimize neural rendering, I want to share my thoughts on where the implementation of hyperrealistic virtual imagery is most expected. Games: more options for transferring identity After the rise of face-swap technology, billions of synthetic media have been created worldwide. Until recently, face-swap closed the need for users to become anyone in the virtual world, but neural 3D rendering opens up even greater prospects for self-expression. And the gaming industry will be the first to offer new options for transferring digital identity. Let’s check out some examples. 3D Celebs Famous people are often invited to create game characters, but production studios still pour multi-million budgets and months of hard work into reproducing well-known faces in the game environments. Thanks to scaling neural 3D rendering in the market, transferring appearances from the real world to the game space will open up new genres and create a unique kind of storytelling. Would you be able to resist having personalized gameplay of The Witcher as your fave 3D celeb, or hyper-realistic Luke Skywalker, whose avatar you buy and play to save the galaxy? I don’t think you could. Sports simulators will have the same opportunities, where real athletes, whose faces have been used for many years in a row, will look hyper-realistic without extra costs for production. Advanced character customization Many role-playing games allow you to customize characters by adding unique details such as hair, make-up, clothes, or artifacts. Customization has become very detailed but is still based on templates and can’t completely copy realistic features. The modern FPS games have mostly originated with Wolfenstein 3D — a rude male Caucasian avatar, with a military background. Whether you like it or not, military and related backgrounds are still one of the exclusive providers of FPS avatars, but now avatar capabilities are expanding far beyond military aesthetics. BTW, here's of how the avatar customization in the FPS genre such as gender, race, background, and additional features have changed thanks to tech development and different events. a geek vintage explanation Transferring yourself into your fave games with just a few selfies — one of the upcoming options in gaming available with neural rendering. Modeling your character based on your true appearance will help personalize the gaming experience to the maximum. Such pioneers already exist; their methods and the quality of the results still , though. fall short Communication: hyper-realistic digital avatars and emojis Expressing emotions in digital communication has evolved over the past couple of decades. In the late nineties, releasing wordless language to express feelings became priceless for users — remember creating the first emoticons from brackets? And this shrug-face guy ¯\ /¯, a kaomoji made in Japan, is still a favorite among the old geeks. (ツ) In the following years, many tech companies customized their emoji sets, and once Apple added emojis to iOS messaging apps for its products in 2011, a new age of emojis began. Emojis for almost every taste appeared in messengers — considering gender, hobbies, race, and unique features. The language of emojis has developed alongside technology, and now animated avatars are at the peak of this evolution. The possibilities for neural 3D rendering will soon allow us to look less like animated cartoons and more like natural people, opening a new stage of online communication. Expressing your emotions by leaving reactions with hyper-real 3D memes starring yourself, and generating your own 3D realistic sticker pack in a few taps will refresh our vision of social media. Video production: simplify and make the process cheaper Many novelties in the film production are created with the help of game engines — powerful real-time 3D creation tools predominantly used in the game industry. With their help, some episodes of Love, Death & Robots, 1899, Space Sweepers, The Mandalorian, and many other things were filmed in Star Wars and much more. Previously, it took the VFX team months and incredible budgets to reproduce fantastic worlds and characters on a large scale and simulate lighting, physics, and movements. In recent years, Deepfake technology has helped simplify and make the process cheaper. The next step is to make film production even better with neural 3D rendering, maintaining the quality of the final product and reproducing 3D characters and environments without the need to shoot in the real world. Tools for creating realistic digital humans in the Metaverse It’s no surprise that the gaming industry was the first to present the creation of realistic digital humans in 3D. At the beginning of 2021, Unreal Engine launched a – a browser-based app that empowers game developers to build digital humans in less than an hour with the highest level of quality. The quality of the drawings is truly imposing. MetaHuman Creator MetaHuman works as a very advanced editor in which you can mold a character from dozens of ready-made presets. To quickly turn yourself into a digital personality though, you would need to be a game designer or professional. However, this is what we expect from future interactions in the Metaverse: everyone should be able to create a digital twin of themselves to continue doing the things they are used to doing in the real world. Today, hundreds of millions worldwide enjoy AI tools for instant content creation and want to achieve even more in representing their identity in the virtual space. Each breakthrough technology that was once complex and expensive becomes cheaper, more straightforward, and possible to fit in your pocket. Once machine learning brought editing 2D images to a new level of accessibility – now everyone can make a face swap on their phone in a few seconds or generate a new kind of AI art with the help of text input. In the same way, AI will help to make the creation of 3D images and characters widespread, including transferring users into digital humans to interact in the Metaverse. We at are working on new solutions for neural rendering optimization and looking forward to hearing more news from the market on how we can meet together in the 3D space. Reface

Why We Urgently Need to Optimize Neural Rendering

Global Illumination, the foundation of realistic lighting in 3D visualization, has always been a demanding and challenging issue for rendering engines to solve. Direct use of UE4's pathtracing is a great yet not perfect solution, since UE4 uses BruteForce and has some problems to be solved before it can be used as a renderer. Craving to create a real-time rendering tool which allows 3D designers from architecture, landscape, and interior design industries to have both a precise preview and realistic output of the visualization project, the D5 Team decided to make some in-depth improvements on the ray-tracing tech that comes with UE4. After a long-term experiment that went from DXR to FallbackLayer, and then to Optix, from random sampling to discrete space sampling, they finally came up with a solution containing a combo of techs that help to be such a tool at designers' disposal. D5 Render Cache GI which makes the scene more clean and smooth To make up for UE4's lack of enough samples, the D5 Team used discrete sampling, with which the scene would get rid of remarkable noises while the graphics card could handle it with ease. The cached low-frequency statistics get GI in D5 to precisely cast soft shadows, thus adding a ton of realism into the render. Gbuffer Raytracing UE4 has been using this technology to replace some of the computation. So does D5 Render. That Gbuffer allows rays to be emitted as required saves the time and cost of primary rays emitting, thus making a good integration of ray-tracing and pipelines. Advanced Sky Light to produce better shades D5 Render, underlied by RTX that's good at ray intersection, introduced Sky Light based on that of UE4 and took a step further by adding a denoising algorithm and adjusting ray-wise strategies, so that any HDRI imported into D5 could have gorgeous performance and produce precise and clean shades. Outstanding emissive lighting Basically, emissive texture is not supported by UE4 for lighting. To make it happen in D5 Render, the team applied SimpleGI and GI cache which lies the foundation to create high-quality emissive materials. When the Emissive button is switched on, the material will instantly have a glowing effect. Designers can adjust its intensity, color as they need and decide whether it casts shadow or not. Computer Graphics will never stop its pace to move forward. It's the same with D5 Render. As UE5 was released this year, the D5 Team is also making preparations for upgrade to bring a better rendering tool for 3D designers.

Real-Time Rendering Tool with Reconstructions Based on UE4 Raytracing Tech

Since its invention, JavaScript has truly ruled the world of developers for front-end programming. It has allowed front-end developers to develop interactive, fast, robust, user-centric, and feature-rich web applications. Therefore, it has turned out to be the most popular language in the software development industry. A that over 1.5 billion websites in the world are using JavaScript language. However, the number of websites using this technology is around 95%. So, we can conclude that every computing device uses JavaScript, including iOS/macOS, Android, Windows, Linux, Smart TVs, etc. report states "Software ate the world, the web ate software, and JavaScript ate the web." Every front-end developer is familiar with JavaScript. However, if it’s used without expertise or knowledge, it can be a double-edged sword. If a developer is not well-versed with the JavaScript language and the code written for the website is poor, it may slow down your website, negatively affecting load times, and rendering speed. When developing a modern application, it’s essential to analyze, monitor, and optimize its performance. However, you should be aware of how fast your website is. Performance plays an important factor in the success of any online venture. So, now you must be wondering, why does speed matter for the success of the website? Why Does Speed Matter? Website speed or performance plays an important role in the success of your online business. Users generally get engaged and attracted towards high-performing JavaScript websites than low-performing sites. “Performance has directly impacted the company's bottom line.” - YouTube Pinterest reduced perceived wait times by 40%, . increasing search engine traffic and sign-ups by 15% COOK reduced average page load time by 850 milliseconds which . increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10% As per the report, the poor performance of the website will negatively affect business goals. Therefore, as per this statement by , they lost around 10% of users for every additional second their website took to load. Hence, it’s advisable to leverage comprehensive JavaScript development prowess to power up your business. BBC Let’s understand the reasons in real-world stats why code optimization is important: Research by Google says that around 53% of visitors will leave your website if a webpage doesn’t load within three seconds. 88% of online customers are less likely to return to a site after a bad experience. 100-millisecond drop in website speed also drops the rate of conversion by almost 7%. 47% of users expect a maximum of 2 seconds loading time for an average website. Here, in this article, we are going to cover some useful tools, which will help you enhance the speed of your JavaScript-enabled website and avoid the dark side effects. If you don’t optimize your JavaScript code properly for your project, you may face the following problems: A considerable number of host interactions Lack of event handling Code shuffling Inefficient loops How to Load the JavaScript Faster File compression, usage of asynchronous code & defer tags, and cache the browsers are preferred ways to load the JavaScript faster. How Can I Enhance the Performance of JavaScript? Code optimization plays an important role in enhancing the performance of the JavaScript website. You can avoid memory leaks, delete the unused code, files, features, and use the compressed data for better performance. Furthermore, you can implement a CDN, minimize external requests, and focus on creating a clean code to increase the overall performance. Will Minifying Help to Improve Performance? The minifying method will help you remove the unused functions, comments, commas, etc. Eventually, it will improve the web performance. So, now without any further ado, let’s focus on tips to optimize JavaScript code for front-end developers. 1) Remove Unused Features and Code The more you write for a website, the longer it takes to load. Therefore, while developing a website, you must optimize the JavaScript code using JavaScript Code Optimizer. It will assist you in removing the unused functionalities, features, and code in the development environment. Google Clouser Compiler and Uglify JS are the finest JavaScript Code Optimization Tools. These tools remove commas, comments, and dead code. Code Before Optimization { 
alert(“Hello. This is the code before optimization.”); 
} { } } function test ( mode ) { var parent = node.parentNode; if ( 0 ) else alert (“Hello. Greetings for developers.”); return ; alert( 1 ); Code After Optimization } function test ( ) { alert (“Hello. Greetings for developers.”); So, here, what did we do? We removed the variable parent as it will never be used again. Also, we removed False if() {…} as it’s a ‘dead code’. Return is deleted; it’s also dead code. 2) Minify JavaScript Code Minifying and obfuscating JavaScript code methods are used to transform the JavaScript. However, both these methods are different. Minification can reduce the size of files to decrease the page loading time. Some factors like a line break, additional spaces, comments, and more increase the size of the JavaScript file and affect the page loading speed. With code compression, you can resolve this issue. Even though all of your JavaScript code fits in just one string, your machines can be able to read and launch minified code. 3) Work On Memory Leak Issue As we know, without any doubt, Garbage collection is performed automatically in JavaScript, and you can’t ignore the memory section. So, as a front end developer, you have to use the function like WeakSet and WeakMap to solve the issue of memory leaks. Therefore, you can use Chrome Dev Tools to avoid the memory leaks problem. 4) Avoid Irrelevant Iterations A loop always consumes a significant amount of time to load the project, irrespective of its size. Hence, you should break the large cycle of a loop very soon. However, you can execute this process with two keywords: and . break continue For example, if you don’t use the break keyword; this loop will execute 100 times. { } let arr = new array( 100 ); arr[ 36 ] = ‘found’; for ( let i = 0 ; i < arr.length; i++) if (arr[i] === ‘found’); break ; 5) Asynchronous JavaScript Loading: Defer and Async Tags JavaScript asynchronous loading is a part of sync loading. It signifies that your website is now prepared to load in a multi-streamed way. When the browser encounters , the creation of DOM and CSSOM models will be stopped while JavaScript is executed. Therefore, many times, JavaScript code is written after the main HTML code. <script src=”some.js”></script> Well, to clear your doubts, let’s view an example here: </html> <html> < head > < script src = "big.js" > </ script > </ head > < body > This text will not be visible until big.js is loaded. </ body > Now, in the JavaScript code, you can use the async tag to ensure that the DOM model is created parallelly and not stopped while the JavaScript is loaded or executed. If your JavaScript needs to manipulate the HTML or CSS or load a script in a specific order (jQuery-dependent libraries), use caution. Let’s view another example; if you are using a popular and CDN for jQuery on your website, you could add the given code to your HTML. bxSlider    < script src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" > </ script > < script src = "/js/jquery.bxslider.min.js" > </ script > < link href = "/lib/jquery.bxslider.css" rel = "stylesheet" > In the above code, we can see that bxSlider is local, whereas Google CDN loads jQuery. So, if we try to add an async tag to the string (including jQuery), errors may occur with the bxSlider if is loaded before . jQuery.bxslider.min.js jQuery.min.js Therefore, there’s in need of another tag – . defer The DOM and CSSOM models will not be loaded, if the browser encounters a defer tag with JavaScript code. Once the DOM and CSSOM models are complete, every tag script will be run instantly. Any script will be executed in the order you code. defer <script src= "1.js" defer></script> < script src = "2.js" defer > </ script > In the above case, 2.js will not be executed until 1.js is loaded. Here, defer and async tags are ready to execute only for external scripts (with src=”” tag). And these tags will be avoided, if you use them for internal scripts like tags. <Script>...</Script> 6) Use HTTP/2 Protocol One of the most advanced and latest versions of the HTTP protocol is HTTP/2. It offers you many features by improving the JavaScript code performance. This will lead to the enhanced website speed. HTTP/2 handles multiple requests and responses all together. So, it helps to enhance the load time of JavaScript. If you are in a dilemma, you can check the difference between these protocols: . Another test is . HTTP/2 vs HTTPS Aka`mai HTTP/2 demo 7) A Proper Order to Load Elements Element organization during the loading process is an important tip for JavaScript code optimization. Here, every element in the <head> section is pre-loaded, so it appears on the user’s screen before they see anything on the web browser. Hence, it’s essential to manage order to display the result on the screen. Here, the unorganized elements of the page always show a white page to the user. So, it’s important to organize all the elements in a proper and logical way. It will surely help to increase user engagement. With the in-depth research, we have concluded that how to load order impacts user focus. 0 to 16 ms A screen updates 60 times per second. This data show how much time will a single frame take to appear on the screen (1000/60=16). People are good at monitoring motion, and they will be frustrated if the expectation of motion is not met, whether through variable frame rates or periodic pauses. 0 to 100 ms If it responds to a user action within this time frame, they'll think the result was immediate. Any link between action and reaction has been broken. 100 to 300 ms Users experience a slight but predictable delay. 300 to 1000 ms For most users, loading pages or switching views is a task. 1000+ ms Users lose focus on the task they are working on after 1000 milliseconds (1 second). 10,000+ ms The user is likely to become frustrated and abandon the task; they may or may not return later. Well, Google calls it a . RAIL Model 8) Use a JavaScript CDN With the help of a CDN, you can significantly improve the speed and performance of your website. When you use a CDN, you link your website's static content to an extended network of services across the globe. Well, it’s very important if your website caters to an overseas audience. A CDN loads your data from the nearest server and present to the visitors. With the help of a CDN, your files will automatically be compressed or optimized for rapid delivery for your visitors. This makes things run faster. Well, you can and see which one is best for you. compare various CDNs 9) Use CSS3 Effects in Place of JavaScript When we compare CSS3 with its previous versions – 1.0 and 2.0, the older versions were less powerful and required extra JavaScript to achieve more advanced styling effects. However, CSS3 comes up with many functionalities that require less JavaScript. Furthermore, CSS can be pre-compiled, so it consumes less memory on CPS than JavaScript. Let’s consider an example here. Without any JavaScript, you can add in CSS3 and HTML5. CSSSlider Here’s one to try: HTML: <meta charset="UTF-8">
<title>CSS Slider</title>
<body></body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider"></div>
<figure></figure>
<img src="apple.jpg" alt="">
<img src="strawberry.jpg" alt="">
<img src="cherry.jpg" alt="">
<img src="pineapple.jpg" alt="">
<img src="kiwi.jpg" alt=""> <!DOCTYPE html> < html lang = "en" > </ html > < head > </ head > CSS: { } div#slider figure  
{ } @keyframes slidy 0 % { left : 0 %; } 20 % { left : 0 %; } 25 % { left : - 100 %; } 45 % { left : - 100 %; } 50 % { left : - 200 %; } 70 % { left : - 200 %; } 75 % { left : - 300 %; } 95 % { left : - 300 %; } 100 % { left : - 400 %; } body { margin : 0 ; } div#slider { overflow : hidden; } div#slider figure img { width : 20 %; float: left; } position : relative; width: 500 %; margin: 0 ; left: 0 text-align: left; font-size: 0 ; animation: 30s slidy infinite; 10) Code Testing Code testing is an important factor in analyzing performance issues such as memory leaks and patching them. Well, you can implement the given JavaScript testing tools to enhance the JavaScript performance. Console.time() is used to track the time of operation execution. Console.time() Initially, you have to call simply: console.time(label); Here, “ ” can be a unique name for your timer. At the end of the process, you can call: label console.timeEnd(label); Here, operation time will be monitored from initial to end. YSlow is an open-source performance tool. It analyzes your website performance and gives optimization tips. Your website will be called by this tool and compared its performance adhering to Yahoo’s standards for high-performance websites. YSlow This tool will execute your website and compare its performance against the standards of Yahoo for high-performance websites. However, it will give you a score between 0% and 100%. JSFiddle.net is a web development coding environment that executes in your web browser. JSFiddle.net It supports: JavaScript, HTML, CSS, and CoffeeScript Boilerplates for React, Vue, and jQuery The ability to demo code snippets and share them for code collaboration Simple bug-reporting for GitHub issues Wrapping Up While developing a JavaScript application, it’s essential to balance between code readability and optimization. As we know, our code could be interrupted by machines, but it’s our responsibility to maintain it for better performance. Now you must have a question – Is there any JavaScript framework that eliminates all the hurdles and improves the performance? TezJS is the revolutionary Jamstack framework that not only optimizes the JavaScript code but also delivers the guaranteed highest performance out of the box. So, as a front-end developer, this article will help you optimize JavaScript code and enhance website speed. However, it’s not easy to implement or remember all of the given points for your JavaScript application. So, you should keep the list of tips to optimize the JavaScript code or save this article for your future reference. I hope this article's tips, information, and TezJS framework help you to develop a high-performance JavaScript website.

How to Improve Website and Rendering Speed with JavaScript Code Optimization

Here we are analyzing the different types of pre-rendering a website and its combination with a CDN. Static Site Generation Every single page of a website is first built and then uploaded to a CDN. The best part of this is that, as the website is static, the user does not have to interact with the server. The CDN can directly return the static generated site, so the user gets a . fast response The disadvantage is that every time you want to update the website you have to build the whole website again and upload it to the CDN. This costs money. Server Side Rendering without CDN Pages are built on demand with Server Side Rendering. When a user requests a page the user has to wait until the page is built and returned from the server. Because of this, . response time is slow Every visit to a page generates a build. In comparison to Static Site Generation where every page is always built, here . If no one visits a page, it is never built. only the pages that are visited are built The disadvantage is that for every request we have to build the page. Server Side Rendering with CDN In this case, the first visitor of a page requests the page to the CDN and the CDN requests it to the server which builds it and returns it back. But for the second visit, the CDN will already have the page in the cache and can directly return it without generating a new build. The problem here is that every next visitor is going to receive the build that was generated for the first visitor. What happens if the page is stale? With , we can control how long the page can be cached. When the page is stale, the CDN will request a new build on the next request after . Depending on the kind of the page we could set a different . max-age max-age max-age We can combine with . The CDN will cache a page using instead of if it is present. The user's browser will ignore . This can be very useful if we purge the website pages in the CDN when they are rebuilt. max-age s-maxage s-maxage max-age s-maxage As we don't have control over the user's browser, we should have a that is lower than the , otherwise, we could have an updated version of a page in the CDN that the user would never request because the user's browser had an older version which would be still valid according to . max-age s-maxage max-age For example, we could set a of one minute or one day and a of one year. This way the user would request the page to the CDN frequently and the CDN would never request a new build because according to the page would still be valid. We would update the cache on the CDN by purging the previous page and uploading the new one. max-age s-maxage s-maxage Incremental Static Site Regeneration Initially, the whole website is built and uploaded to the CDN as with Static Site Generation. But here if a user requests a page the CDN will return the current cached page and it will also request to the server a new build of . This way, and the CDN will again request a new one to the server. only that page the next user will get the new build Every user gets a fast response and only the pages that are requested are updated. This is a technique used by Next.js, I recommend reading to get a better understanding of this. their documentation Server Side Rendering with Stale While Revalidate can be added to the header. What does it do? If a request comes after the CDN returns a stale version of the page while the server is building a fresh one. specifies in seconds for how long can the stale version be returned. stale-while-revalidate cache-control max-age stale-while-revalidate The first time a user requests a page it will be generated in the server and uploaded to the CDN. If a new request comes before then the CDN will just return it. If a request comes after then the CDN will return the stale version but this time it will request the server a new fresh copy. max-age max-age Every user that requests the page while it is being built will get the stale version. If after a request comes and has also passed, then the CDN won't return a stale version and it will wait until a new version is generated in the server. max-age stale-while-revalidate From the user's perspective, it is exactly the same as Incremental Static Site Regeneration. Only that here we don't have to build the whole website for the first deployment, the first visitor will trigger the build of the page that he's visiting. Also published . here

An Overview of CDN Caching, Static Site Generation and Server Side Rendering

Abstract There are many benchmarks that compare the performance and rendering speed of and . For the most part, they all show that is faster. However, there are suggestions that these benchmarks do not give a complete picture of performance because they compare trivial solutions, such as single nesting or lack of a large number of views. It is also assumed that in critical cases, such as deep or wide nesting, there will be different results. There are also opinions that it doesn't make sense to refactor code to in already existing large project, because the hybrid variant ( ) will exist in the project for a long time, and rendering performance will suffer even more because of it. That's why I decided to compare more complex variants: XML compose compose view compose compose+xml -deep and wide nesting; view -influence of state with respect to these cases. hybrid (compose+xml) Observations and Assumptions -This comparison in no way claims to be absolutely correct for all types of devices, amounts of RAM or different types of displays. -Measurements were made on Xiaomi mi 5s phone, MIUI Global 10.2, 12.15GHz quad-core processor, 3GB RAM, Android 8.0. Especially chose not the most powerful and top-end phone, so that the difference was more noticeable. Most people use similar devices. -To reduce the amount of code, I did not calculate the density of the screen, because I know that I have 3. -Use the 16 colors suggested by to separate the views from each other. Android Studio -The measurement for each case is taken 10 times and the average is calculated.
-If you have any questions about quality or quantity, the complete test code is given after each example and you can repeat it at any time. Introduction I wanted to nest about 100 views into each other to make comparisons, but I ran into an parsing error: This error occurred when nesting more than 49 views. Therefore, in the comparisons below I have operated with exactly this number of nested elements. To visually display and control what is happening, I have assigned a different background color and some indents to each element. As you can see in the picture to the left, the red view has a raspberry view nested, the crimson view has a purple view nested, etc. This group of examples will show how deep nesting affects performance in different execution options: . These examples will be labeled as depth. xml AAPT: error: failed to parse proto XML xml, code, compose, hybrid (xml+compose) Along the way, I created another critical case - "very wide nesting". That is, I put also 49 elements in one and colored them with different colors (see picture on the right). I purposely didn't use and for my comparisons. This group of examples will be marked as . Each view is also colored to control what happens. view RecyclerView LazyColumn width We now have the task of figuring out the rendering speed at each execution and answering a few questions: a) will there be an advantage in using when nesting is deep and wide? compose b) does the hybrid state affect rendering speed and performance in these cases? We will use the segment between the two points for measurements. The start point after . Intermediate ― after . The final one is which coincides with the full display of activity and the change of focus to the active state. The end point is after . The time will be measured by , because we don't need to calculate absolute values, so there is no point in using more precise tools. super.onCreate(savedInstanceState) super.onResume() onWindowFocusChanged() super.onResume() System.currentTimeMillis() XML depth Let's start with the first example. Let's put 49 times into each other and color the background in the standard colors. Let's add indents. FrameLayout 
<FrameLayout>
   <FrameLayout>
          <FrameLayout>
          ...
          </FrameLayout>
   </FrameLayout>
</FrameLayout> Full code https://gist.github.com/eef908bf788f36941beddc1cbc6d2348 https://gist.github.com/36b1e4870d86ae760ee238a3557d3d83 Table with the results: XML width Let's put the following example into 49 . I purposely didn't use to determine how the view would behave with wide nesting without optimizations. LinearLayout FrameLayout RecyclerView <LinearLayout>

   <FrameLayout/>
   <FrameLayout/>
   <FrameLayout/>
   ...
</LinearLayout> Full code https://gist.github.com/51b6b1e8dc288fb1decf7cbcb2ddd563 https://gist.github.com/504a474e66443813af1372c53bf316cc Table with the results: Code depth In this example, we'll put 49 in, but in runtime. We'll also color it with standard colors and add indents. In this example, we know in advance that the will be faster because there is no xml parsing step. This example is very close to compose. Rather, the goal here is to find out how much influence legacy has accumulated over the years in . As you will see below, the influence of legacy code is quite big. FrameLayout xml View //49 times
FrameLayout(this)
   FrameLayout(this)
       FrameLayout(this)
       ... Full code https://gist.github.com/48ade4ab6d6cde33a6e1d2f5b7aff95c Table with the results: Code width In this example we will place the 49 vertically in the . Let's add colors to each element. FrameLayout LinearLayout LinearLayout(this)
//49 times
   FrameLayout(this)
   FrameLayout(this)
   FrameLayout(this) Full code https://gist.github.com/808fd9ac925cf8f53260726f6e54ef09 Table with the results: Compose Depth In this example, let's finally start using compose. Let's nest 49 times inside each other to achieve deep nesting like in the example. Based on these two results, we will be able to compare whether deep nesting affects the rendering speed of the hierarchy. Box xml view //49 times
Box()
    Box()
        Box()
        ... Full code https://gist.github.com/7fc700187c33d90ddf20bb4af4694a16 Table with the results: Compose Width In this example, as in the , we'll make a wide nesting by inserting 49 into one . Just like in the example above, we intentionally didn't use the . Based on this example and the example above in the , we can conclude whether wide nesting affects the speed of rendering. xml Boxes Column LazyColumn xml Column()
//49 times
    Box()
    Box()
    Box()
    ... Full code https://gist.github.com/604ecdea027321df09d11778ce7d6bef Table with the results: Hybrid (xml + compose) depth In this example, we put 24 , then we put . In we'll put 24 (24 + 1 + 24 = 49). This way we can assess whether the hybrid state during refactoring affects the performance and the rendering speed of the view. Let's assume that all is the remaining legacy, and is the refactored part. FrameLayout ComposeView ComposeView Boxes FrameLayout ComposeView Box FrameLayout Box 
<FrameLayout>
   <FrameLayout>
          <FrameLayout>
              ...
              <ComposeView>
              //24 times
              Box()
                  Box()
                      Box()
                      ...
              </ComposeView>
          </FrameLayout>
   </FrameLayout>
</FrameLayout> Full code https://gist.github.com/06020dc278669e72431fbb2b97b3b3b0 https://gist.github.com/789b7407559b84f92df8d6bf2220fd06 Table with the results: Hybrid: xml + compose width In this example, create 49 in a and put a in each one. ComposeViews LinearLayout Box 
<LinearLayout>
    <ComposeView>
        Box()
    </ComposeView>
    <ComposeView>
        Box()
    </ComposeView>
    <ComposeView>
        Box()
    </ComposeView>
        ...
<LinearLayout> Full code https://gist.github.com/9a6316c0d9e3be6f60076c858e4c1b02 https://gist.github.com/c9cee224fe8cddca71eb9559a9a385d6 Table with the results: Conclusion Let's summarize all the results in a graph. The results were quite ambiguous. turned out to be 50% faster than in the method, but 2 times slower in the method. Compose xml onPause() onWindowFocusChanged() Answering the two questions originally posed, we conclude: There is an advantage with respect to the method, but not with respect to the method. onPause() onWindowFocusChanged() With respect to the method, the hybrid state ( ) does not affect the rendering speed, does not affect with respect to the method with multiple horizontal arrangement onPause() xml + compose onWindowFocusChanged() ComposeView is a very powerful and useful tool, but as you can see, it won't solve all the problems for us. Using , like any other technology, requires compromises and accuracy in its application. Compose compose

Comparing XML and Compose Rendering Speed at Deep and Wide Nesting

TL;DR 🚀 Concurrent rendering addresses the performance problem with rendering large UI updates while keeping the UI responsive. 🧑‍🔬 We'll use 3D rendering in the browser to stress test React 18. ⚖️ We'll look at the typical approaches alongside concurrent rendering and discuss their pros and cons. In this article, we are diving into a 3D visualization and discuss how to optimize its performance step by step with React 18's concurrent rendering. Here's the sneak peek. Concurrent Rendering with useTransition . The core idea is to classify state updates into two categories: React 18 introduces the concurrent features : they provide responsive feedback to user interactions, like typing and clicking. Urgent updates : they provide non-urgent UI transitions, like displaying dataset. Transition updates The purpose is to create a snappier and more responsive experience for the users. Before React 18, all updates are considered urgent, and a simple click or typing can cause the screen to freeze when there's a larger rending. So in React 18, by deferring non-urgent updates to urgent updates, users are able to receive immediate feedback from their interaction while React is working on the non-urgent updates in the background and reflect the result when ready. According to the working group, the concurrent rendering is able to perform the following things: : React will periodically stop working and let the browser fire one or more side effects. Yielding : When React detects new urgent updates, it will interrupt and pause non-urgent updates and start working on incoming urgent updates so the page can stay responsive. Interrupting : React will discard outdated transition updates and only render with the newest state. Skipping old results We’ll use the format and methods from the articles to test the 3D rendering demo and observe the impact on the performance and user experience. 3D Rendering Demo Overview In order to create heavy computations for rendering, I built a 3D visualization to show the connections between a GitHub user and the users she's connected with on GitHub. The technology includes: three.js react-three-fiber React 18 The UI looks like this: The components we will be discussing today includes: : to search for a GitHub username and fetch the user info from the GitHub GraphQL API. Search Bar : to visualize the connections between the user and her connections in on a 3D globe. Scene You can find the repository on GitHub and the demo on Netlify . Please note that the demo might crash due to a task timeout. The timeout is caused by the slow experimental API call to fetch the coordinates of the cities. If you'd like to interact with the demo, it's recommended to fork the repository and run the development server locally. As we type into the search bar, you'll see an increasing amount of stars in the scene to simulate the high rendering demand on the UI. The amount of stars is . We'll use it to stress test concurrent rendering. 100,000 * inputValue.length The Problem Let's start with our base case with the most basic implementation. The outcome looks like this: You can see my typing on the bottom left corner of the video. As I was typing, the search bar was frozen. It didn't display the input value until the very end. Not just the search bar, the scene was frozen too. The stars didn't get rendered until I finished typing. Ideally, we want to be able to observe immediate feedback from our typing. Let's look into the performance together. We'll slow down the CPU by 4x and run a performance profiling. You can see the big chunks of tasks with keypress event in the flame chart. With each keypress, React computes the next rendering for the SearchBar and the Scene. As we see in the chart, the longest task takes almost 0.8 seconds to complete. That's why the page feels so slow. So, what's happening? In the Home page component, the SearchBar listens to the keypress event and update the username when changes happens. setUsername(username)
  } )
} const Home: NextPage = () => { const [username, setUsername] = useState< string >( '' ) const vertices = useMemo( () => computeVertices(username.length), [username]) const handleChange = ( username: string ) => { return ( <> < SearchBar value = {username} onChange = {handleChange} /> < Scene vertices = {vertices} /> </> Whenever there's a username update, React recomputes vertices by calling computeVertices() and pass the result in to the Scene component to render the stars. Since the number of vertices is 100,000 * username.length, coupling the two state updates together is a very expensive rendering cycle. How Did We Fix It Before React 18? Ideally, we want to see what we typed in the search bar immediately. Knowing that updating both states in the same rendering cycle takes too long, we can simply split the two updates so that SearchBar and Scene gets rendered separately. Let's first add a new state for the SearchBar: } setValue(value) onChange(value)
  } } setUsername(username)
  } )
} type FastSearchBarProps = { defaultValue : string onChange : ( value: string ) => void function FastSearchBar ( { defaultValue, onChange }: FastSearchBarProps ) { // new state designated to SearchBar const [value, setValue] = useState(defaultValue) const handleChange = ( value: string ) => { // update input value // update vertices return < SearchBar value = {value} onChange = {handleChange} /> const Home: NextPage = () => { const [username, setUsername] = useState< string >( '' ) const vertices = useMemo( () => computeVertices(username.length), [username]) const handleChange = ( username: string ) => { return ( <> < FastSearchBar defaultValue = {username} onChange = {handleChange} /> < Scene vertices = {vertices} /> </> Now we have a value state for SearchBar and a username state for computing vertices. We'll need additional work to separate the renderings because React will batch the state updates together in the same event to avoid additional rendering. Let's take a look at some of the typical approaches. Approach #1: setTimeout We can simply defer the slower update by adding setTimeout to put the it in the event loop. setValue(value) onChange(value) } } function FastSearchBar ( { defaultValue, onChange }: FastSearchBarProps ) { const [value, setValue] = useState(defaultValue) const handleChange = ( value: string ) => { setTimeout ( () => { }, 0 ) return < SearchBar value = {value} onChange = {handleChange} /> Now even with the 4x slowdown, the SearchBar looks more responsive. We also observed that the stars are getting rendered while we were typing. If you take a look at the performance profile, you can see that we were able to separate the keypress events from the expensive tasks. However, we noticed that the Scene was rendered twice after the last keypress event. That's because the renderings were still scheduled with outdated state when the setTimeouts were fired. Approach #2: Debouncing We can actually cancel the rendering schedule by implementing debouncing. setValue(value) onChange(value) } } function FastSearchBar ( { defaultValue, onChange }: FastSearchBarProps ) { const [value, setValue] = useState(defaultValue) const timeout = useRef<NodeJS.Timeout>() const handleChange = ( value: string ) => { // cancel the schedule if `value` changed within 100ms. clearTimeout (timeout.current) // schedule a new update if input value hasn't changed for 100ms. timeout.current = setTimeout ( () => { }, 100 ) return < SearchBar value = {value} onChange = {handleChange} /> The user experience looks better now. The SearchBar stays fairly responsive with 4x slowdown and the redundant update on the Scene after the last keypress event was gone. However, the shortcoming of debouncing in this case is that the Scene update will always be delayed by 100ms. With faster CPU, the delay is most likely redundant and it makes the page feel slow. React 18's Concurrent Rendering: startTransition The page feel more responsive with either adding setTimeout or debouncing, but they introduces different problems: setTimeout: results in additional UI updates with outdated statesdebouncing: results in artificial delay in UI updates Let's take a look at how React 18 solves the problems with concurrent rendering: type FastSearchBarProps = { } setValue(value)
    onChange(value)
  } } [username]
  ) setUsername(username)
    })
  } )
} import { startTransition } from 'react' defaultValue : string onChange : ( value: string ) => void function FastSearchBar ( { defaultValue, onChange }: FastSearchBarProps ) { const [value, setValue] = useState(defaultValue) const handleChange = ( value: string ) => { return < SearchBar value = {value} onChange = {handleChange} /> const Home: NextPage = () => { const [username, setUsername] = useState<string>( '' ) const vertices = useMemo( () => computeCoordinates(username.length), const handleChange = ( username: string ) => { // defer username update in a less urgent UI transition startTransition( () => { return ( < Container > < FastSearchBar defaultValue = {username} onChange = {handleChange} /> < Scene vertices = {vertices} /> </ Container > We call setUsername inside of startTransition function. It tells React to defer setUsername to the other urgent updates. As you can see, we are able to separate the rendering of SearchBar and Scene without any asynchronous functions. If we take a look at the performance profile, we can observe a few things: The keypress events are separated from the long rendering function calls. The keypress events are grouped. It aligns with the behavior in concurrent rendering. yielding There's only one rendering call after the last group of keypress events. It aligns with the behavior in concurrent rendering. skipping old results The behavior is not very straight forward to observe. If you know how to analyze it from the performance profile, please feel free to ! interrupting reach out to me on Twitter Let's remove the slowdown and see the final result: Final Thoughts In the past, adding debouncing was the go-to solution for rendering large UI updates while keeping pages responsive. Based on this experiment, concurrent rendering makes the UI more responsive without the shortcoming of debouncing. Even for the heavy computation with at least 100,000 3D objects, concurrent rendering still helped the page to be snappy. Here's the side-by-side comparisons: UI Comparison with 4x CPU Throttling Basic implementation without concurrent rendering: Optimized implementation with concurrent rendering: UI Comparison with No CPU Throttling Basic implementation without concurrent rendering: Optimized implementation with concurrent rendering: References GitHub: Demo repository Website: Demo Site Website: React v18.0 GitHub: New feature: startTransition GitHub: Real world example: adding startTransition for slow renders GitHub: three.js GitHub: react-three-fiber Website: WebGL Globe Solution This article is originally posted on . Daw-Chih's website

React 18's Concurrent Rendering for Stress Testing: A 3D Rendering Case Study

ReactJS and the Future of AI-Powered Web Components: What Will the Future Look Like?

Optimizing Data Center Efficiency: A Deep Dive into Freecooling Techniques

Authors:
(1) Yagci, Nurce, HAW Hamburg, Germany & nurce.yagci@haw-hamburg.de;
(2) Sünkler, Sebastian, HAW Hamburg, Germany & sebastian.suenkler@haw-hamburg.de;
(3) Häußler, Helena, HAW Hamburg, Germany & helena.haeuessler@haw-hamburg.de;
(4) Lewandowski, Dirk, HAW Hamburg, Germany & dirk.lewandowski@haw-hamburg.de. Table of Links Abstract and Introduction Literature Review Objectives and Research Questions Methods Results Discussion Conclusion, Research Data, Acknowledgments, and References CONCLUSION This study provides important insights into whether, although Google is by far the most popular search engine, the use of alternatives could benefit users. Our results show that using another or more than one search engine leads to seeing more diverse search results, allowing users to inform themselves more comprehensively. It should be noted that within each search engine's results, the concentration of sources shows that only a few top sources dominate the results, meaning whichever search engine a user chooses to use will shape what sources the information they get to see comes from. RESEARCH DATA Research data is available at: https://osf.io/nt3wv/ ACKNOWLEDGMENTS This work is funded by the German Research Foundation (DFG – Deutsche Forschungsgemeinschaft; Grant No. 460676551). REFERENCES Agrawal, R. (2016). Overlap in the Web Search Results of Google and Bing. Journal of Web Science, 2(1), 17–30. https://doi.org/10.1561/106.00000005 Bar-Ilan, J. (2005). Comparing rankings of search results on the Web. Information Processing & Management, 41(6), 1511–1519. https://doi.org/10.1016/J.IPM.2005.03.008 Bar‐Ilan, J., Levene, M., & Mat‐Hassan, M. (2006). Methods for evaluating dynamic changes in search engine rankings: a case study. Journal of Documentation, 62(6), 708–729. https://doi.org/10.1108/00220410610714930 Bharat, K. (1998). A technique for measuring the relative size and overlap of public Web search engines. Computer Networks and ISDN Systems, 30(1–7), 379–388. https://doi.org/10.1016/S0169-7552(98)00127-5 Bilal, D., & Ellis, R. (2011). Evaluating Leading Web Search Engines on Children’s Queries. In Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics): Vol. 6764 LNCS (Issue PART 4, pp. 549–558). https://doi.org/10.1007/978 3-642-21619- 0_67 Cardoso, B., & Magalhães, J. (2011). Google, bing and a new perspective on ranking similarity. Proceedings of the 20th ACM International Conference on Information and Knowledge Management - CIKM ’11, 1933–1936. https://doi.org/10.1145/2063576.2063858 Chignell, M. H., Gwizdka, J., & Bodner, R. C. (1999). Discriminating meta-search: a framework for evaluation. Information Processing & Management, 35(3), 337–362. https://doi.org/10.1016/S0306 4573(98)00065-X Ding, W., & Marchionini, G. (1996). A comparative study of web search service performance. Proceedings of the ASIS Annual Meeting, 33, 136–142. https://eric.ed.gov/?id=EJ557172 Edelman Trust Institute. (2022). Edelman Trust Barometer 2022 - Global Report. https://www.edelman.com/sites/g/files/aatuss191/files/2022-01/2022 Edelman Trust Barometer FINAL_Jan25.pdf European Commission. (2016). Special Eurobarometer 447 – Online Platforms. European Commission. https://doi.org/10.2759/937517 Gini, C. (1936). On the measure of concentration with special reference to income and statistics. Colorado College Publication, General Series, 208(1), 73–79. Goel, S., Broder, A., Gabrilovich, E., & Pang, B. (2010). Anatomy of the long tail. Proceedings of the Third ACM International Conference on Web Search and Data Mining - WSDM ’10, 201. https://doi.org/10.1145/1718487.1718513 González, C. G., Bonventi, W., & Rodrigues, A. L. V. (2008). Density of Closed Balls in Real-Valued and Autometrized Boolean Spaces for Clustering Applications. In Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics): Vol. 5249 LNAI (pp. 8–22). Springer Verlag. https://doi.org/10.1007/978-3-540-88190-2_7 Höchstötter, N., & Lewandowski, D. (2009). What users see – Structures in search engine results pages. Information Sciences, 179(12), 1796–1812. https://doi.org/10.1016/j.ins.2009.01.028 Introna, L. D., & Nissenbaum, H. (2000). Shaping the Web: Why the Politics of Search Engines Matters. The Information Society, 16(3), 169–185. https://doi.org/10.1080/01972240050133634 Lawrence, S., & Giles, C. L. (1999). Accessibility of information on the web. Nature, 400(6740), 107 107. https://doi.org/10.1038/21987 Lewandowski, D. (2019). The web is missing an essential part of infrastructure. Communications of the ACM, 62(4) 24–24. https://doi.org/10.1145/3312479 Lewandowski, D., & Kammerer, Y. (2021). Factors influencing viewing behaviour on search engine results pages: a review of eye-tracking research. Behaviour & Information Technology, 40(14), 1485–1515. https://doi.org/10.1080/0144929X.2020.1761450 Lewandowski, D., & Sünkler, S. (2019). What does Google recommend when you want to compare insurance offerings? Aslib Journal of Information Management, 71(3), 310–324. https://doi.org/10.1108/AJIM-07-2018- 0172 Mager, A. (2014). Is Small Really Beautiful? Big Search and Its Alternatives. In R. König & M. Rasch (Eds.), Society of the Query Reader (pp. 59–72). Institute of Network Cultures. Makhortykh, M., Urman, A., & Ulloa, R. (2020). How search engines disseminate information about COVID-19 and why they should do better. Harvard Kennedy School Misinformation Review, 1(May), 1–12. https://doi.org/10.37016/mr-2020-017 Meng, W., Yu, C., & Liu, K.-L. (2002). Building efficient and effective metasearch engines. ACM Computing Surveys, 34(1), 48–89. https://doi.org/10.1145/505282.505284 Newman, N., Fletcher, R., Schulz, A., Andı, S., Robertson, C., & Kleis Nielsen, R. (2021). The Reuters Institute Digital News Report 2021. https://reutersinstitute.politics.ox.ac.uk/sites/default/files/2021 06/Digital_News_Report_2021_FINAL.pdf Ortega, F., Gonzalez-Barahona, J. M., & Robles, G. (2008). On the Inequality of Contributions to Wikipedia. Proceedings of the 41st Annual Hawaii International Conference on System Sciences (HICSS 2008), 304–304. https://doi.org/10.1109/HICSS.2008.333 Purcell, K., Brenner, J., & Rainie, L. (2012). Search Engine Use 2012. https://www.pewresearch.org/internet/wpcontent/uploads/sites/9/media/Files/Reports/2012/PIP_ earch_Engine_Use_2012.pdf Puschmann, C. (2019). Beyond the Bubble: Assessing the Diversity of Political Search Results. Digital Journalism, 7(6), 824–843. https://doi.org/10.1080/21670811.2018.1539626 Schultheiß, S., & Lewandowski, D. (2021). A representative online survey among German search engine users with a focus on questions regarding search engine optimization (SEO): a study within the SEO Effect project - Working Paper 2. https://osf.io/wzhxs Spink, A., Jansen, B. J., Blakely, C., & Koshman, S. (2006). A study of results overlap and uniqueness among major Web search engines. Information Processing and Management, 42(5), 1379–1391. https://doi.org/10.1016/j.ipm.2005.11.001 StatCounter. (2022). Search Engine Market Share. https://gs.statcounter.com/search-engine market-share/ Steiner, M., Magin, M., Stark, B., & Geiß, S. (2022). Seek and you shall find? A content analysis on the diversity of five search engines’ results on political queries. Information, Communication & Society, 25(2), 217–241. https://doi.org/10.1080/1369118X.2020.1776367 Sünkler, S., Lewandowski, D., Schultheiß, S., Yagci, N., Sygulla, D., & von Mach, S. (2022). Relevance Assessment Tool. osf.io/t3hg9 Thelwall, M. (2008). Quantitative comparisons of search engine results. Journal of the American Society for Information Science and Technology, 59(11), 1702–1710. https://doi.org/10.1002/asi.20834 Unkel, J., & Haim, M. (2021). Googling Politics: Parties, Sources, and Issue Ownerships on Google in the 2017 German Federal Election Campaign. Social Science Computer Review, 39(5), 844–861. https://doi.org/10.1177/0894439319881634 This paper is available on arxiv under CC 4.0 license. Authors: (1) Yagci, Nurce, HAW Hamburg, Germany & nurce.yagci@haw-hamburg.de; (2) Sünkler, Sebastian, HAW Hamburg, Germany & sebastian.suenkler@haw-hamburg.de; (3) Häußler, Helena, HAW Hamburg, Germany & helena.haeuessler@haw-hamburg.de; (4) Lewandowski, Dirk, HAW Hamburg, Germany & dirk.lewandowski@haw-hamburg.de. Authors: (1) Yagci, Nurce, HAW Hamburg, Germany & nurce.yagci@haw-hamburg.de; (2) Sünkler, Sebastian, HAW Hamburg, Germany & sebastian.suenkler@haw-hamburg.de; (3) Häußler, Helena, HAW Hamburg, Germany & helena.haeuessler@haw-hamburg.de; (4) Lewandowski, Dirk, HAW Hamburg, Germany & dirk.lewandowski@haw-hamburg.de. Table of Links Abstract and Introduction Abstract and Introduction Literature Review Literature Review Objectives and Research Questions Objectives and Research Questions Methods Methods Results Results Discussion Discussion Conclusion, Research Data, Acknowledgments, and References Conclusion, Research Data, Acknowledgments, and References CONCLUSION This study provides important insights into whether, although Google is by far the most popular search engine, the use of alternatives could benefit users. Our results show that using another or more than one search engine leads to seeing more diverse search results, allowing users to inform themselves more comprehensively. It should be noted that within each search engine's results, the concentration of sources shows that only a few top sources dominate the results, meaning whichever search engine a user chooses to use will shape what sources the information they get to see comes from. RESEARCH DATA Research data is available at: https://osf.io/nt3wv/ ACKNOWLEDGMENTS This work is funded by the German Research Foundation (DFG – Deutsche Forschungsgemeinschaft; Grant No. 460676551). REFERENCES Agrawal, R. (2016). Overlap in the Web Search Results of Google and Bing. Journal of Web Science, 2(1), 17–30. https://doi.org/10.1561/106.00000005 Bar-Ilan, J. (2005). Comparing rankings of search results on the Web. Information Processing & Management, 41(6), 1511–1519. https://doi.org/10.1016/J.IPM.2005.03.008 Bar‐Ilan, J., Levene, M., & Mat‐Hassan, M. (2006). Methods for evaluating dynamic changes in search engine rankings: a case study. Journal of Documentation, 62(6), 708–729. https://doi.org/10.1108/00220410610714930 Bharat, K. (1998). A technique for measuring the relative size and overlap of public Web search engines. Computer Networks and ISDN Systems, 30(1–7), 379–388. https://doi.org/10.1016/S0169-7552(98)00127-5 Bilal, D., & Ellis, R. (2011). Evaluating Leading Web Search Engines on Children’s Queries. In Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics): Vol. 6764 LNCS (Issue PART 4, pp. 549–558). https://doi.org/10.1007/978 3-642-21619- 0_67 Cardoso, B., & Magalhães, J. (2011). Google, bing and a new perspective on ranking similarity. Proceedings of the 20th ACM International Conference on Information and Knowledge Management - CIKM ’11, 1933–1936. https://doi.org/10.1145/2063576.2063858 Chignell, M. H., Gwizdka, J., & Bodner, R. C. (1999). Discriminating meta-search: a framework for evaluation. Information Processing & Management, 35(3), 337–362. https://doi.org/10.1016/S0306 4573(98)00065-X Ding, W., & Marchionini, G. (1996). A comparative study of web search service performance. Proceedings of the ASIS Annual Meeting, 33, 136–142. https://eric.ed.gov/?id=EJ557172 Edelman Trust Institute. (2022). Edelman Trust Barometer 2022 - Global Report. https://www.edelman.com/sites/g/files/aatuss191/files/2022-01/2022 Edelman Trust Barometer FINAL_Jan25.pdf European Commission. (2016). Special Eurobarometer 447 – Online Platforms. European Commission. https://doi.org/10.2759/937517 Gini, C. (1936). On the measure of concentration with special reference to income and statistics. Colorado College Publication, General Series, 208(1), 73–79. Goel, S., Broder, A., Gabrilovich, E., & Pang, B. (2010). Anatomy of the long tail. Proceedings of the Third ACM International Conference on Web Search and Data Mining - WSDM ’10, 201. https://doi.org/10.1145/1718487.1718513 González, C. G., Bonventi, W., & Rodrigues, A. L. V. (2008). Density of Closed Balls in Real-Valued and Autometrized Boolean Spaces for Clustering Applications. In Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics): Vol. 5249 LNAI (pp. 8–22). Springer Verlag. https://doi.org/10.1007/978-3-540-88190-2_7 Höchstötter, N., & Lewandowski, D. (2009). What users see – Structures in search engine results pages. Information Sciences, 179(12), 1796–1812. https://doi.org/10.1016/j.ins.2009.01.028 Introna, L. D., & Nissenbaum, H. (2000). Shaping the Web: Why the Politics of Search Engines Matters. The Information Society, 16(3), 169–185. https://doi.org/10.1080/01972240050133634 Lawrence, S., & Giles, C. L. (1999). Accessibility of information on the web. Nature, 400(6740), 107 107. https://doi.org/10.1038/21987 Lewandowski, D. (2019). The web is missing an essential part of infrastructure. Communications of the ACM, 62(4) 24–24. https://doi.org/10.1145/3312479 Lewandowski, D., & Kammerer, Y. (2021). Factors influencing viewing behaviour on search engine results pages: a review of eye-tracking research. Behaviour & Information Technology, 40(14), 1485–1515. https://doi.org/10.1080/0144929X.2020.1761450 Lewandowski, D., & Sünkler, S. (2019). What does Google recommend when you want to compare insurance offerings? Aslib Journal of Information Management, 71(3), 310–324. https://doi.org/10.1108/AJIM-07-2018- 0172 Mager, A. (2014). Is Small Really Beautiful? Big Search and Its Alternatives. In R. König & M. Rasch (Eds.), Society of the Query Reader (pp. 59–72). Institute of Network Cultures. Makhortykh, M., Urman, A., & Ulloa, R. (2020). How search engines disseminate information about COVID-19 and why they should do better. Harvard Kennedy School Misinformation Review, 1(May), 1–12. https://doi.org/10.37016/mr-2020-017 Meng, W., Yu, C., & Liu, K.-L. (2002). Building efficient and effective metasearch engines. ACM Computing Surveys, 34(1), 48–89. https://doi.org/10.1145/505282.505284 Newman, N., Fletcher, R., Schulz, A., Andı, S., Robertson, C., & Kleis Nielsen, R. (2021). The Reuters Institute Digital News Report 2021. https://reutersinstitute.politics.ox.ac.uk/sites/default/files/2021 06/Digital_News_Report_2021_FINAL.pdf Ortega, F., Gonzalez-Barahona, J. M., & Robles, G. (2008). On the Inequality of Contributions to Wikipedia. Proceedings of the 41st Annual Hawaii International Conference on System Sciences (HICSS 2008), 304–304. https://doi.org/10.1109/HICSS.2008.333 Purcell, K., Brenner, J., & Rainie, L. (2012). Search Engine Use 2012. https://www.pewresearch.org/internet/wpcontent/uploads/sites/9/media/Files/Reports/2012/PIP_ earch_Engine_Use_2012.pdf Puschmann, C. (2019). Beyond the Bubble: Assessing the Diversity of Political Search Results. Digital Journalism, 7(6), 824–843. https://doi.org/10.1080/21670811.2018.1539626 Schultheiß, S., & Lewandowski, D. (2021). A representative online survey among German search engine users with a focus on questions regarding search engine optimization (SEO): a study within the SEO Effect project - Working Paper 2. https://osf.io/wzhxs Spink, A., Jansen, B. J., Blakely, C., & Koshman, S. (2006). A study of results overlap and uniqueness among major Web search engines. Information Processing and Management, 42(5), 1379–1391. https://doi.org/10.1016/j.ipm.2005.11.001 StatCounter. (2022). Search Engine Market Share. https://gs.statcounter.com/search-engine market-share/ Steiner, M., Magin, M., Stark, B., & Geiß, S. (2022). Seek and you shall find? A content analysis on the diversity of five search engines’ results on political queries. Information, Communication & Society, 25(2), 217–241. https://doi.org/10.1080/1369118X.2020.1776367 Sünkler, S., Lewandowski, D., Schultheiß, S., Yagci, N., Sygulla, D., & von Mach, S. (2022). Relevance Assessment Tool. osf.io/t3hg9 Thelwall, M. (2008). Quantitative comparisons of search engine results. Journal of the American Society for Information Science and Technology, 59(11), 1702–1710. https://doi.org/10.1002/asi.20834 Unkel, J., & Haim, M. (2021). Googling Politics: Parties, Sources, and Issue Ownerships on Google in the 2017 German Federal Election Campaign. Social Science Computer Review, 39(5), 844–861. https://doi.org/10.1177/0894439319881634 This paper is available on arxiv under CC 4.0 license. This paper is available on arxiv under CC 4.0 license. available on arxiv

Exploring Benefits of Using Alternative Search Engines

Colliding Magnetospheres in The Young High-Eccentricity Binary DQ Tau: Discussion

Authors:
(1) Ritesh Sharma, University Of California, Merced, USA rsharma39@ucmerced.edu;
(2) Eric Bier, Palo Alto Research Center, USA bier@parc.com;
(3) Lester Nelson, Palo Alto Research Center, USA lnelson@parc.com;
(4) Mahabir Bhandari, Oak Ridge National Laboratory, USA bhandarims@ornl.gov;
(5) Niraj Kunwar, Oak Ridge National Laboratory, USA kunwarn1@ornl.gov. Table of Links Abstract and Intro Related Work Methodology Experiments Conclusion & Future work and References 4 Experiments We evaluated our approach to capturing 3D scans using AR headsets. We compared the floor plan dimensions with actual building dimensions and provided intermediate results: floor plans and 3D models. We also calculated the time taken for our algorithm steps. To demonstrate the approach robustness, we evaluated using multiple building types, including commercial buildings B1 and B3 and a residential building B3. Additionally, we validated our floor plan generation on the Matterport2D dataset [25]. Scanned Data Analysis We evaluated the precision of floor plan generation by comparing the actual dimensions of the rooms with the computed floor plan. Figure 10(a) illustrates the measurement of the building, which was scanned twice with our AR. We call these scans S1 and S2 (see figure 10(b) and figure 10(c)) For each scan, floor plans are computed and the dimensions are computed using geometric modeling software, Rhino [17]. We then compared the computed dimensions with the actual room dimensions as shown in Table 1. These results show the applicability of our approach to many building types. Our method can compute a floor plan even from relatively incomplete mesh data. With a higher quality HoloLens scan, the resulting floor plan is more precise. Figure 11 displays S1 results: both types of floor plan and the 3D model. Orienting floor and walls We must orient the mesh properly. Spherical k-means is compute intensive so we optimize it to get good performance. In Figure 4, we see the mesh of B1 before and after alignment, which took 12.4 seconds, of which 10.6 were spent aligning walls using spherical k-means. Partitioning into stories We can detect a multi-story building and divide it into stories with an additional step. The algorithm projects triangles onto the positive y-axis and creates a histogram showing horizontal peaks. By analyzing the peaks in the histogram, we can determine the number of stories. Figures 5 and 12 show a 2-story residential building and a multi-story model from the Matterport3D dataset [25] that were partitioned into stories. Finding planar walls To generate a drafting-style floor plan, we eliminate details and identify planar walls. The modified DBSCAN algorithm is the most time-consuming step. In the model of Figure 13, with 79,931 vertices and 134,235 faces, it took 27.4 seconds to prepare the data and run DBSCAN and an additional 3.79 seconds to construct flat walls from the generated clusters. For the residential building of Figure 14, with 173,941 vertices and 285,840 faces, it took 76 seconds to prepare and run DBSCAN and 23.36 seconds to compute flat walls. The results for a Matterport3D model appear in Figure 15. Generating the floor plan The final step of our floor plan generation is to slice the mesh at different heights and superimpose the slices. Figures 13, 14, and 15 show floor plans generated using our approach. We conducted experiments to evaluate the effects of changing graphical settings when rendering pen-and-ink floor plans. Each setting consists of a different combination of line segment opacity and slice count. We found that an opacity setting of 0.5 produced a floor plan that met our expectations. We also found that a floor plan with 100 slices provided a good balance between level of detail and clutter reduction. Optimal numbers will depend on use case. This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. Authors: (1) Ritesh Sharma, University Of California, Merced, USA rsharma39@ucmerced.edu; (2) Eric Bier, Palo Alto Research Center, USA bier@parc.com; (3) Lester Nelson, Palo Alto Research Center, USA lnelson@parc.com; (4) Mahabir Bhandari, Oak Ridge National Laboratory, USA bhandarims@ornl.gov; (5) Niraj Kunwar, Oak Ridge National Laboratory, USA kunwarn1@ornl.gov. Authors: Authors: (1) Ritesh Sharma, University Of California, Merced, USA rsharma39@ucmerced.edu; (2) Eric Bier, Palo Alto Research Center, USA bier@parc.com; (3) Lester Nelson, Palo Alto Research Center, USA lnelson@parc.com; (4) Mahabir Bhandari, Oak Ridge National Laboratory, USA bhandarims@ornl.gov; (5) Niraj Kunwar, Oak Ridge National Laboratory, USA kunwarn1@ornl.gov. Table of Links Abstract and Intro Abstract and Intro Related Work Related Work Methodology Methodology Experiments Experiments Conclusion & Future work and References Conclusion & Future work and References 4 Experiments We evaluated our approach to capturing 3D scans using AR headsets. We compared the floor plan dimensions with actual building dimensions and provided intermediate results: floor plans and 3D models. We also calculated the time taken for our algorithm steps. To demonstrate the approach robustness, we evaluated using multiple building types, including commercial buildings B1 and B3 and a residential building B3. Additionally, we validated our floor plan generation on the Matterport2D dataset [25]. Scanned Data Analysis We evaluated the precision of floor plan generation by comparing the actual dimensions of the rooms with the computed floor plan. Figure 10(a) illustrates the measurement of the building, which was scanned twice with our AR. We call these scans S1 and S2 (see figure 10(b) and figure 10(c)) For each scan, floor plans are computed and the dimensions are computed using geometric modeling software, Rhino [17]. We then compared the computed dimensions with the actual room dimensions as shown in Table 1. These results show the applicability of our approach to many building types. Scanned Data Analysis Our method can compute a floor plan even from relatively incomplete mesh data. With a higher quality HoloLens scan, the resulting floor plan is more precise. Figure 11 displays S1 results: both types of floor plan and the 3D model. Orienting floor and walls We must orient the mesh properly. Spherical k-means is compute intensive so we optimize it to get good performance. In Figure 4, we see the mesh of B1 before and after alignment, which took 12.4 seconds, of which 10.6 were spent aligning walls using spherical k-means. Orienting floor and walls Partitioning into stories We can detect a multi-story building and divide it into stories with an additional step. The algorithm projects triangles onto the positive y-axis and creates a histogram showing horizontal peaks. By analyzing the peaks in the histogram, we can determine the number of stories. Figures 5 and 12 show a 2-story residential building and a multi-story model from the Matterport3D dataset [25] that were partitioned into stories. Partitioning into stories Finding planar walls To generate a drafting-style floor plan, we eliminate details and identify planar walls. The modified DBSCAN algorithm is the most time-consuming step. In the model of Figure 13, with 79,931 vertices and 134,235 faces, it took 27.4 seconds to prepare the data and run DBSCAN and an additional 3.79 seconds to construct flat walls from the generated clusters. For the residential building of Figure 14, with 173,941 vertices and 285,840 faces, it took 76 seconds to prepare and run DBSCAN and 23.36 seconds to compute flat walls. The results for a Matterport3D model appear in Figure 15. Finding planar walls Generating the floor plan The final step of our floor plan generation is to slice the mesh at different heights and superimpose the slices. Figures 13, 14, and 15 show floor plans generated using our approach. Generating the floor plan We conducted experiments to evaluate the effects of changing graphical settings when rendering pen-and-ink floor plans. Each setting consists of a different combination of line segment opacity and slice count. We found that an opacity setting of 0.5 produced a floor plan that met our expectations. We also found that a floor plan with 100 slices provided a good balance between level of detail and clutter reduction. Optimal numbers will depend on use case. This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. available on arxiv

Using Scanned Mesh Data for Auto-Digitized 3D Modeling: Experiments

By now, most of us are accustomed to using CSS Custom Properties on projects. Since its introduction in 2017, CSS Custom Properties, also known as CSS variables, have optimised the code we work with and allowed engineers a finer degree of control when managing values within rules. CSS Custom Properties can be tricky to deal with and aren’t always as intuitive as one might hope. However, when used right, they can significantly reduce boilerplate code and keep things efficient, making our work more productive. While the approach below is not perfect, it works well when writing CSS for building projects. Why Use CSS Custom Properties As far as my experience goes, I can only think of three possible reasons to implement a CSS Variable: We want to use a given value in more than one place,


We know that a value will change in the future and want to reduce our efforts for refactoring,


We need to store dynamic values from JS execution. With this in mind, we can be more assertive about our use cases. Point 3 is less of a concern for this article, but points 1 and 2 are essential. Let's illustrate this using the familiar HTML button element. The Infamous Button Buttons are notoriously tricky to style consistently for such a simple HTML element. Perhaps it’s because they have several different states and applications, regardless - it's usually the first component we Frontend Engineers take on when it comes to a fresh build. Let's have a look at how we could write the style for a button using CSS Custom Properties: :root {
 --color-primary: purple;
 --color-text: black;
 --color-text-inverted: white;
 --color-border: gray;
}

.button {
 --button-bg: var(--color-primary);
 --button-color: var(--color-text-inverted);
 --button-border: var(--color-border);

 align-items: center;
 background-color: var(--button-bg);
 border: 1px solid var(--button-border);
 color: var(--button-color);
 display: inline-flex;
 line-height: 1;
} As far as this example goes, from a technical standpoint, it’s great. It’s clean and straightforward and would get a 👍 from me in a code review. But could we optimise it further? Well, yes. The var() function in CSS is pretty nifty…we’re used to using it in a somewhat one-dimensional way by just rendering out a value; however, it can be more dynamic. The way to do this is by using a fallback value. If we considered the above example, we could rewrite it like so: :root {
 --color-primary: purple;
 --color-text: black;
 --color-text-inverted: white;
 --color-border: gray;
}

.button {
  align-items: center;
  background-color: var(--button-bg, var(--color-primary));
  border: 2px solid var(--button-border, var(--color-border));
  color: var(--button-color, var(--color-text-inverted));
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  padding-block: 0.875rem;
  padding-inline: 1rem;
} This is far cleaner and will lead to the same outcomes as the previous example - with less boilerplate code. Overriding it in a variation makes each locally scoped CSS Variable (effectively) optional. We can easily now optionally define the variables defined in .button as separate variations: .button:where(.button-secondary) {
  --button-bg: orange;
  --button-border: teal;
}

.button:where(.button-tertiary) {
  --button-bg: teal;
  --button-border: orange;
} Although this technique is not revolutionary, we care how many lines of compressed text are heading over the wire. The less physical memory a CSS file takes up, the better, which ultimately translates to how many lines of CSS exist. In the first example, we’re looking at almost double the amount of code to achieve the same thing in our optimised example. This compound effect has an influential impact on performance and further improves readability and developer experience. If you'd like to play around a bit further, feel free to fork the following Code Pen: https://codepen.io/iamdainemawer/pen/NWmQZMz Support Since April 2017, according to Google Baseline, this feature is well-supported across all major browsers. If you're interested to learn more about Baseline, read my post about Google Baseline and Its Impact You can check for browser support by adding the following statement to your CSS stylesheets: @supports(--css: variable) {} Can I Use - CSS Nesting
CSS Specification - CSS Nesting Module Resources MDN - CSS Custom Properties
CSS Variables Polyfill By now, most of us are accustomed to using CSS Custom Properties on projects. Since its introduction in 2017, CSS Custom Properties, also known as CSS variables, have optimised the code we work with and allowed engineers a finer degree of control when managing values within rules. CSS Custom Properties can be tricky to deal with and aren’t always as intuitive as one might hope. However, when used right, they can significantly reduce boilerplate code and keep things efficient, making our work more productive. While the approach below is not perfect, it works well when writing CSS for building projects. Why Use CSS Custom Properties As far as my experience goes, I can only think of three possible reasons to implement a CSS Variable: We want to use a given value in more than one place, We know that a value will change in the future and want to reduce our efforts for refactoring, We need to store dynamic values from JS execution. We want to use a given value in more than one place, We want to use a given value in more than one place, We know that a value will change in the future and want to reduce our efforts for refactoring, We know that a value will change in the future and want to reduce our efforts for refactoring, We need to store dynamic values from JS execution. We need to store dynamic values from JS execution. With this in mind, we can be more assertive about our use cases. Point 3 is less of a concern for this article, but points 1 and 2 are essential. Let's illustrate this using the familiar HTML button element. The Infamous Button Buttons are notoriously tricky to style consistently for such a simple HTML element. Perhaps it’s because they have several different states and applications, regardless - it's usually the first component we Frontend Engineers take on when it comes to a fresh build. Let's have a look at how we could write the style for a button using CSS Custom Properties: :root {
 --color-primary: purple;
 --color-text: black;
 --color-text-inverted: white;
 --color-border: gray;
}

.button {
 --button-bg: var(--color-primary);
 --button-color: var(--color-text-inverted);
 --button-border: var(--color-border);

 align-items: center;
 background-color: var(--button-bg);
 border: 1px solid var(--button-border);
 color: var(--button-color);
 display: inline-flex;
 line-height: 1;
} :root {
 --color-primary: purple;
 --color-text: black;
 --color-text-inverted: white;
 --color-border: gray;
}

.button {
 --button-bg: var(--color-primary);
 --button-color: var(--color-text-inverted);
 --button-border: var(--color-border);

 align-items: center;
 background-color: var(--button-bg);
 border: 1px solid var(--button-border);
 color: var(--button-color);
 display: inline-flex;
 line-height: 1;
} As far as this example goes, from a technical standpoint, it’s great. It’s clean and straightforward and would get a 👍 from me in a code review. But could we optimise it further? Well, yes. The var() function in CSS is pretty nifty…we’re used to using it in a somewhat one-dimensional way by just rendering out a value; however, it can be more dynamic. The way to do this is by using a fallback value . var() fallback value If we considered the above example, we could rewrite it like so: :root {
 --color-primary: purple;
 --color-text: black;
 --color-text-inverted: white;
 --color-border: gray;
}

.button {
  align-items: center;
  background-color: var(--button-bg, var(--color-primary));
  border: 2px solid var(--button-border, var(--color-border));
  color: var(--button-color, var(--color-text-inverted));
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  padding-block: 0.875rem;
  padding-inline: 1rem;
} :root {
 --color-primary: purple;
 --color-text: black;
 --color-text-inverted: white;
 --color-border: gray;
}

.button {
  align-items: center;
  background-color: var(--button-bg, var(--color-primary));
  border: 2px solid var(--button-border, var(--color-border));
  color: var(--button-color, var(--color-text-inverted));
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  padding-block: 0.875rem;
  padding-inline: 1rem;
} This is far cleaner and will lead to the same outcomes as the previous example - with less boilerplate code. Overriding it in a variation makes each locally scoped CSS Variable (effectively) optional. We can easily now optionally define the variables defined in .button as separate variations: .button:where(.button-secondary) {
  --button-bg: orange;
  --button-border: teal;
}

.button:where(.button-tertiary) {
  --button-bg: teal;
  --button-border: orange;
} .button:where(.button-secondary) {
  --button-bg: orange;
  --button-border: teal;
}

.button:where(.button-tertiary) {
  --button-bg: teal;
  --button-border: orange;
} Although this technique is not revolutionary, we care how many lines of compressed text are heading over the wire. The less physical memory a CSS file takes up, the better, which ultimately translates to how many lines of CSS exist. In the first example, we’re looking at almost double the amount of code to achieve the same thing in our optimised example. This compound effect has an influential impact on performance and further improves readability and developer experience. If you'd like to play around a bit further, feel free to fork the following Code Pen: https://codepen.io/iamdainemawer/pen/NWmQZMz https://codepen.io/iamdainemawer/pen/NWmQZMz Support Since April 2017, according to Google Baseline , this feature is well-supported across all major browsers. If you're interested to learn more about Baseline, read my post about Google Baseline and Its Impact Google Baseline Google Baseline and Its Impact You can check for browser support by adding the following statement to your CSS stylesheets: @supports(--css: variable) {} @supports(--css: variable) {} Can I Use - CSS Nesting CSS Specification - CSS Nesting Module Can I Use - CSS Nesting Can I Use - CSS Nesting CSS Specification - CSS Nesting Module CSS Specification - CSS Nesting Module Resources MDN - CSS Custom Properties CSS Variables Polyfill MDN - CSS Custom Properties MDN - CSS Custom Properties CSS Variables Polyfill CSS Variables Polyfill

Stories, News & Mentions about RENTERII

Renterii’s Stories on HackerNoon