Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Whenever we need to do performance testing, mostly it is the APIs that come to mind.
Testing the performance of an application by putting load on APIs or on servers and checking out various metrics or parameters falls under server-side performance testing.
It’s a pretty low-effort thing to get a big fancy link preview on social media. Toss a handful of specific <meta> tags on a URL and you get a big image-title-description thing. Here’s Twitter’s version of an article on this site:
It’s particularly low-effort on this site, as our Yoast SEO plugin puts the correct tags in place automatically. The image it uses by default is the “featured image” feature of WordPress, which we use anyway.
I’m a fan of that kind of improvement for that so little work. Jetpack helps the process, too, by automating things.
But let’s say you don’t use these particular tools. Maybe creating an image per blog post isn’t even something you’re interested in doing, but you still want something nice to show for the social media preview.
We’ve covered this before. You can design the “image” with HTML and CSS, using content and metadata you already have from the blog post. You can turn it into an image with Puppeteer (or the like) and then use that for the image in the meta tags.
Ryan Filler has detailed out that process the best I’ve seen so far.
This stuff gets my brain cooking. What if we didn’t need to create a raster image at all?
Maybe rather than needing to create a raster image we could use SVG? SVG would be easy to template, and we know <img src="file.svg" alt="" /> is extremely capable. But… Twitter says:
Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
Fifty sad faces, Twitter. But let’s continue this thought experiment.
We need raster. The <canvas> element can spit out a PNG. What if the cloud function that you talked to was an actual browser? Richard Young called that a “browser function” last year. Maybe the browser-in-the-cloud could do that SVG templating we’re dreaming of, but then draw it to a canvas and spit out that PNG.
Meh, I’m not sure that solves anything since you’d still have the Puppeteer dependency and, if anything, this just complicates how you make the image. Still, something appeals to me about being able to use native browser abilities at the server level.
Direct Link to Article — Permalink
The post Automatic Social Share Images appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
If you have experiences to create an E2E test project on a web application, you should be familiar with codes like this.
xxxxxxxxxx
// Manipulate browser to enter text to an input box
const fooInput = await getElement('.fooInput');
fooInput.type("user.name@email.com");
// Manipulate browser to click the submit button
const fooButton = await getElement('button[type=sybmit]');
fooButton.click();
// Then verify what is happening after form submit
In today’s Quality Sense episode, Federico Toledo sits down for a chat with the founder and CEO of Testim, Oren Rubin, an Israeli entrepreneur who has over 20 years of experience in the software industry. Testim is an innovative product in the test automation domain that seeks to alleviate the problems around flaky tests. Prior to founding Testim, he was the Director of R&D at Applitools, where they use advanced computer vision technologies to solve the challenges of UI Verification.
Google Chrome is, by far, the most mainstream web browser with its best of all security features and enhanced functionality. It’s easy to use and smooth surfing capabilities have made it the most sought after browser. The concept of web browser automation has been in practice for some time now. Automating browsers, to scrap carrying out redundant and repetitive tasks like screen navigation, filling out forms, taking screenshots, etc that hamper the speed of any application, is a methodology every developer follows. There are various multi-browser automation tools like Selenium, being one of the most popular, as well as other dedicated browser extensions like Chrome Browser extension (CBA) for Chrome, that help carry out smooth web browser automation.
In reference to this context, Google Chrome introduced the Headless Chrome functionality to allow automating the browser in a headless mode. The Headless Chrome enables the complete execution of Google Chrome on servers that run without a Graphical User Interface (GUI). It lets you programmatically test your web app without the need for any frontend framework. The entire automated testing process is carried out in the background, without you seeing anything happening in the testing process. Headless Chrome has gained immense popularity in the field of web development, due to its swift and fast execution.
Here is the full code if you want to jump right to it.
The title seems kinda rude and lazy, right? But if you think about the situation I am in, then you’ll understand. Here in India, it’s important to be socially active. If you don’t reply or send a few “good morning” messages in a few groups, people would think you are actually dead or taunt you for being busy and not spending time with them.
Over the past decade, the world has seen the emergence of powerful JavaScript-based web apps while new frameworks evolved. These frameworks challenged issues that had long been associated with crippling website performance. Interactive UI elements, seamless speed, and impressive styling components have started co-existing within a website without compromising the speed too heavily. CSS and HTML are now injected into JS instead of the other way around because JS is simply more efficient. While the use of these JavaScript frameworks has boosted performance, it has taken a toll on testers.
Testing and debugging has become more and more complex. Puppeteer has been introduced as a node library used to enable Chrome browser testing.