We initially planned to use the fluent-ffmpeg lib, which provides a nice API to call FFmpeg from Node.js, and seemed to be the most popular lib for this purpose. The first challenge was to find the best way to call FFmpeg from Node.js. And, as always with powerful tools, it is not the easiest to use. To do so, we decided to use FFmpeg, a very powerful tool to manipulate videos. Next, we had to convert the GIF files to WebM files. Import Converting GIF To WebM Using FFmpeg Otherwise, the concurrent accesses to the Markdown files would lead to file corruption.įor the tag, we decided to use a template like the one below, which would be used to replace the GIF file inclusion: The difficulty here was to set up the lib to deal with multiple pattern replacement in a single pass, and to avoid returning promises for each file to execute in parallel. We then used a regular expression (yeah, I know! □) to find the GIF files' inclusions. To solve these challenges, we used the replace-in-files lib (which internally uses glob, another great tool!) to quickly replace patterns inside multiple files. Replace the GIF files inclusions with an HTML tag, with the WebM file as source.Find the GIF files inclusions in the Markdown files.Find all the Markdown files in the documentation.Scripting Markdown UpdatesĪt this point, we decided to build a CLI tool to automate the process. Hence, the first challenge was to find a way to automate this process. With 233 Markdown files at the time of writing, this would be a very tedious task to do it manually. However, provided that we manage to convert the videos to WebM, we would still need to update the documentation to use the new videos. by converting them to WebM files, would be a simple way to reduce its carbon footprint. That's why we figured that reducing the size of the video assets of the react-admin documentation, e.g. Experiments with GreenFrame taught us that carbon emissions of websites are correlated with their web performance. However, it is far from being the most efficient format in terms of size.Ī common web performance optimization practice is to replace animated GIFs with video for faster page loads. These videos use the GIF format, as it allows easy embedding and has no video compression artifacts. The documentation includes 87 screencasts at the time of writing. Most visitors come for React Admin documentation, with more than 15k monthly views for the Tutorial page alone. With more than 300k views and almost 50k visitors in the last 30 days, the React Admin website receives a lot of traffic. Reducing Carbon Footprint By Using A Better Video Format We will also explain how we built a CLI tool to make the process easier. In this article, we will explain how we reduced the size of the video assets of the React Admin documentation by 62%! By providing open-source tools like GreenFrame, we want to help developers reduce the carbon footprint of their websites.įollowing this pledge, we also want to reduce the carbon footprint of our own websites. It’s not a one-size-fits-all scenario – with different formats for different platforms.At Marmelab, we are convinced that we can use digital innovation to make the world a better place. The same principle applies to selecting the right video formats. There is a certain creative process that you need to go through to craft a video that tells a good, authentic story. While it is getting easier for more people to produce their own video content, there is no cookie-cutter approach to creating engaging videos. Everyone is jumping on the video content bandwagon. HubSpot Research has defined 2019 as the “year for video as a holistic business approach.” Video content will be produced by all teams within a business, in a more conversational, actionable, and measurable way. There are also some great video apps that you can get on your phone to help with putting together some pretty professional looking videos. You can now shoot in high-quality, 4K video with your smart phone. Gone are the days of having to carry expensive filming equipment around to create your video content. Video production is also getting more and more cost-effective. More than 50% of consumers want to see videos from brands, according to HubSpot Research. Research has shown that video content increases conversion on websites as well as engagement in both email marketing and social campaigns. If you aren’t including video content in your marketing campaign (particularly your social campaigns) you are falling behind.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |