Nearly half of firms to increase investments in IoT despite the impact of Covid-19

Nearly half of firms to increase investments in IoT despite the impact of Covid-19:

Gartner research finds that a third of companies that have implemented IoT will likely have implemented AI in conjunction, with at least one IoT project with digital twins also a key driver, by 2033

Despite the disruptive impacts of the Covid-19 lockdown, with 35% of organisations reducing their investments in the internet of things (IoT), a larger number of are now planning to invest more in IoT implementations to reduce costs among other benefits, according to research from Gartner.

The analyst’s study, Survey analysis: Covid-19 use cases are driving IoT adoption, powered by innovations like AI and digital twins, was conducted online from June through July 2020, with 402 respondents across the US, the UK, Germany, Australia, Singapore and India.

It found that 47% of businesses plan to increase their investments in IoT, with a main reason behind the increase being that while companies have a limited history with IoT, IoT implementers produce a predictable return on investment (ROI) within a specified timeframe.

“They use key performance indicators [KPIs] to track their business outcomes and, for most of them, they also specify a timeframe for financial payback of their IoT investments, which is three years on average,” said Benoit Lheureux, research vice-president at Gartner.

Gartner also noted that as IoT investments are relatively new, most companies have plenty of low-hanging fruit cost-saving opportunities to pursue, such as predictive maintenance on commercial and industrial assets like elevators or turbines, and optimisation of processes such as increasing manufacturing yield.

As a result of Covid-19, 31% of survey respondents said that they use digital twins to improve their employee or customer safety, such as the use of remote asset monitoring to reduce the frequency of in-person monitoring for hospital patients and mining operations, for example.

The survey showed that 27% of companies plan to use digital twins as autonomous equipment, robots or vehicles.

“Digital twins can help companies recognise equipment failures before they stall production, allowing repairs to be made early or at less cost,” added Lheureux. “Or a company can use digital twins to automatically schedule the repair of multiple pieces of equipment in a manner that minimises impact to operations.”

Gartner expects that by 2023, one-third of mid to large-sized companies that applied IoT will have implemented at least one digital twin associated with a Covid-19-motivated use case.


Another consequence, said the report, was that the enforcement of safety measures has also fuelled the adoption of artificial intelligence (AI) in the enterprise. Surveyed organisations said they have applied AI techniques in a pragmatic manner.

A quarter of firms were found to favour automation through remote access and zero-touch management, while 23% are choosing procedure compliance (safe automation measures) to reduce Covid-19 safety concerns.

The analyst pointed out that organisations can monitor work areas using AI-enabled analysis of live video feeds to help enforce safe social distancing compliance in high-traffic areas such as restaurants and manufacturing lines.

Gartner expects that by 2023, a third of companies that have implemented IoT will also have implemented AI in conjunction with at least one IoT project.

Offering comment on the research, Erik Brenneis, IoT director at Vodafone Business, said: “IoT technology has made a huge difference during the Covid-19 crisis, while more broadly businesses are really starting to see its benefits.

“Our recent IoT spotlight report found that 87% of organisations see IoT as vital for future success, and 77% of adopters increased the pace of IoT projects during the pandemic.

“It is no longer just about providing cost savings, it is changing the way that businesses think and operate and providing an opportunity to re-design operations and future-proof business models. It is now an essential technology for businesses of all sizes that want to be resilient, more flexible and quicker to adapt and react to change.”

from Tumblr

The disruptive impact of COVID-19 on warehouse automation

The disruptive impact of COVID-19 on warehouse automation:

The pandemic has had mixed effects on warehouse automation. Learn why this has been the case and what warehouse leaders say are important takeaways

The COVID-19 pandemic has profoundly disrupted warehouse operations and automation holds some promise, although it’s not always a straightforward or easy solution.

As a result of the pandemic, online distribution has shifted into even higher gear, while other retail channels have slowed even more. Warehouse leaders must now cope with moving more products while maintaining social distancing guidelines. Although the current circumstances demonstrate the value of warehouse automation, enterprises that are further behind on their automation journey face a variety of challenges in implementing automation remotely.

COVID-19 has had a minimal impact on warehouses that are truly automated inside the wall of the distribution center, said Bernie Donachie, a managing director and global supply chain lead at Protiviti, a global consulting firm. However, it has profoundly affected predictive analytics.

“The response to COVID-19 in some markets has created shortages and excesses that organizations were not prepared for,” he said.

The push to ensure social distancing has also driven more efforts to automate and reduce person-to-person interactions.

Greater existing automation a competitive edge

For companies further along in their automation journey, the pandemic has created more availability for projects that ultimately affect warehouses.

Take the example of Netherlands-based plumbing wholesaler Van Marcke.

COVID-19 has not had a significant impact on the company’s warehouse operations because they were already highly automated, said Stijn. Hoegaerts, IT director at the company.

About two-thirds of Van Marcke’s SKUs were already residing in a fully automated warehouse and these are delivered by automated guided vehicles to stations where workers pack parcels, he said. This process helped maintain social distancing, a key component of warehouse safety.

However, the pandemic has given Van Marcke some room to focus on other projects. Since IT projects have stalled at many companies, more consultants are available on the market – often at a lower fee than previously.

“In the past we would have to postpone projects because we didn’t have the staff,” Hoegaerts said. “Now that more consultants are available, we can go faster on certain projects, which is a positive thing in the current context.”

The ability to focus on new projects has been helpful as the wholesaler has had to pivot in the wake of major distribution channels shifts. The do-it-yourself chains in the Netherlands, which were the biggest sales channels, have all closed. On the other hand, online orders have boomed. In response, Van Marcke had to make some changes to the way it managed online orders on behalf of third parties to capture more of this business.

“So many of our business customers were shifting to an online model that drop shipment became more important,” Hoegaerts said.

The company also tested the waters of the Mendix low-code technology platform to quickly develop a contact tracing app for employees, he said.

In the Netherlands, privacy regulations have prevented the rollout of nationwide tools. This internal app allowed Van Marcke to roll out a private application. It makes it easy for employees to tag colleagues and even neighbors they have been in contact with, while still maintaining the privacy of the employee and their contacts. The contact tracing app allowed employees to come to work with the knowledge they could quickly respond to mitigate the spread of a local outbreak.

Deploying warehouse automation a heavy lift

Different kinds of automation implementations require different levels of effort and skill.

“Traditional conveyor and sortation solutions are not quickly deployable as they require a large amount of data evaluation and design to ensure the desired ROI,” said Philippe Gautrin, CEO of Generix, a warehouse management system vendor.

Additionally, project timelines are longer due to the nature of the construction of such approaches. Other technologies, such as autonomous robots, are easier to deploy remotely because they can be fine-tuned without as much need for an expert to travel to the site, but they are also a serious undertaking.

“Introducing automation into operations for the first time is a big change for companies and can be daunting, especially amid economic uncertainties,” said Lior Elazary, co-founder and CEO at InVia Robotics.

Many enterprises are adopting tools that help guide the efficient routing of people through a warehouse before investing in more disruptive technologies like autonomous robots.

Implementing remotely due to COVID-19

One issue brought on by COVID-19 is the challenge of remote implementations.

For example, InVia has had to work with enterprises virtually to design the right system and deploy the software and robots.

“Now it’s not possible for us to have our people on-site due to travel restrictions and limits to the number of people who can be in the warehouse,” Elazary said.

InVia has had several successes in these remote efforts, he said.

“It was always possible, but it took a force of nature to push us into adopting it as a way of life,” Elazary said.

The pandemic has forced InVia’s leaders to refine the written instructions on how to troubleshoot and solve issues that come up. They have also turned to conferencing apps to help sort out any issues that come up with installations by using video to better understand any problems a customer may be having and providing remote guidance to solve these.

Risk to operations

Organizations need to advance cautiously when migrating to new warehouse automations.

This was illustrated starkly in October, when pharmaceutical giant Roche Diagnostics UK and Ireland reported to the U.K. government and local media sources that it ran into significant problems when migrating their U.K. fulfillment operations to an automated warehouse. The problems resulted in two- to three-week delays across their U.K. operations – including critical COVID-19 testing supplies.

In the wake of these problems, the company is prioritizing its commitment to supply COVID-19 tests, said Geoff Twist, general manager of Roche Diagnostics UK and Ireland.

Few organizations can afford delays, so leaders need to be conscious of the risk.

“Anytime an organization is undergoing systemic changes, such as the replacement of critical components of software systems or changes in infrastructure, such as changing equipment and buildings, there is additional risk brought on by changes and unforeseen events,” said Roberto Valdez, director of cybersecurity at Kaufman Rossin, a professional services firm.

Organizations are responding to pressure to make warehouses more efficient – and quickly – which leaves them exposed at a time when they’re already vulnerable. This means that unanticipated events and combinations of risk scenarios may occur and larger than normal failures may increase at a time when there is already high pressure.

Large-scale failures are fortunately not as common as smaller-scale failures, Valdez said.

“However, due to the multiple pressures already brought on by the COVID pandemic, larger-scale events may increase,” he said.

The big takeaway from the Roche incident is the need to create and test contingency plans in order to shore up defenses against the possibility of increased failures to come. It’s also important to consider the possibility that new digital transformation efforts could adversely affect productivity in the short run.

While proven and well-accepted warehouse technology and automation practices have gained traction since COVID-19, enterprises have been reluctant to test new innovations, said Chris Domby, vice president of supply chain at Ware2Go, a fulfillment network.

A measured approach to warehouse automation critical

The implementation of advanced automation applications requires careful consideration of how automation will impact people and what they need to do in key warehouse routines.

Automated technology implementations that move too quickly or that lack a staged approach overlook humans’ role in the process, said Kevin Beasley, CIO at VAI, an enterprise management software provider.

“The overnight transformation of workers’ roles and other key operational elements is an unrealistic aspiration because it doesn’t take into account the critical role humans play in the manufacturing supply chain,” Beasley said. “So, whether you’re automating a single line or rolling out an automated refresh of your entire warehouse operation, the implementation imperative remains the same – adopt a measured approach that enables you to properly align automation with human activity in the warehouse.”

from Tumblr

How to Improve your Website’s Speed

How to Improve your Website’s Speed:

If you’re wondering why your website conversion rate is painfully low after investing a lot of time (and money) into it, then you probably haven’t considered its page speed.

Did you know that a whopping 1% of a business’s revenue is lost for every second a page takes to load? With statistics like that, there’s no denying that page speed has a lot to do with the success of your business. Find a website designer near you.

Unfortunately, improving your website’s speed is harder than you might think. There are multiple reasons why your website load time could be struggling. Here are five tried and tested ways that are effective in tackling the issue. 


The internet has given businesses a unique opportunity to reach customers across all corners of the globe. However, delivering great web performance and user experience across continents can be tricky. That’s where a Content Delivery Network (CDN) comes in. A CDN distributes your website in servers located in different regions of the world, reducing the distance the information travels to the end-user. Cloudflare is one of the most recognized CDN providers, but there are many other options available. 

Get rid of pop-ups 

If you think the only purpose of pop-ups is to irritate users with annoying and irrelevant spammy ads, then think again. In the contemporary world of web design, they are regularly used by businesses as a form of promotion. While they can prove effective for promotional purposes, they need to be loaded on top of your website content, reducing the overall page speed. 

Google PageSpeed

Google PageSpeed is a handy tool that analyses your website’s page speed performance. It will dissect all of the factors affecting your page load speed, displaying it in a simple rating out of 100 formats. The lower the score, the more issues you have to deal with. Bear in mind that many of the problems identified are pretty technical, so you may need someone with knowledge of website technicalities on hand to interpret it for you. 

Image optimization 

Images are often a major culprit for sites with slow page speed. Heavy visual content on websites, including motion graphics, images, and videos, could contribute to your slow load time. Rather than removing your images, you can always optimize them. You can do this by choosing the right file format, image resizing, and reducing image dimensions. You can also find an abundance of free image optimization tools online to do the legwork for you, such as Adobe Photoshop, or JPEG optimizer. 

Keep redirects to a minimum 

Every time a page redirects to a new page, this will add waiting time for the user as the HTTP request-response cycle completes. While redirects send users to the correct pages on your website, they can significantly slow down your page speed. By reducing the number of redirects on your website, you can improve its page speed considerably. 

In summary 

By carrying out frequent audits of your website speed, you can keep on top of its performance and take action when you need to. However, if you’re not accustomed to the technicalities of websites you might need to get a web designer or web developer in to identify and tackle the issue, especially as the root of the problem causing your page to load slowly isn’t always obvious.

However, the above points should set you on the right path to identifying the problem so you can start to resolve the issue yourself.

from Tumblr

10 Best WordPress Donation Plugins

10 Best WordPress Donation Plugins:

 Non-profit organizations and individuals often participate in fundraising, welfare, or donation activities because they deeply feel for society’s particular issues. This doesn’t need to be necessarily confined to world problems like poverty, education, healthcare, or nursing homes. While many noble initiatives and individuals are working towards solving these issues, some businesses manage to support their local artisans by selling their products. For instance, if an online marketplace is selling handmade products from a particular brand, they could include additional fees for all their products that would directly go to that particular item’s maker charity of choice. These fees can be optional or required based on the company’s model.

Hence donations are not only about asking people for their money with no value in return. There are many sentimental, emotional, and monetary rewards that are associated with the process. If you are someone who wishes to include an option for donation on your WordPress website, you could make use of these 10 best donation plugins for WordPress websites:

1. WPForms:

This is an ideal donation plugin for any beginner user who has just started using WordPress. It uses an easy drag and drop form builder that allows the user to create an aesthetic and relevant form in no time. If you need more assistance, they also have a pre-built form template that can help you make the online donation form by changing the title tags to suit your cause. Many non-profits or small charities don’t necessarily require a heavily featured giveaway platform. Their requirements can be matched with a simple donation form that has the capability of accepting one time as well as recurring donations.

This plugin is ideal for that. It is integrated with Stripe and PayPal. This allows you to collect donations through credit cards on your website securely. It also makes the user trust you for providing such authentic payment methods. WPForms is a very all-inclusive form builder. Hence it can be used for survey forms, email newsletter sign-up forms, polls, and volunteer sign-up forms.

This plugin supports all the important CRM platforms and email marketing services like SendinBlue, MailChimp, AWeber, and Constant Contact. However, you would need to invest in payment add-ons for accepting online donations.

2. GiveWP:

GiveWP is a widely recognized WordPress plugin that helps non-profits receive donations and raise funds for their cause. It is one of the few wholesome donation plugins that have many donation-related features. You can easily create a tailored donation form on WordPress that would enable you to set up one-time and recurring donations. There are many payment getaways that you can use with this donation plugin – 2Checkout, Mollie, PayFast, Paymill, Stripe, PayPal, and many more.

You can take it even further and have donation processes customized with donation tributes like “in honor of,” campaign level donation goals, currency switcher options, donation receipts, multi-level donations, and more.  This plugin also provides the user with a donor management area that has full-featured reporting. This helps you manage all the online and offline donations with ease. You also don’t need to worry about integration issues with any major email marketing services, as GiveWP has an integration option for most of them.

Suppose you have WooCommerce enabled on your website, and you run an online store. Then you can add a GiveWP donation plugin that would enable you to add a donation upsell when you reach the checkout screen. It also comes with a seamless Google Analytics integration support that has enhanced eCommerce tracking.

3. WP Crowdfunding:

It is one of the most powerful donation plugins for a WordPress website. It helps you start a fundraising site like Kickstarter or GoFundMe.  This campaign style can be used either for your charity or to provide a collective fundraising platform for all charities in your network.

The plugin smoothly functions with PayPal,, Stripe, and all WooCommerce gateways. They also have a native wallet system that lets the user track pledges for all campaigns and distribute the funds to all individual stakeholders accordingly. Suppose your goal is to create a collective crowdfunding website like GoFundMe. In that case, you can also charge some commission fees for helping other campaigns collect donations.

4. Seamless Donations:

This is not one of the most feature-packed donation plugins, and it is not even trying to be. This donation plugin gives the user full control to gather and manage donations all within the WordPress dashboard.  This plugin works very smoothly with PayPal, enabling your users to make contributions using their PayPal accounts or credit cards.

You can accept one time as well as recurring donation payments. Moreover, you can give the users the choice of the campaign they want to allocate their funds. It charges no transaction fees on your donors’ amount or from you. You can give your donors an option to make their donations automatically repeating. You can also do tributes using seamless donations where you can add ‘in memory of’ or even ‘in honor of’ so that the honoree and the person notified when the donation gets done. Other than this, you can also gift aid if you are from the UK. Once you select your country like the UK, Gift Aid gets automatically enabled.

5. Donorbox:

This is another capable donation plugin for any WordPress website. It can also work on standalone websites. This plugin allows you to set up one-time, weekly, monthly, and annual recurring contributions. The user can also use the option for company gift matching and accepting company donations. Your users would be able to donate using any payment form – Apple Pay, PayPal Express, ACH bank payments, One-Touch, and more.

It has many additional powerful features that enhance the plugins’ capabilities. You get a powerful goal meter, donation popup forms, donor wall, donor management, multi-currency support, and more. You can collect free donations up to $1000 per month. However, any contributions above that would require the user to pay a platform fee of 1.5%. Now you can choose to defer this fee to your users or pay it yourself. They do have to incur charges that might be missing on other plugins mentioned here. However, they are also good at taking all the technical headaches away from you and the payment infrastructure’s security.

6. Donation Thermometer:

This is an exciting WordPress donation plugin. As the name suggests, it uses a thermometer style illustration that displays the collected funds and your target amount. This is a visual reference to how close or far you are from your target. As they visit your site and see your campaign, the users could be urged to donate to the cause to see that the covered amount goes up. As it would increase with their contribution, they would feel good about it.

The thermometer itself is entirely customizable. You can change the fonts, the colors, meter size, and also the currency. You can also add a shortcode to display this donation thermometer on your pages and individual posts.  It is fairly easily manageable for any user to understand and make the most out of.

You should know that this plugin is not going to enable you to accept any donations. It is to be used with any other WordPress donation plugin. It would just help you enhance the visuals and motivate your visitors to donate more.

7. Formidable Forms:

This plugin can be considered to be one of the most promising WordPress forms plugins. You can create intrinsic forms with the ease of drag and drop builder. There are many form templates with one pre-built donation collection template. It lets you to see the donation statistics in graphs within your WordPress dashboard.

You can also export the form data anywhere outside WordPress using this plugin. Suppose you have a third party donation entries service. In that case, you can import data from there to your WordPress website using this plugin too. It is also compatible with the WPML translation plugin that helps translate the form to any language.

8. Charitable:

Charitable is also one of the most straightforward donation plugins for your WordPress website. You can create unlimited fundraising campaigns and also set milestones for any cause. You get to set a fixed donation amount or allow the visitor to enter a custom donation amount or have both the options. The donations can be embedded into your pages, modal popups, sidebars, and posts as well. It has support for payment gateways like, Stripe, and newsletter sing up forms as well.

You can also set up recurring donations, peer to peer fundraising, crowdfunding, and donor fee relief, to name a few of the powerful features. This plugin never charges transaction fees. You can also create time-sensitive campaigns that would end automatically once they’re over. This plugin adapts to your theme’s aesthetics to look aesthetically pleasing. Charitable has support for various powerful email marketing and news integration platforms such as MailChimp, Mailerlite, MailPoet, Campaign Monitor, and more.

9. Easy PayPal Donation:

It is as easy as it sounds. This plugin allows the users to add a PayPal donate button on your WordPress website. The visitors can click the button and send in the donations using their credit cards or PayPal accounts. It is a straightforward plugin that comes with 7 button templates. Suppose you are not satisfied with their 7 predesigned buttons. In that case, you can also create a custom button style to match your website’s aesthetics.

This plugin works to ease linking PayPal with your WordPress website and enable you to receive the donations. The users can also set up monthly recurring donations using this plugin. This plugin is ideal for anyone who wants a direct donation button with a few features rather than wholesome donation plugins with campaigns and other features that, at times, might not be needed.

10. FundPress:

FundPress is an amazing donation plugin that can work as an effective solution for your fundraising campaigns. It has many useful features that are needed for a fundraiser website. It has support for many popular payment gateways like AuthorizeNet, PayPal, and Stripe. You can also use this plugin to set up a donation site.

You can add a custom donate button widget and set an automated thank you message that would go to your donors as a token of appreciation. This would be done using an email marketing software integration. You can also add an all campaign page with all the ongoing crowdfunding campaigns and charity campaigns with more information. Details like Goals, Raised, Percentage, and Estimated Days Left can all be inputted. It looks aesthetically pleasing in its grid layout. There is also an option to have single campaign pages that would have all details regarding one particular campaign in detail. You can add the description, the reason, and the benefits of this campaign that the visitors can read and connect to, motivating them to donate.

These are the 10 best donation plugins that work greatly for WordPress websites. If you have a noble cause or any project where you need to run campaigns to take support from your visitors, these plugins can ease your process to a great extent. Having such useful plugins saves you time dealing with technicalities and focus on your mission and purpose. It also safeguards the donors’ contributions as all of them use secure payment gateways. You also get to keep track of all donors and other important data regarding donations. Most of these plugins use powerful email marketing services and analytical tools. You remain in control of all operations and are empowered to run successful donation campaigns for all your causes.

from Tumblr

5 Javascript Projects You Should Build as Junior Frontend Developer

5 Javascript Projects You Should Build as Junior Frontend Developer:

1. Build a Blog Template with HTML and CSS

When you just start learning front-end development it’s important to consolidate your knowledge about HTML and CSS. Building a Blog Template is a good idea for your first bigger project. Do not worry about design, there are many resources available online.


  • build a homepage, single post page, and contact page
  • try using CSS Grid
  • your page should be responsive (RWD)

Nice to haves:

  • add a slider
  • use real content instead of Lorem Ipsum

2. Build a Tic-tac-toe game with Pure JavaScript

Building a game in a browser can be a great exercise to test your JavaScript skills. You will have to react to user events, interact with DOM, and store game data. It’s also a great project to show to your colleagues and family!


  • welcome screen with name and symbol input for each player
  • rendering a symbol when a user clicks on the empty cell
  • win verification

Nice to haves:

  • creating a scoreboard and saving it to local storage
  • playing with the computer, using ex. minmax algorithm or your own solution

3. Location sharing with Pure JavaScript and Maps Service

A simple app where you can share location with your friend can be both a demanding project and a very useful tool you can use. In this project, you will use JavaScript to interact with external services for maps (ex. Google Maps or OpenStreetMap).


  • displaying your current location on a map
  • “Share” button which creates a link with your current location
  • a page which displays a location embedded in URL

Nice to haves:

  • sharing your realtime location, you will have to save it and read it every few seconds from an external database (ex. Firebase)
  • displaying the realtime location of your friend when he accesses the page

4. Build TV Series Tracker with JS Framework (React, Vue, Angular or other)

This project will help every TV Series fan, track premieres of new episodes. It will be a great opportunity to use a JavaScript framework you are comfortable with.


  • searching for TV Series using external API (ex. TVMaze API)
  • adding TV Series to the tracking list
  • displaying tracked TV Series list along with newest episode premiere date
  • single page view with more details about TV Series
  • saving tracking list to local storage

Nice to haves:

  • sending emails or push notifications when a premiere is coming

5. Home Budget App with JS Framework (React, Vue, Angular or other)

Creating a home budget App will be an ultimate check for your skills as a Junior Front-end Developer. It will check your ability to create forms and store information, but it can also help you save money!


  • adding a category
  • adding expense with name, amount and category
  • sum up of monthly spendings split into categories
  • saving data to an external database (ex. Firebase)

Nice to haves:

  • sign up, log in, and handling multiple users


Side projects are a great way to show your skills to land first job as Junior Front-end Developer. Let your potential employer know what did you build so far. They will not only look at the webpage but also analyze your code, so make sure it’s clean.

Before you start building something new create a list of requirements for MVP (Minimum Valuable Product). During development, you will discover more interesting functionalities your application can have, just add it as a nice to have to the list. It will help you finish the project on schedule.

Remember, you don’t have to mimic those examples 1-to-1. Feel free to change, add or remove any detail you like. If you have older projects you used for learning new skills you can always refactor it and put it in a portfolio.

from Tumblr

Micro Frontends Pattern Comparison

Micro Frontends Pattern Comparison:

Comparing build-time integration, server-side integration, run-time integration via iframes, and run-time integration via script.

The desire to modularize the frontend has steadily increased in the last year. One of the challenges for everyone implementing microfrontends is that there is no single pattern to follow. The available architecture patterns are quite different and come with their advantages and challenges.

Usually, each pattern has a distinct area of use even though hybrids and complex mixtures of the available patterns can be used to blur these boundaries as desired. In this article, I want to go briefly over four of the most common microfrontend patterns to understand their main pros and cons.

Build-Time Integration

The presumably simplest, but most reliable integration is the build-time integration. Reliable in the sense that at build-time we know already how everything works and we can join the different pieces to get a single deliverable.

This kind of mechanism is as old as writing software is. In the end, quite often different pieces have been developed independently at different locations, just to arrive at a single point for final assembly. To say the least, automation is key here. The process is best when it just triggers autonomously when any piece changes.

For instance, when a single microfrontend changes, the whole application should just be rebuild. Since the number of microfrontends may grow indefinitely this can be a lot of stress on the build server. Even if not, constant refreshes of the whole application may prevent caching which forms the basis for great SPA performance.


  • Type checking
  • Runtime optimizations
  • Easy for migration


  • Dynamic loading
  • Build times
  • Orchestration

The build-time integration works great in combination with server-side integration or for smaller applications where only some well-defined parts are outsourced. One possible solution here is to use Webpack with the module federation plugin.

We can choose this pattern quite easily if we have an existing application that should now be extended with some components provided by other teams. This leaves them quite some freedom without having to re-architecture the whole application.

This sort of Micro Frontends implementation is exemplified beautifully by Bit. Bit(Github) is a tool and platform that makes it easy to isolate components and deliver them as independent building blocks.

Bit’s website itself is composed of independent components (delivered by Bit).

Server-Side Integration

Moving on to the server-side integration this integration is our weapon of choice for anything dynamic that should also be served server-side rendered. This method will excel in perceived performance.

There are various ways of realizing server-side composed microfrontends. Using a layout engine such as podium we can quickly find a scaling approach without too much trouble. On the other hand, the dynamics of microfrontends may be difficult to tame with a central layout engine. Here, approaches such as using a reverse proxy could be more fruitful.

The challenge of using a reverse proxy is that the local development setup becomes rather complicated. Quite often, the only possibility of actually seeing the integration live is to deploy the microfrontend in question or to provide some hot loading capability for sustaining a local development environment.


  • Best performance
  • Dynamic loading
  • SEO


  • Framework integration
  • Microfrontend isolation
  • Development environment

The server-side integration works great for content-heavy sites. One example where this pattern shines is webshops.

It also provides a great basis for progressive enhancement, which also performs some JS enhancements if possible.

Through techniques such as frames, SSI, or ESI the server-side integration of different frontend parts has always been possible. With new frameworks and techniques, everyone can build quite complex applications in a distributed fashion, which are joined on the server.

Run-Time Integration via iframe

Joining microfrontends at runtime has many advantages, but comes at some non-negligible costs, too. Most runtime integrations require JavaScript and thus provide challenges on the SEO and accessibility site. While modern crawlers from Google use a powerful JavaScript engine (in fact they use a very recent version of Chrome to “see” the web), standard SEO rules still mandate quick response and rendering times. Runtime integrations quite often struggle here.

<img data-original="" data-pre-sourced="yes" data-sourced="yes" data-src="" id="image4" src="" title="Example architecture for run-time integration via “” data-orig-height=”221″ data-orig-width=”561″ data-orig-src=””/>

One exception is the inclusion of iframes. This can already be prepared on the server-side quite well, however, requires single elements including their purpose and area of use to be known centrally.

The best part about iframes is their isolation. This also beats alternatives such as shadow DOM or CSS modules as indeed nothing is shared with the hosting application. Since iframes come from a dynamic source their content can be server-side rendered, too. This is also necessary to some degree, as resources cannot be shared and need to be loaded multiple times.


  • Strong isolation
  • Full flexibility
  • Web-native


  • No sharing possible
  • Difficult to sustain great UX
  • Worst performance

The run-time integration via iframes works great for pages using third-party content, where strong isolation is required. This technique is already applied for ages. The first on-site PayPal integrations used it. Many chatbots and consent solutions use it. The reason is that the provided boundaries are just great to shield one application from another.

If a more seamless UX or transition is required, this technique could be replaced by the direct inclusion of a script carrying the microfrontends information.

Run-Time Integration via script

For the run-time integration of microfrontends, a plugin mechanism can be utilized, too. This method has the advantage that everything could be built very easily choosing all the right parameters centrally. The central location is usually called the application shell, or abbreviated “app shell”. It loads the scripts and evaluates their content.

<img data-original="" data-pre-sourced="yes" data-sourced="yes" data-src="" id="image5" src="" title="Example architecture for run-time integration via “” data-orig-height=”221″ data-orig-width=”579″ data-orig-src=””/>

While some frameworks offer great control over the distributed API, others are only script loaders or basic routing engines. Nevertheless, pretty much all solutions in this space focus on developer experience.

Being productive and able to develop, debug, and ship new microfrontends quickly is certainly a useful attribute.


  • Very dynamic
  • Super flexible
  • Best developer experience


  • Weak isolation
  • Requires JavaScript
  • Efficient orchestration

This approach should not be underestimated. It can give great flexibility but comes at some costs. Interesting applications such as VS Code have been built using a plugin system, which proves that a combination of a powerful app shell that comes with the majority of the UI is as viable as a weak app shell that only orchestrates the different microfrontends.

Alternatively, the integration via script can also bring microfrontends in form of web components. While this approach does have some loyal followers, it also comes with additional challenges — mostly in the backward compatibility sector.


There is no clear winner. It all depends on the anticipated use case and project characteristics. Hybrid solutions may be able to represent the sweet spot. However, the additional effort for developing (and maintaining) these hybrids should be factored in, too.

When aiming for a hybrid solution it still makes sense to start with one of the presented patterns first. Having a clear roadmap in mind and avoiding over-engineer the solution, in the beginning, is crucial to come out with a usable application in a well-defined timeline.

from Tumblr

Traverse an Object of Arbitrary Depth in JavaScript

Traverse an Object of Arbitrary Depth in JavaScript:

Sometimes we find that we need to traverse an object and perform some operation on it at some arbitrary depth. While this seems like a tough challenge, we can make use of recursionmutability, and object references to get the job done in short order.

Our Example Challenge: Deep Word Replacement

Let’s say we have an object that all the text fields of a dog adoption application our user has provided us. However, the user entered [tbd] in the places where the dog’s name should be—picking a dog’s name is hard. Alas, our user has finally selected the name Daffodil for his puppy, and we must now replace all the [tbd]strings in our object.

Unfortunately, our object is complex and of arbitrary depth. We must make this string replacement anywhere in our object!

Here’s our object:

const application = {
  section1: {
    question1: {
      text: "What will your pet's name be?",
      response: '[tbd]',
    question2: {
      text: 'What will the names of all the pets in your house be?',
      response: ['Fred', 'Whiskers', '[tbd]'],
      subquestion2: {
        text: 'How will you take care of your new pet?',
        response: 'I will feed [tbd] three times a day and pat her head.',
Enter fullscreen mode Exit fullscreen mode

Let’s think about this problem in steps before we write our solution. Here’s what we need to do:

  • Create a function that takes an object as an argument.
  • For each key in that object, if that key is a string, do our word replace. (mutation!)
  • If the key is an object, send that key back through the initial function (recursion!)

We can see how this looks in JavaScript:

function replaceTbd(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'string') {
      obj[key] = obj[key].replace('[tbd]', 'Daffodil');
    if (typeof obj[key] === 'object') {
Enter fullscreen mode Exit fullscreen mode

Kind of simple actually! Let’s see if that works on our object.


section1: {
question1: {
text: "What will your pet's name be?",
response: 'Daffodil',
question2: {
text: 'What will the names of all the pets in your house be?',
response: ['Fred', 'Whiskers', 'Daffodil'],
subquestion2: {
text: 'How will you take care of your new pet?',
response: 'I will feed Daffodil three times a day and pat her head.',
Enter fullscreen mode Exit fullscreen mode

Success! Do note that we didn’t return anthing from our replaceTbd function—it’s mutating our input object as it dives down the tree! If this isn’t desired behavior, you could consider looking into a deep clone library to first clone your object and then mutate the clone.


Working with deep objects can be intimidating, but it gets much easier when you master the concepts of recursionmutability, and object references.

from Tumblr

Top 10 Visual Studio Code Extensions for Python in 2020

Top 10 Visual Studio Code Extensions for Python in 2020:

1.Python extension for Visual Studio Code

by Microsoft

First and foremost – the Python plugin for VS Code. Out of the box, there is no support for Python in the VS Code, but when you open a Python file, VS Code will immediately suggest this plugin. It adds all the necessary features like:

  • Syntax highlighting for Python files
  • Intellisense (code-completion suggestions)
  • Ability to start a debugger

2. Bracket Pair Colorizer

by CoenraadS

This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

3. Better Comments

by Aaron Bond

The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations into, Alerts, Queries, TODOs.

4. Error Lens

by Alexander

Sometimes the error marks in VS Code are hard to spot (especially the “info” hints). If you don’t wrap lines, it’s even worse – the error can be in the part of the code not visible on the screen.
That’s why I’m using Error Lens. It lets me modify how the errors should be displayed. It can display the error message next to the line where it occurs and a Sublime-like error icon in the gutter (next to the line number)

5. Git Graph

by Mhutchie

If your working with code I assume you use a repository to safely store it. Git graph adds another dimension to the way you use the VS Code. It adds a nice user interface of your Git history and adds the ability to create/checkout new branches with the click of a button.

6. GitLens Git supercharged

by Eric Amodio

This extension has at the time of writing already has more than 5 million downloads! This extension is not only a game-changer it makes sure you use Git in other ways you normally wouldn’t have used it within your CLI.

7. Python Preview

by Dongli

This extension is really simple but extremely handy. It brings a visual view to VSCode for Python, which makes debugging code far simpler and likely quite a bit faster.


by Alessandro Fragnani

This extension lets you bookmark locations in your code, easily list all your bookmarks in a sidebar, and move between them with keyboard shortcuts.

9. TODO Highlight

by Wayou Liu

Highlights all TODO/FIXME/NOTE in the code, so you can easily spot them. You can easily customize it by adding new words and changing the highlight style.

10. Python Indent

by Kevin Rose

Every time you press the Enter key in a python context, this extension will parse your python file up to the location of your cursor, and determine exactly how much the next line (or two in the case of hanging indents) should be indented and how much nearby lines should be un-indented.

from Tumblr

Making Sense of the JS Framework Benchmark

Making Sense of the JS Framework Benchmark:

 You’ve heard about a new library and you’ve decided you want to look into it. Perhaps you need to make a decision on the technology you haven’t had a chance to use yet. You’ve read some articles, seen some endorsements on social media, but now you need to quickly get to the core of the matter.

You can browse NPM downloads, and stack overflow to get an idea of the ecosystem. You can look at Github to look at how issues are being handled and look at the number of stars to gauge popularity. But what if you want to understand the library or technology itself?

What About A Benchmark?

Today I want to look at what I believe to be the best benchmark suite for JS UI Frameworks. That is the JS Framework Benchmark. Almost 100 different libraries are compared with implementations often written or supported by the authors/maintainers themselves. And most importantly the scenario, while hyperbolic, is based on simulating end-user actions when working with a list. These are actions users do every day in apps.

However, this is not the place to start your journey. Benchmarks are just one tool and only tell one side of the story. Luckily there are a few tools out there that will help you get an idea of before digging deeper.

1. TodoMVC (

This is probably the single most important demo for any JS library to make. It’s the simplest example and the template and the view is standardized. They provide stock CSS.

You can browse the code and see what it is all about. If you can’t stand the TodoMVC implementation you will probably not like the library.

Best of all basically every JS library has an implementation. A quick search will usually reveal just about any library you can think of.

2. The RealWorld Demo (

This is a significant step up from the TodoMVC example. We have a real app here. A small app to be sure but these implementations still take implementors weeks to put together. Still, a lot of library maintainers go through the trouble of submitting to this demo. There are dozens of different implementations floating around.

This demo is strictly spec’d out and all the styles and view template structures are set for you. This makes each implementation very comparable.

And it is even a better indicator of if you’d like the code. You can start seeing characteristics of what its like to build apps. You can start to see patterns and a bit of the ecosystem. And you can start seeing things like initial load performance and bundle sizes.

Understanding The Tests

The JS Framework Benchmark consists of a number of tests spanning from performance, to loading time, to memory usage. It is basically a TodoMVC example on steroids testing all the common list operations on a scale of 1000s of rows.

I’m going to grab a few libraries from the current results page to explain how to interpret this benchmark.

All scores include a score normalized to the fastest implementation in parenthesis right under them. And that is used for the last row to form a geometric mean to rank the libraries.

Note on Categorization: I suggest focusing on Keyed results as while Non-Keyed benefits in a few edge cases it generally is seen as a dangerous practice. More here.


The first 9 tests focus on performance. They are run on the Chrome Driver work under throttled CPU similar to the lighthouse mobile tests. This emphasizes the overhead as if run on slower devices. They also all run after the initial page load so they aren’t influenced by any network/bundle size considerations. There are other tests later to measure that.

1. Create Rows

Creates 1000 rows. This test measures the cost of rendering 8000 DOM elements. Every library creates the same 8000 elements so this is a good indicator of the pure creation time. Here is where you feel the cost of setting up bindings or creating any additional constructs the library will use.

2. Replace Rows

Similar to the first but this one replaces 1000 rows already rendered. This test is a combination of creation time plus disposal overhead. While it contains both its biggest value is understanding how the library performs when most of the content on the page changes. In the case of a table, the library must confirm every row has been removed in addition to creating all the new content.

3. Partial Update

This is a nested data update on every 10th row. Why every 10th row? This gives us enough change to track while ensuring that most rows are not updated. Depending on the library some can detect only that specific piece of data has changed, whereas others need to run all the array comparison code. This test is the best indicator of things like animation performance and the overhead of deep nested data structures. Basically this test taxes the dynamic part of the libraries templating.

4. Select Row

This tracks the change of selection state between 2 rows. It is implemented with a single selectedRow state. It tests the cost of delegating state change over all rows. The DOM operations here are minor compared to the overhead of the library checking whether each row is selected or not. Where test 3 is a good indicator of ideal partial update performance this row indicates the cost of naive partial update performance.

Note: If you see libraries marked with issues the vast majority are related libraries that have come up with creative ways around this test doing what is intended. Sometimes it is out of necessity since the library has no mechanism to do declarative updates.

5. Swap Row

This test swaps the 2nd row with the 999th row. This is the only test that purely tests the overhead of how the library diffs lists. Unfortunately, this test is too simple to really illustrate diffing performance and provides binary results. The library either does naive iteration or smart. It might not matter much as this is based on the number of rows and you probably should be doing something else if you have this many.

6. Remove Row

This test removes a single row from the 1000 row list. This test is probably the least varying test as it more tests the browsers layout shift (as all the rows move up) than any overhead of the library.

7. Create Many Rows

This test is the first one again except this time with 10,000 rows. Yep that 80,000 DOM elements. While a complex UI might have 8000 elements, this number is completely absurd. This test is all about creation like the first. It is a bit more susceptible to memory overhead and scales a lot worse for libraries that are more inefficient.

8. Append to Large List

This test adds 1000 rows to 10,000 previously rendered rows. This tests the overhead of processing diffing when the list already has many items in it. Many libraries are quick to create but much slower to compare. This tests the ability of the library to perform incremental additions as pages scale.

9. Clear Rows

This removes all 1000 rows in one action. This illustrates the cost of the library’s cleanup code. Identifying that all the rows need to be cleared is usually trivial (data.length === 0) but libraries that use methods to optimize updates need to clean up here. Memory usage impacts this test a lot as there is more for the browser to GC. This is a more direct measurement of that overhead over test 2 which also does creation at the same time.

Startup Metrics

The benchmark also uses Lighthouse with mobile simulation to test loading scores for the library. These are only an approximation but this section does give us some useful information.

1. Consistently Interactive

This is a pessimistic TTI that waits for the CPU to be idle for 50ms. Unless your library is giant the score spread isn’t that large here and seems to mostly scale with bundle size with the exception of WASM libraries that don’t seem to take a hit (with exception of Blazor). I’m gathering JS parsing time is a large part of this test.

2. Script Bootup Time

This tests the time spent evaluating page scripts and is probably the least useful of the whole benchmark as it is capped by frames (best score is 16ms) and while some libraries do worse here it can also be a bit variable on whether it gets processed in a single frame or not. There is a correlation to size but it isn’t strict.

3. Total Kilobyte Weight

This measures the total size of all assets including user code, HTML, and CSS. This is useful since it shows real build sizes versus package sizes. A library like Preact might be 4kb gzipped but a library that more aggressively tree shakes might be double the size on paper but several kb smaller here. There are some libraries smaller than the VanillaJS implementation.


This might be the metric that we can make the least judgement on but it helps paint a picture of the overall performance. If nothing else it helps more than a few library authors realize large memory leaks in their libraries. And might serve as a constraint on low spec devices.

1. Ready Memory

This is the memory reading right after the page has loaded. With no more than a couple of buttons on the page, this memory number is low and most libraries actually do pretty similarly here.

2. Run Memory

This is the memory reading right after creating that first 1000 rows (same as Performance Test 1). This is the overhead of all the extra DOM nodes and the dynamic library constructs. It is the first indicator of how heavy the library’s runtime is.

3. Update every 10th row

Same as Performance Test 3 but this time we see the memory overhead of doing partial updates. Mostly this is the allocation of new string values but you get to first time see memory overhead of libraries dynamic diffing mechanisms.

4. Replace Rows

Similar to Performance Test 2 this replaces the 1000 rows 5 times. You would think memory should be similar to the Run Memory test but it appears there is always some overhead, even for VanillaJS when creating and clearing at least once. This is a good test to detect memory leaks.

5. Create/Clear Rows

Similar to Performance Test 9 this creates and then clear 1000 rows. This you would think ideally should get us back to our baseline memory usage. But as shown even by VanillaJS there is an overhead. The closer the libraries get to VanillaJS numbers the more effective they are at cleaning up after themselves.

Viewing The Results

This benchmark lets you really narrow down what you are looking for down to test, implementation and even different view modes. Comparison mode is particularly useful because it visually shows statistical significance.

Here I am comparing the selected libraries to Svelte. You can see libraries that where results are comparable the cells are white; where a library is significantly more performant it is green; and where the library is significantly less performant the results are red.

Every test is different so it can help you get a holistic view. In many ways, libraries are close in performance on many of the metrics so there is usually a pretty big gap in performance before things are actually significant across the board. It isn’t until we get to Angular that we see things significantly slower, or until we get to Solid that we see things significantly faster.

There is also a box plot view that really helps chart the variance. This can be useful to look into a single test and understand how consistent its results are.

Putting It In Perspective

Benchmarks are only one side of the story. They should be always viewed with skepticism, but not contempt. I think when you come across well maintained and well thought out benchmark you can learn a lot about how a library behaves.

A benchmark like the JS Framework Benchmark is more unforgiving in some ways and more lenient in others. This test is heavily constrained by DOM operations which really only affect real apps on large page navigations. Given these implementations are most optimal the rest of the cost is disproportionally tied to library execution time.

In real applications it is the user code that often takes up more of the time. It’s easy for us to blame the framework and benchmarks support this narrative. So by all means, if you believe your code is immaculate seek out the fastest libraries here. In reality there is much more to it than this.

There is no such thing as a real-world benchmark and most attempts fall a bit shallow. Like focus on only initial page load. However, you are in the market for benchmarks this is one of the best ones out there.

from Tumblr

Building a more inclusive internet, beyond COVID-19

Building a more inclusive internet, beyond COVID-19:

 Between 2015 and 2020, more than 1.5 billion people began using the internet for the first time. Another billion more are set to join them online by 2025.

Most of these new internet users come from Asia, Latin America and Africa. They experience the internet differently from those who came before them—connecting on their phones and adopting new apps and tools incredibly quickly.  More and more, it’s their needs and ideas that are shaping the future of technology, in areas from financial inclusion to language translation

Today, though, new internet users face their biggest challenge—the impact of COVID-19. How we help them get through it will go a long way towards ensuring the recovery from the pandemic is inclusive and sustainable. 

A half-decade of change  

Without question, the internet is more accessible and democratic than it was in 2015. Data costs have plummeted, helping the number of smartphone owners reach more than three billion people. The proportion of non-English speakers using the internet has reached three quarters of the global total, and people around the world are increasingly using video and voice as their tools to find information and services online.

The changing digital landscape 2015-2020
New users trends 2015-2020

For Google, our work building for new users has helped us build better for everyone. Since we launched the Next Billion Users initiative five years ago, it’s led to breakthroughs we wouldn’t otherwise have made—from offline modes in YouTube and Maps, to AI that can help kids read in multiple languages, apps that protect privacy on shared devices, and the new user experience in Google Pay (first launched  in India and soon coming to the rest of the world). We’re also sharing open-source tools and guidelines to help others, because we know that supporting new users is a shared goal.

Google NBU product launches

Over the past-half decade, the technology industry has made meaningful progress in closing digital divides, helping millions more people a week share in the benefits technology creates. Yet as the pandemic increases the importance of technology in our lives, work, education and health, the risk is that this progress will slow or, worse, reverse. 

The impact of COVID-19

We asked new internet users how the coronavirus has affected them, and many told us it’s added to pressures they already face. At a time when essential services are increasingly moving online, it’s becoming harder and harder for new users to access the internet in the first place.  

The combination of fewer jobs, lower income and higher prices means they’re forced to ration their data. Food and shelter have to take priority—and with more people at home, even when data is available, it tends to be spread thinly across multiple family members.  

On top of that, a lack of digital literacy means new users often struggle to take advantage of government financial aid, community resources or schooling. And when it comes to the virus itself, many are finding it hard to separate fact from misinformation, or to find reliable healthcare options.

Not surprisingly, all this is taking a toll on new internet users’ sense of emotional wellbeing, interrupting their support systems and forcing them to put some of their aspirations on hold. 

Impact of COVID-19 on new users

How we help new users from here: economy, education, ecosystem

Countering the impact of the virus by helping new users through and beyond COVID should be a priority for industry, governments, international organizations and nonprofits.

First, we have to make sure new users have easy-to-use tools that meet their immediate economic needs.

We recognise Google’s responsibility in this. Apps like Kormo Jobs in Bangladesh, India and Indonesia — which connects people to entry level jobs—are already playing a role helping people find work. In the coming months, we’ll be experimenting with a new Google product that can provide additional earning opportunities through crowdsourcing, recognising that for most new internet users, protecting income is the first priority. 

Second, we have to increase our focus on education—helping new users better understand online information and services, and adapt to deeper changes like the rise of online education. 

Grassroots, nonprofit-led literacy initiatives like those is supporting in Southeast Asia are important steps in the right direction. So too are the Google News Initiative’s partnerships throughout Latin America, and Grow with Google’s global programs like Be Internet Awesome, which promotes online safety and confidence for kids. It’s critical that we build on these programs in the aftermath of the pandemic. 

Third, we have to keep building a supportive ecosystem around new users. We should aspire for every organization that owns or builds technology to prioritize inclusion.

Too often, the responsibility for helping new users get online falls to ‘informal teachers’, the friends and family around them. Initiatives like the Design Toolkit for Digital Confidence show how we can begin to change that, equipping technology-makers to build tools that are intuitive for everyone, no matter what their circumstances.

Finally, we have to keep advancing the work that led Google to create the NBU initiative in 2015: ensuring the internet and the devices and the tools it supports are helpful and accessible to more people, in more languages and more ways (including for those living with disabilities). 

COVID-19 is a challenge for everyone, and it’s hitting new internet users especially hard. But if governments, businesses and civil society organizations work together, we can and should make the internet better and more inclusive in the post-COVID world, for the billions online today, and the next billion to come

from Tumblr