DEV Community: IONOS

Why clean code makes JavaScript programming easier

Chas Richards — Tue, 16 Jan 2024 15:06:56 +0000

From the perspective of a Frontend Developer

I am a qualified Frontend Developer and work at IONOS as Community Relations Manager, where I am responsible for Developer Relations. For years, I have been observing that the topic of clean code is becoming relevant again and again, which is why I am sharing the experiences I have had with it.

JavaScript is one of the most popular programming languages in the world, and for me as a Frontend Developer, JavaScript has become indispensable. The scripting language, which is often associated with interactive websites, makes it possible to create dynamic websites, control user interactions and develop modern web applications.

Anyone who has worked with this programming language knows how important it is to be able to understand your own code or the code of others. For me, writing so-called clean code is therefore an essential skill that you should master. At the latest at the next code review or for a new project with a new development team, the question will come up at some point: What does clean code actually mean to you?

Why is clean code important to me?
After more than 5 years of working from home, I have personally realized how important clean code is in a software project. Short-term agreements within a team are becoming more and more complex, as the daily routine is characterized by more meetings due to physical separation. Pair programming with a face-to-face exchange is taking place less and less frequently, and code reviews are also shorter and reduced to the essentials. Whereas face-to-face meetings can sometimes go into more detail and provide further impulses.

My criteria for clean code

Readability and comprehension

Clean code is particularly important when it comes to the readability and comprehensibility of the code. If I work in a team, I have to make sure that my code is readable and understandable for all team members so that collaboration can work smoothly. There’s nothing worse than when the next code review only raises questions about the code you’ve written.

Example: Meaningful and readable variables

❌ Difficult

“foo”, for example, is often used as a placeholder in programming if you don’t have a suitable variable name to hand. Make sure you avoid this at the productive level.

const foo = moment().format('DD.MM.YYYY');

✅ Better

Use names that are meaningful and that people know immediately what they are talking about. Programming languages are international, so everyone should be able to read your code, so make sure you use English words for your variables. This applies not only to variables, but also to functions.

const CURRENT_DATE = moment().format('DD.MM.YYYY');

Maintainability

Another point is the maintainability of my written code. The more complex the code, the more time-consuming maintainability becomes, as it becomes more difficult to identify and rectify errors. If the requirements change, it is also guaranteed that every team member can find and change the part to be changed more quickly. Maintainability is essential for large projects. Due to the large amount of source code, you can quickly lose track of things and no longer find your way around your own code.

Example: Searchable variable names

❌ Difficult

In this example, it is not clear what this high number means. Make sure you give it a searchable name.

setInterval(close, 86400000);

✅ Better

Constants, in this case “const”, allow you to assign fixed and non-overwritable variables. Perfect for the fixed milliseconds per day. These constants are always capitalized and written in snake case. Always name them so that you can find them again in the future.

const MILLISECONDS_PER_DAY = 86400000;
setInterval(close, MILLISECONDS_PER_DAY);

Example: Array methods

❌ Difficult

In my opinion, the For loop is one of the most frequently used functions in JavaScript and, as you can see from its structure, it is also very error-prone. In addition, the For loop also returns the empty fields in an array. This can lead to confusion, as you always have to check carefully that no errors have occurred during iteration.

const studentsGrades = [3, , 1, 2, , 2, 5];

for (i = 0; i < studentsGrades.length; i++) {
  console.log(studentsGrades[i]);
}

//Output: 3, undefined, 1, 2, undefined, 2, 5

✅ Better

If you use the predefined array methods, the “forEach” function is the best choice for the same example. This shortens the regular For loop and also automatically does not output the empty fields. The readability of the code also plays a very important role here.

const studentsGrades = [3, , 1, 2, , 2, 5];

studentsGrades.forEach((studentGrade) => {
  console.log(studentGrade);
});

//Output: 3, 1, 2, 2, 5

Professionalism

In my opinion, writing clean code also demonstrates professionalism. Those who value high quality also show this in their code and at the same time take care of high-quality software. Clean code therefore also acts as a business card.

Conclusion

Writing clean code not only helps you, but also your team and is essential for every software developer. The examples above are based on my experience and are only intended as a guide. It is only a fraction of what is possible with clean code.

Writing clean code should not be a one-time process. You should want to continuously improve and simplify your code so that it always remains readable and maintainable. The more often you deal with the topic, the better and faster you will write your code in the future and the easier it will be to collaborate with your team.

Further links:

How to Incorporate GitHub and CI/CD Deployments into Your Web Agency's Workflow

Robert Schleinhege — Tue, 18 Apr 2023 10:34:43 +0000

As a Product Owner for Deploy Now, I've interviewed many agencies. Roughly half of them use tools like GitHub to collaborate on their code. A minority works with CI/CD pipelines. Why? Well, because they don't necessarily need to. The average client project is relatively small: Maybe a landing page with a blog section. A single developer can easily develop the project locally to then upload it via SSH for a final check by the client. Bringing new skills to the team and automating processes is an investment. As a smaller agency, you need to decide whether working on another client project instead would be the wiser decision.

However, I strongly believe that an investment into GitHub and CI/CD team workflows can be a game changer for your agency. There is a whole world to explore for your team. You will likely see efficiency, code quality and client satisfaction will increase already after a couple of weeks. GitHub and CI/CD are growing ecosystems with more and more tools that lower the hurdles of working with them.

If you decide to go down this route with your agency, I would suggest you take the following steps. You can take as much time for each one as it feels right to you and your team.

1. Train your team in Git best practices

Each team member that will work on code, and ideally also surrounding stakeholders like designers and writers, should be familiar with these concepts:

Version control
Local and remote repositories
Branches and pull requests
Git clone, git checkout, git add, git commit and git push

Read more in our comprehensive onboarding to Git.
After learning these concepts, discuss with your team how you plan to apply them. Create a GitHub organization and start experimenting.

2. Build up a set of sample repos

No one starts each client project from scratch. No matter which tech stack you work with, you will find countless repositories with sample code in GitHub. So it's worth looking around for reusable parts for your client projects. Of course, always check for potential copyright violations and code quality.

You might end up maintaining a set of repositories for different use cases such as landing pages, blogs, shops or portals in your GitHub organization. These serve as great starting points you can clone for new projects.

3. Set up the first working CI/CD pipeline

The next step is to deploy what is inside your repository. Ideally, each git push to your main branch leads to an automated build and deployment to some kind of infrastructure. Since you are working with GitHub already, it makes a lot of sense to let GitHub Actions take care of this. To learn more about the tool, you can read our introduction to GitHub Actions.

Build and deployment steps are specified in a yaml file that describes your GitHub Actions workflow. GitHub runs your build steps on their own virtual machines every time the workflow is triggered, e.g. by a git push. To successfully deploy your website, you need to authenticate with some kind of infrastructure.

If you are working with static site generators, single page applications or PHP Apps, Deploy Now can ease this process. Simply connect a repository, specify your build steps and Deploy Now will set up the workflow, hosting and TLS for you.

4. Get used to the process for some iterations

Now, the fun part begins. Each team member can open branches, work on it locally, push changes and open a pull request to main for someone else to review. Once the pull request is accepted, you can watch your site being built, deployed and going live.

This is already a pretty decent setup to work on some client projects and finetune your workflows here and there. All steps following can be viewed as optional extensions.

5. Add staging and automated tests to your workflow

Even though someone now reviews code before it is merged to main, you're still not 100% sure if the code will work as expected. To mitigate this, you can add automated tests to your CI/CD workflow. I described how you can run and visualize Lighthouse tests in GitHub Actions here.

However, QA processes are hard to automate completely. Staging environments give you the option to manually preview websites before they go live. If you are working with multiple branches already, why not deploy them just as you deploy your main branch? Many hosting tools such as Deploy Now provide an out-of-the-box feature for this without extra costs. Simply open a new branch and watch it being deployed under a preview-URL. If the website looks good, merge your changes to the main branch. Here are 5 reasons how staging processes can help your agency be more successful.

6. Incorporate clients in rollout processes

Now you can make code udpates to a branch, stage it for preview, and then roll it out to production. You can do two things to make your client part of this project:

Provide them with access to your staging environments, so they can review updates as well. This is especially helpful before your initial go-live. You could even use tools like GitHub issues to collect client feedback right on GitHub.
Send them notifications if you deploy to production. You can easily automate this in your GitHub Actions workflow, e.g. by using the Slack notification action from the GitHub Actions marketplace.

7. Enable synergies across client projects

We've talked about building up a set of starter repositories you can clone for new projects in step 2. But wouldn't it be great to keep re-used code centralized for similar projects, instead of distributing it to many repositories? Centralization makes it especially efficient to distribute updates to all your projects across the project lifecycle.

If your projects are sufficiently similar to each other, I would suggest to maintaining their code in a single repository and use persistent files and database content to customize them. The latter would remain unaffected from new deployments. You can read here how a Deploy Now user deploys from one repository to multiple environments using the Multi Deployments feature.

I wish you and your team a lot of fun and success exploring!

Shared Hosting vs. VPS Hosting: Which Solution is Right for Your Business?

Robert Schleinhege — Tue, 28 Mar 2023 09:12:22 +0000

Are you looking for a hosting solution for your website or application? One of the first things you'll need to decide is which hosting option you need: Shared hosting or VPS (Virtual Private Server) hosting. Let's discuss the differences between these two options so you can determine which solution is the perfect fit for your project.

What is Shared Hosting?

Shared hosting is the simplest form of hosting. Multiple websites share the resources of a single web server. Your website resides on a server alongside other websites, and all the server resources, such as CPU, memory, and storage, are shared equally among all the users on that server.

Shared hosting is an affordable option for hosting your website because the costs of maintaining the server are split between multiple users. Small businesses that need a simple web presence, personal websites, and blogs that only require a few resources are good candidates for shared hosting.

Advantages of Shared Hosting

Shared hosting is a cost-effective alternative for hosting your website. You can split the expenses among multiple users by sharing server space with other sites. The savings stem from a statistical pooling effect that can handle potential traffic surges. Because not all users will experience traffic spikes simultaneously, users can obtain more resources than the total hardware divided by the number of users would suggest.

Shared hosting is also easy to use. You don't need special technical skills to use shared hosting because your hosting provider handles everything. You don't need to worry about maintaining the server and updating software. Most hosts provide an up-to-date PHP version on an Apache or NGINX web server on a Linux OS. Many also offer 1-click installs for popular software like WordPress, Joomla, or TYPO3.

If there are any technical issues, your hosting provider is responsible for troubleshooting the problem and providing a solution.

Disadvantages of Shared Hosting

When you use shared hosting, your hosting provider configures the server to handle a specific number of users and resources. If your website experiences a sudden surge in traffic or requires additional resources, the server may not be able to handle the increased demand, leading to poor website performance. Your website may even crash and go offline.

Shared hosting sites lack flexibility. The resources available to your site are fixed, so if your traffic fluctuates seasonally, you can't add resources when visits to your site are high and scale back resources when your site traffic is lower.

Shared hosting sites can also be vulnerable to security concerns. When multiple websites are hosted on the same server and share the same resources, there is a risk that if one website is hacked or infected with malware, the other websites on the same server could also be affected.

What is Virtual Private Server (VPS) Hosting?

With Virtual Private Server (VPS) hosting, you still share a server with other users. However, the physical server is divided into multiple virtual servers, so it appears as if you have a single server devoted to hosting your site.

Each virtual private server uses its own resources, its own database, and manages how resources are allocated. You can benefit from the decreased costs of sharing a server, but you maintain control over the resources your website uses.

Some hosting providers offer VPS Cloud Hosting, which combines the features of virtual private servers (VPS) and cloud computing. With VPS cloud hosting, the hosting provider uses multiple servers to create a virtual server network that works together to host websites and applications.

Managed and Unmanaged VPS Hosting

You can choose a managed or unmanaged VPS hosting plan depending on how much technical support you need.

With a managed VPS, the hosting provider takes care of all the technical aspects of the server, including server maintenance, security, and software updates. Typically, the hosting provider handles server configurations, software installation, and troubleshooting tasks.

With an unmanaged VPS, you can fully control and customize the server according to your specific needs. However, you are also responsible for handling all technical issues and managing the server's security and maintenance.

An unmanaged VPS is usually less expensive than a managed VPS because the hosting provider doesn't need to offer additional support and management services. However, effectively managing the server requires more technical knowledge and expertise.

For example, if you choose an unmanaged VPS plan, your host will create your virtual machine for you. Some hosts may also offer setup support, such as installing the operating system or a server management platform, such as CPanel or Plesk. These additional services may cost an extra fee.

Usually, however, the rest of the setup is up to you, including installing the operating system, creating user accounts, setting up a firewall for your server, and installing any necessary software. You’ll also need to back up your server regularly to ensure you can restore your data if there is a system failure or some other issue.

Setting up and managing an unmanaged VPS hosting account can be challenging and requires technical expertise. If you are not confident in your ability to manage your server, it may be better to consider a managed VPS hosting account, where the hosting provider takes care of server management tasks for you.

Advantages of VPS Hosting

Whether you select a managed VPS or an unmanaged VPS, VPS hosting offers several advantages over shared hosting. One of the primary benefits of VPS hosting is that you don't need to share resources with other users on the same server. This means that your website or application will not be affected by the activities of other websites on the server, which can help improve performance and reliability.

You have greater control over your server with VPS Hosting because you have root server access. Root server access refers to having full administrative access and control over a server. It is called "root" access because the highest level of administrative privileges on a Unix server is called the "root" user.

With root access, you can access and modify any file on the server, change system settings, install new software packages, create and manage user accounts, and adjust resources.

You also have greater control over your server's security settings and can implement custom security measures to protect your website or application. This can help protect your data and sensitive information from potential security breaches or attacks.

Typically, sites hosted on VPS hosting have better performance than shared hosting sites since you aren't sharing resources with other users. VPS hosting also offers scalability, allowing you to quickly scale up or down your resources as needed to accommodate changes in traffic or demand.

Disadvantages of VPS Hosting

While VPS (Virtual Private Server) hosting offers many benefits, there are also some potential disadvantages.

VPS hosting is generally more expensive than shared hosting because it provides dedicated resources and greater control over the server environment. The higher cost can make VPS hosting a less attractive option for smaller websites or businesses with limited budgets.

If you choose an unmanaged VPS hosting plan, you'll need technical knowledge to manage the server environment. You'll also be responsible for software maintenance and troubleshooting any issues.

What Hosting Solution is Right for Your Project?

Shared hosting is an excellent option for small businesses, personal websites, and blogs that require few resources. Shared hosting is cost-effective and easy to use, making it a good choice for users with little or no technical knowledge.

On the other hand, VPS hosting is an excellent option for businesses or individuals who require more control over the server settings and configurations. If you need dedicated resources, more control over the server, and the ability to scale up or down resources based on your requirements, VPS hosting is the best option.

These questions can help you determine which hosting solution is right for you.

How much traffic do you expect your website to receive? Shared hosting is generally a good solution for sites receiving less than 10,000 visitors monthly. If you expect more than 10,000 visitors each month, VPS is a better solution.
How much control do you need over your server environment? If you require greater control over your server settings and configurations, VPS hosting may be a better option because it offers more flexibility and customizability than shared hosting.
How much technical knowledge do you have? If you understand server configurations, security settings, and software management, VPS hosting may be a good fit for you. Shared or managed VPS hosting may be more user-friendly if you need more technical assistance.
What is your budget? VPS hosting is generally more expensive than shared hosting, so you should consider your budget when deciding which option is best.
What level of security do you require? If you need a higher level of security, VPS hosting may be a better option. VPS hosting offers more control over security settings and allows you to implement custom security measures. However, if security is less of a concern, shared hosting may be more cost-effective.

If you’re a small business with plans to grow, choosing a shared hosting plan is a cost-effective way to get your website up and running, especially if you have a limited budget. It allows you to share server resources with other users, which keeps costs low.

As your business grows and your traffic increases, you may require more resources and control over your hosting environment. That’s when VPS hosting makes sense; it provides dedicated resources, more customization options, and better performance.

If you choose a hosting service that offers both shared hosting and VPS hosting, you have the flexibility to start with shared hosting and then upgrade to VPS hosting when your business needs grow. This allows you to scale your hosting solution as your business grows, without having to switch hosting providers

IONOS offers hosting plans to meet the needs of any size business. They offer a variety of hosting packages, from shared hosting plans with unlimited storage and free domain registration to VPS hosting services with unlimited traffic. IONOS also has a personal consultant to help you select the right plan for your business. Your business is always supported, no matter how big it grows.

Find the right plan for your business: today and in the future.

Effortless Deployments: Linking one Repo to Multiple Runtimes

Simon Morgan — Mon, 27 Feb 2023 15:51:02 +0000

Do you build websites and applications for clients?

Do you reuse much of your code but maintain nearly identical repositories for each production environment?

If yes, then you're not alone. Many developers maintain reusable modules via separate repositories for each customer.

But what if you want to make changes for all customers at once, like security fixes or new features? Updating all web spaces manually, via SSH and deploying updated files, is a huge pain.

A manual approach isn't very scalable either, especially when you’re aiming to offer standardised solutions such as portals, e-commerce stores, plugins, and wikis. This is because the task of manually deploying to each production environment becomes too time-consuming as the number of deployment instances increases.

The great news is, Deploy Now's new feature makes updating mass-customised modules even easier. With just one click, you can now push changes from a single code base to all production environments in a matter of seconds.

Additionally, the feature provides an easy-to-use interface, giving you full visibility of the status of the deployment process and changes in the file system.

Cobra CRM

Cobra CRM provides CRM solutions as a service, and has recently built an events module as an extension to their core offering.

"Our clients kept asking for a smart solution to organise events, be it fundraising dinners, training workshops, or annual general meetings," says Philipp Kreis, CTO at cobra. "With the new online events portal, we wanted to make it as easy and effective as possible to create, publish, and manage attendance for any type of event."

To facilitate this, they chose a managed LAMP stack hosting environment capable of connecting to their GitHub repositories, where they store and manage code. They then contacted the team behind Deploy Now, the only provider that offers automated deployments of PHP projects from GitHub to an automatically provisioned web space.

Philipp collaborated with the Deploy Now engineering team. They co-created a multi-deployment feature to meet cobra's specific needs. The team created the UX and technical concept, keeping Philipp in the feedback loop. Afterwards, cobra's team provided QA testing of the release candidate.

With the help of Deploy Now, cobra successfully launched their events portal.

“Bringing in a new instance from our side is a matter of two clicks now, allowing our clients to be up and running in no time.” -- Philipp Kreis, CTO at cobra

Multi deployments in action

Multi deployments with the latest release of Deploy Now are quick and simple. They are available for starter, static and php projects, provided that each production environment uses packages of the same type.

Set up a Deploy Now project and add extra production deployments on the project page.

Each production deployment receives its own filespace and database (php package), meaning their productive data can differ. Files that need to be kept persistent on the server can be defined in config.yaml under .deploy-now/[project-name]. The number of available staging environments will increase automatically based on the number of production deployments.

To update the code in all production environments, just do one git push to the repository. The build will start and the results will be deployed to all web spaces at the same time.

Give it a try!

A Beginner Developer's Guide to APIs (with Example Project)

Robert Schleinhege — Thu, 23 Feb 2023 09:24:16 +0000

If you're a beginner developer, you may have heard of APIs, but you may want some clarification on what they are and how to use them. This article explains what an API is and why APIs are helpful. There's even a fun example to show you how to use APIs in your programming projects.

What is an API?

An API (Application Programming Interface) allows your program to communicate and retrieve information from other software. An API interprets your request, engages the other application, and delivers a response back to your code. You can use an API to retrieve data or even implement features in your project without having to code them yourself.

For example, if you're developing a stock trading app, you can use an API to retrieve the latest stock prices. Or if your project plays a video, you can use a Media Player API to control your video's display and provide all the controls, such as Pause, Fast Forward, Rewind, etc. Rather than coding all of this functionality, you can let the API handle it and move on to more critical parts of your project.

An API allows you to use tools in your software project without understanding exactly how those tools work. Instead, you only need to know how to request data from the API and what data you'll receive in return.

Examples of APIs

You can use APIs in many different ways. For example, you can use an API to:

Retrieve status updates from social media apps like Facebook and Twitter.
Logging into a service with your Google account information.
Provide directions using Google Maps.
Displaying the weather at a specific location.
Sending texts to customers.
Processing credit card payments.
Checking flight information.

The Benefits of Using an API

There are several benefits of using an API in your code:

Access to remote data. For example, a SportScore API can bring in the latest football scores.
Increased Functionality. You can offer Apple Pay to your customers with the Apple Pay API.
Time Saving. Using the Twilio API, you can use APIs to send text messages to your customers without additional coding.
**Abstraction. **Using an API allows you to take advantage of powerful functions without needing to know precisely how they work. For example, if you want to offer payment options within your app, you can use the PayPal API to handle payments instead of coding your own solution. That way, you can focus on your project's functional requirements.

How to Find APIs

There are hundreds of APIs available for you to use in your projects. API List is a comprehensive list of publicly available APIs and links to the documentation and other important information for each API.

Many APIs require Authentication of some sort, either by using a key or login information. The API documentation will let you know what you’ll need to use the API.

Remote APIs

An API can be local to your machine (such as functions within your coding language). However, as you can see from the previous examples, we generally think of an API as a web-based tool used to communicate with a remote server.

Remote APIs provide several benefits for your project:

No need to store data locally. Instead, you can use an API to search cloud databases for the information you need.
Increased computational power. Instead of using your local machine's processing power, your code can leverage the processing power of a remote device.

Remote APIs frequently follow a standard called Representational State Transfer (REST). An API that follows the REST style is called a RESTful API. Most of the APIs you'll use in your projects can be considered RESTful.

How RESTful APIs Work

RESTful APIs provide the ability to work with objects over the Internet. An object is simply a data structure with a specified set of attributes.

Almost any piece of information can be considered an object, such as:

Customer Information
Product Descriptions
Images
Videos
Documents
Weather Forecasts

RESTful APIs provide access to data via a series of endpoints. An endpoint is a URL the API developer provides where your program can access the information it needs.

When you need to retrieve data from a server via an API, you send a request to the API via the endpoint. In turn, the API retrieves the requested information from the server and returns it to your program as a response.

You can use a RESTful API to retrieve object information (such as retrieving a customer’s address) or to manipulate an object (like updating a customer’s data with their new address).

Communicating with an API

RESTful APIs communicate between your program and the server using HTTP (Hypertext Transfer Protocol), just like your browser does when it requests a specific URL.

For instance, here's what happens when you enter a URL into your browser's address bar:

Your browser requests the specified URL from a server by creating an HTTP request. This request asks to GET the page from the server. The GET command indicates that the browser only receives data from the server. It won't be making any changes.
The server receives the request from the client, generates the requested webpage, and sends back a response to the client containing the HTML code for the requested page.
The browser then renders the page from the HTML code.

Remote APIs work in much the same way.

Your program sends a request to the API on a Server via an HTTP request.
The API on the server responds with the requested data.

Depending on the functionality of the API, an API can support any HTTP request, such as: GET, POST, PUT, PATCH, and DELETE.

How API Data is Structured

API response data is typically structured using JSON (JavaScript Object Notation). JSON is a straightforward, lightweight data exchange format that can be easily understood. Most programming languages support taking a JSON string and turning it into a data object you can use.

Here’s an example JSON response from the Cat API, which returns a random photo of a cat from Tumblr.

[{
"id":"ebv",
"url":"https://cdn2.thecatapi.com/images/ebv.jpg",
"width":176,"height":540,
"breeds":[],
"favourite":{}
}]

How to Use an API (Example with Chuck Norris Facts API)

Once you’ve found an API you want to use, the API documentation tells you the requirements for using the API (such as authentication needs, etc.), how to format requests, and what response you’ll receive.

Let’s look at a fun example. Here’s a simple web page that displays a random fact about the martial artist Chuck Norris whenever the user clicks a button.

There’s an API for that! The Chuck Norris Facts API can present random Chuck Norris facts.

The documentation doesn’t mention any authentication requirements, so we can assume we don’t need any authentication to use the API. You can use this API at any time, just by issuing a request to the endpoint.

To request a random fact about Chuck Norris:

GET https://api.chucknorris.io/jokes/random

Here’s an example of the JSON format response:

{
"icon_url" : "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id" : "NhalBjqFS6COQsskeoWhOQ",
"url" : "",
"value" : "Chuck Norris can create a rock so heavy that he couldn't lift it, and then lift it."
}

To display a random Chuck Norris joke in our project, we need to:

Issue a call to the Chuck Norris Facts API
Wait for the JSON response
Extract the joke text from the response
Display the joke on the page

This Javascript function does just that:

<table>
  <tr>
   <td> &lt;script>
     // define function as async         
     const getJoke = async () => {
            // fetch a random joke from the API and assign it to the constant res
            const res = await fetch('<a href="https://api.chucknorris.io/jokes/random">https://api.chucknorris.io/jokes/random</a>')
            // once we get a response, extract the json from the response and 
            // assign it to random_joke
            const random_joke = await res.json()

            // display the joke on the screen
            document.querySelector('p#joke-text').innerText = random_joke.value
            // hide the placeholder value
            document.querySelector('small').style.display = 'none'
        }
  &lt;/script>
   </td>
  </tr>
  <tr>
   <td>
   </td>
  </tr>
</table>

Here’s the HTML code for the webpage that displays the joke.

 <head>
    <!-- This will show up on the tab in your browser -->
    <title>Chuck Norris Joke of the Day</title>
    <!-- Import bootstrap framework for styling -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #efefef;
        }

        .jokes-container {
            padding: 25px;
            box-shadow: 0 5px 12px rgba(0,0,0,0.4);
            background-color: #fff;
            color: #333;
            border-radius: 5px;
        }
    </style>        
</head>

<body>
    <div class="container text-center">
    <h1>Here's a joke for you from Chuck Norris</h1>
        <div class="jokes-container mb-4">
             <!-- Result from the API goes in this paragraph -->
             <p id="joke-text"></p>
             <!-- Placeholder text -->
             <small class = "text-muted">The joke is going to go here.</small>
        </div>


    <button type="button"
            class="btn btn-primary" onclick="getJoke()">Give Me One
    </button>
    </div>

    <script>
        const getJoke = async () => {
            const res = await fetch('https://api.chucknorris.io/jokes/random')
            const random_joke = await res.json()
            document.querySelector('p#joke-text').innerText = random_joke.value
            document.querySelector('small').style.display = 'none'
        }
    </script>
</body>

Check out https://github.com/ionos-deploy-now/API-example-project to see this example in action.

Automatically Deploy Your Project with Deploy Now

While you’re mastering integrating APIs into your code, you’ll want an easy and convenient way to deploy your projects. Deploy Now offers a convenient toolset to automate builds and deployments for static websites and dynamic PHP applications from GitHub. Deploy Now can automatically create a deployment workflow with GitHub actions and easily deploy your project to IONOS’ secure infrastructure.

Find out how to get started with Deploy Now or get started using a sample project.

An Introduction to Git: The Basics Every Beginning Developer Should Know

Robert Schleinhege — Mon, 13 Feb 2023 08:37:09 +0000

As a developer, you'll need to work with a version control system, especially if you're working on a project with other developers. A version control system stores the project history so we can easily see what code changes have been implemented, when and by whom. If there are issues, a version control system allows you to revert to an earlier code version.

Git is the most popular version control system in the world. According to the 2021 Stack Overflow survey, almost 95% of developers use Git as their Version Control system.

Any professional developer needs to know Git inside and out. As a robust tool with many uses, learning Git can take some time. However, you can get started using Git by learning some basic commands you'll use daily in your projects.

If you’re a beginning developer, this article will teach you how to effectively use Git as a version control system for your project. You’ll learn to understand the Git workflow and the essential Git commands you need to know to get started using Git.

Note: This article assumes you have already installed and configured Git on your local drive.

If you need help installing Git, check out Git basics: first steps with the version control system.
If you want more information on how to configure Git for your project, see What are the most important Git commands?

The Git Workflow

If you want to use Git commands effectively, you need to understand the basic Git workflow.

Git is a distributed version control system. Unlike a centralized version control system, where the project is stored on a central server, each team member using Git has a copy of the project with its history stored on their local machine.
The Git Repository stores all the Project Code. The Git Repository is a database that contains all the project code and the history of all code updates. The Git repository can be stored on your local machine if you are working on a solo project. However, project code is typically stored in a repository on a remote server.

A Basic Git Workflow

You start your git project by creating a git repository to track your files or copying a remote repository onto your local drive.
Once you have a local repository on your drive, you check out the project to a new or existing project branch. This creates a copy of the project files and directories in your working directory, which you can then update with your changes.
You copy the updated files to the staging area when you've completed your changes. The staging area (also called the index) allows you to review your changes before you commit your updates to your local repository.
After you've verified your code in the staging area, you're ready to commit it to the Git repository on your local machine.
You can then push your code to the remote repository.

Git Branches

Any time you make a change to working code, you introduce the possibility of introducing errors to the software project. Git Branches help mitigate this possibility by allowing you to keep code changes separate from the main working code.

Using Git branches provides several advantages:

Multiple developers can work on different features simultaneously without affecting the work of other team members.
As a developer, you can ensure that any new features or bug fixes are working correctly before merging your updates into the main code.
If you are working on multiple features, you can create a separate branch for each feature.

If a project is complex, with many coders working on several different features, the Git workflow can be fairly complex, with multiple code branches and tags to help identify new code versions.

This article will keep things simple, focusing on the commands that support a basic daily Git workflow. (If you want to learn more about branches or tags, see What are the most important Git commands?)

How to Execute Git Commands

There are several ways to execute Git commands:

Via the command line. This is often the fastest and easiest way to execute a Git Command.
Using a code editor. Most code editors include support for basic Git commands, and many code editors offer extensions to support additional git features.
With a Graphical User Interface. The Git website includes a list of several programs that offer a graphical interface for executing Git commands.

In this article, we'll be focusing on entering Git commands directly from the command line. Even if you primarily use another tool to execute Git Commands, there can be times when only a command line interface is available.

The Basic Git Commands Beginning Developers Need to Know

Now that you understand the basics of the Git workflow, it's time to learn the commands you'll need to follow the Git workflow in your projects. Here are some of the basic Git Commands you'll need to know.

1. git init

Git init creates an empty git repository for project tracking. Once the repository is created, any files added to the repository are automatically tracked.

git init

2. git clone

Cloning a remote repository downloads an exact copy of the files in the remote repository to a repository on your computer. From there, you can check out files and make changes.

Cloning also establishes a connection between the remote repository and your local repository, allowing you to push your changes from your local machine to the remote repository and pull changes in the remote repository down to your local copy.

To clone a repository into your current directory:

git clone <[https://remote](https://remote) repository url>

3. git branch

You can use the git branch command to create a new branch, delete an existing branch or to list all project branches.

To create a new branch:

git branch <branch name>

To delete an existing branch:

git branch -d <branch name>

To list all project branches:

git branch

When you list all branches, the current branch is shown in green with an **

4. git checkout

You use git checkout to switch between branches.

git checkout <branch name>

Before switching to a new branch:

Changes in the existing branch must be committed.
The new branch must exist on your local machine.

5. git add

Adds a file (or files) to the staging area. Once updated files are in the staging area, they can be committed to the repository. Using the git add command has the following effect:

Any files in the staging area (or deleted) are then deployed to the repository with the commit command.

The git add command allows multiple files to be listed on the command line and accepts patterns.

To add files to the staging area:

git add <filename>

To add multiple files to the staging area:

git add <filename1>, <filename2>, <filename3>

To add all Javascript files to the staging area:

git add *.js

If you delete a file from your working directory, the add command deletes it from the staging area.
For example:

To add all changed files (including new files, updated files, and deleted files) to the staging area:

git add -A

6. git commit

Committing your changes to your git repository creates a snapshot of your project as it exists at this point in time. Changes in your project are not tracked until they are committed to the repository.

When you issue a git commit command, the repository is updated with the files that are currently stored in the staging area. If you have made changes to the files in your working directory, those changes are not committed to the repository.

You don’t have to wait until you’ve completed all the work on a specific update before you commit your changes to the repository. In fact, you should commit frequently. You risk losing all the hard work you've completed so far if there's an issue with your working directory or an error in your code.

You typically issue a git commit when you’ve reached a logical stopping point or when you want to save a snapshot of your project to preserve the work that’s been completed so far.

You should always attach a message to your commit command so project team members can understand your changes.

To commit all files in the staging area along with a short explanatory message:

git commit -m “Fixed issue #: 62541 - Spelling error.”

All your files in the staging area are committed to the repository and you receive a short confirmation message showing what was changed.

You may need to include more than a short message to explain the changes in your commit. For example, you may have fixed several bugs and you want to list each bug that was fixed.

In that case, you use the following command:

git commit

When you press ENTER, your default editor opens and you can enter as much information as you need to convey about this commit. When you’re done, close the editor window. Your comments are written to the repository along with the changes you made.

7. git status

Git status is a particularly helpful command for beginners. It displays the differences between the working directory, the staging area, the local repository, and the main remote repository if it exists.

To view the current status of your project:

git status

Here’s an example of the information you can determine from a git status command.

In this example, we can see that:

We have committed one change to our local repository that has not been pushed to the remote repository.
We have two files (file1.txt and file2.txt) in the staging area that need to be committed to the remote repository.
However, we also have changes in our working directory. We've modified a file already in the staging area (file1.txt) and created a new file (frontpage.html). If we want to commit these changes to the repository, we'll need to add them to the staging area before issuing a Commit command.

8. git push

After you’ve committed your changes to the local repository, you can push your new snapshot to the remote server. The git push command uploads the committed changes from the specified branch to the same branch in the remote repository.

git push <https://remote repository url> <branch name>

You’re asked to enter your username and password for the remote server. After authentication, your changes are pushed to the remote repository. This may take some time if your project is very large.

9. git merge

Once you’ve created independent branches in your repository, you can integrate these changes into one branch using the git merge command.

Git merge works on the current branch. So if you want to update your main branch with one or more forked branches, use the checkout command to switch to the main branch.

Once you’re working with the branch you wish to update, you can merge another branch into the current branch by using this command:

git merge <branch name>

After merging the two branches, you may want to delete the merged branch:

git branch -d <branch name>

10. git –help

As a beginner to Git, you’ll probably have questions about how to use certain commands. You can get help on any command by adding the -help flag to the end of the command.

For example, if you want to learn more about the git commit command, you can enter:

git commit –help

This displays all the help associated with the commit command.

To see a short summary of the command and its options:

git commit -h

Automatically Deploy Your Project with Deploy Now

If you use GitHub as the Git platform for your web-based development projects, you can automatically deploy your repository whenever you execute a push. You can even select to deploy selected branches to a staging environment for review.

Deploy Now automatically creates a customizable deployment workflow for your project with GitHub Actions to deploy your project to IONOS' secure infrastructure easily.

Find out more about Deploy Now or get started quickly with one of Deploy Now’s sample projects.

How to Choose the Best Host for Your GitHub Blog

Robert Schleinhege — Wed, 14 Dec 2022 09:04:55 +0000

If you're a developer, you know that GitHub is the go-to platform for version control and code collaboration. These features also mean GitHub can be an excellent platform for storing your blog files. And, if you choose the right host for your blog, deploying new blog posts can be as simple as committing your changes.

In this article, we'll discuss the benefits of storing your blog files as a GitHub Repository and how to select the best host for your GitHub blog.

The Benefits of Storing Your Blog Files as a GitHub Repository

GitHub offers several features that make it ideal for bloggers:

Faster Page Speed and Less Server Load. Unlike a blog created with a CMS such as WordPress, blog content is stored on GitHub in a series of files, rather than a database. There's no need to connect to a database to display your blog's content to readers. This translates into faster page speed with less load on the server.
Automatic Version Control. Storing your blog files with GitHub provides automatic version control. This means you can always go back and view previous versions of your blog. You'll also have a complete record of any changes along with who made them.
Easy Collaboration. If multiple people contribute to your blog, using GitHub makes it easier to manage contributions and edits. New content can be deployed to a staging environment for review and then integrated into the live version.
Multiple Template and Plug-In Options. Because GitHub is a widely used platform, there is a good chance that someone else has already created a theme or plugin that you can use for your blog.

Options for Hosting Your GitHub Blog

Once you've created your GitHub blog, you'll need to find a host to serve your blog content out to the Internet. You have a few options for hosting your GitHub blog, depending on your needs.

Self-Hosting. Many developers host their blogs on their own servers. If you are already running a private web server, or if you want more control than you have using a hosting service, you may choose to self-host your blog. There are a variety of tools you can use to help automate your blog's workflow.
GitHub Pages. GitHub offers a free hosting solution called GitHub Pages. GitHub Pages works with Jekyll, a popular static site generator. Your blog content is automatically deployed to GitHub Pages whenever you push your changes to your GitHub repository. GitHub Pages is an excellent solution for a small blog, but you may run into limitations as you grow.
Shared Hosting with GitHub Support. Deploy Now from IONOS allows you to deploy static sites and PHP apps directly via GitHub. Your blog is stored on IONOS reliable shared hosting infrastructure in Europe and North America.

How to Choose a Hosting Solution for Your GitHub Blog

Choosing the right host for your GitHub Blog depends on your needs and plans for your blog. This chart can help you decide which hosting solution is right for your blog.

FEATURES	SELF-HOSTED	GITHUB PAGES	DEPLOY NOW
Pricing	$$$	FREE (with restrictions) ¹	$4.00/Month
Total Control of Environment	✓
HTTPS Support	✓	✓	✓
Custom Domain Support		✓	✓
Automatic Deployment		✓	✓
Auto Deploy to Staging Environment			✓
Automatic Deployment from Static Site Generator		Jekyll ²	Jekyll, Hugo, Gatsby, Gridsome, Docusaurus, Vuepress, Vitepress, NuxtJS (static), NextJS (static), Hexo, Metalsmith, 11ty, UmiJS, Astro, Scully, ElderJS, Middleman, Nanoc, Pelican, mkdocs, Jigsaw, Sculpin
Private Repository Support		With Upgraded Plan ³	✓
Deploy One Branch to Multiple Environments			✓
Auto Deploy Dynamic PHP Environments			✓
Database Support	Manual Configuration	Maria DB	✓
Available Storage	Subject to Hardware Constraints	1 GB	10 GB
Bandwidth Support	Subject to Hardware Constraints	approx 100 GB/month	Unmetered
¹GitHub Pages cannot be used for online business, e-commerce site, or commercial purposes. ²Must manually create GitHub Actions to deploy with other static site generators. ³ Support for Private Repositories only available with GitHub Pro, GitHub Team, or GitHub Enterprise

Deploy Now: The Hosting Solution That Automates Deploying Directly from GitHub

IONOS’ Deploy Now analyzes your files and automatically builds a customizable workflow to automate deploying your blog to IONOS’ secure and reliable hosting platform. With Deploy Now, you can automatically deploy your blog updates each time you create a post or make a change to your blog.

Get started today by learning more about Deploy Now or creating a sample project.

Laravel vs. Symfony: Which Framework is right for your project?

Robert Schleinhege — Mon, 05 Dec 2022 08:42:57 +0000

Many web developers choose PHP frameworks because they are reliable and efficient. Although there are several PHP frameworks available, Laravel and Symfony are two of the most popular frameworks.

Both frameworks have pros and cons, so how can you decide which framework is suitable for your project? In this article, we’ll compare Laravel vs. Symfony and help provide some guidance so you can pick the framework that’s right for your project.

What is Laravel?

Laravel is a PHP Framework that aids with creating web apps by combining components from several different frameworks. In fact, Laravel uses several Symfony components. Released in 2011, Laravel is known for its easy-to-use coding style and features that save time during the development process.

Laravel is often used by small- to medium-sized businesses or startups who need to get their product off the ground quickly.

What is Symfony?

Symfony is both an Application Framework and a set of reusable components. Released in 2005, Symfony is a reliable and mature framework with robust components that create a stable foundation for even large-scale projects. Symfony is also highly modular and flexible, allowing developers to customize their applications depending on the needs of each individual project. It is mainly used for complex enterprise projects.

Laravel and Symfony Similarities

Both Laravel and Symfony are open-source PHP frameworks and share many features, including:

Object Relational Mapping (ORM)
MVC (Model–View–Controller) Architecture
Cross-Platform support
CLI Code Generation
Multi-user Support
Internationalization Support
Template Engines

Laravel and Symfony Differences

While the two frameworks share many similarities, there are also significant differences. We’ll discuss some of the most striking differences between the two frameworks.

Performance

According to benchmarking tests conducted by ThinkMobile, the average loading time for websites built using Laravel is around 60 milliseconds, while websites built using Symfony loaded in 250 milliseconds.

Laravel sites load faster because Laravel offers a set of unified APIs for caching views which means the developer can take advantage of faster performance with no extra coding. Symfony can be tweaked to provide faster load times, which takes more time to set up but can be customized to your project.

Scalability

Symfony shines when it comes to scalability. Symfony’s modular system means that applications can be tailored to each specific project, allowing developers to scale their projects as needed. Laravel projects can be scaled with load balancing and route caching with its Artisan command-line tool. Still, you’ll need to plan your Laravel project carefully if you need to scale it to support an extensive enterprise software system.

Database Support

Laravel supports five databases:

MariaDB 10.3+
MySQL 5.7+
PostgreSQL 10.0+
SQLite 3.8.8+
SQL Server 2017+

With its Doctrine tool, Symfony supports relational databases like MySQL and PostgreSQL and also NoSQL databases like MongoDB.

Both Laravel and Symfony allow for easy data access through the use of object-relational mapping (ORM). Laravel relies on Eloquent, which is based on ActiveRecord, while Symfony uses Doctrine, which follows the DataMapper pattern.

In Eloquent, Models are class extensions that contain all the logic for database access.

Doctrine entities are created as Plain old PHP Objects (POPO). This means that they can be used for various use cases, not just in the ORM context. Because Doctrine uses the DataMapper pattern, database operations can be optimized by queueing them instead of immediately running them.

Both Laravel and Symfony provide support for database scaffolding which creates an Entity Framework model from an existing database.

Templating Engine

Both Laravel and Symfony provide a templating engine. A templating engine allows server-side data to populate an application quickly.

Laravel uses Blade, a simple but powerful templating engine. The Blade templating system compiles all templates into basic PHP code, so there is minimal performance impact on your project.

Symfony uses Twig, a fast, secure, and flexible templating engine. Twig allows the developer to define custom tags and filters and create Domain-Specific Languages (DSL).

Security

Symfony offers robust security features, but they must be explicitly defined, which can sometimes be challenging. Laravel offers more basic security features, but these features are generally more than enough to cover most security issues.

Learning Curve

Laravel is designed to be easy to learn and use. It provides an intuitive API that makes it easier to get up and running quickly. They also offer extensive documentation and community help via their GitHub.

Symfony is more complex, but its modular design allows developers to choose which components they want to use. This allows for more flexibility but also requires a steeper learning curve. Symfony also provides documentation and community help via GitHub.

Popularity

Although you shouldn’t solely pick a framework based on its popularity, it's useful to see how others have put these frameworks to work. A more popular framework also means more developers are available to support your project and a larger community from which to seek help.

This chart summarizes the popularity of each framework.

	Laravel	Symfony
Number of websites using the framework¹	133,610	10,571
G2 Rating²	4.5 Stars	4.5 Stars
GitHub Stars	71.66K	27.7K

¹Source \
²Source

Summary

Ultimately, the decision of which framework to use will boil down to which framework is best suited for your project. Laravel tends to be the choice of developers who want to develop a web app quickly and easily, while Symfony is used most often by developers who are looking to create large-scale, customized enterprise solutions.

This chart summarizes all the points we’ve discussed in this article.

	Laravel	Symfony
Common Features	Object Relational Mapping (ORM) MVC (Model–View–Controller) Architecture Cross-Platform support CLI Code Generation Multi-user Support Internationalization Support Template Engines
Performance (Average Page Load Speed)	60 milliseconds	250 milliseconds
Scalability	Modular system allows developers to scale their projects as needed	Scalable with load balancing and route caching
Database Support	MariaDB 10.3+ MySQL 5.7+ PostgreSQL 10.0+ SQLite 3.8.8+ SQL Server 2017+	Supports relational databases and NoSQL databases
Templating Engine	Blade (simple but powerful)	Twig (fast, secure & flexible)
Security	Robust security; Must be explicitly defined	Automatic security for most basic use cases
Learning Curve	Easy to Learn Extensive Documentation Large GitHub Community	More difficult to learn Basic Documentation Smaller Github Community

Automatically Deploy Your Project with Deploy Now

Whether you use Laravel or Symfony as your framework, Deploy Now offers a convenient toolset to automate builds and deployments for dynamic PHP applications. Deploy Now can automatically create a deployment workflow with GitHub actions and then easily deploy your project to Ionos’ secure infrastructure.

Find out more about deploying your PHP projects via GitHub with Deploy Now or get started with a sample project for Laravel or Symfony.

GitHub Actions: An Introduction

Robert Schleinhege — Thu, 01 Dec 2022 15:16:06 +0000

GitHub Actions allows you to create, manage, and run tasks directly on GitHub. This can be anything from compiling code to deploying a web application. In this article, we will give a quick introduction to GitHub Actions and show you how to get started!

What are GitHub Actions?

Introduced in 2018, GitHub Actions allow you to automate developer workflows. You can use GitHub Actions to create custom software development life cycle workflows directly in your GitHub Repository.

These actions automatically execute when a specified event occurs, such as when a pull request is opened. You can use pre-made GitHub Actions or create your own actions.

GitHub Actions can manage and operate workflows through Linux, Windows, and macOS operating systems. GitHub actions also support a variety of coding languages, such as C, C++, C#, Go, Java, JavaScript, PHP, Python, Ruby, Scala, and TypeScript.

Some of the Benefits of GitHub Actions

GitHub Actions provide several benefits for your software development life cycle:
Automate multi-step tasks that are tedious, complex, or prone to errors
Create custom workflows directly in your GitHub Repository
Fully integrated into GitHub
Discover, create and share actions to perform any job you like
Combine multiple actions into a customized workflow
Build, test, and publish across multiple operating systems, platforms, and languages within the same workflow

How Can You Use GitHub Actions?

GitHub actions can be used for any process that you want to automate. For example, you can use a GitHub action to:

Run an automated task when an issue is opened
Create automated review reminders when a pull request is opened
Send out a welcome message when a new contributor joins your project

Using GitHub Actions as a Continuous Integration/Continuous Delivery (CI/CD) Platform

One of the most common uses for GitHub Actions is defining a Continuous Integration/Continuous Delivery (CI/CD) platform where you can build and test pull requests from a GitHub repository and deploy merged pull requests to production.

Continuous Integration is the process of automating the build and testing of software. This helps to ensure that code is always working and reduces the chances of introducing errors into the codebase. Continuous integration typically involves running automated tests on every change to the codebase and notifying developers if any of the tests fail.

Continuous Delivery keeps the code that has been verified by CI testing ready to be deployed. New code is automatically and constantly integrated, delivered, and deployed throughout an app's development stages.

Since the automated CI/CD approach is used from the initial app integration, through testing, and then through delivery and deployment, the process is commonly referred to as the CI/CD pipeline.

How GitHub Actions Work

Event Driven

GitHub Actions are triggered by a specified event. An event is any action within your GitHub repository. Opening a pull request, creating a new branch, and commenting are all examples of an event. When a defined event is executed, it triggers the beginning of a workflow.

Workflows

A workflow is an automated process composed of a series of jobs. You define a workflow with a YAML file in your depository. Workflows run automatically when triggered by an event in your repository. You can also trigger a workflow manually or on a defined schedule.

Jobs

Jobs are a list of commands (or actions) triggered by a particular workflow. Each command triggered within a job is called an Action. A workflow can have multiple actions working at the same time.
You can create your own actions or use pre-built actions from the GitHub marketplace.

Getting Started with GitHub Actions

You can access GitHub actions from your GitHub repository by clicking Actions in the toolbar. You can then create a new Workflow. GitHub offers preconfigured starter plans that you can customize or you can also create your own YAML file with GitHub Actions commands.

You can view Workflow results by clicking on the Workflow name on the GitHub Actions Page.

Using Deploy Now with GitHub Actions

Ionos’ Deploy Now uses GitHub actions to automate the tasks associated with deploying your static site, single page app, or PHP project to the server each time you execute a Git Push.

Deploy Now analyzes your project and automatically creates a YAML file containing the necessary actions to deploy your project to IONOS reliable shared hosting infrastructure in Europe and North America. This file can be used as is or you can easily modify this file to contain your own actions.

Get started today by learning more about Deploy Now or creating a sample project.

Would you like pay-per-visit web hosting?

Robert Schleinhege — Tue, 25 Oct 2022 13:51:37 +0000

The market standard in web hosting is this: Your website runs on shared resources on a more or less packed server & your priority on the machine and number of parallel processes allowed depends on how much you pay.

If you have a cheap plan, performance can be low and traffic peaks can be cut off.

What if, in each hosting plan...

Your website runs on a containerized setup that gives you all the resources you need to cover huge traffic peaks
Every project receives the same prioritization on the server
You'll get an awesome time to first byte, no matter what
You still pay typical shared hosting prices
But: Your plan has a fixed number of monthly visits, and you need to pay per visits when it is reached

Would you like that? What would be your concerns?

What is a webmention and how do I use it in WordPress?

hagengraf — Fri, 02 Sep 2022 05:43:17 +0000

Especially on the World Wide Web, linking content is one of the most powerful features. Even today, for search engines, the amount of links pointing to a website is one of the most important parameters that tells how popular that website is.

Unfortunately, when you place a link to another website, the other site, i.e. where the link goes, usually doesn't find out about it.

The W3C took care of the matter and in 2017 created a protocol called Webmention. Webmention is a way to automatically notify any URL when a link to it is placed on a website. From the receiving website's perspective, it's a way to receive notification when other websites link to it.

Sounds complicated, but it's quite simple, very practical and popular in social media systems. In many short message and messenger systems there is the possibility to prefix the name of a person with the @ sign and thus "mentions" the person. The person mentioned then receives a notice in the corresponding system that their name has been mentioned and a link to view the "Mention".

So a "Mention" is a notification when a certain event occurs. A "Webmention" then refers more specifically to events on the World Wide Web, such as a mention of a URL (link), an update of a content or even a "Like".

The WordPress Webmention Plugin by Matthias Pfefferle provides the base for this functionality.

To work with Webmentions, you need at least one sender and one receiver. Both need to understand the Webmention protocol.

So you need the functionality in your own WordPress installation and the receiving site in their system. This can be any system that can handle the Webmention protocol, so it doesn't have to be WordPress.

On your site you need to install and activate the Webmention and Semantic linkbacks plugin.

You can easily see if everything works after activation. Write a blog post with a link and look in the HTML source code if the link is mentioned as Webmention.

<link rel="webmention" href="https://hagen.cocoate.com/wp-json/webmention/1.0/endpoint">
<link rel="http://webmention.org/" href="https://hagen.cocoate.com/wp-json/webmention/1.0/endpoint">

So how does it work?

The good news is: it works automatically 🙂.

Perhaps the easiest way to understand it better is to look at an example:
On my private blog in this blog post (https://hagen.cocoate.com/2022/01/21/webmention-test/), I linked to a post from another blog (https://blog.novatrend.ch/2022/01/10/hello-dolly-oder-wie-schreibe-ich-ein-wordpress-plugin/) .

When I save the post on my blog, the other blog receives a notification via the Webmention plugin, which is also installed on the other blog. The "mention" creates a WordPress comment on the receiving Novatrend blog.

The comment is semantically not a comment of course, but a mention (webmention) on another blog and therefore after the comment is approved, either a link or an avatar is simply displayed under the mentions heading (English mentions = German Erwähnungen). You can choose in the settings of the webmention plugin weather you want to display a link or an avatar.

This is how it looks on the other blog. Meanwhile, there are two mentions

So now both pages are linked and a visitor can see the mentions for himself. This is, compared to a search engine result a significant advantage for the site visitor.

Conclusion

From this simple principle, very interesting applications can be created through networking. I'm thinking of timelines, news threads and the like.

If before the linking was only in one direction, with the Webmention plugin it is in both directions. The linked website/person automatically learns about all links and can easily contact the other side.

Try it :)

Tutorial: Automated Lighthouse tests with GitHub Actions

Robert Schleinhege — Fri, 05 Aug 2022 12:48:00 +0000

Are you working on a web project in GitHub and want to know the Lighthouse KPIs of your project after each git push? Here's how.

Our goal is to make your Lighthouse results look like this:

1. Use GitHub Actions to build your code

We would like to calculate Lighthouse KPIs from a website that is actually being built and deployed. GitHub Actions[https://github.com/features/actions] is a nice vehicle to execute these steps right on git push.

Let's take this repo as an example. The project contains a small Vuepress demo site.

The .github/workflows folder contains a .yaml that describes the GitHub Actions workflow. Let's go through this file.

Make sure that your workflow is triggered on Git Push by starting the document with

on:
  - push

Then install the dependencies that you need for your build on the GitHub Actions VM and execute your build steps

      - name: Setup Node
        if: ${{ steps.project.outputs.deployment-enabled == 'true' }}
        uses: actions/setup-node@v1
        with:
          node-version: v16.x

      - name: Build Node assets
        if: ${{ steps.project.outputs.deployment-enabled == 'true' }}
        run: |
          npm ci
          npm run build

2. Deploy it somewhere and store the URL

The next step is to deploy your build results somewhere. In my example project, I use IONOS Deploy Now as the deployment target. Side note: Deploy Now not only provides you with infrastructure, but also helps you setting up your build. This is especially helpful if you are unfamiliar with GitHub Actions syntax.

If you are using Deploy Now, the Deploy to IONOS step of the workflow will, as it says, deploy your website to IONOS servers and provide a URL.

3. Run the Lighthouse test

Let's use this awesome GitHub Action to run the Lighthouse test by adding this to your workflow.

      - name: Audit URL using Lighthouse
        uses: treosh/lighthouse-ci-action@v9
        id: lighthouse
        with:
          urls: |
            https://example.com/
          temporaryPublicStorage: true # upload lighthouse report to the temporary storage

If you are using Deploy Now, you can replace https://example.com/ by ${{ steps.project.outputs.site-url }} to refer to the URL your website was deployed to.

4. Generate a pretty output

GitHub recently announced a nice feature called Job Summaries. They allow you to generate a visual status report in the GitHub UI right after each workflow execution.

As you can see in the image above, I've decorated it with some additional information. The key point is to insert the correct reference to the different KPIs, e.g. ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }} to be able to print them.

      - name: Job successful feedback
        if: ${{ success() }}
        run: |
          echo '### Successfully published to Deploy Now :white_check_mark:' >> $GITHUB_STEP_SUMMARY
          echo "Changes went live under: ${{ steps.project.outputs.site-url }}" >> $GITHUB_STEP_SUMMARY
          echo "Triggered by **${{ github.actor }}** ∙ deployed from **${{ github.ref_name    }}**" >> $GITHUB_STEP_SUMMARY
          echo ' ' >> $GITHUB_STEP_SUMMARY
          echo "**Lighthouse results:**" >> $GITHUB_STEP_SUMMARY
          echo "Performance: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }}" >> $GITHUB_STEP_SUMMARY
          echo "Accessibility: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.accessibility }}" >> $GITHUB_STEP_SUMMARY
          echo "Best-practices: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.best-practices }}" >> $GITHUB_STEP_SUMMARY
          echo "SEO: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.seo }}" >> $GITHUB_STEP_SUMMARY
          echo "PWA: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.pwa }}" >> $GITHUB_STEP_SUMMARY
          echo ' ' >> $GITHUB_STEP_SUMMARY
          echo "[Visit documentation](https://docs.ionos.space/)" >> $GITHUB_STEP_SUMMARY
          echo "[Log in to Deploy Now](https://ionos.space/)" >> $GITHUB_STEP_SUMMARY

Of course, your Lighthouse tests only make sense if your build and deployment were successful. You might want to add a little status report in case your deployment was not successful:

     - name: Job failed feedback
        if: ${{ failure() }}
        run: |
          echo '### Publishing to Deploy Now was not successful :cross:' >> $GITHUB_STEP_SUMMARY
          echo "Unfortunately, the deployment failed." >> $GITHUB_STEP_SUMMARY
          echo "Find help to debug this [here](https://docs.ionos.space/)." >> $GITHUB_STEP_SUMMARY

And that's already it! Enjoy pushing to your repo and check your Lighthouse KPIs after each deployment. And if you like, pay Deploy Now a visit.

What about you? Does this implementation make sense to you?