puppeteer-demo
How to use Puppeteer to take webpage screenshots and generate dynamic Open Graph images for social sharing (by whitep4nth3r)
p4nth3rblog
My 2021 personal blog site built with NextJS and Contentful — now deprecated. (by whitep4nth3r)
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
puppeteer-demo | p4nth3rblog | |
---|---|---|
1 | 5 | |
62 | 32 | |
- | - | |
0.0 | 0.0 | |
almost 3 years ago | about 2 years ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
puppeteer-demo
Posts with mentions or reviews of puppeteer-demo.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-03-17.
-
Three ways to use Puppeteer and Node.js to screenshot web pages and generate dynamic Open Graph images for social sharing
Harness the magic of Puppeteer in three ways: on the command line, as a serverless function in the background, or in a front-end application. Explore and fork this puppeteer-demo repository to see Puppeteer in action — and have fun creating dynamic Open Graph images for your websites or finding new ways to use Puppeteer!
p4nth3rblog
Posts with mentions or reviews of p4nth3rblog.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-11-29.
-
How to load responsive images in AVIF and WebP using the HTML <picture> element
If you’d like to see the final code example as a React component in the code for my personal blog site, check it out on GitHub, and if you have any questions about responsive images and how you can make the best of the Contentful Images API, find me on Twitter!
-
TIL: How to use GraphQL variables to give my queries type safety
// https://github.com/whitep4nth3r/p4nth3rblog/blob/main/contentful/Events.js import ContentfulApi from "@contentful/Api"; const defaultOptions = { future: true, }; /* * Get all events -- future by default */ static async getEvents(options = defaultOptions) { // Calculate date_ASC for future events, or date_DESC for past events const order = options.future ? "date_ASC" : "date_DESC"; // Generate today's date const date = new Date(); // And format it to an ISO String const formattedDate = date.toISOString(); // Decide on the date filter to pass in as a string const dateFilter = options.future ? "date_gt" : "date_lt"; // Construct variables object to send with the HTTP POST request const variables = { date: formattedDate, order }; // Build the query const query = `query GetEvents($date: DateTime!, $order: [EventOrder]!) { eventCollection(where: {${dateFilter}: $date}, order: $order) { items { sys { id } date name link description timeTbc isVirtual image { url description height width } } } }`; // Call out to the base API call const response = await this.callContentful(query, variables); const eventCollection = response.data.eventCollection.items ? response.data.eventCollection.items : []; return eventCollection; }
-
How to add Algolia InstantSearch to your Next.js application
Fetch your data however you need to. View the full build-search.js file on GitHub to check out how I used the Contentful GraphQL API and node-fetch to grab my data for processing.
-
How to filter entries by linked references in GraphQL
If you’d like to see the complete query for my topics pages, take a look at this file in the code for my personal blog site. The statically generated page is available to view here.
-
Three ways to use Puppeteer and Node.js to screenshot web pages and generate dynamic Open Graph images for social sharing
The URL parameters in the request hold the key to the magic being performed here. Here’s a look at the code that generates my dynamic Open Graph images in the head of my web pages, which you can find in full here.
What are some alternatives?
When comparing puppeteer-demo and p4nth3rblog you can also consider the following projects:
og-image - Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc
autoprotonvpn - 1-click anon protonvpn account
Blitz - ⚡️ The Missing Fullstack Toolkit for Next.js
nba-topshop-scraper - Node script that will use Selenium to scrape card information from NBA Topshot including card names, rarity, and lowest cost at the moment. Data is scraped once per day.
wordpress-seo - Yoast SEO for WordPress
opengraph - A python module to parse the Open Graph Protocol
tiktok-signature - Generate tiktok signature token using node