Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
It seems this fault has been going for years, PayPal don't know why it is and say it's our fault.
I think the checkout page is hosted somewhere else?
My regular customers don't have this problem, it's the NEW customers that can't pay. I suspect PayPal save their details so checkout is faster or pre-filled?
Does anyone have this problem?
Did anyone solve it? Ta everyone, Steve
Have you ever had to manually book 50,000 flights because you rushed to deliver new features on your product?
In this episode of the Dev Interrupted podcast, we asked some of our favorite engineering leaders if they could share memorable stories of professional mistakes with our audience.
Mobile application development has increased tenfold due to the high demand for such digital platforms among users worldwide. According to a report, there are more than 3 billion mobile application users, and this is where most businesses are looking to capitalize.
Mobile application software helps businesses engage users on mobile devices, making it an attractive investment. Mobile applications offer higher engagement value for organizations, but they also help organizations generate more leads.
There are over 50+ tools and solutions available in the market for performance testing your application and services. Now it is time to check out Ddosify, a high-performance load testing tool that offers free and commercial features to test web applications and services over HTTP(S), HTTP/2, and other protocols are on their way. In this blog article, let us deep-dive into the Ddosify tool and see whether it satisfies a typical performance engineer or not.
Before we see Ddosify, let us try to understand the name of the tool. Ddosify contains Ddos term. DDoS stands for Distributed Denial of Services. Below is the Wikipedia entry for Denial of Service:
What are the leading causes of traffic flow disruptions and safety risks? Of course, we can mention accidents, which certainly disrupt the smooth flow and cause delays. To get to the root of traffic delays...
The post Six Ways How ALPR Cameras Can Improve Traffic Flow and Safety appeared first on 85ideas.com.
Hello. I am trying to check if a table definition (the default value on a constraint) is equal to UTC Time by using the following query:
IF NOT EXISTS((SELECT object_definition(default_object_id) AS definition
FROM sys.columns
WHERE name = 'ModifiedDate'
AND object_id = object_id('dbo.WorkflowAudit')) == GETUTCDATE())However, you can not compare a function (GETUTCDATE()) to this Select Statement. I need to do it this way because I am building an update script and it can only update the table IF the table definition is NOT equal to UTC TIME Any ideas? Thank you
Merge, a tech startup founded in 2020 that provides a unified API for access to myriad B2B integrations, recently announced a new partnership with UKG (Ultimate Kronos Group). As a UKG Technology Partner, Merge has built out connections to UKG’s technology suite, enabling streamlined access for end-users.
prefers-reduced-motion setting. While there is no one right way, it should be done. It’s interesting how many things might apply. Properties like transition and animation are fairly obvious, but did you think of scroll-behavior or things specifically in JavaScript (where you can also test for a preference)?list-style: none on lists will force them to not read as lists in VoiceOver. Jozsef points to Ben Meyer’s article covering similar ground.<search>. I’ve heard mostly negative things (like, why the focus on this when there are so many bigger fish to fry, like <dialog> and inert), but Sara is all for it. I agree that we might as well have an element that gives us a free role="search" like we get with <nav> and <main>.width/height and the accent-color, as Dave and I noted here. order property, you’re probably interferring here. But less obviously, hidden elements that remain interactive can confuse logical focus order.The post Some Articles About Accessibility I’ve Saved Recently IV appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
#include <iostream> // input and output code
#include<conio.h> // getch - passwd
#include<cstdio> // fileopen fscanf fileclose
#include<windows.h> // system cls and pause
using namespace std;
///////////////////////////////////////////////////CLASS EMPLOYEE /////////////////////////////////////////////////////////
class admin{
private:// variables for admin details
char name[30],id[5],position[20];
int age,Salary,experience;
//quit functions
void quit(void){
cout<<"\n\n\n Please ENTER To Go Back MAIN PAGE \n\n";
cin.get(); // get update the information key infrom user before quit
cin.get(); // get update the information key in from user before quit
}
void listEmployees(void){ //To list total employees with Name, ID and Position
system("cls"); //clear the screen
FILE *file; // to open a existed file or create a file if doesn't exist
file= fopen("data.txt", "r"); // opened file with data.txt and only able to read the data
cout<<"\n\t List of Employees of RSVV SDN.BHD\n";
cout<<"\n========================================================";
cout<<"\n= Name || Employee ID || Position =";
cout<<"\n========================================================";
//while ((fscan(file, "%[^\n]",line))!= EOF) %s//string %d//integers or numbers
// it will scan the data in the file and update the data inside the dta.txt before void quit
while(fscanf(file, "%s %s %s %d %d %d", &name[0], &id[0] , &position[0], &age, &Salary, &experience)!= EOF)
cout<<"\n"<<name<<"\t\t\t"<<id<<"\t\t\t"<<position; // update the name,id and position in the table
fclose(file); //close the created file
quit(); //calling the void quit
}
// functions to call the updated employee list
void duplistEmployees(void){ // this void to showcase the the list before edit,delete menu
system("cls"); //clear the screen
FILE *file; // to open a existed file or create a file if doesn't exist
file= fopen("data.txt", "r"); // opened file with data.txt and only able to read the data
cout<<"\n\t List of Employees in RSVV SDN.BHD\n";
cout<<"\n========================================================";
cout<<"\n= Name || Employee ID || Position =";
cout<<"\n========================================================";
//while ((fscan(file, "%[^\n]",line))!= EOF) %s//string %d//integers or numbers
// it will scan the data in the file and update the data inside the dta.txt before void quit
while(fscanf(file, "%s %s %s %d %d %d", &name[0], &id[0] , &position[0], &age, &Salary, &experience)!= EOF)
cout<<"\n"<<name<<"\t\t\t"<<id<<"\t\t\t"<<position; // update the name,id and position in the table
fclose(file); //close the created file
}
void showDetails(void){ //Displays all details according to Employee's id
duplistEmployees(); // calling the updated employee list
char checkId[5]; // declare to check if got any exist id
cout<<"\n\nPlease Enter the Employee ID: ";
cin>>checkId;
FILE *file;
file= fopen("data.txt", "r"); // open the file and read the file data
//while ((fscan(file, "%[^\n]",line))!= EOF) %s//string %d//integers or numbers
while(fscanf(file, "%s %s %s %d %d %d", &name[0], &id[0] , &position[0], &age, &Salary, &experience)!=EOF)
if(strcmp(checkId,id)==0){ //checking the inputted variable with the existing variable is yes so the permission access given
cout<<"\n---------------------";
cout<<"\nEmployee Name: "<<name;
cout<<"\n---------------------";
cout<<"\nEmployee Id: "<<id;
cout<<"\n---------------------";
cout<<"\nEmployee Position: "<<position;
cout<<"\n---------------------";
cout<<"\nEmployee Age: "<<age;
cout<<"\n---------------------";
cout<<"\nEmployee Salary: "<<Salary;
cout<<"\n---------------------";
cout<<"\nEmployee Experience: "<<experience;
cout<<"\n---------------------";
}
fclose(file); //close the opened file
quit(); //calling the quit function
}
void editExisting(void){ //edit the existing employee list
duplistEmployees(); //calling out updated employee list
char checkId[5];
cout<<"\nPlease Enter Employee ID To Edit: ";
cin>>checkId;
char newPosition[10];
cout<<"\n-----------------------------";
cout<<"\nPlease Enter The New Position Of The Employee: ";
cin>>newPosition; // key in newposition of the employee
int newSalary;
cout<<"------------------------------";
cout<<"\nPlease Enter The New Salary Of The Employee: ";
cin>>newSalary; //key in the newSalary of the employee
FILE *file, *tempfile; // to open a existed file or create a file if doesn't exist // create a temp file as well
file= fopen("data.txt", "r"); // file manipulation method
tempfile= fopen("temp.txt", "w"); //using temp file manipulation method
//while ((fscan(file, "%[^\n]",line))!= EOF) %s//string %d//integers or numbers
while(fscanf(file, "%s %s %s %d %d %d", &name[0], &id[0] , &position[0], &age, &Salary, &experience)!=EOF){
if(strcmp(checkId, id)==0)
fprintf(tempfile, "%s %s %s %d %d %d \n", name, id, newPosition, age, newSalary, experience );
else
fprintf(tempfile, "%s %s %s %d %d %d \n", name, id, position, age, Salary, experience );
}
fclose(file);
fclose(tempfile);
int isRemoved= remove("data.txt"); // remove the content of the data.txt
int isRenamed= rename("temp.txt", "data.txt"); //change the temp file data into data.txt file.
quit();
}
void addNewEmployee(void){ //adding records
system("cls"); //clear the screen
duplistEmployees(); // calling out the updated employee list
cout<<"\n----------------------------------------";
cout<<"\n PLease Enter The Name of New Joined Employee: ";
cin>>name;
cout<<"\n----------------------------------------";
cout<<"\n Please Enter The New Joined Employee ID [MAX 4 digits]: ";
cin>>id;
cout<<"\n----------------------------------------";
cout<<"\n Please Enter The New Joined Employee Position: ";
cin>>position;
cout<<"\n----------------------------------------";
cout<<"\n Please Enter The New Joined Employee Age: ";
cin>>age;
cout<<"\n----------------------------------------";
cout<<"\n Please Enter The New Joined Employee Salary: ";
cin>>Salary;
cout<<"\n----------------------------------------";
cout<<"\n Please Enter The New Joined Employee Experience (IF NO EXPERIENCE PUT '0'): ";
cin>>experience;
cout<<"\n----------------------------------------";
char ch;
cout<<"\nPlease Enter 's' TO Save The Employee's Information\n";
cin>>ch;
if(ch=='s'||ch=='S'){
FILE *file; // to open a existed file or create a file if doesn't exist
file= fopen("data.txt","a"); //open a data.txt file without changing the content
fprintf(file, "%s %s %s %d %d %d \n", name, id, position, age, Salary, experience );
fclose(file);
cout<<"\nA New Employee Has Been Added To The System\n";
}
else
addNewEmployee();
quit();
}
void deleteEmployeeDetails(void){ //removing records
duplistEmployees();
char checkId[5];
cout<<"\n----------------------------------";
cout<<"\nPlease Enter The Employee Id: ";
cin>>checkId;
char ch;
cout<<"----------------------------------";
cout<<"\n\n\n\n\n\n Do you want to remove this employee?";
cout<<"\n\n\n\n\nCONFIRMATION!!!\nEnter 'r' To Confirm Deletion \n";
cin>>ch;
if(ch=='r'||ch=='R'){
FILE *file, *tempfile; // to open a existed file or create a file if doesn't exist // create a temp file as well
file= fopen("data.txt", "r");
tempfile= fopen("temp.txt", "w");
//while ((fscan(file, "%[^\n]",line))!= EOF) %s//string %d//integers or numbers
// it will scan the data in the file and update the data inside the dta.txt before void quit
while(fscanf(file, "%s %s %s %d %d %d", &name[0], &id[0] , &position[0], &age, &Salary, &experience)!=EOF)
if(strcmp(checkId, id)!=0)
fprintf(tempfile, "%s %s %s %d %d %d \n", name, id, position, age, Salary, experience );
fclose(file); //close the create file
fclose(tempfile); //close the create temo file
int isRemoved= remove("data.txt"); //remove the data file
int isRenamed= rename("temp.txt", "data.txt"); //change temp.txt as the data.txt
cout<<"\nRemoved Successfully\n";
quit();
}
else
deleteEmployeeDetails();
}Freedom has always been the cornerstone of technology. And yet, there is no freedom without options. For example, users should have a choice in how they pay for digital goods offered in-app. Although the Supreme Court’s recent decision in the battle between Epic Games and Apple was mixed, the judges ruled Apple cannot stop developers from directing users to other methods of payment in their apps. That’s good news for app developers looking for alternatives.
There are many different options for hosting payments — in-app or on the web, developing an actual web app that would not require mandatory taxes, a hybrid of in-app and outside the app, and so on. The options are ever-changing, so it can be difficult to keep up.
Every day, the ProgrammableWeb team is busy, updating its three primary directories for APIs, clients (language-specific libraries or SDKs for consuming or providing APIs), and source code samples.
There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented social images on their websites. They had to code a lot of things on their own. But the landscape is changing and tools are available to smooth the process.
In this tutorial, we are going to create our own automated social images with HTML and CSS, integrate them to an Eleventy blog — mostly by configuration — and deploy our site to Netlify.
If you really, really can’t wait, check the result or browse the project!
In the <head> section of HTML, we insert a few Open Graph markups:
<meta property="og:title" content="The blue sky strategy" />
<meta property="og:description" content="Less clouds, more blue" />
<meta property="og:image" content="/sky-with-clouds.jpg" />When we share this page on Facebook, we and our friends see this:
LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage… All these sites behave pretty much the same way: they provide a visual “card” that accompanies the link, giving it more space and context.
Twitter has its own set of markups with its Twitter Cards, but they are very similar. And Twitter falls back to Open Graph when it can’t find them.
It is natural for our pages to have a title and a description. But in the screenshot above, they are quite small compared to the space and attention the picture of sky and clouds gets — not to mention the size of the clickable area. That’s the power of the social image. It’s easy to understand the impact these images can have when a link is shared.
Not all social images are created equal. These are not official terms, but let’s consider numbered “levels” on how impactful these social image cards can be.
The most basic social image is no image. The link might be lost in a sea of content with the small area and not much visual.
A classic technique is to create a site-wide social image. While this solution might seem to offer a good outcome-to-effort ratio, one could argue this is worse than no image at all. Sure, we get some attention, but the reaction might be negative, especially if people see a lot of links to this website that all look the same. It risks feeling repetitive and unnecessary.
The next level is standard in blogs and media sites: the social image of a post. Each post has its own featured image, and they differ from one post to another. This practice is totally legitimate for a news site, where the photo complements the page content. The potential drawback here is that it requires effort to find and create artwork for each and every published post.
That might lead to a bit of laziness. We’ve all been exposed to images that are obviously stock photos. It might get attention, but perhaps not the kind of attention you actually want.
The final level: per-page, content-rich, meaningful social images. CSS-Tricks is doing just this. The team’s social images are branded. They share the same layout. They mention the post title, along with the author’s name and profile picture, something the regular title and description could not show. They grab attention and are memorable.
There is an obvious requirement with this approach: automation. It is out of question to create unique images for every possible link. Just think of the overhead. We’d need some programmatic solution to help with the heavy lifting.
To give ourselves a nice little excuse (and sandbox) to build out unique social images, we’ll put together a quick blog. When I write and publish an article to this blog, I follow a quick two-step process:
This is when social images must shine. We want to give our blog its best shot at being noticed. But that’s not our only goal. This blog should establish our personal brand. We want our friends, colleagues, and followers to remember us when they see our social posts. We want something that’s repeatable, recognizable, and representative of ourselves.
Creating a blog is a lot of work. Although automated social images are cool, it’s unwise to spend too much time on them. (Chris came to the same conclusion at the end of 2020). So, in the interest of efficiency, we’re making an Eleventy site. Eleventy is a simple static site generator. Instead of starting from scratch, let’s use one of the starter projects. In fact, let’s pick the first one, eleventy-base-blog.
Visit the eleventy-base-blog GitHub page and use it as a template:
Let’s create the repository, and set a repository name, description. We can make it public or private, it doesn’t matter.
Next, we clone our repository locally, install packages, and run the site:
git clone [your repo URL]
cd my-demo-blog ### Or whatever you named it
npm install
npm run serveOur site running is running at http://localhost:8080.
Now let’s deploy it. Netlify makes this a super quick (and free!) task. (Oh, and spoiler alert: our social images automation relies on a Netlify Function.)
So, let’s go to Netlify and create an account, that is, if you don’t already have one. Either way, create a new site:
Go through the process of allowing Netlify to access the blog repository.
Netlify deploys our site:
After a minute or so, the blog is deployed:
Our social images are going to be based on an image template. To design this template, we are going to use the technologies we already know and love: HTML and CSS. HTML doesn’t turn itself into images auto-magically, but there are tools for this, the most famous being headless Chrome with Puppeteer.
However, instead of building our social image stack ourselves, we use the Resoc Image Template Development Kit. So, from the project root we can run this in the terminal:
npx itdk init resoc-templates/default -m title-descriptionThis command creates a new image template in the resoc-templates/default directory. It also opens up in a new browser window.
We could use this template as-is, but that only gets us to Level 2 on “impactful” spectrum. What we need to make this go all the way up to Level 3 and match the CSS-Tricks template is:
If we head back to the browser, we can see in the Parameters panel of the template viewer that the template expects two parameters: a title and description. That’s just the template we chose when we ran -m title-description in the terminal as we set things up. But we can add more parameters by editing resoc-templates/default/resoc.manifest.json. Specifically, we can remove the second parameter to get:
{
"partials": {
"content": "./content.html.mustache",
"styles": "./styles.css.mustache"
},
"parameters": [
{
"name": "title",
"type": "text",
"demoValue": "A picture is worth a thousand words"
}
]
}The viewer reflects the change in the browser:
It’s time to design the image itself, which we can do in resoc-templates/default/content.html.mustache:
<div class="wrapper">
<main>
<h1>{{ title }}</h1>
</main>
<footer>
<img src="profil-pic.jpg" />
<h2>Philippe Bernard</h2>
</footer>
</div>That’s just regular HTML. Well, except {{ title }}. This is Mustache, the templating framework Resoc uses to inject parameter values into the template. We can even type some text in the “Title” field to see it working:
Looking at the previews, notice that we’re missing an image, profil-pic.jpg. Copy your best profile picture to resoc-templates/default/profil-pic.jpg:
It’s time to write the CSS in resoc-templates/default/styles.css.mustache. The point of this post isn’t how to style the template, but here’s what I ended up using:
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Raleway&display=swap');
.wrapper {
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
h1 {
text-align: right;
margin: 2vh 3vw 10vh 20vw;
background: rgb(11,35,238);
background: linear-gradient(90deg, rgba(11,35,238,1) 0%, rgba(246,52,12,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-family: 'Anton';
font-size: 14vh;
text-transform: uppercase;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
h2 {
color: white;
margin: 0;
font-family: 'Raleway';
font-size: 10vh;
}
footer {
flex: 0 0;
min-height: 20vh;
display: flex;
align-items: center;
background: rgb(11,35,238);
background: linear-gradient(90deg, rgba(11,35,238,1) 0%, rgba(246,52,12,1) 100%);
padding: 2vh 3vw 2vh 3vw;
}
footer img {
width: auto;
height: 100%;
border-radius: 50%;
margin-right: 3vw;
}Most of the sizes rely on vw and vh units to help anticipate the various contexts that the template might be rendered. We are going to follow Facebook’s recommndations, which are 1200×630. Twitter Cards, on the other hand, are sized differently. We could render images in a low resolution, like 600×315, but let’s go with 1200×630 so we we only need to work in pixels.
The viewer renders the Facebook preview at 1200×630 and scales it down to fit the screen. If the preview fulfills your expectations, so will the actual Open Graph images.
So far, the template matches our needs:
There is one little thing to add before we are done with the template. Some of our blog posts will have images, but not all of them. In situations where a post doesn’t have an image, it would be cool to use the image to fill the space on the left.
This is a new template parameter, so we need to update resoc-templates/default/resoc.manifest.json once again:
{
"partials": {
"content": "./content.html.mustache",
"styles": "./styles.css.mustache"
},
"parameters": [
{
"name": "title",
"type": "text",
"demoValue": "A picture is worth a thousand words"
},
{
"name": "sideImage",
"type": "imageUrl",
"demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-371589.jpeg"
}
]
}Let’s declare an additional div in resoc-templates/default/content.html.mustache:
<div class="wrapper">
<main>
{{#sideImage}}
<div class="sideImage"></div>
{{/sideImage}}
<h1>{{ title }}</h1>
</main>
<footer>
<img src="profil-pic.jpg" />
<h2>Philippe Bernard</h2>
</footer>
</div>The new {{#sideImage}} ... {{/sideImage}} syntax is a Mustache section. It’s only present when the sideImage parameter is defined.
We need a little extra CSS to handle the image. Notice that we’re able to use the Mustache syntax here to inset the background-image value for a specific post. Here’s how I approached it in the resoc-templates/default/styles.css.mustache file:
{{#sideImage}}
.sideImage {
position: absolute;
width: 100%;
height: 100%;
background-image: url({{{ sideImage }}});
background-repeat: no-repeat;
background-size: auto 150vh;
background-position: -35vw 0vh;
-webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,0.5), transparent 40%);
}
{{/sideImage}}Our template looks great!
We commit our template:
git add resoc-templates
git commit -m "Resoc image template"Before we automate the social images, let’s generate one manually, just as a teaser. The viewer provides a command line to generate the corresponding image for our testing purposes:
Copy it, run it from a terminal and open output-image.jpg:
OK, so we created one image via the command line. What should we do now? Call it as many times as there are pages on our blog? This sounds like a boring task, and there is a deeper issue with this approach: time. Even if creating a single image took something like two seconds, we can multiply by the number of pages and we easily see the effort grow and grow.
The original Eleventy blog template is generated almost instantly, but we should wait about a minute for something as marginal as social images? This is not acceptable.
Instead of performing this task at build time, we are going to defer it, lazy style, with a Netlify Function and a Netlify on-demand builder. Actually, we aren’t actually dealing directly with a Netlify Function — an Eleventy plugin is going to handle this for us.
Let’s install that now. We can add the Resoc Social Image plugin for Eleventy, along with its companion Netlify plugin, with this command:
npm install --save-dev @resoc/eleventy-plugin-social-image @resoc/netlify-plugin-social-imageWhy two plugins? The first one is dedicated to Eleventy, while the second one is framework-agnostic (for example, it can be used for Next.js).
Edit .eleventy.js at the root of the project so that we’re importing the plugin:
const pluginResoc = require("@resoc/eleventy-plugin-social-image");Configure it near the top of .eleventy.js, right after the existing eleventyConfig.addPlugin:
eleventyConfig.addPlugin(pluginResoc, {
templatesDir: 'resoc-templates',
patchNetlifyToml: true
});templatesDir is where we stored our image template. patchNetlifyToml is asking the plugin to configure @resoc/netlify-plugin-social-image in netlify.toml for us.
We want all our pages to have automated social images. So, let’s open the master template, _includes/layouts/base.njk, and add this near the top of the file:
{% set socialImageUrl %}
{%- resoc
template = "default",
slug = (title or metadata.title) | slug,
values = {
title: title or metadata.title,
sideImage: featuredImage
}
-%}
{% endset %}This declares a new variable named socialImageUrl. The content of this variable is provided by the resoc short code, which takes three parameters:
template is the sub directory of our template (it is in resoc-templates/default).slug is used to build the social image URL (e.g. /social-images/brand-new-post.jpg). We slug-ify the page title to provide a unique and sharable URL.values are the content, as defined in resoc-templates/default/resoc.manifest.json. title is obvious, because pages already have a title. sideImage is set to a meta named featuredImage, which we are going to define for illustrated pages.Now we can open up _includes/layouts/base.njk, place our cursor in the <head>, add some new markup to populate all that stuff
<meta name="og:title" content="{{ title or metadata.title }}"/>
<meta name="og:description" content="{{ description or metadata.description }}"/>
<meta name="og:image" content="{{ socialImageUrl }}"/>
<meta name="og:image:width" content="1200"/>
<meta name="og:image:height" content="630"/>The title and description markups are similar to the existing <title> and <meta name="description">. We’re using socialImageUrl as-is for the og:image meta. We also provide the social image dimensions to round things out.
Automated social images are ready!
When we deploy the blog again, all pages will show the text-only version of our template. To see the full version , we assign an image to an existing page. that requires us to edit one of the posts — I created four posts and am editing the fourth one, posts/fourthpost.md — so there’s a featuredImage entry after the existing meta:
---
title: This is my fourth post.
description: This is a post on My Blog about touchpoints and circling wagons.
date: 2018-09-30
tags: second tag
layout: layouts/post.njk
featuredImage: https://resoc.io/assets/img/demo/photos/pexels-pixabay-459653.jpg
---Using an external URL is enough here, but we normally drop images in an img directory with Eleventy and provide the base URL once and for all in _includes/layouts/base.njk.
Build the site again:
npm run buildWhen running git status, we might notice two modified files in addition to the ones we edited ourselves. In .gitignore, the plugin added resoc-image-data.json. This file stores our social image data used internally by the Netlify plugin, and netlify.toml now contains the Netlify plugin configuration.
Deploy time!
git commit -a -m "Automated social images"
git pushNetlify is notified and deploys the site. Once the latest version is online, share the homepage somewhere (e.g. Slack it to yourself or use the Facebook debugger). Here’s how the social card looks for the homepage, which does not contain an image:
And here’s how it looks for a post that does contain an image:
Perfect!
So far, automated social images have mostly been a matter of developers willing to explore and play around with lots of different ideas and approaches, some easy and some tough. We kept things relatively simple.
With a few lines of code, we were able to quickly setup automated social images on a blog based on Eleventy and hosted on Netlify. The part we spent the most time on was the image template, but that’s not a problem. With the viewer and Mustache already integrated, we focused on what we know, love, and value: web design.
Hopefully something like the Resoc image template dev kit and its related tools will help make the automated social images go from being a niche hobby into the mainstream.
The post Create Your Own Automated Social Images With Resoc appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
Just want to find here some friends and like-minded people :)
Do you want to optimize your RSS feed in WordPress?
Every WordPress site has an RSS feed by default. You can optimize this feed to protect your content, send more traffic to your site, and more.
In this article, we’ll show you how to optimize and customize your RSS feeds the right way.
RSS feeds offer a way for your readers to subscribe and read your blog posts in their favorite feed reader apps like Feedly.
Even though feed readers aren’t as popular as they once were, there are still many readers who prefer to read WordPress blog content this way.
By optimizing your RSS feed you can also prevent content scraping, get more backlinks, send traffic to your site, and more.
With that said, let’s get into our expert tips for optimizing your RSS feed.
An RSS sitemap is different from an XML sitemap. RSS sitemaps only contain your most recent content, which helps Google to keep your content fresher in search results.
If you publish content frequently, then this can lead to a boost in your search engine rankings.
All in One SEO allows you to add an RSS sitemap to your website easily, without having to code.
The first thing you need to do is install and activate the All in One SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you’ll be prompted to set up the plugin. You can follow the guided steps in the setup wizard, or see our guide on how to set up All in One SEO for WordPress.
AIOSEO enables RSS sitemaps automatically, so there’s nothing else you need to do.
If you’d like to double check, simply go to All in One SEO » Sitemap and then click on the ‘RSS Sitemap’ tab.
You can see that the ‘Enable Sitemap’ toggle in the ‘RSS Sitemap’ box is already enabled.
You can also set the number of posts and the post types you want to include in the ‘Sitemap Settings’ box.
We’ll leave the default settings, but you can include more posts or only include certain post types.
Before you leave the screen, make sure to click the ‘Save Changes’ button.
Now you’ve enabled your RSS sitemap for your website.
To submit your new RSS sitemap to Google, you can see our guide on how to add your WordPress site to Google Search Console. It’s the same process as submitting an XML sitemap.
By default, WordPress RSS feeds will show your recent post content, and there’s no built-in option to customize that content for your readers.
Luckily you can use the All in One SEO plugin to easily customize your RSS feed before and after content.
Simply follow the same steps as above to install, activate, and set up the plugin.
After that, navigate to All in One SEO » General Settings and then click the ‘RSS Content’ menu option.
On this screen, you can add any content you want to display before and after each post in your RSS feed.
You can add HTML, smart tags for links, and other metadata to each section.
Once you’re satisfied with your changes, make sure to click the ‘Save Changes’ button to save your RSS feed.
Content scraping is when content is taken your site, usually via your RSS feed, and republished on someone else’s site as their own.
It can be very frustrating to see someone stealing your content, monetizing it, and even outranking your website in the search results.
Luckily, you can customize your RSS feed to actually benefit your site if someone steals your content via your RSS feed.
For more details, see our beginner’s guide to preventing blog content scraping in WordPress.
Showing your full article in the RSS feed lets your users read the entire article in their feed reader. This can negatively affect your page views, advertising revenue, and conversion rates.
By showing the article summary instead of the full article in your RSS feed, you require readers to come to your WordPress website to read the full post.
WordPress comes with a built-in solution. Simply go to Settings » Reading in your WordPress admin dashboard.
Then, scroll down to the section titled ‘For each post in a feed, include’ and select the ‘Excerpt’ radio button.
You can also control the number of posts that display in your RSS feed as well.
In the ‘Syndication feeds show the most recent’ box, simply enter a number into the box.
Before you leave this screen, make sure to click the ‘Save Changes’ button to update your RSS feed settings.
By default, WordPress doesn’t add your post featured images to your RSS feed. When your users read your post in a feed reader, it’ll often pull the first image in your post.
You can change this by adding code to your WordPress files. If you haven’t done this before, then see our beginner’s guide to pasting snippets from the web into WordPress.
All you need to do is add the following code to your functions.php file, in a site specific plugin, or by using a code snippets plugin.
function wpb_rsstutorial_featuredimage($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'wpb_rsstutorial_featuredimage');
add_filter('the_content_feed', 'wpb_rsstutorial_featuredimage');
This code simply adds your featured image inside a paragraph just before the post content.
Many WordPress sites use custom post types to create separate sections from regular blog articles.
For example, here at WPBeginner, we created separate custom post types for our Deals and Glossary sections.
If you publish a lot of content using different custom post types, then you’ll want to add these to your main feed.
To do this, you’ll need to add the following code to your functions.php file, in a site specific plugin, or by using a code snippets plugin.
function myfeed_request($qv) {
if (isset($qv['feed']) && !isset($qv['post_type']))
$qv['post_type'] = array('post', 'books', 'movies');
return $qv;
}
add_filter('request', 'myfeed_request');
This code adds two custom post types, ‘books’ and ‘movies’, to the main RSS feed. Make sure you replace these with your own custom post types.
Adding additional text to your post titles in RSS can be helpful if you create multiple kinds of post content.
For example, this can help your readers distinguish between guest posts, regular blog content, and sponsored content.
Here’s a code snippet you can use to display the post category in the title:
function wpb_rsstutorial_titlecat($content) {
$postcat = "";
foreach((get_the_category()) as $cat) {
$postcat .= ' ('.$cat->cat_name . ')';
}
$content = $content.$postcat;
return $content;
}
add_filter('the_title_rss', 'wpb_rsstutorial_titlecat');
For more details and examples, see our guide on how to completely customize your WordPress RSS feeds.
Not all your users want to use a feed reader to subscribe to your posts. A lot of people will prefer to subscribe by email instead. That’s one reason why having an email newsletter is important.
To send RSS emails automatically, we recommend using Sendinblue. It’s a popular email marketing service provider that has a forever free plan to send up to 300 emails a day.
Once your email list is set up, you can automatically send RSS emails when you publish a new blog post.
For more details, see our guide on how to notify subscribers of new posts in WordPress.
Each category on your WordPress site will automatically have its own RSS feed. If you run a massive blog with many diverse categories, then this lets your readers only subscribe to categories that interest them.
However, a lot of users don’t realize they can easily subscribe to specific categories. You can make this easier on your readers by highlighting this on your website.
For more details, see our guide on how to make separate RSS feed for each category in WordPress.
Custom fields let you add extra metadata to your WordPress posts and pages. However, this metadata isn’t included in your default RSS feed.
To display custom fields in your RSS feed, simply add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.
function wpb_rsstutorial_customfield($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$custom_metadata = get_post_meta($postid, 'my_custom_field', true);
if(is_feed()) {
if($custom_metadata !== '') {
// Display custom field data below content
$content = $content."<br /><br /><div>".$custom_metadata."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpb_rsstutorial_customfield');
add_filter('the_content', 'wpb_rsstutorial_customfield');
This code checks if the custom field is being used and if the RSS feed is being displayed. After that, it will add the custom field data below the post content.
Delaying posts from appearing in your RSS feed can save you from accidental publishing and can help you beat content scrapers, if that’s an issue you regularly face.
When you delay posts from appearing in your RSS feed, you give the search engines time to crawl and index your content before it appears elsewhere.
Plus, you can check for any typos before it gets sent out to RSS subscribers.
To do this, you’ll need to add the following code to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.
function publish_later_on_feed($where) {
global $wpdb;
if ( is_feed() ) {
// timestamp in WP-format
$now = gmdate('Y-m-d H:i:s');
// value for wait; + device
$wait = '10'; // integer
// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
$device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR
// add SQL-sytax to default $where
$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
}
return $where;
}
add_filter('posts_where', 'publish_later_on_feed');
This code will add a 10 minute delay before posts appear in your RSS feed. You can change it to your own needs by changing the 10 and MINUTE values.
Most RSS feed readers don’t have social sharing features, or they’re not very noticeable. However, you can add your own social media icons to your RSS feed to encourage sharing.
First, you’ll need to create image icons for the social media networks you want to add. For this tutorial, we created images for Facebook and Twitter and uploaded them by going to Media » Add New.
After you upload your image files, you need to copy the ‘File URL’ and paste it into your favorite text editor to save it for the next step.
For more details, see our guide on how to get the URL of images you upload in WordPress.
Next, you need to add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.
// add custom feed content
function wpb_add_feed_content($content) {
// Check if a feed is requested
if(is_feed()) {
// Encoding post link for sharing
$permalink_encoded = urlencode(get_permalink());
// Getting post title for the tweet
$post_title = get_the_title();
// Content you want to display below each post
// This is where we will add our icons
$content .= '<p>
<a href="http://www.facebook.com/sharer/sharer.php?u=' . $permalink_encoded . '" title="Share on Facebook"><img src="Facebook icon file url goes here" title="Share on Facebook" alt="Share on Facebook" width="64px" height="64px" /></a>
<a href="http://www.twitter.com/share?&text='. $post_title . '&url=' . $permalink_encoded . '" title="Share on Twitter"><img src="Facebook icon file url goes here" title="Share on Twitter" alt="Share on Twitter" width="64px" height="64px" /></a>
</p>';
}
return $content;
}
add_filter('the_excerpt_rss', 'wpb_add_feed_content');
add_filter('the_content', 'wpb_add_feed_content');
This code above will simply add the social sharing buttons for Twitter and Facebook. You need to replace the src= attribute in the image tag with your own image URLs that you pasted into your text editor earlier.
If you’ve optimized your RSS feed and are seeing errors, then see our guide on how to fix RSS feed errors.
We hope this article helped you learn how to optimize your WordPress RSS feed. You may also want to see our expert picks on the best email marketing services for small businesses and our guide on how to choose the best website builder.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post 12 Tips to Optimize Your WordPress RSS Feed (Quick & Easy) appeared first on WPBeginner.
