Running Neural Networks Inside the Web Browser? Only if You Know How!
INTRODUCTION
In our previous case study, we introduced you to one of our clients – ShareTheBoard, an Ed-Tech startup, designed to bridge the gap between digital and analog solutions.
Our dedicated team developed a custom neural network that excels at identifying and digitizing handwritten content on whiteboards while preserving its visual structure. This enhancement improves content visibility on output video streams, ensuring a seamless user experience across different devices and platforms. Remarkably, we accomplished all of this in under 12 months.
But now that the neural network is ready, it’s time for the next step...
CHALLENGE
Running a neural network in real-time on the server side is technically straightforward, but consumes large amounts of processing power, leading to high infrastructure costs. As a result, this approach limits commercialization options, making it impractical.
To avoid these issues, we decided to run our proprietary convolutional neural network on the client side. However, due to the client's business constraints, the application had to run within the web browser. Although advancements in web technologies such as WebAssembly, WebGL, and WebGPU make it possible to run small neural networks, larger setups presented significant challenges.
Once the neural network was completed, it was time to implement it into the test application. Unfortunately, ShareTheBoard soon encountered severe performance issues—the application would freeze the browser completely, rendering it unresponsive for multiple seconds and making the application unusable.
Our challenge was clear: optimize the performance of the neural network within the ShareTheBoard application. This task required innovative solutions and a thorough understanding of both the framework and the application's requirements to ensure a smooth and responsive user experience.
FAILURE 101: EMBRACING MISTAKES
During the optimization process, we tested various approaches, each ending in failure. Here are some examples:
We tried TensorFlow.js, which offers two implementations: one built on WebGL and another using pure JavaScript. The former resulted in the GPU being blocked for the UI, while the latter proved to be too slow for production use.
We tested ONNX.js, Microsoft's alternative to TensorFlow.js. But despite our high hopes, its performance was similarly disappointing. Solutions caused the user interface to freeze, degrading the speed and user experience of ShareTheBoard’s app.
We experimented with GPU.js, which accelerated the neural network on computers equipped with dedicated GPUs but slowed the performance on older laptops with integrated chipsets.
However, there was a breakthrough. Both TensorFlow and Onnx provided high-level APIs (Application Programming Interface) that limited operations to the entire model, restricting our efforts. This led us to consider solutions that offer a low-level approach.
SOLUTION
Developing a solution took several trials and experiments but ultimately led to a great outcome. We created a proprietary library for running neural networks inside the web browser. We based it on WebGL, a JavaScript API, using shader programs written in the GLSL.
This implementation allowed us to break down the execution of the neural network into smaller layers. Although this slightly increased the total inference time, it enabled the web browser rendering process to access the GPU, effectively overcoming the UI freezing issue.
We gained granular control over the operations, leading to significant performance improvements and a smoother, more responsive user experience for ShareTheBoard.
RESULTS
After these changes, we successfully released our dedicated convolutional neural network content detection system, which operates in real time within the web application.
The app was tested across multiple scenarios with diverse hardware and software configurations. It performed successfully, leading to commercial success for ShareTheBoard and satisfying the client's needs.
Webflow is a state-of-the-art tool for website creation, designed to be intuitive and eliminate the need for coding. It’s ideal for designers seeking autonomy in their projects, with features like automatic updates, managed hosting, and free SSL included. While Webflow may initially appear to have a higher cost than WordPress due to visible subscription fees, the overall costs can be similar when factoring in the latter’s maintenance expenses. Webflow provides exceptional integrations and a streamlined user experience, making it a great choice for businesses big and small, as well as startups aiming for high-quality, worry-free websites.
What is Webflow?
Are you curious about how effective Webflow is for creating websites? This article explores whether Webflow is the best CMS choice for you. Prepare to be amazed by its versatility – let’s explore!
Disclaimer: We won’t be diving into Webflow’s ecommerce capabilities in this article; that will be covered in a future post.
Webflow is a cutting-edge SaaS platform that simplifies website building.
Webflow is a cutting-edge SaaS platform that simplifies website building. It is a low-code/no-code solution that allows users to design, build, and launch websites without writing any code. It also offers the flexibility to use code if desired. Sites are published directly through Webflow’s interface, so there’s no need for a separate server or additional software.
Meant primarily for designers, Webflow empowers them to bring their creative visions to life independently, without relying on developers. While it does require some tech skills, most designers can train themselves on Webflow within a few weeks.
As a UI/UX designer, I can say Webflow is a fantastic tool. It eliminates the need for coding, allowing me to turn my designs into functional websites more easily than ever. The interface is user-friendly and similar to design software, making it simple to use. If you create your site using Webflow and understand how responsiveness works, simply preparing views for several breakpoints within Webflow will ensure it looks great on most devices. Additionally, Webflow gives you full control over animations. I see Webflow as a tool built by developers for designers. Last but not least, if you have some coding knowledge, Webflow lets you put that to use, making the tool even more flexible and useful.
Webflow Pricing: Is It the Best CMS Choice for Your Budget?
Webflow is not a free service, although it offers a free plan for testing, which allows the creation of up to two basic designs. These designs can only be published on Webflow subdomains, which may be sufficient for personal projects but inadequate for business needs. However, the free plan is a great choice for designers seeking an easy way to create a beautiful, hassle-free portfolio.
Webflow simplifies the process of creating visually appealing websites with fewer maintenance needs.
For professional websites, a subscription is necessary. As of August 2024, plans start at $14 per month, without CMS management. The $23 per month plan, billed annually, enables CMS features and totals $276 per year, including hosting, SSL, updates, and support. Domains must be purchased separately. When deciding which CMS to choose, Webflow’s transparent pricing structure can be appealing.
There are also Workspace Plans which cater to freelancers and agencies, and are typically not necessary for individual users building their own sites.
Purchasing a Workspace Plan is beneficial when custom code, code export, and designing CMS elements across multiple pages are needed for all current projects without having to purchase separate site plans for each. Site plans are required later to host the site on a custom domain.
Workspace Plans are particularly useful for agencies that design Webflow sites for clients and need access to additional features for all their projects without buying a site plan at this stage. These plans also allow for multiple users working simultaneously.
Webflow 101
With over 5,000 editable templates, Webflow enables you to construct your ideal site through trial and error.
Webflow development agencies love this website builder for its user-friendly interface and powerful features. You can start creating your website as soon as you sign up. It's worth noting that basic knowledge of HTML and CSS can be useful, as it might be tricky for absolute beginners.
Webflow Interface
With over 5,000 editable templates, Webflow enables you to construct your ideal site through trial and error. Additionally, Webflow's templates, which range from $50 to $150, are competitively priced and come with the assurance of high quality. Even top Webflow agencies use those paid templates, as they speed up the design process, saving development hours and overall project cost.
Are you looking for a Webflow Development Agency?
Contact ustoday to get started on your next web project with our experts!
Key Feature – Animations: No other CMS makes it as effortless to create beautiful and lightweight animations for your Webflow projects, making your site vibrant and engaging.
Post-creation management of the site is very intuitive and easy to handle.
Webflow: The Best CMS Choice for Marketing?
Webflow's clean code generation ensures your site loads swiftly, which is critical for SEO success. Speed is a significant factor in search engine rankings.
Webflow offers image optimization to WebP format and full control over URLs, meta titles, and meta descriptions. It also includes an automatic translation feature, an automatic sitemap, alt tags, and a robots.txt file.
Webflow's clean code generation ensures your site loads swiftly, which is critical for SEO success.
More advanced configurations, such as setting up canonical tags, require coding.
Integrating with external applications, such as Google Analytics, is simple through Project Settings > Integrations. With over 5,000 integrations available, all major marketing and analytics tools are included.
Webflow vs. WordPress: Which is the Best CMS Choice
Webflow Features
5,000+ integrations
Low maintenance
User-friendly interface
Integrations cost
Extra e-mail service cost
Initial tech skills needed
WordPress Features
Many plugins available
Initially less expensive
Highly customisable
Performance issues
High ongoing costs
Complex, expert needed
Plugins: While WordPress boasts a vast number of plugins, these are often user-generated and may lack regular updates, increasing security risks. Additionally, they can often be of poor quality and significantly slow down the site.
In contrast, Webflow offers over 5,000 robust integrations. Features that need plugins in WordPress, like Yoast SEO and integrations with major platforms such as Google and Meta, come standard in Webflow.
Webflow offers over 5,000 robust integrations.
While WordPress initially appears to be a less expensive option, business use can drive up costs due to the need for hiring professionals and purchasing templates. These templates often require frequent updates and ongoing maintenance. Furthermore, managing a server, handling backups, and performing other maintenance tasks can further increase costs, whereas Webflow takes care of all these aspects for you.
Webflowsimplifies the process of creating visually appealing websites with fewer maintenance needs. While the expenses are comparable to WordPress, Webflow shines with its exceptional ease of use and reliability, ensuring your site functions effortlessly.
Company Mail: Basic email services usually included with external hosting are an additional purchase with Webflow.
Webflow and Self-Reliance
Automatic Updates: Webflow provides seamless integration with automatic updates, managed hosting, free SSL, and backups all included.
User-Friendliness: Webflow might be challenging for beginners, and having a developer's help can be beneficial. Nonetheless, Webflow’s support package can solve most issues, reducing the need for extensive developer hours.
Resources: Webflow doesn’t have as many tutorial materials on YouTube, making it harder to find solutions on your own. However, their support team is readily available to assist you. They also have their own learning materials called the Webflow University.
Translations can be easily added in Webflow. It’s a paid feature starting at $9 per month, offering editable machine translations.
Translations: Translations can be easily added in Webflow. It’s a paid feature starting at $9 per month, offering editable machine translations. In comparison, WordPress’s WPML plugin costs $99 annually. Additionally, advanced features like changing styles and element visibility based on language are only available in Webflow’s enterprise plan, which is more expensive, giving WordPress an advantage.
Summary: Is Webflow a Good Fit?
WordPress, much like Android, provides endless customization and plugins. Webflow, resembling iOS, is a bit pricier but offers a seamless, attractive, and hassle-free experience.
Cost Summary: Webflow may appear costly, but considering the inclusion of support, backups, and updates, the price difference is minor unless you can manage everything yourself.
WordPress, much like Android, provides endless customization and plugins. Webflow, resembling iOS, is a bit pricier but offers a seamless, attractive, and hassle-free experience.
Security: If not maintained by an expert, WordPress is vulnerable to attacks through outdated versions and plugins, a concern you won’t have with Webflow.
Target Audience: Webflow suits businesses big and small seeking a beautiful, trouble-free website. Startups and new businesses will find it beneficial if they can afford an annual maintenance cost of around $260 to $390.
Conclusion: Who is Webflow For?
Webflow is an excellent choice for businesses and designers who prioritize aesthetics, functionality, and ease of use.
Webflow is an excellent choice for businesses and designers who prioritize aesthetics, functionality, and ease of use. Webflow reviews often highlight its user-friendliness and powerful features, making it a top choice among webflow agencies. Seamless integrations make it a standout tool in the world of website building.
While it may require a higher investment than WordPress with subscription costs, it is usually faster to implement, saving you money on designers. The peace of mind and quality results it delivers are invaluable. If you're ready to elevate your web presence and simplify your site management, Webflow is definitely worth it.
Ready to take the next step and looking for a Webflow Agency to do it for you? Our team at From Poland With Dev specializes in creating professional, high-quality Webflow sites tailored to your unique needs. Contact us today to get started on your next web project and experience the difference that expert development can make!
On August 13, 2024, Shopify will discontinue support for Shopify Liquid Checkouts and reinforce Shopify Scripts AKA the new Shopify Checkout. In theory, the new option is better and the migration should be straightforward, the transition is complicated for non-standard e-commerce setups, particularly for Shopify Plus clients. The new checkout system is buggy, has misleading documentation, and lacks some previously available functions. If you haven't started the migration or are already experiencing multiple issues, read the full story below.
The new Shopify Checkout migration introduces many enhancements for your store, including enhanced analytics (with Pixel support), a new checkout editor, and the introduction of the Branding API, which offers extensive customization options for your checkout processes. This all sounds promising, even considering that the old checkout (based on a liquid layout) will be discontinued on August 13, 2024.
In theory, this sounds great, but in practice, we have found that migrating to the new checkout can be quite challenging. If you haven't started planning your migration yet, you should brew yourself a large cup of coffee and prepare to learn from the tough experiences we encountered during the migration of several Shopify Plus stores.
What's happening with Shopify Liquid Checkout?
Shopify has announced that as of August 13th, 2024, they’ll discontinue support for Shopify Liquid Checkout with Shopify Scripts to follow - tools used by Shopify merchants to modify the default configuration of checkout behavior. They will be replaced by Shopify Functions, and Shopify Checkout Extensibility.
Liquid Checkout
As a reminder, Checkout.liquid is a file written in the Liquid language, which is responsible for the display of the checkout page. Thanks to Liquid Checkout, Shopify Plus merchants had the option to alter the HTML and CSS of the checkout pages for a more branded and unique experience, aligned with the overall website’s design. Merchants were able to add Custom Scripts and work with custom validation, tracking or unique checkout processes.
Why is this happening?
The use of Liquid files could affect the performance of the Shopify backend; customization options for standard Shopify stores were limited; modification of Liquid files required the support of Shopify developers; and analytics were, in fact, limited. Moreover, Shopify is proudly stating that their checkout is the best converting checkout, and strong customization could affect these statistics.
Checkout Migration - Should I Even Care?
It depends whether you're a Shopify or Shopify Plus customer. If you use the default Shopify checkout without any modifications and run a small e-commerce, migrating to the new system offers a few interesting options. You will need to transition from the old management system in the admin panel to the new one, which provides enhanced options for customization and analytics, but it should not be that difficult.
However, if you are a Shopify Plus customer, it's likely a different scenario. Contrary to official marketing information and tech blog posts (I guess mostly generated by ChatGPT), you should brace yourself for some challenges.
The simplified process is as follows:
Compare your current functionalities with the options provided by Checkout Extensions and a few default Checkout apps that are already available.
Migrate everything from the script editor/liquid file into the new checkout and Branding API.
Test it in your staging environment.
Release it to production.
If only it were that simple.
What Could Go Wrong, as tested by our developers
Bugs
The new checkout is simply not ready. There are multiple bugs, so even if migration should be possible, it may be halted by issues with Shopify's behavior.
UI extensionsChanges
You completed your migration and think you're set? Think again. Shopify is continuously fixing bugs and releasing new versions of their API, with the new versions not always being fully compatible with the old ones.
Lack of Support
The documentation is incomplete or even misleading due to the regular API and system changes. Shopify tutorials are outdated, the community is confused, and support from any copilot or generative AI is lacking.
No Way Back
You've completed the migration and your checkout stopped working? Perhaps you think you can revert to the old checkout version with just one click? Unfortunately, there's no turning back by default. You may request Shopify support for old checkout restoration, but they have the right to refuse….
Testing on Staging
You tested your new Checkout on staging - that’s great, but we encountered situations where staging worked perfectly, yet after migrating to production, our new customization apps simply failed to work.
PS. Need help setting up staging? We’ve got you - contact us here.
Limited Functionality
Some functionalities that were possible with Shopify Scripts are no longer available with Shopify Functions. If your e-commerce was based on these, you need a different solution.
Pic. No way back - reverting to liquid checkout once you’ve upgraded ain’t an option
Shopify Checkout Migration: Our Story
I could say that we prepared for this process thoroughly, added some of our tech magic, and helped all our clients migrate with absolutely no issues or surprises. The issue is I’d be lying.
Due to the lack of documentation and training materials, this process is challenging, particularly for the initial few checkout migrations.
We’ve learned the hard way - understanding the system's limitations, recognizing standard issues, and figuring out how to address them, as well as deciding which old functionalities to abandon.
Shopify Checkout Migration: What should you do?
If you run a Shopify development agency, just try, fail, and try again. Over time, after working on two or three stores, you will learn how to handle most of the constraints, as we did.
If you are an e-commerce manager or the CEO of a company based on an e-commerce solution, you can opt for sorting the migration in-house (and hope for the best) or partner up with experts for less hassle - in that case contact us at hello@frompolandwithdev.com for an estimate or fill out the form below.
We’ll treat your e-commerce like our own, as backed by 5.0 on Clutch & hundreds of completed projects!