Categories
Cloud Entrepreneurship General Topics and tips Management and Projects NiHao Cloud Documentation Products Storage Tools & How-Tos

Enhance Team Productivity with Web Office

With great powers comes great responsibilities.!”. In this revolutionary internet and data-driven era, everything is much handier and easily accessible. But this can turn into a curse if proper management is not present. If you want to achieve personal and business goals, the management of your data and resources is one of the key aspects. Web office solutions are one of the most effective the answer to sorting all the mess in your environment. Here at our company we are betting on this feature for helping our customers.

Web based collaboration
credits

What does Web Office mean?

A web office is a bundle of various tools hosted by the service providers that allow users to share and collaborate on a broad set of information and documentation. Besides, such SaaS(Software-as-a-service) products help improving team collaboration.

Web office components normally include spreadsheets, word docs, portal and content management systems, emails, calendars, accounting applications, and many more…

Key differences between Desktop and Cloud-based collaboration services:
  • For cloud-based service, one doesn’t need to invest upfront in the hardware and maintenance whereas, in desktop-based solutions, the whole workflow is dependent on the management team. So, cloud-based solutions are cost-effective.
  • For web-based collaboration services, the sky is the limit of storage. In other words, the tenant gets nearly infinite storage.
  • No licensing and software upgrading required in managed service. However, it’s the opposite in desktop-based usage.
  • Web office is portable and accessible anytime anywhere. Teams can collaborate across the globe. By the way I also mean you can access using any device with a web browser; phone, laptop, table, PC, etc.
  • Higher data durability and availability are provided in a web-based solution. It indeed becomes a tedious job to maintain such in desktop-based solution.

Undoubtedly, the web office holds an upper hand in current industry needs and aligns exactly with the requirements. Depending on the needs and size of the organization, choose the right plan and external integration strategies to enhance the productivity of your teams. Sesame Disk as a file sharing service, provides such solutions and ticks all the boxes of what a team collaboration needs.

Hits: 3

Categories
Cloud NiHao Cloud Documentation Products Sotfware & Developers & DevOps Storage Tools & How-Tos

Lazy Loading: Intro

This post has been updated on May 31, 2021.

“A picture is worth a thousand words”. Graphical representation has the ability to impact straight to us and can deliver the intention on point. Do we still need examples like the shinchan cartoon to prove that images can turn conscious human beings into crazy heads? The portion of images and videos in typical web content is significant. And there is no doubt at all of removing such content just for the sake of site performance. Luckily, we have solutions like lazy loading that in a certain context.

Well, there is a cost to having graphical content and soaks huge bandwidth. More importantly, it costs both users and servers in terms of data capturing and bandwidth consumption. And project managers may be unwillingly to cut media resources from applications and end up being in frustrated debates on the optimization of the application. Here comes the lazy load technique.

Lazy load animation
credits

What is Lazy Loading?

Simply, lazy loading means loading the content only when the users need them to display. This means we can delay the loading of the object until the point where we need it. The user won’t have to wait for the elements on the page to load and start working. This leads to potentially save gigabytes of data over high traffic. For example, if a webpage has an image that the user has to scroll down to see, you can display the placeholder initially and lazy load the full image when the user arrives at that location.

As the user scrolls down the page, the image placeholders start coming into the viewport (visible part of the webpage). We trigger the load for these images when they become visible. Google lighthouse is one useful tool to analyze and shortlist the candidate images to implement the approach of lazy loading.

Implementing lazy loading

Usually, lazy loading is implemented in two ways. One is to bind it with the “image” tag and the other is to add the “background” properties. In HTML, the “src” tag triggers the loading of the object at the instance of the request. So whether it is a cover image or footer image, it will be preloaded. As an alternative, use the “data-src” keyword to eliminate upfront loading.
Example: <img data-src="reference to image">

Now let’s move to another way which is using background attributes in CSS. For the “background-image” keyword in CSS, the browser needs to build the Document Object Model and CSS Model to detect that the style is to be applied to the current object or not. If the condition does not apply to an element, then the browser does not load the background image. So here we can put the condition of the viewport and enable loading of images only when it is inside the viewport.

How to know when to trigger the loading?

Now, we’ve to implement when to load the media content. For this, we can use JavaScript event listeners like on scroll, orientation change. When either of the events occurs, we can easily detect that the lazy-loaded images are not yet triggered for loading. So, using the viewport of the screen size we can set the condition that if the image has entered the viewport then invoke the “src” tag and eventually trigger the loading. And once the image is loaded, release the event listeners. Find the below example for reference:

Intersection Observer API is also an efficient and simple way to detect when an element enters the viewport and take actions accordingly. We bind the observer on all images and once the API detects the object in the parameter of the viewport, using the “isIntersecting” property apply the “src” tag on the images to be loaded. Once done, remove the observer from the image. Find below pen for reference:

If we compare both the Event method and Intersection Observer method, we would find that the Intersection method is much more flexible and quicker and gives better performance. While the event method may come with slight variations. However, the intersection observer API is not yet available in all the mediums.

Lazy loading presents a great performance benefit for larges sites like e-commerce vendors where they may need to load thousands of product images. In the latest updates, chromes browser has started supporting lazy loading as a native feature. So, the developer only has to put the relevant attributes and embed them with images.

Benefits of implementing lazy loading in your app:

Improving initial loading time: This approach decreases the wright of payload and allows quicker response

Bandwidth conservation: Only the requested data is loaded that implies saving of data.

Resource conservation: We can save server and use resources on a very large scale because we enable rendering of only required content

jQuery lazy, lazysizes, yall.js, Magento lazy loader, WordPress lazy load, Shopify lazy plugin are some of the popular plugins/libraries which we can use and implement this approach.

The simplest way to test lazy loading is working or not is to analyze the loading order. In Chrome, navigate to Inspect site => Network => images and refresh the page to fetch the whole timeline. Test the lazy loading by scrolling and observing the loading time.

It’s time to get lazy, folks! Lazy load is seriously uncontroversial in the concern of performance. Many customers at Sesame Disk have fairly adopted such an approach in their environments and have got considerably good results.

Hits: 28